@nationaldesignstudio/react 0.3.0 → 0.5.1

package/dist/components/atoms/button/icon-button.js

@@ -0,0 +1,69 @@
+import { tv as a } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+import { useRender as d } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/use-render/useRender.js";
+const g = a({
+  base: "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  variants: {
+    variant: {
+      // Primary - filled brand button
+      primary: "bg-button-primary-bg text-button-primary-text hover:bg-button-primary-bg-hover hover:text-button-primary-text-hover border-transparent focus-visible:ring-button-primary-bg",
+      // Primary Outline - outlined brand button
+      "primary-outline": "bg-button-primary-outline-bg text-button-primary-outline-text border border-button-primary-outline-border hover:bg-button-primary-outline-bg-hover hover:text-button-primary-outline-text-hover hover:border-button-primary-outline-border-hover focus-visible:ring-button-primary-outline-border",
+      // Secondary - filled neutral button (for dark backgrounds)
+      secondary: "bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg-hover hover:text-button-secondary-text-hover border-transparent focus-visible:ring-button-secondary-bg focus-visible:ring-offset-gray-1000",
+      // Secondary Outline - outlined neutral button (for dark backgrounds)
+      "secondary-outline": "bg-button-secondary-outline-bg text-button-secondary-outline-text border border-button-secondary-outline-border hover:bg-button-secondary-outline-bg-hover hover:text-button-secondary-outline-text-hover hover:border-button-secondary-outline-border-hover focus-visible:ring-button-secondary-outline-border focus-visible:ring-offset-gray-1000",
+      // Ghost - transparent button (for light backgrounds)
+      ghost: "bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg-hover hover:text-button-ghost-text-hover border-transparent focus-visible:ring-gray-1000",
+      // Ghost Inverse - transparent button (for dark backgrounds)
+      "ghost-inverse": "bg-button-ghost-inverse-bg text-button-ghost-inverse-text hover:bg-button-ghost-inverse-bg-hover hover:text-button-ghost-inverse-text-hover border-transparent focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000"
+    },
+    size: {
+      sm: "size-28 rounded-surface-button-small",
+      md: "size-40 rounded-surface-button-medium",
+      lg: "size-56 rounded-surface-button-large"
+    },
+    rounded: {
+      default: "",
+      full: "rounded-full"
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+    rounded: "default"
+  }
+});
+function c(o) {
+  const {
+    className: n,
+    variant: t = "primary",
+    size: e = "md",
+    rounded: r = "default",
+    render: i,
+    ...s
+  } = o, b = {
+    variant: t,
+    size: e,
+    rounded: r
+  }, u = g({
+    variant: t,
+    size: e,
+    rounded: r,
+    class: n
+  });
+  return d({
+    render: i,
+    state: b,
+    props: {
+      type: "button",
+      className: u,
+      ...s
+    },
+    defaultTagName: "button"
+  });
+}
+export {
+  c as IconButton,
+  g as iconButtonVariants
+};
+//# sourceMappingURL=icon-button.js.map

