@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/forms/multi-select/multi-select.js

@@ -0,0 +1,259 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { Icon } from "../../system/icon/icon.js";
+import { getIconPixels, chipSizes, interactiveSizes } from "../../../theme/size-tokens.js";
+function MultiSelect({
+  options,
+  value = [],
+  onChange,
+  placeholder = "Select options...",
+  noneFoundText = "No options found",
+  disabled = false,
+  maxSelections,
+  size = "md",
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const containerRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const selectedValues = value || [];
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setSearchQuery("");
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return void 0;
+  }, [isOpen]);
+  useEffect(() => {
+    if (isOpen && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isOpen]);
+  const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
+  const handleToggleOption = (optionValue) => {
+    const isSelected = selectedValues.includes(optionValue);
+    let newValues;
+    if (isSelected) {
+      newValues = selectedValues.filter((v) => v !== optionValue);
+    } else {
+      if (maxSelections && selectedValues.length >= maxSelections) {
+        return;
+      }
+      newValues = [...selectedValues, optionValue];
+    }
+    onChange?.(newValues);
+  };
+  const handleRemoveValue = (valueToRemove, e) => {
+    e.stopPropagation();
+    const newValues = selectedValues.filter((v) => v !== valueToRemove);
+    onChange?.(newValues);
+  };
+  const handleClearAll = (e) => {
+    e.stopPropagation();
+    onChange?.([]);
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "Enter":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+        } else if (focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+          handleToggleOption(filteredOptions[focusedIndex].value);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setIsOpen(false);
+        setSearchQuery("");
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+        } else {
+          setFocusedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev);
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setFocusedIndex((prev) => prev > 0 ? prev - 1 : 0);
+        break;
+    }
+  };
+  const sizeClasses = {
+    xs: {
+      container: interactiveSizes.xs.height.split(" ")[0].replace("h-", "min-h-") + " py-0.5 px-1.5",
+      text: interactiveSizes.xs.text,
+      chip: chipSizes.sm.classes.split(" ").filter((c) => !c.includes("gap")).join(" "),
+      icon: getIconPixels("xs", "desktop")
+    },
+    sm: {
+      container: interactiveSizes.sm.height.split(" ")[0].replace("h-", "min-h-") + " py-1 px-2",
+      text: interactiveSizes.sm.text,
+      chip: chipSizes.sm.classes.split(" ").filter((c) => !c.includes("gap")).join(" "),
+      icon: getIconPixels("sm", "desktop")
+    },
+    md: {
+      container: interactiveSizes.md.height.split(" ")[0].replace("h-", "min-h-") + " py-2 px-3",
+      text: interactiveSizes.md.text,
+      chip: chipSizes.md.classes.split(" ").filter((c) => !c.includes("gap")).join(" "),
+      icon: getIconPixels("md", "desktop")
+    },
+    lg: {
+      container: interactiveSizes.lg.height.split(" ")[0].replace("h-", "min-h-") + " py-2 px-4",
+      text: interactiveSizes.lg.text,
+      chip: chipSizes.lg.classes.split(" ").filter((c) => !c.includes("gap")).join(" "),
+      icon: getIconPixels("lg", "desktop")
+    },
+    xl: {
+      container: interactiveSizes.xl.height.split(" ")[0].replace("h-", "min-h-") + " py-2.5 px-5",
+      text: interactiveSizes.xl.text,
+      chip: chipSizes.lg.classes.split(" ").filter((c) => !c.includes("gap")).join(" "),
+      icon: getIconPixels("xl", "desktop")
+    }
+  };
+  const currentSize = sizeClasses[size];
+  const getSelectedLabels = () => {
+    return selectedValues.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean);
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `relative w-full ${className}`, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `
+          w-full flex flex-wrap items-center gap-1.5
+          border border-input rounded-md
+          bg-background text-foreground
+          cursor-pointer
+          transition-all duration-200
+          ${currentSize.container}
+          ${currentSize.text}
+          ${isOpen ? "ring-2 ring-ring ring-offset-2" : "hover:border-ring"}
+          ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+        `.trim(),
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        onKeyDown: handleKeyDown,
+        tabIndex: disabled ? -1 : 0,
+        role: "button",
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        "aria-label": "Multi-select",
+        children: [
+          selectedValues.length > 0 ? /* @__PURE__ */ jsx(Fragment, { children: getSelectedLabels().map((label, index) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: `
+                  inline-flex items-center gap-1 
+                  bg-primary/10 text-primary rounded-md font-medium 
+                  animate-scaleIn origin-left
+                  transition-all duration-200
+                  ${currentSize.chip}
+                `.trim(),
+              children: [
+                label,
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => handleRemoveValue(selectedValues[index], e),
+                    className: "hover:bg-primary/20 rounded-sm transition-colors duration-150",
+                    "aria-label": `Remove ${label}`,
+                    tabIndex: -1,
+                    children: /* @__PURE__ */ jsx(Icon, { name: "x", size })
+                  }
+                )
+              ]
+            },
+            selectedValues[index]
+          )) }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-auto shrink-0", children: [
+            selectedValues.length > 0 && !disabled && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleClearAll,
+                className: "p-1 hover:bg-muted rounded transition-colors",
+                "aria-label": "Clear all",
+                tabIndex: -1,
+                children: /* @__PURE__ */ jsx(Icon, { name: "x", size })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "chevron-down",
+                size,
+                className: `text-muted-foreground transition-transform ${isOpen ? "rotate-180" : ""}`
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    isOpen && !disabled && /* @__PURE__ */ jsxs("div", { className: "absolute top-full left-0 right-0 mt-2 z-50 bg-card border border-border rounded-md shadow-lg max-h-64 overflow-hidden flex flex-col animate-scaleIn origin-top", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-2 border-b border-border", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: searchInputRef,
+          type: "text",
+          value: searchQuery,
+          onChange: (e) => {
+            setSearchQuery(e.target.value);
+            setFocusedIndex(-1);
+          },
+          placeholder: "Search...",
+          className: `w-full px-3 py-1.5 ${currentSize.text} border border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring`,
+          onClick: (e) => e.stopPropagation()
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "overflow-y-auto", role: "listbox", children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
+        const isSelected = selectedValues.includes(option.value);
+        const isFocused = index === focusedIndex;
+        const isDisabled = Boolean(maxSelections && !isSelected && selectedValues.length >= maxSelections);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => !isDisabled && handleToggleOption(option.value),
+            className: `
+                      w-full px-3 py-2 flex items-center justify-between gap-2
+                      transition-all duration-200 text-left ${currentSize.text}
+                      ${isFocused ? "bg-muted" : ""}
+                      ${isSelected ? "bg-primary/10 text-primary font-medium" : "hover:bg-muted"}
+                      ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}
+                    `.trim(),
+            role: "option",
+            "aria-selected": isSelected,
+            disabled: isDisabled,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: option.label }),
+              isSelected && /* @__PURE__ */ jsx(Icon, { name: "check", size, className: "shrink-0 animate-scaleIn" })
+            ]
+          },
+          option.value
+        );
+      }) : /* @__PURE__ */ jsx("div", { className: "px-3 py-6 text-center text-muted-foreground", children: noneFoundText }) }),
+      maxSelections && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 border-t border-border bg-muted/30 text-xs text-muted-foreground", children: [
+        selectedValues.length,
+        " / ",
+        maxSelections,
+        " selected"
+      ] })
+    ] })
+  ] });
+}
+MultiSelect.displayName = "MultiSelect";
+export {
+  MultiSelect as default
+};
+//# sourceMappingURL=multi-select.js.map

