@fanvue/ui 1.3.0 → 1.5.0

package/dist/cjs/components/Icons/UploadCloudIcon.cjs

@@ -0,0 +1,61 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const UploadCloudIcon = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      "aria-hidden": "true",
+      className: cn.cn("size-5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M6.667 13.333 10 10m0 0 3.333 3.333M10 10v7.5",
+            stroke: "currentColor",
+            strokeWidth: 1.5,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M16.992 14.825a4.167 4.167 0 0 0-2.159-7.158 5.835 5.835 0 0 0-10.75 2.916A3.333 3.333 0 0 0 5 17.5h11.167a4.167 4.167 0 0 0 .825-2.675Z",
+            stroke: "currentColor",
+            strokeWidth: 1.5,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  )
+);
+UploadCloudIcon.displayName = "UploadCloudIcon";
+exports.UploadCloudIcon = UploadCloudIcon;
+//# sourceMappingURL=UploadCloudIcon.cjs.map

package/dist/cjs/components/Icons/UploadCloudIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadCloudIcon.cjs","sources":["../../../../src/components/Icons/UploadCloudIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\n/** An upload-to-cloud icon with an upward arrow (20 × 20). */\nexport const UploadCloudIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      className={cn(\"size-5\", className)}\n      {...props}\n    >\n      <path\n        d=\"M6.667 13.333 10 10m0 0 3.333 3.333M10 10v7.5\"\n        stroke=\"currentColor\"\n        strokeWidth={1.5}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M16.992 14.825a4.167 4.167 0 0 0-2.159-7.158 5.835 5.835 0 0 0-10.75 2.916A3.333 3.333 0 0 0 5 17.5h11.167a4.167 4.167 0 0 0 .825-2.675Z\"\n        stroke=\"currentColor\"\n        strokeWidth={1.5}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  ),\n);\n\nUploadCloudIcon.displayName = \"UploadCloudIcon\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,kBAAkBA,iBAAM;AAAA,EACnC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAa;AAAA,YACb,eAAc;AAAA,YACd,gBAAe;AAAA,UAAA;AAAA,QAAA;AAAA,QAEjBA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAa;AAAA,YACb,eAAc;AAAA,YACd,gBAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,gBAAgB,cAAc;;"}

package/dist/cjs/components/Loader/Loader.cjs

@@ -0,0 +1,59 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const SpinnerIcon = require("../Icons/SpinnerIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Loader = React__namespace.forwardRef(
+  ({ show = true, ariaLabel, minHeight = "100%", center, centerX, centerY, className, ...props }, ref) => {
+    if (!show) {
+      return null;
+    }
+    const shouldCenterX = center || centerX;
+    const shouldCenterY = center || centerY;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn.cn("relative", className),
+        style: {
+          minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight
+        },
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "output",
+          {
+            className: cn.cn(
+              "absolute flex size-[60px] items-center justify-center",
+              shouldCenterX && "left-1/2 -translate-x-1/2",
+              shouldCenterY && "top-1/2 -translate-y-1/2"
+            ),
+            "aria-label": ariaLabel ?? "loading",
+            children: /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon.SpinnerIcon, { className: "size-9 animate-spin text-body-200" })
+          }
+        )
+      }
+    );
+  }
+);
+Loader.displayName = "Loader";
+exports.Loader = Loader;
+//# sourceMappingURL=Loader.cjs.map

