@nurix/ui-component-library 1.1.3-stage.89 → 1.1.3-stage.91

package/dist/index.mjs

@@ -352,7 +352,7 @@ var DEFAULT_THEME = {
       background: "#f5f5f5",
       foreground: "#0a0a0a",
       border: "#e5e5e5",
-      destructive: "#dc2626",
+      destructive: "#ef4444",
       secondary: "#e5e5e5",
       mutedForeground: "#737373",
       muted: "#f5f5f5",
@@ -386,7 +386,9 @@ var DEFAULT_THEME = {
       semanticForeground: "#ffffff",
       disabled: "#d4d4d4",
       primary10: "#1d488519",
-      success: "#047857",
+      success: "#10b981",
+      warning: "#fef3c7",
+      warningForeground: "#78350f",
       switchTrack: "#e5e5e5"
     },
     darkMode: {
@@ -408,7 +410,7 @@ var DEFAULT_THEME = {
       chart4: "#0d74ce",
       chart1: "#5eb1ef",
       chart5: "#113264",
-      card: "#171717",
+      card: "#262626",
       cardForeground: "#fafafa",
       popover: "#262626",
       popoverForeground: "#fafafa",
@@ -428,6 +430,8 @@ var DEFAULT_THEME = {
       disabled: "#404040",
       primary10: "#e6f1ff1a",
       success: "#a7f3d0",
+      warning: "#fde68a",
+      warningForeground: "#78350f",
       switchTrack: "#ffffff"
     }
   },
@@ -453,24 +457,25 @@ var DEFAULT_THEME = {
 // 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 cursor-pointer",
+  base: "relative inline-flex items-center justify-center gap-[10px] 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]:size-6 cursor-pointer",
   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:bg-disabled disabled:text-primary-foreground disabled:opacity-100",
-    secondary: "bg-secondary text-secondary-foreground disabled:bg-muted-foreground disabled:text-background disabled:opacity-100",
+    secondary: "bg-secondary text-secondary-foreground disabled:bg-disabled disabled:text-primary-foreground disabled:opacity-100",
     destructive: "bg-destructive text-destructive-foreground disabled:bg-disabled disabled:text-primary-foreground disabled:opacity-100",
-    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",
+    outline: "border border-sidebar-border bg-transparent text-foreground hover:bg-foreground/5 disabled:border-sidebar-border disabled:text-disabled disabled:opacity-100",
+    link: "bg-transparent text-primary disabled:text-muted-foreground disabled:opacity-100",
     // Icon-only variants (pair with size `icon` / `iconSm`)
     iconPrimary: "bg-primary text-primary-foreground disabled:bg-disabled disabled:text-primary-foreground disabled:opacity-100",
-    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"
+    iconSecondary: "bg-secondary text-secondary-foreground disabled:bg-disabled disabled:text-primary-foreground disabled:opacity-100",
+    iconOutline: "border border-sidebar-border bg-transparent text-foreground hover:bg-foreground/5 disabled:border-sidebar-border disabled:text-disabled disabled:opacity-100"
   },
   size: {
-    default: "h-10 px-4 py-2",
+    default: "h-[var(--button-height,40px)] px-[var(--px-4,16px)] py-[var(--py-2,8px)]",
     sm: "h-9 px-3",
     lg: "h-10 px-8",
-    icon: "h-10 w-10",
+    link: "h-9 px-0",
+    icon: "h-[var(--button-height,40px)] w-10",
     iconSm: "h-9 w-9"
   },
   radius: {
@@ -546,8 +551,8 @@ 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",
+  field: "flex h-[var(--input-height,48px)] w-full items-center gap-2 overflow-hidden bg-input pl-[var(--input-padding-horizontal,16px)] pr-3 py-1 text-sm shadow-none",
+  fieldBase: "border border-transparent focus-within:border-primary disabled:pointer-events-none",
   fieldDisabled: "opacity-50",
   fieldInvalid: "border-destructive focus-within:ring-destructive",
   input: "w-full bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-100",
@@ -729,8 +734,8 @@ var INPUT_GROUP_TOKENS = {
   mandatory: "text-destructive",
   supportingText: "text-xs font-normal leading-4 text-muted-foreground",
   supportingTextError: "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",
+  field: "flex h-[var(--input-height,48px)] w-full items-center gap-2 overflow-hidden bg-input pl-[var(--input-padding-horizontal,16px)] pr-3 py-1 text-sm shadow-none",
+  fieldBase: "border border-transparent focus-within:border-primary disabled:pointer-events-none",
   fieldInvalid: "border-destructive focus-within:border-destructive",
   fieldDisabled: "opacity-50",
   // Inner input area
@@ -739,7 +744,7 @@ var INPUT_GROUP_TOKENS = {
   segment: "shrink-0 h-9 flex items-center text-sm font-medium text-foreground px-4",
   segmentDivider: "h-9 border-border",
   // Textarea
-  textareaField: "w-full bg-input px-4 py-2 text-sm border border-transparent focus-visible:outline-none focus-visible:border-ring disabled:pointer-events-none shadow-none",
+  textareaField: "w-full bg-input pl-[var(--input-padding-horizontal,16px)] pr-3 py-1 text-sm border border-transparent focus-visible:outline-none focus-visible:border-primary disabled:pointer-events-none shadow-none",
   textareaDisabled: "opacity-50",
   radius: {
     none: `${DEFAULT_THEME.radius.mode1.roundedNone}px`,
@@ -1661,7 +1666,8 @@ var BADGE_TOKENS = {
     secondary: "bg-secondary text-secondary-foreground",
     destructive: "bg-destructive text-primary-foreground",
     outline: "border border-border bg-transparent text-foreground",
-    success: "bg-success text-primary-foreground"
+    success: "bg-success text-primary-foreground",
+    warning: "bg-warning text-warning-foreground"
   },
   // Icon styles
   icon: "[&>svg]:h-3 [&>svg]:w-3",
@@ -1749,6 +1755,109 @@ var NumberBadge = React15.forwardRef(
 );
 NumberBadge.displayName = "NumberBadge";
 
+// src/select/select.tsx
+import * as React18 from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check as Check2, ChevronDown as ChevronDown2, Search } from "lucide-react";
+
+// src/select/variables.ts
+var SELECT_TOKENS = {
+  // Main select container
+  container: {
+    // Figma: trigger uses rounded-lg (8px), padding pl-16 pr-12 py-4
+    default: "bg-input rounded-[var(--rounded-lg,8px)] data-[state=open]:rounded-b-none flex items-center justify-between pl-[var(--input-padding-horizontal,16px)] pr-3 py-1 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    singleLineRegular: "h-[var(--input-height,48px)]",
+    singleLineLarge: "h-[var(--input-height-large,64px)]",
+    doubleLine: "h-[var(--input-height-large,64px)]",
+    open: "flex-col gap-1 items-start rounded-[var(--rounded-2xl,16px)] w-full"
+  },
+  // Select button (when open, top part)
+  selectButton: {
+    base: "bg-input rounded-[var(--input-radius,16px)] flex items-center justify-between pl-[var(--input-padding-horizontal,16px)] pr-3 py-1 w-full shrink-0",
+    singleLineRegular: "h-12",
+    singleLineLarge: "h-16"
+  },
+  // Content wrapper
+  contentWrap: {
+    base: "flex gap-2 shrink-0",
+    default: "items-center",
+    doubleLine: "items-start"
+  },
+  // Lead icon
+  leadIcon: "shrink-0 size-6",
+  // Text wrapper
+  textWrap: {
+    base: "flex shrink-0",
+    default: "items-center",
+    doubleLine: "flex-col gap-[2px] items-start justify-center"
+  },
+  // Text styles
+  text: {
+    placeholder: "text-sm leading-5 text-muted-foreground font-normal tracking-normal",
+    placeholderSubtext: "text-xs leading-4 text-muted-foreground",
+    value: "text-sm leading-5 text-accent-foreground font-normal tracking-normal",
+    valueSubtext: "text-xs leading-4 text-muted-foreground"
+  },
+  // Chevron icon
+  chevron: "size-6 shrink-0",
+  // Dropdown container — Figma: rounded-[--input/radius,16px], gap-8px, p-8px
+  dropdown: {
+    base: "bg-input flex flex-col gap-2 items-center p-2 rounded-[var(--input-radius,16px)] shrink-0 w-[var(--radix-select-trigger-width)]"
+  },
+  // Search input — Figma: h-48px, rounded-[--input/radius,16px], icon 24px
+  search: {
+    container: "bg-input flex h-[var(--input-height,48px)] items-center gap-2 pl-[var(--input-padding-horizontal,16px)] pr-3 py-1 rounded-[var(--input-radius,16px)] border border-border shrink-0 w-full",
+    iconWrap: "flex items-center shrink-0",
+    icon: "size-6 shrink-0",
+    inputWrap: "flex flex-1 h-9 items-center min-h-px min-w-px pl-2 pr-3 py-1",
+    input: "text-sm leading-5 text-muted-foreground font-normal tracking-normal shrink-0"
+  },
+  // Menu items — Figma: px-8px py-6px, rounded-sm (4px)
+  menu: {
+    container: "flex flex-col items-start shrink-0 w-full",
+    sectionLabel: "flex h-8 items-center px-2 py-[var(--spacing-py-1-5,6px)] rounded-[var(--rounded-md,6px)] shrink-0 w-full",
+    sectionText: "text-xs leading-4 text-muted-foreground font-normal tracking-normal shrink-0",
+    item: {
+      base: "flex items-center justify-between px-2 py-[var(--spacing-py-1-5,6px)] rounded-[var(--rounded-sm,4px)] shrink-0 w-full",
+      singleLine: "h-8",
+      doubleLine: "min-h-[50px]",
+      hover: "bg-foreground/10",
+      default: ""
+    },
+    itemContent: {
+      base: "flex flex-1 gap-2 items-center min-h-px min-w-px"
+    },
+    itemTextWrap: {
+      base: "flex flex-1 min-h-px min-w-px",
+      singleLine: "items-center",
+      doubleLine: "flex-col gap-1 items-start justify-center"
+    },
+    itemText: "text-sm leading-5 text-accent-foreground font-normal tracking-normal flex-1 min-h-px min-w-0 truncate",
+    itemSubtext: "text-xs leading-4 text-muted-foreground font-normal tracking-normal flex-1 min-h-px min-w-0 truncate",
+    checkIcon: {
+      wrap: "flex items-center justify-end pl-2 shrink-0 relative",
+      slot: "size-6 shrink-0",
+      indicator: "absolute inset-0 flex items-center justify-center",
+      icon: "size-6 shrink-0 text-primary"
+    }
+  },
+  // Label component
+  label: {
+    container: "flex font-medium text-xs leading-4 tracking-normal items-center",
+    text: "text-foreground shrink-0",
+    asterisk: "text-destructive shrink-0"
+  },
+  // Select group (label + select)
+  group: {
+    container: "flex flex-col gap-1 items-start"
+  },
+  // Spec card (for storybook)
+  specCard: "bg-background border border-border flex flex-col gap-10 items-start p-14 rounded-3xl size-full",
+  sectionDivider: "flex flex-col h-[18px] items-start justify-center py-2 shrink-0 w-full",
+  dividerLine: "border-border border-t flex-1 h-px min-h-px min-w-px",
+  sectionTitle: "font-medium text-xl leading-7 text-foreground tracking-normal min-w-full shrink-0 w-[min-content] whitespace-pre-wrap"
+};
+
 // src/theme/theme-context.tsx
 import * as React16 from "react";
 
@@ -1843,13 +1952,15 @@ var UI_TO_CSS_VAR = {
   accentForeground: "--accent-foreground",
   destructive: "--destructive",
   destructiveForeground: "--destructive-foreground",
+  warning: "--warning",
+  warningForeground: "--warning-foreground",
   card: "--card",
   cardForeground: "--card-foreground",
   popover: "--popover",
   popoverForeground: "--popover-foreground"
 };
 function themeJsonToCssVars(theme, mode) {
-  var _a5, _b4;
+  var _a5, _b4, _c, _d, _e;
   const ui = (_b4 = (_a5 = theme.uIColors) == null ? void 0 : _a5[mode]) != null ? _b4 : {};
   const out = {};
   for (const [uiKey, cssVar] of Object.entries(UI_TO_CSS_VAR)) {
@@ -1858,6 +1969,30 @@ function themeJsonToCssVars(theme, mode) {
     const hsl = val.startsWith("#") ? hexToHslChannels(val) : null;
     out[cssVar] = hsl != null ? hsl : val;
   }
+  const radius = (_c = theme.radius) == null ? void 0 : _c.mode1;
+  if (radius) {
+    out["--rounded-sm"] = `${radius.roundedSm}px`;
+    out["--rounded-md"] = `${radius.roundedMd}px`;
+    out["--rounded-2xl"] = `${radius.rounded2xl}px`;
+    out["--rounded-full"] = `${radius.roundedFull}px`;
+  }
+  const components = (_d = theme.components) == null ? void 0 : _d.mode1;
+  if (components) {
+    out["--input-radius"] = `${components.inputRadius}px`;
+    out["--input-height"] = `${components.inputHeight}px`;
+    out["--input-height-large"] = `${components.inputHeightLarge}px`;
+    out["--input-padding-horizontal"] = `${components.inputPaddingHorizontal}px`;
+  }
+  const padding = (_e = theme.twPadding) == null ? void 0 : _e.mode1;
+  if (padding) {
+    out["--spacing-pl-2"] = `${padding.px2}px`;
+    out["--spacing-pr-3"] = `${padding.px3}px`;
+    out["--spacing-py-1"] = `${padding.px1}px`;
+    out["--spacing-py-1-5"] = `${padding.px15}px`;
+    out["--spacing-gap-1"] = `${padding.px1}px`;
+    out["--spacing-gap-2"] = `${padding.px2}px`;
+    out["--spacing-gap-4"] = `${padding.px4}px`;
+  }
   return out;
 }
 
@@ -1911,10 +2046,1245 @@ var useTheme = () => {
   return context;
 };
 
-// src/shadow-dom-wrapper.tsx
+// src/typography/typography.tsx
 import * as React17 from "react";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+
+// src/typography/variables.ts
+var TYPOGRAPHY_TOKENS = {
+  base: "tracking-normal",
+  tone: {
+    default: "text-foreground",
+    muted: "text-muted-foreground",
+    inherit: "text-inherit"
+  },
+  variant: {
+    h1: "text-4xl leading-10 font-semibold",
+    h2: "text-2xl leading-8 font-bold",
+    h3: "text-xl leading-7 font-bold",
+    h4: "text-base leading-6 font-bold",
+    h5: "text-sm leading-5 font-bold",
+    h6: "text-xs leading-4 font-bold",
+    p1: "text-lg leading-7 font-normal",
+    p2: "text-sm leading-5 font-normal",
+    p3: "text-xs leading-4 font-normal"
+  }
+};
+
+// src/typography/typography.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var DEFAULT_TAG_BY_VARIANT = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  p1: "p",
+  p2: "p",
+  p3: "p"
+};
+var Typography = React17.forwardRef(
+  ({
+    variant = "p2",
+    tone = "default",
+    asChild = false,
+    as,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot2 : as != null ? as : DEFAULT_TAG_BY_VARIANT[variant];
+    return /* @__PURE__ */ jsx15(
+      Comp,
+      {
+        ref,
+        className: cn(
+          TYPOGRAPHY_TOKENS.base,
+          TYPOGRAPHY_TOKENS.variant[variant],
+          TYPOGRAPHY_TOKENS.tone[tone],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Typography.displayName = "Typography";
+
+// src/select/select.tsx
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectGroup = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  SelectPrimitive.Group,
+  {
+    ref,
+    className: cn("flex flex-col gap-0", className),
+    ...props
+  }
+));
+SelectGroup.displayName = SelectPrimitive.Group.displayName;
+var SelectValue = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  SelectPrimitive.Value,
+  {
+    ref,
+    className: cn(
+      // Size/weight per Figma (Text-sm/Regular)
+      "text-sm leading-5 font-normal tracking-normal",
+      // Default value color; placeholder handled by trigger group selector
+      "text-accent-foreground",
+      className
+    ),
+    ...props
+  }
+));
+SelectValue.displayName = "SelectValue";
+var SelectTrigger = React18.forwardRef(({ className, children, showLead = false, leadIcon, leadIconSize = "sm", size = "regular", ...props }, ref) => /* @__PURE__ */ jsxs11(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      SELECT_TOKENS.container.default,
+      size === "large" ? SELECT_TOKENS.container.singleLineLarge : SELECT_TOKENS.container.singleLineRegular,
+      // Provide placeholder styling hook and consistent typography inheritance
+      "group",
+      "w-full",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs11("div", { className: cn(SELECT_TOKENS.contentWrap.base, SELECT_TOKENS.contentWrap.default), children: [
+        showLead && leadIcon && /* @__PURE__ */ jsx16(
+          "span",
+          {
+            className: cn(
+              "shrink-0 text-muted-foreground",
+              leadIconSize === "xs" ? "size-4" : SELECT_TOKENS.leadIcon
+            ),
+            children: leadIcon
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          Typography,
+          {
+            as: "span",
+            variant: "p2",
+            tone: "inherit",
+            className: cn(
+              SELECT_TOKENS.textWrap.base,
+              SELECT_TOKENS.textWrap.default,
+              // Match Figma: muted placeholder when empty
+              "text-accent-foreground group-data-[placeholder]:text-muted-foreground"
+            ),
+            children
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx16(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx16(ChevronDown2, { className: SELECT_TOKENS.chevron }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx16(ChevronDown2, { className: "h-4 w-4 rotate-180" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx16(ChevronDown2, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+function filterItemsBySearch(items, query) {
+  if (!query.trim()) return items;
+  const q = query.toLowerCase().trim();
+  return items.filter(
+    (item) => {
+      var _a5, _b4;
+      return item.label.toLowerCase().includes(q) || ((_b4 = (_a5 = item.subtext) == null ? void 0 : _a5.toLowerCase().includes(q)) != null ? _b4 : false);
+    }
+  );
+}
+var SelectContent = React18.forwardRef(({ className, children, position = "popper", items, sectionLabel = "Section", showSearch = false, searchPlaceholder = "Search...", side = "bottom", sideOffset = 0, ...props }, ref) => {
+  const { theme } = useTheme();
+  const themeClass = theme === "dark" ? "dark" : "light";
+  const [searchQuery, setSearchQuery] = React18.useState("");
+  const container = React18.useMemo(
+    () => {
+      var _a5;
+      return typeof document !== "undefined" ? (_a5 = document.querySelector(".lego-land")) != null ? _a5 : void 0 : void 0;
+    },
+    []
+  );
+  const filteredItems = React18.useMemo(
+    () => items ? filterItemsBySearch(items, searchQuery) : [],
+    [items, searchQuery]
+  );
+  const handleSearchKeyDown = React18.useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+  const content = items ? /* @__PURE__ */ jsxs11(SelectGroup, { children: [
+    /* @__PURE__ */ jsx16(SelectLabel, { children: sectionLabel }),
+    filteredItems.map((item) => {
+      var _a5;
+      return /* @__PURE__ */ jsx16(
+        SelectItem,
+        {
+          value: item.value,
+          type: item.subtext ? "double" : "single",
+          subtext: item.subtext,
+          leadIcon: item.leadIcon,
+          leadIconSize: (_a5 = item.leadIconSize) != null ? _a5 : "sm",
+          children: item.label
+        },
+        item.value
+      );
+    })
+  ] }) : children;
+  return /* @__PURE__ */ jsx16(SelectPrimitive.Portal, { container, children: /* @__PURE__ */ jsx16("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ jsxs11(
+    SelectPrimitive.Content,
+    {
+      ref,
+      side,
+      sideOffset,
+      className: cn(
+        SELECT_TOKENS.dropdown.base,
+        "relative z-50 overflow-hidden",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "data-[side=bottom]:rounded-t-none",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        showSearch && /* @__PURE__ */ jsxs11("div", { className: SELECT_TOKENS.search.container, children: [
+          /* @__PURE__ */ jsx16(Search, { className: SELECT_TOKENS.search.icon }),
+          /* @__PURE__ */ jsx16(
+            "input",
+            {
+              type: "search",
+              role: "searchbox",
+              "aria-label": "Search options",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              onKeyDown: handleSearchKeyDown,
+              placeholder: searchPlaceholder,
+              className: cn(
+                "flex-1 min-w-0 h-9 bg-transparent pl-2 pr-3 py-1 text-sm leading-5 font-normal tracking-normal text-accent-foreground placeholder:text-muted-foreground outline-none border-0"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx16(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "max-h-[300px] overflow-y-auto w-full",
+              position === "popper" && "min-w-[var(--radix-select-trigger-width)]"
+            ),
+            children: content
+          }
+        )
+      ]
+    }
+  ) }) });
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn(SELECT_TOKENS.menu.sectionLabel, className),
+    ...props,
+    children: /* @__PURE__ */ jsx16(Typography, { as: "span", variant: "p3", tone: "muted", className: SELECT_TOKENS.menu.sectionText, children: props.children })
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React18.forwardRef(({ className, children, subtext, type = "single", leadIcon, leadIconSize = "sm", ...props }, ref) => /* @__PURE__ */ jsxs11(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      SELECT_TOKENS.menu.item.base,
+      type === "single" ? SELECT_TOKENS.menu.item.singleLine : SELECT_TOKENS.menu.item.doubleLine,
+      "cursor-pointer outline-none",
+      "hover:bg-foreground/10 focus-visible:bg-foreground/10 data-[state=checked]:bg-foreground/10",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs11("div", { className: cn(SELECT_TOKENS.menu.itemContent.base), children: [
+        leadIcon ? /* @__PURE__ */ jsx16(
+          "span",
+          {
+            className: cn(
+              "shrink-0 text-muted-foreground",
+              leadIconSize === "xs" && "size-4",
+              leadIconSize === "md" && "size-8",
+              (leadIconSize === "sm" || !leadIconSize) && SELECT_TOKENS.leadIcon
+            ),
+            children: leadIcon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs11("div", { className: cn(
+          SELECT_TOKENS.menu.itemTextWrap.base,
+          type === "single" ? SELECT_TOKENS.menu.itemTextWrap.singleLine : SELECT_TOKENS.menu.itemTextWrap.doubleLine,
+          "min-w-0 flex-1"
+        ), children: [
+          /* @__PURE__ */ jsx16(SelectPrimitive.ItemText, { asChild: true, children: /* @__PURE__ */ jsx16(
+            Typography,
+            {
+              as: "p",
+              variant: "p2",
+              tone: "inherit",
+              className: cn(SELECT_TOKENS.menu.itemText, "text-accent-foreground"),
+              children
+            }
+          ) }),
+          subtext && type === "double" && /* @__PURE__ */ jsx16(
+            Typography,
+            {
+              as: "p",
+              variant: "p3",
+              tone: "muted",
+              className: SELECT_TOKENS.menu.itemSubtext,
+              children: subtext
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs11("span", { className: SELECT_TOKENS.menu.checkIcon.wrap, children: [
+        /* @__PURE__ */ jsx16("span", { className: SELECT_TOKENS.menu.checkIcon.slot, "aria-hidden": true }),
+        /* @__PURE__ */ jsx16(SelectPrimitive.ItemIndicator, { className: SELECT_TOKENS.menu.checkIcon.indicator, children: /* @__PURE__ */ jsx16(Check2, { className: SELECT_TOKENS.menu.checkIcon.icon }) })
+      ] })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+function SelectFormLabel({ className, label = "Title", mandatory = true }) {
+  return /* @__PURE__ */ jsxs11("div", { className: cn(SELECT_TOKENS.label.container, className), children: [
+    /* @__PURE__ */ jsx16("p", { className: SELECT_TOKENS.label.text, children: label }),
+    mandatory && /* @__PURE__ */ jsx16("p", { className: SELECT_TOKENS.label.asterisk, children: "*" })
+  ] });
+}
+
+// src/select/play-select.tsx
+import * as React21 from "react";
+
+// src/select/playback-control.tsx
+import * as React19 from "react";
+import { Pause, Play } from "lucide-react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var PlaybackControl = React19.forwardRef(
+  ({ state, playing, ...props }, ref) => {
+    const showPause = state ? state === "pause" : !!playing;
+    const Icon2 = showPause ? Pause : Play;
+    return /* @__PURE__ */ jsx17(
+      Button,
+      {
+        ref,
+        variant: "iconOutline",
+        size: "icon",
+        button_border_radius: "rounded",
+        "aria-label": showPause ? "Pause" : "Play",
+        showLeadingIcon: false,
+        showTrailingIcon: false,
+        ...props,
+        children: /* @__PURE__ */ jsx17(Icon2, { className: cn("size-5", !showPause && "ml-0.5") })
+      }
+    );
+  }
+);
+PlaybackControl.displayName = "PlaybackControl";
+
+// src/select/use-play-select.ts
+import * as React20 from "react";
+function usePlaySelect({
+  value,
+  defaultValue,
+  onValueChange,
+  onPlayClick,
+  onSelectValue,
+  onCloseDropdown
+}) {
+  const [internalValue, setInternalValue] = React20.useState(defaultValue);
+  const [playingUrl, setPlayingUrl] = React20.useState(null);
+  const audioRef = React20.useRef(null);
+  const currentValue = value !== void 0 ? value : internalValue;
+  React20.useEffect(() => {
+    if (value === void 0 && defaultValue !== void 0) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, value]);
+  const pauseAudio = React20.useCallback(() => {
+    var _a5;
+    (_a5 = audioRef.current) == null ? void 0 : _a5.pause();
+    setPlayingUrl(null);
+  }, []);
+  const handleValueChange = React20.useCallback(
+    (newValue) => {
+      if (value === void 0) {
+        setInternalValue(newValue);
+      }
+      onValueChange == null ? void 0 : onValueChange(newValue);
+      onSelectValue == null ? void 0 : onSelectValue(newValue);
+    },
+    [value, onValueChange, onSelectValue]
+  );
+  const handleOpenChange = React20.useCallback(
+    (open) => {
+      if (!open) {
+        pauseAudio();
+        onCloseDropdown == null ? void 0 : onCloseDropdown();
+      }
+    },
+    [pauseAudio, onCloseDropdown]
+  );
+  const handlePlay = React20.useCallback(
+    (url, item) => {
+      const audio = audioRef.current;
+      if (!audio) return;
+      if (playingUrl === url) {
+        audio.pause();
+        setPlayingUrl(null);
+      } else {
+        audio.src = url;
+        audio.play();
+        setPlayingUrl(url);
+      }
+      onPlayClick == null ? void 0 : onPlayClick(url, item);
+    },
+    [playingUrl, onPlayClick]
+  );
+  const stopEvent = React20.useCallback((e) => {
+    e.stopPropagation();
+    e.preventDefault();
+  }, []);
+  const createPlayHandler = React20.useCallback(
+    (item) => (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      handlePlay(item.url, item);
+    },
+    [handlePlay]
+  );
+  React20.useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const onEnded = () => setPlayingUrl(null);
+    audio.addEventListener("ended", onEnded);
+    return () => audio.removeEventListener("ended", onEnded);
+  }, []);
+  return {
+    value: currentValue,
+    playingUrl,
+    audioRef,
+    handleValueChange,
+    handleOpenChange,
+    handlePlay,
+    stopEvent,
+    createPlayHandler,
+    pauseAudio
+  };
+}
+
+// src/select/play-select.tsx
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var PlaySelect = React21.forwardRef(
+  ({
+    dropdownListItems,
+    label = "Title",
+    placeholder = "Select audio",
+    showSearch = true,
+    searchPlaceholder = "Search...",
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    onPlayClick,
+    onSelectValue,
+    onCloseDropdown,
+    disabled = false,
+    size = "regular",
+    triggerLeadIcon,
+    className,
+    minWidth = "196px"
+  }, ref) => {
+    const {
+      value,
+      playingUrl,
+      audioRef,
+      handleValueChange,
+      handleOpenChange,
+      createPlayHandler,
+      stopEvent
+    } = usePlaySelect({
+      value: controlledValue,
+      defaultValue,
+      onValueChange,
+      onPlayClick,
+      onSelectValue,
+      onCloseDropdown
+    });
+    const items = React21.useMemo(
+      () => dropdownListItems.map((item) => {
+        const isPlaying = playingUrl === item.url;
+        return {
+          value: item.value,
+          label: item.label,
+          subtext: item.subtext,
+          leadIconSize: "md",
+          leadIcon: /* @__PURE__ */ jsx18(
+            "div",
+            {
+              className: "shrink-0 flex items-center justify-center",
+              role: "presentation",
+              onPointerDown: stopEvent,
+              onPointerUp: createPlayHandler(item),
+              onMouseDown: stopEvent,
+              onClick: stopEvent,
+              children: /* @__PURE__ */ jsx18(
+                PlaybackControl,
+                {
+                  size: "iconSm",
+                  className: "h-8 w-8 border-foreground [&>svg]:size-4",
+                  state: isPlaying ? "pause" : "play",
+                  "aria-label": isPlaying ? `Pause ${item.label}` : `Play ${item.label}`
+                }
+              )
+            }
+          )
+        };
+      }),
+      [dropdownListItems, playingUrl, stopEvent, createPlayHandler]
+    );
+    return /* @__PURE__ */ jsxs12("div", { className: cn("flex flex-col gap-2", className), style: minWidth ? { minWidth } : void 0, children: [
+      /* @__PURE__ */ jsx18("audio", { ref: audioRef, className: "sr-only" }),
+      /* @__PURE__ */ jsx18(SelectFormLabel, { label, mandatory: true }),
+      /* @__PURE__ */ jsxs12(
+        Select,
+        {
+          value,
+          onValueChange: handleValueChange,
+          onOpenChange: handleOpenChange,
+          disabled,
+          children: [
+            /* @__PURE__ */ jsx18(SelectTrigger, { ref, showLead: true, leadIcon: triggerLeadIcon, size, children: /* @__PURE__ */ jsx18(SelectValue, { placeholder }) }),
+            /* @__PURE__ */ jsx18(
+              SelectContent,
+              {
+                items,
+                sectionLabel: "Audio",
+                showSearch,
+                searchPlaceholder
+              }
+            )
+          ]
+        }
+      ),
+      playingUrl && /* @__PURE__ */ jsx18("p", { className: "text-xs text-muted-foreground", children: "Playing audio..." })
+    ] });
+  }
+);
+PlaySelect.displayName = "PlaySelect";
+
+// src/select/use-select.ts
+import * as React22 from "react";
+function useSelect({ value, defaultValue, onValueChange }) {
+  const [internalValue, setInternalValue] = React22.useState(defaultValue);
+  const currentValue = value !== void 0 ? value : internalValue;
+  React22.useEffect(() => {
+    if (value === void 0 && defaultValue !== void 0) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue, value]);
+  const handleValueChange = React22.useCallback(
+    (newValue) => {
+      if (value === void 0) {
+        setInternalValue(newValue);
+      }
+      onValueChange == null ? void 0 : onValueChange(newValue);
+    },
+    [value, onValueChange]
+  );
+  return {
+    value: currentValue,
+    setValue: setInternalValue,
+    handleValueChange
+  };
+}
+
+// src/empty-state/empty-state.tsx
+import * as React23 from "react";
+
+// src/empty-state/variables.ts
+var EMPTY_STATE_TOKENS = {
+  /** Outer container: centered column layout with gap-24px, p-24px, rounded-sm */
+  container: "flex flex-col gap-6 items-center justify-center p-6 rounded-[var(--rounded-sm,4px)]",
+  /** Inner content wrapper: illustration + text block */
+  content: "flex flex-col gap-4 items-center shrink-0",
+  /** Illustration area: 120×120 */
+  illustration: "shrink-0 size-[120px]",
+  /** Text wrapper: title + description */
+  textWrap: "flex flex-col gap-2 items-center shrink-0 tracking-normal",
+  /** Title: text-base/regular, foreground */
+  title: "text-base leading-6 font-normal text-foreground",
+  /** Description: text-sm/regular, muted-foreground, centered, max-width ~351px */
+  description: "text-sm leading-5 font-normal text-muted-foreground text-center max-w-[351px]"
+};
+
+// src/empty-state/empty-state.tsx
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var EmptyState = React23.forwardRef(
+  ({ className, illustration, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      ref,
+      className: cn(EMPTY_STATE_TOKENS.container, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs13("div", { className: EMPTY_STATE_TOKENS.content, children: [
+          illustration && /* @__PURE__ */ jsx19("div", { className: EMPTY_STATE_TOKENS.illustration, children: illustration }),
+          /* @__PURE__ */ jsxs13("div", { className: EMPTY_STATE_TOKENS.textWrap, children: [
+            /* @__PURE__ */ jsx19("p", { className: EMPTY_STATE_TOKENS.title, children: title }),
+            description && /* @__PURE__ */ jsx19("p", { className: EMPTY_STATE_TOKENS.description, children: description })
+          ] })
+        ] }),
+        action
+      ]
+    }
+  )
+);
+EmptyState.displayName = "EmptyState";
+
+// src/list-card/list-card.tsx
+import * as React24 from "react";
+
+// src/list-card/variables.ts
+var LIST_TOKENS = {
+  base: "overflow-hidden transition-colors cursor-pointer relative 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",
+  type: {
+    card: "flex flex-col gap-4 items-start p-6",
+    list: "flex gap-4 items-center py-4 px-6"
+  },
+  variant: {
+    card: {
+      default: "bg-card",
+      outline: "bg-card border border-border px-6",
+      muted: "bg-background"
+    },
+    list: {
+      default: "",
+      outline: "border border-border px-4",
+      muted: "bg-background"
+    }
+  },
+  radius: {
+    none: `${DEFAULT_THEME.radius.mode1.roundedNone}px`,
+    soft: `${DEFAULT_THEME.radius.mode1.roundedMd}px`,
+    rounded: `${DEFAULT_THEME.radius.mode1.rounded2xl}px`
+  }
+};
+
+// src/list-card/list-card.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var List = React24.forwardRef(
+  ({
+    type = "card",
+    variant = "default",
+    list_border_radius: list_border_radiusProp,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const list_border_radius = list_border_radiusProp != null ? list_border_radiusProp : type === "card" ? "rounded" : "soft";
+    return /* @__PURE__ */ jsx20(
+      "div",
+      {
+        ref,
+        className: cn(
+          LIST_TOKENS.base,
+          LIST_TOKENS.type[type],
+          LIST_TOKENS.variant[type][variant],
+          className
+        ),
+        style: {
+          borderRadius: LIST_TOKENS.radius[list_border_radius],
+          ...style
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+List.displayName = "List";
+
+// src/tooltip/tooltip.tsx
+import * as React25 from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+// src/tooltip/variables.ts
+var TOOLTIP_TOKENS = {
+  content: {
+    base: "z-50 overflow-hidden rounded-md px-3 py-2 text-xs leading-4",
+    bg: "bg-primary text-primary-foreground",
+    shadow: "shadow-md"
+  },
+  arrow: "fill-primary",
+  shortcut: {
+    base: "ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1 text-xs leading-4 font-normal",
+    bg: "bg-muted",
+    text: "text-muted-foreground"
+  }
+};
+
+// src/tooltip/tooltip.tsx
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+var useTooltipContainer = () => {
+  const [container, setContainer] = React25.useState(void 0);
+  React25.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const el = document.querySelector(".lego-land");
+    setContainer(el != null ? el : void 0);
+  }, []);
+  return container;
+};
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React25.forwardRef(({ className, sideOffset = 6, shortcut, children, ...props }, ref) => {
+  const container = useTooltipContainer();
+  const content = /* @__PURE__ */ jsxs14(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      className: cn(
+        TOOLTIP_TOKENS.content.base,
+        TOOLTIP_TOKENS.content.bg,
+        TOOLTIP_TOKENS.content.shadow,
+        "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs14("div", { className: "flex items-center", children: [
+          children,
+          shortcut && /* @__PURE__ */ jsx21(
+            "span",
+            {
+              className: cn(
+                TOOLTIP_TOKENS.shortcut.base,
+                TOOLTIP_TOKENS.shortcut.bg,
+                TOOLTIP_TOKENS.shortcut.text
+              ),
+              children: shortcut
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx21(TooltipPrimitive.Arrow, { className: TOOLTIP_TOKENS.arrow })
+      ]
+    }
+  );
+  return container ? /* @__PURE__ */ jsx21(TooltipPrimitive.Portal, { container, children: content }) : content;
+});
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/dialog/dialog.tsx
+import * as React26 from "react";
+import { X } from "lucide-react";
+
+// src/dialog/variables.ts
+var DIALOG_TOKENS = {
+  overlay: "fixed inset-0 z-50 flex items-center justify-center bg-black/30",
+  container: "bg-card border border-border rounded-lg shadow-lg overflow-hidden flex flex-col",
+  size: {
+    sm: "w-[400px]",
+    default: "w-[512px]",
+    wide: "w-[960px]"
+  },
+  icon: {
+    wrapper: "bg-primary/10 rounded-full p-6 self-center mx-6 mt-6 shrink-0"
+  },
+  header: {
+    wrapper: "flex flex-col shrink-0",
+    row: "flex items-center gap-[10px] px-6 py-6",
+    title: "flex-1 text-lg font-semibold leading-7 text-foreground",
+    closeBtn: "size-9 flex items-center justify-center rounded-md text-foreground hover:bg-muted transition-colors cursor-pointer",
+    divider: "h-px bg-border"
+  },
+  body: {
+    base: "flex flex-col gap-4 px-6 py-4",
+    scrollable: "flex-1 overflow-y-auto max-h-[507px]"
+  },
+  footer: {
+    wrapper: "flex flex-col shrink-0",
+    divider: "h-px bg-border",
+    row: "flex gap-2 items-center justify-end px-6 py-4"
+  }
+};
+
+// src/dialog/dialog.tsx
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var DialogContext = React26.createContext({ close: () => {
+} });
+var Dialog = React26.forwardRef(
+  ({
+    open,
+    onOpenChange,
+    type = "default",
+    size = "default",
+    title,
+    icon,
+    children,
+    cancelLabel = "Cancel",
+    confirmLabel = "Continue",
+    showCancel = true,
+    onCancel,
+    onConfirm,
+    className
+  }, ref) => {
+    const close = React26.useCallback(() => onOpenChange(false), [onOpenChange]);
+    React26.useEffect(() => {
+      if (!open) return;
+      const handler = (e) => {
+        if (e.key === "Escape") close();
+      };
+      document.addEventListener("keydown", handler);
+      return () => document.removeEventListener("keydown", handler);
+    }, [open, close]);
+    if (!open) return null;
+    const isScrollable = type === "scrollable" || type === "scrollable-fixed";
+    const hasFixedDividers = type === "scrollable-fixed";
+    const hasIcon = type === "icon";
+    const showClose = !hasIcon;
+    return /* @__PURE__ */ jsx22(DialogContext.Provider, { value: { close }, children: /* @__PURE__ */ jsx22("div", { className: DIALOG_TOKENS.overlay, onClick: close, children: /* @__PURE__ */ jsxs15(
+      "div",
+      {
+        ref,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? "dialog-title" : void 0,
+        className: cn(
+          DIALOG_TOKENS.container,
+          DIALOG_TOKENS.size[size],
+          className
+        ),
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          hasIcon && icon && /* @__PURE__ */ jsx22("div", { className: DIALOG_TOKENS.icon.wrapper, children: icon }),
+          title && /* @__PURE__ */ jsxs15("div", { className: DIALOG_TOKENS.header.wrapper, children: [
+            /* @__PURE__ */ jsxs15("div", { className: DIALOG_TOKENS.header.row, children: [
+              /* @__PURE__ */ jsx22("h2", { id: "dialog-title", className: DIALOG_TOKENS.header.title, children: title }),
+              showClose && /* @__PURE__ */ jsx22(
+                "button",
+                {
+                  type: "button",
+                  onClick: close,
+                  className: DIALOG_TOKENS.header.closeBtn,
+                  "aria-label": "Close dialog",
+                  children: /* @__PURE__ */ jsx22(X, { className: "size-[18px]" })
+                }
+              )
+            ] }),
+            hasFixedDividers && /* @__PURE__ */ jsx22("div", { className: DIALOG_TOKENS.header.divider })
+          ] }),
+          /* @__PURE__ */ jsx22(
+            "div",
+            {
+              className: cn(
+                DIALOG_TOKENS.body.base,
+                isScrollable && DIALOG_TOKENS.body.scrollable
+              ),
+              children
+            }
+          ),
+          /* @__PURE__ */ jsxs15("div", { className: DIALOG_TOKENS.footer.wrapper, children: [
+            hasFixedDividers && /* @__PURE__ */ jsx22("div", { className: DIALOG_TOKENS.footer.divider }),
+            /* @__PURE__ */ jsxs15("div", { className: DIALOG_TOKENS.footer.row, children: [
+              showCancel && /* @__PURE__ */ jsx22(
+                Button,
+                {
+                  variant: "outline",
+                  button_border_radius: "rounded",
+                  onClick: onCancel != null ? onCancel : close,
+                  children: cancelLabel
+                }
+              ),
+              /* @__PURE__ */ jsx22(
+                Button,
+                {
+                  variant: "primary",
+                  button_border_radius: "rounded",
+                  onClick: onConfirm,
+                  children: confirmLabel
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) }) });
+  }
+);
+Dialog.displayName = "Dialog";
+var DialogIcon = React26.forwardRef(
+  ({ children, className }, ref) => /* @__PURE__ */ jsx22("div", { ref, className: cn(DIALOG_TOKENS.icon.wrapper, className), children })
+);
+DialogIcon.displayName = "DialogIcon";
+var DialogHeader = React26.forwardRef(
+  ({ title, showClose = true, showDivider = false, className }, ref) => {
+    const { close } = React26.useContext(DialogContext);
+    return /* @__PURE__ */ jsxs15("div", { ref, className: cn(DIALOG_TOKENS.header.wrapper, className), children: [
+      /* @__PURE__ */ jsxs15("div", { className: DIALOG_TOKENS.header.row, children: [
+        /* @__PURE__ */ jsx22("h2", { className: DIALOG_TOKENS.header.title, children: title }),
+        showClose && /* @__PURE__ */ jsx22(
+          "button",
+          {
+            type: "button",
+            onClick: close,
+            className: DIALOG_TOKENS.header.closeBtn,
+            "aria-label": "Close dialog",
+            children: /* @__PURE__ */ jsx22(X, { className: "size-[18px]" })
+          }
+        )
+      ] }),
+      showDivider && /* @__PURE__ */ jsx22("div", { className: DIALOG_TOKENS.header.divider })
+    ] });
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogBody = React26.forwardRef(
+  ({ children, scrollable = false, className }, ref) => /* @__PURE__ */ jsx22(
+    "div",
+    {
+      ref,
+      className: cn(
+        DIALOG_TOKENS.body.base,
+        scrollable && DIALOG_TOKENS.body.scrollable,
+        className
+      ),
+      children
+    }
+  )
+);
+DialogBody.displayName = "DialogBody";
+var DialogFooter = React26.forwardRef(
+  ({
+    cancelLabel = "Cancel",
+    confirmLabel = "Continue",
+    showCancel = true,
+    onCancel,
+    onConfirm,
+    showDivider = false,
+    className
+  }, ref) => {
+    const { close } = React26.useContext(DialogContext);
+    return /* @__PURE__ */ jsxs15("div", { ref, className: cn(DIALOG_TOKENS.footer.wrapper, className), children: [
+      showDivider && /* @__PURE__ */ jsx22("div", { className: DIALOG_TOKENS.footer.divider }),
+      /* @__PURE__ */ jsxs15("div", { className: DIALOG_TOKENS.footer.row, children: [
+        showCancel && /* @__PURE__ */ jsx22(
+          Button,
+          {
+            variant: "outline",
+            button_border_radius: "rounded",
+            onClick: onCancel != null ? onCancel : close,
+            children: cancelLabel
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          Button,
+          {
+            variant: "primary",
+            button_border_radius: "rounded",
+            onClick: onConfirm,
+            children: confirmLabel
+          }
+        )
+      ] })
+    ] });
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+
+// src/toast/toast.tsx
+import * as React27 from "react";
+import { Toaster as SonnerToaster, toast as sonnerToast } from "sonner";
+import { ChevronRight, CircleCheck, CircleAlert, ThumbsUp } from "lucide-react";
+
+// src/toast/variables.ts
+var TOAST_TOKENS = {
+  root: "relative bg-background border border-border rounded-lg overflow-hidden flex items-center gap-3 px-4 py-3 w-full",
+  icon: {
+    success: "text-success shrink-0",
+    error: "text-destructive shrink-0",
+    default: "text-foreground shrink-0"
+  },
+  content: "flex flex-col gap-0.5 flex-1 min-w-0",
+  title: {
+    success: "text-success text-sm font-medium leading-5",
+    error: "text-destructive text-sm font-medium leading-5",
+    default: "text-foreground text-sm font-medium leading-5"
+  },
+  subtextRow: "flex items-center gap-1",
+  subtextIcon: "size-4 text-muted-foreground shrink-0",
+  subtext: "text-muted-foreground text-sm font-light leading-5",
+  // Cancel button on the right
+  cancelBtn: "size-10 shrink-0 flex items-center justify-center border border-border rounded-full text-foreground hover:bg-muted transition-colors cursor-pointer",
+  // Thin progress bar pinned to the bottom (track + fill overlay)
+  progress: {
+    wrapper: "absolute bottom-0 left-0 right-0 h-1 overflow-hidden rounded-b-lg",
+    track: "absolute inset-0 h-full w-full bg-muted",
+    fill: {
+      base: "absolute left-0 top-0 bottom-0 h-full transition-[width] ease-out",
+      success: "bg-success",
+      error: "bg-destructive",
+      default: "bg-primary"
+    }
+  }
+};
+
+// src/toast/toast.tsx
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+var Toaster = ({
+  position = "bottom-right",
+  ...props
+}) => /* @__PURE__ */ jsx23(
+  SonnerToaster,
+  {
+    position,
+    toastOptions: { unstyled: true, classNames: { toast: "w-[360px]" } },
+    ...props
+  }
+);
+Toaster.displayName = "Toaster";
+var TOAST_ICON = {
+  success: CircleCheck,
+  error: CircleAlert,
+  default: ThumbsUp
+};
+var Toast = React27.forwardRef(
+  ({
+    variant = "default",
+    title,
+    subtext,
+    showCancel = false,
+    onCancel,
+    showProgress = false,
+    progress = 0,
+    className,
+    style
+  }, ref) => {
+    const Icon2 = TOAST_ICON[variant];
+    const clampedProgress = Math.min(100, Math.max(0, progress));
+    return /* @__PURE__ */ jsxs16(
+      "div",
+      {
+        ref,
+        className: cn(TOAST_TOKENS.root, className),
+        style,
+        children: [
+          /* @__PURE__ */ jsx23(Icon2, { className: cn("size-6", TOAST_TOKENS.icon[variant]) }),
+          /* @__PURE__ */ jsxs16("div", { className: TOAST_TOKENS.content, children: [
+            /* @__PURE__ */ jsx23("span", { className: TOAST_TOKENS.title[variant], children: title }),
+            subtext && /* @__PURE__ */ jsxs16("div", { className: TOAST_TOKENS.subtextRow, children: [
+              /* @__PURE__ */ jsx23(CircleCheck, { className: TOAST_TOKENS.subtextIcon }),
+              /* @__PURE__ */ jsx23("span", { className: TOAST_TOKENS.subtext, children: subtext })
+            ] })
+          ] }),
+          showCancel && /* @__PURE__ */ jsx23(
+            "button",
+            {
+              type: "button",
+              onClick: onCancel,
+              className: TOAST_TOKENS.cancelBtn,
+              "aria-label": "Dismiss",
+              children: /* @__PURE__ */ jsx23(ChevronRight, { className: "size-5" })
+            }
+          ),
+          showProgress && /* @__PURE__ */ jsxs16("div", { className: TOAST_TOKENS.progress.wrapper, children: [
+            /* @__PURE__ */ jsx23("div", { className: TOAST_TOKENS.progress.track }),
+            /* @__PURE__ */ jsx23(
+              "div",
+              {
+                className: cn(
+                  TOAST_TOKENS.progress.fill.base,
+                  TOAST_TOKENS.progress.fill[variant]
+                ),
+                style: { width: `${clampedProgress}%` }
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Toast.displayName = "Toast";
+var showToast = ({
+  duration,
+  ...props
+}) => {
+  return sonnerToast.custom(
+    (id) => /* @__PURE__ */ jsx23(
+      Toast,
+      {
+        ...props,
+        onCancel: props.showCancel ? () => sonnerToast.dismiss(id) : void 0
+      }
+    ),
+    { duration }
+  );
+};
+
+// src/stepper/stepper.tsx
+import * as React28 from "react";
+import { Check as Check3 } from "lucide-react";
+
+// src/stepper/variables.ts
+var STEPPER_TOKENS = {
+  // --- StepperBar ---
+  bar: {
+    root: "flex gap-1 items-center w-full",
+    segment: {
+      base: "flex-1 h-1 rounded-sm",
+      active: "bg-primary",
+      inactive: "bg-border"
+    }
+  },
+  // --- Stepper ---
+  stepper: {
+    root: "flex items-center w-full",
+    connector: "flex-1 h-px bg-border min-w-2",
+    step: {
+      wrapper: "flex gap-2 items-center shrink-0",
+      indicator: {
+        base: "size-6 rounded-full flex items-center justify-center shrink-0",
+        incomplete: "bg-neutral-300",
+        active: "bg-primary",
+        complete: "bg-primary"
+      },
+      number: {
+        incomplete: "text-muted-foreground text-xs font-medium leading-4",
+        active: "text-primary-foreground text-xs font-medium leading-4"
+      },
+      checkIcon: "size-3.5 text-primary-foreground stroke-2",
+      label: {
+        base: "text-xs leading-4",
+        incomplete: "text-muted-foreground font-normal",
+        active: "text-foreground font-medium",
+        complete: "text-muted-foreground font-normal"
+      }
+    }
+  }
+};
+
+// src/stepper/stepper.tsx
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+var StepperBar = React28.forwardRef(
+  ({ totalSteps = 4, currentStep, className, style }, ref) => {
+    return /* @__PURE__ */ jsx24(
+      "div",
+      {
+        ref,
+        className: cn(STEPPER_TOKENS.bar.root, className),
+        style,
+        children: Array.from({ length: totalSteps }).map((_, index) => /* @__PURE__ */ jsx24(
+          "div",
+          {
+            className: cn(
+              STEPPER_TOKENS.bar.segment.base,
+              index < currentStep ? STEPPER_TOKENS.bar.segment.active : STEPPER_TOKENS.bar.segment.inactive
+            )
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+StepperBar.displayName = "StepperBar";
+var Stepper = React28.forwardRef(
+  ({ steps, className, style }, ref) => {
+    return /* @__PURE__ */ jsx24(
+      "div",
+      {
+        ref,
+        className: cn(STEPPER_TOKENS.stepper.root, className),
+        style,
+        children: steps.map((step, index) => {
+          var _a5;
+          const state = (_a5 = step.state) != null ? _a5 : "incomplete";
+          return /* @__PURE__ */ jsxs17(React28.Fragment, { children: [
+            /* @__PURE__ */ jsxs17("div", { className: STEPPER_TOKENS.stepper.step.wrapper, children: [
+              /* @__PURE__ */ jsx24(
+                "div",
+                {
+                  className: cn(
+                    STEPPER_TOKENS.stepper.step.indicator.base,
+                    STEPPER_TOKENS.stepper.step.indicator[state]
+                  ),
+                  children: state === "complete" ? /* @__PURE__ */ jsx24(Check3, { className: STEPPER_TOKENS.stepper.step.checkIcon }) : /* @__PURE__ */ jsx24(
+                    "span",
+                    {
+                      className: state === "active" ? STEPPER_TOKENS.stepper.step.number.active : STEPPER_TOKENS.stepper.step.number.incomplete,
+                      children: index + 1
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx24(
+                "span",
+                {
+                  className: cn(
+                    STEPPER_TOKENS.stepper.step.label.base,
+                    STEPPER_TOKENS.stepper.step.label[state]
+                  ),
+                  children: step.label
+                }
+              )
+            ] }),
+            index < steps.length - 1 && /* @__PURE__ */ jsx24("div", { className: STEPPER_TOKENS.stepper.connector })
+          ] }, index);
+        })
+      }
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+
+// src/shadow-dom-wrapper.tsx
+import * as React29 from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var ShadowDOMWrapper = ({
   children,
   styles,
@@ -1922,10 +3292,10 @@ var ShadowDOMWrapper = ({
   additionalStyles = "",
   copyCSSVariables = true
 }) => {
-  const containerRef = React17.useRef(null);
-  const shadowRootRef = React17.useRef(null);
-  const [shadowRoot, setShadowRoot] = React17.useState(null);
-  React17.useEffect(() => {
+  const containerRef = React29.useRef(null);
+  const shadowRootRef = React29.useRef(null);
+  const [shadowRoot, setShadowRoot] = React29.useState(null);
+  React29.useEffect(() => {
     if (!containerRef.current) return;
     if (!shadowRootRef.current) {
       shadowRootRef.current = containerRef.current.attachShadow({ mode });
@@ -2014,8 +3384,8 @@ var ShadowDOMWrapper = ({
     return () => {
     };
   }, [styles, mode, additionalStyles, copyCSSVariables]);
-  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
-    /* @__PURE__ */ jsx15("div", { ref: containerRef }),
+  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
+    /* @__PURE__ */ jsx25("div", { ref: containerRef }),
     shadowRoot && createPortal(children, shadowRoot)
   ] });
 };
@@ -2032,16 +3402,38 @@ export {
   Button,
   Checkbox,
   DEFAULT_THEME,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
   DialogHeaderNavigation,
+  DialogIcon,
+  EmptyState,
   FileInput,
   Input,
   InputGroup,
   LegoLandWrapper,
+  List,
   NumberBadge,
   NurixThemeProvider,
+  PlaySelect,
+  PlaybackControl,
   RadioGroup,
   RadioGroupItem,
+  Select,
+  SelectContent,
+  SelectFormLabel,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
   ShadowDOMWrapper,
+  Stepper,
+  StepperBar,
   Switch,
   Tabs,
   TabsContent,
@@ -2049,5 +3441,15 @@ export {
   TabsTrigger,
   Textarea,
   ThemeProvider,
+  Toast,
+  Toaster,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  Typography,
+  showToast,
+  usePlaySelect,
+  useSelect,
   useTheme
 };