vinta-schedule-design-system 0.1.0

package/src/layout/navbar.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { Menu } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+import { Button } from '../ui/button';
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from '../ui/sheet';
+import { Box } from './box';
+import { HStack, VStack } from './flex';
+import { Container } from './container';
+import { Text } from './text';
+
+/** Brand wordmark used across the public navbar and auth pages. */
+function BrandMark({ className }: { className?: string }) {
+  return (
+    <HStack className={cn('gap-2.5', className)}>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src='/vinta-wordmark.svg'
+        alt='Vinta'
+        className='h-5 w-auto dark:brightness-0 dark:invert'
+      />
+      <Text
+        size='sm'
+        weight='medium'
+        color='muted-foreground'
+        className='border-border border-l pl-2.5'
+      >
+        Schedule
+      </Text>
+    </HStack>
+  );
+}
+
+/**
+ * Navbar — public / marketing top navigation bar. Sticky, blurred surface with
+ * a brand on the left, nav links in the middle, and actions on the right.
+ *
+ * Responsive: the inner row is an `@container/nav`. Links dock inline above
+ * @3xl (768px) and actions above @md (448px); below those breakpoints they
+ * collapse into a slide-over menu opened by a hamburger.
+ */
+export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
+  brand?: React.ReactNode;
+  /** Center nav links. */
+  links?: React.ReactNode;
+  /** Right-aligned actions (theme toggle, auth buttons…). */
+  actions?: React.ReactNode;
+  /** Cap the inner row to the contained width (default) or let it run full. */
+  width?: 'contained' | 'full';
+}
+
+const Navbar = React.forwardRef<HTMLElement, NavbarProps>(function Navbar(
+  { className, brand, links, actions, width = 'contained', ...props },
+  ref
+) {
+  const hasMenu = Boolean(links || actions);
+  return (
+    <Box
+      as='header'
+      ref={ref as React.Ref<HTMLElement>}
+      className={cn(
+        'border-border bg-background/80 sticky top-0 z-40 w-full border-b backdrop-blur',
+        className
+      )}
+      {...props}
+    >
+      <Container width={width}>
+        <HStack
+          justify='between'
+          gap={6}
+          height={72}
+          py={3}
+          className='@container/nav'
+        >
+          <HStack gap={10}>
+            {brand ?? <BrandMark />}
+            {links ? (
+              <Box as='nav' className='hidden items-center gap-6 @3xl/nav:flex'>
+                {links}
+              </Box>
+            ) : null}
+          </HStack>
+
+          <div className='flex items-center gap-3'>
+            {actions ? (
+              <div className='hidden items-center gap-3 @md/nav:flex'>
+                {actions}
+              </div>
+            ) : null}
+
+            {hasMenu ? (
+              <Sheet>
+                <SheetTrigger asChild>
+                  <Button
+                    variant='ghost'
+                    size='icon'
+                    aria-label='Open menu'
+                    className='@3xl/nav:hidden'
+                  >
+                    <Menu />
+                  </Button>
+                </SheetTrigger>
+                <SheetContent side='right' className='w-72'>
+                  <SheetTitle className='sr-only'>Menu</SheetTitle>
+                  {links ? (
+                    <VStack as='nav' gap={1} className='mt-8'>
+                      {links}
+                    </VStack>
+                  ) : null}
+                  {actions ? (
+                    <VStack
+                      gap={2}
+                      className='border-border mt-6 border-t pt-6'
+                    >
+                      {actions}
+                    </VStack>
+                  ) : null}
+                </SheetContent>
+              </Sheet>
+            ) : null}
+          </div>
+        </HStack>
+      </Container>
+    </Box>
+  );
+});
+
+export { Navbar, BrandMark };

