@cloudflare/kumo 1.0.0

package/dist/index.js

@@ -0,0 +1,125 @@
+"use client";
+import { B as r } from "./badge-Dc99vsfo.js";
+import { B as e, a as t } from "./banner-4fkH6Sbt.js";
+import { B as i, L as m, R as A, b as n } from "./button-E2-hZMZE.js";
+import { D as f } from "./date-range-picker-CbKEQ9pi.js";
+import { C as _ } from "./checkbox-BexIU_lZ.js";
+import { C as L } from "./clipboard-text-BFHWMjmr.js";
+import { C as R, a as S } from "./code-T2wPDiM0.js";
+import { C as D } from "./combobox-Dld0kS0U.js";
+import { D as M, e as U, d as N, a as E, c as O, b as d } from "./dialog-B1TaN0oR.js";
+import { D as C } from "./dropdown-D0rhYKeG.js";
+import { C as P } from "./collapsible-OBNkTO48.js";
+import { F as B, a as c, K as F, f as k } from "./field-V3J0Ql_V.js";
+import { b as v, K as h, L as y, a as w, l as j } from "./label-87HQArUG.js";
+import { I as z, i as H } from "./input-Dqvc2AB_.js";
+import { I as Q } from "./input-area-B9qajxvZ.js";
+import { I as X } from "./input-group-Bl6tgD5-.js";
+import { L as Z } from "./layer-card-C8j5Hkkj.js";
+import { L as aa } from "./loader-DHGMYlC6.js";
+import { S as ra } from "./skeleton-line-CtpS1u1J.js";
+import { M as ea, u as ta } from "./menubar-DLwLRFB1.js";
+import { M as ia } from "./meter-DKUuvXxS.js";
+import { P as Aa } from "./pagination-C4HQqodz.js";
+import { S as Ta } from "./select-B5Vb3zou.js";
+import { S as xa } from "./surface-BIC6CXiz.js";
+import { S as Ia } from "./switch-D4duMhJ0.js";
+import { T as la } from "./tabs-lQup-IbT.js";
+import { T as Sa } from "./table-KuvHGpL8.js";
+import { T as Da } from "./text-BEhqwMfe.js";
+import { T as Ma } from "./toast-8YyyQuqZ.js";
+import { T as Na, a as Ea } from "./tooltip-DJWsDTWJ.js";
+import { a as da, K as ua, P as Ca } from "./popover-DhdIqrP7.js";
+import { a as Pa, K as ga, S as Ba } from "./sensitive-input-D5HCV04N.js";
+import { b as Fa, K as ka, R as Ga, a as va } from "./radio-BVAG7hNp.js";
+import { C as ya, a as wa, K as ja } from "./command-palette-BgQ680BG.js";
+import { a as za, K as Ha, L as Ja, l as Qa } from "./link-6TIZ4JIw.js";
+import { B as Xa } from "./breadcrumbs-B5SY2CWj.js";
+import { E as Za } from "./empty-DzCqjea-.js";
+import { G as ao, a as oo, c as ro, K as so, b as eo, g as to } from "./grid-DKajRHh8.js";
+import { c as io, s as mo } from "./cn-Bhsu1vx2.js";
+import { L as no, u as To } from "./link-provider-DPBGo-0n.js";
+import { i as xo } from "./vendor-base-ui-DWIDNgE1.js";
+export {
+  r as Badge,
+  e as Banner,
+  t as BannerVariant,
+  Xa as Breadcrumbs,
+  i as Button,
+  _ as Checkbox,
+  L as ClipboardText,
+  R as Code,
+  S as CodeBlock,
+  P as Collapsible,
+  D as Combobox,
+  ya as CommandPalette,
+  f as DateRangePicker,
+  M as Dialog,
+  U as DialogClose,
+  N as DialogDescription,
+  E as DialogRoot,
+  O as DialogTitle,
+  d as DialogTrigger,
+  C as DropdownMenu,
+  Za as Empty,
+  B as Field,
+  ao as Grid,
+  oo as GridItem,
+  z as Input,
+  Q as InputArea,
+  X as InputGroup,
+  wa as KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS,
+  ja as KUMO_COMMAND_PALETTE_VARIANTS,
+  c as KUMO_FIELD_DEFAULT_VARIANTS,
+  F as KUMO_FIELD_VARIANTS,
+  ro as KUMO_GRID_DEFAULT_VARIANTS,
+  so as KUMO_GRID_VARIANTS,
+  v as KUMO_LABEL_DEFAULT_VARIANTS,
+  h as KUMO_LABEL_VARIANTS,
+  za as KUMO_LINK_DEFAULT_VARIANTS,
+  Ha as KUMO_LINK_VARIANTS,
+  da as KUMO_POPOVER_DEFAULT_VARIANTS,
+  ua as KUMO_POPOVER_VARIANTS,
+  Fa as KUMO_RADIO_DEFAULT_VARIANTS,
+  ka as KUMO_RADIO_VARIANTS,
+  Pa as KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS,
+  ga as KUMO_SENSITIVE_INPUT_VARIANTS,
+  y as Label,
+  Z as LayerCard,
+  Ja as Link,
+  m as LinkButton,
+  no as LinkProvider,
+  aa as Loader,
+  ea as MenuBar,
+  ia as Meter,
+  Aa as Pagination,
+  Ca as Popover,
+  Ga as Radio,
+  va as RadioGroup,
+  A as RefreshButton,
+  Ta as Select,
+  Ba as SensitiveInput,
+  ra as SkeletonLine,
+  xa as Surface,
+  Ia as Switch,
+  Sa as Table,
+  la as Tabs,
+  Da as Text,
+  xo as Toast,
+  Ma as Toasty,
+  Na as Tooltip,
+  Ea as TooltipProvider,
+  n as buttonVariants,
+  io as cn,
+  k as fieldVariants,
+  eo as gridItemVariants,
+  to as gridVariants,
+  H as inputVariants,
+  w as labelContentVariants,
+  j as labelVariants,
+  Qa as linkVariants,
+  mo as safeRandomId,
+  To as useLinkComponent,
+  ta as useMenuNavigation
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/input-Dqvc2AB_.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { c as p } from "./cn-Bhsu1vx2.js";
+import { forwardRef as I } from "react";
+import { F as k } from "./field-V3J0Ql_V.js";
+import { I as v } from "./vendor-base-ui-DWIDNgE1.js";
+const u = {
+  size: {
+    xs: {
+      classes: "h-5 gap-1 rounded-sm px-1.5 text-xs",
+      description: "Extra small input for compact UIs"
+    },
+    sm: {
+      classes: "h-6.5 gap-1 rounded-md px-2 text-xs",
+      description: "Small input for secondary fields"
+    },
+    base: {
+      classes: "h-9 gap-1.5 rounded-lg px-3 text-base",
+      description: "Default input size"
+    },
+    lg: {
+      classes: "h-10 gap-2 rounded-lg px-4 text-base",
+      description: "Large input for prominent fields"
+    }
+  },
+  variant: {
+    default: {
+      classes: "focus:ring-kumo-ring",
+      description: "Default input appearance"
+    },
+    error: {
+      classes: "!ring-kumo-danger focus:ring-kumo-danger",
+      description: "Error state for validation failures"
+    }
+  }
+}, c = {
+  size: "base",
+  variant: "default"
+};
+function N({
+  variant: s = c.variant,
+  size: r = c.size,
+  parentFocusIndicator: o = !1,
+  focusIndicator: t = !1
+} = {}) {
+  return p(
+    // Base styles
+    "border-0 bg-kumo-control text-kumo-default ring ring-kumo-line",
+    // Disabled state and placeholder styles
+    "outline-none placeholder:text-kumo-subtle disabled:text-kumo-subtle",
+    // Apply size styles from KUMO_INPUT_VARIANTS
+    u.size[r].classes,
+    // Apply variant styles from KUMO_INPUT_VARIANTS
+    u.variant[s].classes,
+    // Focus state handling
+    o && "[&:has(:focus-within)]:ring-kumo-ring",
+    t && "focus:ring-kumo-ring"
+  );
+}
+const A = I((s, r) => {
+  const {
+    className: o,
+    size: t = "base",
+    variant: d = "default",
+    label: i,
+    labelTooltip: m,
+    description: f,
+    error: a,
+    ...e
+  } = s, { required: b } = e;
+  if (process.env.NODE_ENV !== "production") {
+    const g = !!i, h = !!(e.placeholder && e["aria-label"]), x = !!e["aria-labelledby"];
+    !g && !h && !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-labelledby for custom label association`
+    );
+  }
+  const n = /* @__PURE__ */ l(
+    v,
+    {
+      ref: r,
+      className: p(
+        N({ size: t, variant: d, focusIndicator: !0 }),
+        o
+      ),
+      ...e
+    }
+  );
+  return i ? /* @__PURE__ */ l(
+    k,
+    {
+      label: i,
+      required: b,
+      labelTooltip: m,
+      description: f,
+      error: a ? typeof a == "string" ? { message: a, match: !0 } : a : void 0,
+      children: n
+    }
+  ) : n;
+});
+A.displayName = "Input";
+export {
+  A as I,
+  u as K,
+  N as i
+};
+//# sourceMappingURL=input-Dqvc2AB_.js.map

package/dist/input-Dqvc2AB_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-Dqvc2AB_.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\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-ring\",\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  size?: KumoInputSize;\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-line\",\n    // Disabled state and placeholder styles\n    \"outline-none placeholder:text-kumo-subtle 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 && \"[&:has(:focus-within)]:ring-kumo-ring\",\n    focusIndicator && \"focus:ring-kumo-ring\",\n  );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n  const {\n    className,\n    size = \"base\",\n    variant = \"default\",\n    label,\n    labelTooltip,\n    description,\n    error,\n    ...inputProps\n  } = props;\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 hasPlaceholderAndAriaLabel = Boolean(\n      inputProps.placeholder && inputProps[\"aria-label\"],\n    );\n    const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n    if (!hasLabel && !hasPlaceholderAndAriaLabel && !hasAriaLabelledBy) {\n      console.warn(\n        \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n          \"  - label prop: <Input label='Email' />\\n\" +\n          \"  - placeholder + aria-label: <Input placeholder='Email' 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 *   variant=\"error\"\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","label","labelTooltip","description","error","inputProps","required","hasLabel","hasPlaceholderAndAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;AASO,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;AA0CO,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,SAAAD,IAAU;AAAA,IACV,OAAAU;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDP,GAGE,EAAE,UAAAQ,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,IAA6B,GACjCH,EAAW,eAAeA,EAAW,YAAY,IAE7CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAA8B,CAACC,KAC/C,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,WAAWJ;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDS;AAAA,MAAA;AAAA,MAED,GAAGK;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;AAEDd,EAAM,cAAc;"}

package/dist/input-area-B9qajxvZ.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { i as C } from "./input-Dqvc2AB_.js";
+import { c as b } from "./cn-Bhsu1vx2.js";
+import * as x from "react";
+import { useCallback as I } from "react";
+import { F as y } from "./field-V3J0Ql_V.js";
+const N = x.forwardRef(
+  (c, l) => {
+    const {
+      className: m,
+      onValueChange: r,
+      size: p = "base",
+      variant: u = "default",
+      onChange: e,
+      label: t,
+      labelTooltip: f,
+      description: d,
+      error: a,
+      ...o
+    } = c, { required: h } = o, g = I(
+      (n) => {
+        e?.(n), r?.(n.target.value);
+      },
+      [e, r]
+    ), s = /* @__PURE__ */ i(
+      "textarea",
+      {
+        ref: l,
+        className: b(
+          C({ size: p, variant: u, focusIndicator: !0 }),
+          "h-auto py-2",
+          // Input variant always come with size, but it does not apply for textarea
+          m
+        ),
+        onChange: g,
+        ...o
+      }
+    );
+    return t ? /* @__PURE__ */ i(
+      y,
+      {
+        label: t,
+        required: h,
+        labelTooltip: f,
+        description: d,
+        error: a ? typeof a == "string" ? { message: a, match: !0 } : a : void 0,
+        children: s
+      }
+    ) : s;
+  }
+);
+N.displayName = "InputArea";
+export {
+  N as I
+};
+//# sourceMappingURL=input-area-B9qajxvZ.js.map

package/dist/input-area-B9qajxvZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-area-B9qajxvZ.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 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 = \"default\",\n      onChange,\n      label,\n      labelTooltip,\n      description,\n      error,\n      ...inputProps\n    } = props;\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 textarea = (\n      <textarea\n        ref={ref}\n        className={cn(\n          inputVariants({ size, variant, focusIndicator: true }),\n          \"h-auto py-2\", // Input variant always come with size, but it does not apply for textarea\n          className,\n        )}\n        onChange={handleChange}\n        {...inputProps}\n      />\n    );\n\n    // Render with Field wrapper if label is provided\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          {textarea}\n        </KumoField>\n      );\n    }\n\n    // Render bare textarea without Field wrapper\n    return textarea;\n  },\n);\n\nInputArea.displayName = \"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","variant","onChange","label","labelTooltip","description","error","inputProps","required","handleChange","useCallback","event","textarea","jsx","cn","inputVariants","KumoField"],"mappings":";;;;;;;AAMO,MAAMA,IAAYC,EAAM;AAAA,EAC7B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,eAAAC;AAAA,MACA,MAAAC,IAAO;AAAA,MACP,SAAAC,IAAU;AAAA,MACV,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX,GAGE,EAAE,UAAAY,MAAaD,GACfE,IAAeC;AAAA,MACnB,CAACC,MAAkD;AACjD,QAAAT,IAAWS,CAAK,GAChBZ,IAAgBY,EAAM,OAAO,KAAK;AAAA,MACpC;AAAA,MACA,CAACT,GAAUH,CAAa;AAAA,IAAA,GAGpBa,IACJ,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAhB;AAAA,QACA,WAAWiB;AAAA,UACTC,EAAc,EAAE,MAAAf,GAAM,SAAAC,GAAS,gBAAgB,IAAM;AAAA,UACrD;AAAA;AAAA,UACAH;AAAA,QAAA;AAAA,QAEF,UAAUW;AAAA,QACT,GAAGF;AAAA,MAAA;AAAA,IAAA;AAKR,WAAIJ,IAEA,gBAAAU;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,OAAAb;AAAA,QACA,UAAAK;AAAA,QACA,cAAAJ;AAAA,QACA,aAAAC;AAAA,QACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,QAGL,UAAAM;AAAA,MAAA;AAAA,IAAA,IAMAA;AAAA,EACT;AACF;AAEAlB,EAAU,cAAc;"}

package/dist/input-group-Bl6tgD5-.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import * as d from "react";
+import { useContext as c } from "react";
+import { c as s } from "./cn-Bhsu1vx2.js";
+import { i as m, I as p } from "./input-Dqvc2AB_.js";
+import { B as x } from "./button-E2-hZMZE.js";
+const I = {
+  focusMode: "container"
+}, r = d.createContext(
+  null
+);
+function v({
+  size: n,
+  children: i,
+  className: t,
+  focusMode: e = I.focusMode
+}) {
+  const u = d.useId(), l = d.useId(), f = d.useMemo(
+    () => ({ size: n, inputId: u, descriptionId: l, focusMode: e }),
+    [n, u, l, e]
+  ), a = e === "individual";
+  return /* @__PURE__ */ o(r.Provider, { value: f, children: /* @__PURE__ */ o(
+    "div",
+    {
+      className: s(
+        m({ size: n, parentFocusIndicator: !a }),
+        "flex w-full gap-0 border-0 px-0",
+        a ? "overflow-visible" : "overflow-hidden shadow-xs ring ring-kumo-line focus-within:ring-kumo-ring",
+        t
+      ),
+      children: i
+    }
+  ) });
+}
+function h({ children: n }) {
+  const i = c(r), t = i?.focusMode === "individual";
+  return /* @__PURE__ */ o(
+    "label",
+    {
+      htmlFor: i?.inputId,
+      className: s(
+        "flex h-full items-center p-0 px-2 text-kumo-subtle",
+        t && "first:rounded-l-[inherit] last:rounded-r-[inherit]"
+      ),
+      children: n
+    }
+  );
+}
+function b(n) {
+  const i = c(r), t = i?.focusMode === "individual";
+  return /* @__PURE__ */ o(
+    p,
+    {
+      id: i?.inputId,
+      "aria-describedby": i?.descriptionId,
+      size: i?.size,
+      ...n,
+      className: s(
+        "flex h-full items-center rounded-none border-0 bg-kumo-base font-sans",
+        "grow px-2",
+        t ? "relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-10 focus:outline" : "focus:border-kumo-fill",
+        n.className
+      )
+    }
+  );
+}
+function g({ children: n }) {
+  const i = c(r), t = i?.focusMode === "individual";
+  return /* @__PURE__ */ o(
+    "span",
+    {
+      id: i?.descriptionId,
+      className: s(
+        "flex h-full items-center p-0 px-2 text-kumo-subtle",
+        t && "first:rounded-l-[inherit] last:rounded-r-[inherit]"
+      ),
+      children: n
+    }
+  );
+}
+function k({
+  children: n,
+  className: i,
+  ...t
+}) {
+  const e = c(r), u = e?.focusMode === "individual";
+  return /* @__PURE__ */ o(
+    x,
+    {
+      ...t,
+      size: e?.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-10 focus:outline",
+        i
+      ),
+      children: n
+    }
+  );
+}
+const R = Object.assign(v, {
+  Label: h,
+  Input: b,
+  Button: k,
+  Description: g
+});
+export {
+  R as I
+};
+//# sourceMappingURL=input-group-Bl6tgD5-.js.map

package/dist/input-group-Bl6tgD5-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group-Bl6tgD5-.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            ? \"overflow-visible\"\n            : \"overflow-hidden shadow-xs ring ring-kumo-line focus-within:ring-kumo-ring\",\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-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-10 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-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-10 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,qBACA;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,6GACA;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/label-87HQArUG.js

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

package/dist/label-87HQArUG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label-87HQArUG.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 { Tooltip } from \"../tooltip\";\n\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    \"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\nexport interface LabelProps extends KumoLabelVariantsProps {\n  /** The label content - can be a string or any React node */\n  children: ReactNode;\n  /** When true (and required is false), shows gray \"(optional)\" text after the label */\n  showOptional?: boolean;\n  /** Tooltip content to display next to the label via an info icon */\n  tooltip?: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n  /**\n   * When true, only renders the inline content (indicators, tooltip) without\n   * the outer span 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  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}>\n          <Info\n            className=\"size-4 cursor-help text-kumo-strong\"\n            aria-label=\"More information\"\n          />\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, apply full label styling\n  return (\n    <span className={cn(labelVariants(), labelContentVariants(), className)}>\n      {content}\n    </span>\n  );\n}\n\nLabel.displayName = \"Label\";\n"],"names":["KUMO_LABEL_VARIANTS","KUMO_LABEL_DEFAULT_VARIANTS","labelVariants","_props","cn","labelContentVariants","Label","children","showOptional","tooltip","className","asContent","content","jsxs","Fragment","jsx","Tooltip","Info"],"mappings":";;;;;AAKO,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;AA6CO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAe;AACb,QAAMC,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAP;AAAA,IACAC,KACC,gBAAAO,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,cAAU;AAAA,IAE1DN,KACC,gBAAAM,EAACC,GAAA,EAAQ,SAASP,GAChB,UAAA,gBAAAM;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,cAAW;AAAA,MAAA;AAAA,IAAA,EACb,CACF;AAAA,EAAA,GAEJ;AAIF,SAAIN,IAEA,gBAAAI,EAAC,UAAK,WAAWX,EAAGC,KAAwBK,CAAS,GAAI,UAAAE,GAAQ,IAMnE,gBAAAG,EAAC,QAAA,EAAK,WAAWX,EAAGF,KAAiBG,EAAA,GAAwBK,CAAS,GACnE,UAAAE,EAAA,CACH;AAEJ;AAEAN,EAAM,cAAc;"}

package/dist/layer-card-C8j5Hkkj.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { c as n } from "./cn-Bhsu1vx2.js";
+function o(e = {}) {
+  return n(
+    // Base styles
+    "flex w-full flex-col overflow-hidden rounded-lg bg-kumo-elevated text-base ring ring-kumo-line"
+  );
+}
+function t({ children: e, className: r }) {
+  return /* @__PURE__ */ a("div", { className: n(o(), r), children: e });
+}
+function i({ children: e, className: r }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: n(
+        "flex items-center gap-2 p-2 text-base font-medium text-kumo-strong",
+        r
+      ),
+      children: e
+    }
+  );
+}
+function l({ children: e, className: r }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: n(
+        "flex flex-col gap-2 overflow-hidden rounded-lg bg-kumo-base p-4 pr-3 text-inherit no-underline ring ring-kumo-fill",
+        r
+      ),
+      children: e
+    }
+  );
+}
+const u = Object.assign(t, {
+  Primary: l,
+  Secondary: i
+});
+export {
+  u as L
+};
+//# sourceMappingURL=layer-card-C8j5Hkkj.js.map

package/dist/layer-card-C8j5Hkkj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer-card-C8j5Hkkj.js","sources":["../src/components/layer-card/layer-card.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\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(\n    // Base styles\n    \"flex w-full flex-col overflow-hidden rounded-lg bg-kumo-elevated text-base ring ring-kumo-line\",\n  );\n}\n\nexport type LayerCardProps = PropsWithChildren<\n  KumoLayerCardVariantsProps & { className?: string }\n>;\n\nfunction LayerCardRoot({ children, className }: LayerCardProps) {\n  return <div className={cn(layerCardVariants(), className)}>{children}</div>;\n}\n\nfunction LayerCardSecondary({ children, className }: LayerCardProps) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 p-2 text-base font-medium text-kumo-strong\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction LayerCardPrimary({ children, className }: LayerCardProps) {\n  return (\n    <div\n      className={cn(\n        \"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        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\ntype LayerCardComponent = FC<LayerCardProps> & {\n  Primary: FC<LayerCardProps>;\n  Secondary: FC<LayerCardProps>;\n};\n\nconst LayerCard = Object.assign(LayerCardRoot, {\n  Primary: LayerCardPrimary,\n  Secondary: LayerCardSecondary,\n}) as LayerCardComponent;\n\nexport { LayerCard };\n"],"names":["layerCardVariants","_props","cn","LayerCardRoot","children","className","jsx","LayerCardSecondary","LayerCardPrimary","LayerCard"],"mappings":";;;AAYO,SAASA,EAAkBC,IAAqC,IAAI;AACzE,SAAOC;AAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAMA,SAASC,EAAc,EAAE,UAAAC,GAAU,WAAAC,KAA6B;AAC9D,SAAO,gBAAAC,EAAC,SAAI,WAAWJ,EAAGF,KAAqBK,CAAS,GAAI,UAAAD,GAAS;AACvE;AAEA,SAASG,EAAmB,EAAE,UAAAH,GAAU,WAAAC,KAA6B;AACnE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,QACT;AAAA,QACAG;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAASI,EAAiB,EAAE,UAAAJ,GAAU,WAAAC,KAA6B;AACjE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,QACT;AAAA,QACAG;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAOA,MAAMK,IAAY,OAAO,OAAON,GAAe;AAAA,EAC7C,SAASK;AAAA,EACT,WAAWD;AACb,CAAC;"}

package/dist/link-6TIZ4JIw.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { c as t } from "./cn-Bhsu1vx2.js";
+import { u as f } from "./link-provider-DPBGo-0n.js";
+import { bi as k, bj as L } from "./vendor-base-ui-DWIDNgE1.js";
+const i = (n) => /* @__PURE__ */ d(
+  "svg",
+  {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    className: "link-external-icon",
+    ...n,
+    children: [
+      /* @__PURE__ */ e("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" }),
+      /* @__PURE__ */ e("path", { d: "M14 4H20M20 4V10M20 4L11 13" })
+    ]
+  }
+);
+i.displayName = "Link.ExternalIcon";
+const x = {
+  variant: {
+    inline: {
+      classes: "text-primary underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors",
+      description: "Inline text link that flows with content"
+    },
+    current: {
+      classes: "text-current underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors",
+      description: "Link that inherits color from parent text"
+    },
+    plain: {
+      classes: "text-primary hover:text-primary/70 transition-colors",
+      description: "Link without underline decoration"
+    }
+  }
+}, h = {
+  variant: "inline"
+};
+function C({
+  variant: n = h.variant
+} = {}) {
+  return t(x.variant[n].classes);
+}
+const r = u(function({ className: o, variant: s = "inline", render: a, ...l }, c) {
+  const m = f(), p = {
+    className: t(
+      C({ variant: s }),
+      "group/link inline-flex items-center gap-[0.1875em]"
+    )
+  };
+  return k({
+    render: a ?? /* @__PURE__ */ e(m, {}),
+    ref: c,
+    props: L(p, l, { className: o })
+  });
+});
+r.displayName = "Link";
+const V = Object.assign(r, {
+  ExternalIcon: i
+});
+export {
+  x as K,
+  V as L,
+  h as a,
+  C as l
+};
+//# sourceMappingURL=link-6TIZ4JIw.js.map

package/dist/link-6TIZ4JIw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-6TIZ4JIw.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\nexport const KUMO_LINK_VARIANTS = {\n  variant: {\n    inline: {\n      classes:\n        \"text-primary 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: \"text-primary hover:text-primary/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  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\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;AAEpB,MAAMI,IAAqB;AAAA,EAChC,SAAS;AAAA,IACP,QAAQ;AAAA,MACN,SACE;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SACE;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA6B;AAAA,EACxC,SAAS;AACX;AAQO,SAASC,EAAa;AAAA,EAC3B,SAAAC,IAAUF,EAA2B;AACvC,IAA2B,IAAI;AAC7B,SAAOG,EAAGJ,EAAmB,QAAQG,CAAO,EAAE,OAAO;AACvD;AAgCA,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;"}