package/dist/components/atoms/button/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","sources":["../../../../src/components/atoms/button/icon-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\n/**\n * IconButton component based on Figma Button component (icon-only variant)\n *\n * **IMPORTANT: Accessibility Requirement**\n * Icon-only buttons MUST have an accessible label. Provide one of:\n * - `aria-label`: A text description of the button's action (recommended)\n * - `aria-labelledby`: Reference to an element containing the label\n * - `title`: Tooltip text (less preferred, but provides a label)\n *\n * @example\n * ```tsx\n * // Correct usage with aria-label\n * <IconButton aria-label=\"Close menu\">\n *   <CloseIcon />\n * </IconButton>\n * ```\n *\n * Variants (matches Figma):\n * - primary: Filled brand button (indigo background)\n * - primary-outline: Outlined brand button (indigo border/text)\n * - secondary: Filled neutral button (white background, for dark backgrounds)\n * - secondary-outline: Outlined neutral button (white border/text, for dark backgrounds)\n * - ghost: Transparent button with subtle hover (for light backgrounds)\n * - ghost-inverse: Transparent button with subtle hover (for dark backgrounds)\n *\n * Sizes:\n * - sm: Small (28x28)\n * - md: Medium (40x40) - default\n * - lg: Large (56x56)\n *\n * Rounded:\n * - default: Standard border radius (matches size)\n * - full: Fully circular\n */\nconst iconButtonVariants = tv({\n\tbase: \"inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n\tvariants: {\n\t\tvariant: {\n\t\t\t// Primary - filled brand button\n\t\t\tprimary:\n\t\t\t\t\"bg-button-primary-bg text-button-primary-text hover:bg-button-primary-bg-hover hover:text-button-primary-text-hover border-transparent focus-visible:ring-button-primary-bg\",\n\t\t\t// Primary Outline - outlined brand button\n\t\t\t\"primary-outline\":\n\t\t\t\t\"bg-button-primary-outline-bg text-button-primary-outline-text border border-button-primary-outline-border hover:bg-button-primary-outline-bg-hover hover:text-button-primary-outline-text-hover hover:border-button-primary-outline-border-hover focus-visible:ring-button-primary-outline-border\",\n\t\t\t// Secondary - filled neutral button (for dark backgrounds)\n\t\t\tsecondary:\n\t\t\t\t\"bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg-hover hover:text-button-secondary-text-hover border-transparent focus-visible:ring-button-secondary-bg focus-visible:ring-offset-gray-1000\",\n\t\t\t// Secondary Outline - outlined neutral button (for dark backgrounds)\n\t\t\t\"secondary-outline\":\n\t\t\t\t\"bg-button-secondary-outline-bg text-button-secondary-outline-text border border-button-secondary-outline-border hover:bg-button-secondary-outline-bg-hover hover:text-button-secondary-outline-text-hover hover:border-button-secondary-outline-border-hover focus-visible:ring-button-secondary-outline-border focus-visible:ring-offset-gray-1000\",\n\t\t\t// Ghost - transparent button (for light backgrounds)\n\t\t\tghost:\n\t\t\t\t\"bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg-hover hover:text-button-ghost-text-hover border-transparent focus-visible:ring-gray-1000\",\n\t\t\t// Ghost Inverse - transparent button (for dark backgrounds)\n\t\t\t\"ghost-inverse\":\n\t\t\t\t\"bg-button-ghost-inverse-bg text-button-ghost-inverse-text hover:bg-button-ghost-inverse-bg-hover hover:text-button-ghost-inverse-text-hover border-transparent focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"size-28 rounded-surface-button-small\",\n\t\t\tmd: \"size-40 rounded-surface-button-medium\",\n\t\t\tlg: \"size-56 rounded-surface-button-large\",\n\t\t},\n\t\trounded: {\n\t\t\tdefault: \"\",\n\t\t\tfull: \"rounded-full\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"primary\",\n\t\tsize: \"md\",\n\t\trounded: \"default\",\n\t},\n});\n\ninterface IconButtonState extends Record<string, unknown> {\n\tvariant:\n\t\t| \"primary\"\n\t\t| \"primary-outline\"\n\t\t| \"secondary\"\n\t\t| \"secondary-outline\"\n\t\t| \"ghost\"\n\t\t| \"ghost-inverse\";\n\tsize: \"sm\" | \"md\" | \"lg\";\n\trounded: \"default\" | \"full\";\n}\n\nexport interface IconButtonProps\n\textends useRender.ComponentProps<\"button\", IconButtonState>,\n\t\tVariantProps<typeof iconButtonVariants> {}\n\nfunction IconButton(props: IconButtonProps) {\n\tconst {\n\t\tclassName,\n\t\tvariant = \"primary\",\n\t\tsize = \"md\",\n\t\trounded = \"default\",\n\t\trender,\n\t\t...otherProps\n\t} = props;\n\n\tconst state: IconButtonState = {\n\t\tvariant,\n\t\tsize,\n\t\trounded,\n\t};\n\n\tconst buttonClassName = iconButtonVariants({\n\t\tvariant,\n\t\tsize,\n\t\trounded,\n\t\tclass: className,\n\t});\n\n\treturn useRender<IconButtonState, HTMLButtonElement>({\n\t\trender,\n\t\tstate,\n\t\tprops: {\n\t\t\ttype: \"button\",\n\t\t\tclassName: buttonClassName,\n\t\t\t...otherProps,\n\t\t},\n\t\tdefaultTagName: \"button\",\n\t});\n}\n\nexport { IconButton, iconButtonVariants };\n"],"names":["iconButtonVariants","tv","IconButton","props","className","variant","size","rounded","render","otherProps","state","buttonClassName","useRender"],"mappings":";;AAuCA,MAAMA,IAAqBC,EAAG;AAAA,EAC7B,MAAM;AAAA,EACN,UAAU;AAAA,IACT,SAAS;AAAA;AAAA,MAER,SACC;AAAA;AAAA,MAED,mBACC;AAAA;AAAA,MAED,WACC;AAAA;AAAA,MAED,qBACC;AAAA;AAAA,MAED,OACC;AAAA;AAAA,MAED,iBACC;AAAA,IAAA;AAAA,IAEF,MAAM;AAAA,MACL,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,IAEL,SAAS;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACP;AAAA,EAED,iBAAiB;AAAA,IAChB,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEX,CAAC;AAkBD,SAASC,EAAWC,GAAwB;AAC3C,QAAM;AAAA,IACL,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACAN,GAEEO,IAAyB;AAAA,IAC9B,SAAAL;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,EAAA,GAGKI,IAAkBX,EAAmB;AAAA,IAC1C,SAAAK;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAOH;AAAA,EAAA,CACP;AAED,SAAOQ,EAA8C;AAAA,IACpD,QAAAJ;AAAA,IACA,OAAAE;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,MACN,WAAWC;AAAA,MACX,GAAGF;AAAA,IAAA;AAAA,IAEJ,gBAAgB;AAAA,EAAA,CAChB;AACF;"}

package/dist/components/atoms/input/input-group.js

