vinta-schedule-design-system 0.1.0

package/src/ui/breadcrumb.tsx

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+
+/** Glyph rendered between crumbs by a childless `BreadcrumbSeparator`. */
+export type BreadcrumbSeparatorVariant = 'chevron' | 'slash' | 'dot';
+
+const SeparatorContext =
+  React.createContext<BreadcrumbSeparatorVariant>('chevron');
+
+const SEPARATOR_GLYPH: Record<BreadcrumbSeparatorVariant, React.ReactNode> = {
+  chevron: <ChevronRight />,
+  slash: <span>/</span>,
+  dot: <span>·</span>,
+};
+
+export interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {
+  /**
+   * Separator glyph used by every `BreadcrumbSeparator` in the trail that does
+   * not pass its own children. Defaults to a chevron.
+   */
+  separator?: BreadcrumbSeparatorVariant;
+}
+
+const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
+  ({ separator = 'chevron', ...props }, ref) => (
+    <SeparatorContext.Provider value={separator}>
+      <nav ref={ref} aria-label='breadcrumb' {...props} />
+    </SeparatorContext.Provider>
+  )
+);
+Breadcrumb.displayName = 'Breadcrumb';
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<'ol'>
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+      className
+    )}
+    {...props}
+  />
+));
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<'li'>
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn('inline-flex items-center gap-1.5', className)}
+    {...props}
+  />
+));
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<'a'> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'a';
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn('hover:text-foreground transition-colors', className)}
+      {...props}
+    />
+  );
+});
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<'span'>
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role='link'
+    aria-disabled='true'
+    aria-current='page'
+    className={cn('text-foreground font-normal', className)}
+    {...props}
+  />
+));
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) => {
+  const variant = React.useContext(SeparatorContext);
+
+  return (
+    <li
+      role='presentation'
+      aria-hidden='true'
+      className={cn('[&>svg]:h-3.5 [&>svg]:w-3.5', className)}
+      {...props}
+    >
+      {children ?? SEPARATOR_GLYPH[variant]}
+    </li>
+  );
+};
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    role='presentation'
+    aria-hidden='true'
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className='h-4 w-4' />
+    <span className='sr-only'>More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/src/ui/button.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '../story-types';
+import { CalendarPlus, Loader2 } from 'lucide-react';
+
+import { Button } from './button';
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    // `children` is the button label — a plain editable string here (a leaf,
+    // not a slot). `className`/`style` are deliberately NOT exposed (§6).
+    children: { control: 'text', description: 'Button label' },
+    variant: {
+      control: 'select',
+      options: [
+        'default',
+        'secondary',
+        'destructive',
+        'outline',
+        'ghost',
+        'link',
+      ],
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'default', 'lg', 'xl', 'icon'],
+    },
+    disabled: { control: 'boolean' },
+  },
+  args: { children: 'Book appointment', variant: 'default', size: 'default' },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: () => (
+    <div className='flex flex-wrap items-center gap-3'>
+      <Button>Default</Button>
+      <Button variant='secondary'>Secondary</Button>
+      <Button variant='destructive'>Destructive</Button>
+      <Button variant='outline'>Outline</Button>
+      <Button variant='ghost'>Ghost</Button>
+      <Button variant='link'>Link</Button>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className='flex flex-wrap items-center gap-3'>
+      <Button size='xs'>Extra small</Button>
+      <Button size='sm'>Small</Button>
+      <Button size='default'>Default</Button>
+      <Button size='lg'>Large</Button>
+      <Button size='xl'>Extra large</Button>
+      <Button size='icon' aria-label='Add'>
+        <CalendarPlus />
+      </Button>
+    </div>
+  ),
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <Button>
+      <CalendarPlus />
+      New booking
+    </Button>
+  ),
+};
+
+export const Loading: Story = {
+  render: () => (
+    <Button disabled>
+      <Loader2 className='animate-spin' />
+      Syncing…
+    </Button>
+  ),
+};
+
+export const Disabled: Story = { args: { disabled: true } };

