@nurix/ui-component-library 1.1.3-stage.78 → 1.1.3-stage.80

package/dist/index.mjs

@@ -2,107 +2,12 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 
-// src/theme/variables.ts
-var LEGO_TOKENS = {
-  twColors: {
-    mode1: {
-      slate50: "hsla(210, 40, 98, 1)",
-      slate100: "hsla(210, 40, 96, 1)",
-      slate200: "hsla(214, 32, 91, 1)",
-      slate300: "hsla(213, 27, 84, 1)",
-      slate400: "hsla(215, 20, 65, 1)",
-      slate500: "hsla(215, 14, 47, 1)",
-      slate600: "hsla(215, 19, 35, 1)",
-      slate700: "hsla(215, 25, 27, 1)",
-      slate800: "hsla(217, 33, 17, 1)",
-      slate900: "hsla(222, 47, 11, 1)",
-      slate950: "hsla(229, 84, 5, 1)",
-      white: "hsla(0, 0, 100, 1)",
-      black: "hsla(0, 0, 0, 1)"
-    }
-  },
-  uIColors: {
-    lightMode: {
-      background: "#f5f5f5",
-      foreground: "#0a0a0a",
-      border: "#e5e5e5",
-      destructive: "#dc2626",
-      secondary: "#e5e5e5",
-      mutedForeground: "#737373",
-      muted: "#f5f5f5",
-      backgroundColor: "#0000004c",
-      primary: "#1d4885",
-      secondaryForeground: "#0a0a0a",
-      accentForeground: "#171717",
-      accent: "#f5f5f5",
-      ring: "#0090ff",
-      chart3: "#0588f0",
-      chart2: "#0090ff",
-      chart4: "#0d74ce",
-      chart1: "#5eb1ef",
-      chart5: "#113264",
-      card: "#ffffff",
-      cardForeground: "#0a0a0a",
-      popover: "#ffffff",
-      popoverForeground: "#0a0a0a",
-      primaryForeground: "#fafafa",
-      input: "#f5f5f5",
-      sidebar: "#fafafa",
-      sidebarForeground: "#0a0a0a",
-      sidebarPrimary: "#171717",
-      sidebarPrimaryForeground: "#fafafa",
-      sidebarAccent: "#f5f5f5",
-      sidebarAccentForeground: "#171717",
-      sidebarBorder: "#d4d4d4",
-      sidebarRing: "#737373",
-      semanticBackground: "#696867",
-      semanticBorder: "#898887",
-      semanticForeground: "#ffffff",
-      disabled: "#d4d4d4",
-      primary10: "#1d488519",
-      success: "#047857"
-    },
-    darkMode: {
-      background: "#1e1e1e",
-      foreground: "#fafafa",
-      border: "#404040",
-      destructive: "#f87171",
-      secondary: "#262626",
-      mutedForeground: "#a3a3a3",
-      muted: "#262626",
-      backgroundColor: "#0000004c",
-      primary: "#b5d4fd",
-      secondaryForeground: "#fafafa",
-      accentForeground: "#fafafa",
-      accent: "#262626",
-      ring: "#acd8fc",
-      chart3: "#0588f0",
-      chart2: "#0090ff",
-      chart4: "#0d74ce",
-      chart1: "#5eb1ef",
-      chart5: "#113264",
-      card: "#171717",
-      cardForeground: "#fafafa",
-      popover: "#262626",
-      popoverForeground: "#fafafa",
-      primaryForeground: "#171717",
-      input: "#2e3034",
-      sidebar: "#171717",
-      sidebarForeground: "#fafafa",
-      sidebarPrimary: "#0588f0",
-      sidebarPrimaryForeground: "#fafafa",
-      sidebarAccent: "#262626",
-      sidebarAccentForeground: "#fafafa",
-      sidebarBorder: "#ffffffcc",
-      sidebarRing: "#737373",
-      semanticBackground: "#272625",
-      semanticBorder: "#535151",
-      semanticForeground: "#ffffff",
-      disabled: "#404040",
-      primary10: "#e6f1ff19",
-      success: "#a7f3d0"
-    }
-  },
+// src/theme/default-theme.ts
+var DEFAULT_THEME = {
+  /**
+   * Design tokens (numbers) used by components.
+   * This file is the single source of truth (do not duplicate these elsewhere).
+   */
   twPadding: {
     mode1: {
       px0: 0,
@@ -194,457 +99,7 @@ var LEGO_TOKENS = {
       "275": 2.75
     }
   },
-  components: {
-    mode1: {
-      inputRadius: 16,
-      inputHeight: 48,
-      inputHeightLarge: 64,
-      inputPaddingHorizontal: 16,
-      inputPaddingVertical: 8,
-      inputActiveBg: "hsla(0, 0, 96, 1)",
-      inputFocussedBg: "hsla(0, 0, 98, 1)",
-      inputFocussedRing: "hsla(200, 64, 39, 1)",
-      buttonHeight: 40,
-      buttonRadius: 24
-    }
-  }
-};
-var clamp01 = (n) => Math.min(1, Math.max(0, n));
-function hexToHslVarValue(hex) {
-  const normalized = hex.trim();
-  if (!normalized.startsWith("#")) {
-    throw new Error(`hexToHslVarValue expected a hex string, got: ${hex}`);
-  }
-  const h = normalized.slice(1);
-  const isShort = h.length === 3 || h.length === 4;
-  const isLong = h.length === 6 || h.length === 8;
-  if (!isShort && !isLong) {
-    throw new Error(`hexToHslVarValue expected #RGB/#RRGGBB (optionally with alpha), got: ${hex}`);
-  }
-  const hexToByte = (s) => parseInt(s, 16);
-  const r = isShort ? hexToByte(h[0] + h[0]) : hexToByte(h.slice(0, 2));
-  const g = isShort ? hexToByte(h[1] + h[1]) : hexToByte(h.slice(2, 4));
-  const b = isShort ? hexToByte(h[2] + h[2]) : hexToByte(h.slice(4, 6));
-  const rf = r / 255;
-  const gf = g / 255;
-  const bf = b / 255;
-  const max = Math.max(rf, gf, bf);
-  const min = Math.min(rf, gf, bf);
-  const delta = max - min;
-  let hue = 0;
-  if (delta !== 0) {
-    if (max === rf) hue = (gf - bf) / delta % 6;
-    else if (max === gf) hue = (bf - rf) / delta + 2;
-    else hue = (rf - gf) / delta + 4;
-    hue *= 60;
-    if (hue < 0) hue += 360;
-  }
-  const light = (max + min) / 2;
-  const sat = delta === 0 ? 0 : delta / (1 - Math.abs(2 * light - 1));
-  const H = Math.round(hue);
-  const S = Math.round(clamp01(sat) * 100);
-  const L = Math.round(clamp01(light) * 100);
-  return `${H} ${S}% ${L}%`;
-}
-var UI_TO_CSS_VAR = {
-  background: "--background",
-  foreground: "--foreground",
-  border: "--border",
-  input: "--input",
-  ring: "--ring",
-  primary: "--primary",
-  primaryForeground: "--primary-foreground",
-  secondary: "--secondary",
-  secondaryForeground: "--secondary-foreground",
-  destructive: "--destructive",
-  // Tailwind shadcn-style also supports this var; we set it if present later.
-  destructiveForeground: "--destructive-foreground",
-  muted: "--muted",
-  mutedForeground: "--muted-foreground",
-  accent: "--accent",
-  accentForeground: "--accent-foreground",
-  card: "--card",
-  cardForeground: "--card-foreground",
-  popover: "--popover",
-  popoverForeground: "--popover-foreground"
-};
-function getLegoLandThemeCSSVars(theme) {
-  var _a;
-  const ui = theme === "dark" ? LEGO_TOKENS.uIColors.darkMode : LEGO_TOKENS.uIColors.lightMode;
-  const out = {
-    colorScheme: theme,
-    "--radius": `${LEGO_TOKENS.radius.mode1.roundedMd}px`
-  };
-  for (const [uiKey, cssVar] of Object.entries(UI_TO_CSS_VAR)) {
-    const value = ui[uiKey];
-    if (typeof value === "string" && value.startsWith("#")) {
-      out[cssVar] = hexToHslVarValue(value);
-    }
-  }
-  if (!out["--destructive-foreground"]) {
-    out["--destructive-foreground"] = (_a = out["--primary-foreground"]) != null ? _a : hexToHslVarValue("#ffffff");
-  }
-  return out;
-}
-
-// src/button/variables.ts
-var BUTTON_TOKENS = {
-  base: "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
-  variant: {
-    primary: "bg-primary text-primary-foreground hover:bg-primary/90",
-    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-    destructive: "bg-destructive text-primary-foreground hover:bg-destructive/90",
-    outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground text-foreground",
-    link: "text-foreground underline-offset-4 hover:underline"
-  },
-  size: {
-    default: "h-10 px-4 py-2",
-    sm: "h-9 px-3",
-    lg: "h-10 px-8",
-    icon: "h-10 w-10"
-  },
-  radius: {
-    none: `${LEGO_TOKENS.radius.mode1.roundedNone}px`,
-    soft: `${LEGO_TOKENS.radius.mode1.roundedMd}px`,
-    rounded: `${LEGO_TOKENS.components.mode1.buttonRadius}px`,
-    pill: `${LEGO_TOKENS.radius.mode1.roundedFull}px`
-  }
-};
-
-// src/lib/utils.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/button/button.tsx
-import { jsx } from "react/jsx-runtime";
-var Button = React.forwardRef(
-  ({
-    className,
-    variant = "primary",
-    size,
-    asChild = false,
-    button_border_radius = "rounded",
-    style,
-    ...props
-  }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ref,
-        className: cn(
-          BUTTON_TOKENS.base,
-          BUTTON_TOKENS.variant[variant],
-          BUTTON_TOKENS.size[size != null ? size : "default"],
-          className
-        ),
-        style: {
-          borderRadius: BUTTON_TOKENS.radius[button_border_radius],
-          ...style
-        },
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-
-// src/input/input.tsx
-import * as React2 from "react";
-
-// src/input/variables.ts
-var INPUT_TOKENS = {
-  root: "flex w-full flex-col gap-1",
-  labelRow: "flex items-center gap-1 text-xs font-medium leading-4 tracking-normal text-foreground",
-  mandatory: "text-destructive",
-  field: "flex h-12 w-full items-center justify-between overflow-hidden bg-input px-4 py-2 text-sm shadow-none",
-  fieldBase: "border border-transparent focus-within:border-ring disabled:pointer-events-none",
-  fieldDisabled: "opacity-50",
-  input: "w-full bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-100",
-  supportingTextBase: "text-xs font-normal leading-4 tracking-normal text-muted-foreground",
-  supportingTextError: "text-destructive",
-  radius: {
-    none: `${LEGO_TOKENS.radius.mode1.roundedNone}px`,
-    soft: `${LEGO_TOKENS.radius.mode1.roundedMd}px`,
-    rounded: `${LEGO_TOKENS.components.mode1.inputRadius}px`,
-    pill: `${LEGO_TOKENS.radius.mode1.roundedFull}px`
-  }
-};
-
-// src/input/input.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var Input = React2.forwardRef(
-  ({
-    className,
-    label,
-    mandatory = false,
-    supportingText,
-    supportingTextType = "help",
-    hideSupportingText = false,
-    input_border_radius = "rounded",
-    forceState,
-    disabled,
-    style,
-    ...props
-  }, ref) => {
-    const isDisabled = forceState === "disabled" || disabled;
-    const isFocussed = forceState === "focussed";
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(INPUT_TOKENS.root, isDisabled && INPUT_TOKENS.fieldDisabled, className),
-        "data-state": forceState,
-        children: [
-          label ? /* @__PURE__ */ jsxs("div", { className: INPUT_TOKENS.labelRow, children: [
-            /* @__PURE__ */ jsx2("span", { children: label }),
-            mandatory ? /* @__PURE__ */ jsx2("span", { className: INPUT_TOKENS.mandatory, children: "*" }) : null
-          ] }) : null,
-          /* @__PURE__ */ jsx2(
-            "div",
-            {
-              className: cn(
-                INPUT_TOKENS.field,
-                INPUT_TOKENS.fieldBase,
-                isFocussed && "border-ring"
-              ),
-              style: {
-                borderRadius: INPUT_TOKENS.radius[input_border_radius],
-                ...style
-              },
-              children: /* @__PURE__ */ jsx2(
-                "input",
-                {
-                  ref,
-                  className: cn(INPUT_TOKENS.input),
-                  disabled: isDisabled,
-                  ...props
-                }
-              )
-            }
-          ),
-          !hideSupportingText && supportingText ? /* @__PURE__ */ jsx2(
-            "p",
-            {
-              className: cn(
-                INPUT_TOKENS.supportingTextBase,
-                supportingTextType === "error" && INPUT_TOKENS.supportingTextError
-              ),
-              children: supportingText
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
-Input.displayName = "Input";
-
-// src/input/file-input.tsx
-import * as React3 from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var FileInput = React3.forwardRef(
-  ({
-    className,
-    label,
-    mandatory = false,
-    buttonLabel = "Choose File",
-    placeholder = "No file chosen",
-    fileName,
-    input_border_radius = "rounded",
-    disabled,
-    onFileChange,
-    style,
-    ...props
-  }, ref) => {
-    const internalRef = React3.useRef(null);
-    React3.useImperativeHandle(ref, () => internalRef.current, []);
-    const [internalName, setInternalName] = React3.useState("");
-    const effectiveName = fileName != null ? fileName : internalName;
-    const handleChoose = () => {
-      var _a;
-      if (disabled) return;
-      (_a = internalRef.current) == null ? void 0 : _a.click();
-    };
-    const handleChange = (e) => {
-      var _a, _b, _c;
-      const file = (_b = (_a = e.target.files) == null ? void 0 : _a[0]) != null ? _b : null;
-      if (!fileName) {
-        setInternalName((_c = file == null ? void 0 : file.name) != null ? _c : "");
-      }
-      onFileChange == null ? void 0 : onFileChange(file);
-    };
-    return /* @__PURE__ */ jsxs2("div", { className: cn(INPUT_TOKENS.root, className), children: [
-      label ? /* @__PURE__ */ jsxs2("div", { className: INPUT_TOKENS.labelRow, children: [
-        /* @__PURE__ */ jsx3("span", { children: label }),
-        mandatory ? /* @__PURE__ */ jsx3("span", { className: INPUT_TOKENS.mandatory, children: "*" }) : null
-      ] }) : null,
-      /* @__PURE__ */ jsxs2(
-        "div",
-        {
-          className: cn(
-            INPUT_TOKENS.field,
-            INPUT_TOKENS.fieldBase,
-            "shadow-[0px_1px_2px_rgba(0,0,0,0.1)]",
-            disabled && INPUT_TOKENS.fieldDisabled
-          ),
-          style: {
-            borderRadius: INPUT_TOKENS.radius[input_border_radius],
-            ...style
-          },
-          children: [
-            /* @__PURE__ */ jsx3(
-              "button",
-              {
-                type: "button",
-                onClick: handleChoose,
-                disabled,
-                className: cn(
-                  "mr-1 shrink-0 rounded-sm px-1.5 py-px text-sm font-medium leading-5 text-foreground",
-                  disabled && "cursor-not-allowed"
-                ),
-                children: buttonLabel
-              }
-            ),
-            /* @__PURE__ */ jsx3("span", { className: "truncate text-sm font-normal leading-5 text-muted-foreground", children: effectiveName || placeholder }),
-            /* @__PURE__ */ jsx3(
-              "input",
-              {
-                ref: internalRef,
-                type: "file",
-                tabIndex: -1,
-                className: "sr-only",
-                disabled,
-                onChange: handleChange,
-                ...props
-              }
-            )
-          ]
-        }
-      )
-    ] });
-  }
-);
-FileInput.displayName = "FileInput";
-
-// src/switch/switch.tsx
-import * as React4 from "react";
-
-// src/switch/variables.ts
-var SWITCH_TOKENS = {
-  rootBase: "relative inline-flex items-center shrink-0 rounded-full transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background",
-  rootDisabled: "opacity-50 cursor-not-allowed",
-  // Track colors (matches Figma: Off = neutral/200, On = primary)
-  trackOff: "bg-[var(--neutral-200)]",
-  trackOn: "bg-primary",
-  // Thumb colors (matches Figma: Off = card, On = primary-foreground)
-  thumbOff: "bg-card",
-  thumbOn: "bg-primary-foreground",
-  thumbBase: "absolute top-[2px] left-[2px] rounded-full transition-transform shadow-sm",
-  size: {
-    // Figma default: track 44x24, thumb 20
-    default: {
-      track: "h-6 w-11",
-      thumb: "h-5 w-5",
-      translateOn: "translate-x-5",
-      translateOff: "translate-x-0"
-    },
-    // Figma small: track 22x12, thumb appears smaller
-    small: {
-      track: "h-3 w-[22px]",
-      thumb: "h-2 w-2",
-      translateOn: "translate-x-[10px]",
-      translateOff: "translate-x-0"
-      // thumb top/left needs to be tighter for small; we'll override via inline classes
-    }
-  }
-};
-
-// src/switch/switch.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Switch = React4.forwardRef(
-  ({
-    checked,
-    defaultChecked,
-    onCheckedChange,
-    disabled,
-    size = "default",
-    className,
-    style,
-    id
-  }, ref) => {
-    const isControlled = checked !== void 0;
-    const [uncontrolled, setUncontrolled] = React4.useState(
-      defaultChecked != null ? defaultChecked : false
-    );
-    const isOn = isControlled ? !!checked : uncontrolled;
-    const sz = SWITCH_TOKENS.size[size];
-    const toggle = () => {
-      if (disabled) return;
-      const next = !isOn;
-      if (!isControlled) setUncontrolled(next);
-      onCheckedChange == null ? void 0 : onCheckedChange(next);
-    };
-    const onKeyDown = (e) => {
-      if (disabled) return;
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        toggle();
-      }
-    };
-    const smallNudge = size === "small" ? "top-[1px] left-[1px]" : "";
-    return /* @__PURE__ */ jsx4(
-      "button",
-      {
-        id,
-        ref,
-        type: "button",
-        role: "switch",
-        "aria-checked": isOn,
-        "aria-disabled": disabled || void 0,
-        disabled,
-        onClick: toggle,
-        onKeyDown,
-        className: cn(
-          SWITCH_TOKENS.rootBase,
-          sz.track,
-          isOn ? SWITCH_TOKENS.trackOn : SWITCH_TOKENS.trackOff,
-          disabled && SWITCH_TOKENS.rootDisabled,
-          className
-        ),
-        style,
-        "data-state": isOn ? "checked" : "unchecked",
-        "data-size": size,
-        children: /* @__PURE__ */ jsx4(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: cn(
-              SWITCH_TOKENS.thumbBase,
-              smallNudge,
-              sz.thumb,
-              isOn ? SWITCH_TOKENS.thumbOn : SWITCH_TOKENS.thumbOff,
-              isOn ? sz.translateOn : sz.translateOff
-            )
-          }
-        )
-      }
-    );
-  }
-);
-Switch.displayName = "Switch";
-
-// src/theme/theme-context.tsx
-import * as React6 from "react";
-
-// src/theme/lego-land-wrapper.tsx
-import * as React5 from "react";
-
-// src/theme/default-theme.ts
-var DEFAULT_THEME = {
-  twColors: {
+  twColors: {
     mode1: {
       slate50: "#f8fafc",
       slate100: "#f1f5f9",
@@ -901,7 +356,7 @@ var DEFAULT_THEME = {
       secondary: "#e5e5e5",
       mutedForeground: "#737373",
       muted: "#f5f5f5",
-      backgroundColor: "#0000004c",
+      backgroundColor: "#0000004d",
       primary: "#1d4885",
       secondaryForeground: "#0a0a0a",
       accentForeground: "#171717",
@@ -941,8 +396,8 @@ var DEFAULT_THEME = {
       secondary: "#262626",
       mutedForeground: "#a3a3a3",
       muted: "#262626",
-      backgroundColor: "#0000004c",
-      primary: "#b5d4fd",
+      backgroundColor: "#0000004d",
+      primary: "#b5d5fd",
       secondaryForeground: "#fafafa",
       accentForeground: "#fafafa",
       accent: "#262626",
@@ -970,48 +425,433 @@ var DEFAULT_THEME = {
       semanticBorder: "#535151",
       semanticForeground: "#ffffff",
       disabled: "#404040",
-      primary10: "#e6f1ff19",
+      primary10: "#e6f1ff1a",
       success: "#a7f3d0"
     }
   },
   components: {
     mode1: {
-      inputActiveBg: "#f5f5f5",
-      inputFocussedBg: "#fafafa",
-      inputFocussedRing: "#0284c7"
+      // Component token defaults (numbers + colors)
+      inputRadius: 16,
+      inputHeight: 48,
+      inputHeightLarge: 64,
+      inputPaddingHorizontal: 16,
+      inputPaddingVertical: 8,
+      buttonHeight: 40,
+      buttonRadius: 24,
+      // These are semantic per-mode in `uIColors`, but kept here for convenience.
+      // (Figma "Components" page uses dark mode values.)
+      inputActiveBg: "#2e3034",
+      inputFocussedBg: "#2e3034",
+      inputFocussedRing: "#acd8fc"
     }
   }
 };
 
-// src/theme/theme-utils.ts
-function clamp012(n) {
-  return Math.min(1, Math.max(0, n));
-}
-function hexToRgb(hex) {
-  const raw = hex.trim().replace(/^#/, "");
-  const normalized = raw.length === 3 ? raw.split("").map((c) => c + c).join("") : raw.length === 4 ? raw.slice(0, 3).split("").map((c) => c + c).join("") : raw.length === 6 ? raw : raw.length === 8 ? raw.slice(0, 6) : null;
-  if (!normalized) return null;
-  const int = Number.parseInt(normalized, 16);
-  if (Number.isNaN(int)) return null;
-  return {
-    r: int >> 16 & 255,
-    g: int >> 8 & 255,
-    b: int & 255
-  };
+// src/button/variables.ts
+var _a, _b;
+var BUTTON_TOKENS = {
+  base: "relative inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none [&>svg]:h-4 [&>svg]:w-4",
+  hoverOverlay: "overflow-hidden after:content-[''] after:absolute after:inset-0 after:pointer-events-none after:rounded-[inherit] after:bg-black/10 after:opacity-0 after:transition-opacity hover:after:opacity-100",
+  variant: {
+    primary: "bg-primary text-primary-foreground disabled:opacity-50",
+    secondary: "bg-secondary text-secondary-foreground disabled:bg-muted-foreground disabled:text-background disabled:opacity-100",
+    destructive: "bg-destructive text-destructive-foreground disabled:opacity-50",
+    outline: "border border-border bg-transparent text-foreground hover:bg-foreground/5 disabled:border-[#b2b2b2] disabled:text-[#b2b2b2] disabled:opacity-100",
+    link: "bg-transparent text-foreground hover:text-primary disabled:text-muted-foreground disabled:opacity-100",
+    // Icon-only variants (pair with size `icon` / `iconSm`)
+    iconPrimary: "bg-primary text-primary-foreground disabled:opacity-50",
+    iconSecondary: "bg-secondary text-secondary-foreground disabled:bg-muted-foreground disabled:text-secondary disabled:opacity-100",
+    iconOutline: "border border-border bg-transparent text-foreground hover:bg-foreground/5 disabled:border-[#b2b2b2] disabled:text-[#b2b2b2] disabled:opacity-100"
+  },
+  size: {
+    default: "h-10 px-4 py-2",
+    sm: "h-9 px-3",
+    lg: "h-10 px-8",
+    icon: "h-10 w-10",
+    iconSm: "h-9 w-9"
+  },
+  radius: {
+    none: `${DEFAULT_THEME.radius.mode1.roundedNone}px`,
+    soft: `${DEFAULT_THEME.radius.mode1.roundedMd}px`,
+    rounded: `${(_b = (_a = DEFAULT_THEME.components) == null ? void 0 : _a.mode1.buttonRadius) != null ? _b : 24}px`,
+    pill: `${DEFAULT_THEME.radius.mode1.roundedFull}px`
+  }
+};
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
 }
-function hexToHslChannels(hex) {
-  const rgb = hexToRgb(hex);
-  if (!rgb) return null;
-  const r = rgb.r / 255;
-  const g = rgb.g / 255;
-  const b = rgb.b / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const delta = max - min;
-  let h = 0;
-  let s = 0;
-  const l = (max + min) / 2;
-  if (delta !== 0) {
+
+// src/button/button.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Button = React.forwardRef(
+  ({
+    className,
+    variant = "primary",
+    size,
+    asChild = false,
+    button_border_radius = "rounded",
+    leadingIcon,
+    trailingIcon,
+    showLeadingIcon = true,
+    showTrailingIcon = true,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const withHoverOverlay = variant === "primary" || variant === "secondary" || variant === "destructive" || variant === "iconPrimary" || variant === "iconSecondary";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(
+          BUTTON_TOKENS.base,
+          BUTTON_TOKENS.variant[variant],
+          withHoverOverlay && BUTTON_TOKENS.hoverOverlay,
+          BUTTON_TOKENS.size[size != null ? size : "default"],
+          className
+        ),
+        style: {
+          borderRadius: BUTTON_TOKENS.radius[button_border_radius],
+          ...style
+        },
+        ...props,
+        children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+          showLeadingIcon ? leadingIcon : null,
+          children,
+          showTrailingIcon ? trailingIcon : null
+        ] })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/input/input.tsx
+import * as React2 from "react";
+
+// src/input/variables.ts
+var _a2, _b2;
+var INPUT_TOKENS = {
+  root: "flex w-full flex-col gap-1",
+  labelRow: "flex items-center gap-1 text-xs font-medium leading-4 tracking-normal text-foreground",
+  mandatory: "text-destructive",
+  field: "flex h-12 w-full items-center justify-between overflow-hidden bg-input px-4 py-2 text-sm shadow-none",
+  fieldBase: "border border-transparent focus-within:border-ring disabled:pointer-events-none",
+  fieldDisabled: "opacity-50",
+  input: "w-full bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-100",
+  supportingTextBase: "text-xs font-normal leading-4 tracking-normal text-muted-foreground",
+  supportingTextError: "text-destructive",
+  radius: {
+    none: `${DEFAULT_THEME.radius.mode1.roundedNone}px`,
+    soft: `${DEFAULT_THEME.radius.mode1.roundedMd}px`,
+    rounded: `${(_b2 = (_a2 = DEFAULT_THEME.components) == null ? void 0 : _a2.mode1.inputRadius) != null ? _b2 : 16}px`,
+    pill: `${DEFAULT_THEME.radius.mode1.roundedFull}px`
+  }
+};
+
+// src/input/input.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Input = React2.forwardRef(
+  ({
+    className,
+    label,
+    mandatory = false,
+    supportingText,
+    supportingTextType = "help",
+    hideSupportingText = false,
+    input_border_radius = "rounded",
+    forceState,
+    disabled,
+    style,
+    ...props
+  }, ref) => {
+    const isDisabled = forceState === "disabled" || disabled;
+    const isFocussed = forceState === "focussed";
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cn(INPUT_TOKENS.root, isDisabled && INPUT_TOKENS.fieldDisabled, className),
+        "data-state": forceState,
+        children: [
+          label ? /* @__PURE__ */ jsxs2("div", { className: INPUT_TOKENS.labelRow, children: [
+            /* @__PURE__ */ jsx2("span", { children: label }),
+            mandatory ? /* @__PURE__ */ jsx2("span", { className: INPUT_TOKENS.mandatory, children: "*" }) : null
+          ] }) : null,
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: cn(
+                INPUT_TOKENS.field,
+                INPUT_TOKENS.fieldBase,
+                isFocussed && "border-ring"
+              ),
+              style: {
+                borderRadius: INPUT_TOKENS.radius[input_border_radius],
+                ...style
+              },
+              children: /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  ref,
+                  className: cn(INPUT_TOKENS.input),
+                  disabled: isDisabled,
+                  ...props
+                }
+              )
+            }
+          ),
+          !hideSupportingText && supportingText ? /* @__PURE__ */ jsx2(
+            "p",
+            {
+              className: cn(
+                INPUT_TOKENS.supportingTextBase,
+                supportingTextType === "error" && INPUT_TOKENS.supportingTextError
+              ),
+              children: supportingText
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/input/file-input.tsx
+import * as React3 from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var FileInput = React3.forwardRef(
+  ({
+    className,
+    label,
+    mandatory = false,
+    buttonLabel = "Choose File",
+    placeholder = "No file chosen",
+    fileName,
+    input_border_radius = "rounded",
+    disabled,
+    onFileChange,
+    style,
+    ...props
+  }, ref) => {
+    const internalRef = React3.useRef(null);
+    React3.useImperativeHandle(ref, () => internalRef.current, []);
+    const [internalName, setInternalName] = React3.useState("");
+    const effectiveName = fileName != null ? fileName : internalName;
+    const handleChoose = () => {
+      var _a3;
+      if (disabled) return;
+      (_a3 = internalRef.current) == null ? void 0 : _a3.click();
+    };
+    const handleChange = (e) => {
+      var _a3, _b3, _c;
+      const file = (_b3 = (_a3 = e.target.files) == null ? void 0 : _a3[0]) != null ? _b3 : null;
+      if (!fileName) {
+        setInternalName((_c = file == null ? void 0 : file.name) != null ? _c : "");
+      }
+      onFileChange == null ? void 0 : onFileChange(file);
+    };
+    return /* @__PURE__ */ jsxs3("div", { className: cn(INPUT_TOKENS.root, className), children: [
+      label ? /* @__PURE__ */ jsxs3("div", { className: INPUT_TOKENS.labelRow, children: [
+        /* @__PURE__ */ jsx3("span", { children: label }),
+        mandatory ? /* @__PURE__ */ jsx3("span", { className: INPUT_TOKENS.mandatory, children: "*" }) : null
+      ] }) : null,
+      /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: cn(
+            INPUT_TOKENS.field,
+            INPUT_TOKENS.fieldBase,
+            "shadow-[0px_1px_2px_rgba(0,0,0,0.1)]",
+            disabled && INPUT_TOKENS.fieldDisabled
+          ),
+          style: {
+            borderRadius: INPUT_TOKENS.radius[input_border_radius],
+            ...style
+          },
+          children: [
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: handleChoose,
+                disabled,
+                className: cn(
+                  "mr-1 shrink-0 rounded-sm px-1.5 py-px text-sm font-medium leading-5 text-foreground",
+                  disabled && "cursor-not-allowed"
+                ),
+                children: buttonLabel
+              }
+            ),
+            /* @__PURE__ */ jsx3("span", { className: "truncate text-sm font-normal leading-5 text-muted-foreground", children: effectiveName || placeholder }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                ref: internalRef,
+                type: "file",
+                tabIndex: -1,
+                className: "sr-only",
+                disabled,
+                onChange: handleChange,
+                ...props
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+FileInput.displayName = "FileInput";
+
+// src/switch/switch.tsx
+import * as React4 from "react";
+
+// src/switch/variables.ts
+var SWITCH_TOKENS = {
+  rootBase: "relative inline-flex items-center shrink-0 rounded-full transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background",
+  rootDisabled: "opacity-50 cursor-not-allowed",
+  // Track colors (matches Figma: Off = neutral/200, On = primary)
+  trackOff: "bg-[var(--neutral-200)]",
+  trackOn: "bg-primary",
+  // Thumb colors (matches Figma: Off = card, On = primary-foreground)
+  thumbOff: "bg-card",
+  thumbOn: "bg-primary-foreground",
+  thumbBase: "absolute top-[2px] left-[2px] rounded-full transition-transform shadow-sm",
+  size: {
+    // Figma default: track 44x24, thumb 20
+    default: {
+      track: "h-6 w-11",
+      thumb: "h-5 w-5",
+      translateOn: "translate-x-5",
+      translateOff: "translate-x-0"
+    },
+    // Figma small: track 22x12, thumb appears smaller
+    small: {
+      track: "h-3 w-[22px]",
+      thumb: "h-2 w-2",
+      translateOn: "translate-x-[10px]",
+      translateOff: "translate-x-0"
+      // thumb top/left needs to be tighter for small; we'll override via inline classes
+    }
+  }
+};
+
+// src/switch/switch.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Switch = React4.forwardRef(
+  ({
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    disabled,
+    size = "default",
+    className,
+    style,
+    id
+  }, ref) => {
+    const isControlled = checked !== void 0;
+    const [uncontrolled, setUncontrolled] = React4.useState(
+      defaultChecked != null ? defaultChecked : false
+    );
+    const isOn = isControlled ? !!checked : uncontrolled;
+    const sz = SWITCH_TOKENS.size[size];
+    const toggle = () => {
+      if (disabled) return;
+      const next = !isOn;
+      if (!isControlled) setUncontrolled(next);
+      onCheckedChange == null ? void 0 : onCheckedChange(next);
+    };
+    const onKeyDown = (e) => {
+      if (disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+    };
+    const smallNudge = size === "small" ? "top-[1px] left-[1px]" : "";
+    return /* @__PURE__ */ jsx4(
+      "button",
+      {
+        id,
+        ref,
+        type: "button",
+        role: "switch",
+        "aria-checked": isOn,
+        "aria-disabled": disabled || void 0,
+        disabled,
+        onClick: toggle,
+        onKeyDown,
+        className: cn(
+          SWITCH_TOKENS.rootBase,
+          sz.track,
+          isOn ? SWITCH_TOKENS.trackOn : SWITCH_TOKENS.trackOff,
+          disabled && SWITCH_TOKENS.rootDisabled,
+          className
+        ),
+        style,
+        "data-state": isOn ? "checked" : "unchecked",
+        "data-size": size,
+        children: /* @__PURE__ */ jsx4(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              SWITCH_TOKENS.thumbBase,
+              smallNudge,
+              sz.thumb,
+              isOn ? SWITCH_TOKENS.thumbOn : SWITCH_TOKENS.thumbOff,
+              isOn ? sz.translateOn : sz.translateOff
+            )
+          }
+        )
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+
+// src/theme/theme-context.tsx
+import * as React6 from "react";
+
+// src/theme/lego-land-wrapper.tsx
+import * as React5 from "react";
+
+// src/theme/theme-utils.ts
+function clamp01(n) {
+  return Math.min(1, Math.max(0, n));
+}
+function hexToRgb(hex) {
+  const raw = hex.trim().replace(/^#/, "");
+  const normalized = raw.length === 3 ? raw.split("").map((c) => c + c).join("") : raw.length === 4 ? raw.slice(0, 3).split("").map((c) => c + c).join("") : raw.length === 6 ? raw : raw.length === 8 ? raw.slice(0, 6) : null;
+  if (!normalized) return null;
+  const int = Number.parseInt(normalized, 16);
+  if (Number.isNaN(int)) return null;
+  return {
+    r: int >> 16 & 255,
+    g: int >> 8 & 255,
+    b: int & 255
+  };
+}
+function hexToHslChannels(hex) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (delta !== 0) {
     s = delta / (1 - Math.abs(2 * l - 1));
     switch (max) {
       case r:
@@ -1028,11 +868,11 @@ function hexToHslChannels(hex) {
     if (h < 0) h += 360;
   }
   const hRound = Math.round(h);
-  const sRound = Math.round(clamp012(s) * 100);
-  const lRound = Math.round(clamp012(l) * 100);
+  const sRound = Math.round(clamp01(s) * 100);
+  const lRound = Math.round(clamp01(l) * 100);
   return `${hRound} ${sRound}% ${lRound}%`;
 }
-var UI_TO_CSS_VAR2 = {
+var UI_TO_CSS_VAR = {
   background: "--background",
   foreground: "--foreground",
   border: "--border",
@@ -1054,10 +894,10 @@ var UI_TO_CSS_VAR2 = {
   popoverForeground: "--popover-foreground"
 };
 function themeJsonToCssVars(theme, mode) {
-  var _a, _b;
-  const ui = (_b = (_a = theme.uIColors) == null ? void 0 : _a[mode]) != null ? _b : {};
+  var _a3, _b3;
+  const ui = (_b3 = (_a3 = theme.uIColors) == null ? void 0 : _a3[mode]) != null ? _b3 : {};
   const out = {};
-  for (const [uiKey, cssVar] of Object.entries(UI_TO_CSS_VAR2)) {
+  for (const [uiKey, cssVar] of Object.entries(UI_TO_CSS_VAR)) {
     const val = ui[uiKey];
     if (!val) continue;
     const hsl = val.startsWith("#") ? hexToHslChannels(val) : null;
@@ -1081,9 +921,9 @@ var LegoLandWrapper = ({
 }) => {
   const mode = theme === "dark" ? "darkMode" : "lightMode";
   const cssVars = React5.useMemo(() => {
-    var _a, _b;
+    var _a3, _b3;
     const vars = themeJsonToCssVars(DEFAULT_THEME, mode);
-    const palette = (_b = (_a = DEFAULT_THEME.twColors) == null ? void 0 : _a.mode1) != null ? _b : {};
+    const palette = (_b3 = (_a3 = DEFAULT_THEME.twColors) == null ? void 0 : _a3.mode1) != null ? _b3 : {};
     for (const [k, v] of Object.entries(palette)) {
       vars[twColorKeyToCssVarName(k)] = v;
     }
@@ -1129,7 +969,7 @@ var useTheme = () => {
 // src/shadow-dom-wrapper.tsx
 import * as React7 from "react";
 import { createPortal } from "react-dom";
-import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var ShadowDOMWrapper = ({
   children,
   styles,
@@ -1229,7 +1069,7 @@ var ShadowDOMWrapper = ({
     return () => {
     };
   }, [styles, mode, additionalStyles, copyCSSVariables]);
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
     /* @__PURE__ */ jsx7("div", { ref: containerRef }),
     shadowRoot && createPortal(children, shadowRoot)
   ] });
@@ -1237,15 +1077,13 @@ var ShadowDOMWrapper = ({
 ShadowDOMWrapper.displayName = "ShadowDOMWrapper";
 export {
   Button,
+  DEFAULT_THEME,
   FileInput,
   Input,
-  LEGO_TOKENS,
   LegoLandWrapper,
   NurixThemeProvider,
   ShadowDOMWrapper,
   Switch,
   ThemeProvider,
-  getLegoLandThemeCSSVars,
-  hexToHslVarValue,
   useTheme
 };