@lateralus-ai/shipping-ui 2.0.0-dev.20 → 2.0.0-dev.4

package/src/tailwind-theme.ts

@@ -1,186 +1,182 @@
-import { colorScales } from "./tokens/colors";
-import { elevation, borderRadius } from "./tokens/elevation";
-
-const toTailwindFontSize = (
-  size: string,
-  opts: { lineHeight: string; letterSpacing: string; fontWeight?: number },
-) =>
-  [
-    size,
-    {
-      lineHeight: opts.lineHeight,
-      letterSpacing: opts.letterSpacing,
-      ...(opts.fontWeight ? { fontWeight: String(opts.fontWeight) } : {}),
-    },
-  ] as const;
-
-export const theme = {
-  fontFamily: {
-    heading: ['"TRY Vesterbro"', "Libre Baskerville", "Georgia", "serif"],
-    sans: ['"Matter-TRIAL"', "DM Sans", "system-ui", "sans-serif"],
-    mono: ["Roboto Mono", "monospace"],
-  },
-  fontSize: {
-    title: toTailwindFontSize("28px", { lineHeight: "34px", letterSpacing: "-0.02em" }),
-    "title-em": toTailwindFontSize("28px", {
-      lineHeight: "34px",
-      letterSpacing: "-0.02em",
-      fontWeight: 500,
-    }),
-    heading: toTailwindFontSize("22px", {
-      lineHeight: "28px",
-      letterSpacing: "0",
-      fontWeight: 500,
-    }),
-    subheader: toTailwindFontSize("18px", { lineHeight: "28px", letterSpacing: "-0.01em" }),
-    "subheader-em": toTailwindFontSize("18px", {
-      lineHeight: "28px",
-      letterSpacing: "-0.01em",
-      fontWeight: 500,
-    }),
-    body: toTailwindFontSize("16px", { lineHeight: "24px", letterSpacing: "-0.01em" }),
-    "body-em": toTailwindFontSize("16px", {
-      lineHeight: "24px",
-      letterSpacing: "-0.01em",
-      fontWeight: 500,
-    }),
-    "caption-1": toTailwindFontSize("16px", { lineHeight: "22px", letterSpacing: "0.02em" }),
-    "caption-1-em": toTailwindFontSize("16px", {
-      lineHeight: "22px",
-      letterSpacing: "0.02em",
-      fontWeight: 500,
-    }),
-    "caption-2": toTailwindFontSize("14px", { lineHeight: "20px", letterSpacing: "0.01em" }),
-    "caption-2-em": toTailwindFontSize("14px", {
-      lineHeight: "20px",
-      letterSpacing: "0.01em",
-      fontWeight: 500,
-    }),
-    footnote: toTailwindFontSize("13px", { lineHeight: "17px", letterSpacing: "0" }),
-    "footnote-em": toTailwindFontSize("13px", {
-      lineHeight: "17px",
-      letterSpacing: "0",
-      fontWeight: 500,
-    }),
-  },
-  boxShadow: {
-    raise1: elevation.raise1,
-    raise2: elevation.raise2,
-    raise3: elevation.raise3,
-  },
-  borderRadius: {
-    control: borderRadius.control,
-    lg: borderRadius.lg,
-    md: borderRadius.md,
-    sm: borderRadius.sm,
-  },
-  /** Extends Tailwind’s max-width scale (7xl = 1280px). */
-  maxWidth: {
-    "8xl": "1640px",
-  },
-  colors: {
-    grey: colorScales.grey,
-    gray: colorScales.grey,
-    green: colorScales.green,
-    blue: colorScales.blue,
-    red: colorScales.red,
-    orange: colorScales.orange,
-    purple: colorScales.purple,
-    white: "#ffffff",
-    action: {
-      primary: {
-        idle: "var(--action-primary-idle)",
-        "on-idle": "var(--action-primary-on-idle)",
-        hover: "var(--action-primary-hover)",
-        "on-hover": "var(--action-primary-on-hover)",
-        disabled: "var(--action-primary-disabled)",
-        "on-disabled": "var(--action-primary-on-disabled)",
-      },
-      secondary: {
-        idle: "var(--action-secondary-idle)",
-        "on-idle": "var(--action-secondary-on-idle)",
-        hover: "var(--action-secondary-hover)",
-        "on-hover": "var(--action-secondary-on-hover)",
-        disabled: "var(--action-secondary-disabled)",
-        "on-disabled": "var(--action-secondary-on-disabled)",
-      },
-      tertiary: {
-        idle: "var(--action-tertiary-idle)",
-        "on-idle": "var(--action-tertiary-on-idle)",
-        hover: "var(--action-tertiary-hover)",
-        "on-hover": "var(--action-tertiary-on-hover)",
-        disabled: "var(--action-tertiary-disabled)",
-        "on-disabled": "var(--action-tertiary-on-disabled)",
-      },
-      quaternary: {
-        idle: "var(--action-quaternary-idle)",
-        "on-idle": "var(--action-quaternary-on-idle)",
-        hover: "var(--action-quaternary-hover)",
-        "on-hover": "var(--action-quaternary-on-hover)",
-        disabled: "var(--action-quaternary-disabled)",
-        "on-disabled": "var(--action-quaternary-on-disabled)",
-      },
-      destructive: {
-        idle: "var(--action-destructive-idle)",
-        "on-idle": "var(--action-destructive-on-idle)",
-        hover: "var(--action-destructive-hover)",
-        "on-hover": "var(--action-destructive-on-hover)",
-        disabled: "var(--action-destructive-disabled)",
-        "on-disabled": "var(--action-destructive-on-disabled)",
-      },
-    },
-    background: {
-      primary: "var(--background-primary)",
-      secondary: "var(--background-secondary)",
-      tertiary: "var(--background-tertiary)",
-      hover: "var(--background-hover)",
-      selected: "var(--background-selected)",
-      overlay: "var(--background-overlay)",
-    },
-    display: {
-      "on-light": {
-        primary: "var(--display-on-light-primary)",
-        secondary: "var(--display-on-light-secondary)",
-        tertiary: "var(--display-on-light-tertiary)",
-        quaternary: "var(--display-on-light-quaternary)",
-      },
-      "on-dark": {
-        primary: "var(--display-on-dark-primary)",
-        secondary: "var(--display-on-dark-secondary)",
-        tertiary: "var(--display-on-dark-tertiary)",
-        quaternary: "var(--display-on-dark-quaternary)",
-      },
-    },
-    accent: {
-      "on-light": "var(--accent-on-light)",
-      "on-dark": "var(--accent-on-dark)",
-      "bg-light": "var(--accent-bg-light)",
-      "bg-lighter": "var(--accent-bg-lighter)",
-    },
-    divider: {
-      primary: "var(--divider-primary)",
-      secondary: "var(--divider-secondary)",
-    },
-    meta: {
-      green: "var(--meta-green)",
-      onGreen: "var(--meta-on-green)",
-      orange: "var(--meta-orange)",
-      onOrange: "var(--meta-on-orange)",
-      red: "var(--meta-red)",
-      onRed: "var(--meta-on-red)",
-      blue: "var(--meta-blue)",
-      onBlue: "var(--meta-on-blue)",
-      purple: "var(--meta-purple)",
-      onPurple: "var(--meta-on-purple)",
-    },
-    /* Legacy aliases */
-    "text-primary": "var(--display-on-light-primary)",
-    "text-secondary": "var(--display-on-light-secondary)",
-    "text-tertiary": "var(--display-on-light-tertiary)",
-    "surface-primary": "var(--background-primary)",
-    "surface-secondary": "var(--background-secondary)",
-    "surface-hover": "var(--background-secondary)",
-    "border-light": "var(--divider-primary)",
-    "border-medium": "var(--divider-secondary)",
-  },
-};
+import { colorScales } from "./tokens/colors";
+import { elevation, borderRadius } from "./tokens/elevation";
+
+const toTailwindFontSize = (
+  size: string,
+  opts: { lineHeight: string; letterSpacing: string; fontWeight?: number },
+) =>
+  [
+    size,
+    {
+      lineHeight: opts.lineHeight,
+      letterSpacing: opts.letterSpacing,
+      ...(opts.fontWeight ? { fontWeight: String(opts.fontWeight) } : {}),
+    },
+  ] as const;
+
+export const theme = {
+  fontFamily: {
+    heading: ['"TRY Vesterbro"', "Libre Baskerville", "Georgia", "serif"],
+    sans: ['"Matter-TRIAL"', "DM Sans", "system-ui", "sans-serif"],
+    mono: ["Roboto Mono", "monospace"],
+  },
+  fontSize: {
+    title: toTailwindFontSize("28px", { lineHeight: "34px", letterSpacing: "-0.02em" }),
+    "title-em": toTailwindFontSize("28px", {
+      lineHeight: "34px",
+      letterSpacing: "-0.02em",
+      fontWeight: 500,
+    }),
+    heading: toTailwindFontSize("22px", {
+      lineHeight: "28px",
+      letterSpacing: "0",
+      fontWeight: 500,
+    }),
+    subheader: toTailwindFontSize("18px", { lineHeight: "28px", letterSpacing: "-0.01em" }),
+    "subheader-em": toTailwindFontSize("18px", {
+      lineHeight: "28px",
+      letterSpacing: "-0.01em",
+      fontWeight: 500,
+    }),
+    body: toTailwindFontSize("16px", { lineHeight: "24px", letterSpacing: "-0.01em" }),
+    "body-em": toTailwindFontSize("16px", {
+      lineHeight: "24px",
+      letterSpacing: "-0.01em",
+      fontWeight: 500,
+    }),
+    "caption-1": toTailwindFontSize("16px", { lineHeight: "22px", letterSpacing: "0.02em" }),
+    "caption-1-em": toTailwindFontSize("16px", {
+      lineHeight: "22px",
+      letterSpacing: "0.02em",
+      fontWeight: 500,
+    }),
+    "caption-2": toTailwindFontSize("14px", { lineHeight: "20px", letterSpacing: "0.01em" }),
+    "caption-2-em": toTailwindFontSize("14px", {
+      lineHeight: "20px",
+      letterSpacing: "0.01em",
+      fontWeight: 500,
+    }),
+    footnote: toTailwindFontSize("13px", { lineHeight: "17px", letterSpacing: "0" }),
+    "footnote-em": toTailwindFontSize("13px", {
+      lineHeight: "17px",
+      letterSpacing: "0",
+      fontWeight: 500,
+    }),
+  },
+  boxShadow: {
+    raise1: elevation.raise1,
+    raise2: elevation.raise2,
+    raise3: elevation.raise3,
+  },
+  borderRadius: {
+    control: borderRadius.control,
+    lg: borderRadius.lg,
+    md: borderRadius.md,
+    sm: borderRadius.sm,
+  },
+  colors: {
+    grey: colorScales.grey,
+    gray: colorScales.grey,
+    green: colorScales.green,
+    blue: colorScales.blue,
+    red: colorScales.red,
+    orange: colorScales.orange,
+    purple: colorScales.purple,
+    white: "#ffffff",
+    action: {
+      primary: {
+        idle: "var(--action-primary-idle)",
+        "on-idle": "var(--action-primary-on-idle)",
+        hover: "var(--action-primary-hover)",
+        "on-hover": "var(--action-primary-on-hover)",
+        disabled: "var(--action-primary-disabled)",
+        "on-disabled": "var(--action-primary-on-disabled)",
+      },
+      secondary: {
+        idle: "var(--action-secondary-idle)",
+        "on-idle": "var(--action-secondary-on-idle)",
+        hover: "var(--action-secondary-hover)",
+        "on-hover": "var(--action-secondary-on-hover)",
+        disabled: "var(--action-secondary-disabled)",
+        "on-disabled": "var(--action-secondary-on-disabled)",
+      },
+      tertiary: {
+        idle: "var(--action-tertiary-idle)",
+        "on-idle": "var(--action-tertiary-on-idle)",
+        hover: "var(--action-tertiary-hover)",
+        "on-hover": "var(--action-tertiary-on-hover)",
+        disabled: "var(--action-tertiary-disabled)",
+        "on-disabled": "var(--action-tertiary-on-disabled)",
+      },
+      quaternary: {
+        idle: "var(--action-quaternary-idle)",
+        "on-idle": "var(--action-quaternary-on-idle)",
+        hover: "var(--action-quaternary-hover)",
+        "on-hover": "var(--action-quaternary-on-hover)",
+        disabled: "var(--action-quaternary-disabled)",
+        "on-disabled": "var(--action-quaternary-on-disabled)",
+      },
+      destructive: {
+        idle: "var(--action-destructive-idle)",
+        "on-idle": "var(--action-destructive-on-idle)",
+        hover: "var(--action-destructive-hover)",
+        "on-hover": "var(--action-destructive-on-hover)",
+        disabled: "var(--action-destructive-disabled)",
+        "on-disabled": "var(--action-destructive-on-disabled)",
+      },
+    },
+    background: {
+      primary: "var(--background-primary)",
+      secondary: "var(--background-secondary)",
+      tertiary: "var(--background-tertiary)",
+      hover: "var(--background-hover)",
+      selected: "var(--background-selected)",
+      overlay: "var(--background-overlay)",
+    },
+    display: {
+      "on-light": {
+        primary: "var(--display-on-light-primary)",
+        secondary: "var(--display-on-light-secondary)",
+        tertiary: "var(--display-on-light-tertiary)",
+        quaternary: "var(--display-on-light-quaternary)",
+      },
+      "on-dark": {
+        primary: "var(--display-on-dark-primary)",
+        secondary: "var(--display-on-dark-secondary)",
+        tertiary: "var(--display-on-dark-tertiary)",
+        quaternary: "var(--display-on-dark-quaternary)",
+      },
+    },
+    accent: {
+      "on-light": "var(--accent-on-light)",
+      "on-dark": "var(--accent-on-dark)",
+      "bg-light": "var(--accent-bg-light)",
+      "bg-lighter": "var(--accent-bg-lighter)",
+    },
+    divider: {
+      primary: "var(--divider-primary)",
+      secondary: "var(--divider-secondary)",
+    },
+    meta: {
+      green: "var(--meta-green)",
+      onGreen: "var(--meta-on-green)",
+      orange: "var(--meta-orange)",
+      onOrange: "var(--meta-on-orange)",
+      red: "var(--meta-red)",
+      onRed: "var(--meta-on-red)",
+      blue: "var(--meta-blue)",
+      onBlue: "var(--meta-on-blue)",
+      purple: "var(--meta-purple)",
+      onPurple: "var(--meta-on-purple)",
+    },
+    /* Legacy aliases */
+    "text-primary": "var(--display-on-light-primary)",
+    "text-secondary": "var(--display-on-light-secondary)",
+    "text-tertiary": "var(--display-on-light-tertiary)",
+    "surface-primary": "var(--background-primary)",
+    "surface-secondary": "var(--background-secondary)",
+    "surface-hover": "var(--background-secondary)",
+    "border-light": "var(--divider-primary)",
+    "border-medium": "var(--divider-secondary)",
+  },
+};

