@signalflare-ai/ui 1.0.0 → 1.2.0

package/dist/{input-DXYUjGgD.js.map → input-B2bbijRh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-DXYUjGgD.js","names":[],"sources":["../src/components/input/input.tsx"],"sourcesContent":["import { Input as BaseInput } from \"@base-ui/react/input\";\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Input size and variant definitions mapping names to their Tailwind classes. */\nexport const SF_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-sf-ring\",\n      description: \"Default input appearance\",\n    },\n    error: {\n      classes: \"!ring-sf-danger focus:ring-sf-danger\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const SF_INPUT_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\nexport const SF_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 SF_INPUT_VARIANTS\nexport type SFInputSize = keyof typeof SF_INPUT_VARIANTS.size;\nexport type SFInputVariant = keyof typeof SF_INPUT_VARIANTS.variant;\n\nexport interface SFInputVariantsProps {\n  /**\n   * Input size.\n   * - `\"xs\"` — Extra small for compact UIs\n   * - `\"sm\"` — Small for secondary fields\n   * - `\"base\"` — Default size\n   * - `\"lg\"` — Large for prominent fields\n   * @default \"base\"\n   */\n  size?: SFInputSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard input\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: SFInputVariant;\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 = SF_INPUT_DEFAULT_VARIANTS.variant,\n  size = SF_INPUT_DEFAULT_VARIANTS.size,\n  parentFocusIndicator = false,\n  focusIndicator = false,\n}: SFInputVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"border-0 bg-sf-control text-sf-default ring ring-sf-line\",\n    // Disabled state and placeholder styles\n    \"outline-none placeholder:text-sf-subtle disabled:text-sf-subtle\",\n    // Apply size styles from SF_INPUT_VARIANTS\n    SF_INPUT_VARIANTS.size[size].classes,\n    // Apply variant styles from SF_INPUT_VARIANTS\n    SF_INPUT_VARIANTS.variant[variant].classes,\n    // Focus state handling\n    parentFocusIndicator && \"[&:has(:focus-within)]:ring-sf-ring\",\n    focusIndicator && \"focus:ring-sf-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        \"[SignalFlare 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<SFInputVariantsProps, \"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"],"mappings":";;;;;;;;AAWA,IAAa,oBAAoB;CAC/B,MAAM;EACJ,IAAI;GACF,SAAS;GACT,aAAa;GACd;EACD,IAAI;GACF,SAAS;GACT,aAAa;GACd;EACD,MAAM;GACJ,SAAS;GACT,aAAa;GACd;EACD,IAAI;GACF,SAAS;GACT,aAAa;GACd;EACF;CACD,SAAS;EACP,SAAS;GACP,SAAS;GACT,aAAa;GACd;EACD,OAAO;GACL,SAAS;GACT,aAAa;GACd;EACF;CACF;AAED,IAAa,4BAA4B;CACvC,MAAM;CACN,SAAS;CACV;AAwDD,SAAgB,cAAc,EAC5B,UAAU,0BAA0B,SACpC,OAAO,0BAA0B,MACjC,uBAAuB,OACvB,iBAAiB,UACO,EAAE,EAAE;AAC5B,QAAO,GAEL,4DAEA,mEAEA,kBAAkB,KAAK,MAAM,SAE7B,kBAAkB,QAAQ,SAAS,SAEnC,wBAAwB,uCACxB,kBAAkB,qBACnB;;AAGH,IAAa,UAAQ,YAA0C,OAAO,QAAQ;CAC5E,MAAM,EACJ,WACA,OAAO,QACP,UAAU,WACV,OACA,cACA,aACA,OACA,GAAG,eACD;CAGJ,MAAM,EAAE,aAAa;AAGrB,KAAA,QAAA,IAAA,aAA6B,cAAc;EACzC,MAAM,WAAW,QAAQ,MAAM;EAC/B,MAAM,6BAA6B,QACjC,WAAW,eAAe,WAAW,cACtC;EACD,MAAM,oBAAoB,QAAQ,WAAW,mBAAmB;AAEhE,MAAI,CAAC,YAAY,CAAC,8BAA8B,CAAC,kBAC/C,SAAQ,KACN,8PAID;;CAIL,MAAM,QACJ,oBAAC,OAAD;EACO;EACL,WAAW,GACT,cAAc;GAAE;GAAM;GAAS,gBAAgB;GAAM,CAAC,EACtD,UACD;EACD,GAAI;EACJ,CAAA;AAIJ,KAAI,MACF,QACE,oBAAC,OAAD;EACS;EACG;EACI;EACD;EACb,OACE,QACI,OAAO,UAAU,WACf;GAAE,SAAS;GAAO,OAAO;GAAM,GAC/B,QACF,KAAA;YAGL;EACK,CAAA;AAKZ,QAAO;EACP;AAEF,QAAM,cAAc"}
+{"version":3,"file":"input-B2bbijRh.js","names":[],"sources":["../src/components/input/input.tsx"],"sourcesContent":["import { Input as BaseInput } from \"@base-ui/react/input\";\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Input size and variant definitions mapping names to their Tailwind classes. */\nexport const SF_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-sf-ring\",\n      description: \"Default input appearance\",\n    },\n    error: {\n      classes: \"!ring-sf-danger focus:ring-sf-danger\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const SF_INPUT_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\nexport const SF_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 SF_INPUT_VARIANTS\nexport type SFInputSize = keyof typeof SF_INPUT_VARIANTS.size;\nexport type SFInputVariant = keyof typeof SF_INPUT_VARIANTS.variant;\n\nexport interface SFInputVariantsProps {\n  /**\n   * Input size.\n   * - `\"xs\"` — Extra small for compact UIs\n   * - `\"sm\"` — Small for secondary fields\n   * - `\"base\"` — Default size\n   * - `\"lg\"` — Large for prominent fields\n   * @default \"base\"\n   */\n  size?: SFInputSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard input\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: SFInputVariant;\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 = SF_INPUT_DEFAULT_VARIANTS.variant,\n  size = SF_INPUT_DEFAULT_VARIANTS.size,\n  parentFocusIndicator = false,\n  focusIndicator = false,\n}: SFInputVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"border-0 bg-sf-control text-sf-default ring ring-sf-line\",\n    // Disabled state and placeholder styles\n    \"outline-none placeholder:text-sf-subtle disabled:text-sf-subtle\",\n    // Apply size styles from SF_INPUT_VARIANTS\n    SF_INPUT_VARIANTS.size[size].classes,\n    // Apply variant styles from SF_INPUT_VARIANTS\n    SF_INPUT_VARIANTS.variant[variant].classes,\n    // Focus state handling\n    parentFocusIndicator && \"[&:has(:focus-within)]:ring-sf-ring\",\n    focusIndicator && \"focus:ring-sf-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        \"[SignalFlare 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<SFInputVariantsProps, \"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"],"mappings":";;;;;;;;AAWA,IAAa,oBAAoB;CAC/B,MAAM;EACJ,IAAI;GACF,SAAS;GACT,aAAa;GACd;EACD,IAAI;GACF,SAAS;GACT,aAAa;GACd;EACD,MAAM;GACJ,SAAS;GACT,aAAa;GACd;EACD,IAAI;GACF,SAAS;GACT,aAAa;GACd;EACF;CACD,SAAS;EACP,SAAS;GACP,SAAS;GACT,aAAa;GACd;EACD,OAAO;GACL,SAAS;GACT,aAAa;GACd;EACF;CACF;AAED,IAAa,4BAA4B;CACvC,MAAM;CACN,SAAS;CACV;AAwDD,SAAgB,cAAc,EAC5B,UAAU,0BAA0B,SACpC,OAAO,0BAA0B,MACjC,uBAAuB,OACvB,iBAAiB,UACO,EAAE,EAAE;AAC5B,QAAO,GAEL,4DAEA,mEAEA,kBAAkB,KAAK,MAAM,SAE7B,kBAAkB,QAAQ,SAAS,SAEnC,wBAAwB,uCACxB,kBAAkB,qBACnB;;AAGH,IAAa,UAAQ,YAA0C,OAAO,QAAQ;CAC5E,MAAM,EACJ,WACA,OAAO,QACP,UAAU,WACV,OACA,cACA,aACA,OACA,GAAG,eACD;CAGJ,MAAM,EAAE,aAAa;AAGrB,KAAA,QAAA,IAAA,aAA6B,cAAc;EACzC,MAAM,WAAW,QAAQ,MAAM;EAC/B,MAAM,6BAA6B,QACjC,WAAW,eAAe,WAAW,cACtC;EACD,MAAM,oBAAoB,QAAQ,WAAW,mBAAmB;AAEhE,MAAI,CAAC,YAAY,CAAC,8BAA8B,CAAC,kBAC/C,SAAQ,KACN,8PAID;;CAIL,MAAM,QACJ,oBAAC,OAAD;EACO;EACL,WAAW,GACT,cAAc;GAAE;GAAM;GAAS,gBAAgB;GAAM,CAAC,EACtD,UACD;EACD,GAAI;EACJ,CAAA;AAIJ,KAAI,MACF,QACE,oBAAC,OAAD;EACS;EACG;EACI;EACD;EACb,OACE,QACI,OAAO,UAAU,WACf;GAAE,SAAS;GAAO,OAAO;GAAM,GAC/B,QACF,KAAA;YAGL;EACK,CAAA;AAKZ,QAAO;EACP;AAEF,QAAM,cAAc"}

