UI

.changeset/lemon-yaks-show.md

@@ -0,0 +1,25 @@
+---
+'@tszhong0411/utils': minor
+'@tszhong0411/ui': minor
+---
+
+- Updated the image in aspect ratio demo
+- Updated to latest styles of shadcn/ui
+- Updated to `cva` beta
+- Updated introduction in docs
+- Updated code style from `? <component /> : null` to `&& <component />`
+- Updated to use oklch colors.
+- Updated to divide long tailwindcss classes into multiple lines
+- Added `oklab` and `oklch` to known word list.
+- Added Ark UI badges
+- Added `Chart`, `Calendar`
+- Replaced `<Callout />` with `<Alert />`
+- Replaced `<VisuallyHidden />` with `sr-only`
+- Removed `<BlurFade />` and `<BlurImage />`
+- Removed unnecessary `size-4` classes.
+- Removed `<Progress />` which is using `@ark-ui/react`
+- Removed `<Slider />` which is using `@ark-ui/react`
+- Removed `<Combobox />` which is using `@ark-ui/react`
+- Removed `<CommandFooter />`
+- Renamed `toaster` to `sonner`
+- Renamed `getAvatarAbbreviation()` to `getAbbreviation()`

.cspell.json

@@ -11,6 +11,7 @@
     "aceternity",
     "airpods",
     "anishde",
+    "beamer",
     "benoit",
     "bentogrids",
     "bradlc",
@@ -60,6 +61,8 @@
     "nums",
     "nuqs",
     "nuxt",
+    "oklab",
+    "oklch",
     "oliveira",
     "orbstack",
     "paralleldrive",

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

@@ -18,16 +18,17 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.0.1",
-    "@tanstack/react-table": "^8.21.2",
     "@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",
     "next": "^15.3.0",
     "next-themes": "^0.4.6",
     "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

@@ -85,7 +85,7 @@ 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} />
       <EditOnGitHub filePath={_meta.filePath} />

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

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

@@ -0,0 +1,88 @@
+'use client'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@tszhong0411/ui'
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent
+} from '@tszhong0411/ui'
+import { TrendingUpIcon } from 'lucide-react'
+import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+
+const chartData = [
+  { month: 'January', desktop: 186 },
+  { month: 'February', desktop: 305 },
+  { month: 'March', desktop: 237 },
+  { month: 'April', desktop: 73 },
+  { month: 'May', desktop: 209 },
+  { month: 'June', desktop: 214 }
+]
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)'
+  }
+} satisfies ChartConfig
+
+const ChartDemo = () => {
+  return (
+    <Card className='w-full max-w-md'>
+      <CardHeader>
+        <CardTitle>Area Chart</CardTitle>
+        <CardDescription>Showing total visitors for the last 6 months</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig}>
+          <AreaChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey='month'
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value: string) => value.slice(0, 3)}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent indicator='line' />} />
+            <Area
+              dataKey='desktop'
+              type='natural'
+              fill='var(--color-desktop)'
+              fillOpacity={0.4}
+              stroke='var(--color-desktop)'
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className='flex w-full items-start gap-2 text-sm'>
+          <div className='grid gap-2'>
+            <div className='flex items-center gap-2 font-medium leading-none'>
+              Trending up by 5.2% this month <TrendingUpIcon className='size-4' />
+            </div>
+            <div className='text-muted-foreground flex items-center gap-2 leading-none'>
+              January - June 2024
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
+
+export default ChartDemo