package/dist/components/forms/multi-select/multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.js","sources":["../../../../src/components/forms/multi-select/multi-select.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'react';\nimport Icon from '../../system/icon/icon';\nimport { interactiveSizes, chipSizes, getIconPixels, type InteractiveSize } from '../../../theme/size-tokens';\n\nexport type MultiSelectOption = {\n  value: string;\n  label: string;\n};\n\nexport type MultiSelectProps = {\n  /**\n   * Available options to select from\n   */\n  options: MultiSelectOption[];\n  /**\n   * Currently selected values\n   */\n  value?: string[];\n  /**\n   * Callback when selection changes\n   */\n  onChange?: (values: string[]) => void;\n  /**\n   * Placeholder text when no selection\n   */\n  placeholder?: string;\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Maximum number of selections allowed\n   */\n  maxSelections?: number;\n  /**\n   * Size variant - uses unified size system\n   */\n  size?: InteractiveSize;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n  /**\n   * Text to display when no options are found\n   */\n  noneFoundText?: string;\n};\n\n/**\n * MultiSelect - Select multiple options from a dropdown list\n *\n * Features:\n * - Multiple selections with chips\n * - Searchable dropdown\n * - Keyboard navigation\n * - Max selections limit\n * - Clearable\n * - Accessible\n *\n * @example\n * ```tsx\n * const [selected, setSelected] = useState<string[]>([]);\n *\n * <MultiSelect\n *   options={[\n *     { value: '1', label: 'Option 1' },\n *     { value: '2', label: 'Option 2' }\n *   ]}\n *   value={selected}\n *   onChange={setSelected}\n *   placeholder=\"Select options...\"\n * />\n * ```\n */\nfunction MultiSelect({\n  options,\n  value = [],\n  onChange,\n  placeholder = 'Select options...',\n  noneFoundText = 'No options found',\n  disabled = false,\n  maxSelections,\n  size = 'md',\n  className = ''\n}: Readonly<MultiSelectProps>) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  const selectedValues = value || [];\n\n  // Close on click outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n        setSearchQuery('');\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => document.removeEventListener('mousedown', handleClickOutside);\n    }\n    return undefined;\n  }, [isOpen]);\n\n  // Focus search input when opened\n  useEffect(() => {\n    if (isOpen && searchInputRef.current) {\n      searchInputRef.current.focus();\n    }\n  }, [isOpen]);\n\n  const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()));\n\n  const handleToggleOption = (optionValue: string) => {\n    const isSelected = selectedValues.includes(optionValue);\n    let newValues: string[];\n\n    if (isSelected) {\n      newValues = selectedValues.filter((v) => v !== optionValue);\n    } else {\n      if (maxSelections && selectedValues.length >= maxSelections) {\n        return; // Don't add if max reached\n      }\n      newValues = [...selectedValues, optionValue];\n    }\n\n    onChange?.(newValues);\n  };\n\n  const handleRemoveValue = (valueToRemove: string, e: React.MouseEvent) => {\n    e.stopPropagation();\n    const newValues = selectedValues.filter((v) => v !== valueToRemove);\n    onChange?.(newValues);\n  };\n\n  const handleClearAll = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange?.([]);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (disabled) return;\n\n    switch (e.key) {\n      case 'Enter':\n        e.preventDefault();\n        if (!isOpen) {\n          setIsOpen(true);\n        } else if (focusedIndex >= 0 && focusedIndex < filteredOptions.length) {\n          handleToggleOption(filteredOptions[focusedIndex].value);\n        }\n        break;\n      case 'Escape':\n        e.preventDefault();\n        setIsOpen(false);\n        setSearchQuery('');\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!isOpen) {\n          setIsOpen(true);\n        } else {\n          setFocusedIndex((prev) => (prev < filteredOptions.length - 1 ? prev + 1 : prev));\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        setFocusedIndex((prev) => (prev > 0 ? prev - 1 : 0));\n        break;\n    }\n  };\n\n  const sizeClasses = {\n    xs: {\n      container: interactiveSizes.xs.height.split(' ')[0].replace('h-', 'min-h-') + ' py-0.5 px-1.5',\n      text: interactiveSizes.xs.text,\n      chip: chipSizes.sm.classes\n        .split(' ')\n        .filter((c) => !c.includes('gap'))\n        .join(' '),\n      icon: getIconPixels('xs', 'desktop')\n    },\n    sm: {\n      container: interactiveSizes.sm.height.split(' ')[0].replace('h-', 'min-h-') + ' py-1 px-2',\n      text: interactiveSizes.sm.text,\n      chip: chipSizes.sm.classes\n        .split(' ')\n        .filter((c) => !c.includes('gap'))\n        .join(' '),\n      icon: getIconPixels('sm', 'desktop')\n    },\n    md: {\n      container: interactiveSizes.md.height.split(' ')[0].replace('h-', 'min-h-') + ' py-2 px-3',\n      text: interactiveSizes.md.text,\n      chip: chipSizes.md.classes\n        .split(' ')\n        .filter((c) => !c.includes('gap'))\n        .join(' '),\n      icon: getIconPixels('md', 'desktop')\n    },\n    lg: {\n      container: interactiveSizes.lg.height.split(' ')[0].replace('h-', 'min-h-') + ' py-2 px-4',\n      text: interactiveSizes.lg.text,\n      chip: chipSizes.lg.classes\n        .split(' ')\n        .filter((c) => !c.includes('gap'))\n        .join(' '),\n      icon: getIconPixels('lg', 'desktop')\n    },\n    xl: {\n      container: interactiveSizes.xl.height.split(' ')[0].replace('h-', 'min-h-') + ' py-2.5 px-5',\n      text: interactiveSizes.xl.text,\n      chip: chipSizes.lg.classes\n        .split(' ')\n        .filter((c) => !c.includes('gap'))\n        .join(' '),\n      icon: getIconPixels('xl', 'desktop')\n    }\n  };\n\n  const currentSize = sizeClasses[size];\n\n  const getSelectedLabels = () => {\n    return selectedValues.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean);\n  };\n\n  return (\n    <div ref={containerRef} className={`relative w-full ${className}`}>\n      {/* Trigger */}\n      <div\n        className={`\n          w-full flex flex-wrap items-center gap-1.5\n          border border-input rounded-md\n          bg-background text-foreground\n          cursor-pointer\n          transition-all duration-200\n          ${currentSize.container}\n          ${currentSize.text}\n          ${isOpen ? 'ring-2 ring-ring ring-offset-2' : 'hover:border-ring'}\n          ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n        `.trim()}\n        onClick={() => !disabled && setIsOpen(!isOpen)}\n        onKeyDown={handleKeyDown}\n        tabIndex={disabled ? -1 : 0}\n        role=\"button\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n        aria-label=\"Multi-select\"\n      >\n        {/* Selected items as chips */}\n        {selectedValues.length > 0 ? (\n          <>\n            {getSelectedLabels().map((label, index) => (\n              <span\n                key={selectedValues[index]}\n                className={`\n                  inline-flex items-center gap-1 \n                  bg-primary/10 text-primary rounded-md font-medium \n                  animate-scaleIn origin-left\n                  transition-all duration-200\n                  ${currentSize.chip}\n                `.trim()}\n              >\n                {label}\n                <button\n                  type=\"button\"\n                  onClick={(e) => handleRemoveValue(selectedValues[index], e)}\n                  className=\"hover:bg-primary/20 rounded-sm transition-colors duration-150\"\n                  aria-label={`Remove ${label}`}\n                  tabIndex={-1}\n                >\n                  <Icon name=\"x\" size={size} />\n                </button>\n              </span>\n            ))}\n          </>\n        ) : (\n          <span className=\"text-muted-foreground\">{placeholder}</span>\n        )}\n\n        {/* Right side icons */}\n        <div className=\"flex items-center gap-1 ml-auto shrink-0\">\n          {selectedValues.length > 0 && !disabled && (\n            <button\n              type=\"button\"\n              onClick={handleClearAll}\n              className=\"p-1 hover:bg-muted rounded transition-colors\"\n              aria-label=\"Clear all\"\n              tabIndex={-1}\n            >\n              <Icon name=\"x\" size={size} />\n            </button>\n          )}\n          <Icon\n            name=\"chevron-down\"\n            size={size}\n            className={`text-muted-foreground transition-transform ${isOpen ? 'rotate-180' : ''}`}\n          />\n        </div>\n      </div>\n\n      {/* Dropdown */}\n      {isOpen && !disabled && (\n        <div className=\"absolute top-full left-0 right-0 mt-2 z-50 bg-card border border-border rounded-md shadow-lg max-h-64 overflow-hidden flex flex-col animate-scaleIn origin-top\">\n          {/* Search input */}\n          <div className=\"p-2 border-b border-border\">\n            <input\n              ref={searchInputRef}\n              type=\"text\"\n              value={searchQuery}\n              onChange={(e) => {\n                setSearchQuery(e.target.value);\n                setFocusedIndex(-1);\n              }}\n              placeholder=\"Search...\"\n              className={`w-full px-3 py-1.5 ${currentSize.text} border border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring`}\n              onClick={(e) => e.stopPropagation()}\n            />\n          </div>\n\n          {/* Options list */}\n          <div className=\"overflow-y-auto\" role=\"listbox\">\n            {filteredOptions.length > 0 ? (\n              filteredOptions.map((option, index) => {\n                const isSelected = selectedValues.includes(option.value);\n                const isFocused = index === focusedIndex;\n                const isDisabled = Boolean(maxSelections && !isSelected && selectedValues.length >= maxSelections);\n\n                return (\n                  <button\n                    key={option.value}\n                    type=\"button\"\n                    onClick={() => !isDisabled && handleToggleOption(option.value)}\n                    className={`\n                      w-full px-3 py-2 flex items-center justify-between gap-2\n                      transition-all duration-200 text-left ${currentSize.text}\n                      ${isFocused ? 'bg-muted' : ''}\n                      ${isSelected ? 'bg-primary/10 text-primary font-medium' : 'hover:bg-muted'}\n                      ${isDisabled ? 'opacity-50 cursor-not-allowed' : ''}\n                    `.trim()}\n                    role=\"option\"\n                    aria-selected={isSelected}\n                    disabled={isDisabled}\n                  >\n                    <span className=\"flex-1 truncate\">{option.label}</span>\n                    {isSelected && <Icon name=\"check\" size={size} className=\"shrink-0 animate-scaleIn\" />}\n                  </button>\n                );\n              })\n            ) : (\n              <div className=\"px-3 py-6 text-center text-muted-foreground\">{noneFoundText}</div>\n            )}\n          </div>\n\n          {/* Footer info */}\n          {maxSelections && (\n            <div className=\"px-3 py-2 border-t border-border bg-muted/30 text-xs text-muted-foreground\">\n              {selectedValues.length} / {maxSelections} selected\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nMultiSelect.displayName = 'MultiSelect';\n\nexport default MultiSelect;\n"],"names":[],"mappings":"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"}