package/dist/cjs/components/Loader/Loader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.cjs","sources":["../../../../src/components/Loader/Loader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\n\nexport interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether the loader is visible. When `false`, renders nothing. @default true */\n  show?: boolean;\n  /** Accessible label for the loading indicator. @default \"loading\" */\n  ariaLabel?: string;\n  /** Minimum height of the container. Numbers are treated as pixels. @default \"100%\" */\n  minHeight?: number | string;\n  /** Center the spinner horizontally. @default false */\n  center?: boolean;\n  /** Center the spinner horizontally. @default false */\n  centerX?: boolean;\n  /** Center the spinner vertically. @default false */\n  centerY?: boolean;\n}\n\n/**\n * A layout-aware loading indicator that renders a centered `SpinnerIcon` inside\n * a relatively-positioned container. Drop-in replacement for the Olympus `Loader`.\n *\n * @example\n * ```tsx\n * <Loader show center />\n * <Loader show centerX minHeight={200} />\n * ```\n */\nexport const Loader = React.forwardRef<HTMLDivElement, LoaderProps>(\n  (\n    { show = true, ariaLabel, minHeight = \"100%\", center, centerX, centerY, className, ...props },\n    ref,\n  ) => {\n    if (!show) {\n      return null;\n    }\n\n    const shouldCenterX = center || centerX;\n    const shouldCenterY = center || centerY;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"relative\", className)}\n        style={{\n          minHeight: typeof minHeight === \"number\" ? `${minHeight}px` : minHeight,\n        }}\n        {...props}\n      >\n        <output\n          className={cn(\n            \"absolute flex size-[60px] items-center justify-center\",\n            shouldCenterX && \"left-1/2 -translate-x-1/2\",\n            shouldCenterY && \"top-1/2 -translate-y-1/2\",\n          )}\n          aria-label={ariaLabel ?? \"loading\"}\n        >\n          <SpinnerIcon className=\"size-9 animate-spin text-body-200\" />\n        </output>\n      </div>\n    );\n  },\n);\n\nLoader.displayName = \"Loader\";\n"],"names":["React","jsx","cn","SpinnerIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA6BO,MAAM,SAASA,iBAAM;AAAA,EAC1B,CACE,EAAE,OAAO,MAAM,WAAW,YAAY,QAAQ,QAAQ,SAAS,SAAS,WAAW,GAAG,MAAA,GACtF,QACG;AACH,QAAI,CAAC,MAAM;AACT,aAAO;AAAA,IACT;AAEA,UAAM,gBAAgB,UAAU;AAChC,UAAM,gBAAgB,UAAU;AAEhC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,YAAY,SAAS;AAAA,QACnC,OAAO;AAAA,UACL,WAAW,OAAO,cAAc,WAAW,GAAG,SAAS,OAAO;AAAA,QAAA;AAAA,QAE/D,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,GAAAA;AAAAA,cACT;AAAA,cACA,iBAAiB;AAAA,cACjB,iBAAiB;AAAA,YAAA;AAAA,YAEnB,cAAY,aAAa;AAAA,YAEzB,UAAAD,2BAAAA,IAACE,YAAAA,aAAA,EAAY,WAAU,oCAAA,CAAoC;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7D;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,OAAO,cAAc;;"}

package/dist/cjs/components/SearchField/SearchField.cjs

@@ -0,0 +1,98 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const IconButton = require("../IconButton/IconButton.cjs");
+const CloseIcon = require("../Icons/CloseIcon.cjs");
+const SearchIcon = require("../Icons/SearchIcon.cjs");
+const TextField = require("../TextField/TextField.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const SearchField = React__namespace.forwardRef(
+  ({ disabled, onClear, value, debounceMs, minChars, onChange, ...props }, ref) => {
+    const [internalValue, setInternalValue] = React__namespace.useState(value ?? "");
+    const timeoutRef = React__namespace.useRef(void 0);
+    React__namespace.useEffect(() => {
+      if (value !== void 0) {
+        setInternalValue(value);
+      }
+    }, [value]);
+    React__namespace.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      };
+    }, []);
+    const shouldFireChange = React__namespace.useCallback(
+      (val) => !minChars || val.length >= minChars,
+      [minChars]
+    );
+    const handleChange = React__namespace.useCallback(
+      (e) => {
+        const val = e.target.value;
+        if (!debounceMs) {
+          setInternalValue(val);
+          if (shouldFireChange(val)) onChange?.(e);
+          return;
+        }
+        setInternalValue(val);
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+          if (shouldFireChange(val)) onChange?.(e);
+        }, debounceMs);
+      },
+      [debounceMs, onChange, shouldFireChange]
+    );
+    const handleClear = React__namespace.useCallback(() => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      setInternalValue("");
+      onClear?.();
+    }, [onClear]);
+    const displayValue = debounceMs || minChars ? internalValue : value;
+    const leftIcon = /* @__PURE__ */ jsxRuntime.jsx(SearchIcon.SearchIcon, {});
+    const showClearButton = onClear && displayValue !== void 0 && displayValue !== "";
+    const rightIcon = showClearButton ? /* @__PURE__ */ jsxRuntime.jsx(
+      IconButton.IconButton,
+      {
+        variant: "tertiary",
+        size: "24",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon.CloseIcon, {}),
+        "aria-label": "Clear search",
+        disabled,
+        onClick: handleClear
+      }
+    ) : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TextField.TextField,
+      {
+        ref,
+        type: "search",
+        disabled,
+        leftIcon,
+        rightIcon,
+        value: displayValue,
+        onChange: handleChange,
+        "aria-label": !props.label ? "Search field" : void 0,
+        ...props
+      }
+    );
+  }
+);
+SearchField.displayName = "SearchField";
+exports.SearchField = SearchField;
+//# sourceMappingURL=SearchField.cjs.map