package/src/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        xs: 'h-7 gap-1.5 rounded-sm px-2.5 text-xs [&_svg]:size-3.5',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        default: 'h-9 px-4 py-2',
+        lg: 'h-10 rounded-md px-8',
+        xl: 'h-13 gap-2.5 rounded-lg px-6 text-base [&_svg]:size-5',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/src/ui/card.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from './card';
+import { Button } from './button';
+import { Badge } from './badge';
+
+const meta = {
+  title: 'Components/Card',
+  component: Card,
+  tags: ['autodocs'],
+  // A container still curates scalars: the emptiness check counts argTypes keys
+  // and runs BEFORE slots are read, so slots alone would throw
+  // AUTO_INFERRED_ARGTYPES_ONLY. `padding` is a real prop (not a disabled-key
+  // placeholder) and must not collide with a slot name (SLOT_ARGTYPE_COLLISION).
+  argTypes: {
+    padding: {
+      control: 'select',
+      options: [0, 2, 4, 6, 8, 10, 12],
+      description: 'Padding on the card surface (4px token scale)',
+    },
+  },
+  parameters: { puck: { slots: ['children'] } },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Card className='w-80'>
+      <CardHeader>
+        <CardTitle>Annual checkup</CardTitle>
+        <CardDescription>Dr. Lopez · Cardiology</CardDescription>
+      </CardHeader>
+      <CardContent className='space-y-2 text-sm'>
+        <div className='flex justify-between'>
+          <span className='text-muted-foreground'>When</span>
+          <span className='font-mono'>Mon, 9:00–9:30 AM</span>
+        </div>
+        <div className='flex justify-between'>
+          <span className='text-muted-foreground'>Status</span>
+          <Badge className='bg-success border-transparent text-white'>
+            Confirmed
+          </Badge>
+        </div>
+      </CardContent>
+      <CardFooter className='gap-2'>
+        <Button className='flex-1'>Reschedule</Button>
+        <Button variant='outline' className='flex-1'>
+          Cancel
+        </Button>
+      </CardFooter>
+    </Card>
+  ),
+};

package/src/ui/card.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+import { resolveSpace, type Space } from '../layout/layout-style';
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Padding on the card surface, on the 4px token scale. Omit when composing
+   * CardHeader/CardContent/CardFooter — those bring their own p-6. Useful when
+   * arbitrary content is placed directly in the card (e.g. the composer drops
+   * components into the `children` slot).
+   */
+  padding?: Space;
+}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, padding, style, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'bg-card text-card-foreground rounded-xl border shadow',
+        className
+      )}
+      style={
+        padding != null ? { padding: resolveSpace(padding), ...style } : style
+      }
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('leading-none font-semibold tracking-tight', className)}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

package/src/ui/carousel.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from './carousel';
+import { Card, CardContent } from './card';
+
+const meta = {
+  title: 'Components/Carousel',
+  component: Carousel,
+  tags: ['autodocs'],
+  // `orientation` and `opts` are the real editable props on CarouselProps
+  // (`plugins`/`setApi` are functions/instances — not curatable). `children` is
+  // the composed slide content → slot (§4), never also an argType (§5).
+  argTypes: {
+    orientation: {
+      control: 'inline-radio',
+      options: ['horizontal', 'vertical'],
+    },
+    opts: {
+      control: 'object',
+      description:
+        'Embla carousel options (e.g. { loop: true, align: "start" })',
+    },
+  },
+  args: { orientation: 'horizontal' },
+  parameters: { puck: { slots: ['children'] } },
+} satisfies Meta<typeof Carousel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Carousel className='w-64' {...args}>
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, i) => (
+          <CarouselItem key={i}>
+            <Card>
+              <CardContent className='flex h-32 items-center justify-center p-6 text-3xl font-semibold'>
+                {i + 1}
+              </CardContent>
+            </Card>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  ),
+};