package/src/utils/cn.ts

@@ -1,33 +1,6 @@
-import { extendTailwindMerge } from "tailwind-merge";
+import { twMerge } from "tailwind-merge";
 import { type ClassValue, clsx } from "clsx";
 
-/**
- * Custom fontSize keys from tailwind-theme.ts (tailwind-merge@1.x API).
- * Without this, twMerge treats e.g. text-caption-2-em as the same group as
- * text-display-on-light-primary and drops the font-size class.
- */
-const fontSizeTokens = [
-  "title",
-  "title-em",
-  "heading",
-  "subheader",
-  "subheader-em",
-  "body",
-  "body-em",
-  "caption-1",
-  "caption-1-em",
-  "caption-2",
-  "caption-2-em",
-  "footnote",
-  "footnote-em",
-] as const;
-
-const twMerge = extendTailwindMerge({
-  classGroups: {
-    "font-size": [{ text: [...fontSizeTokens] }],
-  },
-});
-
 /**
  * Merges the tailwind clases (using twMerge). Conditionally removes false values
  * @param inputs The tailwind classes to merge

package/dist/components/PageHeader.d.ts

@@ -1,41 +0,0 @@
-import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
-export type PageHeaderCrumb = {
-    label: string;
-    /** Renders a real `<a href>` so native browser controls work. */
-    href: string;
-    /**
-     * Optional SPA handler. Callers should `preventDefault` only for unmodified
-     * primary clicks; modifier / middle-click keep native anchor behavior.
-     */
-    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-};
-export type PageHeaderProps = {
-    /** Leading icon (Figma 24×24). */
-    icon?: ReactNode;
-    /** Standard title, or current (last) segment when `crumbs` is set. */
-    title: ReactNode;
-    /**
-     * Parent breadcrumb links. When present, renders Nested: icon + parents + `/`
-     * + current `title` (non-link).
-     */
-    crumbs?: PageHeaderCrumb[];
-    /** Right-hand actions slot (buttons, menus, etc.). */
-    actions?: ReactNode;
-    className?: string;
-};
-export type PageHeaderShellProps = ComponentPropsWithoutRef<"div">;
-export type PageHeaderBodyProps = ComponentPropsWithoutRef<"div">;
-/**
- * Page title row — Figma `Header` (389:8850).
- * Variants: Standard (icon + title) | Nested (icon + crumb trail).
- */
-declare function PageHeaderRoot({ icon, title, crumbs, actions, className, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
-/** Flex column shell — pin header, scroll body (avoids brittle CSS sticky). */
-declare function PageHeaderShell({ className, ...props }: PageHeaderShellProps): import("react/jsx-runtime").JSX.Element;
-/** Scrollable page content under a pinned PageHeader. */
-declare function PageHeaderBody({ className, ...props }: PageHeaderBodyProps): import("react/jsx-runtime").JSX.Element;
-export declare const PageHeader: typeof PageHeaderRoot & {
-    Shell: typeof PageHeaderShell;
-    Body: typeof PageHeaderBody;
-};
-export {};

package/dist/components/ScrollableList.d.ts

@@ -1,22 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-export type ScrollableListProps = ComponentPropsWithoutRef<"div">;
-export type ScrollableListHeaderProps = ComponentPropsWithoutRef<"div">;
-export type ScrollableListBodyProps = ComponentPropsWithoutRef<"div">;
-/**
- * Fill-height list chrome — Figma `Table` (6154:152285).
- * Outer grey-100 frame + header slot + internally scrolling grey-50 body.
- * Column layout and rows are caller-owned children.
- */
-declare function ScrollableListRoot({ className, ...props }: ScrollableListProps): import("react/jsx-runtime").JSX.Element;
-/**
- * Column title bar. Default left padding aligns with a 24px leading icon +
- * 8px gap + 8px row padding (Figma). Override `className` when rows have no icon.
- */
-declare function ScrollableListHeader({ className, ...props }: ScrollableListHeaderProps): import("react/jsx-runtime").JSX.Element;
-/** Internally scrolling row region. */
-declare function ScrollableListBody({ className, ...props }: ScrollableListBodyProps): import("react/jsx-runtime").JSX.Element;
-export declare const ScrollableList: typeof ScrollableListRoot & {
-    Header: typeof ScrollableListHeader;
-    Body: typeof ScrollableListBody;
-};
-export {};

package/dist/theme-entry-Dwr2mV7_.js

@@ -1 +0,0 @@
-"use strict";const n={50:"#fdfdfc",100:"#f4f2ea",200:"#e1ddce",300:"#bfb9a5",400:"#969080",500:"#6e6960",600:"#524e47",700:"#3a3733",800:"#312e2a",900:"#262420"},o={50:"#f5f8f2",100:"#dde6d2",200:"#c5d4b3",300:"#a8bf8f",400:"#7a9a5e",500:"#5a7a42",600:"#456332",700:"#304624",800:"#223018",900:"#141c0e"},d={50:"#eef1f8",100:"#dae0ef",200:"#b8c4e0",300:"#8fa3cc",400:"#5274ae",500:"#3a5d96",600:"#154199",700:"#103480",800:"#0c2860",900:"#081c42"},c={50:"#faf3f1",100:"#f0d3cc",200:"#e4b0a5",300:"#c97a6b",400:"#b85a48",500:"#a0392a",600:"#802c20",700:"#621f16",800:"#45150f",900:"#2a0c08"},l={50:"#faf1de",100:"#f5e4c0",200:"#efd49a",300:"#e4bc6a",400:"#d9a03e",500:"#c48820",600:"#8f6318",700:"#5a3d0d",800:"#3d2a09",900:"#261a05"},s={50:"#f6f2f8",100:"#e2d9e8",200:"#cbbad6",300:"#b09bc3",400:"#957cb0",500:"#7a5d9d",600:"#5e4680",700:"#3d2e4a",800:"#2a2033",900:"#18121c"},p="#ffffff",a={grey:n,green:o,blue:d,red:c,orange:l,purple:s},t={raise1:"0 1px 2px rgba(38, 36, 32, 0.06), 0 1px 3px rgba(38, 36, 32, 0.04)",raise2:"0 2px 8px rgba(38, 36, 32, 0.08), 0 1px 2px rgba(38, 36, 32, 0.04)",raise3:"0 8px 24px rgba(38, 36, 32, 0.12), 0 2px 8px rgba(38, 36, 32, 0.06)"},r={control:"8px",lg:"8px",md:"6px",sm:"4px"},e=(v,i)=>[v,{lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,...i.fontWeight?{fontWeight:String(i.fontWeight)}:{}}],g={fontFamily:{heading:['"TRY Vesterbro"',"Libre Baskerville","Georgia","serif"],sans:['"Matter-TRIAL"',"DM Sans","system-ui","sans-serif"],mono:["Roboto Mono","monospace"]},fontSize:{title:e("28px",{lineHeight:"34px",letterSpacing:"-0.02em"}),"title-em":e("28px",{lineHeight:"34px",letterSpacing:"-0.02em",fontWeight:500}),heading:e("22px",{lineHeight:"28px",letterSpacing:"0",fontWeight:500}),subheader:e("18px",{lineHeight:"28px",letterSpacing:"-0.01em"}),"subheader-em":e("18px",{lineHeight:"28px",letterSpacing:"-0.01em",fontWeight:500}),body:e("16px",{lineHeight:"24px",letterSpacing:"-0.01em"}),"body-em":e("16px",{lineHeight:"24px",letterSpacing:"-0.01em",fontWeight:500}),"caption-1":e("16px",{lineHeight:"22px",letterSpacing:"0.02em"}),"caption-1-em":e("16px",{lineHeight:"22px",letterSpacing:"0.02em",fontWeight:500}),"caption-2":e("14px",{lineHeight:"20px",letterSpacing:"0.01em"}),"caption-2-em":e("14px",{lineHeight:"20px",letterSpacing:"0.01em",fontWeight:500}),footnote:e("13px",{lineHeight:"17px",letterSpacing:"0"}),"footnote-em":e("13px",{lineHeight:"17px",letterSpacing:"0",fontWeight:500})},boxShadow:{raise1:t.raise1,raise2:t.raise2,raise3:t.raise3},borderRadius:{control:r.control,lg:r.lg,md:r.md,sm:r.sm},maxWidth:{"8xl":"1640px"},colors:{grey:a.grey,gray:a.grey,green:a.green,blue:a.blue,red:a.red,orange:a.orange,purple:a.purple,white:"#ffffff",action:{primary:{idle:"var(--action-primary-idle)","on-idle":"var(--action-primary-on-idle)",hover:"var(--action-primary-hover)","on-hover":"var(--action-primary-on-hover)",disabled:"var(--action-primary-disabled)","on-disabled":"var(--action-primary-on-disabled)"},secondary:{idle:"var(--action-secondary-idle)","on-idle":"var(--action-secondary-on-idle)",hover:"var(--action-secondary-hover)","on-hover":"var(--action-secondary-on-hover)",disabled:"var(--action-secondary-disabled)","on-disabled":"var(--action-secondary-on-disabled)"},tertiary:{idle:"var(--action-tertiary-idle)","on-idle":"var(--action-tertiary-on-idle)",hover:"var(--action-tertiary-hover)","on-hover":"var(--action-tertiary-on-hover)",disabled:"var(--action-tertiary-disabled)","on-disabled":"var(--action-tertiary-on-disabled)"},quaternary:{idle:"var(--action-quaternary-idle)","on-idle":"var(--action-quaternary-on-idle)",hover:"var(--action-quaternary-hover)","on-hover":"var(--action-quaternary-on-hover)",disabled:"var(--action-quaternary-disabled)","on-disabled":"var(--action-quaternary-on-disabled)"},destructive:{idle:"var(--action-destructive-idle)","on-idle":"var(--action-destructive-on-idle)",hover:"var(--action-destructive-hover)","on-hover":"var(--action-destructive-on-hover)",disabled:"var(--action-destructive-disabled)","on-disabled":"var(--action-destructive-on-disabled)"}},background:{primary:"var(--background-primary)",secondary:"var(--background-secondary)",tertiary:"var(--background-tertiary)",hover:"var(--background-hover)",selected:"var(--background-selected)",overlay:"var(--background-overlay)"},display:{"on-light":{primary:"var(--display-on-light-primary)",secondary:"var(--display-on-light-secondary)",tertiary:"var(--display-on-light-tertiary)",quaternary:"var(--display-on-light-quaternary)"},"on-dark":{primary:"var(--display-on-dark-primary)",secondary:"var(--display-on-dark-secondary)",tertiary:"var(--display-on-dark-tertiary)",quaternary:"var(--display-on-dark-quaternary)"}},accent:{"on-light":"var(--accent-on-light)","on-dark":"var(--accent-on-dark)","bg-light":"var(--accent-bg-light)","bg-lighter":"var(--accent-bg-lighter)"},divider:{primary:"var(--divider-primary)",secondary:"var(--divider-secondary)"},meta:{green:"var(--meta-green)",onGreen:"var(--meta-on-green)",orange:"var(--meta-orange)",onOrange:"var(--meta-on-orange)",red:"var(--meta-red)",onRed:"var(--meta-on-red)",blue:"var(--meta-blue)",onBlue:"var(--meta-on-blue)",purple:"var(--meta-purple)",onPurple:"var(--meta-on-purple)"},"text-primary":"var(--display-on-light-primary)","text-secondary":"var(--display-on-light-secondary)","text-tertiary":"var(--display-on-light-tertiary)","surface-primary":"var(--background-primary)","surface-secondary":"var(--background-secondary)","surface-hover":"var(--background-secondary)","border-light":"var(--divider-primary)","border-medium":"var(--divider-secondary)"}};exports.blue=d;exports.borderRadius=r;exports.colorScales=a;exports.elevation=t;exports.green=o;exports.grey=n;exports.orange=l;exports.purple=s;exports.red=c;exports.theme=g;exports.white=p;

package/src/components/PageHeader.tsx

@@ -1,132 +0,0 @@
-import {
-  type ComponentPropsWithoutRef,
-  type MouseEvent,
-  type ReactNode,
-} from "react";
-import { cn } from "../utils/cn";
-
-export type PageHeaderCrumb = {
-  label: string;
-  /** Renders a real `<a href>` so native browser controls work. */
-  href: string;
-  /**
-   * Optional SPA handler. Callers should `preventDefault` only for unmodified
-   * primary clicks; modifier / middle-click keep native anchor behavior.
-   */
-  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-};
-
-export type PageHeaderProps = {
-  /** Leading icon (Figma 24×24). */
-  icon?: ReactNode;
-  /** Standard title, or current (last) segment when `crumbs` is set. */
-  title: ReactNode;
-  /**
-   * Parent breadcrumb links. When present, renders Nested: icon + parents + `/`
-   * + current `title` (non-link).
-   */
-  crumbs?: PageHeaderCrumb[];
-  /** Right-hand actions slot (buttons, menus, etc.). */
-  actions?: ReactNode;
-  className?: string;
-};
-
-export type PageHeaderShellProps = ComponentPropsWithoutRef<"div">;
-
-export type PageHeaderBodyProps = ComponentPropsWithoutRef<"div">;
-
-/**
- * Page title row — Figma `Header` (389:8850).
- * Variants: Standard (icon + title) | Nested (icon + crumb trail).
- */
-function PageHeaderRoot({
-  icon,
-  title,
-  crumbs,
-  actions,
-  className,
-}: PageHeaderProps) {
-  const isNested = Boolean(crumbs?.length);
-
-  return (
-    <div
-      data-variant={isNested ? "nested" : "standard"}
-      className={cn(
-        "flex w-full shrink-0 items-center justify-between gap-4",
-        "min-h-10",
-        className,
-      )}
-    >
-      <div className="flex min-w-0 flex-1 items-center gap-2">
-        {icon != null && (
-          <span className="inline-flex size-6 shrink-0 items-center justify-center [&>svg]:size-6">
-            {icon}
-          </span>
-        )}
-
-        {isNested ? (
-          <nav aria-label="Breadcrumb" className="min-w-0">
-            <ol className="flex min-w-0 flex-wrap items-center gap-2">
-              {crumbs!.map((crumb) => (
-                <li key={`${crumb.href}-${crumb.label}`} className="contents">
-                  <a
-                    href={crumb.href}
-                    onClick={crumb.onClick}
-                    className="truncate text-caption-1-em text-display-on-light-secondary transition-colors hover:text-display-on-light-primary"
-                  >
-                    {crumb.label}
-                  </a>
-                  <span
-                    aria-hidden
-                    className="text-caption-1-em text-display-on-light-secondary"
-                  >
-                    /
-                  </span>
-                </li>
-              ))}
-              <li
-                aria-current="page"
-                className="min-w-0 truncate text-caption-1-em text-display-on-light-primary"
-              >
-                {title}
-              </li>
-            </ol>
-          </nav>
-        ) : (
-          <h1 className="min-w-0 truncate text-caption-1-em text-display-on-light-primary">
-            {title}
-          </h1>
-        )}
-      </div>
-
-      {actions != null && (
-        <div className="flex shrink-0 items-center gap-2">{actions}</div>
-      )}
-    </div>
-  );
-}
-
-/** Flex column shell — pin header, scroll body (avoids brittle CSS sticky). */
-function PageHeaderShell({ className, ...props }: PageHeaderShellProps) {
-  return (
-    <div
-      className={cn("flex h-full min-h-0 flex-col", className)}
-      {...props}
-    />
-  );
-}
-
-/** Scrollable page content under a pinned PageHeader. */
-function PageHeaderBody({ className, ...props }: PageHeaderBodyProps) {
-  return (
-    <div
-      className={cn("min-h-0 flex-1 overflow-y-auto", className)}
-      {...props}
-    />
-  );
-}
-
-export const PageHeader = Object.assign(PageHeaderRoot, {
-  Shell: PageHeaderShell,
-  Body: PageHeaderBody,
-});