@@ -0,0 +1,221 @@
+import { jsx as e } from "react/jsx-runtime";
+import { tv as r, cnBase as n } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+import { formControlBase as g } from "../../../lib/form-control.js";
+import { Button as c } from "../button/button.js";
+const m = r({
+  base: [
+    ...g,
+    // InputGroup-specific: Container layout and styling
+    "group/input-group relative flex w-full items-center justify-start",
+    "shadow-xs",
+    // Override focus state to work with child focus detection
+    "focus-visible:border-ui-color-border focus-visible:ring-0",
+    // Override hover to work with InputGroup structure
+    "hover:bg-ui-control-background",
+    // Height and layout (overridden by size variants)
+    "min-w-0",
+    "has-[>textarea]:h-auto",
+    "has-[>[data-align=inline-start]]:[&>input]:pl-6",
+    "has-[>[data-align=inline-end]]:[&>input]:pr-6",
+    "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pt-spatial-ui-input-group-gap-block has-[>[data-align=block-start]]:[&>input]:pb-spatial-ui-input-group-padding-y-medium",
+    "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pb-spatial-ui-input-group-gap-block",
+    // Focus state detection on child input (overrides formControlBase focus)
+    "has-[[data-slot=input-group-control]:focus-visible]:border-ui-accent-base has-[[data-slot=input-group-control]:focus-visible]:ring-4 has-[[data-slot=input-group-control]:focus-visible]:ring-ui-color-focus",
+    // Error state detection on child elements
+    "has-[[data-slot][aria-invalid=true]]:border-ui-error-color has-[[data-slot][aria-invalid=true]]:ring-ui-error-color/20",
+    // Disabled state (overrides formControlBase disabled)
+    "data-[disabled=true]:bg-ui-control-background-disabled data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed"
+  ],
+  variants: {
+    size: {
+      sm: "h-spatial-ui-input-group-height-small",
+      default: "h-spatial-ui-input-group-height-medium",
+      lg: "h-spatial-ui-input-group-height-large"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+}), f = r({
+  base: [
+    "flex items-center justify-center gap-6",
+    "typography-ui-text-sm text-text-muted",
+    "select-none cursor-text",
+    "[&>svg:not([class*='size-'])]:size-16",
+    "[&_button]:text-[unset] [&_button]:cursor-pointer",
+    "group-data-[disabled=true]/input-group:opacity-50"
+  ],
+  variants: {
+    align: {
+      "inline-start": [
+        "order-first h-full",
+        "pl-spatial-ui-input-group-padding-x-medium",
+        "has-[>button]:ml-[-6px]"
+      ],
+      "inline-end": [
+        "order-last h-full",
+        "pr-spatial-ui-input-group-padding-x-medium",
+        "has-[>button]:mr-[-6px]"
+      ],
+      "block-start": [
+        "order-first h-auto w-full justify-start",
+        "px-spatial-ui-input-group-padding-x-medium pt-spatial-ui-input-group-padding-y-medium",
+        "[.border-b]:pb-spatial-ui-input-group-padding-y-medium",
+        // Use shared text style for block addons (12px, Regular weight per Figma)
+        "typography-ui-text-xs"
+      ],
+      "block-end": [
+        "order-last h-auto w-full justify-start",
+        "px-spatial-ui-input-group-padding-x-medium pb-spatial-ui-input-group-padding-y-medium",
+        "[.border-t]:pt-spatial-ui-input-group-padding-y-medium",
+        // Use shared text style for block addons (12px, Regular weight per Figma)
+        "typography-ui-text-xs"
+      ]
+    }
+  },
+  defaultVariants: {
+    align: "inline-start"
+  }
+});
+function z({ className: i, size: t, disabled: s, ...u }) {
+  return /* @__PURE__ */ e(
+    "fieldset",
+    {
+      "data-slot": "input-group",
+      "data-disabled": s || void 0,
+      disabled: s,
+      className: n(
+        "p-0 m-0 min-w-0",
+        m({ size: t, class: i })
+      ),
+      ...u
+    }
+  );
+}
+function k({
+  className: i,
+  align: t = "inline-start",
+  onClick: s,
+  onKeyDown: u,
+  ...o
+}) {
+  const p = (a) => {
+    a.parentElement?.querySelector("input")?.focus();
+  }, l = (a) => {
+    if (a.target.closest("button")) {
+      s?.(a);
+      return;
+    }
+    p(a.currentTarget), s?.(a);
+  }, d = (a) => {
+    (a.key === "Enter" || a.key === " ") && !a.target.closest("button") && p(a.currentTarget), u?.(a);
+  };
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: Click-to-focus is a convenience UX pattern; primary interaction is via the input itself
+    /* @__PURE__ */ e(
+      "div",
+      {
+        "data-slot": "input-group-addon",
+        "data-align": t,
+        className: n(f({ align: t, class: i })),
+        onClick: l,
+        onKeyDown: d,
+        ...o
+      }
+    )
+  );
+}
+const b = r({
+  base: [
+    "typography-ui-button-small shadow-none flex gap-6 items-center",
+    "focus-visible:ring-1 focus-visible:ring-offset-0 focus-visible:ring-ui-color-border",
+    "transition-opacity duration-150"
+  ],
+  variants: {
+    size: {
+      xs: "!h-24 gap-4 px-8 rounded-surface-ui-small [&>svg:not([class*='size-'])]:size-16 has-[>svg]:px-6",
+      sm: "!h-28 px-10 gap-6 rounded-surface-ui-medium has-[>svg]:px-8",
+      "icon-xs": "!size-24 rounded-surface-ui-small p-0 [&>svg:not([class*='size-'])]:size-16 has-[>svg]:p-0",
+      "icon-sm": "!size-28 rounded-surface-ui-medium p-0 [&>svg:not([class*='size-'])]:size-16 has-[>svg]:p-0"
+    }
+  },
+  defaultVariants: {
+    size: "xs"
+  }
+});
+function w({
+  className: i,
+  type: t = "button",
+  variant: s = "ghost",
+  size: u = "xs",
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    c,
+    {
+      type: t,
+      "data-size": u,
+      variant: s,
+      className: n(b({ size: u, class: i })),
+      ...o
+    }
+  );
+}
+function G({ className: i, ...t }) {
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      className: n(
+        "flex items-center gap-6 typography-ui-text-sm text-text-muted",
+        "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-16",
+        i
+      ),
+      ...t
+    }
+  );
+}
+function I({ className: i, ...t }) {
+  return /* @__PURE__ */ e(
+    "input",
+    {
+      "data-slot": "input-group-control",
+      className: n(
+        "flex-1 min-w-0 h-full w-full",
+        "border-0 bg-transparent shadow-none outline-none",
+        "typography-ui-text-sm text-left placeholder:text-text-muted",
+        "px-spatial-ui-input-group-padding-x-medium",
+        "focus-visible:ring-0",
+        i
+      ),
+      ...t
+    }
+  );
+}
+function N({ className: i, ...t }) {
+  return /* @__PURE__ */ e(
+    "textarea",
+    {
+      "data-slot": "input-group-control",
+      className: n(
+        "flex-1 min-w-0 w-full resize-none",
+        "border-0 bg-transparent shadow-none outline-none",
+        "typography-ui-text-sm text-left placeholder:text-text-muted",
+        "px-spatial-ui-input-group-padding-x-medium py-spatial-ui-input-group-padding-y-medium",
+        "focus-visible:ring-0",
+        i
+      ),
+      ...t
+    }
+  );
+}
+export {
+  z as InputGroup,
+  k as InputGroupAddon,
+  w as InputGroupButton,
+  I as InputGroupInput,
+  G as InputGroupText,
+  N as InputGroupTextarea,
+  f as inputGroupAddonVariants,
+  m as inputGroupVariants
+};
+//# sourceMappingURL=input-group.js.map