package/dist/components/forms/radio/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './radio';
+export type { RadioProps } from './radio';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/forms/radio/radio.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+export type ValidationState = 'default' | 'error' | 'success' | 'warning';
+export type RadioProps = {
+    /** Controlled checked state - overridden by RadioGroup context if present */
+    checked?: boolean;
+    /** Change event handler - called in addition to RadioGroup onChange if both are provided */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Disables radio interaction and applies disabled styling */
+    disabled?: boolean;
+    /** Additional CSS classes applied to the radio button indicator */
+    className?: string;
+    /** Accessible label for screen readers when visual label is not present */
+    ariaLabel?: string;
+    /** HTML id attribute - auto-generated if not provided */
+    id?: string;
+    /** Form input name - overridden by RadioGroup context if present */
+    name?: string;
+    /** Input value submitted with form - required when used in RadioGroup */
+    value?: string;
+    /** Visual validation state affecting border and ring colors */
+    validationState?: ValidationState;
+};
+/**
+ * Accessible Radio component
+ */
+declare function Radio({ checked, onChange, disabled, className, ariaLabel, id, name: nameProp, value, validationState }: Readonly<RadioProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Radio {
+    var displayName: string;
+}
+export default Radio;
+//# sourceMappingURL=radio.d.ts.map

package/dist/components/forms/radio/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio/radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAGrC,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAE1E,MAAM,MAAM,UAAU,GAAG;IACvB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC,CAAC;AAEF;;GAEG;AACH,iBAAS,KAAK,CAAC,EACb,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,SAAc,EACd,SAAS,EACT,EAAE,EACF,IAAI,EAAE,QAAQ,EACd,KAAK,EACL,eAA2B,EAC5B,EAAE,QAAQ,CAAC,UAAU,CAAC,2CAwDtB;kBAlEQ,KAAK;;;AAsEd,eAAe,KAAK,CAAC"}

package/dist/components/forms/radio/radio.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { useRadioGroup } from "../radio-group/radio-group.js";
+function Radio({
+  checked,
+  onChange,
+  disabled = false,
+  className = "",
+  ariaLabel,
+  id,
+  name: nameProp,
+  value,
+  validationState = "default"
+}) {
+  const radioGroup = useRadioGroup();
+  const name = radioGroup?.name || nameProp;
+  const isChecked = radioGroup?.value !== void 0 ? radioGroup.value === value : checked;
+  const handleChange = (e) => {
+    if (radioGroup?.onChange && value) {
+      radioGroup.onChange(value);
+    }
+    onChange?.(e);
+  };
+  const validationClasses = {
+    default: "border-input focus:ring-ring",
+    error: "border-error focus:ring-error",
+    success: "border-success focus:ring-success",
+    warning: "border-warning focus:ring-warning"
+  };
+  const generatedId = useId();
+  const inputId = id || `radio-${value || generatedId}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `inline-flex items-center justify-center relative ${disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            checked: isChecked,
+            onChange: handleChange,
+            disabled,
+            "aria-label": ariaLabel,
+            "aria-invalid": validationState === "error" ? "true" : void 0,
+            id: inputId,
+            name,
+            value,
+            className: "peer sr-only"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            onClick: () => !disabled && document.getElementById(inputId)?.click(),
+            className: `w-6 h-6 sm:w-5 sm:h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200 ease-out bg-background shadow-sm
+        before:content-[''] before:w-3 before:h-3 sm:before:w-2.5 sm:before:h-2.5 before:rounded-full before:scale-0 before:transition-transform before:duration-200 before:ease-out before:bg-primary
+        peer-checked:before:scale-100 peer-checked:border-primary
+        peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-ring
+        peer-disabled:opacity-50 peer-disabled:cursor-not-allowed
+        peer-hover:border-primary/60 peer-active:scale-95
+        ${validationClasses[validationState]} ${className}`
+          }
+        )
+      ]
+    }
+  );
+}
+Radio.displayName = "Radio";
+export {
+  Radio as default
+};
+//# sourceMappingURL=radio.js.map