package/dist/cjs/components/SearchField/SearchField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.cjs","sources":["../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { SearchIcon } from \"../Icons/SearchIcon\";\nimport { TextField, type TextFieldProps } from \"../TextField/TextField\";\n\nexport type SearchFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface SearchFieldProps extends Omit<TextFieldProps, \"type\" | \"leftIcon\"> {\n  /** Size variant of the search field. @default \"48\" */\n  size?: SearchFieldSize;\n  /** Callback fired when the clear button is clicked. If provided, a clear button appears when the field has a value. */\n  onClear?: () => void;\n  /** Debounce delay in milliseconds for the onChange callback. When set, the input maintains internal state for responsive typing while debouncing onChange to the parent. */\n  debounceMs?: number;\n  /** Minimum number of characters required before onChange fires. The input still updates visually, but onChange is suppressed until the threshold is met. Clearing always fires onClear regardless. */\n  minChars?: number;\n}\n\n/**\n * A text input field with a search icon and optional clear button.\n *\n * @example\n * ```tsx\n * <SearchField\n *   placeholder=\"Search...\"\n *   value={query}\n *   onChange={(e) => setQuery(e.target.value)}\n *   onClear={() => setQuery(\"\")}\n *   debounceMs={500}\n *   minChars={3}\n * />\n * ```\n */\nexport const SearchField = React.forwardRef<HTMLInputElement, SearchFieldProps>(\n  ({ disabled, onClear, value, debounceMs, minChars, onChange, ...props }, ref) => {\n    const [internalValue, setInternalValue] = React.useState(value ?? \"\");\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);\n\n    React.useEffect(() => {\n      if (value !== undefined) {\n        setInternalValue(value);\n      }\n    }, [value]);\n\n    React.useEffect(() => {\n      return () => {\n        if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      };\n    }, []);\n\n    const shouldFireChange = React.useCallback(\n      (val: string) => !minChars || val.length >= minChars,\n      [minChars],\n    );\n\n    const handleChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const val = e.target.value;\n\n        if (!debounceMs) {\n          setInternalValue(val);\n          if (shouldFireChange(val)) onChange?.(e);\n          return;\n        }\n\n        setInternalValue(val);\n\n        if (timeoutRef.current) clearTimeout(timeoutRef.current);\n\n        timeoutRef.current = setTimeout(() => {\n          if (shouldFireChange(val)) onChange?.(e);\n        }, debounceMs);\n      },\n      [debounceMs, onChange, shouldFireChange],\n    );\n\n    const handleClear = React.useCallback(() => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      setInternalValue(\"\");\n      onClear?.();\n    }, [onClear]);\n\n    const displayValue = debounceMs || minChars ? internalValue : value;\n    const leftIcon = <SearchIcon />;\n\n    const showClearButton = onClear && displayValue !== undefined && displayValue !== \"\";\n\n    const rightIcon = showClearButton ? (\n      <IconButton\n        variant=\"tertiary\"\n        size=\"24\"\n        icon={<CloseIcon />}\n        aria-label=\"Clear search\"\n        disabled={disabled}\n        onClick={handleClear}\n      />\n    ) : undefined;\n\n    return (\n      <TextField\n        ref={ref}\n        type=\"search\"\n        disabled={disabled}\n        leftIcon={leftIcon}\n        rightIcon={rightIcon}\n        value={displayValue}\n        onChange={handleChange}\n        aria-label={!props.label ? \"Search field\" : undefined}\n        {...props}\n      />\n    );\n  },\n);\n\nSearchField.displayName = \"SearchField\";\n"],"names":["React","SearchIcon","jsx","IconButton","CloseIcon","TextField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkCO,MAAM,cAAcA,iBAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,SAAS,OAAO,YAAY,UAAU,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC/E,UAAM,CAAC,eAAe,gBAAgB,IAAIA,iBAAM,SAAS,SAAS,EAAE;AACpE,UAAM,aAAaA,iBAAM,OAAsC,MAAS;AAExEA,qBAAM,UAAU,MAAM;AACpB,UAAI,UAAU,QAAW;AACvB,yBAAiB,KAAK;AAAA,MACxB;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEVA,qBAAM,UAAU,MAAM;AACpB,aAAO,MAAM;AACX,YAAI,WAAW,QAAS,cAAa,WAAW,OAAO;AAAA,MACzD;AAAA,IACF,GAAG,CAAA,CAAE;AAEL,UAAM,mBAAmBA,iBAAM;AAAA,MAC7B,CAAC,QAAgB,CAAC,YAAY,IAAI,UAAU;AAAA,MAC5C,CAAC,QAAQ;AAAA,IAAA;AAGX,UAAM,eAAeA,iBAAM;AAAA,MACzB,CAAC,MAA2C;AAC1C,cAAM,MAAM,EAAE,OAAO;AAErB,YAAI,CAAC,YAAY;AACf,2BAAiB,GAAG;AACpB,cAAI,iBAAiB,GAAG,EAAG,YAAW,CAAC;AACvC;AAAA,QACF;AAEA,yBAAiB,GAAG;AAEpB,YAAI,WAAW,QAAS,cAAa,WAAW,OAAO;AAEvD,mBAAW,UAAU,WAAW,MAAM;AACpC,cAAI,iBAAiB,GAAG,EAAG,YAAW,CAAC;AAAA,QACzC,GAAG,UAAU;AAAA,MACf;AAAA,MACA,CAAC,YAAY,UAAU,gBAAgB;AAAA,IAAA;AAGzC,UAAM,cAAcA,iBAAM,YAAY,MAAM;AAC1C,UAAI,WAAW,QAAS,cAAa,WAAW,OAAO;AACvD,uBAAiB,EAAE;AACnB,gBAAA;AAAA,IACF,GAAG,CAAC,OAAO,CAAC;AAEZ,UAAM,eAAe,cAAc,WAAW,gBAAgB;AAC9D,UAAM,0CAAYC,WAAAA,YAAA,EAAW;AAE7B,UAAM,kBAAkB,WAAW,iBAAiB,UAAa,iBAAiB;AAElF,UAAM,YAAY,kBAChBC,2BAAAA;AAAAA,MAACC,WAAAA;AAAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,qCAAOC,UAAAA,WAAA,EAAU;AAAA,QACjB,cAAW;AAAA,QACX;AAAA,QACA,SAAS;AAAA,MAAA;AAAA,IAAA,IAET;AAEJ,WACEF,2BAAAA;AAAAA,MAACG,UAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,cAAY,CAAC,MAAM,QAAQ,iBAAiB;AAAA,QAC3C,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,YAAY,cAAc;;"}