package/dist/components/atoms/input/input-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.js","sources":["../../../../src/components/atoms/input/input-group.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { formControlBase } from \"@/lib/form-control\";\nimport { cn } from \"@/lib/utils\";\nimport { Button, type ButtonProps } from \"../button\";\n\n// =============================================================================\n// InputGroup Variants\n// =============================================================================\n\nconst inputGroupVariants = tv({\n\tbase: [\n\t\t...formControlBase,\n\t\t// InputGroup-specific: Container layout and styling\n\t\t\"group/input-group relative flex w-full items-center justify-start\",\n\t\t\"shadow-xs\",\n\t\t// Override focus state to work with child focus detection\n\t\t\"focus-visible:border-ui-color-border focus-visible:ring-0\",\n\t\t// Override hover to work with InputGroup structure\n\t\t\"hover:bg-ui-control-background\",\n\t\t// Height and layout (overridden by size variants)\n\t\t\"min-w-0\",\n\t\t\"has-[>textarea]:h-auto\",\n\t\t\"has-[>[data-align=inline-start]]:[&>input]:pl-6\",\n\t\t\"has-[>[data-align=inline-end]]:[&>input]:pr-6\",\n\t\t\"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pt-spatial-ui-input-group-gap-block has-[>[data-align=block-start]]:[&>input]:pb-spatial-ui-input-group-padding-y-medium\",\n\t\t\"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pb-spatial-ui-input-group-gap-block\",\n\t\t// Focus state detection on child input (overrides formControlBase focus)\n\t\t\"has-[[data-slot=input-group-control]:focus-visible]:border-ui-accent-base has-[[data-slot=input-group-control]:focus-visible]:ring-4 has-[[data-slot=input-group-control]:focus-visible]:ring-ui-color-focus\",\n\t\t// Error state detection on child elements\n\t\t\"has-[[data-slot][aria-invalid=true]]:border-ui-error-color has-[[data-slot][aria-invalid=true]]:ring-ui-error-color/20\",\n\t\t// Disabled state (overrides formControlBase disabled)\n\t\t\"data-[disabled=true]:bg-ui-control-background-disabled data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed\",\n\t],\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"h-spatial-ui-input-group-height-small\",\n\t\t\tdefault: \"h-spatial-ui-input-group-height-medium\",\n\t\t\tlg: \"h-spatial-ui-input-group-height-large\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"default\",\n\t},\n});\n\n// =============================================================================\n// InputGroupAddon Variants\n// =============================================================================\n\nconst inputGroupAddonVariants = tv({\n\tbase: [\n\t\t\"flex items-center justify-center gap-6\",\n\t\t\"typography-ui-text-sm text-text-muted\",\n\t\t\"select-none cursor-text\",\n\t\t\"[&>svg:not([class*='size-'])]:size-16\",\n\t\t\"[&_button]:text-[unset] [&_button]:cursor-pointer\",\n\t\t\"group-data-[disabled=true]/input-group:opacity-50\",\n\t],\n\tvariants: {\n\t\talign: {\n\t\t\t\"inline-start\": [\n\t\t\t\t\"order-first h-full\",\n\t\t\t\t\"pl-spatial-ui-input-group-padding-x-medium\",\n\t\t\t\t\"has-[>button]:ml-[-6px]\",\n\t\t\t],\n\t\t\t\"inline-end\": [\n\t\t\t\t\"order-last h-full\",\n\t\t\t\t\"pr-spatial-ui-input-group-padding-x-medium\",\n\t\t\t\t\"has-[>button]:mr-[-6px]\",\n\t\t\t],\n\t\t\t\"block-start\": [\n\t\t\t\t\"order-first h-auto w-full justify-start\",\n\t\t\t\t\"px-spatial-ui-input-group-padding-x-medium pt-spatial-ui-input-group-padding-y-medium\",\n\t\t\t\t\"[.border-b]:pb-spatial-ui-input-group-padding-y-medium\",\n\t\t\t\t// Use shared text style for block addons (12px, Regular weight per Figma)\n\t\t\t\t\"typography-ui-text-xs\",\n\t\t\t],\n\t\t\t\"block-end\": [\n\t\t\t\t\"order-last h-auto w-full justify-start\",\n\t\t\t\t\"px-spatial-ui-input-group-padding-x-medium pb-spatial-ui-input-group-padding-y-medium\",\n\t\t\t\t\"[.border-t]:pt-spatial-ui-input-group-padding-y-medium\",\n\t\t\t\t// Use shared text style for block addons (12px, Regular weight per Figma)\n\t\t\t\t\"typography-ui-text-xs\",\n\t\t\t],\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\talign: \"inline-start\",\n\t},\n});\n\n// =============================================================================\n// InputGroup Component\n// =============================================================================\n\nexport interface InputGroupProps\n\textends React.FieldsetHTMLAttributes<HTMLFieldSetElement>,\n\t\tVariantProps<typeof inputGroupVariants> {}\n\n/**\n * InputGroup component for combining inputs with addons, buttons, and text.\n *\n * A container that groups an input with prefix/suffix addons, icons, or buttons.\n * Supports inline (left/right) and block (top/bottom) addon positioning.\n *\n * Uses semantic UI tokens for theming support.\n *\n * @example\n * ```tsx\n * // With prefix icon\n * <InputGroup>\n *   <InputGroupAddon>\n *     <SearchIcon />\n *   </InputGroupAddon>\n *   <InputGroupInput placeholder=\"Search...\" />\n * </InputGroup>\n *\n * // With suffix button\n * <InputGroup>\n *   <InputGroupInput placeholder=\"Enter email\" />\n *   <InputGroupAddon align=\"inline-end\">\n *     <InputGroupButton>Subscribe</InputGroupButton>\n *   </InputGroupAddon>\n * </InputGroup>\n *\n * // With text prefix\n * <InputGroup>\n *   <InputGroupAddon>\n *     <InputGroupText>https://</InputGroupText>\n *   </InputGroupAddon>\n *   <InputGroupInput placeholder=\"example.com\" />\n * </InputGroup>\n * ```\n */\nfunction InputGroup({ className, size, disabled, ...props }: InputGroupProps) {\n\treturn (\n\t\t<fieldset\n\t\t\tdata-slot=\"input-group\"\n\t\t\tdata-disabled={disabled || undefined}\n\t\t\tdisabled={disabled}\n\t\t\tclassName={cn(\n\t\t\t\t\"p-0 m-0 min-w-0\",\n\t\t\t\tinputGroupVariants({ size, class: className }),\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n// =============================================================================\n// InputGroupAddon Component\n// =============================================================================\n\nexport interface InputGroupAddonProps\n\textends React.HTMLAttributes<HTMLDivElement>,\n\t\tVariantProps<typeof inputGroupAddonVariants> {}\n\n/**\n * InputGroupAddon component for positioning addons within an InputGroup.\n *\n * Can contain icons, text, or buttons. Clicking the addon focuses the input.\n *\n * @example\n * ```tsx\n * // Inline start (default - left side)\n * <InputGroupAddon>\n *   <SearchIcon />\n * </InputGroupAddon>\n *\n * // Inline end (right side)\n * <InputGroupAddon align=\"inline-end\">\n *   <InputGroupButton>Submit</InputGroupButton>\n * </InputGroupAddon>\n *\n * // Block positions (top/bottom)\n * <InputGroupAddon align=\"block-start\">\n *   <label>Email Address</label>\n * </InputGroupAddon>\n * ```\n */\nfunction InputGroupAddon({\n\tclassName,\n\talign = \"inline-start\",\n\tonClick,\n\tonKeyDown,\n\t...props\n}: InputGroupAddonProps) {\n\tconst focusInput = (element: HTMLElement) => {\n\t\telement.parentElement?.querySelector(\"input\")?.focus();\n\t};\n\n\tconst handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n\t\t// Don't focus input if clicking a button inside the addon\n\t\tif ((e.target as HTMLElement).closest(\"button\")) {\n\t\t\tonClick?.(e);\n\t\t\treturn;\n\t\t}\n\t\t// Focus the input when clicking the addon\n\t\tfocusInput(e.currentTarget);\n\t\tonClick?.(e);\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t// Focus input on Enter or Space (unless inside a button)\n\t\tif (\n\t\t\t(e.key === \"Enter\" || e.key === \" \") &&\n\t\t\t!(e.target as HTMLElement).closest(\"button\")\n\t\t) {\n\t\t\tfocusInput(e.currentTarget);\n\t\t}\n\t\tonKeyDown?.(e);\n\t};\n\n\treturn (\n\t\t// biome-ignore lint/a11y/noStaticElementInteractions: Click-to-focus is a convenience UX pattern; primary interaction is via the input itself\n\t\t<div\n\t\t\tdata-slot=\"input-group-addon\"\n\t\t\tdata-align={align}\n\t\t\tclassName={cn(inputGroupAddonVariants({ align, class: className }))}\n\t\t\tonClick={handleClick}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n// =============================================================================\n// InputGroupButton Component\n// =============================================================================\n\nconst inputGroupButtonVariants = tv({\n\tbase: [\n\t\t\"typography-ui-button-small shadow-none flex gap-6 items-center\",\n\t\t\"focus-visible:ring-1 focus-visible:ring-offset-0 focus-visible:ring-ui-color-border\",\n\t\t\"transition-opacity duration-150\",\n\t],\n\tvariants: {\n\t\tsize: {\n\t\t\txs: \"!h-24 gap-4 px-8 rounded-surface-ui-small [&>svg:not([class*='size-'])]:size-16 has-[>svg]:px-6\",\n\t\t\tsm: \"!h-28 px-10 gap-6 rounded-surface-ui-medium has-[>svg]:px-8\",\n\t\t\t\"icon-xs\":\n\t\t\t\t\"!size-24 rounded-surface-ui-small p-0 [&>svg:not([class*='size-'])]:size-16 has-[>svg]:p-0\",\n\t\t\t\"icon-sm\":\n\t\t\t\t\"!size-28 rounded-surface-ui-medium p-0 [&>svg:not([class*='size-'])]:size-16 has-[>svg]:p-0\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"xs\",\n\t},\n});\n\nexport interface InputGroupButtonProps\n\textends Omit<ButtonProps, \"size\">,\n\t\tVariantProps<typeof inputGroupButtonVariants> {}\n\n/**\n * InputGroupButton component for inline buttons within an InputGroup.\n *\n * A small button variant designed to fit inside input groups.\n *\n * @example\n * ```tsx\n * <InputGroupAddon align=\"inline-end\">\n *   <InputGroupButton>Submit</InputGroupButton>\n * </InputGroupAddon>\n *\n * // Icon button\n * <InputGroupAddon align=\"inline-end\">\n *   <InputGroupButton size=\"icon-xs\">\n *     <ClearIcon />\n *   </InputGroupButton>\n * </InputGroupAddon>\n * ```\n */\nfunction InputGroupButton({\n\tclassName,\n\ttype = \"button\",\n\tvariant = \"ghost\",\n\tsize = \"xs\",\n\t...props\n}: InputGroupButtonProps) {\n\treturn (\n\t\t<Button\n\t\t\ttype={type}\n\t\t\tdata-size={size}\n\t\t\tvariant={variant}\n\t\t\tclassName={cn(inputGroupButtonVariants({ size, class: className }))}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n// =============================================================================\n// InputGroupText Component\n// =============================================================================\n\nexport interface InputGroupTextProps\n\textends React.HTMLAttributes<HTMLSpanElement> {}\n\n/**\n * InputGroupText component for static text within an InputGroup.\n *\n * Use for prefixes like \"https://\" or suffixes like \".com\"\n *\n * @example\n * ```tsx\n * <InputGroupAddon>\n *   <InputGroupText>https://</InputGroupText>\n * </InputGroupAddon>\n * ```\n */\nfunction InputGroupText({ className, ...props }: InputGroupTextProps) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"flex items-center gap-6 typography-ui-text-sm text-text-muted\",\n\t\t\t\t\"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-16\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n// =============================================================================\n// InputGroupInput Component\n// =============================================================================\n\nexport interface InputGroupInputProps\n\textends React.InputHTMLAttributes<HTMLInputElement> {}\n\n/**\n * InputGroupInput component - the input element within an InputGroup.\n *\n * Styled to integrate seamlessly with the InputGroup container.\n *\n * @example\n * ```tsx\n * <InputGroup>\n *   <InputGroupInput placeholder=\"Enter text...\" />\n * </InputGroup>\n * ```\n */\nfunction InputGroupInput({ className, ...props }: InputGroupInputProps) {\n\treturn (\n\t\t<input\n\t\t\tdata-slot=\"input-group-control\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex-1 min-w-0 h-full w-full\",\n\t\t\t\t\"border-0 bg-transparent shadow-none outline-none\",\n\t\t\t\t\"typography-ui-text-sm text-left placeholder:text-text-muted\",\n\t\t\t\t\"px-spatial-ui-input-group-padding-x-medium\",\n\t\t\t\t\"focus-visible:ring-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n// =============================================================================\n// InputGroupTextarea Component\n// =============================================================================\n\nexport interface InputGroupTextareaProps\n\textends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\n/**\n * InputGroupTextarea component - a textarea element within an InputGroup.\n *\n * Styled to integrate seamlessly with the InputGroup container.\n *\n * @example\n * ```tsx\n * <InputGroup>\n *   <InputGroupTextarea placeholder=\"Enter long text...\" rows={4} />\n * </InputGroup>\n * ```\n */\nfunction InputGroupTextarea({ className, ...props }: InputGroupTextareaProps) {\n\treturn (\n\t\t<textarea\n\t\t\tdata-slot=\"input-group-control\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex-1 min-w-0 w-full resize-none\",\n\t\t\t\t\"border-0 bg-transparent shadow-none outline-none\",\n\t\t\t\t\"typography-ui-text-sm text-left placeholder:text-text-muted\",\n\t\t\t\t\"px-spatial-ui-input-group-padding-x-medium py-spatial-ui-input-group-padding-y-medium\",\n\t\t\t\t\"focus-visible:ring-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tInputGroup,\n\tInputGroupAddon,\n\tInputGroupButton,\n\tInputGroupText,\n\tInputGroupInput,\n\tInputGroupTextarea,\n\tinputGroupVariants,\n\tinputGroupAddonVariants,\n};\n"],"names":["inputGroupVariants","tv","formControlBase","inputGroupAddonVariants","InputGroup","className","size","disabled","props","jsx","cn","InputGroupAddon","align","onClick","onKeyDown","focusInput","element","handleClick","e","handleKeyDown","inputGroupButtonVariants","InputGroupButton","type","variant","Button","InputGroupText","InputGroupInput","InputGroupTextarea"],"mappings":";;;;AAYA,MAAMA,IAAqBC,EAAG;AAAA,EAC7B,MAAM;AAAA,IACL,GAAGC;AAAA;AAAA,IAEH;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAAA,EAED,UAAU;AAAA,IACT,MAAM;AAAA,MACL,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,IAAA;AAAA,EACL;AAAA,EAED,iBAAiB;AAAA,IAChB,MAAM;AAAA,EAAA;AAER,CAAC,GAMKC,IAA0BF,EAAG;AAAA,EAClC,MAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAED,UAAU;AAAA,IACT,OAAO;AAAA,MACN,gBAAgB;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,cAAc;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,eAAe;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,MAAA;AAAA,MAED,aAAa;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,MAAA;AAAA,IACD;AAAA,EACD;AAAA,EAED,iBAAiB;AAAA,IAChB,OAAO;AAAA,EAAA;AAET,CAAC;AA6CD,SAASG,EAAW,EAAE,WAAAC,GAAW,MAAAC,GAAM,UAAAC,GAAU,GAAGC,KAA0B;AAC7E,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,iBAAeF,KAAY;AAAA,MAC3B,UAAAA;AAAA,MACA,WAAWG;AAAAA,QACV;AAAA,QACAV,EAAmB,EAAE,MAAAM,GAAM,OAAOD,GAAW;AAAA,MAAA;AAAA,MAE7C,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGP;AAiCA,SAASG,EAAgB;AAAA,EACxB,WAAAN;AAAA,EACA,OAAAO,IAAQ;AAAA,EACR,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGN;AACJ,GAAyB;AACxB,QAAMO,IAAa,CAACC,MAAyB;AAC5C,IAAAA,EAAQ,eAAe,cAAc,OAAO,GAAG,MAAA;AAAA,EAChD,GAEMC,IAAc,CAACC,MAAwC;AAE5D,QAAKA,EAAE,OAAuB,QAAQ,QAAQ,GAAG;AAChD,MAAAL,IAAUK,CAAC;AACX;AAAA,IACD;AAEA,IAAAH,EAAWG,EAAE,aAAa,GAC1BL,IAAUK,CAAC;AAAA,EACZ,GAEMC,IAAgB,CAACD,MAA2C;AAEjE,KACEA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,QAChC,CAAEA,EAAE,OAAuB,QAAQ,QAAQ,KAE3CH,EAAWG,EAAE,aAAa,GAE3BJ,IAAYI,CAAC;AAAA,EACd;AAEA;AAAA;AAAA,IAEC,gBAAAT;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,aAAU;AAAA,QACV,cAAYG;AAAA,QACZ,WAAWF,EAAGP,EAAwB,EAAE,OAAAS,GAAO,OAAOP,EAAA,CAAW,CAAC;AAAA,QAClE,SAASY;AAAA,QACT,WAAWE;AAAA,QACV,GAAGX;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP;AAMA,MAAMY,IAA2BnB,EAAG;AAAA,EACnC,MAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAED,UAAU;AAAA,IACT,MAAM;AAAA,MACL,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,WACC;AAAA,MACD,WACC;AAAA,IAAA;AAAA,EACF;AAAA,EAED,iBAAiB;AAAA,IAChB,MAAM;AAAA,EAAA;AAER,CAAC;AAyBD,SAASoB,EAAiB;AAAA,EACzB,WAAAhB;AAAA,EACA,MAAAiB,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,MAAAjB,IAAO;AAAA,EACP,GAAGE;AACJ,GAA0B;AACzB,SACC,gBAAAC;AAAA,IAACe;AAAA,IAAA;AAAA,MACA,MAAAF;AAAA,MACA,aAAWhB;AAAA,MACX,SAAAiB;AAAA,MACA,WAAWb,EAAGU,EAAyB,EAAE,MAAAd,GAAM,OAAOD,EAAA,CAAW,CAAC;AAAA,MACjE,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGP;AAqBA,SAASiB,EAAe,EAAE,WAAApB,GAAW,GAAGG,KAA8B;AACrE,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWC;AAAAA,QACV;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAEA,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGP;AAqBA,SAASkB,EAAgB,EAAE,WAAArB,GAAW,GAAGG,KAA+B;AACvE,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC;AAAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAEA,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGP;AAqBA,SAASmB,EAAmB,EAAE,WAAAtB,GAAW,GAAGG,KAAkC;AAC7E,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAWC;AAAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAEA,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/atoms/input/input.d.ts

