vinta-schedule-design-system 0.1.0

package/src/ui/radio-group.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn('grid gap-2', className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className='flex items-center justify-center'>
+        <Circle className='fill-primary h-3.5 w-3.5' />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package/src/ui/scheduling-chip.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import { SchedulingChip } from './scheduling-chip';
+
+const meta = {
+  title: 'Components/SchedulingChip',
+  component: SchedulingChip,
+  tags: ['autodocs'],
+  // Leaf label component: `status` options come from schedulingChipVariants' cva
+  // config; `title`/`meta` are ReactNode props but read as text here (§5) — so
+  // they are argTypes, not slots.
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['booked', 'available', 'tentative', 'conflict'],
+    },
+    title: { control: 'text', description: 'Primary chip label' },
+    meta: { control: 'text', description: 'Secondary line under the title' },
+  },
+  args: {
+    status: 'booked',
+    title: 'Prenatal intake',
+    meta: 'Dr. Pires · Room 2',
+  },
+} satisfies Meta<typeof SchedulingChip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <SchedulingChip className='w-56' {...args} />,
+};
+
+export const States: Story = {
+  render: () => (
+    <div className='flex w-56 flex-col gap-2'>
+      <SchedulingChip
+        status='booked'
+        title='Prenatal intake'
+        meta='Dr. Pires · Room 2'
+      />
+      <SchedulingChip
+        status='available'
+        title='Available'
+        meta='Open for booking'
+      />
+      <SchedulingChip
+        status='tentative'
+        title='Hold — follow-up'
+        meta='Pending confirmation'
+      />
+      <SchedulingChip
+        status='conflict'
+        title='Double-booked'
+        meta='2 calendars overlap'
+      />
+    </div>
+  ),
+};
+
+const HOURS = [
+  {
+    t: '9 AM',
+    node: (
+      <SchedulingChip
+        status='booked'
+        title='Prenatal intake'
+        meta='Dr. Pires · Room 2'
+      />
+    ),
+  },
+  {
+    t: '10 AM',
+    node: (
+      <SchedulingChip
+        status='available'
+        title='Available'
+        meta='Open for booking'
+      />
+    ),
+  },
+  {
+    t: '11 AM',
+    node: (
+      <SchedulingChip
+        status='tentative'
+        title='Hold — follow-up'
+        meta='Pending confirmation'
+      />
+    ),
+  },
+  {
+    t: '12 PM',
+    node: (
+      <SchedulingChip
+        status='conflict'
+        title='Double-booked'
+        meta='2 calendars overlap'
+      />
+    ),
+  },
+];
+
+export const InCalendar: Story = {
+  render: () => (
+    <div className='grid w-80 grid-cols-[44px_1fr] gap-x-2.5'>
+      {HOURS.map(({ t, node }) => (
+        <div key={t} className='contents'>
+          <div className='text-muted-foreground pt-1 text-right font-mono text-[11px]'>
+            {t}
+          </div>
+          <div className='border-border border-t py-1'>{node}</div>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/ui/scheduling-chip.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../lib/utils';
+
+/**
+ * Scheduling chip — a calendar event block whose color carries its state:
+ * booked / available / tentative / conflict. Mirrors the Vinta Schedule
+ * design system's "scheduling chips" (left accent bar + soft tint).
+ */
+const schedulingChipVariants = cva(
+  'flex flex-col justify-center gap-0.5 rounded-md border-l-[3px] px-2.5 py-1.5 text-xs font-medium',
+  {
+    variants: {
+      status: {
+        booked:
+          'border-vinta-600 bg-vinta-50 text-vinta-800 dark:border-vinta-400 dark:bg-vinta-950 dark:text-vinta-200',
+        available:
+          'border-teal-600 bg-teal-100 text-teal-700 dark:border-teal-400 dark:bg-teal-950 dark:text-teal-300',
+        tentative:
+          'border-warning bg-amber-100 text-warning dark:border-amber-400 dark:bg-amber-950 dark:text-amber-300',
+        conflict:
+          'border-destructive bg-red-100 text-destructive dark:border-red-400 dark:bg-red-950 dark:text-red-300',
+      },
+    },
+    defaultVariants: {
+      status: 'booked',
+    },
+  }
+);
+
+export interface SchedulingChipProps
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,
+    VariantProps<typeof schedulingChipVariants> {
+  title: React.ReactNode;
+  meta?: React.ReactNode;
+}
+
+function SchedulingChip({
+  className,
+  status,
+  title,
+  meta,
+  ...props
+}: SchedulingChipProps) {
+  return (
+    <div
+      className={cn(schedulingChipVariants({ status }), className)}
+      {...props}
+    >
+      <span className='truncate leading-tight'>{title}</span>
+      {meta ? (
+        <span className='truncate text-[11px] font-normal opacity-80'>
+          {meta}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+export { SchedulingChip, schedulingChipVariants };

package/src/ui/scroll-area.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import { ScrollArea } from './scroll-area';
+
+const meta = {
+  title: 'Components/ScrollArea',
+  component: ScrollArea,
+  tags: ['autodocs'],
+  // Radix ScrollAreaProps: `type`, `dir`, `scrollHideDelay`. Container — the
+  // scrollable content is `children` → slot (§4), so it is not an argType (§5).
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['auto', 'always', 'scroll', 'hover'],
+      description: 'When the scrollbars are visible',
+    },
+    dir: { control: 'inline-radio', options: ['ltr', 'rtl'] },
+    scrollHideDelay: {
+      control: 'number',
+      description: 'ms before scrollbars hide (type="scroll"/"hover")',
+    },
+  },
+  args: { type: 'hover' },
+  parameters: { puck: { slots: ['children'] } },
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const timeSlots = Array.from({ length: 24 }, (_, i) => {
+  const h = 8 + Math.floor(i / 2);
+  const m = i % 2 === 0 ? '00' : '30';
+  return `${String(h).padStart(2, '0')}:${m}`;
+});
+
+export const Default: Story = {
+  render: (args) => (
+    <ScrollArea className='h-64 w-56 rounded-md border' {...args}>
+      <div className='p-3'>
+        <p className='mb-2 text-sm font-medium'>Available slots</p>
+        {timeSlots.map((s) => (
+          <div
+            key={s}
+            className='hover:bg-accent rounded px-2 py-1.5 font-mono text-sm'
+          >
+            {s}
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+};

package/src/ui/scroll-area.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '../lib/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className='h-full w-full rounded-[inherit]'>
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none transition-colors select-none',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className='bg-border relative flex-1 rounded-full' />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/src/ui/select.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from './select';
+
+const meta = {
+  title: 'Components/Select',
+  component: Select,
+  tags: ['autodocs'],
+  // Container: `Select` (Radix Select.Root) renders composed children — the
+  // trigger and the content list — so `children` is a slot and must not also be
+  // an argType (§5). argTypes below are real Select.Root props (§6).
+  argTypes: {
+    defaultValue: {
+      control: 'text',
+      description: 'Value of the item selected by default',
+    },
+    defaultOpen: {
+      control: 'boolean',
+      description: 'Open the menu on mount (uncontrolled)',
+    },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    name: { control: 'text', description: 'Name submitted with the form' },
+    dir: { control: 'inline-radio', options: ['ltr', 'rtl'] },
+  },
+  parameters: { puck: { slots: ['children'] } },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Select {...args}>
+      <SelectTrigger className='w-64'>
+        <SelectValue placeholder='Pick a calendar' />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Connected calendars</SelectLabel>
+          <SelectItem value='google'>Google Calendar</SelectItem>
+          <SelectItem value='outlook'>Outlook</SelectItem>
+          <SelectItem value='ical'>Apple iCloud</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+};

package/src/ui/select.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'border-input ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className='h-4 w-4 opacity-50' />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className='h-4 w-4' />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className='h-4 w-4' />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] origin-[--radix-select-content-transform-origin] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className='absolute right-2 flex h-3.5 w-3.5 items-center justify-center'>
+      <SelectPrimitive.ItemIndicator>
+        <Check className='h-4 w-4' />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

package/src/ui/sheet.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from './sheet';
+import { Button } from './button';
+
+const meta = {
+  title: 'Components/Sheet',
+  // `component:` is deliberately omitted: Sheet re-exports Radix's Dialog Root,
+  // whose displayName is 'Dialog' and would not match the title leaf 'Sheet'
+  // (§7). The leaf still resolves through the named `Sheet` import.
+  tags: ['autodocs'],
+  // Radix DialogProps: `open`/`defaultOpen`/`modal`/`onOpenChange`. `side` is a
+  // SheetContent prop, not a root prop, so it is not curated here. `children`
+  // (trigger + content) is the composed slot (§4).
+  argTypes: {
+    defaultOpen: {
+      control: 'boolean',
+      description: 'Open the sheet on mount (uncontrolled)',
+    },
+    modal: {
+      control: 'boolean',
+      description: 'Trap focus and block outside interaction',
+    },
+  },
+  args: { defaultOpen: false, modal: true },
+  parameters: { puck: { slots: ['children'] } },
+} satisfies Meta<typeof Sheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Sheet {...args}>
+      <SheetTrigger asChild>
+        <Button variant='outline'>Open details</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Appointment details</SheetTitle>
+          <SheetDescription>Dr. Lopez · Mon 9:00 AM</SheetDescription>
+        </SheetHeader>
+        <div className='text-muted-foreground px-4 py-2 text-sm'>
+          Edit the visit, add notes, or reassign the provider.
+        </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button>Done</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+};