package/dist/cjs/components/Select/Select.cjs

@@ -0,0 +1,212 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const SelectPrimitive = require("@radix-ui/react-select");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const CheckIcon = require("../Icons/CheckIcon.cjs");
+const ChevronDownIcon = require("../Icons/ChevronDownIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const SelectPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SelectPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const SelectContext = React__namespace.createContext({
+  size: "48",
+  error: false
+});
+const TRIGGER_HEIGHT = {
+  "48": "h-12",
+  "40": "h-10",
+  "32": "h-8"
+};
+const TRIGGER_PADDING_X = {
+  "48": "px-4",
+  "40": "px-4",
+  "32": "px-3"
+};
+const TRIGGER_GAP = {
+  "48": "gap-3",
+  "40": "gap-3",
+  "32": "gap-2"
+};
+const TRIGGER_TYPOGRAPHY = {
+  "48": "typography-body-1-regular",
+  "40": "typography-body-1-regular",
+  "32": "typography-body-2-regular"
+};
+const Select = React__namespace.forwardRef(
+  ({
+    label,
+    helperText,
+    size = "48",
+    error = false,
+    errorMessage,
+    placeholder,
+    leftIcon,
+    fullWidth = false,
+    className,
+    id,
+    disabled,
+    children,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    ...props
+  }, ref) => {
+    const generatedId = React__namespace.useId();
+    const triggerId = id ?? generatedId;
+    const helperTextId = `${triggerId}-helper`;
+    const bottomText = error && errorMessage ? errorMessage : helperText;
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: { size, error, disabled }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn.cn("flex flex-col", fullWidth && "w-full", className),
+        "data-disabled": disabled ? "" : void 0,
+        "data-error": error ? "" : void 0,
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              htmlFor: triggerId,
+              className: "typography-caption-semibold px-1 pt-1 pb-2 text-body-100",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Root, { disabled, ...props, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              SelectPrimitive__namespace.Trigger,
+              {
+                ref,
+                id: triggerId,
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledby,
+                "aria-describedby": bottomText ? helperTextId : void 0,
+                "aria-invalid": error || void 0,
+                className: cn.cn(
+                  "flex w-full cursor-pointer items-center justify-between rounded-xl border bg-neutral-100 outline-none motion-safe:transition-colors",
+                  TRIGGER_HEIGHT[size],
+                  TRIGGER_PADDING_X[size],
+                  TRIGGER_GAP[size],
+                  TRIGGER_TYPOGRAPHY[size],
+                  error ? "border-error-500" : "border-transparent",
+                  !disabled && !error && "hover:border-neutral-400 data-[state=open]:border-neutral-400",
+                  disabled && "cursor-not-allowed opacity-50"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: "flex size-5 shrink-0 items-center justify-center text-body-200",
+                        "data-testid": "left-icon",
+                        children: leftIcon
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      SelectPrimitive__namespace.Value,
+                      {
+                        placeholder,
+                        className: "min-w-0 flex-1 truncate text-left text-body-100 data-placeholder:text-body-200 data-placeholder:opacity-40"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon.ChevronDownIcon, {}) })
+                ]
+              }
+            ),
+            children
+          ] }),
+          bottomText && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              id: helperTextId,
+              className: cn.cn(
+                "typography-caption-regular px-2 pt-1 pb-0.5",
+                error ? "text-error-500" : "text-body-200"
+              ),
+              children: bottomText
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+Select.displayName = "Select";
+const SelectContent = React__namespace.forwardRef(({ className, children, position = "popper", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.Content,
+  {
+    ref,
+    position,
+    sideOffset,
+    className: cn.cn(
+      "relative z-50 min-w-(--radix-select-trigger-width) overflow-hidden rounded-xl border border-neutral-200 bg-background-inverse-solid text-body-100 shadow-[0_4px_16px_rgba(0,0,0,0.10)]",
+      "data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: "p-1", children })
+  }
+) }));
+SelectContent.displayName = "SelectContent";
+const SelectItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.Item,
+  {
+    ref,
+    className: cn.cn(
+      "typography-body-1-regular relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pr-2 pl-3 text-body-100 outline-none",
+      "focus:bg-neutral-100 data-disabled:pointer-events-none data-disabled:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children }),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { className: "ml-auto flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon.CheckIcon, { className: "size-4 text-body-100" }) })
+    ]
+  }
+));
+SelectItem.displayName = "SelectItem";
+const SelectGroup = SelectPrimitive__namespace.Group;
+SelectGroup.displayName = "SelectGroup";
+const SelectLabel = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.Label,
+  {
+    ref,
+    className: cn.cn("typography-caption-semibold px-3 py-1.5 text-body-200", className),
+    ...props
+  }
+));
+SelectLabel.displayName = "SelectLabel";
+const SelectSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.Separator,
+  {
+    ref,
+    className: cn.cn("-mx-1 my-1 h-px bg-neutral-200", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = "SelectSeparator";
+exports.Select = Select;
+exports.SelectContent = SelectContent;
+exports.SelectGroup = SelectGroup;
+exports.SelectItem = SelectItem;
+exports.SelectLabel = SelectLabel;
+exports.SelectSeparator = SelectSeparator;
+//# sourceMappingURL=Select.cjs.map

package/dist/cjs/components/Select/Select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Select field height in pixels. */\nexport type SelectSize = \"48\" | \"40\" | \"32\";\n\ntype SelectContextValue = {\n  size: SelectSize;\n  error: boolean;\n  disabled?: boolean;\n};\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  size: \"48\",\n  error: false,\n});\n\nconst TRIGGER_HEIGHT: Record<SelectSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst TRIGGER_PADDING_X: Record<SelectSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst TRIGGER_GAP: Record<SelectSize, string> = {\n  \"48\": \"gap-3\",\n  \"40\": \"gap-3\",\n  \"32\": \"gap-2\",\n};\n\nconst TRIGGER_TYPOGRAPHY: Record<SelectSize, string> = {\n  \"48\": \"typography-body-1-regular\",\n  \"40\": \"typography-body-1-regular\",\n  \"32\": \"typography-body-2-regular\",\n};\n\nexport interface SelectProps extends Omit<SelectPrimitive.SelectProps, \"dir\"> {\n  /** Label text displayed above the trigger. Also used as the accessible name. */\n  label?: string;\n  /** Accessible name applied directly to the trigger button when no visible `label` is provided. */\n  \"aria-label\"?: string;\n  /** ID of an external element that labels the trigger button. */\n  \"aria-labelledby\"?: string;\n  /** Helper text displayed below the trigger. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the select field in pixels. @default \"48\" */\n  size?: SelectSize;\n  /** Whether the field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the trigger. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Icon element displayed at the left side of the trigger. */\n  leftIcon?: React.ReactNode;\n  /** Whether the field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Wraps the `className` of the outermost container div. */\n  className?: string;\n  /** HTML `id` applied to the trigger button. Auto-generated if omitted. */\n  id?: string;\n}\n\n/**\n * A select field with optional label, helper/error text, and an icon slot,\n * built on Radix UI Select for full accessibility and keyboard navigation.\n *\n * Pair with {@link SelectContent} and {@link SelectItem} to provide options.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" placeholder=\"Select a country\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"uk\">United Kingdom</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nexport const Select = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  SelectProps\n>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      placeholder,\n      leftIcon,\n      fullWidth = false,\n      className,\n      id,\n      disabled,\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const triggerId = id ?? generatedId;\n    const helperTextId = `${triggerId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    return (\n      <SelectContext.Provider value={{ size, error, disabled }}>\n        <div\n          className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n          data-disabled={disabled ? \"\" : undefined}\n          data-error={error ? \"\" : undefined}\n        >\n          {label && (\n            <label\n              htmlFor={triggerId}\n              className=\"typography-caption-semibold px-1 pt-1 pb-2 text-body-100\"\n            >\n              {label}\n            </label>\n          )}\n\n          <SelectPrimitive.Root disabled={disabled} {...props}>\n            <SelectPrimitive.Trigger\n              ref={ref}\n              id={triggerId}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby}\n              aria-describedby={bottomText ? helperTextId : undefined}\n              aria-invalid={error || undefined}\n              className={cn(\n                \"flex w-full cursor-pointer items-center justify-between rounded-xl border bg-neutral-100 outline-none motion-safe:transition-colors\",\n                TRIGGER_HEIGHT[size],\n                TRIGGER_PADDING_X[size],\n                TRIGGER_GAP[size],\n                TRIGGER_TYPOGRAPHY[size],\n                error ? \"border-error-500\" : \"border-transparent\",\n                !disabled &&\n                  !error &&\n                  \"hover:border-neutral-400 data-[state=open]:border-neutral-400\",\n                disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              <div className=\"flex items-center gap-2\">\n                {leftIcon && (\n                  <span\n                    className=\"flex size-5 shrink-0 items-center justify-center text-body-200\"\n                    data-testid=\"left-icon\"\n                  >\n                    {leftIcon}\n                  </span>\n                )}\n                <SelectPrimitive.Value\n                  placeholder={placeholder}\n                  className=\"min-w-0 flex-1 truncate text-left text-body-100 data-placeholder:text-body-200 data-placeholder:opacity-40\"\n                />\n              </div>\n\n              <SelectPrimitive.Icon asChild>\n                <ChevronDownIcon />\n              </SelectPrimitive.Icon>\n            </SelectPrimitive.Trigger>\n\n            {children}\n          </SelectPrimitive.Root>\n\n          {bottomText && (\n            <p\n              id={helperTextId}\n              className={cn(\n                \"typography-caption-regular px-2 pt-1 pb-0.5\",\n                error ? \"text-error-500\" : \"text-body-200\",\n              )}\n            >\n              {bottomText}\n            </p>\n          )}\n        </div>\n      </SelectContext.Provider>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n\nexport interface SelectContentProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {}\n\n/**\n * The dropdown panel rendered inside a portal. Place {@link SelectItem} elements\n * (and optionally {@link SelectGroup} / {@link SelectLabel}) as children.\n */\nexport const SelectContent = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Content>,\n  SelectContentProps\n>(({ className, children, position = \"popper\", sideOffset = 4, ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      position={position}\n      sideOffset={sideOffset}\n      className={cn(\n        \"relative z-50 min-w-(--radix-select-trigger-width) overflow-hidden rounded-xl border border-neutral-200 bg-background-inverse-solid text-body-100 shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n        \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.Viewport className=\"p-1\">{children}</SelectPrimitive.Viewport>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\n\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {}\n\n/**\n * An individual option inside {@link SelectContent}.\n */\nexport const SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  SelectItemProps\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"typography-body-1-regular relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pr-2 pl-3 text-body-100 outline-none\",\n      \"focus:bg-neutral-100 data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    <SelectPrimitive.ItemIndicator className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n      <CheckIcon className=\"size-4 text-body-100\" />\n    </SelectPrimitive.ItemIndicator>\n  </SelectPrimitive.Item>\n));\n\nSelectItem.displayName = \"SelectItem\";\n\n/** Props for {@link SelectGroup}. */\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\n/**\n * Groups related {@link SelectItem} elements under a {@link SelectLabel}.\n */\nexport const SelectGroup = SelectPrimitive.Group;\nSelectGroup.displayName = \"SelectGroup\";\n\nexport interface SelectLabelProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}\n\n/**\n * A non-interactive label shown above a {@link SelectGroup}.\n */\nexport const SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Label>,\n  SelectLabelProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"typography-caption-semibold px-3 py-1.5 text-body-200\", className)}\n    {...props}\n  />\n));\n\nSelectLabel.displayName = \"SelectLabel\";\n\nexport interface SelectSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}\n\n/** A horizontal rule that visually separates groups in {@link SelectContent}. */\nexport const SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  SelectSeparatorProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-neutral-200\", className)}\n    {...props}\n  />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"names":["React","jsx","jsxs","cn","SelectPrimitive","ChevronDownIcon","CheckIcon"],"mappings":"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"}