vinta-schedule-design-system 0.1.0

package/src/ui/sheet.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  }
+);
+
+interface SheetContentProps
+  extends
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className='ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'>
+        <X className='h-4 w-4' />
+        <span className='sr-only'>Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-foreground text-lg font-semibold', className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

package/src/ui/skeleton.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import { Skeleton } from './skeleton';
+
+const meta = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+  // Skeleton is a bare styled div (`React.HTMLAttributes<HTMLDivElement>`) — it
+  // has NO domain prop of its own: size/shape are driven purely by className,
+  // which must never be exposed (§6). Nothing was fabricated; the only real,
+  // forwarded scalar worth editing is the accessible loading label. It renders
+  // no composed content → no slot (§4).
+  argTypes: {
+    'aria-label': {
+      control: 'text',
+      description: 'Accessible label announced while content loads',
+    },
+  },
+  args: { 'aria-label': 'Loading' },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <Skeleton className='h-6 w-48' {...args} />,
+};
+
+export const Card: Story = {
+  render: () => (
+    <div className='flex w-80 items-center gap-4'>
+      <Skeleton className='h-12 w-12 rounded-full' />
+      <div className='flex-1 space-y-2'>
+        <Skeleton className='h-4 w-3/4' />
+        <Skeleton className='h-4 w-1/2' />
+      </div>
+    </div>
+  ),
+};

package/src/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from '../lib/utils';
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('bg-primary/10 animate-pulse rounded-md', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/src/ui/sonner.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '../story-types';
+import { toast } from 'sonner';
+
+import { Toaster } from './sonner';
+import { Button } from './button';
+
+const meta = {
+  // Title leaf must match the real named export — the component is `Toaster`,
+  // so the old 'Components/Sonner (Toast)' leaf was invalid (§7).
+  title: 'Components/Toaster',
+  component: Toaster,
+  tags: ['autodocs'],
+  // Leaf: sonner's ToasterProps. It renders the toast viewport, never composed
+  // children → no slot (§4). `className`/`style` are excluded (§6).
+  argTypes: {
+    position: {
+      control: 'select',
+      options: [
+        'top-left',
+        'top-center',
+        'top-right',
+        'bottom-left',
+        'bottom-center',
+        'bottom-right',
+      ],
+    },
+    theme: { control: 'inline-radio', options: ['light', 'dark', 'system'] },
+    richColors: { control: 'boolean' },
+    closeButton: { control: 'boolean' },
+    expand: { control: 'boolean' },
+    duration: { control: 'number', description: 'Toast lifetime in ms' },
+  },
+  args: { position: 'bottom-right', richColors: false, closeButton: false },
+} satisfies Meta<typeof Toaster>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div className='flex flex-wrap gap-3'>
+      <Button onClick={() => toast('Booking saved')}>Default</Button>
+      <Button
+        variant='outline'
+        onClick={() =>
+          toast.success('Appointment confirmed', {
+            description: 'Mon, 9:00–9:30 AM with Dr. Lopez',
+          })
+        }
+      >
+        Success
+      </Button>
+      <Button
+        variant='destructive'
+        onClick={() => toast.error('Sync failed — retrying')}
+      >
+        Error
+      </Button>
+      <Toaster {...args} />
+    </div>
+  ),
+};

package/src/ui/sonner.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner } from 'sonner';
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className='toaster group'
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton:
+            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton:
+            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+        },
+      }}
+      {...props}
+    />
+  );
+};
+// Explicit: bundlers rename this binding (it collides with sonner's own
+// `Toaster`), so the inferred function name cannot be relied on for resolution.
+Toaster.displayName = 'Toaster';
+
+export { Toaster };

package/src/ui/switch.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import { Switch } from './switch';
+import { Label } from './label';
+
+const meta = {
+  title: 'Components/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  // Leaf control: Radix `Switch.Root` renders its own Thumb, so it takes no
+  // composed content — NO slot. Real Radix Root props only (§6).
+  argTypes: {
+    defaultChecked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    name: { control: 'text', description: 'Name submitted with the form' },
+    value: { control: 'text', description: 'Value submitted when checked' },
+  },
+  args: { defaultChecked: true },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div className='flex items-center gap-2'>
+      <Switch id='avail' {...args} />
+      <Label htmlFor='avail'>Accepting bookings</Label>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className='flex items-center gap-2'>
+      <Switch id='dis' disabled />
+      <Label htmlFor='dis'>Disabled</Label>
+    </div>
+  ),
+};

package/src/ui/switch.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+import { cn } from '../lib/utils';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'bg-background pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