@@ -11,15 +11,15 @@ import * as React from "react";
  * - Disabled: Disabled background (via :disabled)
  *
  * Sizes:
- * - sm: Smaller height and padding
- * - default: Standard 48px height
- * - lg: Larger height and padding
+ * - sm: Smaller height and padding (36px)
+ * - default: Standard height (48px)
+ * - lg: Larger height and padding (56px)
  */
 declare const inputVariants: import('tailwind-variants').TVReturnType<{
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
     };
     error: {
         true: string;
@@ -27,9 +27,9 @@ declare const inputVariants: import('tailwind-variants').TVReturnType<{
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
     };
     error: {
         true: string;
@@ -37,9 +37,9 @@ declare const inputVariants: import('tailwind-variants').TVReturnType<{
     };
 }, {
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
     };
     error: {
         true: string;
@@ -47,9 +47,9 @@ declare const inputVariants: import('tailwind-variants').TVReturnType<{
     };
 }>, {
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
     };
     error: {
         true: string;
@@ -57,9 +57,9 @@ declare const inputVariants: import('tailwind-variants').TVReturnType<{
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
     };
     error: {
         true: string;
@@ -67,9 +67,9 @@ declare const inputVariants: import('tailwind-variants').TVReturnType<{
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
     };
     error: {
         true: string;
@@ -77,9 +77,9 @@ declare const inputVariants: import('tailwind-variants').TVReturnType<{
     };
 }, {
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
     };
     error: {
         true: string;

package/dist/components/atoms/input/input.js

@@ -0,0 +1,45 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as d from "react";
+import { tv as u, cnBase as o } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+import { formControlError as i, formControlBase as n } from "../../../lib/form-control.js";
+const m = {
+  sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md",
+  default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md",
+  lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg"
+}, g = u({
+  base: [
+    ...n,
+    // Input-specific: Placeholder styling
+    "placeholder:text-text-muted"
+  ],
+  variants: {
+    size: m,
+    error: {
+      ...i,
+      true: `${i.true} placeholder:text-ui-error-color/60`
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    error: !1
+  }
+}), y = d.forwardRef(
+  ({ className: p, size: t, error: a, type: e = "text", ...r }, l) => /* @__PURE__ */ s(
+    "input",
+    {
+      ref: l,
+      type: e,
+      "aria-invalid": a || void 0,
+      className: o(g({ size: t, error: a, class: p })),
+      "data-size": t ?? "default",
+      "data-error": a ?? !1,
+      ...r
+    }
+  )
+);
+y.displayName = "Input";
+export {
+  y as Input,
+  g as inputVariants
+};
+//# sourceMappingURL=input.js.map

package/dist/components/atoms/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../../../../src/components/atoms/input/input.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { formControlBase, formControlError } from \"@/lib/form-control\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Input-specific size variants using semantic input tokens.\n * These tokens allow input sizing to be customized independently from other controls.\n */\nconst inputSizes = {\n\tsm: \"h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md\",\n\tdefault:\n\t\t\"h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md\",\n\tlg: \"h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg\",\n} as const;\n\n/**\n * Input variants for styling based on Figma BaseKit / Interface / Input\n *\n * States (handled via CSS pseudo-classes and props):\n * - Default: White background, subtle border\n * - Hover: Light gray background (via :hover)\n * - Focus: Accent border with focus ring (via :focus-visible)\n * - Error: Error border color (via error prop)\n * - Disabled: Disabled background (via :disabled)\n *\n * Sizes:\n * - sm: Smaller height and padding (36px)\n * - default: Standard height (48px)\n * - lg: Larger height and padding (56px)\n */\nconst inputVariants = tv({\n\tbase: [\n\t\t...formControlBase,\n\t\t// Input-specific: Placeholder styling\n\t\t\"placeholder:text-text-muted\",\n\t],\n\tvariants: {\n\t\tsize: inputSizes,\n\t\terror: {\n\t\t\t...formControlError,\n\t\t\ttrue: `${formControlError.true} placeholder:text-ui-error-color/60`,\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"default\",\n\t\terror: false,\n\t},\n});\n\nexport interface InputProps\n\textends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\n\t\tVariantProps<typeof inputVariants> {\n\t/**\n\t * Whether the input is in an error state\n\t */\n\terror?: boolean;\n}\n\n/**\n * Input component based on Figma BaseKit / Interface / Input\n *\n * A styled text input with support for various states:\n * - Default, hover, focus, error, and disabled states\n * - Three size variants: sm, default, lg\n *\n * Uses semantic UI tokens for theming support.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Input placeholder=\"Enter your email\" />\n *\n * // With error state\n * <Input error placeholder=\"Invalid input\" />\n *\n * // Different sizes\n * <Input size=\"sm\" placeholder=\"Small\" />\n * <Input size=\"lg\" placeholder=\"Large\" />\n *\n * // Disabled\n * <Input disabled placeholder=\"Disabled input\" />\n * ```\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n\t({ className, size, error, type = \"text\", ...props }, ref) => {\n\t\treturn (\n\t\t\t<input\n\t\t\t\tref={ref}\n\t\t\t\ttype={type}\n\t\t\t\taria-invalid={error || undefined}\n\t\t\t\tclassName={cn(inputVariants({ size, error, class: className }))}\n\t\t\t\tdata-size={size ?? \"default\"}\n\t\t\t\tdata-error={error ?? false}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInput.displayName = \"Input\";\n\nexport { Input, inputVariants };\n"],"names":["inputSizes","inputVariants","tv","formControlBase","formControlError","Input","React","className","size","error","type","props","ref","jsx","cn"],"mappings":";;;;AAWA,MAAMA,IAAa;AAAA,EAClB,IAAI;AAAA,EACJ,SACC;AAAA,EACD,IAAI;AACL,GAiBMC,IAAgBC,EAAG;AAAA,EACxB,MAAM;AAAA,IACL,GAAGC;AAAA;AAAA,IAEH;AAAA,EAAA;AAAA,EAED,UAAU;AAAA,IACT,MAAMH;AAAA,IACN,OAAO;AAAA,MACN,GAAGI;AAAA,MACH,MAAM,GAAGA,EAAiB,IAAI;AAAA,IAAA;AAAA,EAC/B;AAAA,EAED,iBAAiB;AAAA,IAChB,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAET,CAAC,GAoCKC,IAAQC,EAAM;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,MAAAC,GAAM,OAAAC,GAAO,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GAASC,MAEpD,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAAD;AAAA,MACA,MAAAF;AAAA,MACA,gBAAcD,KAAS;AAAA,MACvB,WAAWK,EAAGb,EAAc,EAAE,MAAAO,GAAM,OAAAC,GAAO,OAAOF,EAAA,CAAW,CAAC;AAAA,MAC9D,aAAWC,KAAQ;AAAA,MACnB,cAAYC,KAAS;AAAA,MACpB,GAAGE;AAAA,IAAA;AAAA,EAAA;AAIR;AACAN,EAAM,cAAc;"}

package/dist/components/atoms/ndstudio-footer/ndstudio-footer.js

@@ -0,0 +1,27 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import * as t from "react";
+import { cnBase as i } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+const d = t.forwardRef(
+  ({ className: a, href: n = "https://ndstudio.gov", ...o }, s) => /* @__PURE__ */ e("div", { ref: s, className: i("text-center", a), ...o, children: /* @__PURE__ */ r("p", { className: "typography-label-large uppercase text-ivory-alpha-75", children: [
+    "Designed and Engineered in DC by",
+    " ",
+    /* @__PURE__ */ r(
+      "a",
+      {
+        href: n,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "hover:underline",
+        children: [
+          "National Design Studio",
+          /* @__PURE__ */ e("span", { className: "sr-only", children: " (opens in new tab)" })
+        ]
+      }
+    )
+  ] }) })
+);
+d.displayName = "NdstudioFooter";
+export {
+  d as NdstudioFooter
+};
+//# sourceMappingURL=ndstudio-footer.js.map

package/dist/components/atoms/ndstudio-footer/ndstudio-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ndstudio-footer.js","sources":["../../../../src/components/atoms/ndstudio-footer/ndstudio-footer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface NdstudioFooterProps\n\textends React.HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * The URL to link to\n\t * @default \"https://ndstudio.gov\"\n\t */\n\thref?: string;\n}\n\n/**\n * NdstudioFooter component displays a \"Designed and Engineered in DC by National Design Studio\" footer link.\n *\n * This component is designed to be used as a footer within other components like Tout,\n * but can also be used standalone.\n *\n * @example\n * ```tsx\n * // Used within a Tout component via footer slot\n * <Tout\n *   headline=\"Feature Headline\"\n *   primaryAction={<Button>Primary</Button>}\n *   backgroundMedia={<img src=\"/bg.jpg\" alt=\"\" />}\n *   footer={<NdstudioFooter />}\n * />\n *\n * // Standalone usage\n * <NdstudioFooter className=\"my-custom-class\" />\n * ```\n */\nconst NdstudioFooter = React.forwardRef<HTMLDivElement, NdstudioFooterProps>(\n\t({ className, href = \"https://ndstudio.gov\", ...props }, ref) => {\n\t\treturn (\n\t\t\t<div ref={ref} className={cn(\"text-center\", className)} {...props}>\n\t\t\t\t<p className=\"typography-label-large uppercase text-ivory-alpha-75\">\n\t\t\t\t\tDesigned and Engineered in DC by{\" \"}\n\t\t\t\t\t<a\n\t\t\t\t\t\thref={href}\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\tclassName=\"hover:underline\"\n\t\t\t\t\t>\n\t\t\t\t\t\tNational Design Studio\n\t\t\t\t\t\t<span className=\"sr-only\"> (opens in new tab)</span>\n\t\t\t\t\t</a>\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t);\n\t},\n);\nNdstudioFooter.displayName = \"NdstudioFooter\";\n\nexport { NdstudioFooter };\n"],"names":["NdstudioFooter","React","className","href","props","ref","jsx","cn","jsxs"],"mappings":";;;AAgCA,MAAMA,IAAiBC,EAAM;AAAA,EAC5B,CAAC,EAAE,WAAAC,GAAW,MAAAC,IAAO,wBAAwB,GAAGC,EAAA,GAASC,MAEvD,gBAAAC,EAAC,OAAA,EAAI,KAAAD,GAAU,WAAWE,EAAG,eAAeL,CAAS,GAAI,GAAGE,GAC3D,UAAA,gBAAAI,EAAC,KAAA,EAAE,WAAU,wDAAuD,UAAA;AAAA,IAAA;AAAA,IAClC;AAAA,IACjC,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,MAAAL;AAAA,QACA,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,UAAA;AAAA,UAAA;AAAA,UAEA,gBAAAG,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,sBAAA,CAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC9C,EAAA,CACD,EAAA,CACD;AAGH;AACAN,EAAe,cAAc;"}