@nationaldesignstudio/react 0.5.1 → 0.5.2

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

@@ -1,69 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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.d.ts

@@ -1,278 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import { ButtonProps } from '../button';
-import type * as React from "react";
-declare const inputGroupVariants: import('tailwind-variants').TVReturnType<{
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, {
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}>, {
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, {
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}>, unknown, unknown, undefined>>;
-declare const inputGroupAddonVariants: import('tailwind-variants').TVReturnType<{
-    align: {
-        "inline-start": string[];
-        "inline-end": string[];
-        "block-start": string[];
-        "block-end": string[];
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    align: {
-        "inline-start": string[];
-        "inline-end": string[];
-        "block-start": string[];
-        "block-end": string[];
-    };
-}, {
-    align: {
-        "inline-start": string[];
-        "inline-end": string[];
-        "block-start": string[];
-        "block-end": string[];
-    };
-}>, {
-    align: {
-        "inline-start": string[];
-        "inline-end": string[];
-        "block-start": string[];
-        "block-end": string[];
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    align: {
-        "inline-start": string[];
-        "inline-end": string[];
-        "block-start": string[];
-        "block-end": string[];
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    align: {
-        "inline-start": string[];
-        "inline-end": string[];
-        "block-start": string[];
-        "block-end": string[];
-    };
-}, {
-    align: {
-        "inline-start": string[];
-        "inline-end": string[];
-        "block-start": string[];
-        "block-end": string[];
-    };
-}>, unknown, unknown, undefined>>;
-export interface InputGroupProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement>, VariantProps<typeof inputGroupVariants> {
-}
-/**
- * InputGroup component for combining inputs with addons, buttons, and text.
- *
- * A container that groups an input with prefix/suffix addons, icons, or buttons.
- * Supports inline (left/right) and block (top/bottom) addon positioning.
- *
- * Uses semantic UI tokens for theming support.
- *
- * @example
- * ```tsx
- * // With prefix icon
- * <InputGroup>
- *   <InputGroupAddon>
- *     <SearchIcon />
- *   </InputGroupAddon>
- *   <InputGroupInput placeholder="Search..." />
- * </InputGroup>
- *
- * // With suffix button
- * <InputGroup>
- *   <InputGroupInput placeholder="Enter email" />
- *   <InputGroupAddon align="inline-end">
- *     <InputGroupButton>Subscribe</InputGroupButton>
- *   </InputGroupAddon>
- * </InputGroup>
- *
- * // With text prefix
- * <InputGroup>
- *   <InputGroupAddon>
- *     <InputGroupText>https://</InputGroupText>
- *   </InputGroupAddon>
- *   <InputGroupInput placeholder="example.com" />
- * </InputGroup>
- * ```
- */
-declare function InputGroup({ className, size, disabled, ...props }: InputGroupProps): import("react/jsx-runtime").JSX.Element;
-export interface InputGroupAddonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof inputGroupAddonVariants> {
-}
-/**
- * InputGroupAddon component for positioning addons within an InputGroup.
- *
- * Can contain icons, text, or buttons. Clicking the addon focuses the input.
- *
- * @example
- * ```tsx
- * // Inline start (default - left side)
- * <InputGroupAddon>
- *   <SearchIcon />
- * </InputGroupAddon>
- *
- * // Inline end (right side)
- * <InputGroupAddon align="inline-end">
- *   <InputGroupButton>Submit</InputGroupButton>
- * </InputGroupAddon>
- *
- * // Block positions (top/bottom)
- * <InputGroupAddon align="block-start">
- *   <label>Email Address</label>
- * </InputGroupAddon>
- * ```
- */
-declare function InputGroupAddon({ className, align, onClick, onKeyDown, ...props }: InputGroupAddonProps): import("react/jsx-runtime").JSX.Element;
-declare const inputGroupButtonVariants: import('tailwind-variants').TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        "icon-xs": string;
-        "icon-sm": string;
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    size: {
-        xs: string;
-        sm: string;
-        "icon-xs": string;
-        "icon-sm": string;
-    };
-}, {
-    size: {
-        xs: string;
-        sm: string;
-        "icon-xs": string;
-        "icon-sm": string;
-    };
-}>, {
-    size: {
-        xs: string;
-        sm: string;
-        "icon-xs": string;
-        "icon-sm": string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        "icon-xs": string;
-        "icon-sm": string;
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    size: {
-        xs: string;
-        sm: string;
-        "icon-xs": string;
-        "icon-sm": string;
-    };
-}, {
-    size: {
-        xs: string;
-        sm: string;
-        "icon-xs": string;
-        "icon-sm": string;
-    };
-}>, unknown, unknown, undefined>>;
-export interface InputGroupButtonProps extends Omit<ButtonProps, "size">, VariantProps<typeof inputGroupButtonVariants> {
-}
-/**
- * InputGroupButton component for inline buttons within an InputGroup.
- *
- * A small button variant designed to fit inside input groups.
- *
- * @example
- * ```tsx
- * <InputGroupAddon align="inline-end">
- *   <InputGroupButton>Submit</InputGroupButton>
- * </InputGroupAddon>
- *
- * // Icon button
- * <InputGroupAddon align="inline-end">
- *   <InputGroupButton size="icon-xs">
- *     <ClearIcon />
- *   </InputGroupButton>
- * </InputGroupAddon>
- * ```
- */
-declare function InputGroupButton({ className, type, variant, size, ...props }: InputGroupButtonProps): import("react/jsx-runtime").JSX.Element;
-export interface InputGroupTextProps extends React.HTMLAttributes<HTMLSpanElement> {
-}
-/**
- * InputGroupText component for static text within an InputGroup.
- *
- * Use for prefixes like "https://" or suffixes like ".com"
- *
- * @example
- * ```tsx
- * <InputGroupAddon>
- *   <InputGroupText>https://</InputGroupText>
- * </InputGroupAddon>
- * ```
- */
-declare function InputGroupText({ className, ...props }: InputGroupTextProps): import("react/jsx-runtime").JSX.Element;
-export interface InputGroupInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-}
-/**
- * InputGroupInput component - the input element within an InputGroup.
- *
- * Styled to integrate seamlessly with the InputGroup container.
- *
- * @example
- * ```tsx
- * <InputGroup>
- *   <InputGroupInput placeholder="Enter text..." />
- * </InputGroup>
- * ```
- */
-declare function InputGroupInput({ className, ...props }: InputGroupInputProps): import("react/jsx-runtime").JSX.Element;
-export interface InputGroupTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-}
-/**
- * InputGroupTextarea component - a textarea element within an InputGroup.
- *
- * Styled to integrate seamlessly with the InputGroup container.
- *
- * @example
- * ```tsx
- * <InputGroup>
- *   <InputGroupTextarea placeholder="Enter long text..." rows={4} />
- * </InputGroup>
- * ```
- */
-declare function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps): import("react/jsx-runtime").JSX.Element;
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupVariants, inputGroupAddonVariants, };

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

@@ -1,221 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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":"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"}