package/src/layout/page-header.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '../story-types';
+import { CalendarPlus, Download } from 'lucide-react';
+
+import { PageHeader } from './page-header';
+import { Button } from '../ui/button';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '../ui/breadcrumb';
+
+const meta = {
+  title: 'Composition/PageHeader',
+  component: PageHeader,
+  tags: ['autodocs'],
+  // `title` / `description` are ReactNode but render as plain copy → editable
+  // text controls. `actions` and `breadcrumb` are composed content → slots (§3).
+  argTypes: {
+    title: { control: 'text', description: 'Page title' },
+    description: { control: 'text', description: 'Supporting copy' },
+  },
+  args: {
+    title: 'Bookings',
+    description: 'Manage upcoming and past appointments.',
+  },
+  parameters: { puck: { slots: ['actions', 'breadcrumb'] } },
+} satisfies Meta<typeof PageHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <PageHeader className='w-[640px]' {...args} />,
+};
+
+export const WithActions: Story = {
+  render: (args) => (
+    <PageHeader
+      className='w-[640px]'
+      {...args}
+      actions={
+        <>
+          <Button variant='outline' size='sm'>
+            <Download />
+            Export
+          </Button>
+          <Button size='sm'>
+            <CalendarPlus />
+            New booking
+          </Button>
+        </>
+      }
+    />
+  ),
+};
+
+export const WithBreadcrumb: Story = {
+  render: (args) => (
+    <PageHeader
+      className='w-[640px]'
+      {...args}
+      breadcrumb={
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href='#'>Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Bookings</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      }
+    />
+  ),
+};

package/src/layout/page-header.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+import { HStack } from './flex';
+import { Stack } from './stack';
+import { Heading } from './heading';
+import { Text } from './text';
+
+/**
+ * PageHeader — title block at the top of a page body. Optional breadcrumb slot
+ * above, description below, and right-aligned actions. Built from layout
+ * primitives (Stack / Heading / Text).
+ */
+export interface PageHeaderProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'title'
+> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  actions?: React.ReactNode;
+  breadcrumb?: React.ReactNode;
+}
+
+const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
+  function PageHeader(
+    { className, title, description, actions, breadcrumb, ...props },
+    ref
+  ) {
+    return (
+      <Stack
+        ref={ref as React.Ref<HTMLElement>}
+        gap={4}
+        className={cn('@container/pageheader', className)}
+        {...props}
+      >
+        {breadcrumb}
+        <div className='flex flex-col gap-3 @lg/pageheader:flex-row @lg/pageheader:items-start @lg/pageheader:justify-between'>
+          <Stack gap={1}>
+            <Heading level={1} size='2xl'>
+              {title}
+            </Heading>
+            {description ? (
+              <Text size='sm' color='muted-foreground'>
+                {description}
+              </Text>
+            ) : null}
+          </Stack>
+          {actions ? (
+            <HStack gap={2} shrink={0}>
+              {actions}
+            </HStack>
+          ) : null}
+        </div>
+      </Stack>
+    );
+  }
+);
+
+export { PageHeader };

package/src/layout/section.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { Box, type BoxProps } from './box';
+import type { Space } from './layout-style';
+
+export interface SectionProps extends Omit<BoxProps, 'py'> {
+  /** Vertical rhythm between page sections. Defaults to 16 (64px). */
+  py?: Space;
+}
+
+/**
+ * Section — a vertical page band with consistent top/bottom padding. Renders a
+ * <section> by default; override with `as`.
+ */
+const Section = React.forwardRef<HTMLElement, SectionProps>(function Section(
+  { as = 'section', py = 16, ...props },
+  ref
+) {
+  return <Box ref={ref} as={as} py={py} {...props} />;
+});
+
+export { Section };

package/src/layout/spacer.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+/**
+ * Spacer — flexible gap that pushes siblings apart inside a Flex/HStack/VStack.
+ *   <HStack><Logo /><Spacer /><Actions /></HStack>
+ */
+const Spacer = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(function Spacer({ style, ...props }, ref) {
+  return (
+    <div
+      ref={ref}
+      aria-hidden
+      style={{ flex: '1 1 0%', alignSelf: 'stretch', ...style }}
+      {...props}
+    />
+  );
+});
+
+export { Spacer };