package/dist/{input-DddtBN-g.js → input-ClB_E4Lb.js}

@@ -1,8 +1,8 @@
 "use client";
 import { t as cn } from "./cn-YROP2_ox.js";
-import { t as Button$1 } from "./button-De0267YU.js";
-import { t as Field } from "./field-Y_UK1_Cg.js";
-import { r as inputVariants, t as Input$1 } from "./input-DXYUjGgD.js";
+import { t as Button$1 } from "./button-CO6-qPax.js";
+import { t as Field } from "./field-B_yVof52.js";
+import { r as inputVariants, t as Input$1 } from "./input-B2bbijRh.js";
 import * as React$1 from "react";
 import { useCallback, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -118,4 +118,4 @@ var InputGroup = Object.assign(Root, {
 //#endregion
 export { InputArea as n, Textarea as r, InputGroup as t };
 
-//# sourceMappingURL=input-DddtBN-g.js.map
+//# sourceMappingURL=input-ClB_E4Lb.js.map

package/dist/{input-DddtBN-g.js.map → input-ClB_E4Lb.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-DddtBN-g.js","names":[],"sources":["../src/components/input/input-area.tsx","../src/components/input/input-group.tsx"],"sourcesContent":["import { useCallback, type ReactNode } from \"react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Field as SFField, type FieldErrorMatch } from \"../field/field\";\nimport { inputVariants } from \"./input\";\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        <SFField\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        </SFField>\n      );\n    }\n\n    // Render bare textarea without Field wrapper\n    return textarea;\n  }\n);\n\nInputArea.displayName = \"InputArea\";\n\n/** Alias for InputArea — provided for discoverability when migrating from other libraries */\nexport const Textarea = InputArea;\n\n/**\n * InputArea component props\n * @property {ReactNode} [label] - Label content for the textarea (enables Field wrapper)\n * @property {ReactNode} [description] - Helper text displayed below the textarea\n * @property {string | { message: ReactNode, match: FieldErrorMatch }} [error] - Error message or validation error object\n */\nexport type InputAreaProps = {\n  onValueChange?: (value: string) => void;\n  variant?: \"default\" | \"error\";\n  size?: \"xs\" | \"sm\" | \"base\" | \"lg\";\n  // Then other custom props\n  children?: React.ReactNode;\n  className?: string;\n  /** Label content for the textarea (enables Field wrapper) - can be a string or any React node */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the textarea */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n\n  // Finally, spread the native input props (least important)\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\">;\n","import { type PropsWithChildren, useContext } from \"react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { type ButtonProps, Button as ButtonExternal } from \"../button/button\";\nimport {\n  Input as InputExternal,\n  type InputProps,\n  inputVariants,\n} from \"./input\";\n\nexport const SF_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 SF_INPUT_GROUP_DEFAULT_VARIANTS = {\n  focusMode: \"container\",\n} as const;\n\nexport type SFInputGroupFocusMode =\n  keyof typeof SF_INPUT_GROUP_VARIANTS.focusMode;\n\nexport interface SFInputGroupVariantsProps {\n  focusMode?: SFInputGroupFocusMode;\n}\n\ninterface InputGroupRootProps extends SFInputGroupVariantsProps {\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 = SF_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-sf-line focus-within:ring-sf-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-sf-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-sf-base font-sans\",\n        \"grow px-2\",\n        isIndividualFocus\n          ? \"relative ring ring-sf-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-10 focus:outline\"\n          : \"focus:border-sf-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-sf-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-sf-overlay disabled:text-sf-inactive!\",\n        isIndividualFocus &&\n          \"relative ring ring-sf-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"],"mappings":";;;;;;;;;AAOA,IAAa,YAAY,QAAM,YAC5B,OAAO,QAAQ;CACd,MAAM,EACJ,WACA,eACA,OAAO,QACP,UAAU,WACV,UACA,OACA,cACA,aACA,OACA,GAAG,eACD;CAGJ,MAAM,EAAE,aAAa;CACrB,MAAM,eAAe,aAClB,UAAkD;AACjD,aAAW,MAAM;AACjB,kBAAgB,MAAM,OAAO,MAAM;IAErC,CAAC,UAAU,cAAc,CAC1B;CAED,MAAM,WACJ,oBAAC,YAAD;EACO;EACL,WAAW,GACT,cAAc;GAAE;GAAM;GAAS,gBAAgB;GAAM,CAAC,EACtD,eACA,UACD;EACD,UAAU;EACV,GAAI;EACJ,CAAA;AAIJ,KAAI,MACF,QACE,oBAAC,OAAD;EACS;EACG;EACI;EACD;EACb,OACE,QACI,OAAO,UAAU,WACf;GAAE,SAAS;GAAO,OAAO;GAAM,GAC/B,QACF,KAAA;YAGL;EACO,CAAA;AAKd,QAAO;EAEV;AAED,UAAU,cAAc;;AAGxB,IAAa,WAAW;;;AClDxB,IAAa,kCAAkC,EAC7C,WAAW,aACZ;AAmBD,IAAM,oBAAoB,QAAM,cAC9B,KACD;AAED,SAAS,KAAK,EACZ,MACA,UACA,WACA,YAAY,gCAAgC,aACH;CACzC,MAAM,UAAU,QAAM,OAAO;CAC7B,MAAM,gBAAgB,QAAM,OAAO;CACnC,MAAM,eAAe,QAAM,eAClB;EAAE;EAAM;EAAS;EAAe;EAAW,GAClD;EAAC;EAAM;EAAS;EAAe;EAAU,CAC1C;CAED,MAAM,oBAAoB,cAAc;AAExC,QACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;YACjC,oBAAC,OAAD;GACE,WAAW,GACT,cAAc;IAAE;IAAM,sBAAsB,CAAC;IAAmB,CAAC,EACjE,mCACA,oBACI,qBACA,yEACJ,UACD;GAEA;GACG,CAAA;EACqB,CAAA;;AAIjC,SAAS,MAAM,EAAE,YAAmC;CAClD,MAAM,UAAU,WAAW,kBAAkB;CAC7C,MAAM,oBAAoB,SAAS,cAAc;AAEjD,QACE,oBAAC,SAAD;EACE,SAAS,SAAS;EAClB,WAAW,GACT,oDACA,qBACE,qDACH;EAEA;EACK,CAAA;;AAIZ,SAAS,MAAM,OAAmB;CAChC,MAAM,UAAU,WAAW,kBAAkB;CAC7C,MAAM,oBAAoB,SAAS,cAAc;AAEjD,QACE,oBAAC,SAAD;EACE,IAAI,SAAS;EACb,oBAAkB,SAAS;EAC3B,MAAM,SAAS;EACf,GAAI;EACJ,WAAW,GACT,uEACA,aACA,oBACI,2GACA,wBACJ,MAAM,UACP;EACD,CAAA;;AAIN,SAAS,YAAY,EAAE,YAAmC;CACxD,MAAM,UAAU,WAAW,kBAAkB;CAC7C,MAAM,oBAAoB,SAAS,cAAc;AAEjD,QACE,oBAAC,QAAD;EACE,IAAI,SAAS;EACb,WAAW,GACT,oDACA,qBACE,qDACH;EAEA;EACI,CAAA;;AAIX,SAAS,OAAO,EACd,UACA,WACA,GAAG,SAC8B;CACjC,MAAM,UAAU,WAAW,kBAAkB;CAC7C,MAAM,oBAAoB,SAAS,cAAc;AAEjD,QACE,oBAAC,UAAD;EACE,GAAI;EACJ,MAAM,SAAS;EACf,WAAW,GACT,0EACA,qBACE,0GACF,UACD;EAEA;EACc,CAAA;;AAIrB,IAAa,aAAa,OAAO,OAAO,MAAM;CAC5C;CACA;CACA;CACA;CACD,CAAC"}
+{"version":3,"file":"input-ClB_E4Lb.js","names":[],"sources":["../src/components/input/input-area.tsx","../src/components/input/input-group.tsx"],"sourcesContent":["import { useCallback, type ReactNode } from \"react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Field as SFField, type FieldErrorMatch } from \"../field/field\";\nimport { inputVariants } from \"./input\";\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        <SFField\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        </SFField>\n      );\n    }\n\n    // Render bare textarea without Field wrapper\n    return textarea;\n  }\n);\n\nInputArea.displayName = \"InputArea\";\n\n/** Alias for InputArea — provided for discoverability when migrating from other libraries */\nexport const Textarea = InputArea;\n\n/**\n * InputArea component props\n * @property {ReactNode} [label] - Label content for the textarea (enables Field wrapper)\n * @property {ReactNode} [description] - Helper text displayed below the textarea\n * @property {string | { message: ReactNode, match: FieldErrorMatch }} [error] - Error message or validation error object\n */\nexport type InputAreaProps = {\n  onValueChange?: (value: string) => void;\n  variant?: \"default\" | \"error\";\n  size?: \"xs\" | \"sm\" | \"base\" | \"lg\";\n  // Then other custom props\n  children?: React.ReactNode;\n  className?: string;\n  /** Label content for the textarea (enables Field wrapper) - can be a string or any React node */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the textarea */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n\n  // Finally, spread the native input props (least important)\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\">;\n","import { type PropsWithChildren, useContext } from \"react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { type ButtonProps, Button as ButtonExternal } from \"../button/button\";\nimport {\n  Input as InputExternal,\n  type InputProps,\n  inputVariants,\n} from \"./input\";\n\nexport const SF_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 SF_INPUT_GROUP_DEFAULT_VARIANTS = {\n  focusMode: \"container\",\n} as const;\n\nexport type SFInputGroupFocusMode =\n  keyof typeof SF_INPUT_GROUP_VARIANTS.focusMode;\n\nexport interface SFInputGroupVariantsProps {\n  focusMode?: SFInputGroupFocusMode;\n}\n\ninterface InputGroupRootProps extends SFInputGroupVariantsProps {\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 = SF_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-sf-line focus-within:ring-sf-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-sf-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-sf-base font-sans\",\n        \"grow px-2\",\n        isIndividualFocus\n          ? \"relative ring ring-sf-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-10 focus:outline\"\n          : \"focus:border-sf-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-sf-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-sf-overlay disabled:text-sf-inactive!\",\n        isIndividualFocus &&\n          \"relative ring ring-sf-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"],"mappings":";;;;;;;;;AAOA,IAAa,YAAY,QAAM,YAC5B,OAAO,QAAQ;CACd,MAAM,EACJ,WACA,eACA,OAAO,QACP,UAAU,WACV,UACA,OACA,cACA,aACA,OACA,GAAG,eACD;CAGJ,MAAM,EAAE,aAAa;CACrB,MAAM,eAAe,aAClB,UAAkD;AACjD,aAAW,MAAM;AACjB,kBAAgB,MAAM,OAAO,MAAM;IAErC,CAAC,UAAU,cAAc,CAC1B;CAED,MAAM,WACJ,oBAAC,YAAD;EACO;EACL,WAAW,GACT,cAAc;GAAE;GAAM;GAAS,gBAAgB;GAAM,CAAC,EACtD,eACA,UACD;EACD,UAAU;EACV,GAAI;EACJ,CAAA;AAIJ,KAAI,MACF,QACE,oBAAC,OAAD;EACS;EACG;EACI;EACD;EACb,OACE,QACI,OAAO,UAAU,WACf;GAAE,SAAS;GAAO,OAAO;GAAM,GAC/B,QACF,KAAA;YAGL;EACO,CAAA;AAKd,QAAO;EAEV;AAED,UAAU,cAAc;;AAGxB,IAAa,WAAW;;;AClDxB,IAAa,kCAAkC,EAC7C,WAAW,aACZ;AAmBD,IAAM,oBAAoB,QAAM,cAC9B,KACD;AAED,SAAS,KAAK,EACZ,MACA,UACA,WACA,YAAY,gCAAgC,aACH;CACzC,MAAM,UAAU,QAAM,OAAO;CAC7B,MAAM,gBAAgB,QAAM,OAAO;CACnC,MAAM,eAAe,QAAM,eAClB;EAAE;EAAM;EAAS;EAAe;EAAW,GAClD;EAAC;EAAM;EAAS;EAAe;EAAU,CAC1C;CAED,MAAM,oBAAoB,cAAc;AAExC,QACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;YACjC,oBAAC,OAAD;GACE,WAAW,GACT,cAAc;IAAE;IAAM,sBAAsB,CAAC;IAAmB,CAAC,EACjE,mCACA,oBACI,qBACA,yEACJ,UACD;GAEA;GACG,CAAA;EACqB,CAAA;;AAIjC,SAAS,MAAM,EAAE,YAAmC;CAClD,MAAM,UAAU,WAAW,kBAAkB;CAC7C,MAAM,oBAAoB,SAAS,cAAc;AAEjD,QACE,oBAAC,SAAD;EACE,SAAS,SAAS;EAClB,WAAW,GACT,oDACA,qBACE,qDACH;EAEA;EACK,CAAA;;AAIZ,SAAS,MAAM,OAAmB;CAChC,MAAM,UAAU,WAAW,kBAAkB;CAC7C,MAAM,oBAAoB,SAAS,cAAc;AAEjD,QACE,oBAAC,SAAD;EACE,IAAI,SAAS;EACb,oBAAkB,SAAS;EAC3B,MAAM,SAAS;EACf,GAAI;EACJ,WAAW,GACT,uEACA,aACA,oBACI,2GACA,wBACJ,MAAM,UACP;EACD,CAAA;;AAIN,SAAS,YAAY,EAAE,YAAmC;CACxD,MAAM,UAAU,WAAW,kBAAkB;CAC7C,MAAM,oBAAoB,SAAS,cAAc;AAEjD,QACE,oBAAC,QAAD;EACE,IAAI,SAAS;EACb,WAAW,GACT,oDACA,qBACE,qDACH;EAEA;EACI,CAAA;;AAIX,SAAS,OAAO,EACd,UACA,WACA,GAAG,SAC8B;CACjC,MAAM,UAAU,WAAW,kBAAkB;CAC7C,MAAM,oBAAoB,SAAS,cAAc;AAEjD,QACE,oBAAC,UAAD;EACE,GAAI;EACJ,MAAM,SAAS;EACf,WAAW,GACT,0EACA,qBACE,0GACF,UACD;EAEA;EACc,CAAA;;AAIrB,IAAa,aAAa,OAAO,OAAO,MAAM;CAC5C;CACA;CACA;CACA;CACD,CAAC"}

package/dist/{label-QtJxtJ4u.js → label-DUv_urO1.js}

@@ -1,6 +1,6 @@
 "use client";
 import { t as cn } from "./cn-YROP2_ox.js";
-import { t as Tooltip } from "./tooltip-Cb7QW-7H.js";
+import { t as Tooltip } from "./tooltip-g9lFsvcT.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Info } from "@phosphor-icons/react";
 //#region src/components/label/label.tsx
@@ -67,4 +67,4 @@ Label.displayName = "Label";
 //#endregion
 export { labelVariants as a, labelContentVariants as i, SF_LABEL_DEFAULT_VARIANTS as n, SF_LABEL_VARIANTS as r, Label as t };
 
-//# sourceMappingURL=label-QtJxtJ4u.js.map
+//# sourceMappingURL=label-DUv_urO1.js.map

package/dist/{label-QtJxtJ4u.js.map → label-DUv_urO1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"label-QtJxtJ4u.js","names":[],"sources":["../src/components/label/label.tsx"],"sourcesContent":["import { Info } from \"@phosphor-icons/react\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Tooltip } from \"../tooltip\";\n\n/** Label variant definitions (currently empty, reserved for future additions). */\nexport const SF_LABEL_VARIANTS = {\n  // Label currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const SF_LABEL_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from SF_LABEL_VARIANTS\nexport interface SFLabelVariantsProps {}\n\nexport function labelVariants(_props: SFLabelVariantsProps = {}) {\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-sf-default\"\n  );\n}\n\nexport function labelContentVariants() {\n  return cn(\n    // Content wrapper styles - always applied\n    \"inline-flex items-center gap-1\"\n  );\n}\n\n/**\n * Label component props.\n *\n * @example\n * ```tsx\n * <Label>Email</Label>\n * <Label showOptional>Middle Name</Label>\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n * ```\n */\nexport interface LabelProps extends SFLabelVariantsProps {\n  /** The label content — can be a string or any React node. */\n  children: ReactNode;\n  /** When `true`, shows gray \"(optional)\" text after the label. */\n  showOptional?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  tooltip?: ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** The id of the form element this label is associated with */\n  htmlFor?: string;\n  /**\n   * When true, only renders the inline content (indicators, tooltip) without\n   * the outer label element with font styling. Useful when composed inside another\n   * label element that already provides the text styling.\n   * @default false\n   */\n  asContent?: boolean;\n}\n\n/**\n * Label component for form fields.\n *\n * Provides a standardized way to display labels with optional indicators:\n * - Optional indicator: gray \"(optional)\" text when `showOptional={true}`\n * - Tooltip: info icon with hover tooltip for additional context\n *\n * @example\n * // Basic label\n * <Label>Email</Label>\n *\n * @example\n * // Optional field with indicator\n * <Label showOptional>Middle Name</Label>\n *\n * @example\n * // With tooltip\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n *\n * @example\n * // With ReactNode children\n * <Label>\n *   <span>Custom label with <strong>bold</strong> text</span>\n * </Label>\n */\nexport function Label({\n  children,\n  showOptional = false,\n  tooltip,\n  className,\n  htmlFor,\n  asContent = false,\n}: LabelProps) {\n  const content = (\n    <>\n      {children}\n      {showOptional && (\n        <span className=\"font-normal text-sf-strong\">(optional)</span>\n      )}\n      {tooltip && (\n        <Tooltip content={tooltip}>\n          <Info\n            className=\"size-4 cursor-help text-sf-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, render as <label> for accessibility\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={cn(labelVariants(), labelContentVariants(), className)}\n    >\n      {content}\n    </label>\n  );\n}\n\nLabel.displayName = \"Label\";\n"],"mappings":";;;;;;;AAOA,IAAa,oBAAoB,EAEhC;AAED,IAAa,4BAA4B,EAAE;AAK3C,SAAgB,cAAc,SAA+B,EAAE,EAAE;AAC/D,QAAO,GAGL,wCACD;;AAGH,SAAgB,uBAAuB;AACrC,QAAO,GAEL,iCACD;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DH,SAAgB,MAAM,EACpB,UACA,eAAe,OACf,SACA,WACA,SACA,YAAY,SACC;CACb,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,gBACC,oBAAC,QAAD;GAAM,WAAU;aAA6B;GAAiB,CAAA;EAE/D,WACC,oBAAC,SAAD;GAAS,SAAS;aAChB,oBAAC,MAAD;IACE,WAAU;IACV,cAAW;IACX,CAAA;GACM,CAAA;EAEX,EAAA,CAAA;AAIL,KAAI,UACF,QACE,oBAAC,QAAD;EAAM,WAAW,GAAG,sBAAsB,EAAE,UAAU;YAAG;EAAe,CAAA;AAK5E,QACE,oBAAC,SAAD;EACW;EACT,WAAW,GAAG,eAAe,EAAE,sBAAsB,EAAE,UAAU;YAEhE;EACK,CAAA;;AAIZ,MAAM,cAAc"}
+{"version":3,"file":"label-DUv_urO1.js","names":[],"sources":["../src/components/label/label.tsx"],"sourcesContent":["import { Info } from \"@phosphor-icons/react\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Tooltip } from \"../tooltip\";\n\n/** Label variant definitions (currently empty, reserved for future additions). */\nexport const SF_LABEL_VARIANTS = {\n  // Label currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const SF_LABEL_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from SF_LABEL_VARIANTS\nexport interface SFLabelVariantsProps {}\n\nexport function labelVariants(_props: SFLabelVariantsProps = {}) {\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-sf-default\"\n  );\n}\n\nexport function labelContentVariants() {\n  return cn(\n    // Content wrapper styles - always applied\n    \"inline-flex items-center gap-1\"\n  );\n}\n\n/**\n * Label component props.\n *\n * @example\n * ```tsx\n * <Label>Email</Label>\n * <Label showOptional>Middle Name</Label>\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n * ```\n */\nexport interface LabelProps extends SFLabelVariantsProps {\n  /** The label content — can be a string or any React node. */\n  children: ReactNode;\n  /** When `true`, shows gray \"(optional)\" text after the label. */\n  showOptional?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  tooltip?: ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** The id of the form element this label is associated with */\n  htmlFor?: string;\n  /**\n   * When true, only renders the inline content (indicators, tooltip) without\n   * the outer label element with font styling. Useful when composed inside another\n   * label element that already provides the text styling.\n   * @default false\n   */\n  asContent?: boolean;\n}\n\n/**\n * Label component for form fields.\n *\n * Provides a standardized way to display labels with optional indicators:\n * - Optional indicator: gray \"(optional)\" text when `showOptional={true}`\n * - Tooltip: info icon with hover tooltip for additional context\n *\n * @example\n * // Basic label\n * <Label>Email</Label>\n *\n * @example\n * // Optional field with indicator\n * <Label showOptional>Middle Name</Label>\n *\n * @example\n * // With tooltip\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n *\n * @example\n * // With ReactNode children\n * <Label>\n *   <span>Custom label with <strong>bold</strong> text</span>\n * </Label>\n */\nexport function Label({\n  children,\n  showOptional = false,\n  tooltip,\n  className,\n  htmlFor,\n  asContent = false,\n}: LabelProps) {\n  const content = (\n    <>\n      {children}\n      {showOptional && (\n        <span className=\"font-normal text-sf-strong\">(optional)</span>\n      )}\n      {tooltip && (\n        <Tooltip content={tooltip}>\n          <Info\n            className=\"size-4 cursor-help text-sf-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, render as <label> for accessibility\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={cn(labelVariants(), labelContentVariants(), className)}\n    >\n      {content}\n    </label>\n  );\n}\n\nLabel.displayName = \"Label\";\n"],"mappings":";;;;;;;AAOA,IAAa,oBAAoB,EAEhC;AAED,IAAa,4BAA4B,EAAE;AAK3C,SAAgB,cAAc,SAA+B,EAAE,EAAE;AAC/D,QAAO,GAGL,wCACD;;AAGH,SAAgB,uBAAuB;AACrC,QAAO,GAEL,iCACD;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DH,SAAgB,MAAM,EACpB,UACA,eAAe,OACf,SACA,WACA,SACA,YAAY,SACC;CACb,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,gBACC,oBAAC,QAAD;GAAM,WAAU;aAA6B;GAAiB,CAAA;EAE/D,WACC,oBAAC,SAAD;GAAS,SAAS;aAChB,oBAAC,MAAD;IACE,WAAU;IACV,cAAW;IACX,CAAA;GACM,CAAA;EAEX,EAAA,CAAA;AAIL,KAAI,UACF,QACE,oBAAC,QAAD;EAAM,WAAW,GAAG,sBAAsB,EAAE,UAAU;YAAG;EAAe,CAAA;AAK5E,QACE,oBAAC,SAAD;EACW;EACT,WAAW,GAAG,eAAe,EAAE,sBAAsB,EAAE,UAAU;YAEhE;EACK,CAAA;;AAIZ,MAAM,cAAc"}

package/dist/{layer-card-BME0eljh.js → layer-card-BK7eYfwn.js}

@@ -41,4 +41,4 @@ var LayerCard = Object.assign(LayerCardRoot, {
 //#endregion
 export { LayerCard as t };
 
-//# sourceMappingURL=layer-card-BME0eljh.js.map
+//# sourceMappingURL=layer-card-BK7eYfwn.js.map

package/dist/{layer-card-BME0eljh.js.map → layer-card-BK7eYfwn.js.map}

@@ -1 +1 @@
-{"version":3,"file":"layer-card-BME0eljh.js","names":[],"sources":["../src/components/layer-card/layer-card.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** LayerCard variant definitions (currently empty, reserved for future additions). */\nexport const SF_LAYER_CARD_VARIANTS = {\n  // LayerCard currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const SF_LAYER_CARD_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from SF_LAYER_CARD_VARIANTS\nexport interface SFLayerCardVariantsProps {}\n\nexport function layerCardVariants(_props: SFLayerCardVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-full flex-col overflow-hidden rounded-lg bg-sf-base text-base ring ring-sf-line\"\n  );\n}\n\n/**\n * LayerCard component props.\n *\n * @example\n * ```tsx\n * <LayerCard>\n *   <LayerCard.Secondary>Next Steps</LayerCard.Secondary>\n *   <LayerCard.Primary>Get started with SignalFlare</LayerCard.Primary>\n * </LayerCard>\n * ```\n */\nexport type LayerCardProps = PropsWithChildren<\n  SFLayerCardVariantsProps & {\n    /** Additional CSS classes merged via `cn()`. */\n    className?: string;\n  }\n>;\n\n/**\n * Elevated card with primary/secondary content layers for dashboard widgets.\n *\n * @example\n * ```tsx\n * <LayerCard>\n *   <LayerCard.Secondary>Getting Started</LayerCard.Secondary>\n *   <LayerCard.Primary>Quick start guide</LayerCard.Primary>\n * </LayerCard>\n * ```\n */\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-sf-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-sf-elevated p-4 pr-3 text-inherit no-underline ring ring-sf-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"],"mappings":";;;;AAcA,SAAgB,kBAAkB,SAAmC,EAAE,EAAE;AACvE,QAAO,GAEL,yFACD;;;;;;;;;;;;;AAgCH,SAAS,cAAc,EAAE,UAAU,aAA6B;AAC9D,QAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,mBAAmB,EAAE,UAAU;EAAG;EAAe,CAAA;;AAG7E,SAAS,mBAAmB,EAAE,UAAU,aAA6B;AACnE,QACE,oBAAC,OAAD;EACE,WAAW,GACT,oEACA,UACD;EAEA;EACG,CAAA;;AAIV,SAAS,iBAAiB,EAAE,UAAU,aAA6B;AACjE,QACE,oBAAC,OAAD;EACE,WAAW,GACT,sHACA,UACD;EAEA;EACG,CAAA;;AASV,IAAM,YAAY,OAAO,OAAO,eAAe;CAC7C,SAAS;CACT,WAAW;CACZ,CAAC"}
+{"version":3,"file":"layer-card-BK7eYfwn.js","names":[],"sources":["../src/components/layer-card/layer-card.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** LayerCard variant definitions (currently empty, reserved for future additions). */\nexport const SF_LAYER_CARD_VARIANTS = {\n  // LayerCard currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const SF_LAYER_CARD_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from SF_LAYER_CARD_VARIANTS\nexport interface SFLayerCardVariantsProps {}\n\nexport function layerCardVariants(_props: SFLayerCardVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-full flex-col overflow-hidden rounded-lg bg-sf-base text-base ring ring-sf-line\"\n  );\n}\n\n/**\n * LayerCard component props.\n *\n * @example\n * ```tsx\n * <LayerCard>\n *   <LayerCard.Secondary>Next Steps</LayerCard.Secondary>\n *   <LayerCard.Primary>Get started with SignalFlare</LayerCard.Primary>\n * </LayerCard>\n * ```\n */\nexport type LayerCardProps = PropsWithChildren<\n  SFLayerCardVariantsProps & {\n    /** Additional CSS classes merged via `cn()`. */\n    className?: string;\n  }\n>;\n\n/**\n * Elevated card with primary/secondary content layers for dashboard widgets.\n *\n * @example\n * ```tsx\n * <LayerCard>\n *   <LayerCard.Secondary>Getting Started</LayerCard.Secondary>\n *   <LayerCard.Primary>Quick start guide</LayerCard.Primary>\n * </LayerCard>\n * ```\n */\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-sf-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-sf-elevated p-4 pr-3 text-inherit no-underline ring ring-sf-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"],"mappings":";;;;AAcA,SAAgB,kBAAkB,SAAmC,EAAE,EAAE;AACvE,QAAO,GAEL,yFACD;;;;;;;;;;;;;AAgCH,SAAS,cAAc,EAAE,UAAU,aAA6B;AAC9D,QAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,mBAAmB,EAAE,UAAU;EAAG;EAAe,CAAA;;AAG7E,SAAS,mBAAmB,EAAE,UAAU,aAA6B;AACnE,QACE,oBAAC,OAAD;EACE,WAAW,GACT,oEACA,UACD;EAEA;EACG,CAAA;;AAIV,SAAS,iBAAiB,EAAE,UAAU,aAA6B;AACjE,QACE,oBAAC,OAAD;EACE,WAAW,GACT,sHACA,UACD;EAEA;EACG,CAAA;;AASV,IAAM,YAAY,OAAO,OAAO,eAAe;CAC7C,SAAS;CACT,WAAW;CACZ,CAAC"}