UI

.changeset/gentle-toes-stand.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/prettier-plugin-package-json': major
+---
+
+- Migrate from `tsup` to `rslib`

.changeset/spicy-tigers-stay.md

@@ -0,0 +1,26 @@
+---
+'@tszhong0411/ui': major
+---
+
+- Migrate from `tsup` to `rslib`
+- Update the image in aspect ratio demo
+- Update to latest styles of shadcn/ui
+- Update to `cva` beta
+- Update introduction in docs
+- Update code style from `? <component /> : null` to `&& <component />`
+- Update to use oklch colors.
+- Update to divide long tailwindcss classes into multiple lines
+- Update `<DataTable />` to use shadcn-table
+- Add Ark UI badges
+- Add `Chart`, `Calendar`, `Sortable`
+- Add `data-slot` attribute to components
+- Replace `<Callout />` with `<Alert />`
+- Replace `<VisuallyHidden />` with `sr-only`
+- Remove `<BlurFade />` and `<BlurImage />`
+- Remove unnecessary `size-4` classes.
+- Remove `<Progress />` which is using `@ark-ui/react`
+- Remove `<Slider />` which is using `@ark-ui/react`
+- Remove `<Combobox />` which is using `@ark-ui/react`
+- Remove `<CommandFooter />`
+- Rename `toaster` to `sonner`
+- Rename `getAvatarAbbreviation()` to `getAbbreviation()`

.changeset/stupid-tires-repeat.md

@@ -0,0 +1,6 @@
+---
+'@tszhong0411/utils': major
+---
+
+- Migrate from `tsup` to `rslib`
+- Add `get-abbreviation` utility function

.changeset/tame-wolves-drive.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/prettier-config': major
+---
+
+- Migrate from `tsup` to `rslib`

.changeset/whole-trains-hang.md

@@ -0,0 +1,6 @@
+---
+'@tszhong0411/eslint-config': major
+---
+
+- Migrate from `tsup` to `rslib`
+- Remove `eslint-plugin-tailwindcss` completely

.changeset/witty-symbols-ring.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/tsconfig': major
+---
+
+- Update package.json

.cspell.json

@@ -11,6 +11,7 @@
     "aceternity",
     "airpods",
     "anishde",
+    "beamer",
     "benoit",
     "bentogrids",
     "bradlc",
@@ -35,6 +36,7 @@
     "honghong",
     "honghongme",
     "iina",
+    "ilike",
     "innerhtml",
     "jahir",
     "joshwcomeau",
@@ -60,6 +62,8 @@
     "nums",
     "nuqs",
     "nuxt",
+    "oklab",
+    "oklch",
     "oliveira",
     "orbstack",
     "paralleldrive",
@@ -71,6 +75,9 @@
     "reactquery",
     "rharkor",
     "rmiz",
+    "rsbuild",
+    "rslib",
+    "rtishchev",
     "sadman",
     "sakib",
     "sameorigin",
@@ -94,6 +101,7 @@
     "usehooks",
     "vaul",
     "velite",
+    "vitaly",
     "vocs",
     "wakatime",
     "zenorocha"

.github/actions/setup/action.yml

@@ -27,7 +27,7 @@ runs:
           ${{ runner.os }}-pnpm-store-
 
     - name: Cache for Turbo
-      uses: rharkor/caching-for-turbo@v1.5
+      uses: rharkor/caching-for-turbo@v1.8
 
     - name: Install dependencies
       shell: bash

apps/docs/next.config.ts

