vinta-schedule-design-system 0.1.0

package/src/ui/label.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import { Label } from './label';
+import { Input } from './input';
+
+const meta = {
+  title: 'Components/Label',
+  component: Label,
+  tags: ['autodocs'],
+  // `children` is the label text — an editable string here, NOT a slot, so
+  // there is no SLOT_ARGTYPE_COLLISION (§5). `htmlFor` is the real
+  // `LabelPrimitive.Root` prop that wires the label to its control.
+  argTypes: {
+    children: { control: 'text', description: 'Label text' },
+    htmlFor: {
+      control: 'text',
+      description: 'id of the form control this label describes',
+    },
+  },
+  args: { children: 'Patient name' },
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithInput: Story = {
+  render: () => (
+    <div className='grid w-72 gap-2'>
+      <Label htmlFor='name'>Patient name</Label>
+      <Input id='name' placeholder='Jane Doe' />
+    </div>
+  ),
+};

package/src/ui/label.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../lib/utils';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/ui/navigation-menu.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from './navigation-menu';
+
+const meta = {
+  title: 'Components/NavigationMenu',
+  component: NavigationMenu,
+  tags: ['autodocs'],
+  // Radix NavigationMenu.Root scalars (`value` / `onValueChange` are
+  // controlled-mode only). `children` (the NavigationMenuList) is composed
+  // content → a slot; the root also renders its own viewport after it.
+  argTypes: {
+    orientation: {
+      control: 'inline-radio',
+      options: ['horizontal', 'vertical'],
+    },
+    dir: { control: 'inline-radio', options: ['ltr', 'rtl'] },
+    defaultValue: {
+      control: 'text',
+      description: 'Value of the item open on first render',
+    },
+    delayDuration: {
+      control: 'number',
+      description: 'Ms from pointer-enter until the menu opens',
+    },
+    skipDelayDuration: {
+      control: 'number',
+      description: 'Ms the user has to move between items without a delay',
+    },
+  },
+  args: { orientation: 'horizontal', delayDuration: 200 },
+  parameters: { puck: { slots: ['children'] } },
+} satisfies Meta<typeof NavigationMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <NavigationMenu {...args}>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Product</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className='grid w-64 gap-1 p-3'>
+              <li>
+                <NavigationMenuLink className='hover:bg-accent block rounded-md p-2 text-sm'>
+                  Calendar sync
+                </NavigationMenuLink>
+              </li>
+              <li>
+                <NavigationMenuLink className='hover:bg-accent block rounded-md p-2 text-sm'>
+                  Booking pages
+                </NavigationMenuLink>
+              </li>
+              <li>
+                <NavigationMenuLink className='hover:bg-accent block rounded-md p-2 text-sm'>
+                  Availability
+                </NavigationMenuLink>
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink className='px-3 py-2 text-sm font-medium'>
+            Pricing
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  ),
+};

package/src/ui/navigation-menu.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { cva } from 'class-variance-authority';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative z-10 flex max-w-max flex-1 items-center justify-center',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      'group flex flex-1 list-none items-center justify-center space-x-1',
+      className
+    )}
+    {...props}
+  />
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent'
+);
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), 'group', className)}
+    {...props}
+  >
+    {children}{' '}
+    <ChevronDown
+      className='relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180'
+      aria-hidden='true'
+    />
+  </NavigationMenuPrimitive.Trigger>
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full md:absolute md:w-auto',
+      className
+    )}
+    {...props}
+  />
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn('absolute top-full left-0 flex justify-center')}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+));
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+      className
+    )}
+    {...props}
+  >
+    <div className='bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md' />
+  </NavigationMenuPrimitive.Indicator>
+));
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName;
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+};

package/src/ui/pagination.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from './pagination';
+
+const meta = {
+  title: 'Components/Pagination',
+  component: Pagination,
+  tags: ['autodocs'],
+  // The Pagination root is a bare <nav> and had no scalar prop of its own, so a
+  // real `align` prop was added (pagination.tsx) rather than faking one — it
+  // drives the nav's justify-* and was previously hard-coded to center.
+  // `children` (the page list) is composed content → a slot.
+  argTypes: {
+    align: {
+      control: 'inline-radio',
+      options: ['start', 'center', 'end'],
+      description: 'Horizontal alignment of the page list',
+    },
+  },
+  args: { align: 'center' },
+  parameters: { puck: { slots: ['children'] } },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Pagination {...args}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href='#' />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href='#'>1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href='#' isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href='#'>3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href='#' />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  ),
+};