package/dist/components/forms/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":["../../../../src/components/forms/radio/radio.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport { useRadioGroup } from '../radio-group/radio-group';\n\nexport type ValidationState = 'default' | 'error' | 'success' | 'warning';\n\nexport type RadioProps = {\n  /** Controlled checked state - overridden by RadioGroup context if present */\n  checked?: boolean;\n  /** Change event handler - called in addition to RadioGroup onChange if both are provided */\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Disables radio interaction and applies disabled styling */\n  disabled?: boolean;\n  /** Additional CSS classes applied to the radio button indicator */\n  className?: string;\n  /** Accessible label for screen readers when visual label is not present */\n  ariaLabel?: string;\n  /** HTML id attribute - auto-generated if not provided */\n  id?: string;\n  /** Form input name - overridden by RadioGroup context if present */\n  name?: string;\n  /** Input value submitted with form - required when used in RadioGroup */\n  value?: string;\n  /** Visual validation state affecting border and ring colors */\n  validationState?: ValidationState;\n};\n\n/**\n * Accessible Radio component\n */\nfunction Radio({\n  checked,\n  onChange,\n  disabled = false,\n  className = '',\n  ariaLabel,\n  id,\n  name: nameProp,\n  value,\n  validationState = 'default'\n}: Readonly<RadioProps>) {\n  const radioGroup = useRadioGroup();\n\n  // Use name from RadioGroup context if available, otherwise use prop\n  const name = radioGroup?.name || nameProp;\n\n  // Use checked state from RadioGroup if available\n  const isChecked = radioGroup?.value !== undefined ? radioGroup.value === value : checked;\n\n  // Handle change with RadioGroup callback if available\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (radioGroup?.onChange && value) {\n      radioGroup.onChange(value);\n    }\n    onChange?.(e);\n  };\n\n  const validationClasses = {\n    default: 'border-input focus:ring-ring',\n    error: 'border-error focus:ring-error',\n    success: 'border-success focus:ring-success',\n    warning: 'border-warning focus:ring-warning'\n  };\n\n  const generatedId = useId();\n  const inputId = id || `radio-${value || generatedId}`;\n\n  return (\n    <div\n      className={`inline-flex items-center justify-center relative ${disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'}`}\n    >\n      <input\n        type=\"radio\"\n        checked={isChecked}\n        onChange={handleChange}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-invalid={validationState === 'error' ? 'true' : undefined}\n        id={inputId}\n        name={name}\n        value={value}\n        className=\"peer sr-only\"\n      />\n      <span\n        aria-hidden=\"true\"\n        onClick={() => !disabled && document.getElementById(inputId)?.click()}\n        className={`w-6 h-6 sm:w-5 sm:h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200 ease-out bg-background shadow-sm\n        before:content-[''] before:w-3 before:h-3 sm:before:w-2.5 sm:before:h-2.5 before:rounded-full before:scale-0 before:transition-transform before:duration-200 before:ease-out before:bg-primary\n        peer-checked:before:scale-100 peer-checked:border-primary\n        peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-ring\n        peer-disabled:opacity-50 peer-disabled:cursor-not-allowed\n        peer-hover:border-primary/60 peer-active:scale-95\n        ${validationClasses[validationState]} ${className}`}\n      />\n    </div>\n  );\n}\n\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"names":[],"mappings":";;;AA6BA,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA,kBAAkB;AACpB,GAAyB;AACvB,QAAM,aAAa,cAAA;AAGnB,QAAM,OAAO,YAAY,QAAQ;AAGjC,QAAM,YAAY,YAAY,UAAU,SAAY,WAAW,UAAU,QAAQ;AAGjF,QAAM,eAAe,CAAC,MAA2C;AAC/D,QAAI,YAAY,YAAY,OAAO;AACjC,iBAAW,SAAS,KAAK;AAAA,IAC3B;AACA,eAAW,CAAC;AAAA,EACd;AAEA,QAAM,oBAAoB;AAAA,IACxB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAGX,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,MAAM,SAAS,SAAS,WAAW;AAEnD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,oDAAoD,WAAW,kCAAkC,gBAAgB;AAAA,MAE5H,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,UAAU;AAAA,YACV;AAAA,YACA,cAAY;AAAA,YACZ,gBAAc,oBAAoB,UAAU,SAAS;AAAA,YACrD,IAAI;AAAA,YACJ;AAAA,YACA;AAAA,YACA,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,SAAS,MAAM,CAAC,YAAY,SAAS,eAAe,OAAO,GAAG,MAAA;AAAA,YAC9D,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMT,kBAAkB,eAAe,CAAC,IAAI,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACnD;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,MAAM,cAAc;"}

package/dist/components/forms/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+export { default, useRadioGroup } from './radio-group';
+export type { RadioGroupProps } from './radio-group';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/radio-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/forms/radio-group/radio-group.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+export type RadioGroupProps = {
+    /** Radio components - typically multiple Radio components */
+    children: ReactNode;
+    /** Form input name shared by all child radios for grouping */
+    name: string;
+    /** Optional legend text displayed above the radio group */
+    label?: string;
+    /** Layout direction - horizontal arranges radios in a row, vertical stacks them */
+    orientation?: 'horizontal' | 'vertical';
+    /** Additional CSS classes applied to the fieldset container */
+    className?: string;
+    /** Controlled value - matches the value prop of the selected Radio */
+    value?: string;
+    /** Change handler receiving the selected radio's value */
+    onChange?: (value: string) => void;
+};
+type RadioGroupContextValue = {
+    name: string;
+    value?: string;
+    onChange?: (value: string) => void;
+};
+export declare const useRadioGroup: () => RadioGroupContextValue | null;
+/**
+ * RadioGroup - Wrapper for radio inputs with consistent spacing and shared name
+ */
+declare function RadioGroup({ children, name, label, orientation, className, value, onChange }: Readonly<RadioGroupProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace RadioGroup {
+    var displayName: string;
+}
+export default RadioGroup;
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/components/forms/radio-group/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,6DAA6D;IAC7D,QAAQ,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAIF,eAAO,MAAM,aAAa,qCAGzB,CAAC;AAEF;;GAEG;AACH,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,WAAwB,EACxB,SAAc,EACd,KAAK,EACL,QAAQ,EACT,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAa3B;kBArBQ,UAAU;;;AAyBnB,eAAe,UAAU,CAAC"}

package/dist/components/forms/radio-group/radio-group.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, createContext } from "react";
+const RadioGroupContext = createContext(null);
+const useRadioGroup = () => {
+  const context = useContext(RadioGroupContext);
+  return context;
+};
+function RadioGroup({
+  children,
+  name,
+  label,
+  orientation = "vertical",
+  className = "",
+  value,
+  onChange
+}) {
+  const orientationClasses = orientation === "horizontal" ? "flex flex-row gap-4" : "flex flex-col gap-2";
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { name, value, onChange }, children: /* @__PURE__ */ jsxs("fieldset", { className, children: [
+    label && /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium text-foreground mb-2", children: label }),
+    /* @__PURE__ */ jsx("div", { className: orientationClasses, role: "radiogroup", children })
+  ] }) });
+}
+RadioGroup.displayName = "RadioGroup";
+export {
+  RadioGroup as default,
+  useRadioGroup
+};
+//# sourceMappingURL=radio-group.js.map

