vinta-schedule-design-system 0.1.0

package/src/ui/alert-dialog.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '../lib/utils';
+import { buttonVariants } from './button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.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}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-background 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/ui/alert.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '../story-types';
+import { CalendarClock, TriangleAlert } from 'lucide-react';
+
+import { Alert, AlertDescription, AlertTitle } from './alert';
+
+const meta = {
+  title: 'Components/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  // `variant` (cva, alert.tsx) is the only real scalar prop. Alert composes an
+  // icon + AlertTitle + AlertDescription through `children`, so `children` is a
+  // slot and must never also be an argTypes key (SLOT_ARGTYPE_COLLISION).
+  argTypes: {
+    variant: { control: 'inline-radio', options: ['default', 'destructive'] },
+  },
+  args: { variant: 'default' },
+  parameters: { puck: { slots: ['children'] } },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Alert {...args} className='w-96'>
+      <CalendarClock className='h-4 w-4' />
+      <AlertTitle>Sync complete</AlertTitle>
+      <AlertDescription>
+        Your Google Calendar is up to date as of a moment ago.
+      </AlertDescription>
+    </Alert>
+  ),
+};
+
+export const Destructive: Story = {
+  args: { variant: 'destructive' },
+  render: (args) => (
+    <Alert {...args} className='w-96'>
+      <TriangleAlert className='h-4 w-4' />
+      <AlertTitle>Booking conflict</AlertTitle>
+      <AlertDescription>
+        This slot overlaps an existing appointment. Pick another time.
+      </AlertDescription>
+    </Alert>
+  ),
+};

package/src/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role='alert'
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 leading-none font-medium tracking-tight', className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };

package/src/ui/avatar.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import { Avatar, AvatarFallback, AvatarImage } from './avatar';
+
+const meta = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  // Radix's Avatar root (`AvatarProps extends PrimitiveSpanProps`) declares no
+  // props of its own: `src`/`alt` belong to AvatarImage and the initials belong
+  // to AvatarFallback — both composed through the `children` slot (§3). The one
+  // real, forwarded scalar left on the root is its accessible name.
+  // `className`/`style` stay unexposed (§6).
+  argTypes: {
+    'aria-label': {
+      control: 'text',
+      description: 'Accessible name for the avatar',
+    },
+  },
+  parameters: { puck: { slots: ['children'] } },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { 'aria-label': 'Dr. Lopez' },
+  render: (args) => (
+    <Avatar {...args}>
+      <AvatarImage src='https://i.pravatar.cc/80?img=12' alt='Dr. Lopez' />
+      <AvatarFallback>DL</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Fallback: Story = {
+  args: { 'aria-label': 'Jane Doe' },
+  render: (args) => (
+    <Avatar {...args}>
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Group: Story = {
+  render: () => (
+    <div className='flex -space-x-2'>
+      {['1', '5', '9', '12'].map((i) => (
+        <Avatar key={i} className='ring-background ring-2'>
+          <AvatarImage src={`https://i.pravatar.cc/80?img=${i}`} alt='' />
+          <AvatarFallback>U{i}</AvatarFallback>
+        </Avatar>
+      ))}
+    </div>
+  ),
+};

package/src/ui/avatar.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '../lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'bg-muted flex h-full w-full items-center justify-center rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/ui/badge.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '../story-types';
+import { Check, Clock, TriangleAlert, Video } from 'lucide-react';
+
+import { Badge, BadgeDot } from './badge';
+
+const meta = {
+  title: 'Components/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  // Leaf label component. `variant` options are read straight off badgeVariants'
+  // cva config; `children` is the label — an editable string here, NOT a slot
+  // (§5: a name may never be both an argType and a slot).
+  argTypes: {
+    children: { control: 'text', description: 'Badge label' },
+    variant: {
+      control: 'select',
+      options: [
+        'default',
+        'secondary',
+        'destructive',
+        'outline',
+        'info',
+        'success',
+        'warning',
+        'danger',
+        'teal',
+      ],
+    },
+  },
+  args: { children: 'Confirmed', variant: 'default' },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Solid: Story = {
+  render: () => (
+    <div className='flex flex-wrap items-center gap-2'>
+      <Badge>Pro</Badge>
+      <Badge variant='secondary'>Secondary</Badge>
+      <Badge variant='destructive'>Conflict</Badge>
+      <Badge variant='outline'>Virtual</Badge>
+    </div>
+  ),
+};
+
+export const SoftColors: Story = {
+  render: () => (
+    <div className='flex flex-wrap items-center gap-2'>
+      <Badge variant='info'>Calendar group</Badge>
+      <Badge variant='success'>Synced</Badge>
+      <Badge variant='warning'>Tentative</Badge>
+      <Badge variant='danger'>Conflict</Badge>
+      <Badge variant='teal'>42 available</Badge>
+    </div>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <div className='flex flex-wrap items-center gap-2'>
+      <Badge variant='success'>
+        <Check />
+        Confirmed
+      </Badge>
+      <Badge variant='warning'>
+        <Clock />
+        Pending
+      </Badge>
+      <Badge variant='danger'>
+        <TriangleAlert />
+        Conflict
+      </Badge>
+      <Badge variant='outline'>
+        <Video />
+        Telehealth
+      </Badge>
+    </div>
+  ),
+};
+
+export const WithStatusDot: Story = {
+  render: () => (
+    <div className='flex flex-wrap items-center gap-2'>
+      <Badge variant='success'>
+        <BadgeDot />
+        Synced
+      </Badge>
+      <Badge variant='warning'>
+        <BadgeDot />
+        Tentative
+      </Badge>
+      <Badge variant='danger'>
+        <BadgeDot />
+        Conflict
+      </Badge>
+      <Badge variant='info'>
+        <BadgeDot />
+        Booked
+      </Badge>
+    </div>
+  ),
+};

package/src/ui/badge.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-medium leading-normal transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 [&>svg]:size-3 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        // Solid
+        default:
+          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+        // Soft tints — scheduling / status palette
+        info: 'border-transparent bg-vinta-50 text-vinta-700',
+        success: 'border-transparent bg-green-100 text-success',
+        warning: 'border-transparent bg-amber-100 text-warning',
+        danger: 'border-transparent bg-red-100 text-destructive',
+        teal: 'border-transparent bg-teal-100 text-teal-700',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+/** Small leading status dot — pair with a soft Badge variant. */
+function BadgeDot({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cn('size-1.5 shrink-0 rounded-full bg-current', className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, BadgeDot, badgeVariants };

package/src/ui/breadcrumb.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from './breadcrumb';
+
+const meta = {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+  // The Breadcrumb root had no scalar prop of its own (its declared
+  // `separator?: ReactNode` was never rendered — it leaked onto the <nav>). It
+  // is now a real, rendered `separator` variant shared with every childless
+  // BreadcrumbSeparator through context. `children` (the trail) is a slot.
+  argTypes: {
+    separator: {
+      control: 'inline-radio',
+      options: ['chevron', 'slash', 'dot'],
+      description: 'Glyph rendered between crumbs',
+    },
+  },
+  args: { separator: 'chevron' },
+  parameters: { puck: { slots: ['children'] } },
+} satisfies Meta<typeof Breadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Breadcrumb {...args}>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href='#'>Calendars</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href='#'>Cardiology</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Dr. Lopez</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};
+
+export const SlashSeparator: Story = {
+  args: { separator: 'slash' },
+  render: (args) => (
+    <Breadcrumb {...args}>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href='#'>Calendars</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Cardiology</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};