package/src/ui/table.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+  TableFooter,
+} from './table';
+
+const meta = {
+  // Leaf normalised to the exported component name and to the 'Components/*'
+  // namespace the rest of the package uses (was 'UI/Table').
+  title: 'Components/Table',
+  component: Table,
+  tags: ['autodocs'],
+  // Table is a plain <table> (`React.HTMLAttributes<HTMLTableElement>`) — it has
+  // no design-system prop of its own. Nothing was invented: the curated keys are
+  // real, forwarded HTML attributes. The rows/headers are `children` → slot (§4).
+  argTypes: {
+    'aria-label': {
+      control: 'text',
+      description: 'Accessible name for the table',
+    },
+    id: { control: 'text', description: 'DOM id on the <table> element' },
+  },
+  parameters: { puck: { slots: ['children'] } },
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { 'aria-label': 'Recent invoices' },
+  render: (args) => (
+    <div className='p-6'>
+      <Table {...args}>
+        <TableCaption>A list of recent invoices.</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Invoice</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Method</TableHead>
+            <TableHead className='text-right'>Amount</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {[
+            {
+              id: 'INV001',
+              status: 'Paid',
+              method: 'Credit Card',
+              amount: '$250.00',
+            },
+            {
+              id: 'INV002',
+              status: 'Pending',
+              method: 'PayPal',
+              amount: '$150.00',
+            },
+            {
+              id: 'INV003',
+              status: 'Unpaid',
+              method: 'Bank Transfer',
+              amount: '$350.00',
+            },
+          ].map((invoice) => (
+            <TableRow key={invoice.id}>
+              <TableCell className='font-medium'>{invoice.id}</TableCell>
+              <TableCell>{invoice.status}</TableCell>
+              <TableCell>{invoice.method}</TableCell>
+              <TableCell className='text-right'>{invoice.amount}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell colSpan={3}>Total</TableCell>
+            <TableCell className='text-right'>$750.00</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div>
+  ),
+};

package/src/ui/table.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div data-slot='table-wrapper' className='relative w-full overflow-auto'>
+    <table
+      ref={ref}
+      data-slot='table'
+      className={cn('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    data-slot='table-header'
+    className={cn('[&_tr]:border-b', className)}
+    {...props}
+  />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    data-slot='table-body'
+    className={cn('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    data-slot='table-footer'
+    className={cn(
+      'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+      className
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    data-slot='table-row'
+    className={cn(
+      'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+      className
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    data-slot='table-head'
+    className={cn(
+      'text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    data-slot='table-cell'
+    className={cn(
+      'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      className
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    data-slot='table-caption'
+    className={cn('text-muted-foreground mt-4 text-sm', className)}
+    {...props}
+  />
+));
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+};

package/src/ui/tabs.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
+
+const meta = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  // Radix Tabs.Root scalars (`value` / `onValueChange` are controlled-mode
+  // only). `children` (TabsList + TabsContent) is composed content → a slot.
+  argTypes: {
+    defaultValue: {
+      control: 'text',
+      description: 'Value of the tab selected on first render',
+    },
+    orientation: {
+      control: 'inline-radio',
+      options: ['horizontal', 'vertical'],
+    },
+    dir: { control: 'inline-radio', options: ['ltr', 'rtl'] },
+    activationMode: {
+      control: 'inline-radio',
+      options: ['automatic', 'manual'],
+      description: 'Select a tab on focus, or only on click/Enter',
+    },
+  },
+  args: {
+    defaultValue: 'upcoming',
+    orientation: 'horizontal',
+    activationMode: 'automatic',
+  },
+  parameters: { puck: { slots: ['children'] } },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Tabs {...args} className='w-96'>
+      <TabsList className='grid w-full grid-cols-3'>
+        <TabsTrigger value='upcoming'>Upcoming</TabsTrigger>
+        <TabsTrigger value='past'>Past</TabsTrigger>
+        <TabsTrigger value='canceled'>Canceled</TabsTrigger>
+      </TabsList>
+      <TabsContent
+        value='upcoming'
+        className='text-muted-foreground pt-3 text-sm'
+      >
+        3 upcoming appointments this week.
+      </TabsContent>
+      <TabsContent value='past' className='text-muted-foreground pt-3 text-sm'>
+        12 appointments in the last 30 days.
+      </TabsContent>
+      <TabsContent
+        value='canceled'
+        className='text-muted-foreground pt-3 text-sm'
+      >
+        No cancellations. Nice.
+      </TabsContent>
+    </Tabs>
+  ),
+};