package/dist/components/forms/radio-group/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sources":["../../../../src/components/forms/radio-group/radio-group.tsx"],"sourcesContent":["import { ReactNode, createContext, useContext } from 'react';\n\nexport type RadioGroupProps = {\n  /** Radio components - typically multiple Radio components */\n  children: ReactNode;\n  /** Form input name shared by all child radios for grouping */\n  name: string;\n  /** Optional legend text displayed above the radio group */\n  label?: string;\n  /** Layout direction - horizontal arranges radios in a row, vertical stacks them */\n  orientation?: 'horizontal' | 'vertical';\n  /** Additional CSS classes applied to the fieldset container */\n  className?: string;\n  /** Controlled value - matches the value prop of the selected Radio */\n  value?: string;\n  /** Change handler receiving the selected radio's value */\n  onChange?: (value: string) => void;\n};\n\ntype RadioGroupContextValue = {\n  name: string;\n  value?: string;\n  onChange?: (value: string) => void;\n};\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport const useRadioGroup = () => {\n  const context = useContext(RadioGroupContext);\n  return context;\n};\n\n/**\n * RadioGroup - Wrapper for radio inputs with consistent spacing and shared name\n */\nfunction RadioGroup({\n  children,\n  name,\n  label,\n  orientation = 'vertical',\n  className = '',\n  value,\n  onChange\n}: Readonly<RadioGroupProps>) {\n  const orientationClasses = orientation === 'horizontal' ? 'flex flex-row gap-4' : 'flex flex-col gap-2';\n\n  return (\n    <RadioGroupContext.Provider value={{ name, value, onChange }}>\n      <fieldset className={className}>\n        {label && <legend className=\"text-sm font-medium text-foreground mb-2\">{label}</legend>}\n        <div className={orientationClasses} role=\"radiogroup\">\n          {children}\n        </div>\n      </fieldset>\n    </RadioGroupContext.Provider>\n  );\n}\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"names":[],"mappings":";;AAyBA,MAAM,oBAAoB,cAA6C,IAAI;AAEpE,MAAM,gBAAgB,MAAM;AACjC,QAAM,UAAU,WAAW,iBAAiB;AAC5C,SAAO;AACT;AAKA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,qBAAqB,gBAAgB,eAAe,wBAAwB;AAElF,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,MAAM,OAAO,SAAA,GAChD,UAAA,qBAAC,YAAA,EAAS,WACP,UAAA;AAAA,IAAA,SAAS,oBAAC,UAAA,EAAO,WAAU,4CAA4C,UAAA,OAAM;AAAA,wBAC7E,OAAA,EAAI,WAAW,oBAAoB,MAAK,cACtC,SAAA,CACH;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,WAAW,cAAc;"}

package/dist/components/forms/select/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './select';
+export type { SelectProps } from './select';
+export { default as SelectItem } from './select-item';
+export type { SelectItemProps } from './select-item';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/forms/select/select-item.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export type SelectItemProps = {
+    value?: string;
+    disabled?: boolean;
+    children: React.ReactNode;
+};
+/**
+ * SelectItem - Option element for Select component
+ * Replaces native <option> element with semantic component
+ */
+declare function SelectItem({ value, disabled, children }: Readonly<SelectItemProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace SelectItem {
+    var displayName: string;
+}
+export default SelectItem;
+//# sourceMappingURL=select-item.d.ts.map

package/dist/components/forms/select/select-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/select/select-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,KAAK,EAAE,QAAgB,EAAE,QAAQ,EAAE,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAMnF;kBANQ,UAAU;;;AAUnB,eAAe,UAAU,CAAC"}

package/dist/components/forms/select/select-item.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+function SelectItem({ value, disabled = false, children }) {
+  return /* @__PURE__ */ jsx("option", { value, disabled, children });
+}
+SelectItem.displayName = "SelectItem";
+export {
+  SelectItem as default
+};
+//# sourceMappingURL=select-item.js.map

package/dist/components/forms/select/select-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-item.js","sources":["../../../../src/components/forms/select/select-item.tsx"],"sourcesContent":["import React from 'react';\n\nexport type SelectItemProps = {\n  value?: string;\n  disabled?: boolean;\n  children: React.ReactNode;\n};\n\n/**\n * SelectItem - Option element for Select component\n * Replaces native <option> element with semantic component\n */\nfunction SelectItem({ value, disabled = false, children }: Readonly<SelectItemProps>) {\n  return (\n    <option value={value} disabled={disabled}>\n      {children}\n    </option>\n  );\n}\n\nSelectItem.displayName = 'SelectItem';\n\nexport default SelectItem;\n"],"names":[],"mappings":";AAYA,SAAS,WAAW,EAAE,OAAO,WAAW,OAAO,YAAuC;AACpF,SACE,oBAAC,UAAA,EAAO,OAAc,UACnB,SAAA,CACH;AAEJ;AAEA,WAAW,cAAc;"}

package/dist/components/forms/select/select.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+import { InteractiveSize, InputWidth, ValidationState } from '../../../theme/size-tokens';
+export type { ValidationState };
+export type SelectProps = {
+    /** Current selected value (controlled) */
+    value?: string;
+    /** Default value for uncontrolled select */
+    defaultValue?: string;
+    /** Change event handler for controlled select */
+    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    /** Focus event handler */
+    onFocus?: (e: React.FocusEvent<HTMLSelectElement>) => void;
+    /** Blur event handler */
+    onBlur?: (e: React.FocusEvent<HTMLSelectElement>) => void;
+    /** Disables select interaction and applies disabled styling */
+    disabled?: boolean;
+    /** Accessible label for screen readers */
+    ariaLabel?: string;
+    /** HTML id attribute for the select */
+    id?: string;
+    /** HTML name attribute for form submission */
+    name?: string;
+    /** SelectItem children defining the available options */
+    children: React.ReactNode;
+    /** Marks select as required for form validation */
+    required?: boolean;
+    /** Size variant - uses unified size system */
+    size?: InteractiveSize;
+    /** Width of the select field - uses semantic sizing */
+    width?: InputWidth;
+    /** Visual validation state affecting border color and styling */
+    validationState?: ValidationState;
+    /** Placeholder text shown as disabled, selected, hidden option */
+    label?: string;
+};
+/**
+ * Select - Accessible select dropdown with validation state support
+ *
+ * @example
+ * ```tsx
+ * <Select>
+ *   <SelectItem value="1">Option 1</SelectItem>
+ *   <SelectItem value="2">Option 2</SelectItem>
+ * </Select>
+ * ```
+ */
+declare function Select({ value, defaultValue, onChange, onFocus, onBlur, disabled, ariaLabel, id, name, children, required, size, width, validationState, label }: Readonly<SelectProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Select {
+    var displayName: string;
+}
+export default Select;
+//# sourceMappingURL=select.d.ts.map

package/dist/components/forms/select/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAML,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,eAAe,EACrB,MAAM,4BAA4B,CAAC;AAEpC,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC,MAAM,MAAM,WAAW,GAAG;IACxB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7D,0BAA0B;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,yBAAyB;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,uDAAuD;IACvD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,iEAAiE;IACjE,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAMF;;;;;;;;;;GAUG;AACH,iBAAS,MAAM,CAAC,EACd,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAgB,EAChB,SAAS,EACT,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,QAAgB,EAChB,IAAW,EACX,KAAK,EACL,eAA2B,EAC3B,KAAK,EACN,EAAE,QAAQ,CAAC,WAAW,CAAC,2CA8BvB;kBA9CQ,MAAM;;;AAkDf,eAAe,MAAM,CAAC"}