@@ -44,8 +44,8 @@ const config: NextConfig = {
   async redirects() {
     return [
       {
-        source: '/ui/components',
-        destination: '/ui/components/accordion',
+        source: '/ui',
+        destination: '/ui/accordion',
         permanent: true
       }
     ]

apps/docs/package.json

@@ -17,17 +17,21 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@faker-js/faker": "^9.7.0",
     "@hookform/resolvers": "^5.0.1",
-    "@tanstack/react-table": "^8.21.2",
+    "@tanstack/react-table": "^8.21.3",
     "@tszhong0411/ui": "workspace:*",
     "@tszhong0411/utils": "workspace:*",
-    "class-variance-authority": "^0.7.1",
+    "cva": "^1.0.0-beta.3",
+    "date-fns": "^4.1.0",
     "geist": "^1.3.1",
     "hast-util-to-jsx-runtime": "^2.3.6",
-    "lucide-react": "^0.487.0",
+    "lucide-react": "^0.511.0",
     "next": "^15.3.0",
     "next-themes": "^0.4.6",
+    "nuqs": "^2.4.1",
     "react": "^19.1.0",
+    "react-day-picker": "8.10.1",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.55.0",
     "recharts": "^2.15.2",

apps/docs/src/app/(main)/[[...slug]]/link-badges.tsx

@@ -11,18 +11,18 @@ const LinkBadges = (props: Doc['link'] = {}) => {
 
   return (
     <div className='flex items-center gap-2 pt-4'>
-      {doc ? (
+      {doc && (
         <Link href={doc} className={cn(badgeVariants({ variant: 'secondary' }), 'gap-1')}>
           Docs
           <ExternalLinkIcon className='size-3' />
         </Link>
-      ) : null}
-      {api ? (
+      )}
+      {api && (
         <Link href={api} className={cn(badgeVariants({ variant: 'secondary' }), 'gap-1')}>
           API Reference
           <ExternalLinkIcon className='size-3' />
         </Link>
-      ) : null}
+      )}
     </div>
   )
 }

apps/docs/src/app/(main)/[[...slug]]/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata, ResolvingMetadata } from 'next'
 
 import { allDocs } from 'content-collections'
 import { notFound } from 'next/navigation'
+import { Suspense } from 'react'
 
 import Mdx from '@/components/mdx'
 
@@ -85,9 +86,11 @@ const Page = async (props: PageProps) => {
       <div className='space-y-4'>
         <h1 className='relative text-3xl font-extrabold tracking-tight md:text-4xl'>{title}</h1>
         <p className='text-muted-foreground'>{description}</p>
-        {hasLinks ? <LinkBadges {...link} /> : null}
+        {hasLinks && <LinkBadges {...link} />}
       </div>
-      <Mdx className='my-12' code={code} />
+      <Suspense>
+        <Mdx className='my-12' code={code} />
+      </Suspense>
       <EditOnGitHub filePath={_meta.filePath} />
       <DocsNavigation />
     </div>

apps/docs/src/app/layout.tsx

@@ -5,6 +5,7 @@ import '@/styles/globals.css'
 import { cn } from '@tszhong0411/utils'
 import { GeistMono } from 'geist/font/mono'
 import { GeistSans } from 'geist/font/sans'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
 
 import { SITE_DESCRIPTION, SITE_KEYWORDS, SITE_TITLE, SITE_URL } from '@/lib/constants'
 
@@ -113,12 +114,14 @@ const Layout = (props: LayoutProps) => {
       suppressHydrationWarning
     >
       <body>
-        <Providers>
-          {/* eslint-disable-next-line @eslint-react/dom/no-unknown-property -- custom attribute */}
-          <div vaul-drawer-wrapper='' className='bg-background'>
-            {children}
-          </div>
-        </Providers>
+        <NuqsAdapter>
+          <Providers>
+            {/* eslint-disable-next-line @eslint-react/dom/no-unknown-property -- custom attribute */}
+            <div vaul-drawer-wrapper='' className='bg-background'>
+              {children}
+            </div>
+          </Providers>
+        </NuqsAdapter>
       </body>
     </html>
   )

apps/docs/src/components/demos/alert/alert.tsx

@@ -0,0 +1,14 @@
+import { Alert, AlertDescription, AlertTitle } from '@tszhong0411/ui'
+import { CheckCircle2Icon } from 'lucide-react'
+
+const AlertDemo = () => {
+  return (
+    <Alert className='max-w-md'>
+      <CheckCircle2Icon />
+      <AlertTitle>Success! Your changes have been saved</AlertTitle>
+      <AlertDescription>This is an alert with icon, title and description.</AlertDescription>
+    </Alert>
+  )
+}
+
+export default AlertDemo

apps/docs/src/components/demos/alert/destructive.tsx

@@ -0,0 +1,14 @@
+import { Alert, AlertDescription, AlertTitle } from '@tszhong0411/ui'
+import { AlertCircleIcon } from 'lucide-react'
+
+const AlertDestructiveDemo = () => {
+  return (
+    <Alert variant='destructive' className='max-w-md'>
+      <AlertCircleIcon />
+      <AlertTitle>Something went wrong!</AlertTitle>
+      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
+    </Alert>
+  )
+}
+
+export default AlertDestructiveDemo

apps/docs/src/components/demos/aspect-ratio/aspect-ratio.tsx

@@ -5,9 +5,9 @@ const AspectRatioDemo = () => {
   return (
     <AspectRatio ratio={16 / 9}>
       <Image
-        src='https://images.unsplash.com/photo-1717765911288-5512eba79b41?q=80&w=3270'
+        src='https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80'
+        alt='A smooth, minimalist white background with subtle diagonal light-gray gradients by Drew Beamer'
         fill
-        alt='A grassy field with trees and a mountain in the background, by Benjamin Ashton'
         className='rounded-lg object-cover'
       />
     </AspectRatio>

apps/docs/src/components/demos/breadcrumb/breadcrumb.tsx

@@ -34,7 +34,7 @@ const BreadcrumbDemo = () => {
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbLink href='/ui/components'>Components</BreadcrumbLink>
+          <BreadcrumbLink href='/ui'>Components</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>

apps/docs/src/components/demos/button/icon.tsx

@@ -4,7 +4,7 @@ import { CopyIcon } from 'lucide-react'
 const ButtonIconDemo = () => {
   return (
     <Button variant='outline' size='icon' aria-label='Copy'>
-      <CopyIcon className='size-4' />
+      <CopyIcon />
     </Button>
   )
 }

apps/docs/src/components/demos/button/pending.tsx

@@ -1,7 +1,13 @@
 import { Button } from '@tszhong0411/ui'
+import { LoaderIcon } from 'lucide-react'
 
 const ButtonPendingDemo = () => {
-  return <Button isPending>Pending</Button>
+  return (
+    <Button>
+      <LoaderIcon className='animate-spin' />
+      Pending
+    </Button>
+  )
 }
 
 export default ButtonPendingDemo

apps/docs/src/components/demos/calendar/calendar.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { Calendar } from '@tszhong0411/ui'
+import { useState } from 'react'
+
+const CalendarDemo = () => {
+  const [date, setDate] = useState<Date | undefined>(() => new Date())
+
+  return (
+    <Calendar
+      mode='single'
+      selected={date}
+      onSelect={setDate}
+      className='rounded-md border shadow-sm'
+    />
+  )
+}
+
+export default CalendarDemo

apps/docs/src/components/demos/calendar/range.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import type { DateRange } from 'react-day-picker'
+
+import { Calendar } from '@tszhong0411/ui'
+import { addDays } from 'date-fns'
+import { useState } from 'react'
+
+const CalendarRangeDemo = () => {
+  const [dateRange, setDateRange] = useState<DateRange | undefined>(() => ({
+    from: new Date(new Date().getFullYear(), 0, 12),
+    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30)
+  }))
+  const [range, setRange] = useState<DateRange | undefined>(() => ({
+    from: new Date(new Date().getFullYear(), 0, 12),
+    to: addDays(new Date(new Date().getFullYear(), 0, 12), 50)
+  }))
+
+  return (
+    <div>
+      <Calendar
+        mode='range'
+        defaultMonth={dateRange?.from}
+        selected={dateRange}
+        onSelect={setDateRange}
+        numberOfMonths={2}
+        disabled={(d) => d > new Date() || d < new Date('1900-01-01')}
+        className='rounded-md border shadow-sm'
+      />
+      <Calendar
+        mode='range'
+        defaultMonth={range?.from}
+        selected={range}
+        onSelect={setRange}
+        numberOfMonths={3}
+        className='@4xl:flex hidden rounded-md border shadow-sm [&>div]:gap-5'
+      />
+    </div>
+  )
+}
+
+export default CalendarRangeDemo