@cloudflare/kumo 1.18.0 → 1.19.0

package/dist/chunks/{grid-m9r71jxo2b8q1972.js.map → grid-hj1ylz16p7g5uelh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"grid-m9r71jxo2b8q1972.js","sources":["../../src/components/grid/grid.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Grid variant and gap definitions mapping layout names to their responsive Tailwind classes. */\nexport const KUMO_GRID_VARIANTS = {\n  variant: {\n    \"2up\": {\n      classes: \"grid-cols-1 md:grid-cols-2\",\n      description:\n        \"Grid items stack on small screens, display side-by-side on medium screens and up\",\n    },\n    \"side-by-side\": {\n      classes: \"grid-cols-2\",\n      description: \"Grid items always displayed side-by-side\",\n    },\n    \"2-1\": {\n      classes: \"grid-cols-1 md:grid-cols-[2fr_1fr]\",\n      description:\n        \"Two-thirds / one-third split (66%/33%) on medium screens and up\",\n    },\n    \"1-2\": {\n      classes: \"grid-cols-1 md:grid-cols-[1fr_2fr]\",\n      description:\n        \"One-third / two-thirds split (33%/66%) on medium screens and up\",\n    },\n    \"1-3up\": {\n      classes: \"grid-cols-1 lg:grid-cols-3\",\n      description:\n        \"Grid items stack on small screens, expand to 3 across on large screens\",\n    },\n    \"3up\": {\n      classes: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3\",\n      description:\n        \"Grid items stack on small screens, 2 across on medium, 3 across on large\",\n    },\n    \"4up\": {\n      classes: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\",\n      description:\n        \"Grid items stack on small screens, progressively increase columns at larger breakpoints\",\n    },\n    \"6up\": {\n      classes: \"grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6\",\n      description: \"Grid items start at 2 across, expand to 6 across on XL\",\n    },\n    \"1-2-4up\": {\n      classes: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4\",\n      description:\n        \"Grid items stack on small screens, 2 across on medium, 4 across on large\",\n    },\n  },\n  gap: {\n    none: {\n      classes: \"gap-0\",\n      description: \"No gap between grid items\",\n    },\n    sm: {\n      classes: \"gap-3\",\n      description: \"Small gap between grid items\",\n    },\n    base: {\n      classes: \"gap-2 md:gap-6 lg:gap-8\",\n      description: \"Default responsive gap between grid items\",\n    },\n    lg: {\n      classes: \"gap-8\",\n      description: \"Large gap between grid items\",\n    },\n  },\n} as const;\n\nexport const KUMO_GRID_DEFAULT_VARIANTS = {\n  gap: \"base\",\n} as const;\n\nexport type KumoGridVariant = keyof typeof KUMO_GRID_VARIANTS.variant;\nexport type KumoGridGap = keyof typeof KUMO_GRID_VARIANTS.gap;\n\n/**\n * Grid component props.\n *\n * @example\n * ```tsx\n * <Grid variant=\"3up\" gap=\"sm\">\n *   <GridItem><Surface className=\"p-4\">1</Surface></GridItem>\n *   <GridItem><Surface className=\"p-4\">2</Surface></GridItem>\n *   <GridItem><Surface className=\"p-4\">3</Surface></GridItem>\n * </Grid>\n * ```\n */\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Grid items to render. */\n  children?: React.ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Show dividers between grid items on mobile (only works with `\"4up\"` variant). */\n  mobileDivider?: boolean;\n  /**\n   * Gap size between grid items.\n   * - `\"none\"` — No gap\n   * - `\"sm\"` — 12px gap\n   * - `\"base\"` — Responsive gap (8px → 24px → 32px)\n   * - `\"lg\"` — 32px gap\n   * @default \"base\"\n   */\n  gap?: KumoGridGap;\n  /**\n   * Responsive column layout variant.\n   * - `\"2up\"` — 1 col → 2 cols at md\n   * - `\"side-by-side\"` — Always 2 cols\n   * - `\"2-1\"` — 66%/33% split at md\n   * - `\"1-2\"` — 33%/66% split at md\n   * - `\"3up\"` — 1 → 2 → 3 cols\n   * - `\"4up\"` — 1 → 2 → 3 → 4 cols\n   * - `\"6up\"` — 2 → 3 → 4 → 6 cols\n   * - `\"1-2-4up\"` — 1 → 2 → 4 cols\n   */\n  variant?: KumoGridVariant;\n}\n\n/** GridItem component props — a single cell within a Grid. */\nexport interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Content for this grid cell. */\n  children?: React.ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\ninterface GridContextValue {\n  variant?: KumoGridVariant;\n  gap: KumoGridGap;\n  mobileDivider?: boolean;\n}\n\nconst GridContext = React.createContext<GridContextValue>({\n  gap: \"base\",\n});\n\nexport function gridVariants({\n  variant,\n  gap = KUMO_GRID_DEFAULT_VARIANTS.gap,\n}: {\n  variant?: KumoGridVariant;\n  gap?: KumoGridGap;\n} = {}) {\n  return cn(\n    \"grid\",\n    variant && KUMO_GRID_VARIANTS.variant[variant].classes,\n    KUMO_GRID_VARIANTS.gap[gap].classes,\n  );\n}\n\nexport function gridItemVariants({\n  variant,\n  mobileDivider,\n}: {\n  variant?: KumoGridVariant;\n  mobileDivider?: boolean;\n} = {}) {\n  return cn(\n    mobileDivider &&\n      variant === \"4up\" &&\n      \"border-b border-kumo-line pb-8 md:border-b-0 md:pb-0\",\n  );\n}\n\n/**\n * Responsive CSS grid layout container with preset column configurations.\n *\n * @example\n * ```tsx\n * <Grid variant=\"2up\" gap=\"base\">\n *   <GridItem>Left</GridItem>\n *   <GridItem>Right</GridItem>\n * </Grid>\n * ```\n */\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps>(\n  (\n    {\n      children,\n      className,\n      mobileDivider,\n      gap = KUMO_GRID_DEFAULT_VARIANTS.gap,\n      variant,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <GridContext.Provider value={{ variant, gap, mobileDivider }}>\n        <div\n          ref={ref}\n          className={cn(gridVariants({ variant, gap }), className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </GridContext.Provider>\n    );\n  },\n);\n\nGrid.displayName = \"Grid\";\n\nexport const GridItem = React.forwardRef<HTMLDivElement, GridItemProps>(\n  ({ children, className, ...props }, ref) => {\n    const { variant, mobileDivider } = React.useContext(GridContext);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(gridItemVariants({ variant, mobileDivider }), className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nGridItem.displayName = \"GridItem\";\n"],"names":["KUMO_GRID_VARIANTS","KUMO_GRID_DEFAULT_VARIANTS","GridContext","React","gridVariants","variant","gap","cn","gridItemVariants","mobileDivider","Grid","children","className","props","ref","jsx","GridItem"],"mappings":";;;;AAIO,MAAMA,IAAqB;AAAA,EAChC,SAAS;AAAA,IACP,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,WAAW;AAAA,MACT,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,EACJ;AAAA,EAEF,KAAK;AAAA,IACH,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA6B;AAAA,EACxC,KAAK;AACP,GA6DMC,IAAcC,EAAM,cAAgC;AAAA,EACxD,KAAK;AACP,CAAC;AAEM,SAASC,EAAa;AAAA,EAC3B,SAAAC;AAAA,EACA,KAAAC,IAAML,EAA2B;AACnC,IAGI,IAAI;AACN,SAAOM;AAAA,IACL;AAAA,IACAF,KAAWL,EAAmB,QAAQK,CAAO,EAAE;AAAA,IAC/CL,EAAmB,IAAIM,CAAG,EAAE;AAAA,EAAA;AAEhC;AAEO,SAASE,EAAiB;AAAA,EAC/B,SAAAH;AAAA,EACA,eAAAI;AACF,IAGI,IAAI;AACN,SAAOF;AAAA,IACLE,KACEJ,MAAY,SACZ;AAAA,EAAA;AAEN;AAaO,MAAMK,IAAOP,EAAM;AAAA,EACxB,CACE;AAAA,IACE,UAAAQ;AAAA,IACA,WAAAC;AAAA,IACA,eAAAH;AAAA,IACA,KAAAH,IAAML,EAA2B;AAAA,IACjC,SAAAI;AAAA,IACA,GAAGQ;AAAA,EAAA,GAELC,MAGE,gBAAAC,EAACb,EAAY,UAAZ,EAAqB,OAAO,EAAE,SAAAG,GAAS,KAAAC,GAAK,eAAAG,KAC3C,UAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWP,EAAGH,EAAa,EAAE,SAAAC,GAAS,KAAAC,EAAA,CAAK,GAAGM,CAAS;AAAA,MACtD,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA,GAEL;AAGN;AAEAD,EAAK,cAAc;AAEZ,MAAMM,IAAWb,EAAM;AAAA,EAC5B,CAAC,EAAE,UAAAQ,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAAQ;AAC1C,UAAM,EAAE,SAAAT,GAAS,eAAAI,EAAA,IAAkBN,EAAM,WAAWD,CAAW;AAE/D,WACE,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,WAAWP,EAAGC,EAAiB,EAAE,SAAAH,GAAS,eAAAI,EAAA,CAAe,GAAGG,CAAS;AAAA,QACpE,GAAGC;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAK,EAAS,cAAc;"}
+{"version":3,"file":"grid-hj1ylz16p7g5uelh.js","sources":["../../src/components/grid/grid.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Grid variant and gap definitions mapping layout names to their responsive Tailwind classes. */\nexport const KUMO_GRID_VARIANTS = {\n  variant: {\n    \"2up\": {\n      classes: \"grid-cols-1 md:grid-cols-2\",\n      description:\n        \"Grid items stack on small screens, display side-by-side on medium screens and up\",\n    },\n    \"side-by-side\": {\n      classes: \"grid-cols-2\",\n      description: \"Grid items always displayed side-by-side\",\n    },\n    \"2-1\": {\n      classes: \"grid-cols-1 md:grid-cols-[2fr_1fr]\",\n      description:\n        \"Two-thirds / one-third split (66%/33%) on medium screens and up\",\n    },\n    \"1-2\": {\n      classes: \"grid-cols-1 md:grid-cols-[1fr_2fr]\",\n      description:\n        \"One-third / two-thirds split (33%/66%) on medium screens and up\",\n    },\n    \"1-3up\": {\n      classes: \"grid-cols-1 lg:grid-cols-3\",\n      description:\n        \"Grid items stack on small screens, expand to 3 across on large screens\",\n    },\n    \"3up\": {\n      classes: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3\",\n      description:\n        \"Grid items stack on small screens, 2 across on medium, 3 across on large\",\n    },\n    \"4up\": {\n      classes: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\",\n      description:\n        \"Grid items stack on small screens, progressively increase columns at larger breakpoints\",\n    },\n    \"6up\": {\n      classes: \"grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6\",\n      description: \"Grid items start at 2 across, expand to 6 across on XL\",\n    },\n    \"1-2-4up\": {\n      classes: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4\",\n      description:\n        \"Grid items stack on small screens, 2 across on medium, 4 across on large\",\n    },\n  },\n  gap: {\n    none: {\n      classes: \"gap-0\",\n      description: \"No gap between grid items\",\n    },\n    sm: {\n      classes: \"gap-3\",\n      description: \"Small gap between grid items\",\n    },\n    base: {\n      classes: \"gap-2 md:gap-6 lg:gap-8\",\n      description: \"Default responsive gap between grid items\",\n    },\n    lg: {\n      classes: \"gap-8\",\n      description: \"Large gap between grid items\",\n    },\n  },\n} as const;\n\nexport const KUMO_GRID_DEFAULT_VARIANTS = {\n  gap: \"base\",\n} as const;\n\nexport type KumoGridVariant = keyof typeof KUMO_GRID_VARIANTS.variant;\nexport type KumoGridGap = keyof typeof KUMO_GRID_VARIANTS.gap;\n\n/**\n * Grid component props.\n *\n * @example\n * ```tsx\n * <Grid variant=\"3up\" gap=\"sm\">\n *   <GridItem><Surface className=\"p-4\">1</Surface></GridItem>\n *   <GridItem><Surface className=\"p-4\">2</Surface></GridItem>\n *   <GridItem><Surface className=\"p-4\">3</Surface></GridItem>\n * </Grid>\n * ```\n */\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Grid items to render. */\n  children?: React.ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Show dividers between grid items on mobile (only works with `\"4up\"` variant). */\n  mobileDivider?: boolean;\n  /**\n   * Gap size between grid items.\n   * - `\"none\"` — No gap\n   * - `\"sm\"` — 12px gap\n   * - `\"base\"` — Responsive gap (8px → 24px → 32px)\n   * - `\"lg\"` — 32px gap\n   * @default \"base\"\n   */\n  gap?: KumoGridGap;\n  /**\n   * Responsive column layout variant.\n   * - `\"2up\"` — 1 col → 2 cols at md\n   * - `\"side-by-side\"` — Always 2 cols\n   * - `\"2-1\"` — 66%/33% split at md\n   * - `\"1-2\"` — 33%/66% split at md\n   * - `\"3up\"` — 1 → 2 → 3 cols\n   * - `\"4up\"` — 1 → 2 → 3 → 4 cols\n   * - `\"6up\"` — 2 → 3 → 4 → 6 cols\n   * - `\"1-2-4up\"` — 1 → 2 → 4 cols\n   */\n  variant?: KumoGridVariant;\n}\n\n/** GridItem component props — a single cell within a Grid. */\nexport interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Content for this grid cell. */\n  children?: React.ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\ninterface GridContextValue {\n  variant?: KumoGridVariant;\n  gap: KumoGridGap;\n  mobileDivider?: boolean;\n}\n\nconst GridContext = React.createContext<GridContextValue>({\n  gap: \"base\",\n});\n\nexport function gridVariants({\n  variant,\n  gap = KUMO_GRID_DEFAULT_VARIANTS.gap,\n}: {\n  variant?: KumoGridVariant;\n  gap?: KumoGridGap;\n} = {}) {\n  return cn(\n    \"grid\",\n    variant && KUMO_GRID_VARIANTS.variant[variant].classes,\n    KUMO_GRID_VARIANTS.gap[gap].classes,\n  );\n}\n\nexport function gridItemVariants({\n  variant,\n  mobileDivider,\n}: {\n  variant?: KumoGridVariant;\n  mobileDivider?: boolean;\n} = {}) {\n  return cn(\n    mobileDivider &&\n      variant === \"4up\" &&\n      \"border-b border-kumo-hairline pb-8 md:border-b-0 md:pb-0\",\n  );\n}\n\n/**\n * Responsive CSS grid layout container with preset column configurations.\n *\n * @example\n * ```tsx\n * <Grid variant=\"2up\" gap=\"base\">\n *   <GridItem>Left</GridItem>\n *   <GridItem>Right</GridItem>\n * </Grid>\n * ```\n */\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps>(\n  (\n    {\n      children,\n      className,\n      mobileDivider,\n      gap = KUMO_GRID_DEFAULT_VARIANTS.gap,\n      variant,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <GridContext.Provider value={{ variant, gap, mobileDivider }}>\n        <div\n          ref={ref}\n          className={cn(gridVariants({ variant, gap }), className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </GridContext.Provider>\n    );\n  },\n);\n\nGrid.displayName = \"Grid\";\n\nexport const GridItem = React.forwardRef<HTMLDivElement, GridItemProps>(\n  ({ children, className, ...props }, ref) => {\n    const { variant, mobileDivider } = React.useContext(GridContext);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(gridItemVariants({ variant, mobileDivider }), className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nGridItem.displayName = \"GridItem\";\n"],"names":["KUMO_GRID_VARIANTS","KUMO_GRID_DEFAULT_VARIANTS","GridContext","React","gridVariants","variant","gap","cn","gridItemVariants","mobileDivider","Grid","children","className","props","ref","jsx","GridItem"],"mappings":";;;;AAIO,MAAMA,IAAqB;AAAA,EAChC,SAAS;AAAA,IACP,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,WAAW;AAAA,MACT,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,EACJ;AAAA,EAEF,KAAK;AAAA,IACH,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA6B;AAAA,EACxC,KAAK;AACP,GA6DMC,IAAcC,EAAM,cAAgC;AAAA,EACxD,KAAK;AACP,CAAC;AAEM,SAASC,EAAa;AAAA,EAC3B,SAAAC;AAAA,EACA,KAAAC,IAAML,EAA2B;AACnC,IAGI,IAAI;AACN,SAAOM;AAAA,IACL;AAAA,IACAF,KAAWL,EAAmB,QAAQK,CAAO,EAAE;AAAA,IAC/CL,EAAmB,IAAIM,CAAG,EAAE;AAAA,EAAA;AAEhC;AAEO,SAASE,EAAiB;AAAA,EAC/B,SAAAH;AAAA,EACA,eAAAI;AACF,IAGI,IAAI;AACN,SAAOF;AAAA,IACLE,KACEJ,MAAY,SACZ;AAAA,EAAA;AAEN;AAaO,MAAMK,IAAOP,EAAM;AAAA,EACxB,CACE;AAAA,IACE,UAAAQ;AAAA,IACA,WAAAC;AAAA,IACA,eAAAH;AAAA,IACA,KAAAH,IAAML,EAA2B;AAAA,IACjC,SAAAI;AAAA,IACA,GAAGQ;AAAA,EAAA,GAELC,MAGE,gBAAAC,EAACb,EAAY,UAAZ,EAAqB,OAAO,EAAE,SAAAG,GAAS,KAAAC,GAAK,eAAAG,KAC3C,UAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWP,EAAGH,EAAa,EAAE,SAAAC,GAAS,KAAAC,EAAA,CAAK,GAAGM,CAAS;AAAA,MACtD,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA,GAEL;AAGN;AAEAD,EAAK,cAAc;AAEZ,MAAMM,IAAWb,EAAM;AAAA,EAC5B,CAAC,EAAE,UAAAQ,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAAQ;AAC1C,UAAM,EAAE,SAAAT,GAAS,eAAAI,EAAA,IAAkBN,EAAM,WAAWD,CAAW;AAE/D,WACE,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,WAAWP,EAAGC,EAAiB,EAAE,SAAAH,GAAS,eAAAI,EAAA,CAAe,GAAGG,CAAS;AAAA,QACpE,GAAGC;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAK,EAAS,cAAc;"}