package/src/layout/stack.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import { Stack } from './stack';
+import { Button } from '../ui/button';
+
+const meta = {
+  title: 'Layout/Stack',
+  component: Stack,
+  tags: ['autodocs'],
+  // Container with BOTH curated scalar controls AND a slot. The typed
+  // style-prop vocabulary (layout-style.ts) maps cleanly to select/radio
+  // controls; `children` is the composed content slot (§3), typed ReactNode via
+  // FlexProps → React.HTMLAttributes. `className`/`style` stay unexposed (§6).
+  argTypes: {
+    direction: { control: 'inline-radio', options: ['column', 'row'] },
+    gap: { control: 'select', options: [0, 1, 2, 3, 4, 5, 6, 8] },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end', 'stretch', 'baseline'],
+    },
+    justify: {
+      control: 'select',
+      options: ['start', 'center', 'end', 'between', 'around', 'evenly'],
+    },
+    wrap: { control: 'boolean' },
+  },
+  args: { direction: 'column', gap: 4 },
+  parameters: { puck: { slots: ['children'] } },
+} satisfies Meta<typeof Stack>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Box = ({ children }: { children: React.ReactNode }) => (
+  <div className='bg-vinta-50 text-vinta-700 rounded-md px-4 py-2 text-sm'>
+    {children}
+  </div>
+);
+
+export const Vertical: Story = {
+  render: (args) => (
+    <Stack {...args}>
+      <Box>One</Box>
+      <Box>Two</Box>
+      <Box>Three</Box>
+    </Stack>
+  ),
+};
+
+export const Horizontal: Story = {
+  args: { direction: 'row', gap: 2, align: 'center' },
+  render: (args) => (
+    <Stack {...args}>
+      <Button>Save</Button>
+      <Button variant='outline'>Cancel</Button>
+    </Stack>
+  ),
+};

package/src/layout/stack.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { Flex, type FlexProps } from './flex';
+
+export type { FlexProps as StackOwnProps };
+
+/**
+ * Stack — vertical-by-default flex layout. Thin alias over <Flex>; gaps use the
+ * 4px spacing scale (`gap={4}` → 16px). Switch to a row with `direction="row"`,
+ * or use the dedicated <HStack> / <VStack>.
+ */
+const Stack = React.forwardRef<HTMLElement, FlexProps>(function Stack(
+  { direction = 'column', gap = 4, ...props },
+  ref
+) {
+  return <Flex ref={ref} direction={direction} gap={gap} {...props} />;
+});
+
+export { Stack };

package/src/layout/text.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+import { color, type ColorToken } from './layout-style';
+
+export type TextSize =
+  | 'xs'
+  | 'sm'
+  | 'base'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | '5xl'
+  | '6xl';
+export type TextWeight =
+  | 'light'
+  | 'normal'
+  | 'medium'
+  | 'semibold'
+  | 'bold'
+  | 'extrabold';
+export type TextFamily = 'sans' | 'mono' | 'display';
+export type TextLeading = 'none' | 'tight' | 'snug' | 'normal' | 'relaxed';
+export type TextTracking = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider';
+export type TextAlign = 'left' | 'center' | 'right' | 'justify';
+
+// Literal class maps — Tailwind only emits classes it can see verbatim.
+const SIZE: Record<TextSize, string> = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  base: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+  '2xl': 'text-2xl',
+  '3xl': 'text-3xl',
+  '4xl': 'text-4xl',
+  '5xl': 'text-5xl',
+  '6xl': 'text-6xl',
+};
+const WEIGHT: Record<TextWeight, string> = {
+  light: 'font-light',
+  normal: 'font-normal',
+  medium: 'font-medium',
+  semibold: 'font-semibold',
+  bold: 'font-bold',
+  extrabold: 'font-extrabold',
+};
+const FAMILY: Record<TextFamily, string> = {
+  sans: 'font-sans',
+  mono: 'font-mono',
+  display: 'font-display',
+};
+const LEADING: Record<TextLeading, string> = {
+  none: 'leading-none',
+  tight: 'leading-tight',
+  snug: 'leading-snug',
+  normal: 'leading-normal',
+  relaxed: 'leading-relaxed',
+};
+const TRACKING: Record<TextTracking, string> = {
+  tighter: 'tracking-tighter',
+  tight: 'tracking-tight',
+  normal: 'tracking-normal',
+  wide: 'tracking-wide',
+  wider: 'tracking-wider',
+};
+const ALIGN: Record<TextAlign, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+  justify: 'text-justify',
+};
+
+export interface TextProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  'color'
+> {
+  as?: React.ElementType;
+  size?: TextSize;
+  weight?: TextWeight;
+  family?: TextFamily;
+  leading?: TextLeading;
+  tracking?: TextTracking;
+  align?: TextAlign;
+  color?: ColorToken;
+  truncate?: boolean;
+  italic?: boolean;
+  uppercase?: boolean;
+}
+
+/**
+ * Text — typography primitive. Drive size/weight/family/leading/tracking/color
+ * through props instead of utility classes.
+ *
+ *   <Text size="sm" color="muted-foreground">Helper copy</Text>
+ */
+const Text = React.forwardRef<HTMLElement, TextProps>(function Text(
+  {
+    as: Comp = 'span',
+    className,
+    style,
+    size,
+    weight,
+    family,
+    leading,
+    tracking,
+    align,
+    color: colorToken,
+    truncate,
+    italic,
+    uppercase,
+    ...props
+  },
+  ref
+) {
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        size && SIZE[size],
+        weight && WEIGHT[weight],
+        family && FAMILY[family],
+        leading && LEADING[leading],
+        tracking && TRACKING[tracking],
+        align && ALIGN[align],
+        truncate && 'truncate',
+        italic && 'italic',
+        uppercase && 'uppercase',
+        className
+      )}
+      style={{ color: color(colorToken), ...style }}
+      {...props}
+    />
+  );
+});
+
+export { Text };

