silver-ui 0.1.1 → 0.2.0

package/dist/{chunk-YT3UWEVY.js → chunk-PUVBNGCF.js}

@@ -1,4 +1,4 @@
-import { cva } from './chunk-NAELQLZN.js';
+import { cva } from './chunk-FMEIPGUP.js';
 import { cx } from './chunk-PPNETWIP.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -16,12 +16,19 @@ var cardRecipe = cva({
         bg: "bg",
         borderColor: "border"
       },
+      section: {
+        bg: "bg",
+        borderRadius: 0,
+        borderWidth: 0
+      },
       transparent: {
         bg: "transparent"
       },
       muted: {
         bg: "bg.subtle"
-      },
+      }
+    },
+    color: {
       blue: { bg: "surface.blue" },
       cyan: { bg: "surface.cyan" },
       gray: { bg: "surface.gray" },
@@ -33,18 +40,20 @@ var cardRecipe = cva({
       teal: { bg: "surface.teal" },
       yellow: { bg: "surface.yellow" }
     },
+    // Each padding value also exposes `--card-padding` so descendants (e.g. a
+    // full-bleed Divider) can offset the card's padding to reach its edges.
     padding: {
-      0: { p: "0" },
-      0.5: { p: "0.5" },
-      1: { p: "1" },
-      1.5: { p: "1.5" },
-      2: { p: "2" },
-      3: { p: "3" },
-      4: { p: "4" },
-      5: { p: "5" },
-      6: { p: "6" },
-      8: { p: "8" },
-      10: { p: "10" }
+      0: { p: "0", "--card-padding": "token(spacing.0)" },
+      0.5: { p: "0.5", "--card-padding": "token(spacing.0.5)" },
+      1: { p: "1", "--card-padding": "token(spacing.1)" },
+      1.5: { p: "1.5", "--card-padding": "token(spacing.1.5)" },
+      2: { p: "2", "--card-padding": "token(spacing.2)" },
+      3: { p: "3", "--card-padding": "token(spacing.3)" },
+      4: { p: "4", "--card-padding": "token(spacing.4)" },
+      5: { p: "5", "--card-padding": "token(spacing.5)" },
+      6: { p: "6", "--card-padding": "token(spacing.6)" },
+      8: { p: "8", "--card-padding": "token(spacing.8)" },
+      10: { p: "10", "--card-padding": "token(spacing.10)" }
     }
   },
   defaultVariants: {
@@ -55,6 +64,7 @@ var cardRecipe = cva({
 function Card({
   children,
   className,
+  color,
   "data-testid": dataTestId,
   padding = 0,
   ref,
@@ -66,7 +76,7 @@ function Card({
     "div",
     {
       ...htmlProps,
-      className: cx(cardRecipe({ variant, padding }), className),
+      className: cx(cardRecipe({ variant, color, padding }), className),
       "data-testid": dataTestId,
       ref,
       style,
@@ -76,6 +86,6 @@ function Card({
 }
 Card.displayName = "Card";
 
-export { Card, cardRecipe };
-//# sourceMappingURL=chunk-YT3UWEVY.js.map
-//# sourceMappingURL=chunk-YT3UWEVY.js.map
+export { Card };
+//# sourceMappingURL=chunk-PUVBNGCF.js.map
+//# sourceMappingURL=chunk-PUVBNGCF.js.map

package/dist/chunk-PUVBNGCF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Card/Card.recipe.ts","../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;AAEO,IAAM,aAAa,GAAA,CAAI;AAAA,EAC5B,IAAA,EAAM;AAAA,IACJ,YAAA,EAAc,IAAA;AAAA,IACd,WAAA,EAAa,SAAA;AAAA,IACb,WAAA,EAAa,OAAA;AAAA,IACb,WAAA,EAAa;AAAA,GACf;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,OAAA,EAAS;AAAA,QACP,EAAA,EAAI,IAAA;AAAA,QACJ,WAAA,EAAa;AAAA,OACf;AAAA,MACA,OAAA,EAAS;AAAA,QACP,EAAA,EAAI,IAAA;AAAA,QACJ,YAAA,EAAc,CAAA;AAAA,QACd,WAAA,EAAa;AAAA,OACf;AAAA,MACA,WAAA,EAAa;AAAA,QACX,EAAA,EAAI;AAAA,OACN;AAAA,MACA,KAAA,EAAO;AAAA,QACL,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,IAAA,EAAM,EAAC,EAAA,EAAI,cAAA,EAAc;AAAA,MACzB,IAAA,EAAM,EAAC,EAAA,EAAI,cAAA,EAAc;AAAA,MACzB,IAAA,EAAM,EAAC,EAAA,EAAI,cAAA,EAAc;AAAA,MACzB,KAAA,EAAO,EAAC,EAAA,EAAI,eAAA,EAAe;AAAA,MAC3B,MAAA,EAAQ,EAAC,EAAA,EAAI,gBAAA,EAAgB;AAAA,MAC7B,IAAA,EAAM,EAAC,EAAA,EAAI,cAAA,EAAc;AAAA,MACzB,MAAA,EAAQ,EAAC,EAAA,EAAI,gBAAA,EAAgB;AAAA,MAC7B,GAAA,EAAK,EAAC,EAAA,EAAI,aAAA,EAAa;AAAA,MACvB,IAAA,EAAM,EAAC,EAAA,EAAI,cAAA,EAAc;AAAA,MACzB,MAAA,EAAQ,EAAC,EAAA,EAAI,gBAAA;AAAgB,KAC/B;AAAA;AAAA;AAAA,IAGA,OAAA,EAAS;AAAA,MACP,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAK,kBAAkB,kBAAA,EAAkB;AAAA,MAChD,GAAA,EAAK,EAAC,CAAA,EAAG,KAAA,EAAO,kBAAkB,oBAAA,EAAoB;AAAA,MACtD,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAK,kBAAkB,kBAAA,EAAkB;AAAA,MAChD,GAAA,EAAK,EAAC,CAAA,EAAG,KAAA,EAAO,kBAAkB,oBAAA,EAAoB;AAAA,MACtD,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAK,kBAAkB,kBAAA,EAAkB;AAAA,MAChD,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAK,kBAAkB,kBAAA,EAAkB;AAAA,MAChD,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAK,kBAAkB,kBAAA,EAAkB;AAAA,MAChD,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAK,kBAAkB,kBAAA,EAAkB;AAAA,MAChD,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAK,kBAAkB,kBAAA,EAAkB;AAAA,MAChD,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAK,kBAAkB,kBAAA,EAAkB;AAAA,MAChD,EAAA,EAAI,EAAC,CAAA,EAAG,IAAA,EAAM,kBAAkB,mBAAA;AAAmB;AACrD,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;ACNM,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,OAAA,GAAU,CAAA;AAAA,EACV,GAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,GAAG;AACL,CAAA,EAAiC;AAC/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,GAAG,UAAA,CAAW,EAAC,SAAS,KAAA,EAAO,OAAA,EAAQ,CAAA,EAAG,SAAS,CAAA;AAAA,MAC9D,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,KAAA;AAAA,MACC;AAAA;AAAA,GACH;AAEJ;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"chunk-PUVBNGCF.js","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const cardRecipe = cva({\n  base: {\n    borderRadius: 'lg',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'transparent',\n  },\n  variants: {\n    variant: {\n      default: {\n        bg: 'bg',\n        borderColor: 'border',\n      },\n      section: {\n        bg: 'bg',\n        borderRadius: 0,\n        borderWidth: 0,\n      },\n      transparent: {\n        bg: 'transparent',\n      },\n      muted: {\n        bg: 'bg.subtle',\n      },\n    },\n    color: {\n      blue: {bg: 'surface.blue'},\n      cyan: {bg: 'surface.cyan'},\n      gray: {bg: 'surface.gray'},\n      green: {bg: 'surface.green'},\n      orange: {bg: 'surface.orange'},\n      pink: {bg: 'surface.pink'},\n      purple: {bg: 'surface.purple'},\n      red: {bg: 'surface.red'},\n      teal: {bg: 'surface.teal'},\n      yellow: {bg: 'surface.yellow'},\n    },\n    // Each padding value also exposes `--card-padding` so descendants (e.g. a\n    // full-bleed Divider) can offset the card's padding to reach its edges.\n    padding: {\n      0: {p: '0', '--card-padding': 'token(spacing.0)'},\n      0.5: {p: '0.5', '--card-padding': 'token(spacing.0.5)'},\n      1: {p: '1', '--card-padding': 'token(spacing.1)'},\n      1.5: {p: '1.5', '--card-padding': 'token(spacing.1.5)'},\n      2: {p: '2', '--card-padding': 'token(spacing.2)'},\n      3: {p: '3', '--card-padding': 'token(spacing.3)'},\n      4: {p: '4', '--card-padding': 'token(spacing.4)'},\n      5: {p: '5', '--card-padding': 'token(spacing.5)'},\n      6: {p: '6', '--card-padding': 'token(spacing.6)'},\n      8: {p: '8', '--card-padding': 'token(spacing.8)'},\n      10: {p: '10', '--card-padding': 'token(spacing.10)'},\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    padding: 0,\n  },\n});\n\nexport type CardVariants = RecipeVariantProps<typeof cardRecipe>;\n","import type {ComponentPropsWithRef} from 'react';\nimport {cx} from '../../internal/cx';\nimport type {SpacingToken} from '../../internal/spacingTokens';\nimport {cardRecipe} from './Card.recipe';\n\nexport type CardColor =\n  | 'blue'\n  | 'cyan'\n  | 'gray'\n  | 'green'\n  | 'orange'\n  | 'pink'\n  | 'purple'\n  | 'red'\n  | 'teal'\n  | 'yellow';\n\nexport type CardVariant = 'default' | 'section' | 'transparent' | 'muted';\n\n/**\n * Rounded container surface for grouping related content.\n */\nexport interface CardProps extends ComponentPropsWithRef<'div'> {\n  /**\n   * Decorative surface color. When set, overrides the variant's default\n   * background with the corresponding surface color token.\n   */\n  color?: CardColor;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Inner padding step.\n   * @default 0\n   */\n  padding?: SpacingToken;\n  /**\n   * Visual style variant.\n   *\n   * - `default` — bordered, rounded container with `bg` background.\n   * - `section` — flat container with no border or border-radius, for use\n   *   inside a larger container.\n   * - `transparent` — no background.\n   * - `muted` — subtle background, no visible border.\n   * @default 'default'\n   */\n  variant?: CardVariant;\n}\n\n/**\n * Rounded container surface for grouping related content.\n */\nexport function Card({\n  children,\n  className,\n  color,\n  'data-testid': dataTestId,\n  padding = 0,\n  ref,\n  style,\n  variant = 'default',\n  ...htmlProps\n}: CardProps): React.JSX.Element {\n  return (\n    <div\n      {...htmlProps}\n      className={cx(cardRecipe({variant, color, padding}), className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      {children}\n    </div>\n  );\n}\n\nCard.displayName = 'Card';\n"]}

package/dist/{chunk-DONU5ALC.cjs → chunk-PWL6TWVC.cjs}

@@ -1,13 +1,15 @@
 'use strict';
 
-var chunkI6IGTQLG_cjs = require('./chunk-I6IGTQLG.cjs');
-var chunk5G3BY75L_cjs = require('./chunk-5G3BY75L.cjs');
-var chunk2WP6NYYY_cjs = require('./chunk-2WP6NYYY.cjs');
-var chunk47BELFYO_cjs = require('./chunk-47BELFYO.cjs');
+var chunkVXBVSYPA_cjs = require('./chunk-VXBVSYPA.cjs');
+var chunkKFEXS6OK_cjs = require('./chunk-KFEXS6OK.cjs');
+var chunk2P6D43V2_cjs = require('./chunk-2P6D43V2.cjs');
+var chunkO3T7Z6RH_cjs = require('./chunk-O3T7Z6RH.cjs');
+var chunkYXYD5HKL_cjs = require('./chunk-YXYD5HKL.cjs');
+var chunkJMNH45Q3_cjs = require('./chunk-JMNH45Q3.cjs');
 var chunk6SHL7FYO_cjs = require('./chunk-6SHL7FYO.cjs');
-var chunkPHFEQG4E_cjs = require('./chunk-PHFEQG4E.cjs');
+var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
 var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
-var chunkAZDWQGAX_cjs = require('./chunk-AZDWQGAX.cjs');
+var chunkRU6JG3FS_cjs = require('./chunk-RU6JG3FS.cjs');
 var lucideReact = require('lucide-react');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -23,8 +25,7 @@ function formatFileSize(bytes) {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 var styles = {
-  surface: chunkAZDWQGAX_cjs.css({
-    boxSizing: "border-box",
+  surface: chunkRU6JG3FS_cjs.css({
     display: "flex",
     alignItems: "center",
     gap: "2",
@@ -43,7 +44,7 @@ var styles = {
       outlineOffset: "focusOffset"
     }
   }),
-  dropzone: chunkAZDWQGAX_cjs.css({
+  dropzone: chunkRU6JG3FS_cjs.css({
     minH: "32",
     flexDirection: "column",
     justifyContent: "center",
@@ -54,15 +55,15 @@ var styles = {
       flex: "none"
     }
   }),
-  disabled: chunkAZDWQGAX_cjs.css({
+  disabled: chunkRU6JG3FS_cjs.css({
     cursor: "not-allowed",
     opacity: 0.55
   }),
-  active: chunkAZDWQGAX_cjs.css({
+  active: chunkRU6JG3FS_cjs.css({
     borderColor: "primary",
     bg: "bg.selected"
   }),
-  hiddenInput: chunkAZDWQGAX_cjs.css({
+  hiddenInput: chunkRU6JG3FS_cjs.css({
     position: "absolute",
     w: "1px",
     h: "1px",
@@ -73,24 +74,16 @@ var styles = {
     whiteSpace: "nowrap",
     borderWidth: 0
   }),
-  fileName: chunkAZDWQGAX_cjs.css({
+  fileName: chunkRU6JG3FS_cjs.css({
     flex: 1,
     minW: 0,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   }),
-  icon: chunkAZDWQGAX_cjs.css({
+  icon: chunkRU6JG3FS_cjs.css({
     display: "inline-flex",
     color: "fg.muted"
-  }),
-  clearButton: chunkAZDWQGAX_cjs.css({
-    display: "inline-flex",
-    p: 0,
-    borderWidth: 0,
-    bg: "transparent",
-    color: "fg.muted",
-    cursor: "pointer"
   })
 };
 function validateFiles(files, options) {
@@ -173,8 +166,8 @@ function FileInput({
   const [validationError, setValidationError] = react.useState(null);
   const status = statusFromProps ?? (validationError == null ? void 0 : { type: "error", message: validationError });
   const descriptionID = description != null ? `${inputId}-description` : void 0;
-  const statusMessageID = chunk5G3BY75L_cjs.getStatusMessageID(inputId, status);
-  const describedBy = chunk5G3BY75L_cjs.getDescribedBy(descriptionID, statusMessageID);
+  const statusMessageID = chunk2P6D43V2_cjs.getStatusMessageID(inputId, status);
+  const describedBy = chunk2P6D43V2_cjs.getDescribedBy(descriptionID, statusMessageID);
   const fileNames = getFileNames(value);
   const displayText = fileNames ?? placeholder ?? (isMultiple ? "Choose files" : "Choose file");
   const isDropzone = mode === "dropzone";
@@ -230,9 +223,9 @@ function FileInput({
       }
     }
   } : {};
-  const necessity = { isOptional, isRequired };
+  const necessity = chunkKFEXS6OK_cjs.getNecessity(isOptional, isRequired);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkI6IGTQLG_cjs.Field,
+    chunkKFEXS6OK_cjs.Field,
     {
       description,
       descriptionID,
@@ -252,7 +245,7 @@ function FileInput({
           "aria-disabled": isDisabled || void 0,
           className: chunkSPDVNY2Z_cjs.cx(
             styles.surface,
-            isDropzone ? styles.dropzone : chunkI6IGTQLG_cjs.inputRecipe({ size, status: status?.type, isDisabled }),
+            isDropzone ? styles.dropzone : chunkVXBVSYPA_cjs.inputRecipe({ size, status: status?.type, isDisabled }),
             isDisabled ? styles.disabled : void 0,
             isDragOver ? styles.active : void 0,
             className
@@ -293,9 +286,9 @@ function FileInput({
                 type: "file"
               }
             ),
-            isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunk2WP6NYYY_cjs.Spinner, { size: isDropzone ? "md" : "sm" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { icon: lucideReact.Upload, size: isDropzone ? "md" : "sm" }) }),
+            isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkYXYD5HKL_cjs.Spinner, { size: isDropzone ? "md" : "sm" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { icon: lucideReact.Upload, size: isDropzone ? "md" : "sm" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunk47BELFYO_cjs.Text,
+              chunkJMNH45Q3_cjs.Text,
               {
                 as: "span",
                 className: styles.fileName,
@@ -304,19 +297,20 @@ function FileInput({
               }
             ),
             fileNames != null ? /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+              chunkO3T7Z6RH_cjs.Button,
               {
-                "aria-label": `Clear ${label}`,
-                className: styles.clearButton,
+                icon: lucideReact.X,
+                isIconOnly: true,
+                label: `Clear ${label}`,
                 onClick: (event) => {
                   event.stopPropagation();
                   handleClear();
                 },
-                type: "button",
-                children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { icon: lucideReact.X, size: "sm" })
+                size: "sm",
+                variant: "ghost"
               }
             ) : null,
-            status != null && !isDropzone ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.icon, children: chunk5G3BY75L_cjs.getStatusIcon(status.type) }) : null
+            status != null && !isDropzone ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.icon, children: chunk2P6D43V2_cjs.getStatusIcon(status.type) }) : null
           ]
         }
       )
@@ -326,5 +320,5 @@ function FileInput({
 FileInput.displayName = "FileInput";
 
 exports.FileInput = FileInput;
-//# sourceMappingURL=chunk-DONU5ALC.cjs.map
-//# sourceMappingURL=chunk-DONU5ALC.cjs.map
+//# sourceMappingURL=chunk-PWL6TWVC.cjs.map
+//# sourceMappingURL=chunk-PWL6TWVC.cjs.map

package/dist/chunk-PWL6TWVC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/formatFileSize.ts","../src/components/FileInput/FileInput.tsx"],"names":["css","useId","useRef","useState","getStatusMessageID","getDescribedBy","getNecessity","jsx","Field","jsxs","cx","inputRecipe","mergeRefs","Spinner","Icon","Upload","Text","Button","X","getStatusIcon"],"mappings":";;;;;;;;;;;;;;;;;AAAO,SAAS,eAAe,KAAA,EAAuB;AACpD,EAAA,IAAI,QAAQ,IAAA,EAAM;AAChB,IAAA,OAAO,GAAG,KAAK,CAAA,EAAA,CAAA;AAAA,EACjB;AAEA,EAAA,IAAI,KAAA,GAAQ,OAAO,IAAA,EAAM;AACvB,IAAA,OAAO,CAAA,EAAA,CAAI,KAAA,GAAQ,IAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,GAAA,CAAA;AAAA,EACrC;AAEA,EAAA,OAAO,IAAI,KAAA,IAAS,IAAA,GAAO,IAAA,CAAA,EAAO,OAAA,CAAQ,CAAC,CAAC,CAAA,GAAA,CAAA;AAC9C;AC6IA,IAAM,MAAA,GAAS;AAAA,EACb,SAASA,qBAAA,CAAI;AAAA,IACX,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,GAAA;AAAA,IACL,EAAA,EAAI,GAAA;AAAA,IACJ,WAAA,EAAa,SAAA;AAAA,IACb,WAAA,EAAa,OAAA;AAAA,IACb,WAAA,EAAa,mBAAA;AAAA,IACb,YAAA,EAAc,IAAA;AAAA,IACd,EAAA,EAAI,IAAA;AAAA,IACJ,MAAA,EAAQ,SAAA;AAAA,IACR,MAAA,EAAQ,EAAC,WAAA,EAAa,UAAA,EAAU;AAAA,IAChC,aAAA,EAAe;AAAA,MACb,YAAA,EAAc,OAAA;AAAA,MACd,YAAA,EAAc,OAAA;AAAA,MACd,YAAA,EAAc,SAAA;AAAA,MACd,aAAA,EAAe;AAAA;AACjB,GACD,CAAA;AAAA,EACD,UAAUA,qBAAA,CAAI;AAAA,IACZ,IAAA,EAAM,IAAA;AAAA,IACN,aAAA,EAAe,QAAA;AAAA,IACf,cAAA,EAAgB,QAAA;AAAA,IAChB,UAAA,EAAY,QAAA;AAAA,IACZ,WAAA,EAAa,QAAA;AAAA,IACb,SAAA,EAAW,QAAA;AAAA,IACX,OAAA,EAAS;AAAA,MACP,IAAA,EAAM;AAAA;AACR,GACD,CAAA;AAAA,EACD,UAAUA,qBAAA,CAAI;AAAA,IACZ,MAAA,EAAQ,aAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACV,CAAA;AAAA,EACD,QAAQA,qBAAA,CAAI;AAAA,IACV,WAAA,EAAa,SAAA;AAAA,IACb,EAAA,EAAI;AAAA,GACL,CAAA;AAAA,EACD,aAAaA,qBAAA,CAAI;AAAA,IACf,QAAA,EAAU,UAAA;AAAA,IACV,CAAA,EAAG,KAAA;AAAA,IACH,CAAA,EAAG,KAAA;AAAA,IACH,CAAA,EAAG,CAAA;AAAA,IACH,CAAA,EAAG,MAAA;AAAA,IACH,QAAA,EAAU,QAAA;AAAA,IACV,QAAA,EAAU,YAAA;AAAA,IACV,UAAA,EAAY,QAAA;AAAA,IACZ,WAAA,EAAa;AAAA,GACd,CAAA;AAAA,EACD,UAAUA,qBAAA,CAAI;AAAA,IACZ,IAAA,EAAM,CAAA;AAAA,IACN,IAAA,EAAM,CAAA;AAAA,IACN,QAAA,EAAU,QAAA;AAAA,IACV,YAAA,EAAc,UAAA;AAAA,IACd,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EACD,MAAMA,qBAAA,CAAI;AAAA,IACR,OAAA,EAAS,aAAA;AAAA,IACT,KAAA,EAAO;AAAA,GACR;AACH,CAAA;AAEA,SAAS,aAAA,CACP,OACA,OAAA,EAMuC;AACvC,EAAA,IAAI,UAAA,GAAa,KAAA;AACjB,EAAA,IAAI,OAAA,CAAQ,UAAU,IAAA,EAAM;AAC1B,IAAA,MAAM,aAAA,GAAgB,OAAA,CAAQ,MAAA,CAC3B,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,CAAA,IAAA,KAAQ,IAAA,CAAK,IAAA,EAAK,CAAE,WAAA,EAAa,CAAA;AACxC,IAAA,UAAA,GAAa,UAAA,CAAW,MAAA;AAAA,MAAO,CAAA,IAAA,KAC7B,aAAA,CAAc,IAAA,CAAK,CAAA,IAAA,KAAQ;AACzB,QAAA,IAAI,IAAA,CAAK,UAAA,CAAW,GAAG,CAAA,EAAG;AACxB,UAAA,OAAO,IAAA,CAAK,IAAA,CAAK,WAAA,EAAY,CAAE,SAAS,IAAI,CAAA;AAAA,QAC9C;AACA,QAAA,IAAI,IAAA,CAAK,QAAA,CAAS,IAAI,CAAA,EAAG;AACvB,UAAA,OAAO,KAAK,IAAA,CAAK,UAAA,CAAW,KAAK,KAAA,CAAM,CAAA,EAAG,EAAE,CAAC,CAAA;AAAA,QAC/C;AACA,QAAA,OAAO,IAAA,CAAK,IAAA,CAAK,WAAA,EAAY,KAAM,IAAA;AAAA,MACrC,CAAC;AAAA,KACH;AACA,IAAA,IAAI,UAAA,CAAW,MAAA,KAAW,KAAA,CAAM,MAAA,EAAQ;AACtC,MAAA,OAAO;AAAA,QACL,KAAA,EAAO,UAAA;AAAA,QACP,KAAA,EAAO;AAAA,OACT;AAAA,IACF;AAAA,EACF;AACA,EAAA,IAAI,OAAA,CAAQ,WAAW,IAAA,EAAM;AAC3B,IAAA,MAAM,UAAU,OAAA,CAAQ,OAAA;AACxB,IAAA,MAAM,YAAY,UAAA,CAAW,IAAA,CAAK,CAAA,IAAA,KAAQ,IAAA,CAAK,OAAO,OAAO,CAAA;AAC7D,IAAA,IAAI,aAAa,IAAA,EAAM;AACrB,MAAA,OAAO;AAAA,QACL,OAAO,CAAA,CAAA,EAAI,SAAA,CAAU,IAAI,CAAA,UAAA,EAAa,cAAA,CAAe,OAAO,CAAC,CAAA,CAAA,CAAA;AAAA,QAC7D,OAAO,UAAA,CAAW,MAAA,CAAO,CAAA,IAAA,KAAQ,IAAA,CAAK,QAAQ,OAAO;AAAA,OACvD;AAAA,IACF;AAAA,EACF;AACA,EAAA,IACE,OAAA,CAAQ,cACR,OAAA,CAAQ,QAAA,IAAY,QACpB,UAAA,CAAW,MAAA,GAAS,QAAQ,QAAA,EAC5B;AACA,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,UAAA,CAAW,KAAA,CAAM,CAAA,EAAG,QAAQ,QAAQ,CAAA;AAAA,MAC3C,KAAA,EAAO,CAAA,QAAA,EAAW,OAAA,CAAQ,QAAQ,CAAA,eAAA;AAAA,KACpC;AAAA,EACF;AACA,EAAA,OAAO,EAAC,KAAA,EAAO,UAAA,EAAY,KAAA,EAAO,IAAA,EAAI;AACxC;AAEA,SAAS,aAAa,KAAA,EAA4C;AAChE,EAAA,IAAI,SAAS,IAAA,EAAM;AACjB,IAAA,OAAO,IAAA;AAAA,EACT;AACA,EAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA,EAAG;AACxB,IAAA,OAAO,KAAA,CAAM,MAAA,KAAW,CAAA,GAAI,IAAA,GAAO,KAAA,CAAM,GAAA,CAAI,CAAA,IAAA,KAAQ,IAAA,CAAK,IAAI,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AAAA,EAC3E;AACA,EAAA,OAAO,KAAA,CAAM,IAAA;AACf;AAKO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,OAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,OAAA;AAAA,EACP,WAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,UAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,SAAA,GAAY,KAAA;AAAA,EACZ,IAAA,GAAO,IAAA;AAAA,EACP,MAAA,EAAQ,eAAA;AAAA,EACR,SAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,KAAA;AAAA,EACA;AACF,CAAA,EAAsC;AACpC,EAAA,MAAM,UAAUC,WAAA,EAAM;AACtB,EAAA,MAAM,QAAA,GAAWC,aAAyB,IAAI,CAAA;AAC9C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,eAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAIA,eAAwB,IAAI,CAAA;AAC1E,EAAA,MAAM,MAAA,GACJ,oBACC,eAAA,IAAmB,IAAA,GAChB,SACA,EAAC,IAAA,EAAM,OAAA,EAAkB,OAAA,EAAS,eAAA,EAAe,CAAA;AACvD,EAAA,MAAM,aAAA,GACJ,WAAA,IAAe,IAAA,GAAO,CAAA,EAAG,OAAO,CAAA,YAAA,CAAA,GAAiB,MAAA;AACnD,EAAA,MAAM,eAAA,GAAkBC,oCAAA,CAAmB,OAAA,EAAS,MAAM,CAAA;AAC1D,EAAA,MAAM,WAAA,GAAcC,gCAAA,CAAe,aAAA,EAAe,eAAe,CAAA;AACjE,EAAA,MAAM,SAAA,GAAY,aAAa,KAAK,CAAA;AACpC,EAAA,MAAM,WAAA,GACJ,SAAA,IAAa,WAAA,KAAgB,UAAA,GAAa,cAAA,GAAiB,aAAA,CAAA;AAC7D,EAAA,MAAM,aAAa,IAAA,KAAS,UAAA;AAE5B,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAkB;AACrC,IAAA,IAAI,UAAA,EAAY;AACd,MAAA;AAAA,IACF;AACA,IAAA,MAAM,MAAA,GAAS,cAAc,KAAA,EAAO;AAAA,MAClC,MAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACD,CAAA;AACD,IAAA,kBAAA,CAAmB,OAAO,KAAK,CAAA;AAC/B,IAAA,IAAI,UAAA,EAAY;AACd,MAAC,QAAA,CAAqC,OAAO,KAAK,CAAA;AAAA,IACpD,CAAA,MAAA,IAAW,MAAA,CAAO,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG;AACpC,MAAC,SAAyC,IAAI,CAAA;AAAA,IAChD,CAAA,MAAO;AACL,MAAC,QAAA,CAAyC,MAAA,CAAO,KAAA,CAAM,CAAC,CAAC,CAAA;AAAA,IAC3D;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,kBAAA,CAAmB,IAAI,CAAA;AACvB,IAAA,IAAI,UAAA,EAAY;AACd,MAAC,QAAA,CAAqC,EAAE,CAAA;AAAA,IAC1C,CAAA,MAAO;AACL,MAAC,SAAyC,IAAI,CAAA;AAAA,IAChD;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,YAAY,UAAA,GACd;AAAA,IACE,WAAA,EAAa,CAAC,KAAA,KAAqC;AACjD,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,IAAI,CAAC,UAAA,EAAY;AACf,QAAA,aAAA,CAAc,IAAI,CAAA;AAAA,MACpB;AAAA,IACF,CAAA;AAAA,IACA,WAAA,EAAa,CAAC,KAAA,KAAqC;AACjD,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,aAAA,CAAc,KAAK,CAAA;AAAA,IACrB,CAAA;AAAA,IACA,UAAA,EAAY,CAAC,KAAA,KAAqC;AAChD,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,IAAI,CAAC,UAAA,EAAY;AACf,QAAA,aAAA,CAAc,IAAI,CAAA;AAAA,MACpB;AAAA,IACF,CAAA;AAAA,IACA,MAAA,EAAQ,CAAC,KAAA,KAAqC;AAC5C,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,aAAA,CAAc,KAAK,CAAA;AACnB,MAAA,IAAI,CAAC,UAAA,EAAY;AACf,QAAA,WAAA,CAAY,KAAA,CAAM,IAAA,CAAK,KAAA,CAAM,YAAA,CAAa,KAAK,CAAC,CAAA;AAAA,MAClD;AAAA,IACF;AAAA,MAEF,EAAC;AAEL,EAAA,MAAM,SAAA,GAAYC,8BAAA,CAAa,UAAA,EAAY,UAAU,CAAA;AAErD,EAAA,uBACEC,cAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,KAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,MAAA,EACE,UAAU,IAAA,GAAO,MAAA,GAAY,EAAC,GAAG,MAAA,EAAQ,WAAW,eAAA,EAAe;AAAA,MAErE,QAAA,kBAAAC,eAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,aAAW,SAAA,IAAa,MAAA;AAAA,UACxB,kBAAA,EAAkB,WAAA;AAAA,UAClB,iBAAe,UAAA,IAAc,MAAA;AAAA,UAC7B,SAAA,EAAWC,oBAAA;AAAA,YACT,MAAA,CAAO,OAAA;AAAA,YACP,UAAA,GACI,MAAA,CAAO,QAAA,GACPC,6BAAA,CAAY,EAAC,MAAM,MAAA,EAAQ,MAAA,EAAQ,IAAA,EAAM,UAAA,EAAW,CAAA;AAAA,YACxD,UAAA,GAAa,OAAO,QAAA,GAAW,MAAA;AAAA,YAC/B,UAAA,GAAa,OAAO,MAAA,GAAS,MAAA;AAAA,YAC7B;AAAA,WACF;AAAA,UACA,SAAS,MAAM;AACb,YAAA,IAAI,CAAC,UAAA,EAAY;AACf,cAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,YAC1B;AAAA,UACF,CAAA;AAAA,UACA,WAAW,CAAA,KAAA,KAAS;AAClB,YAAA,IAAI,CAAC,UAAA,KAAe,KAAA,CAAM,QAAQ,OAAA,IAAW,KAAA,CAAM,QAAQ,GAAA,CAAA,EAAM;AAC/D,cAAA,KAAA,CAAM,cAAA,EAAe;AACrB,cAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,YAC1B;AAAA,UACF,CAAA;AAAA,UACA,IAAA,EAAK,QAAA;AAAA,UACL,KAAA;AAAA,UACA,QAAA,EAAU,aAAa,EAAA,GAAK,CAAA;AAAA,UAC3B,GAAG,SAAA;AAAA,UACJ,QAAA,EAAA;AAAA,4BAAAJ,cAAA;AAAA,cAAC,OAAA;AAAA,cAAA;AAAA,gBACC,MAAA;AAAA,gBACA,kBAAA,EAAkB,WAAA;AAAA,gBAClB,cAAA,EAAc,MAAA,EAAQ,IAAA,KAAS,OAAA,IAAW,MAAA;AAAA,gBAC1C,WAAW,MAAA,CAAO,WAAA;AAAA,gBAClB,aAAA,EAAa,UAAA;AAAA,gBACb,QAAA,EAAU,UAAA;AAAA,gBACV,EAAA,EAAI,OAAA;AAAA,gBACJ,QAAA,EAAU,UAAA;AAAA,gBACV,UAAU,CAAA,KAAA,KAAS;AACjB,kBAAA,WAAA,CAAY,MAAM,IAAA,CAAK,KAAA,CAAM,OAAO,KAAA,IAAS,EAAE,CAAC,CAAA;AAChD,kBAAA,KAAA,CAAM,cAAc,KAAA,GAAQ,EAAA;AAAA,gBAC9B,CAAA;AAAA,gBACA,GAAA,EAAKK,2BAAA,CAAU,GAAA,EAAK,QAAQ,CAAA;AAAA,gBAC5B,QAAA,EAAU,UAAA;AAAA,gBACV,IAAA,EAAK;AAAA;AAAA,aACP;AAAA,YACC,SAAA,kCACEC,yBAAA,EAAA,EAAQ,IAAA,EAAM,aAAa,IAAA,GAAO,IAAA,EAAM,oBAEzCN,cAAA,CAAC,MAAA,EAAA,EAAK,WAAW,MAAA,CAAO,IAAA,EACtB,yCAACO,sBAAA,EAAA,EAAK,IAAA,EAAMC,oBAAQ,IAAA,EAAM,UAAA,GAAa,IAAA,GAAO,IAAA,EAAM,CAAA,EACtD,CAAA;AAAA,4BAEFR,cAAA;AAAA,cAACS,sBAAA;AAAA,cAAA;AAAA,gBACC,EAAA,EAAG,MAAA;AAAA,gBACH,WAAW,MAAA,CAAO,QAAA;AAAA,gBAClB,KAAA,EAAO,SAAA,IAAa,IAAA,GAAO,WAAA,GAAc,SAAA;AAAA,gBACxC,uBAAa,iBAAA,GAAoB;AAAA;AAAA,aACpC;AAAA,YACC,aAAa,IAAA,mBACZT,cAAA;AAAA,cAACU,wBAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAMC,aAAA;AAAA,gBACN,UAAA,EAAU,IAAA;AAAA,gBACV,KAAA,EAAO,SAAS,KAAK,CAAA,CAAA;AAAA,gBACrB,SAAS,CAAA,KAAA,KAAS;AAChB,kBAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,kBAAA,WAAA,EAAY;AAAA,gBACd,CAAA;AAAA,gBACA,IAAA,EAAK,IAAA;AAAA,gBACL,OAAA,EAAQ;AAAA;AAAA,aACV,GACE,IAAA;AAAA,YACH,MAAA,IAAU,IAAA,IAAQ,CAAC,UAAA,mBAClBX,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,IAAA,EAAO,QAAA,EAAAY,+BAAA,CAAc,MAAA,CAAO,IAAI,GAAE,CAAA,GACxD;AAAA;AAAA;AAAA;AACN;AAAA,GACF;AAEJ;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-PWL6TWVC.cjs","sourcesContent":["export function formatFileSize(bytes: number): string {\n  if (bytes < 1024) {\n    return `${bytes} B`;\n  }\n\n  if (bytes < 1024 * 1024) {\n    return `${(bytes / 1024).toFixed(1)} KB`;\n  }\n\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n}\n","import {Upload, X} from 'lucide-react';\nimport {\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type DragEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {formatFileSize} from '../../internal/formatFileSize';\nimport {mergeRefs} from '../../internal/mergeRefs';\nimport {Button} from '../Button';\nimport {\n  Field,\n  getNecessity,\n  type FieldNecessity,\n  type InputSize,\n  type InputStatus,\n} from '../Field';\nimport {inputRecipe} from '../Field/inputStyles';\nimport {\n  getDescribedBy,\n  getStatusIcon,\n  getStatusMessageID,\n} from '../Field/inputUtils';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Spinner} from '../Spinner';\nimport {Text} from '../Text';\n\nexport type FileInputMode = 'dropzone' | 'input';\n\ninterface FileInputBaseProps {\n  /**\n   * Comma-separated MIME types or file extensions the input accepts.\n   */\n  accept?: string;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the hidden file input.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text rendered below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Whether the input is in a loading state.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Field label text.\n   */\n  label: string;\n  /**\n   * Icon shown before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Maximum file size in bytes.\n   */\n  maxSize?: number;\n  /**\n   * Display mode: inline input or drag-and-drop dropzone.\n   * @default 'input'\n   */\n  mode?: FileInputMode;\n  /**\n   * Placeholder text shown when no file is selected.\n   */\n  placeholder?: string;\n  /**\n   * Ref forwarded to the hidden file input element.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Visual size of the input.\n   * @default 'md'\n   */\n  size?: InputSize;\n  /**\n   * Validation status displayed below the input.\n   */\n  status?: InputStatus;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\ninterface FileInputSingleProps extends FileInputBaseProps {\n  /**\n   * Whether multiple files can be selected.\n   */\n  isMultiple?: false;\n  /**\n   * Maximum number of files allowed. Only applicable when isMultiple is true.\n   */\n  maxFiles?: undefined;\n  /**\n   * Called when the selected file changes.\n   */\n  onChange: (file: File | null) => void;\n  /**\n   * Currently selected file.\n   */\n  value: File | null;\n}\n\ninterface FileInputMultipleProps extends FileInputBaseProps {\n  /**\n   * Whether multiple files can be selected.\n   */\n  isMultiple: true;\n  /**\n   * Maximum number of files allowed.\n   */\n  maxFiles?: number;\n  /**\n   * Called when the selected files change.\n   */\n  onChange: (files: File[]) => void;\n  /**\n   * Currently selected files.\n   */\n  value: File[];\n}\n\nexport type FileInputProps = (FileInputMultipleProps | FileInputSingleProps) &\n  FieldNecessity;\n\nconst styles = {\n  surface: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: '2',\n    px: '3',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'border.emphasized',\n    borderRadius: 'md',\n    bg: 'bg',\n    cursor: 'pointer',\n    _hover: {borderColor: 'fg.muted'},\n    _focusVisible: {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'primary',\n      outlineOffset: 'focusOffset',\n    },\n  }),\n  dropzone: css({\n    minH: '32',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderStyle: 'dashed',\n    textAlign: 'center',\n    '& > *': {\n      flex: 'none',\n    },\n  }),\n  disabled: css({\n    cursor: 'not-allowed',\n    opacity: 0.55,\n  }),\n  active: css({\n    borderColor: 'primary',\n    bg: 'bg.selected',\n  }),\n  hiddenInput: css({\n    position: 'absolute',\n    w: '1px',\n    h: '1px',\n    p: 0,\n    m: '-1px',\n    overflow: 'hidden',\n    clipPath: 'inset(50%)',\n    whiteSpace: 'nowrap',\n    borderWidth: 0,\n  }),\n  fileName: css({\n    flex: 1,\n    minW: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  icon: css({\n    display: 'inline-flex',\n    color: 'fg.muted',\n  }),\n} as const;\n\nfunction validateFiles(\n  files: File[],\n  options: {\n    accept?: string;\n    isMultiple: boolean;\n    maxFiles?: number;\n    maxSize?: number;\n  },\n): {error: string | null; files: File[]} {\n  let validFiles = files;\n  if (options.accept != null) {\n    const acceptedTypes = options.accept\n      .split(',')\n      .map(type => type.trim().toLowerCase());\n    validFiles = validFiles.filter(file =>\n      acceptedTypes.some(type => {\n        if (type.startsWith('.')) {\n          return file.name.toLowerCase().endsWith(type);\n        }\n        if (type.endsWith('/*')) {\n          return file.type.startsWith(type.slice(0, -1));\n        }\n        return file.type.toLowerCase() === type;\n      }),\n    );\n    if (validFiles.length !== files.length) {\n      return {\n        files: validFiles,\n        error: 'One or more files are not an accepted type.',\n      };\n    }\n  }\n  if (options.maxSize != null) {\n    const maxSize = options.maxSize;\n    const oversized = validFiles.find(file => file.size > maxSize);\n    if (oversized != null) {\n      return {\n        error: `\"${oversized.name}\" exceeds ${formatFileSize(maxSize)}.`,\n        files: validFiles.filter(file => file.size <= maxSize),\n      };\n    }\n  }\n  if (\n    options.isMultiple &&\n    options.maxFiles != null &&\n    validFiles.length > options.maxFiles\n  ) {\n    return {\n      files: validFiles.slice(0, options.maxFiles),\n      error: `Maximum ${options.maxFiles} files allowed.`,\n    };\n  }\n  return {files: validFiles, error: null};\n}\n\nfunction getFileNames(value: File | File[] | null): string | null {\n  if (value == null) {\n    return null;\n  }\n  if (Array.isArray(value)) {\n    return value.length === 0 ? null : value.map(file => file.name).join(', ');\n  }\n  return value.name;\n}\n\n/**\n * A file input supporting both inline and drag-and-drop dropzone modes.\n */\nexport function FileInput({\n  label,\n  value,\n  onChange,\n  accept,\n  isMultiple = false,\n  maxSize,\n  maxFiles,\n  mode = 'input',\n  placeholder,\n  description,\n  isLabelHidden = false,\n  isOptional,\n  isRequired,\n  isDisabled = false,\n  isLoading = false,\n  size = 'md',\n  status: statusFromProps,\n  labelIcon,\n  labelTooltip,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: FileInputProps): React.JSX.Element {\n  const inputId = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isDragOver, setIsDragOver] = useState(false);\n  const [validationError, setValidationError] = useState<string | null>(null);\n  const status =\n    statusFromProps ??\n    (validationError == null\n      ? undefined\n      : {type: 'error' as const, message: validationError});\n  const descriptionID =\n    description != null ? `${inputId}-description` : undefined;\n  const statusMessageID = getStatusMessageID(inputId, status);\n  const describedBy = getDescribedBy(descriptionID, statusMessageID);\n  const fileNames = getFileNames(value);\n  const displayText =\n    fileNames ?? placeholder ?? (isMultiple ? 'Choose files' : 'Choose file');\n  const isDropzone = mode === 'dropzone';\n\n  const handleFiles = (files: File[]) => {\n    if (isDisabled) {\n      return;\n    }\n    const result = validateFiles(files, {\n      accept,\n      isMultiple,\n      maxFiles,\n      maxSize,\n    });\n    setValidationError(result.error);\n    if (isMultiple) {\n      (onChange as (files: File[]) => void)(result.files);\n    } else if (result.files.length === 0) {\n      (onChange as (file: File | null) => void)(null);\n    } else {\n      (onChange as (file: File | null) => void)(result.files[0]);\n    }\n  };\n\n  const handleClear = () => {\n    setValidationError(null);\n    if (isMultiple) {\n      (onChange as (files: File[]) => void)([]);\n    } else {\n      (onChange as (file: File | null) => void)(null);\n    }\n  };\n\n  const dragProps = isDropzone\n    ? {\n        onDragEnter: (event: DragEvent<HTMLDivElement>) => {\n          event.preventDefault();\n          if (!isDisabled) {\n            setIsDragOver(true);\n          }\n        },\n        onDragLeave: (event: DragEvent<HTMLDivElement>) => {\n          event.preventDefault();\n          setIsDragOver(false);\n        },\n        onDragOver: (event: DragEvent<HTMLDivElement>) => {\n          event.preventDefault();\n          if (!isDisabled) {\n            setIsDragOver(true);\n          }\n        },\n        onDrop: (event: DragEvent<HTMLDivElement>) => {\n          event.preventDefault();\n          setIsDragOver(false);\n          if (!isDisabled) {\n            handleFiles(Array.from(event.dataTransfer.files));\n          }\n        },\n      }\n    : {};\n\n  const necessity = getNecessity(isOptional, isRequired);\n\n  return (\n    <Field\n      description={description}\n      descriptionID={descriptionID}\n      inputId={inputId}\n      isDisabled={isDisabled}\n      isLabelHidden={isLabelHidden}\n      {...necessity}\n      label={label}\n      labelIcon={labelIcon}\n      labelTooltip={labelTooltip}\n      status={\n        status == null ? undefined : {...status, messageID: statusMessageID}\n      }>\n      <div\n        aria-busy={isLoading || undefined}\n        aria-describedby={describedBy}\n        aria-disabled={isDisabled || undefined}\n        className={cx(\n          styles.surface,\n          isDropzone\n            ? styles.dropzone\n            : inputRecipe({size, status: status?.type, isDisabled}),\n          isDisabled ? styles.disabled : undefined,\n          isDragOver ? styles.active : undefined,\n          className,\n        )}\n        onClick={() => {\n          if (!isDisabled) {\n            inputRef.current?.click();\n          }\n        }}\n        onKeyDown={event => {\n          if (!isDisabled && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            inputRef.current?.click();\n          }\n        }}\n        role=\"button\"\n        style={style}\n        tabIndex={isDisabled ? -1 : 0}\n        {...dragProps}>\n        <input\n          accept={accept}\n          aria-describedby={describedBy}\n          aria-invalid={status?.type === 'error' || undefined}\n          className={styles.hiddenInput}\n          data-testid={dataTestId}\n          disabled={isDisabled}\n          id={inputId}\n          multiple={isMultiple}\n          onChange={event => {\n            handleFiles(Array.from(event.target.files ?? []));\n            event.currentTarget.value = '';\n          }}\n          ref={mergeRefs(ref, inputRef)}\n          required={isRequired}\n          type=\"file\"\n        />\n        {isLoading ? (\n          <Spinner size={isDropzone ? 'md' : 'sm'} />\n        ) : (\n          <span className={styles.icon}>\n            <Icon icon={Upload} size={isDropzone ? 'md' : 'sm'} />\n          </span>\n        )}\n        <Text\n          as=\"span\"\n          className={styles.fileName}\n          color={fileNames == null ? 'secondary' : 'primary'}>\n          {isDragOver ? 'Drop files here' : displayText}\n        </Text>\n        {fileNames != null ? (\n          <Button\n            icon={X}\n            isIconOnly\n            label={`Clear ${label}`}\n            onClick={event => {\n              event.stopPropagation();\n              handleClear();\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          />\n        ) : null}\n        {status != null && !isDropzone ? (\n          <span className={styles.icon}>{getStatusIcon(status.type)}</span>\n        ) : null}\n      </div>\n    </Field>\n  );\n}\n\nFileInput.displayName = 'FileInput';\n"]}

package/dist/chunk-PXVVTPRJ.js

@@ -0,0 +1,278 @@
+import { getStatusMessageID, getDescribedBy } from './chunk-WOIWI2UO.js';
+import { Spinner } from './chunk-S54CKWKV.js';
+import { Text } from './chunk-J2FCNWYM.js';
+import { VisuallyHidden } from './chunk-EXYBQVZT.js';
+import { Tooltip } from './chunk-EMHLPPQZ.js';
+import { sva } from './chunk-EHCAF6D3.js';
+import { Icon } from './chunk-7T3SWOY7.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { Info } from 'lucide-react';
+import { useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Switch/Switch.recipe.ts
+var switchRecipe = sva({
+  slots: [
+    "field",
+    "row",
+    "labelWrapper",
+    "label",
+    "labelIcon",
+    "requiredness",
+    "tooltipIcon",
+    "status",
+    "control",
+    "input",
+    "track",
+    "thumb"
+  ],
+  base: {
+    field: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1",
+      w: "fit-content"
+    },
+    row: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2"
+    },
+    labelWrapper: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5",
+      minW: 0
+    },
+    label: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "1",
+      w: "fit-content",
+      color: "fg.muted",
+      cursor: "pointer"
+    },
+    labelIcon: {
+      display: "inline-flex",
+      alignItems: "center"
+    },
+    requiredness: {
+      fontWeight: "normal",
+      color: "fg.muted"
+    },
+    tooltipIcon: {
+      display: "inline-flex",
+      color: "fg.muted"
+    },
+    status: {
+      fontFamily: "body",
+      fontSize: "sm",
+      lineHeight: "normal",
+      px: "2",
+      py: "1.5",
+      mt: "1",
+      borderRadius: "md"
+    },
+    control: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      flexShrink: 0,
+      w: "10",
+      h: "6",
+      borderRadius: "full",
+      isolation: "isolate",
+      "&:has(input:focus-visible)": {
+        outlineWidth: "focus",
+        outlineStyle: "solid",
+        outlineColor: "primary",
+        outlineOffset: "focusOffset"
+      },
+      '& [data-switch-track][data-selected="true"]': {
+        bg: "primary"
+      },
+      "&:has(input:active:not(:disabled)) [data-switch-track]": {
+        bg: "primary.active"
+      }
+    },
+    input: {
+      position: "absolute",
+      inset: 0,
+      m: 0,
+      p: 0,
+      opacity: 0,
+      cursor: "pointer",
+      zIndex: 1,
+      _disabled: {
+        cursor: "not-allowed"
+      }
+    },
+    track: {
+      display: "flex",
+      alignItems: "center",
+      w: "10",
+      h: "6",
+      p: "1",
+      borderRadius: "full",
+      bg: "track.emphasized",
+      transitionProperty: "background-color",
+      transitionDuration: "fast",
+      transitionTimingFunction: "default",
+      pointerEvents: "none",
+      "@media (prefers-reduced-motion: reduce)": {
+        transitionDuration: "0s"
+      }
+    },
+    thumb: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      w: "4",
+      h: "4",
+      borderRadius: "full",
+      bg: "bg",
+      color: "primary",
+      transform: "translateX(0)",
+      transitionProperty: "transform",
+      transitionDuration: "fast",
+      transitionTimingFunction: "default",
+      "@media (prefers-reduced-motion: reduce)": {
+        transitionDuration: "0s"
+      }
+    }
+  },
+  variants: {
+    labelSpacing: {
+      default: {},
+      spread: {
+        field: { w: "full" },
+        row: { justifyContent: "space-between", w: "full" }
+      }
+    },
+    isSelected: {
+      true: {
+        track: { bg: "primary" },
+        thumb: { transform: "translateX(16px)" }
+      },
+      false: {}
+    },
+    isDisabled: {
+      true: {
+        label: { color: "fg.disabled", cursor: "not-allowed" },
+        track: { opacity: 0.5 }
+      },
+      false: {}
+    },
+    // Applied only when a status message is rendered (status?.type is defined).
+    status: {
+      warning: { status: { bg: "surface.yellow", color: "surface.yellow.fg" } },
+      error: { status: { bg: "surface.red", color: "surface.red.fg" } },
+      success: { status: { bg: "surface.green", color: "surface.green.fg" } }
+    }
+  },
+  defaultVariants: {
+    labelSpacing: "default",
+    isSelected: false,
+    isDisabled: false
+  }
+});
+function Switch({
+  className,
+  "data-testid": dataTestId,
+  description,
+  isDisabled = false,
+  isLabelHidden = false,
+  isLoading = false,
+  isOptional,
+  isRequired,
+  label,
+  labelIcon,
+  labelTooltip,
+  labelPosition = "end",
+  labelSpacing = "default",
+  onBlur,
+  onChange,
+  onFocus,
+  ref,
+  status,
+  style,
+  isSelected
+}) {
+  const inputId = useId();
+  const descriptionID = description != null ? `${inputId}-description` : void 0;
+  const statusMessageID = getStatusMessageID(inputId, status);
+  const describedBy = getDescribedBy(descriptionID, statusMessageID);
+  const requirednessText = isOptional ? "Optional" : isRequired ? "Required" : null;
+  const classes = switchRecipe({
+    labelSpacing,
+    isSelected,
+    isDisabled,
+    status: status?.type
+  });
+  const control = /* @__PURE__ */ jsxs("span", { className: classes.control, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "aria-busy": isLoading || void 0,
+        "aria-describedby": describedBy,
+        "aria-invalid": status?.type === "error" || void 0,
+        checked: isSelected,
+        className: classes.input,
+        "data-testid": dataTestId,
+        disabled: isDisabled,
+        id: inputId,
+        onBlur,
+        onChange: (event) => onChange(event.target.checked, event),
+        onFocus,
+        ref,
+        required: isRequired,
+        role: "switch",
+        type: "checkbox"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: classes.track,
+        "data-selected": isSelected ? "true" : void 0,
+        "data-switch-track": "",
+        children: /* @__PURE__ */ jsx("span", { className: classes.thumb, children: isLoading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : null })
+      }
+    ),
+    isLoading ? /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", children: "Loading" }) }) : null
+  ] });
+  const labelNode = /* @__PURE__ */ jsxs("div", { className: classes.labelWrapper, children: [
+    /* @__PURE__ */ jsxs("label", { className: classes.label, htmlFor: inputId, children: [
+      labelIcon != null ? /* @__PURE__ */ jsx("span", { className: classes.labelIcon, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon: labelIcon, size: "sm" }) }) : null,
+      /* @__PURE__ */ jsx(Text, { as: "span", color: "inherit", type: "label", children: label }),
+      requirednessText != null ? /* @__PURE__ */ jsxs(Text, { as: "span", className: classes.requiredness, type: "supporting", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
+        requirednessText
+      ] }) : null,
+      labelTooltip != null ? /* @__PURE__ */ jsx(Tooltip, { content: labelTooltip, children: /* @__PURE__ */ jsx("span", { className: classes.tooltipIcon, children: /* @__PURE__ */ jsx(Icon, { icon: Info, size: "sm" }) }) }) : null
+    ] }),
+    description != null ? /* @__PURE__ */ jsx(Text, { as: "span", color: "secondary", id: descriptionID, type: "supporting", children: description }) : null
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: cx(classes.field, className), style, children: [
+    /* @__PURE__ */ jsxs("div", { className: classes.row, children: [
+      labelPosition === "start" ? isLabelHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children: labelNode }) : labelNode : control,
+      labelPosition === "start" ? control : isLabelHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children: labelNode }) : labelNode
+    ] }),
+    status?.message != null ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-live": status.type === "error" ? "assertive" : "polite",
+        className: classes.status,
+        id: statusMessageID,
+        role: status.type === "error" ? "alert" : "status",
+        children: status.message
+      }
+    ) : null
+  ] });
+}
+Switch.displayName = "Switch";
+
+export { Switch };
+//# sourceMappingURL=chunk-PXVVTPRJ.js.map
+//# sourceMappingURL=chunk-PXVVTPRJ.js.map

package/dist/chunk-PXVVTPRJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Switch/Switch.recipe.ts","../src/components/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAEO,IAAM,eAAe,GAAA,CAAI;AAAA,EAC9B,KAAA,EAAO;AAAA,IACL,OAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,QAAA;AAAA,MACf,GAAA,EAAK,GAAA;AAAA,MACL,CAAA,EAAG;AAAA,KACL;AAAA,IACA,GAAA,EAAK;AAAA,MACH,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,GAAA,EAAK;AAAA,KACP;AAAA,IACA,YAAA,EAAc;AAAA,MACZ,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,QAAA;AAAA,MACf,GAAA,EAAK,KAAA;AAAA,MACL,IAAA,EAAM;AAAA,KACR;AAAA,IACA,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,aAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,GAAA,EAAK,GAAA;AAAA,MACL,CAAA,EAAG,aAAA;AAAA,MACH,KAAA,EAAO,UAAA;AAAA,MACP,MAAA,EAAQ;AAAA,KACV;AAAA,IACA,SAAA,EAAW;AAAA,MACT,OAAA,EAAS,aAAA;AAAA,MACT,UAAA,EAAY;AAAA,KACd;AAAA,IACA,YAAA,EAAc;AAAA,MACZ,UAAA,EAAY,QAAA;AAAA,MACZ,KAAA,EAAO;AAAA,KACT;AAAA,IACA,WAAA,EAAa;AAAA,MACX,OAAA,EAAS,aAAA;AAAA,MACT,KAAA,EAAO;AAAA,KACT;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,UAAA,EAAY,MAAA;AAAA,MACZ,QAAA,EAAU,IAAA;AAAA,MACV,UAAA,EAAY,QAAA;AAAA,MACZ,EAAA,EAAI,GAAA;AAAA,MACJ,EAAA,EAAI,KAAA;AAAA,MACJ,EAAA,EAAI,GAAA;AAAA,MACJ,YAAA,EAAc;AAAA,KAChB;AAAA,IACA,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,UAAA;AAAA,MACV,OAAA,EAAS,aAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,UAAA,EAAY,CAAA;AAAA,MACZ,CAAA,EAAG,IAAA;AAAA,MACH,CAAA,EAAG,GAAA;AAAA,MACH,YAAA,EAAc,MAAA;AAAA,MACd,SAAA,EAAW,SAAA;AAAA,MACX,4BAAA,EAA8B;AAAA,QAC5B,YAAA,EAAc,OAAA;AAAA,QACd,YAAA,EAAc,OAAA;AAAA,QACd,YAAA,EAAc,SAAA;AAAA,QACd,aAAA,EAAe;AAAA,OACjB;AAAA,MACA,6CAAA,EAA+C;AAAA,QAC7C,EAAA,EAAI;AAAA,OACN;AAAA,MACA,wDAAA,EAA0D;AAAA,QACxD,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,QAAA,EAAU,UAAA;AAAA,MACV,KAAA,EAAO,CAAA;AAAA,MACP,CAAA,EAAG,CAAA;AAAA,MACH,CAAA,EAAG,CAAA;AAAA,MACH,OAAA,EAAS,CAAA;AAAA,MACT,MAAA,EAAQ,SAAA;AAAA,MACR,MAAA,EAAQ,CAAA;AAAA,MACR,SAAA,EAAW;AAAA,QACT,MAAA,EAAQ;AAAA;AACV,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,CAAA,EAAG,IAAA;AAAA,MACH,CAAA,EAAG,GAAA;AAAA,MACH,CAAA,EAAG,GAAA;AAAA,MACH,YAAA,EAAc,MAAA;AAAA,MACd,EAAA,EAAI,kBAAA;AAAA,MACJ,kBAAA,EAAoB,kBAAA;AAAA,MACpB,kBAAA,EAAoB,MAAA;AAAA,MACpB,wBAAA,EAA0B,SAAA;AAAA,MAC1B,aAAA,EAAe,MAAA;AAAA,MACf,yCAAA,EAA2C;AAAA,QACzC,kBAAA,EAAoB;AAAA;AACtB,KACF;AAAA,IACA,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,aAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,QAAA;AAAA,MAChB,CAAA,EAAG,GAAA;AAAA,MACH,CAAA,EAAG,GAAA;AAAA,MACH,YAAA,EAAc,MAAA;AAAA,MACd,EAAA,EAAI,IAAA;AAAA,MACJ,KAAA,EAAO,SAAA;AAAA,MACP,SAAA,EAAW,eAAA;AAAA,MACX,kBAAA,EAAoB,WAAA;AAAA,MACpB,kBAAA,EAAoB,MAAA;AAAA,MACpB,wBAAA,EAA0B,SAAA;AAAA,MAC1B,yCAAA,EAA2C;AAAA,QACzC,kBAAA,EAAoB;AAAA;AACtB;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,YAAA,EAAc;AAAA,MACZ,SAAS,EAAC;AAAA,MACV,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO,EAAC,CAAA,EAAG,MAAA,EAAM;AAAA,QACjB,GAAA,EAAK,EAAC,cAAA,EAAgB,eAAA,EAAiB,GAAG,MAAA;AAAM;AAClD,KACF;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,QACJ,KAAA,EAAO,EAAC,EAAA,EAAI,SAAA,EAAS;AAAA,QACrB,KAAA,EAAO,EAAC,SAAA,EAAW,kBAAA;AAAkB,OACvC;AAAA,MACA,OAAO;AAAC,KACV;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,QACJ,KAAA,EAAO,EAAC,KAAA,EAAO,aAAA,EAAe,QAAQ,aAAA,EAAa;AAAA,QACnD,KAAA,EAAO,EAAC,OAAA,EAAS,GAAA;AAAG,OACtB;AAAA,MACA,OAAO;AAAC,KACV;AAAA;AAAA,IAEA,MAAA,EAAQ;AAAA,MACN,OAAA,EAAS,EAAC,MAAA,EAAQ,EAAC,IAAI,gBAAA,EAAkB,KAAA,EAAO,qBAAmB,EAAC;AAAA,MACpE,KAAA,EAAO,EAAC,MAAA,EAAQ,EAAC,IAAI,aAAA,EAAe,KAAA,EAAO,kBAAgB,EAAC;AAAA,MAC5D,OAAA,EAAS,EAAC,MAAA,EAAQ,EAAC,IAAI,eAAA,EAAiB,KAAA,EAAO,oBAAkB;AAAC;AACpE,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,YAAA,EAAc,SAAA;AAAA,IACd,UAAA,EAAY,KAAA;AAAA,IACZ,UAAA,EAAY;AAAA;AAEhB,CAAC,CAAA;AC7DM,SAAS,MAAA,CAAO;AAAA,EACrB,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,WAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,aAAA,GAAgB,KAAA;AAAA,EAChB,SAAA,GAAY,KAAA;AAAA,EACZ,UAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,YAAA,GAAe,SAAA;AAAA,EACf,MAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAAmC;AACjC,EAAA,MAAM,UAAU,KAAA,EAAM;AACtB,EAAA,MAAM,aAAA,GACJ,WAAA,IAAe,IAAA,GAAO,CAAA,EAAG,OAAO,CAAA,YAAA,CAAA,GAAiB,MAAA;AACnD,EAAA,MAAM,eAAA,GAAkB,kBAAA,CAAmB,OAAA,EAAS,MAAM,CAAA;AAC1D,EAAA,MAAM,WAAA,GAAc,cAAA,CAAe,aAAA,EAAe,eAAe,CAAA;AACjE,EAAA,MAAM,gBAAA,GAAmB,UAAA,GACrB,UAAA,GACA,UAAA,GACE,UAAA,GACA,IAAA;AACN,EAAA,MAAM,UAAU,YAAA,CAAa;AAAA,IAC3B,YAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAQ,MAAA,EAAQ;AAAA,GACjB,CAAA;AACD,EAAA,MAAM,OAAA,mBACJ,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,QAAQ,OAAA,EACvB,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,aAAW,SAAA,IAAa,MAAA;AAAA,QACxB,kBAAA,EAAkB,WAAA;AAAA,QAClB,cAAA,EAAc,MAAA,EAAQ,IAAA,KAAS,OAAA,IAAW,MAAA;AAAA,QAC1C,OAAA,EAAS,UAAA;AAAA,QACT,WAAW,OAAA,CAAQ,KAAA;AAAA,QACnB,aAAA,EAAa,UAAA;AAAA,QACb,QAAA,EAAU,UAAA;AAAA,QACV,EAAA,EAAI,OAAA;AAAA,QACJ,MAAA;AAAA,QACA,UAAU,CAAA,KAAA,KAAS,QAAA,CAAS,KAAA,CAAM,MAAA,CAAO,SAAS,KAAK,CAAA;AAAA,QACvD,OAAA;AAAA,QACA,GAAA;AAAA,QACA,QAAA,EAAU,UAAA;AAAA,QACV,IAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAK;AAAA;AAAA,KACP;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAY,MAAA;AAAA,QACZ,WAAW,OAAA,CAAQ,KAAA;AAAA,QACnB,eAAA,EAAe,aAAa,MAAA,GAAS,MAAA;AAAA,QACrC,mBAAA,EAAkB,EAAA;AAAA,QAClB,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAA,CAAQ,KAAA,EACtB,QAAA,EAAA,SAAA,mBAAY,GAAA,CAAC,OAAA,EAAA,EAAQ,IAAA,EAAK,IAAA,EAAK,CAAA,GAAK,IAAA,EACvC;AAAA;AAAA,KACF;AAAA,IACC,SAAA,uBACE,cAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,UAAK,IAAA,EAAK,QAAA,EAAS,QAAA,EAAA,SAAA,EAAO,CAAA,EAC7B,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEF,EAAA,MAAM,SAAA,mBACJ,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,YAAA,EACtB,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAW,OAAA,CAAQ,KAAA,EAAO,SAAS,OAAA,EACvC,QAAA,EAAA;AAAA,MAAA,SAAA,IAAa,IAAA,mBACZ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,QAAQ,SAAA,EACvB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,aAAY,IAAA,EAAM,SAAA,EAAW,IAAA,EAAK,IAAA,EAAK,GACrD,CAAA,GACE,IAAA;AAAA,sBACJ,GAAA,CAAC,QAAK,EAAA,EAAG,MAAA,EAAO,OAAM,SAAA,EAAU,IAAA,EAAK,SAClC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,MACC,gBAAA,IAAoB,IAAA,mBACnB,IAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,QAAO,SAAA,EAAW,OAAA,CAAQ,YAAA,EAAc,IAAA,EAAK,YAAA,EACpD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,QAAA,EAAA,QAAA,EAAG,CAAA;AAAA,QAC3B;AAAA,OAAA,EACH,CAAA,GACE,IAAA;AAAA,MACH,gBAAgB,IAAA,mBACf,GAAA,CAAC,WAAQ,OAAA,EAAS,YAAA,EAChB,8BAAC,MAAA,EAAA,EAAK,SAAA,EAAW,QAAQ,WAAA,EACvB,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAA,EAAM,IAAA,EAAM,MAAK,IAAA,EAAK,CAAA,EAC9B,GACF,CAAA,GACE;AAAA,KAAA,EACN,CAAA;AAAA,IACC,WAAA,IAAe,IAAA,mBACd,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,MAAA,EAAO,KAAA,EAAM,WAAA,EAAY,EAAA,EAAI,aAAA,EAAe,IAAA,EAAK,YAAA,EACvD,uBACH,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAGF,EAAA,uBACE,IAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,QAAQ,KAAA,EAAO,SAAS,GAAG,KAAA,EAC5C,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,GAAA,EACrB,QAAA,EAAA;AAAA,MAAA,aAAA,KAAkB,UACjB,aAAA,mBACE,GAAA,CAAC,cAAA,EAAA,EAAgB,QAAA,EAAA,SAAA,EAAU,IAE3B,SAAA,GAGF,OAAA;AAAA,MAED,kBAAkB,OAAA,GACjB,OAAA,GACE,gCACF,GAAA,CAAC,cAAA,EAAA,EAAgB,qBAAU,CAAA,GAE3B;AAAA,KAAA,EAEJ,CAAA;AAAA,IACC,MAAA,EAAQ,WAAW,IAAA,mBAClB,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAW,MAAA,CAAO,IAAA,KAAS,OAAA,GAAU,WAAA,GAAc,QAAA;AAAA,QACnD,WAAW,OAAA,CAAQ,MAAA;AAAA,QACnB,EAAA,EAAI,eAAA;AAAA,QACJ,IAAA,EAAM,MAAA,CAAO,IAAA,KAAS,OAAA,GAAU,OAAA,GAAU,QAAA;AAAA,QACzC,QAAA,EAAA,MAAA,CAAO;AAAA;AAAA,KACV,GACE;AAAA,GAAA,EACN,CAAA;AAEJ;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-PXVVTPRJ.js","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const switchRecipe = sva({\n  slots: [\n    'field',\n    'row',\n    'labelWrapper',\n    'label',\n    'labelIcon',\n    'requiredness',\n    'tooltipIcon',\n    'status',\n    'control',\n    'input',\n    'track',\n    'thumb',\n  ],\n  base: {\n    field: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1',\n      w: 'fit-content',\n    },\n    row: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '2',\n    },\n    labelWrapper: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '0.5',\n      minW: 0,\n    },\n    label: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '1',\n      w: 'fit-content',\n      color: 'fg.muted',\n      cursor: 'pointer',\n    },\n    labelIcon: {\n      display: 'inline-flex',\n      alignItems: 'center',\n    },\n    requiredness: {\n      fontWeight: 'normal',\n      color: 'fg.muted',\n    },\n    tooltipIcon: {\n      display: 'inline-flex',\n      color: 'fg.muted',\n    },\n    status: {\n      fontFamily: 'body',\n      fontSize: 'sm',\n      lineHeight: 'normal',\n      px: '2',\n      py: '1.5',\n      mt: '1',\n      borderRadius: 'md',\n    },\n    control: {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      flexShrink: 0,\n      w: '10',\n      h: '6',\n      borderRadius: 'full',\n      isolation: 'isolate',\n      '&:has(input:focus-visible)': {\n        outlineWidth: 'focus',\n        outlineStyle: 'solid',\n        outlineColor: 'primary',\n        outlineOffset: 'focusOffset',\n      },\n      '& [data-switch-track][data-selected=\"true\"]': {\n        bg: 'primary',\n      },\n      '&:has(input:active:not(:disabled)) [data-switch-track]': {\n        bg: 'primary.active',\n      },\n    },\n    input: {\n      position: 'absolute',\n      inset: 0,\n      m: 0,\n      p: 0,\n      opacity: 0,\n      cursor: 'pointer',\n      zIndex: 1,\n      _disabled: {\n        cursor: 'not-allowed',\n      },\n    },\n    track: {\n      display: 'flex',\n      alignItems: 'center',\n      w: '10',\n      h: '6',\n      p: '1',\n      borderRadius: 'full',\n      bg: 'track.emphasized',\n      transitionProperty: 'background-color',\n      transitionDuration: 'fast',\n      transitionTimingFunction: 'default',\n      pointerEvents: 'none',\n      '@media (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0s',\n      },\n    },\n    thumb: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      w: '4',\n      h: '4',\n      borderRadius: 'full',\n      bg: 'bg',\n      color: 'primary',\n      transform: 'translateX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: 'fast',\n      transitionTimingFunction: 'default',\n      '@media (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0s',\n      },\n    },\n  },\n  variants: {\n    labelSpacing: {\n      default: {},\n      spread: {\n        field: {w: 'full'},\n        row: {justifyContent: 'space-between', w: 'full'},\n      },\n    },\n    isSelected: {\n      true: {\n        track: {bg: 'primary'},\n        thumb: {transform: 'translateX(16px)'},\n      },\n      false: {},\n    },\n    isDisabled: {\n      true: {\n        label: {color: 'fg.disabled', cursor: 'not-allowed'},\n        track: {opacity: 0.5},\n      },\n      false: {},\n    },\n    // Applied only when a status message is rendered (status?.type is defined).\n    status: {\n      warning: {status: {bg: 'surface.yellow', color: 'surface.yellow.fg'}},\n      error: {status: {bg: 'surface.red', color: 'surface.red.fg'}},\n      success: {status: {bg: 'surface.green', color: 'surface.green.fg'}},\n    },\n  },\n  defaultVariants: {\n    labelSpacing: 'default',\n    isSelected: false,\n    isDisabled: false,\n  },\n});\n\nexport type SwitchVariants = RecipeVariantProps<typeof switchRecipe>;\n","import {Info} from 'lucide-react';\nimport {\n  useId,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {VisuallyHidden} from '../../internal/VisuallyHidden';\nimport {cx} from '../../internal/cx';\nimport type {FieldNecessity, InputStatus} from '../Field';\nimport {getDescribedBy, getStatusMessageID} from '../Field/inputUtils';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Spinner} from '../Spinner';\nimport {Text} from '../Text';\nimport {Tooltip} from '../Tooltip';\nimport {switchRecipe} from './Switch.recipe';\n\nexport type SwitchLabelPosition = 'end' | 'start';\nexport type SwitchLabelSpacing = 'default' | 'spread';\n\nexport type SwitchProps = {\n  /**\n   * Additional CSS class names applied to the field root.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the checkbox input.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text displayed below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Whether the switch is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Whether the switch is loading.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Whether the switch is on.\n   */\n  isSelected: boolean;\n  /**\n   * Switch label.\n   */\n  label: string;\n  /**\n   * Content rendered before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Which side of the switch the label appears on.\n   * @default 'end'\n   */\n  labelPosition?: SwitchLabelPosition;\n  /**\n   * Spacing behavior between label and switch.\n   * @default 'default'\n   */\n  labelSpacing?: SwitchLabelSpacing;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Called when the switch loses focus.\n   */\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Called when the checked state changes.\n   */\n  onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * Called when the switch receives focus.\n   */\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Ref forwarded to the checkbox input.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Validation status displayed below the switch.\n   */\n  status?: InputStatus;\n  /**\n   * Inline styles applied to the field root.\n   */\n  style?: CSSProperties;\n} & FieldNecessity;\n\n/**\n * A controlled switch for boolean settings.\n */\nexport function Switch({\n  className,\n  'data-testid': dataTestId,\n  description,\n  isDisabled = false,\n  isLabelHidden = false,\n  isLoading = false,\n  isOptional,\n  isRequired,\n  label,\n  labelIcon,\n  labelTooltip,\n  labelPosition = 'end',\n  labelSpacing = 'default',\n  onBlur,\n  onChange,\n  onFocus,\n  ref,\n  status,\n  style,\n  isSelected,\n}: SwitchProps): React.JSX.Element {\n  const inputId = useId();\n  const descriptionID =\n    description != null ? `${inputId}-description` : undefined;\n  const statusMessageID = getStatusMessageID(inputId, status);\n  const describedBy = getDescribedBy(descriptionID, statusMessageID);\n  const requirednessText = isOptional\n    ? 'Optional'\n    : isRequired\n      ? 'Required'\n      : null;\n  const classes = switchRecipe({\n    labelSpacing,\n    isSelected,\n    isDisabled,\n    status: status?.type,\n  });\n  const control = (\n    <span className={classes.control}>\n      <input\n        aria-busy={isLoading || undefined}\n        aria-describedby={describedBy}\n        aria-invalid={status?.type === 'error' || undefined}\n        checked={isSelected}\n        className={classes.input}\n        data-testid={dataTestId}\n        disabled={isDisabled}\n        id={inputId}\n        onBlur={onBlur}\n        onChange={event => onChange(event.target.checked, event)}\n        onFocus={onFocus}\n        ref={ref}\n        required={isRequired}\n        role=\"switch\"\n        type=\"checkbox\"\n      />\n      <span\n        aria-hidden=\"true\"\n        className={classes.track}\n        data-selected={isSelected ? 'true' : undefined}\n        data-switch-track=\"\">\n        <span className={classes.thumb}>\n          {isLoading ? <Spinner size=\"sm\" /> : null}\n        </span>\n      </span>\n      {isLoading ? (\n        <VisuallyHidden>\n          <span role=\"status\">Loading</span>\n        </VisuallyHidden>\n      ) : null}\n    </span>\n  );\n  const labelNode = (\n    <div className={classes.labelWrapper}>\n      <label className={classes.label} htmlFor={inputId}>\n        {labelIcon != null ? (\n          <span className={classes.labelIcon}>\n            <Icon color=\"secondary\" icon={labelIcon} size=\"sm\" />\n          </span>\n        ) : null}\n        <Text as=\"span\" color=\"inherit\" type=\"label\">\n          {label}\n        </Text>\n        {requirednessText != null ? (\n          <Text as=\"span\" className={classes.requiredness} type=\"supporting\">\n            <span aria-hidden=\"true\"> · </span>\n            {requirednessText}\n          </Text>\n        ) : null}\n        {labelTooltip != null ? (\n          <Tooltip content={labelTooltip}>\n            <span className={classes.tooltipIcon}>\n              <Icon icon={Info} size=\"sm\" />\n            </span>\n          </Tooltip>\n        ) : null}\n      </label>\n      {description != null ? (\n        <Text as=\"span\" color=\"secondary\" id={descriptionID} type=\"supporting\">\n          {description}\n        </Text>\n      ) : null}\n    </div>\n  );\n\n  return (\n    <div className={cx(classes.field, className)} style={style}>\n      <div className={classes.row}>\n        {labelPosition === 'start' ? (\n          isLabelHidden ? (\n            <VisuallyHidden>{labelNode}</VisuallyHidden>\n          ) : (\n            labelNode\n          )\n        ) : (\n          control\n        )}\n        {labelPosition === 'start' ? (\n          control\n        ) : isLabelHidden ? (\n          <VisuallyHidden>{labelNode}</VisuallyHidden>\n        ) : (\n          labelNode\n        )}\n      </div>\n      {status?.message != null ? (\n        <div\n          aria-live={status.type === 'error' ? 'assertive' : 'polite'}\n          className={classes.status}\n          id={statusMessageID}\n          role={status.type === 'error' ? 'alert' : 'status'}>\n          {status.message}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nSwitch.displayName = 'Switch';\n"]}