package/dist/chunks/{input-area-no30c09udyjxshu5.js → input-area-jkkkjej6luumrqpa.js}

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
-import { i as y } from "./input-h48k3uagzrgb98au.js";
+import { i as y } from "./input-cw05pbqdburghkus.js";
 import { c as N } from "./cn-ct4n7r74mh8y0f48.js";
 import * as x from "react";
 import { useCallback as I } from "react";
-import { F as b } from "./field-krp6z6vfbkrvufz2.js";
-import { aP as w } from "./vendor-base-ui-k7bzesq81ie36nya.js";
+import { F as b } from "./field-bo5gmna16odrrb1q.js";
+import { aP as w } from "./vendor-base-ui-m5pz3e8c4grg5qmj.js";
 const c = x.forwardRef(
   (u, t) => {
     const {
@@ -75,4 +75,4 @@ export {
   c as I,
   j as T
 };
-//# sourceMappingURL=input-area-no30c09udyjxshu5.js.map
+//# sourceMappingURL=input-area-jkkkjej6luumrqpa.js.map

package/dist/chunks/{input-area-no30c09udyjxshu5.js.map → input-area-jkkkjej6luumrqpa.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-area-no30c09udyjxshu5.js","sources":["../../src/components/input/input-area.tsx"],"sourcesContent":["import { inputVariants } from \"./input\";\nimport { cn } from \"../../utils/cn\";\nimport { useCallback, type ReactNode } from \"react\";\nimport * as React from \"react\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { Field as KumoField, type FieldErrorMatch } from \"../field/field\";\n\nexport const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(\n  (props, ref) => {\n    const {\n      className,\n      onValueChange,\n      size = \"base\",\n      variant: variantProp,\n      onChange,\n      label,\n      labelTooltip,\n      description,\n      error,\n      ...inputProps\n    } = props;\n\n    // Deprecation warning for variant=\"error\"\n    if (process.env.NODE_ENV !== \"production\" && variantProp === \"error\") {\n      console.warn(\n        '[Kumo InputArea]: variant=\"error\" is deprecated. ' +\n          \"Error styling is now automatically applied when the `error` prop is truthy. \" +\n          \"Simply remove the variant prop and pass an error message instead.\",\n      );\n    }\n\n    // Auto-apply error styling when error prop is truthy\n    // Explicit variant prop takes precedence for backwards compatibility\n    const variant = variantProp ?? (error ? \"error\" : \"default\");\n\n    // Extract required from inputProps to pass to Field for label decoration\n    const { required } = inputProps;\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        onChange?.(event);\n        onValueChange?.(event.target.value);\n      },\n      [onChange, onValueChange],\n    );\n\n    const textareaClassName = cn(\n      inputVariants({ size, variant, focusIndicator: true }),\n      \"h-auto py-2\", // Input variant always comes with size, but it does not apply for textarea\n      className,\n    );\n\n    // Render with Field wrapper if label is provided\n    // Use FieldBase.Control with render callback to ensure proper label-textarea association.\n    // The render callback receives props with the correct id/aria-labelledby from Field context.\n    if (label) {\n      return (\n        <KumoField\n          label={label}\n          required={required}\n          labelTooltip={labelTooltip}\n          description={description}\n          error={\n            error\n              ? typeof error === \"string\"\n                ? { message: error, match: true }\n                : error\n              : undefined\n          }\n        >\n          <FieldBase.Control\n            render={(controlProps) => (\n              <textarea\n                {...controlProps}\n                ref={ref}\n                className={textareaClassName}\n                onChange={handleChange}\n                {...inputProps}\n              />\n            )}\n          />\n        </KumoField>\n      );\n    }\n\n    // Render bare textarea without Field wrapper\n    return (\n      <textarea\n        ref={ref}\n        className={textareaClassName}\n        onChange={handleChange}\n        {...inputProps}\n      />\n    );\n  },\n);\n\nInputArea.displayName = \"InputArea\";\n\n/** Alias for InputArea — provided for discoverability when migrating from other libraries */\nexport const Textarea = InputArea;\n\n/**\n * InputArea component props\n * @property {ReactNode} [label] - Label content for the textarea (enables Field wrapper)\n * @property {ReactNode} [description] - Helper text displayed below the textarea\n * @property {string | { message: ReactNode, match: FieldErrorMatch }} [error] - Error message or validation error object\n */\nexport type InputAreaProps = {\n  onValueChange?: (value: string) => void;\n  variant?: \"default\" | \"error\";\n  size?: \"xs\" | \"sm\" | \"base\" | \"lg\";\n  // Then other custom props\n  children?: React.ReactNode;\n  className?: string;\n  /** Label content for the textarea (enables Field wrapper) - can be a string or any React node */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the textarea */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n\n  // Finally, spread the native input props (least important)\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\">;\n"],"names":["InputArea","React","props","ref","className","onValueChange","size","variantProp","onChange","label","labelTooltip","description","error","inputProps","variant","required","handleChange","useCallback","event","textareaClassName","cn","inputVariants","jsx","KumoField","FieldBase.Control","controlProps","Textarea"],"mappings":";;;;;;;;AAOO,MAAMA,IAAYC,EAAM;AAAA,EAC7B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,eAAAC;AAAA,MACA,MAAAC,IAAO;AAAA,MACP,SAASC;AAAA,MACT,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX;AAGJ,IAAI,QAAQ,IAAI,aAAa,gBAAgBK,MAAgB,WAC3D,QAAQ;AAAA,MACN;AAAA,IAAA;AAQJ,UAAMO,IAAUP,MAAgBK,IAAQ,UAAU,YAG5C,EAAE,UAAAG,MAAaF,GACfG,IAAeC;AAAA,MACnB,CAACC,MAAkD;AACjD,QAAAV,IAAWU,CAAK,GAChBb,IAAgBa,EAAM,OAAO,KAAK;AAAA,MACpC;AAAA,MACA,CAACV,GAAUH,CAAa;AAAA,IAAA,GAGpBc,IAAoBC;AAAA,MACxBC,EAAc,EAAE,MAAAf,GAAM,SAAAQ,GAAS,gBAAgB,IAAM;AAAA,MACrD;AAAA;AAAA,MACAV;AAAA,IAAA;AAMF,WAAIK,IAEA,gBAAAa;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAAd;AAAA,QACA,UAAAM;AAAA,QACA,cAAAL;AAAA,QACA,aAAAC;AAAA,QACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,QAGN,UAAA,gBAAAU;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,QAAQ,CAACC,MACP,gBAAAH;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAGG;AAAA,gBACJ,KAAAtB;AAAA,gBACA,WAAWgB;AAAA,gBACX,UAAUH;AAAA,gBACT,GAAGH;AAAA,cAAA;AAAA,YAAA;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,IAOJ,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAnB;AAAA,QACA,WAAWgB;AAAA,QACX,UAAUH;AAAA,QACT,GAAGH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEAb,EAAU,cAAc;AAGjB,MAAM0B,IAAW1B;"}
+{"version":3,"file":"input-area-jkkkjej6luumrqpa.js","sources":["../../src/components/input/input-area.tsx"],"sourcesContent":["import { inputVariants } from \"./input\";\nimport { cn } from \"../../utils/cn\";\nimport { useCallback, type ReactNode } from \"react\";\nimport * as React from \"react\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { Field as KumoField, type FieldErrorMatch } from \"../field/field\";\n\nexport const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(\n  (props, ref) => {\n    const {\n      className,\n      onValueChange,\n      size = \"base\",\n      variant: variantProp,\n      onChange,\n      label,\n      labelTooltip,\n      description,\n      error,\n      ...inputProps\n    } = props;\n\n    // Deprecation warning for variant=\"error\"\n    if (process.env.NODE_ENV !== \"production\" && variantProp === \"error\") {\n      console.warn(\n        '[Kumo InputArea]: variant=\"error\" is deprecated. ' +\n          \"Error styling is now automatically applied when the `error` prop is truthy. \" +\n          \"Simply remove the variant prop and pass an error message instead.\",\n      );\n    }\n\n    // Auto-apply error styling when error prop is truthy\n    // Explicit variant prop takes precedence for backwards compatibility\n    const variant = variantProp ?? (error ? \"error\" : \"default\");\n\n    // Extract required from inputProps to pass to Field for label decoration\n    const { required } = inputProps;\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        onChange?.(event);\n        onValueChange?.(event.target.value);\n      },\n      [onChange, onValueChange],\n    );\n\n    const textareaClassName = cn(\n      inputVariants({ size, variant, focusIndicator: true }),\n      \"h-auto py-2\", // Input variant always comes with size, but it does not apply for textarea\n      className,\n    );\n\n    // Render with Field wrapper if label is provided\n    // Use FieldBase.Control with render callback to ensure proper label-textarea association.\n    // The render callback receives props with the correct id/aria-labelledby from Field context.\n    if (label) {\n      return (\n        <KumoField\n          label={label}\n          required={required}\n          labelTooltip={labelTooltip}\n          description={description}\n          error={\n            error\n              ? typeof error === \"string\"\n                ? { message: error, match: true }\n                : error\n              : undefined\n          }\n        >\n          <FieldBase.Control\n            render={(controlProps) => (\n              <textarea\n                {...controlProps}\n                ref={ref}\n                className={textareaClassName}\n                onChange={handleChange}\n                {...inputProps}\n              />\n            )}\n          />\n        </KumoField>\n      );\n    }\n\n    // Render bare textarea without Field wrapper\n    return (\n      <textarea\n        ref={ref}\n        className={textareaClassName}\n        onChange={handleChange}\n        {...inputProps}\n      />\n    );\n  },\n);\n\nInputArea.displayName = \"InputArea\";\n\n/** Alias for InputArea — provided for discoverability when migrating from other libraries */\nexport const Textarea = InputArea;\n\n/**\n * InputArea component props\n * @property {ReactNode} [label] - Label content for the textarea (enables Field wrapper)\n * @property {ReactNode} [description] - Helper text displayed below the textarea\n * @property {string | { message: ReactNode, match: FieldErrorMatch }} [error] - Error message or validation error object\n */\nexport type InputAreaProps = {\n  onValueChange?: (value: string) => void;\n  variant?: \"default\" | \"error\";\n  size?: \"xs\" | \"sm\" | \"base\" | \"lg\";\n  // Then other custom props\n  children?: React.ReactNode;\n  className?: string;\n  /** Label content for the textarea (enables Field wrapper) - can be a string or any React node */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the textarea */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n\n  // Finally, spread the native input props (least important)\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\">;\n"],"names":["InputArea","React","props","ref","className","onValueChange","size","variantProp","onChange","label","labelTooltip","description","error","inputProps","variant","required","handleChange","useCallback","event","textareaClassName","cn","inputVariants","jsx","KumoField","FieldBase.Control","controlProps","Textarea"],"mappings":";;;;;;;;AAOO,MAAMA,IAAYC,EAAM;AAAA,EAC7B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,eAAAC;AAAA,MACA,MAAAC,IAAO;AAAA,MACP,SAASC;AAAA,MACT,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX;AAGJ,IAAI,QAAQ,IAAI,aAAa,gBAAgBK,MAAgB,WAC3D,QAAQ;AAAA,MACN;AAAA,IAAA;AAQJ,UAAMO,IAAUP,MAAgBK,IAAQ,UAAU,YAG5C,EAAE,UAAAG,MAAaF,GACfG,IAAeC;AAAA,MACnB,CAACC,MAAkD;AACjD,QAAAV,IAAWU,CAAK,GAChBb,IAAgBa,EAAM,OAAO,KAAK;AAAA,MACpC;AAAA,MACA,CAACV,GAAUH,CAAa;AAAA,IAAA,GAGpBc,IAAoBC;AAAA,MACxBC,EAAc,EAAE,MAAAf,GAAM,SAAAQ,GAAS,gBAAgB,IAAM;AAAA,MACrD;AAAA;AAAA,MACAV;AAAA,IAAA;AAMF,WAAIK,IAEA,gBAAAa;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAAd;AAAA,QACA,UAAAM;AAAA,QACA,cAAAL;AAAA,QACA,aAAAC;AAAA,QACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,QAGN,UAAA,gBAAAU;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,QAAQ,CAACC,MACP,gBAAAH;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAGG;AAAA,gBACJ,KAAAtB;AAAA,gBACA,WAAWgB;AAAA,gBACX,UAAUH;AAAA,gBACT,GAAGH;AAAA,cAAA;AAAA,YAAA;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,IAOJ,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAnB;AAAA,QACA,WAAWgB;AAAA,QACX,UAAUH;AAAA,QACT,GAAGH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEAb,EAAU,cAAc;AAGjB,MAAM0B,IAAW1B;"}

package/dist/chunks/{input-h48k3uagzrgb98au.js → input-cw05pbqdburghkus.js}

@@ -2,9 +2,9 @@
 import { jsx as p } from "react/jsx-runtime";
 import { c as d } from "./cn-ct4n7r74mh8y0f48.js";
 import { forwardRef as I } from "react";
-import { F as E } from "./field-krp6z6vfbkrvufz2.js";
-import { I as N } from "./vendor-base-ui-k7bzesq81ie36nya.js";
-const c = {
+import { F as N } from "./field-bo5gmna16odrrb1q.js";
+import { I as k } from "./vendor-base-ui-m5pz3e8c4grg5qmj.js";
+const u = {
   size: {
     xs: {
       classes: "h-5 gap-1 rounded-sm px-1.5 text-xs",
@@ -33,34 +33,34 @@ const c = {
       description: "Error state for validation failures"
     }
   }
-}, u = {
+}, c = {
   size: "base",
   variant: "default"
 };
-function k({
-  variant: r = u.variant,
-  size: s = u.size,
-  parentFocusIndicator: o = !1,
-  focusIndicator: i = !1
+function y({
+  variant: r = c.variant,
+  size: s = c.size,
+  parentFocusIndicator: i = !1,
+  focusIndicator: o = !1
 } = {}) {
   return d(
     // Base styles
-    "border-0 bg-kumo-control text-kumo-default ring ring-kumo-line",
+    "border-0 bg-kumo-control text-kumo-default ring ring-kumo-hairline",
     // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)
     "kumo-input-placeholder disabled:text-kumo-subtle",
     // Apply size styles from KUMO_INPUT_VARIANTS
-    c.size[s].classes,
+    u.size[s].classes,
     // Apply variant styles from KUMO_INPUT_VARIANTS
-    c.variant[r].classes,
+    u.variant[r].classes,
     // Focus state handling
-    o && "focus-within:ring-kumo-hairline",
-    i && "focus:ring-kumo-hairline"
+    i && "focus-within:ring-kumo-hairline",
+    o && "focus:ring-kumo-hairline"
   );
 }
-const y = I((r, s) => {
+const E = I((r, s) => {
   const {
-    className: o,
-    size: i = "base",
+    className: i,
+    size: o = "base",
     variant: n,
     label: t,
     labelTooltip: m,
@@ -71,32 +71,32 @@ const y = I((r, s) => {
   process.env.NODE_ENV !== "production" && n === "error" && console.warn(
     '[Kumo Input]: variant="error" is deprecated. Error styling is now automatically applied when the `error` prop is truthy. Simply remove the variant prop and pass an error message instead.'
   );
-  const b = n ?? (e ? "error" : "default"), { required: h } = a;
+  const b = n ?? (e ? "error" : "default"), { required: g } = a;
   if (process.env.NODE_ENV !== "production") {
-    const g = !!t, v = !!(a.placeholder && a["aria-label"]), x = !!a["aria-labelledby"];
-    !g && !v && !x && console.warn(
+    const h = !!t, v = !!a["aria-label"], x = !!a["aria-labelledby"];
+    !h && !v && !x && console.warn(
       `[Kumo Input]: Input must have an accessible name. Provide either:
   - label prop: <Input label='Email' />
-  - placeholder + aria-label: <Input placeholder='Email' aria-label='Email address' />
+  - aria-label: <Input aria-label='Email address' />
   - aria-labelledby for custom label association`
     );
   }
   const l = /* @__PURE__ */ p(
-    N,
+    k,
     {
       ref: s,
       className: d(
-        k({ size: i, variant: b, focusIndicator: !0 }),
-        o
+        y({ size: o, variant: b, focusIndicator: !0 }),
+        i
       ),
       ...a
     }
   );
   return t ? /* @__PURE__ */ p(
-    E,
+    N,
     {
       label: t,
-      required: h,
+      required: g,
       labelTooltip: m,
       description: f,
       error: e ? typeof e == "string" ? { message: e, match: !0 } : e : void 0,
@@ -104,10 +104,10 @@ const y = I((r, s) => {
     }
   ) : l;
 });
-y.displayName = "Input";
+E.displayName = "Input";
 export {
-  y as I,
-  c as K,
-  k as i
+  E as I,
+  u as K,
+  y as i
 };
-//# sourceMappingURL=input-h48k3uagzrgb98au.js.map
+//# sourceMappingURL=input-cw05pbqdburghkus.js.map

package/dist/chunks/input-cw05pbqdburghkus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-cw05pbqdburghkus.js","sources":["../../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Input size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_INPUT_VARIANTS = {\n  size: {\n    xs: {\n      classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n      description: \"Extra small input for compact UIs\",\n    },\n    sm: {\n      classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n      description: \"Small input for secondary fields\",\n    },\n    base: {\n      classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n      description: \"Default input size\",\n    },\n    lg: {\n      classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n      description: \"Large input for prominent fields\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"focus:ring-kumo-hairline\",\n      description: \"Default input appearance\",\n    },\n    error: {\n      classes: \"!ring-kumo-danger focus:ring-kumo-danger\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const KUMO_INPUT_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\nexport const KUMO_INPUT_STYLING = {\n  dimensions: {\n    xs: { height: 20, paddingX: 6, fontSize: 12, borderRadius: 2, width: 160 },\n    sm: { height: 26, paddingX: 8, fontSize: 12, borderRadius: 6, width: 200 },\n    base: {\n      height: 36,\n      paddingX: 12,\n      fontSize: 16,\n      borderRadius: 8,\n      width: 280,\n    },\n    lg: { height: 40, paddingX: 16, fontSize: 16, borderRadius: 8, width: 320 },\n  },\n  baseTokens: {\n    background: \"color-secondary\",\n    text: \"text-color-surface\",\n    placeholder: \"text-color-muted\",\n    ring: \"color-border\",\n  },\n  stateTokens: {\n    focus: { ring: \"color-active\" },\n    error: { ring: \"color-error\" },\n    disabled: { opacity: 0.5, text: \"text-color-muted\" },\n  },\n} as const;\n\n// Derived types from KUMO_INPUT_VARIANTS\nexport type KumoInputSize = keyof typeof KUMO_INPUT_VARIANTS.size;\nexport type KumoInputVariant = keyof typeof KUMO_INPUT_VARIANTS.variant;\n\nexport interface KumoInputVariantsProps {\n  /**\n   * Input size.\n   * - `\"xs\"` — Extra small for compact UIs\n   * - `\"sm\"` — Small for secondary fields\n   * - `\"base\"` — Default size\n   * - `\"lg\"` — Large for prominent fields\n   * @default \"base\"\n   */\n  size?: KumoInputSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard input\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: KumoInputVariant;\n  parentFocusIndicator?: boolean;\n  focusIndicator?: boolean;\n}\n\n// Omit native `size` attribute (number) to avoid conflict with our custom `size` variant\ntype BaseInputProps = Omit<ComponentPropsWithoutRef<typeof BaseInput>, \"size\">;\n\nexport function inputVariants({\n  variant = KUMO_INPUT_DEFAULT_VARIANTS.variant,\n  size = KUMO_INPUT_DEFAULT_VARIANTS.size,\n  parentFocusIndicator = false,\n  focusIndicator = false,\n}: KumoInputVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"border-0 bg-kumo-control text-kumo-default ring ring-kumo-hairline\",\n    // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)\n    \"kumo-input-placeholder disabled:text-kumo-subtle\",\n    // Apply size styles from KUMO_INPUT_VARIANTS\n    KUMO_INPUT_VARIANTS.size[size].classes,\n    // Apply variant styles from KUMO_INPUT_VARIANTS\n    KUMO_INPUT_VARIANTS.variant[variant].classes,\n    // Focus state handling\n    parentFocusIndicator && \"focus-within:ring-kumo-hairline\",\n    focusIndicator && \"focus:ring-kumo-hairline\",\n  );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n  const {\n    className,\n    size = \"base\",\n    variant: variantProp,\n    label,\n    labelTooltip,\n    description,\n    error,\n    ...inputProps\n  } = props;\n\n  // Deprecation warning for variant=\"error\"\n  if (process.env.NODE_ENV !== \"production\" && variantProp === \"error\") {\n    console.warn(\n      '[Kumo Input]: variant=\"error\" is deprecated. ' +\n        \"Error styling is now automatically applied when the `error` prop is truthy. \" +\n        \"Simply remove the variant prop and pass an error message instead.\",\n    );\n  }\n\n  // Auto-apply error styling when error prop is truthy\n  // Explicit variant prop takes precedence for backwards compatibility\n  const variant = variantProp ?? (error ? \"error\" : \"default\");\n\n  // Extract required from inputProps to pass to Field for label decoration\n  const { required } = inputProps;\n\n  // A11y enforcement: warn in dev if no accessible name provided\n  if (process.env.NODE_ENV !== \"production\") {\n    const hasLabel = Boolean(label);\n    const hasAriaLabel = Boolean(inputProps[\"aria-label\"]);\n    const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n    if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n      console.warn(\n        \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n          \"  - label prop: <Input label='Email' />\\n\" +\n          \"  - aria-label: <Input aria-label='Email address' />\\n\" +\n          \"  - aria-labelledby for custom label association\",\n      );\n    }\n  }\n\n  const input = (\n    <BaseInput\n      ref={ref}\n      className={cn(\n        inputVariants({ size, variant, focusIndicator: true }),\n        className,\n      )}\n      {...inputProps}\n    />\n  );\n\n  // Render with Field wrapper if label is provided\n  if (label) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {input}\n      </Field>\n    );\n  }\n\n  // Render bare input without Field wrapper\n  return input;\n});\n\nInput.displayName = \"Input\";\n\n/**\n * Input component props with accessibility guidance.\n *\n * **Accessible Name Required:** Input should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with label/description/error\n * 2. `placeholder` + `aria-label` - for bare inputs with visual placeholder\n * 3. `aria-labelledby` - for custom label association\n *\n * Missing accessible names will trigger console warnings in development.\n *\n * @example\n * // Recommended: Built-in Field wrapper\n * <Input label=\"Email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Bare input with placeholder and aria-label\n * <Input placeholder=\"Search...\" aria-label=\"Search products\" />\n *\n * @example\n * // Custom label association\n * <label id=\"email-label\">Email</label>\n * <Input aria-labelledby=\"email-label\" />\n *\n * @example\n * // With description and error\n * <Input\n *   label=\"Password\"\n *   description=\"Must be at least 8 characters\"\n *   error=\"Password is too short\"\n * />\n */\nexport type InputProps = Pick<KumoInputVariantsProps, \"size\" | \"variant\"> &\n  BaseInputProps & {\n    /** Label content for the input (enables Field wrapper) - can be a string or any React node */\n    label?: ReactNode;\n    /** Tooltip content to display next to the label via an info icon */\n    labelTooltip?: ReactNode;\n    /** Helper text displayed below the input */\n    description?: ReactNode;\n    /** Error message or validation error object */\n    error?: string | { message: ReactNode; match: FieldErrorMatch };\n  };\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","Input","forwardRef","props","ref","className","variantProp","label","labelTooltip","description","error","inputProps","required","hasLabel","hasAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;AAUO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,SAAS;AACX;AAwDO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AAAA,EACtC,MAAAG,IAAOH,EAA4B;AAAA,EACnC,sBAAAI,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AACnB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEAP,EAAoB,KAAKI,CAAI,EAAE;AAAA;AAAA,IAE/BJ,EAAoB,QAAQG,CAAO,EAAE;AAAA;AAAA,IAErCE,KAAwB;AAAA,IACxBC,KAAkB;AAAA,EAAA;AAEtB;AAEO,MAAME,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAR,IAAO;AAAA,IACP,SAASS;AAAA,IACT,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AAGJ,EAAI,QAAQ,IAAI,aAAa,gBAAgBG,MAAgB,WAC3D,QAAQ;AAAA,IACN;AAAA,EAAA;AAQJ,QAAMV,IAAUU,MAAgBI,IAAQ,UAAU,YAG5C,EAAE,UAAAE,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,IAAe,EAAQH,EAAW,YAAY,GAC9CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAAgB,CAACC,KACjC,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAd;AAAA,MACA,WAAWJ;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDS;AAAA,MAAA;AAAA,MAED,GAAGM;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIJ,IAEA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAZ;AAAA,MACA,UAAAK;AAAA,MACA,cAAAJ;AAAA,MACA,aAAAC;AAAA,MACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,MAGL,UAAAM;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDf,EAAM,cAAc;"}

package/dist/chunks/{input-group-lxdd09p60cf27pe1.js → input-group-lfugneuz71g42n0w.js}

@@ -3,8 +3,8 @@ import { jsx as t } from "react/jsx-runtime";
 import * as d from "react";
 import { useContext as l } from "react";
 import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
-import { i as m, I as p } from "./input-h48k3uagzrgb98au.js";
-import { B as x } from "./button-cdxnqcgzwko8ooha.js";
+import { i as m, I as p } from "./input-cw05pbqdburghkus.js";
+import { B as x } from "./button-oaqi7ykdisyskoos.js";
 const I = {
   focusMode: "container"
 }, r = d.createContext(
@@ -26,7 +26,7 @@ function v({
       className: s(
         m({ size: n, parentFocusIndicator: !a }),
         "flex w-full gap-0 border-0 px-0",
-        a ? "isolate overflow-visible" : "overflow-hidden shadow-xs ring ring-kumo-line focus-within:ring-kumo-hairline",
+        a ? "isolate overflow-visible" : "overflow-hidden shadow-xs ring ring-kumo-line focus-within:ring-kumo-line",
         e
       ),
       children: i
@@ -59,7 +59,7 @@ function b(n) {
       className: s(
         "flex h-full items-center rounded-none border-0 bg-kumo-base font-sans",
         "grow px-2",
-        e ? "relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-1 focus:outline" : "focus:border-kumo-fill",
+        e ? "relative ring ring-kumo-hairline first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-1 focus:outline" : "focus:border-kumo-fill",
         n.className
       )
     }
@@ -92,7 +92,7 @@ function k({
       size: o?.size,
       className: s(
         "h-full! rounded-none disabled:bg-kumo-overlay disabled:text-kumo-inactive!",
-        u && "relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-1 focus:outline",
+        u && "relative ring ring-kumo-hairline first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-1 focus:outline",
         i
       ),
       children: n
@@ -108,4 +108,4 @@ const U = Object.assign(v, {
 export {
   U as I
 };
-//# sourceMappingURL=input-group-lxdd09p60cf27pe1.js.map
+//# sourceMappingURL=input-group-lfugneuz71g42n0w.js.map

package/dist/chunks/input-group-lfugneuz71g42n0w.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group-lfugneuz71g42n0w.js","sources":["../../src/components/input/input-group.tsx"],"sourcesContent":["import { type PropsWithChildren, useContext } from \"react\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport {\n  Input as InputExternal,\n  type InputProps,\n  inputVariants,\n} from \"./input\";\nimport { type ButtonProps, Button as ButtonExternal } from \"../button/button\";\n\nexport const KUMO_INPUT_GROUP_VARIANTS = {\n  focusMode: {\n    container: {\n      classes: \"\",\n      description: \"Focus indicator on container (default behavior)\",\n    },\n    individual: {\n      classes: \"\",\n      description: \"Focus indicators on individual elements\",\n    },\n  },\n} as const;\n\nexport const KUMO_INPUT_GROUP_DEFAULT_VARIANTS = {\n  focusMode: \"container\",\n} as const;\n\nexport type KumoInputGroupFocusMode =\n  keyof typeof KUMO_INPUT_GROUP_VARIANTS.focusMode;\n\nexport interface KumoInputGroupVariantsProps {\n  focusMode?: KumoInputGroupFocusMode;\n}\n\ninterface InputGroupRootProps extends KumoInputGroupVariantsProps {\n  className?: string;\n  size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | undefined;\n}\n\ninterface InputGroupContextValue extends InputGroupRootProps {\n  inputId: string;\n  descriptionId: string;\n}\n\nconst InputGroupContext = React.createContext<InputGroupContextValue | null>(\n  null,\n);\n\nfunction Root({\n  size,\n  children,\n  className,\n  focusMode = KUMO_INPUT_GROUP_DEFAULT_VARIANTS.focusMode,\n}: PropsWithChildren<InputGroupRootProps>) {\n  const inputId = React.useId();\n  const descriptionId = React.useId();\n  const contextValue = React.useMemo(\n    () => ({ size, inputId, descriptionId, focusMode }),\n    [size, inputId, descriptionId, focusMode],\n  );\n\n  const isIndividualFocus = focusMode === \"individual\";\n\n  return (\n    <InputGroupContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          inputVariants({ size, parentFocusIndicator: !isIndividualFocus }),\n          \"flex w-full gap-0 border-0 px-0\",\n          isIndividualFocus\n            ? \"isolate overflow-visible\"\n            : \"overflow-hidden shadow-xs ring ring-kumo-line focus-within:ring-kumo-line\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </InputGroupContext.Provider>\n  );\n}\n\nfunction Label({ children }: PropsWithChildren<{}>) {\n  const context = useContext(InputGroupContext);\n  const isIndividualFocus = context?.focusMode === \"individual\";\n\n  return (\n    <label\n      htmlFor={context?.inputId}\n      className={cn(\n        \"flex h-full items-center p-0 px-2 text-kumo-subtle\",\n        isIndividualFocus &&\n          \"first:rounded-l-[inherit] last:rounded-r-[inherit]\",\n      )}\n    >\n      {children}\n    </label>\n  );\n}\n\nfunction Input(props: InputProps) {\n  const context = useContext(InputGroupContext);\n  const isIndividualFocus = context?.focusMode === \"individual\";\n\n  return (\n    <InputExternal\n      id={context?.inputId}\n      aria-describedby={context?.descriptionId}\n      size={context?.size}\n      {...props}\n      className={cn(\n        \"flex h-full items-center rounded-none border-0 bg-kumo-base font-sans\",\n        \"grow px-2\",\n        isIndividualFocus\n          ? \"relative ring ring-kumo-hairline first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-1 focus:outline\"\n          : \"focus:border-kumo-fill\",\n        props.className,\n      )}\n    />\n  );\n}\n\nfunction Description({ children }: PropsWithChildren<{}>) {\n  const context = useContext(InputGroupContext);\n  const isIndividualFocus = context?.focusMode === \"individual\";\n\n  return (\n    <span\n      id={context?.descriptionId}\n      className={cn(\n        \"flex h-full items-center p-0 px-2 text-kumo-subtle\",\n        isIndividualFocus &&\n          \"first:rounded-l-[inherit] last:rounded-r-[inherit]\",\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n\nfunction Button({\n  children,\n  className,\n  ...props\n}: PropsWithChildren<ButtonProps>) {\n  const context = useContext(InputGroupContext);\n  const isIndividualFocus = context?.focusMode === \"individual\";\n\n  return (\n    <ButtonExternal\n      {...props}\n      size={context?.size}\n      className={cn(\n        \"h-full! rounded-none disabled:bg-kumo-overlay disabled:text-kumo-inactive!\",\n        isIndividualFocus &&\n          \"relative ring ring-kumo-hairline first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-1 focus:outline\",\n        className,\n      )}\n    >\n      {children}\n    </ButtonExternal>\n  );\n}\n\nexport const InputGroup = Object.assign(Root, {\n  Label,\n  Input,\n  Button,\n  Description,\n});\n"],"names":["KUMO_INPUT_GROUP_DEFAULT_VARIANTS","InputGroupContext","React","Root","size","children","className","focusMode","inputId","descriptionId","contextValue","isIndividualFocus","jsx","cn","inputVariants","Label","context","useContext","Input","props","InputExternal","Description","Button","ButtonExternal","InputGroup"],"mappings":";;;;;;;AAuBO,MAAMA,IAAoC;AAAA,EAC/C,WAAW;AACb,GAmBMC,IAAoBC,EAAM;AAAA,EAC9B;AACF;AAEA,SAASC,EAAK;AAAA,EACZ,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAYP,EAAkC;AAChD,GAA2C;AACzC,QAAMQ,IAAUN,EAAM,MAAA,GAChBO,IAAgBP,EAAM,MAAA,GACtBQ,IAAeR,EAAM;AAAA,IACzB,OAAO,EAAE,MAAAE,GAAM,SAAAI,GAAS,eAAAC,GAAe,WAAAF,EAAA;AAAA,IACvC,CAACH,GAAMI,GAASC,GAAeF,CAAS;AAAA,EAAA,GAGpCI,IAAoBJ,MAAc;AAExC,SACE,gBAAAK,EAACX,EAAkB,UAAlB,EAA2B,OAAOS,GACjC,UAAA,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAc,EAAE,MAAAV,GAAM,sBAAsB,CAACO,GAAmB;AAAA,QAChE;AAAA,QACAA,IACI,6BACA;AAAA,QACJL;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEA,SAASU,EAAM,EAAE,UAAAV,KAAmC;AAClD,QAAMW,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAASI,GAAS;AAAA,MAClB,WAAWH;AAAA,QACT;AAAA,QACAF,KACE;AAAA,MAAA;AAAA,MAGH,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAASa,EAAMC,GAAmB;AAChC,QAAMH,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAACQ;AAAAA,IAAA;AAAA,MACC,IAAIJ,GAAS;AAAA,MACb,oBAAkBA,GAAS;AAAA,MAC3B,MAAMA,GAAS;AAAA,MACd,GAAGG;AAAA,MACJ,WAAWN;AAAA,QACT;AAAA,QACA;AAAA,QACAF,IACI,gHACA;AAAA,QACJQ,EAAM;AAAA,MAAA;AAAA,IACR;AAAA,EAAA;AAGN;AAEA,SAASE,EAAY,EAAE,UAAAhB,KAAmC;AACxD,QAAMW,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAII,GAAS;AAAA,MACb,WAAWH;AAAA,QACT;AAAA,QACAF,KACE;AAAA,MAAA;AAAA,MAGH,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAASiB,EAAO;AAAA,EACd,UAAAjB;AAAA,EACA,WAAAC;AAAA,EACA,GAAGa;AACL,GAAmC;AACjC,QAAMH,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAACW;AAAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,MAAMH,GAAS;AAAA,MACf,WAAWH;AAAA,QACT;AAAA,QACAF,KACE;AAAA,QACFL;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,MAAMmB,IAAa,OAAO,OAAOrB,GAAM;AAAA,EAC5C,OAAAY;AAAA,EACA,OAAAG;AAAA,EACA,QAAAI;AAAA,EACA,aAAAD;AACF,CAAC;"}

package/dist/chunks/label-cvyvbqmt4mt757ff.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as e, jsxs as c, Fragment as f } from "react/jsx-runtime";
+import { Info as p } from "@phosphor-icons/react";
+import { c as n } from "./cn-ct4n7r74mh8y0f48.js";
+import { B as u } from "./button-oaqi7ykdisyskoos.js";
+import { T as d } from "./tooltip-hikjvdbg3xghnq1x.js";
+const T = {
+  // Label currently has no variant options but structure is ready for future additions
+}, g = {};
+function b(a = {}) {
+  return n(
+    // Base styles - when used standalone, apply text styling
+    // When used inside Field, the parent FieldBase.Label provides these styles
+    "m-0 text-base font-medium text-kumo-default"
+  );
+}
+function o() {
+  return n(
+    // Content wrapper styles - always applied
+    "inline-flex items-center gap-1"
+  );
+}
+function x({
+  children: a,
+  showOptional: i = !1,
+  tooltip: t,
+  className: r,
+  htmlFor: l,
+  asContent: m = !1
+}) {
+  const s = /* @__PURE__ */ c(f, { children: [
+    a,
+    i && /* @__PURE__ */ e("span", { className: "font-normal text-kumo-strong", children: "(optional)" }),
+    t && /* @__PURE__ */ e(
+      d,
+      {
+        content: t,
+        render: /* @__PURE__ */ e(
+          u,
+          {
+            variant: "ghost",
+            size: "xs",
+            shape: "square",
+            "aria-label": "More information",
+            children: /* @__PURE__ */ e(p, { className: "size-4" })
+          }
+        )
+      }
+    )
+  ] });
+  return m ? /* @__PURE__ */ e("span", { className: n(o(), r), children: s }) : /* @__PURE__ */ e(
+    "label",
+    {
+      htmlFor: l,
+      className: n(b(), o(), r),
+      children: s
+    }
+  );
+}
+x.displayName = "Label";
+export {
+  T as K,
+  x as L,
+  o as a,
+  g as b,
+  b as l
+};
+//# sourceMappingURL=label-cvyvbqmt4mt757ff.js.map

package/dist/chunks/{label-latndvb1ngem7we8.js.map → label-cvyvbqmt4mt757ff.js.map}

@@ -1 +1 @@
-{"version":3,"file":"label-latndvb1ngem7we8.js","sources":["../../src/components/label/label.tsx"],"sourcesContent":["import { Info } from \"@phosphor-icons/react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../button\";\nimport { Tooltip } from \"../tooltip\";\n\n/** Label variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_LABEL_VARIANTS = {\n  // Label currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_LABEL_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_LABEL_VARIANTS\nexport interface KumoLabelVariantsProps {}\n\nexport function labelVariants(_props: KumoLabelVariantsProps = {}) {\n  return cn(\n    // Base styles - when used standalone, apply text styling\n    // When used inside Field, the parent FieldBase.Label provides these styles\n    \"m-0 text-base font-medium text-kumo-default\",\n  );\n}\n\nexport function labelContentVariants() {\n  return cn(\n    // Content wrapper styles - always applied\n    \"inline-flex items-center gap-1\",\n  );\n}\n\n/**\n * Label component props.\n *\n * @example\n * ```tsx\n * <Label>Email</Label>\n * <Label showOptional>Middle Name</Label>\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n * ```\n */\nexport interface LabelProps extends KumoLabelVariantsProps {\n  /** The label content — can be a string or any React node. */\n  children: ReactNode;\n  /** When `true`, shows gray \"(optional)\" text after the label. */\n  showOptional?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  tooltip?: ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** The id of the form element this label is associated with */\n  htmlFor?: string;\n  /**\n   * When true, only renders the inline content (indicators, tooltip) without\n   * the outer label element with font styling. Useful when composed inside another\n   * label element that already provides the text styling.\n   * @default false\n   */\n  asContent?: boolean;\n}\n\n/**\n * Label component for form fields.\n *\n * Provides a standardized way to display labels with optional indicators:\n * - Optional indicator: gray \"(optional)\" text when `showOptional={true}`\n * - Tooltip: info icon with hover tooltip for additional context\n *\n * @example\n * // Basic label\n * <Label>Email</Label>\n *\n * @example\n * // Optional field with indicator\n * <Label showOptional>Middle Name</Label>\n *\n * @example\n * // With tooltip\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n *\n * @example\n * // With ReactNode children\n * <Label>\n *   <span>Custom label with <strong>bold</strong> text</span>\n * </Label>\n */\nexport function Label({\n  children,\n  showOptional = false,\n  tooltip,\n  className,\n  htmlFor,\n  asContent = false,\n}: LabelProps) {\n  const content = (\n    <>\n      {children}\n      {showOptional && (\n        <span className=\"font-normal text-kumo-strong\">(optional)</span>\n      )}\n      {tooltip && (\n        <Tooltip content={tooltip} asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"xs\"\n            shape=\"square\"\n            aria-label=\"More information\"\n          >\n            <Info className=\"size-4\" />\n          </Button>\n        </Tooltip>\n      )}\n    </>\n  );\n\n  // When used as content inside another styled element, just render inline\n  if (asContent) {\n    return (\n      <span className={cn(labelContentVariants(), className)}>{content}</span>\n    );\n  }\n\n  // When used standalone, render as <label> for accessibility\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={cn(labelVariants(), labelContentVariants(), className)}\n    >\n      {content}\n    </label>\n  );\n}\n\nLabel.displayName = \"Label\";\n"],"names":["KUMO_LABEL_VARIANTS","KUMO_LABEL_DEFAULT_VARIANTS","labelVariants","_props","cn","labelContentVariants","Label","children","showOptional","tooltip","className","htmlFor","asContent","content","jsxs","Fragment","jsx","Tooltip","Button","Info"],"mappings":";;;;;;AAOO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAKpC,SAASC,EAAcC,IAAiC,IAAI;AACjE,SAAOC;AAAA;AAAA;AAAA,IAGL;AAAA,EAAA;AAEJ;AAEO,SAASC,IAAuB;AACrC,SAAOD;AAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAyDO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAe;AACb,QAAMC,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAR;AAAA,IACAC,KACC,gBAAAQ,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,cAAU;AAAA,IAE1DP,KACC,gBAAAO,EAACC,GAAA,EAAQ,SAASR,GAAS,SAAO,IAChC,UAAA,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QACN,cAAW;AAAA,QAEX,UAAA,gBAAAF,EAACG,GAAA,EAAK,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA,EAC3B,CACF;AAAA,EAAA,GAEJ;AAIF,SAAIP,IAEA,gBAAAI,EAAC,UAAK,WAAWZ,EAAGC,KAAwBK,CAAS,GAAI,UAAAG,GAAQ,IAMnE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAL;AAAA,MACA,WAAWP,EAAGF,EAAA,GAAiBG,EAAA,GAAwBK,CAAS;AAAA,MAE/D,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAP,EAAM,cAAc;"}
+{"version":3,"file":"label-cvyvbqmt4mt757ff.js","sources":["../../src/components/label/label.tsx"],"sourcesContent":["import { Info } from \"@phosphor-icons/react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../button\";\nimport { Tooltip } from \"../tooltip\";\n\n/** Label variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_LABEL_VARIANTS = {\n  // Label currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_LABEL_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_LABEL_VARIANTS\nexport interface KumoLabelVariantsProps {}\n\nexport function labelVariants(_props: KumoLabelVariantsProps = {}) {\n  return cn(\n    // Base styles - when used standalone, apply text styling\n    // When used inside Field, the parent FieldBase.Label provides these styles\n    \"m-0 text-base font-medium text-kumo-default\",\n  );\n}\n\nexport function labelContentVariants() {\n  return cn(\n    // Content wrapper styles - always applied\n    \"inline-flex items-center gap-1\",\n  );\n}\n\n/**\n * Label component props.\n *\n * @example\n * ```tsx\n * <Label>Email</Label>\n * <Label showOptional>Middle Name</Label>\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n * ```\n */\nexport interface LabelProps extends KumoLabelVariantsProps {\n  /** The label content — can be a string or any React node. */\n  children: ReactNode;\n  /** When `true`, shows gray \"(optional)\" text after the label. */\n  showOptional?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  tooltip?: ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** The id of the form element this label is associated with */\n  htmlFor?: string;\n  /**\n   * When true, only renders the inline content (indicators, tooltip) without\n   * the outer label element with font styling. Useful when composed inside another\n   * label element that already provides the text styling.\n   * @default false\n   */\n  asContent?: boolean;\n}\n\n/**\n * Label component for form fields.\n *\n * Provides a standardized way to display labels with optional indicators:\n * - Optional indicator: gray \"(optional)\" text when `showOptional={true}`\n * - Tooltip: info icon with hover tooltip for additional context\n *\n * @example\n * // Basic label\n * <Label>Email</Label>\n *\n * @example\n * // Optional field with indicator\n * <Label showOptional>Middle Name</Label>\n *\n * @example\n * // With tooltip\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n *\n * @example\n * // With ReactNode children\n * <Label>\n *   <span>Custom label with <strong>bold</strong> text</span>\n * </Label>\n */\nexport function Label({\n  children,\n  showOptional = false,\n  tooltip,\n  className,\n  htmlFor,\n  asContent = false,\n}: LabelProps) {\n  const content = (\n    <>\n      {children}\n      {showOptional && (\n        <span className=\"font-normal text-kumo-strong\">(optional)</span>\n      )}\n      {tooltip && (\n        <Tooltip\n          content={tooltip}\n          render={\n            <Button\n              variant=\"ghost\"\n              size=\"xs\"\n              shape=\"square\"\n              aria-label=\"More information\"\n            >\n              <Info className=\"size-4\" />\n            </Button>\n          }\n        />\n      )}\n    </>\n  );\n\n  // When used as content inside another styled element, just render inline\n  if (asContent) {\n    return (\n      <span className={cn(labelContentVariants(), className)}>{content}</span>\n    );\n  }\n\n  // When used standalone, render as <label> for accessibility\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={cn(labelVariants(), labelContentVariants(), className)}\n    >\n      {content}\n    </label>\n  );\n}\n\nLabel.displayName = \"Label\";\n"],"names":["KUMO_LABEL_VARIANTS","KUMO_LABEL_DEFAULT_VARIANTS","labelVariants","_props","cn","labelContentVariants","Label","children","showOptional","tooltip","className","htmlFor","asContent","content","jsxs","Fragment","jsx","Tooltip","Button","Info"],"mappings":";;;;;;AAOO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAKpC,SAASC,EAAcC,IAAiC,IAAI;AACjE,SAAOC;AAAA;AAAA;AAAA,IAGL;AAAA,EAAA;AAEJ;AAEO,SAASC,IAAuB;AACrC,SAAOD;AAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAyDO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAe;AACb,QAAMC,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAR;AAAA,IACAC,KACC,gBAAAQ,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,cAAU;AAAA,IAE1DP,KACC,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAASR;AAAA,QACT,QACE,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAM;AAAA,YACN,cAAW;AAAA,YAEX,UAAA,gBAAAF,EAACG,GAAA,EAAK,WAAU,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,IAAA;AAAA,EAEJ,GAEJ;AAIF,SAAIP,IAEA,gBAAAI,EAAC,UAAK,WAAWZ,EAAGC,KAAwBK,CAAS,GAAI,UAAAG,GAAQ,IAMnE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAL;AAAA,MACA,WAAWP,EAAGF,EAAA,GAAiBG,EAAA,GAAwBK,CAAS;AAAA,MAE/D,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAP,EAAM,cAAc;"}

package/dist/chunks/layer-card-ljqth3yxgnk04v2o.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as y, Children as p, isValidElement as C, Fragment as g } from "react";
+import { c as a } from "./cn-ct4n7r74mh8y0f48.js";
+import { aQ as L, aR as S } from "./vendor-base-ui-m5pz3e8c4grg5qmj.js";
+const R = "overflow-hidden rounded-lg bg-kumo-base shadow-xs ring ring-kumo-line", A = "flex w-full flex-col overflow-hidden rounded-lg bg-kumo-elevated text-base ring ring-kumo-hairline", _ = "-my-2 flex items-center gap-2 bg-kumo-elevated p-4 text-base font-medium text-kumo-strong", E = "relative flex flex-col gap-2 overflow-hidden rounded-lg bg-kumo-base p-4 pr-3 text-inherit no-underline ring ring-kumo-fill";
+function x(r = {}) {
+  return a(R);
+}
+function i(r) {
+  return p.toArray(r).some((e) => C(e) ? e.type === t || e.type === n ? !0 : e.type === g ? i(e.props.children) : !1 : !1);
+}
+const d = y(function({ children: e, className: o, render: l, ...m }, u) {
+  const f = i(e), c = {
+    className: a(
+      f ? A : x(),
+      o
+    )
+  };
+  return L({
+    defaultTagName: "div",
+    render: l,
+    ref: u,
+    props: S(c, m, { children: e })
+  });
+});
+function n({
+  children: r,
+  className: e
+}) {
+  return /* @__PURE__ */ s("div", { className: a(_, e), children: r });
+}
+function t({ children: r, className: e }) {
+  return /* @__PURE__ */ s("div", { className: a(E, e), children: r });
+}
+d.displayName = "LayerCard";
+n.displayName = "LayerCard.Secondary";
+t.displayName = "LayerCard.Primary";
+const h = Object.assign(d, {
+  Primary: t,
+  Secondary: n
+});
+export {
+  h as L
+};
+//# sourceMappingURL=layer-card-ljqth3yxgnk04v2o.js.map

package/dist/chunks/layer-card-ljqth3yxgnk04v2o.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer-card-ljqth3yxgnk04v2o.js","sources":["../../src/components/layer-card/layer-card.tsx"],"sourcesContent":["import {\n  Children,\n  Fragment,\n  forwardRef,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"../../utils/cn\";\n\nconst LAYER_CARD_SURFACE_CLASSES =\n  \"overflow-hidden rounded-lg bg-kumo-base shadow-xs ring ring-kumo-line\";\nconst LAYER_CARD_LAYERED_ROOT_CLASSES =\n  \"flex w-full flex-col overflow-hidden rounded-lg bg-kumo-elevated text-base ring ring-kumo-hairline\";\nconst LAYER_CARD_SECONDARY_CLASSES =\n  \"-my-2 flex items-center gap-2 bg-kumo-elevated p-4 text-base font-medium text-kumo-strong\";\nconst LAYER_CARD_PRIMARY_CLASSES =\n  \"relative flex flex-col gap-2 overflow-hidden rounded-lg bg-kumo-base p-4 pr-3 text-inherit no-underline ring ring-kumo-fill\";\n\n/** LayerCard variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_LAYER_CARD_VARIANTS = {\n  // LayerCard currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_LAYER_CARD_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_LAYER_CARD_VARIANTS\nexport interface KumoLayerCardVariantsProps {}\n\nexport function layerCardVariants(_props: KumoLayerCardVariantsProps = {}) {\n  return cn(LAYER_CARD_SURFACE_CLASSES);\n}\n\nfunction hasLayerCardSections(children: ReactNode): boolean {\n  return Children.toArray(children).some((child): boolean => {\n    if (!isValidElement(child)) {\n      return false;\n    }\n\n    if (child.type === LayerCardPrimary || child.type === LayerCardSecondary) {\n      return true;\n    }\n\n    if (child.type === Fragment) {\n      const fragmentChild = child as ReactElement<{ children?: ReactNode }>;\n      return hasLayerCardSections(fragmentChild.props.children);\n    }\n\n    return false;\n  });\n}\n\n/**\n * LayerCard component props.\n *\n * @example\n * ```tsx\n * <LayerCard className=\"p-4\">\n *   Get started with Kumo\n * </LayerCard>\n *\n * <LayerCard>\n *   <LayerCard.Secondary>Next Steps</LayerCard.Secondary>\n *   <LayerCard.Primary>Get started with Kumo</LayerCard.Primary>\n * </LayerCard>\n * ```\n */\nexport type LayerCardProps = useRender.ComponentProps<\"div\"> &\n  KumoLayerCardVariantsProps;\n\nexport type LayerCardSectionProps = PropsWithChildren<{\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}>;\n\n/**\n * Card container for both simple surfaces and layered layouts.\n *\n * Render children directly for a single-surface card, or use\n * `LayerCard.Secondary` and `LayerCard.Primary` for the layered card treatment.\n *\n * @example\n * ```tsx\n * <LayerCard className=\"rounded-lg p-4\">Card content</LayerCard>\n * ```\n *\n * @example\n * ```tsx\n * <LayerCard>\n *   <LayerCard.Secondary>Getting Started</LayerCard.Secondary>\n *   <LayerCard.Primary>Quick start guide</LayerCard.Primary>\n * </LayerCard>\n * ```\n */\nconst LayerCardRoot = forwardRef<HTMLDivElement, LayerCardProps>(function LayerCard(\n  { children, className, render, ...props },\n  ref,\n) {\n  const hasStructuredLayers = hasLayerCardSections(children);\n\n  const defaultProps: useRender.ElementProps<\"div\"> = {\n    className: cn(\n      hasStructuredLayers ? LAYER_CARD_LAYERED_ROOT_CLASSES : layerCardVariants(),\n      className,\n    ),\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    ref,\n    props: mergeProps<\"div\">(defaultProps, props, { children }),\n  });\n});\n\nfunction LayerCardSecondary({\n  children,\n  className,\n}: LayerCardSectionProps) {\n  return <div className={cn(LAYER_CARD_SECONDARY_CLASSES, className)}>{children}</div>;\n}\n\nfunction LayerCardPrimary({ children, className }: LayerCardSectionProps) {\n  return <div className={cn(LAYER_CARD_PRIMARY_CLASSES, className)}>{children}</div>;\n}\n\nLayerCardRoot.displayName = \"LayerCard\";\nLayerCardSecondary.displayName = \"LayerCard.Secondary\";\nLayerCardPrimary.displayName = \"LayerCard.Primary\";\n\ntype LayerCardComponent = typeof LayerCardRoot & {\n  Primary: typeof LayerCardPrimary;\n  Secondary: typeof LayerCardSecondary;\n};\n\nconst LayerCard = Object.assign(LayerCardRoot, {\n  Primary: LayerCardPrimary,\n  Secondary: LayerCardSecondary,\n}) as LayerCardComponent;\n\nexport { LayerCard };\n"],"names":["LAYER_CARD_SURFACE_CLASSES","LAYER_CARD_LAYERED_ROOT_CLASSES","LAYER_CARD_SECONDARY_CLASSES","LAYER_CARD_PRIMARY_CLASSES","layerCardVariants","_props","cn","hasLayerCardSections","children","Children","child","isValidElement","LayerCardPrimary","LayerCardSecondary","Fragment","LayerCardRoot","forwardRef","className","render","props","ref","hasStructuredLayers","defaultProps","useRender","mergeProps","LayerCard"],"mappings":";;;;;AAaA,MAAMA,IACJ,yEACIC,IACJ,sGACIC,IACJ,6FACIC,IACJ;AAYK,SAASC,EAAkBC,IAAqC,IAAI;AACzE,SAAOC,EAAGN,CAA0B;AACtC;AAEA,SAASO,EAAqBC,GAA8B;AAC1D,SAAOC,EAAS,QAAQD,CAAQ,EAAE,KAAK,CAACE,MACjCC,EAAeD,CAAK,IAIrBA,EAAM,SAASE,KAAoBF,EAAM,SAASG,IAC7C,KAGLH,EAAM,SAASI,IAEVP,EADeG,EACoB,MAAM,QAAQ,IAGnD,KAZE,EAaV;AACH;AA4CA,MAAMK,IAAgBC,EAA2C,SAC/D,EAAE,UAAAR,GAAU,WAAAS,GAAW,QAAAC,GAAQ,GAAGC,EAAA,GAClCC,GACA;AACA,QAAMC,IAAsBd,EAAqBC,CAAQ,GAEnDc,IAA8C;AAAA,IAClD,WAAWhB;AAAA,MACTe,IAAsBpB,IAAkCG,EAAA;AAAA,MACxDa;AAAA,IAAA;AAAA,EACF;AAGF,SAAOM,EAAU;AAAA,IACf,gBAAgB;AAAA,IAChB,QAAAL;AAAA,IACA,KAAAE;AAAA,IACA,OAAOI,EAAkBF,GAAcH,GAAO,EAAE,UAAAX,GAAU;AAAA,EAAA,CAC3D;AACH,CAAC;AAED,SAASK,EAAmB;AAAA,EAC1B,UAAAL;AAAA,EACA,WAAAS;AACF,GAA0B;AACxB,2BAAQ,OAAA,EAAI,WAAWX,EAAGJ,GAA8Be,CAAS,GAAI,UAAAT,GAAS;AAChF;AAEA,SAASI,EAAiB,EAAE,UAAAJ,GAAU,WAAAS,KAAoC;AACxE,2BAAQ,OAAA,EAAI,WAAWX,EAAGH,GAA4Bc,CAAS,GAAI,UAAAT,GAAS;AAC9E;AAEAO,EAAc,cAAc;AAC5BF,EAAmB,cAAc;AACjCD,EAAiB,cAAc;AAO/B,MAAMa,IAAY,OAAO,OAAOV,GAAe;AAAA,EAC7C,SAASH;AAAA,EACT,WAAWC;AACb,CAAC;"}

package/dist/chunks/{link-hn5ejal7nhh0o0b4.js → link-fjnhtxvfe5ieamjf.js}

@@ -3,7 +3,7 @@ import { jsxs as d, jsx as e } from "react/jsx-runtime";
 import { forwardRef as k } from "react";
 import { c as t } from "./cn-ct4n7r74mh8y0f48.js";
 import { u as p } from "./link-provider-mn2voeohon7cj9o4.js";
-import { b6 as f, b7 as L } from "./vendor-base-ui-k7bzesq81ie36nya.js";
+import { aQ as f, aR as L } from "./vendor-base-ui-m5pz3e8c4grg5qmj.js";
 const i = (n) => /* @__PURE__ */ d(
   "svg",
   {
@@ -76,4 +76,4 @@ export {
   h as a,
   C as l
 };
-//# sourceMappingURL=link-hn5ejal7nhh0o0b4.js.map
+//# sourceMappingURL=link-fjnhtxvfe5ieamjf.js.map

package/dist/chunks/{link-hn5ejal7nhh0o0b4.js.map → link-fjnhtxvfe5ieamjf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"link-hn5ejal7nhh0o0b4.js","sources":["../../src/components/link/link.tsx"],"sourcesContent":["import { forwardRef, type SVGProps } from \"react\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { cn } from \"../../utils/cn\";\nimport {\n  useLinkComponent,\n  type LinkComponentProps,\n} from \"../../utils/link-provider\";\n\n/**\n * ExternalIcon - Visual indicator for links that open in a new tab/window.\n *\n * Use this as a child of Link to indicate external navigation:\n * ```tsx\n * <Link href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n *   Visit Example <Link.ExternalIcon />\n * </Link>\n * ```\n */\nconst ExternalIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    className=\"link-external-icon\"\n    {...props}\n  >\n    <path d=\"M9 4H8.8C7.11984 4 6.27976 4 5.63803 4.32698C5.07354 4.6146 4.6146 5.07354 4.32698 5.63803C4 6.27976 4 7.11984 4 8.8V15.2C4 16.8802 4 17.7202 4.32698 18.362C4.6146 18.9265 5.07354 19.3854 5.63803 19.673C6.27976 20 7.11984 20 8.8 20H15.2C16.8802 20 17.7202 20 18.362 19.673C18.9265 19.3854 19.3854 18.9265 19.673 18.362C20 17.7202 20 16.8802 20 15.2V15\" />\n    <path d=\"M14 4H20M20 4V10M20 4L11 13\" />\n  </svg>\n);\n\nExternalIcon.displayName = \"Link.ExternalIcon\";\n\n/** Link variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_LINK_VARIANTS = {\n  variant: {\n    inline: {\n      classes:\n        // text-kumo-link provides defensive color that won't be overridden by global `a` styles\n        \"text-kumo-link underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors\",\n      description: \"Inline text link that flows with content\",\n    },\n    current: {\n      classes:\n        \"text-current underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors\",\n      description: \"Link that inherits color from parent text\",\n    },\n    plain: {\n      classes:\n        // text-kumo-link provides defensive color that won't be overridden by global `a` styles\n        \"text-kumo-link hover:text-kumo-link/70 transition-colors\",\n      description: \"Link without underline decoration\",\n    },\n  },\n} as const;\n\nexport const KUMO_LINK_DEFAULT_VARIANTS = {\n  variant: \"inline\",\n} as const;\n\nexport type KumoLinkVariant = keyof typeof KUMO_LINK_VARIANTS.variant;\n\nexport interface KumoLinkVariantsProps {\n  /**\n   * Visual style of the link.\n   * - `\"inline\"` — Inline text link that flows with content\n   * - `\"current\"` — Link that inherits color from parent text\n   * - `\"plain\"` — Link without underline decoration\n   * @default \"inline\"\n   */\n  variant?: KumoLinkVariant;\n}\n\nexport function linkVariants({\n  variant = KUMO_LINK_DEFAULT_VARIANTS.variant,\n}: KumoLinkVariantsProps = {}) {\n  return cn(KUMO_LINK_VARIANTS.variant[variant].classes);\n}\n\n/**\n * Link component props.\n *\n * @example\n * ```tsx\n * <Link href=\"/docs\">Learn more</Link>\n * <Link href=\"https://cloudflare.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n *   Visit Cloudflare <Link.ExternalIcon />\n * </Link>\n * <Link render={<RouterLink to=\"/dashboard\" />}>Dashboard</Link>\n * ```\n */\nexport type LinkProps = useRender.ComponentProps<\"a\"> &\n  LinkComponentProps &\n  KumoLinkVariantsProps;\n\n/**\n * Link component for consistent inline text links.\n *\n * Supports composition via `render` prop for framework-specific routing:\n * - Without render: renders via LinkProvider (default anchor or configured component)\n * - With render: merges props onto the provided element with proper ref/event handling\n *\n * @example Basic usage\n * ```tsx\n * <Link href=\"/docs\">Learn more</Link>\n * ```\n *\n * @example External link with icon\n * ```tsx\n * <Link href=\"https://cloudflare.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n *   Visit Cloudflare <Link.ExternalIcon />\n * </Link>\n * ```\n *\n * @example Composition with React Router\n * ```tsx\n * <Link render={<RouterLink to=\"/dashboard\" />} variant=\"inline\">\n *   Dashboard\n * </Link>\n * ```\n */\nconst LinkBase = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  { className, variant = \"inline\", render, ...props },\n  ref,\n) {\n  const LinkComponent = useLinkComponent();\n\n  const defaultProps: useRender.ElementProps<\"a\"> = {\n    className: cn(\n      linkVariants({ variant }),\n      \"group/link inline-flex items-center gap-[0.1875em]\",\n    ),\n  };\n\n  const element = useRender({\n    render: render ?? <LinkComponent />,\n    ref,\n    props: mergeProps<\"a\">(defaultProps, props, { className }),\n  });\n\n  return element;\n});\n\nLinkBase.displayName = \"Link\";\n\n// Compound component with ExternalIcon subcomponent\nexport const Link = Object.assign(LinkBase, {\n  ExternalIcon,\n});\n"],"names":["ExternalIcon","props","jsxs","jsx","KUMO_LINK_VARIANTS","KUMO_LINK_DEFAULT_VARIANTS","linkVariants","variant","cn","LinkBase","forwardRef","className","render","ref","LinkComponent","useLinkComponent","defaultProps","useRender","mergeProps","Link"],"mappings":";;;;;;AAmBA,MAAMA,IAAe,CAACC,MACpB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IACZ,WAAU;AAAA,IACT,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,GAAE,kWAAA,CAAkW;AAAA,MAC1W,gBAAAA,EAAC,QAAA,EAAK,GAAE,8BAAA,CAA8B;AAAA,IAAA;AAAA,EAAA;AACxC;AAGFH,EAAa,cAAc;AAGpB,MAAMI,IAAqB;AAAA,EAChC,SAAS;AAAA,IACP,QAAQ;AAAA,MACN;AAAA;AAAA,QAEE;AAAA;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SACE;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL;AAAA;AAAA,QAEE;AAAA;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA6B;AAAA,EACxC,SAAS;AACX;AAeO,SAASC,EAAa;AAAA,EAC3B,SAAAC,IAAUF,EAA2B;AACvC,IAA2B,IAAI;AAC7B,SAAOG,EAAGJ,EAAmB,QAAQG,CAAO,EAAE,OAAO;AACvD;AA4CA,MAAME,IAAWC,EAAyC,SACxD,EAAE,WAAAC,GAAW,SAAAJ,IAAU,UAAU,QAAAK,GAAQ,GAAGX,EAAA,GAC5CY,GACA;AACA,QAAMC,IAAgBC,EAAA,GAEhBC,IAA4C;AAAA,IAChD,WAAWR;AAAA,MACTF,EAAa,EAAE,SAAAC,GAAS;AAAA,MACxB;AAAA,IAAA;AAAA,EACF;AASF,SANgBU,EAAU;AAAA,IACxB,QAAQL,KAAU,gBAAAT,EAACW,GAAA,CAAA,CAAc;AAAA,IACjC,KAAAD;AAAA,IACA,OAAOK,EAAgBF,GAAcf,GAAO,EAAE,WAAAU,GAAW;AAAA,EAAA,CAC1D;AAGH,CAAC;AAEDF,EAAS,cAAc;AAGhB,MAAMU,IAAO,OAAO,OAAOV,GAAU;AAAA,EAC1C,cAAAT;AACF,CAAC;"}
+{"version":3,"file":"link-fjnhtxvfe5ieamjf.js","sources":["../../src/components/link/link.tsx"],"sourcesContent":["import { forwardRef, type SVGProps } from \"react\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { cn } from \"../../utils/cn\";\nimport {\n  useLinkComponent,\n  type LinkComponentProps,\n} from \"../../utils/link-provider\";\n\n/**\n * ExternalIcon - Visual indicator for links that open in a new tab/window.\n *\n * Use this as a child of Link to indicate external navigation:\n * ```tsx\n * <Link href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n *   Visit Example <Link.ExternalIcon />\n * </Link>\n * ```\n */\nconst ExternalIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    className=\"link-external-icon\"\n    {...props}\n  >\n    <path d=\"M9 4H8.8C7.11984 4 6.27976 4 5.63803 4.32698C5.07354 4.6146 4.6146 5.07354 4.32698 5.63803C4 6.27976 4 7.11984 4 8.8V15.2C4 16.8802 4 17.7202 4.32698 18.362C4.6146 18.9265 5.07354 19.3854 5.63803 19.673C6.27976 20 7.11984 20 8.8 20H15.2C16.8802 20 17.7202 20 18.362 19.673C18.9265 19.3854 19.3854 18.9265 19.673 18.362C20 17.7202 20 16.8802 20 15.2V15\" />\n    <path d=\"M14 4H20M20 4V10M20 4L11 13\" />\n  </svg>\n);\n\nExternalIcon.displayName = \"Link.ExternalIcon\";\n\n/** Link variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_LINK_VARIANTS = {\n  variant: {\n    inline: {\n      classes:\n        // text-kumo-link provides defensive color that won't be overridden by global `a` styles\n        \"text-kumo-link underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors\",\n      description: \"Inline text link that flows with content\",\n    },\n    current: {\n      classes:\n        \"text-current underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors\",\n      description: \"Link that inherits color from parent text\",\n    },\n    plain: {\n      classes:\n        // text-kumo-link provides defensive color that won't be overridden by global `a` styles\n        \"text-kumo-link hover:text-kumo-link/70 transition-colors\",\n      description: \"Link without underline decoration\",\n    },\n  },\n} as const;\n\nexport const KUMO_LINK_DEFAULT_VARIANTS = {\n  variant: \"inline\",\n} as const;\n\nexport type KumoLinkVariant = keyof typeof KUMO_LINK_VARIANTS.variant;\n\nexport interface KumoLinkVariantsProps {\n  /**\n   * Visual style of the link.\n   * - `\"inline\"` — Inline text link that flows with content\n   * - `\"current\"` — Link that inherits color from parent text\n   * - `\"plain\"` — Link without underline decoration\n   * @default \"inline\"\n   */\n  variant?: KumoLinkVariant;\n}\n\nexport function linkVariants({\n  variant = KUMO_LINK_DEFAULT_VARIANTS.variant,\n}: KumoLinkVariantsProps = {}) {\n  return cn(KUMO_LINK_VARIANTS.variant[variant].classes);\n}\n\n/**\n * Link component props.\n *\n * @example\n * ```tsx\n * <Link href=\"/docs\">Learn more</Link>\n * <Link href=\"https://cloudflare.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n *   Visit Cloudflare <Link.ExternalIcon />\n * </Link>\n * <Link render={<RouterLink to=\"/dashboard\" />}>Dashboard</Link>\n * ```\n */\nexport type LinkProps = useRender.ComponentProps<\"a\"> &\n  LinkComponentProps &\n  KumoLinkVariantsProps;\n\n/**\n * Link component for consistent inline text links.\n *\n * Supports composition via `render` prop for framework-specific routing:\n * - Without render: renders via LinkProvider (default anchor or configured component)\n * - With render: merges props onto the provided element with proper ref/event handling\n *\n * @example Basic usage\n * ```tsx\n * <Link href=\"/docs\">Learn more</Link>\n * ```\n *\n * @example External link with icon\n * ```tsx\n * <Link href=\"https://cloudflare.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n *   Visit Cloudflare <Link.ExternalIcon />\n * </Link>\n * ```\n *\n * @example Composition with React Router\n * ```tsx\n * <Link render={<RouterLink to=\"/dashboard\" />} variant=\"inline\">\n *   Dashboard\n * </Link>\n * ```\n */\nconst LinkBase = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  { className, variant = \"inline\", render, ...props },\n  ref,\n) {\n  const LinkComponent = useLinkComponent();\n\n  const defaultProps: useRender.ElementProps<\"a\"> = {\n    className: cn(\n      linkVariants({ variant }),\n      \"group/link inline-flex items-center gap-[0.1875em]\",\n    ),\n  };\n\n  const element = useRender({\n    render: render ?? <LinkComponent />,\n    ref,\n    props: mergeProps<\"a\">(defaultProps, props, { className }),\n  });\n\n  return element;\n});\n\nLinkBase.displayName = \"Link\";\n\n// Compound component with ExternalIcon subcomponent\nexport const Link = Object.assign(LinkBase, {\n  ExternalIcon,\n});\n"],"names":["ExternalIcon","props","jsxs","jsx","KUMO_LINK_VARIANTS","KUMO_LINK_DEFAULT_VARIANTS","linkVariants","variant","cn","LinkBase","forwardRef","className","render","ref","LinkComponent","useLinkComponent","defaultProps","useRender","mergeProps","Link"],"mappings":";;;;;;AAmBA,MAAMA,IAAe,CAACC,MACpB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IACZ,WAAU;AAAA,IACT,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,GAAE,kWAAA,CAAkW;AAAA,MAC1W,gBAAAA,EAAC,QAAA,EAAK,GAAE,8BAAA,CAA8B;AAAA,IAAA;AAAA,EAAA;AACxC;AAGFH,EAAa,cAAc;AAGpB,MAAMI,IAAqB;AAAA,EAChC,SAAS;AAAA,IACP,QAAQ;AAAA,MACN;AAAA;AAAA,QAEE;AAAA;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SACE;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL;AAAA;AAAA,QAEE;AAAA;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA6B;AAAA,EACxC,SAAS;AACX;AAeO,SAASC,EAAa;AAAA,EAC3B,SAAAC,IAAUF,EAA2B;AACvC,IAA2B,IAAI;AAC7B,SAAOG,EAAGJ,EAAmB,QAAQG,CAAO,EAAE,OAAO;AACvD;AA4CA,MAAME,IAAWC,EAAyC,SACxD,EAAE,WAAAC,GAAW,SAAAJ,IAAU,UAAU,QAAAK,GAAQ,GAAGX,EAAA,GAC5CY,GACA;AACA,QAAMC,IAAgBC,EAAA,GAEhBC,IAA4C;AAAA,IAChD,WAAWR;AAAA,MACTF,EAAa,EAAE,SAAAC,GAAS;AAAA,MACxB;AAAA,IAAA;AAAA,EACF;AASF,SANgBU,EAAU;AAAA,IACxB,QAAQL,KAAU,gBAAAT,EAACW,GAAA,CAAA,CAAc;AAAA,IACjC,KAAAD;AAAA,IACA,OAAOK,EAAgBF,GAAcf,GAAO,EAAE,WAAAU,GAAW;AAAA,EAAA,CAC1D;AAGH,CAAC;AAEDF,EAAS,cAAc;AAGhB,MAAMU,IAAO,OAAO,OAAOV,GAAU;AAAA,EAC1C,cAAAT;AACF,CAAC;"}

package/dist/chunks/menubar-e5e4zwfagr0wx023.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx as c } from "react/jsx-runtime";
+import { T as p } from "./tooltip-hikjvdbg3xghnq1x.js";
+import { c as g } from "./cn-ct4n7r74mh8y0f48.js";
+import { IconContext as w } from "@phosphor-icons/react";
+import { useRef as h, useEffect as y } from "react";
+const E = ({
+  menuRef: e,
+  direction: o = "horizontal"
+}) => {
+  const t = h(null);
+  y(() => {
+    if (!e.current) return;
+    const n = Array.from(
+      e.current.querySelectorAll(
+        'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+      )
+    );
+    if (n.length === 0) return;
+    const r = (u) => {
+      if (!t.current) return;
+      const l = n.indexOf(t.current);
+      let a = l;
+      const m = o === "horizontal", x = m ? "ArrowRight" : "ArrowDown", b = m ? "ArrowLeft" : "ArrowUp";
+      if (u.key === x)
+        u.preventDefault(), a = (l + 1) % n.length;
+      else if (u.key === b)
+        u.preventDefault(), a = (l - 1 + n.length) % n.length;
+      else
+        return;
+      const v = n[a];
+      t.current = v, v.focus();
+    }, s = () => document.addEventListener("keydown", r), i = () => document.removeEventListener("keydown", r), d = () => {
+      t.current = document.activeElement, s();
+    }, f = () => {
+      t.current = null, i();
+    };
+    return e.current.addEventListener("focusin", d), e.current.addEventListener("focusout", f), () => {
+      e.current?.removeEventListener("focusin", d), e.current?.removeEventListener("focusout", f), i();
+    };
+  }, [e, o]);
+}, k = ({
+  icon: e,
+  id: o,
+  isActive: t,
+  onClick: n,
+  tooltip: r
+}) => {
+  const s = /* @__PURE__ */ c(
+    "button",
+    {
+      "aria-label": r,
+      className: g(
+        "focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-kumo-elevated first:rounded-l-lg last:rounded-r-lg transition-colors focus:z-1 focus:outline-none focus-visible:z-1 focus-visible:inset-ring-[0.5]",
+        {
+          "z-2 bg-kumo-base shadow-xs transition-colors ring ring-kumo-line/40": t === o
+        }
+      ),
+      onClick: n,
+      children: /* @__PURE__ */ c(w.Provider, { value: { size: 18 }, children: e })
+    }
+  );
+  return /* @__PURE__ */ c(p, { content: r, render: s });
+}, I = ({
+  className: e,
+  isActive: o,
+  options: t,
+  optionIds: n = !1
+  // if option needs an extra unique ID
+}) => {
+  const r = h(null);
+  return E({ menuRef: r, direction: "horizontal" }), /* @__PURE__ */ c(
+    "nav",
+    {
+      className: g(
+        "isolate flex rounded-lg ring ring-kumo-line bg-kumo-recessed pl-px shadow-xs transition-colors",
+        e
+      ),
+      ref: r,
+      children: t.map((s, i) => /* @__PURE__ */ c(
+        k,
+        {
+          ...s,
+          isActive: o,
+          id: n ? s.id : i
+        },
+        i
+      ))
+    }
+  );
+};
+export {
+  I as M,
+  E as u
+};
+//# sourceMappingURL=menubar-e5e4zwfagr0wx023.js.map