package/src/layout/typography.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '../story-types';
+
+import { Text } from './text';
+import { Heading } from './heading';
+import { VStack } from './flex';
+
+const meta = {
+  // Title leaf must resolve to the named export in scope (§7): `Text`.
+  title: 'Layout/Text',
+  component: Text,
+  tags: ['autodocs'],
+  // Text is a typography leaf: `children` is the editable label (a plain string
+  // control, not a slot — same as Button). `className`/`style` stay unexposed.
+  argTypes: {
+    children: { control: 'text', description: 'Text content' },
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'base',
+        'lg',
+        'xl',
+        '2xl',
+        '3xl',
+        '4xl',
+        '5xl',
+        '6xl',
+      ],
+    },
+    weight: {
+      control: 'select',
+      options: ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'],
+    },
+    family: { control: 'inline-radio', options: ['sans', 'mono', 'display'] },
+    leading: {
+      control: 'select',
+      options: ['none', 'tight', 'snug', 'normal', 'relaxed'],
+    },
+    tracking: {
+      control: 'select',
+      options: ['tighter', 'tight', 'normal', 'wide', 'wider'],
+    },
+    align: {
+      control: 'select',
+      options: ['left', 'center', 'right', 'justify'],
+    },
+    color: {
+      control: 'select',
+      options: [
+        'foreground',
+        'muted-foreground',
+        'primary',
+        'destructive',
+        'success',
+      ],
+    },
+    truncate: { control: 'boolean' },
+    italic: { control: 'boolean' },
+    uppercase: { control: 'boolean' },
+  },
+  args: {
+    children: 'The quick brown fox books an appointment at 9:00 AM.',
+    size: 'base',
+  },
+} satisfies Meta<typeof Text>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Headings: Story = {
+  render: () => (
+    <VStack gap={4}>
+      {[1, 2, 3, 4, 5, 6].map((l) => (
+        <Heading key={l} level={l as 1}>
+          Heading level {l}
+        </Heading>
+      ))}
+    </VStack>
+  ),
+};
+
+export const TextStyles: Story = {
+  render: () => (
+    <VStack gap={3}>
+      <Text size='lg' color='muted-foreground'>
+        Lead — reassuring, healthcare-aware copy.
+      </Text>
+      <Text>Body — the quick brown fox books an appointment at 9:00 AM.</Text>
+      <Text size='sm' color='muted-foreground'>
+        Small / caption text.
+      </Text>
+      <Text
+        size='xs'
+        weight='semibold'
+        tracking='wide'
+        uppercase
+        color='muted-foreground'
+      >
+        Overline
+      </Text>
+      <Text family='mono' size='sm'>
+        Geist Mono — 09:00–09:30 · ID a1b2c3
+      </Text>
+      <Text weight='bold' color='primary'>
+        Emphasis in brand color.
+      </Text>
+    </VStack>
+  ),
+};

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}