package/src/ui/pagination.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+import { ButtonProps, buttonVariants } from './button';
+
+export interface PaginationProps extends React.ComponentProps<'nav'> {
+  /**
+   * Horizontal alignment of the page list inside the nav. Defaults to centered.
+   */
+  align?: 'start' | 'center' | 'end';
+}
+
+const PAGINATION_ALIGN: Record<
+  NonNullable<PaginationProps['align']>,
+  string
+> = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+};
+
+const Pagination = ({
+  className,
+  align = 'center',
+  ...props
+}: PaginationProps) => (
+  <nav
+    role='navigation'
+    aria-label='pagination'
+    className={cn('mx-auto flex w-full', PAGINATION_ALIGN[align], className)}
+    {...props}
+  />
+);
+Pagination.displayName = 'Pagination';
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn('flex flex-row items-center gap-1', className)}
+    {...props}
+  />
+));
+PaginationContent.displayName = 'PaginationContent';
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn('', className)} {...props} />
+));
+PaginationItem.displayName = 'PaginationItem';
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'a'>;
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? 'page' : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = 'PaginationLink';
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label='Go to previous page'
+    size='default'
+    className={cn('gap-1 pl-2.5', className)}
+    {...props}
+  >
+    <ChevronLeft className='h-4 w-4' />
+    <span>Previous</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label='Go to next page'
+    size='default'
+    className={cn('gap-1 pr-2.5', className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className='h-4 w-4' />
+  </PaginationLink>
+);
+PaginationNext.displayName = 'PaginationNext';
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    aria-hidden
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className='h-4 w-4' />
+    <span className='sr-only'>More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};

package/src/ui/popover.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+
+import { cn } from '../lib/utils';
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot='popover' {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot='popover-trigger' {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot='popover-content'
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot='popover-anchor' {...props} />;
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='popover-header'
+      className={cn('flex flex-col gap-1 text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+  return (
+    <div
+      data-slot='popover-title'
+      className={cn('font-medium', className)}
+      {...props}
+    />
+  );
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot='popover-description'
+      className={cn('text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+};

package/src/ui/progress.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import { Progress } from './progress';
+
+const meta = {
+  title: 'Components/Progress',
+  component: Progress,
+  tags: ['autodocs'],
+  // Leaf: Radix ProgressProps exposes `value` and `max` (numbers). It renders no
+  // composed children, so NO slot is declared (§4).
+  argTypes: {
+    value: { control: 'number', description: 'Current progress value' },
+    max: { control: 'number', description: 'Maximum value (defaults to 100)' },
+  },
+  args: { value: 60, max: 100 },
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <Progress className='w-80' {...args} />,
+};
+
+export const Steps: Story = {
+  render: () => (
+    <div className='flex w-80 flex-col gap-4'>
+      <Progress value={25} />
+      <Progress value={50} />
+      <Progress value={100} />
+    </div>
+  ),
+};

package/src/ui/progress.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+import { cn } from '../lib/utils';
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className='bg-primary h-full w-full flex-1 transition-all'
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

package/src/ui/radio-group.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import { RadioGroup, RadioGroupItem } from './radio-group';
+import { Label } from './label';
+
+const meta = {
+  title: 'Components/RadioGroup',
+  component: RadioGroup,
+  tags: ['autodocs'],
+  // Container: RadioGroup renders composed `children` (its RadioGroupItems), so
+  // `children` is a slot — and therefore must NOT also appear in argTypes (§5).
+  // The argTypes below are real `RadioGroup.Root` props (§6: no className).
+  argTypes: {
+    defaultValue: {
+      control: 'text',
+      description: 'Value of the item checked by default',
+    },
+    orientation: {
+      control: 'inline-radio',
+      options: ['horizontal', 'vertical'],
+    },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    loop: {
+      control: 'boolean',
+      description: 'Wrap keyboard focus from last item back to first',
+    },
+    name: { control: 'text', description: 'Name submitted with the form' },
+  },
+  args: { defaultValue: '30' },
+  parameters: { puck: { slots: ['children'] } },
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <RadioGroup {...args} className='gap-3'>
+      {[
+        { v: '15', l: '15 minutes' },
+        { v: '30', l: '30 minutes' },
+        { v: '60', l: '1 hour' },
+      ].map(({ v, l }) => (
+        <div key={v} className='flex items-center gap-2'>
+          <RadioGroupItem value={v} id={`dur-${v}`} />
+          <Label htmlFor={`dur-${v}`}>{l}</Label>
+        </div>
+      ))}
+    </RadioGroup>
+  ),
+};