@locus-ui/components 0.0.12 → 0.0.15

package/dist/index.js

@@ -19,13 +19,20 @@ function getComponentProps(props, ...propDefs) {
     const prop = allProps[key];
     const value = _optionalChain([props, 'optionalAccess', _2 => _2[key]]);
     delete restProps[key];
-    if (prop.type === "boolean" || prop.type === "string" || prop.type === "value | array" || prop.type === "reactNode" || prop.type === "function") {
+    if (prop.type === "boolean" || prop.type === "string" || prop.type === "number" || prop.type === "value | array" || prop.type === "reactNode" || prop.type === "function") {
       extractedProps[key] = value;
-      if (prop.cssProperty && value !== void 0 && value !== null) {
-        style = {
-          ...style,
-          [prop.cssProperty]: prop.type === "boolean" ? value ? "1" : "0" : value
-        };
+      if (prop.cssProperty) {
+        if (value !== void 0 && value !== null) {
+          style = {
+            ...style,
+            [prop.cssProperty]: prop.type === "boolean" ? value ? "1" : "0" : value
+          };
+        } else if (prop.default !== void 0) {
+          style = {
+            ...style,
+            [prop.cssProperty]: prop.type === "boolean" ? prop.default ? "1" : "0" : prop.default
+          };
+        }
       }
       if (prop.dataAttr) {
         if (value) dataAttrs[`data-${prop.dataAttr}`] = value;
@@ -41,13 +48,14 @@ function getComponentProps(props, ...propDefs) {
         if (propValue !== null && propValue !== void 0) {
           if (!breakpoint) extractedProps[key] = propValue;
           if (!prop.values.includes(propValue)) {
+            const transformedValue = "transform" in prop && prop.transform ? prop.transform(propValue) : propValue;
             if (prop.className) {
               classNames.push(
                 breakpoint ? `${prop.className}-${breakpoint}` : prop.className
               );
               style = {
                 ...style,
-                [`--custom-${key}${usedBreakpoint}`]: propValue
+                [`--custom-${key}${usedBreakpoint}`]: transformedValue
               };
             }
             if (prop.dataAttr) {
@@ -86,7 +94,7 @@ function getComponentProps(props, ...propDefs) {
 }
 
 // src/components/accordion/accordion-context.ts
-var _react = require('react'); var React2 = _interopRequireWildcard(_react); var React4 = _interopRequireWildcard(_react); var React5 = _interopRequireWildcard(_react); var React11 = _interopRequireWildcard(_react); var React13 = _interopRequireWildcard(_react); var React12 = _interopRequireWildcard(_react); var React16 = _interopRequireWildcard(_react); var React14 = _interopRequireWildcard(_react); var React15 = _interopRequireWildcard(_react); var React18 = _interopRequireWildcard(_react); var React17 = _interopRequireWildcard(_react); var React22 = _interopRequireWildcard(_react); var React19 = _interopRequireWildcard(_react); var React20 = _interopRequireWildcard(_react); var React21 = _interopRequireWildcard(_react); var React23 = _interopRequireWildcard(_react); var React24 = _interopRequireWildcard(_react); var React25 = _interopRequireWildcard(_react); var React27 = _interopRequireWildcard(_react); var React26 = _interopRequireWildcard(_react); var React28 = _interopRequireWildcard(_react); var React29 = _interopRequireWildcard(_react);
+var _react = require('react'); var React2 = _interopRequireWildcard(_react); var React4 = _interopRequireWildcard(_react); var React5 = _interopRequireWildcard(_react); var React11 = _interopRequireWildcard(_react); var React12 = _interopRequireWildcard(_react); var React14 = _interopRequireWildcard(_react); var React13 = _interopRequireWildcard(_react); var React17 = _interopRequireWildcard(_react); var React15 = _interopRequireWildcard(_react); var React16 = _interopRequireWildcard(_react); var React19 = _interopRequireWildcard(_react); var React18 = _interopRequireWildcard(_react); var React25 = _interopRequireWildcard(_react); var React22 = _interopRequireWildcard(_react); var React23 = _interopRequireWildcard(_react); var React24 = _interopRequireWildcard(_react); var React26 = _interopRequireWildcard(_react); var React27 = _interopRequireWildcard(_react); var React28 = _interopRequireWildcard(_react); var React30 = _interopRequireWildcard(_react); var React29 = _interopRequireWildcard(_react); var React31 = _interopRequireWildcard(_react); var React36 = _interopRequireWildcard(_react);
 var AccordionContext = React2.default.createContext(null);
 function useAccordionContext() {
   const context = React2.default.useContext(AccordionContext);
@@ -322,6 +330,60 @@ var AlignPropDef = {
   }
 };
 
+// src/utils/parse-color.ts
+function parseColor(value) {
+  const trimmed = value.trim();
+  const hexMatch = trimmed.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (hexMatch) {
+    let hex = hexMatch[1];
+    if (hex.length === 3) {
+      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    }
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return `${r}, ${g}, ${b}`;
+  }
+  const rgbMatch = trimmed.match(
+    /^rgba?\(\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})\s*(?:[,/]\s*[\d.]+%?\s*)?\)$/
+  );
+  if (rgbMatch) {
+    return `${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}`;
+  }
+  return trimmed;
+}
+
+// src/props/color.prop.ts
+var Colors = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "accent",
+  "success",
+  "warning",
+  "danger",
+  "info"
+];
+var ColorPropDef = {
+  /**
+   * Sets the color of the component.
+   *
+   * Uses predefined theme colors ("primary", "secondary", etc.) or accepts custom color values in hex, rgb, or raw rgb formats.
+   *
+   * @example color="primary" // primary color
+   * @example color="#7BEB34" // hex color
+   * @example color="rgb(125, 235, 52)" // rgb color
+   * @example color="125, 235, 52" // raw rgb values
+   */
+  color: {
+    type: "enum | string",
+    values: Colors,
+    dataAttr: "color",
+    className: "color",
+    transform: parseColor
+  }
+};
+
 // src/props/margin.prop.ts
 var marginValues = [
   "auto",
@@ -1112,6 +1174,7 @@ var Button = (props) => {
   } = getComponentProps(
     props,
     ButtonRootPropsDefs,
+    ColorPropDef,
     MarginPropDefs,
     PaddingPropDefs,
     RadiusPropDefs,
@@ -1414,18 +1477,10 @@ var Text = React2.default.forwardRef(
       props,
       TextPropsDefs,
       MarginPropDefs,
-      PaddingPropDefs
-    );
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "p",
-      {
-        ref,
-        ...dataAttrs,
-        className: _clsx2.default.call(void 0, "lcs-text", className),
-        ...rest,
-        children
-      }
+      PaddingPropDefs,
+      ColorPropDef
     );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { ref, ...dataAttrs, className: _clsx2.default.call(void 0, "text", className), ...rest, children });
   }
 );
 
@@ -1616,17 +1671,71 @@ var Container = React11.forwardRef((props, ref) => {
 });
 Container.displayName = "Container";
 
+// src/components/panel/panel.tsx
+
+
+
+// src/components/panel/panel.props.ts
+var PanelVariants = ["solid", "outlined", "muted"];
+var PanelPropsDefs = {
+  /**
+   * Sets the variant style of the panel ("solid", "outlined", or "muted").
+   */
+  variant: {
+    type: "enum",
+    values: PanelVariants,
+    dataAttr: "variant"
+  },
+  /**
+   * The blur amount applied to the panel.
+   *
+   * @example blur="4px" // Sets the backdrop blur to 4 pixels
+   * @default "2px"
+   */
+  blur: {
+    type: "string",
+    default: "2px",
+    cssProperty: "--panel-blur"
+  }
+};
+
+// src/components/panel/panel.tsx
+
+var Panel = React12.forwardRef((props, ref) => {
+  const { className, dataAttrs, children, ...rest } = getComponentProps(
+    props,
+    PanelPropsDefs,
+    MarginPropDefs,
+    PaddingPropDefs,
+    SpacingPropDef,
+    RadiusPropDefs,
+    RoundnessPropDef,
+    ColorPropDef
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref,
+      className: _clsx2.default.call(void 0, "panel", className),
+      ...dataAttrs,
+      ...rest,
+      children
+    }
+  );
+});
+Panel.displayName = "Panel";
+
 // src/components/portal/backdrop/portal-backdrop.tsx
 
 
 
 // src/components/portal/portal-context.tsx
 
-var PortalContext = React12.createContext(
+var PortalContext = React13.createContext(
   void 0
 );
 function usePortalContext() {
-  const context = React12.useContext(PortalContext);
+  const context = React13.useContext(PortalContext);
   if (!context) {
     throw new Error("`usePortalContext` must be used within a `Portal.Root`");
   }
@@ -1674,7 +1783,7 @@ var PortalBackdropPropsDefs = {
 
 // src/components/portal/backdrop/portal-backdrop.tsx
 
-var PortalBackdrop = React13.forwardRef(
+var PortalBackdrop = React14.forwardRef(
   (props, ref) => {
     const context = usePortalContext();
     const { className, dataAttrs, ...rest } = getComponentProps(
@@ -1702,11 +1811,11 @@ var _reactdom = require('react-dom'); var _reactdom2 = _interopRequireDefault(_r
 
 // src/components/theme/theme-context.tsx
 
-var ThemeContext = React14.createContext(
+var ThemeContext = React15.createContext(
   void 0
 );
 function useTheme() {
-  const context = React14.useContext(ThemeContext);
+  const context = React15.useContext(ThemeContext);
   if (!context) {
     throw new Error("`useTheme` must be used within a `Theme`");
   }
@@ -1724,9 +1833,9 @@ function useAnchorPosition({
   alignOffset = 0,
   enabled = true
 }) {
-  const [position, setPosition] = React15.useState(null);
-  const [, _forceUpdate] = React15.useReducer((x) => x + 1, 0);
-  const updatePosition = React15.useCallback(() => {
+  const [position, setPosition] = React16.useState(null);
+  const [, _forceUpdate] = React16.useReducer((x) => x + 1, 0);
+  const updatePosition = React16.useCallback(() => {
     const anchor = anchorRef.current;
     const content = contentRef.current;
     if (!anchor || !content || !enabled) {
@@ -1787,7 +1896,7 @@ function useAnchorPosition({
     );
     setPosition({ top, left });
   }, [anchorRef, contentRef, side, align, sideOffset, alignOffset, enabled]);
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (!enabled) {
       setPosition(null);
       return;
@@ -1869,11 +1978,11 @@ var PortalContentPropsDefs = {
 
 // src/components/portal/content/portal-content.tsx
 
-var PortalContent = React16.forwardRef(
+var PortalContent = React17.forwardRef(
   (props, ref) => {
     const portalContext = usePortalContext();
-    const themeContext = React16.useContext(ThemeContext);
-    const contentRef = React16.useRef(null);
+    const themeContext = React17.useContext(ThemeContext);
+    const contentRef = React17.useRef(null);
     const {
       side = "bottom",
       align = "center",
@@ -1895,7 +2004,7 @@ var PortalContent = React16.forwardRef(
       alignOffset: parseInt(alignOffset, 10) || 0,
       enabled: anchored && portalContext.open
     });
-    const setRefs = React16.useCallback(
+    const setRefs = React17.useCallback(
       (node) => {
         contentRef.current = node;
         if (typeof ref === "function") {
@@ -1906,7 +2015,7 @@ var PortalContent = React16.forwardRef(
       },
       [ref]
     );
-    React16.useEffect(() => {
+    React17.useEffect(() => {
       if (!portalContext.open) return;
       function onKeyDown(e) {
         if (e.key === "Escape") {
@@ -1918,7 +2027,7 @@ var PortalContent = React16.forwardRef(
         document.removeEventListener("keydown", onKeyDown);
       };
     }, [portalContext.open, portalContext.onOpenChange]);
-    React16.useEffect(() => {
+    React17.useEffect(() => {
       if (!portalContext.open || !anchored) return;
       function onClickOutside(e) {
         const target = e.target;
@@ -1990,11 +2099,11 @@ PortalContent.displayName = "Portal.Content";
 // src/components/portal/trigger/portal-trigger.tsx
 
 
-var PortalTrigger = React17.forwardRef(
+var PortalTrigger = React18.forwardRef(
   ({ children, asChild, onClick, ...props }, ref) => {
     const context = usePortalContext();
-    const internalRef = React17.useRef(null);
-    React17.useEffect(() => {
+    const internalRef = React18.useRef(null);
+    React18.useEffect(() => {
       if (internalRef.current) {
         context.triggerRef.current = internalRef.current;
       }
@@ -2003,7 +2112,7 @@ var PortalTrigger = React17.forwardRef(
       _optionalChain([context, 'access', _33 => _33.onOpenChange, 'optionalCall', _34 => _34(!context.open)]);
       _optionalChain([onClick, 'optionalCall', _35 => _35(event)]);
     };
-    const setRefs = React17.useCallback(
+    const setRefs = React18.useCallback(
       (node) => {
         internalRef.current = node;
         if (typeof ref === "function") {
@@ -2015,8 +2124,8 @@ var PortalTrigger = React17.forwardRef(
       },
       [ref, context.triggerRef]
     );
-    if (asChild && React17.isValidElement(children)) {
-      return React17.cloneElement(children, {
+    if (asChild && React18.isValidElement(children)) {
+      return React18.cloneElement(children, {
         ref: setRefs,
         onClick: handleClick,
         ...props
@@ -2080,8 +2189,8 @@ var PortalRoot = (props) => {
     defaultValue: defaultOpen,
     onChange: onOpenChange
   });
-  const triggerRef = React18.useRef(null);
-  const value = React18.useMemo(
+  const triggerRef = React19.useRef(null);
+  const value = React19.useMemo(
     () => ({
       open,
       onOpenChange: setOpen,
@@ -2109,17 +2218,138 @@ var Portal = {
   Backdrop: PortalBackdrop
 };
 
+// src/components/progress-bar/fill/progress-bar-fill.tsx
+
+
+
+// src/components/progress-bar/progress-bar-context.ts
+
+var ProgressBarContext = React2.default.createContext(null);
+
+// src/components/progress-bar/fill/progress-bar-fill.props.ts
+var ProgressBarFillPropsDefs = {
+  /**
+   * The value of the progress bar (filled state).
+   * Should be a number between 0 and 1 representing the percentage of completion.
+   */
+  value: {
+    type: "number"
+  }
+};
+
+// src/components/progress-bar/fill/progress-bar-fill.tsx
+
+var ProgressBarFill = (props) => {
+  const context = _react.useContext.call(void 0, ProgressBarContext);
+  const { value, color, style, className, dataAttrs, ...rest } = getComponentProps(props, ProgressBarFillPropsDefs);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-color": _nullishCoalesce(color, () => ( _optionalChain([context, 'optionalAccess', _36 => _36.color]))),
+      "data-variant": _optionalChain([context, 'optionalAccess', _37 => _37.variant]),
+      style: { ...style, width: `${(_nullishCoalesce(value, () => ( 0))) / ((_nullishCoalesce(_optionalChain([context, 'optionalAccess', _38 => _38.totalValue]), () => ( 0))) > 1 ? context.totalValue : 1) * 100}%` },
+      className: _clsx2.default.call(void 0, "progress-bar-fill", className),
+      ...dataAttrs,
+      ...rest
+    }
+  );
+};
+ProgressBarFill.displayName = "ProgressBar.Fill";
+
+// src/components/progress-bar/root/progress-bar-root.tsx
+
+
+
+// src/components/progress-bar/root/progress-bar-root.props.ts
+var ProgressBarVariants = ["solid", "outlined", "muted"];
+var ProgressBarRootPropsDefs = {
+  /**
+   * Sets the variant style of the progress bar ("solid", "outlined", or "muted").
+   */
+  variant: {
+    type: "enum",
+    values: ProgressBarVariants,
+    dataAttr: "variant"
+  },
+  /**
+   * The value of the progress bar (filled state).
+   * Should be a number between 0 and 1 representing the percentage of completion.
+   */
+  value: {
+    type: "number"
+  }
+};
+
+// src/components/progress-bar/root/progress-bar-root.tsx
+
+var ALLOWED_CHILDREN5 = [ProgressBarFill.displayName];
+var ProgressBarRoot = (props) => {
+  const { value, size, color, variant, className, dataAttrs, ...rest } = getComponentProps(
+    props,
+    ProgressBarRootPropsDefs,
+    MarginPropDefs,
+    SizePropDef
+  );
+  const validChildren = filterChildren(props.children, ALLOWED_CHILDREN5, {
+    parentDisplayName: ProgressBarRoot.displayName
+  });
+  const { fills, totalValue } = _react.useMemo.call(void 0, () => {
+    const fills2 = validChildren.filter(
+      (child) => _react.isValidElement.call(void 0, child) && child.type.displayName === ProgressBarFill.displayName
+    );
+    if (fills2.length > 0) {
+      const totalValue2 = fills2.reduce(
+        (sum, child) => sum + (_react.isValidElement.call(void 0, child) ? _nullishCoalesce(child.props.value, () => ( 0)) : 0),
+        0
+      );
+      return {
+        fills: fills2,
+        totalValue: totalValue2
+      };
+    }
+    return {
+      fills: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, ProgressBarFill, { color, value })],
+      totalValue: _nullishCoalesce(value, () => ( 0))
+    };
+  }, [validChildren, color, value]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ProgressBarContext.Provider, { value: { color, variant, totalValue }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-size": size,
+      "data-color": color,
+      "data-variant": variant,
+      className: _clsx2.default.call(void 0, "progress-bar-root", className),
+      ...dataAttrs,
+      ...rest,
+      children: fills.map((fill, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, React2.default.Fragment, { children: fill }, index))
+    }
+  ) });
+};
+ProgressBarRoot.displayName = "ProgressBar.Root";
+
+// src/components/progress-bar/progress-bar.tsx
+var ProgressBar = Object.assign(ProgressBarRoot, {
+  /**
+   * The root component for the Progress Bar.
+   */
+  Root: ProgressBarRoot,
+  /**
+   * The fill component for the Progress Bar, representing the filled portion.
+   */
+  Fill: ProgressBarFill
+});
+
 // src/components/select/content/select-content.tsx
 
 
 
 // src/components/select/select-context.tsx
 
-var SelectContext = React19.createContext(
+var SelectContext = React22.createContext(
   null
 );
 function useSelectContext() {
-  const context = React19.useContext(SelectContext);
+  const context = React22.useContext(SelectContext);
   if (!context) {
     throw new Error("Select components must be used within a Select.Root");
   }
@@ -2129,7 +2359,7 @@ function useSelectContext() {
 // src/components/select/utils/user-composed-refs.ts
 
 function useComposedRefs(...refs) {
-  return React20.useCallback(
+  return React23.useCallback(
     (node) => {
       refs.forEach((ref) => {
         if (typeof ref === "function") {
@@ -2147,7 +2377,7 @@ function useComposedRefs(...refs) {
 
 
 
-var SelectViewport = React21.forwardRef(
+var SelectViewport = React24.forwardRef(
   (props, ref) => {
     const { className, children, ...rest } = props;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: _clsx2.default.call(void 0, "select-viewport", className), ...rest, children });
@@ -2157,7 +2387,7 @@ SelectViewport.displayName = "Select.Viewport";
 
 // src/components/select/content/select-content.tsx
 
-var SelectContent = React22.forwardRef(
+var SelectContent = React25.forwardRef(
   (props, forwardedRef) => {
     const {
       className,
@@ -2170,10 +2400,10 @@ var SelectContent = React22.forwardRef(
     } = props;
     const context = useSelectContext();
     const composedRef = useComposedRefs(forwardedRef, context.contentRef);
-    React22.useEffect(() => {
+    React25.useEffect(() => {
       context.itemValues.current = [];
     }, [context.open]);
-    React22.useEffect(() => {
+    React25.useEffect(() => {
       if (!context.open) return;
       const handleClickOutside = (event) => {
         const target = event.target;
@@ -2184,7 +2414,7 @@ var SelectContent = React22.forwardRef(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [context.open]);
-    React22.useEffect(() => {
+    React25.useEffect(() => {
       if (!context.open) return;
       const handleKeyDown = (event) => {
         const items = context.itemValues.current;
@@ -2230,17 +2460,17 @@ var SelectContent = React22.forwardRef(
           case "Escape":
             event.preventDefault();
             context.onOpenChange(false);
-            _optionalChain([context, 'access', _36 => _36.triggerRef, 'access', _37 => _37.current, 'optionalAccess', _38 => _38.focus, 'call', _39 => _39()]);
+            _optionalChain([context, 'access', _39 => _39.triggerRef, 'access', _40 => _40.current, 'optionalAccess', _41 => _41.focus, 'call', _42 => _42()]);
             break;
         }
       };
       document.addEventListener("keydown", handleKeyDown);
       return () => document.removeEventListener("keydown", handleKeyDown);
     }, [context.open, context.highlightedIndex]);
-    const [contentWidth, setContentWidth] = React22.useState();
+    const [contentWidth, setContentWidth] = React25.useState();
     const labelInside = context.labelPosition === "inside";
     const anchorRef = labelInside ? context.rootRef : context.triggerRef;
-    React22.useLayoutEffect(() => {
+    React25.useLayoutEffect(() => {
       if (context.open && anchorRef.current) {
         setContentWidth(anchorRef.current.getBoundingClientRect().width);
       }
@@ -2288,7 +2518,7 @@ var SelectGroupsPropDefs = {
 
 // src/components/select/group/select-group.tsx
 
-var SelectGroup = React23.forwardRef(
+var SelectGroup = React26.forwardRef(
   (props, ref) => {
     const { className, children, dataAttrs, ...rest } = getComponentProps(
       props,
@@ -2352,7 +2582,7 @@ var SelectItemPropDefs = {
 
 // src/components/select/item/select-item.tsx
 
-var SelectItem = React24.forwardRef(
+var SelectItem = React27.forwardRef(
   (props, ref) => {
     const context = useSelectContext();
     const { value, disabled, children, className, ...rest } = getComponentProps(
@@ -2360,12 +2590,12 @@ var SelectItem = React24.forwardRef(
       SelectItemPropDefs
     );
     const selected = context.value === value;
-    React24.useEffect(() => {
+    React27.useEffect(() => {
       if (selected && children) {
         context.setDisplayValue(children);
       }
     }, [selected]);
-    React24.useEffect(() => {
+    React27.useEffect(() => {
       if (!value) return;
       if (!disabled) {
         const values = context.itemValues.current;
@@ -2386,7 +2616,7 @@ var SelectItem = React24.forwardRef(
           context.setDisplayValue(children);
         }
         context.onOpenChange(false);
-        _optionalChain([context, 'access', _40 => _40.triggerRef, 'access', _41 => _41.current, 'optionalAccess', _42 => _42.focus, 'call', _43 => _43()]);
+        _optionalChain([context, 'access', _43 => _43.triggerRef, 'access', _44 => _44.current, 'optionalAccess', _45 => _45.focus, 'call', _46 => _46()]);
       }
     };
     const handleMouseEnter = () => {
@@ -2442,15 +2672,15 @@ var SelectLabelPropDefs = {
 
 // src/components/select/label/select-label.tsx
 
-var SelectLabel = React25.forwardRef(
+var SelectLabel = React28.forwardRef(
   (props, ref) => {
     const context = useSelectContext();
     const { className, children, position, dataAttrs } = getComponentProps(
       props,
       SelectLabelPropDefs
     );
-    React25.useLayoutEffect(() => {
-      _optionalChain([context, 'access', _44 => _44.setLabelPosition, 'optionalCall', _45 => _45(_nullishCoalesce(position, () => ( "top")))]);
+    React28.useLayoutEffect(() => {
+      _optionalChain([context, 'access', _47 => _47.setLabelPosition, 'optionalCall', _48 => _48(_nullishCoalesce(position, () => ( "top")))]);
     }, [position, context.setLabelPosition]);
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "label",
@@ -2484,7 +2714,7 @@ SelectLabel.displayName = "Select.Label";
 
 
 
-var SelectValue = React26.forwardRef(
+var SelectValue = React29.forwardRef(
   (props, ref) => {
     const { className, placeholder: placeholderProp, ...rest } = props;
     const context = useSelectContext();
@@ -2536,7 +2766,7 @@ var SelectTriggerPropsDefs = {};
 
 // src/components/select/trigger/select-trigger.tsx
 
-var SelectTrigger = React27.forwardRef(
+var SelectTrigger = React30.forwardRef(
   (props, forwardedRef) => {
     const {
       className,
@@ -2641,7 +2871,7 @@ var SelectRootPropsDefs = {
 
 // src/components/select/root/select-root.tsx
 
-var ALLOWED_CHILDREN5 = [
+var ALLOWED_CHILDREN6 = [
   SelectLabel.displayName,
   SelectTrigger.displayName,
   SelectContent.displayName
@@ -2722,9 +2952,9 @@ var SelectRoot = (props) => {
     ]
   );
   _react.useLayoutEffect.call(void 0, () => {
-    _optionalChain([setTriggerVariant, 'optionalCall', _46 => _46(_nullishCoalesce(variant, () => ( "outlined")))]);
+    _optionalChain([setTriggerVariant, 'optionalCall', _49 => _49(_nullishCoalesce(variant, () => ( "outlined")))]);
   }, [variant, setTriggerVariant]);
-  const validChildren = filterChildren(children, ALLOWED_CHILDREN5, {
+  const validChildren = filterChildren(children, ALLOWED_CHILDREN6, {
     parentDisplayName: SelectRoot.displayName
   });
   const labelInside = labelPosition === "inside";
@@ -2788,7 +3018,7 @@ SelectRoot.displayName = "Select.Root";
 
 
 
-var SelectSeparator = React28.forwardRef(
+var SelectSeparator = React31.forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -2864,17 +3094,364 @@ var Separator = (props) => {
 };
 Separator.displayName = "Separator";
 
+// src/components/switch/indicator/switch-indicator.tsx
+
+
+
+// src/components/switch/switch-context.ts
+
+var SwitchContext = React2.default.createContext(
+  null
+);
+function useSwitchContext() {
+  const context = React2.default.useContext(SwitchContext);
+  if (!context) {
+    throw new Error("Switch components must be used within a Switch.Root");
+  }
+  return context;
+}
+
+// src/components/switch/root/switch-root.props.ts
+var SwitchVariants = ["solid", "outlined", "muted"];
+var SwitchRootPropsDefs = {
+  /**
+   * Sets the variant style of the switch ("solid" or "outlined").
+   */
+  variant: {
+    type: "enum",
+    values: SwitchVariants,
+    dataAttr: "variant"
+  },
+  /**
+   * Sets the checked state of the switch.
+   *
+   * When using an uncontrolled switch, use `defaultChecked` instead.
+   * @default undefined
+   */
+  checked: {
+    type: "boolean",
+    dataAttr: "checked"
+  },
+  /**
+   * The value of the switch (checked state).
+   */
+  value: {
+    type: "boolean"
+  },
+  /**
+   * Sets the default checked state of the switch.
+   * @default undefined
+   */
+  defaultChecked: {
+    type: "boolean"
+  },
+  /**
+   * Disables the switch component.
+   * @default undefined
+   */
+  disabled: {
+    type: "boolean",
+    dataAttr: "disabled"
+  },
+  /**
+   * Makes the switch read-only.
+   * @default undefined
+   */
+  readonly: {
+    type: "boolean",
+    dataAttr: "readonly"
+  },
+  /**
+   * Marks the switch as required.
+   * @default undefined
+   */
+  required: {
+    type: "boolean",
+    dataAttr: "required"
+  },
+  /**
+   * Sets the name attribute of the switch input for form control.
+   * @default undefined
+   */
+  name: {
+    type: "string"
+  },
+  /**
+   * Callback fired when the checked state changes.
+   *
+   * @param value - The new checked state.
+   */
+  onCheckedChange: {
+    type: "function"
+  }
+};
+
+// src/components/switch/indicator/switch-indicator.props.ts
+var SwitchIndicatorPropDefs = {
+  /**
+   * Sets the variant style of the switch ("solid" or "outlined").
+   */
+  variant: {
+    type: "enum",
+    values: SwitchVariants,
+    dataAttr: "variant"
+  }
+};
+
+// src/components/switch/indicator/switch-indicator.tsx
+
+var SwitchIndicator = React2.default.forwardRef((props, ref) => {
+  const {
+    value,
+    setValue,
+    hovered,
+    color,
+    disabled,
+    readonly,
+    focused,
+    variant: contextVariant
+  } = useSwitchContext();
+  const { size, variant, className, style, dataAttrs } = getComponentProps(
+    props,
+    SwitchIndicatorPropDefs,
+    SizePropDef
+  );
+  const indicatorVariant = variant || contextVariant;
+  const handleKeyDown = (event) => {
+    if (disabled || readonly) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      setValue(!value);
+    }
+  };
+  const indicatorProps = {
+    ...value && { "data-checked": true },
+    ...disabled && { "data-disabled": true },
+    ...readonly && { "data-readonly": true },
+    ...(variant || contextVariant) && { "data-variant": indicatorVariant }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref,
+      style,
+      role: "switch",
+      "data-size": size,
+      "data-color": color,
+      "data-hovered": hovered,
+      "aria-disabled": disabled,
+      "data-focused": focused,
+      "aria-readonly": readonly,
+      onKeyDown: handleKeyDown,
+      tabIndex: disabled || readonly ? -1 : 0,
+      className: _clsx2.default.call(void 0, "switch-indicator", className),
+      ...indicatorProps,
+      ...dataAttrs
+    }
+  );
+});
+SwitchIndicator.displayName = "Switch.Indicator";
+
+// src/components/switch/label/switch-label.tsx
+
+
+
+// src/components/switch/label/switch-label.props.ts
+var labelPositions3 = ["top", "left", "right", "bottom"];
+var SwitchLabelPropDefs = {
+  /**
+   * Sets the position of the label relative to the switch.
+   *
+   * @example position="left" // positions the label to the left of the switch
+   * @example position="top" // positions the label above the switch
+   */
+  position: {
+    type: "enum",
+    values: labelPositions3,
+    dataAttr: "position"
+  }
+};
+
+// src/components/switch/label/switch-label.tsx
+
+var SwitchLabel = React2.default.forwardRef(
+  (props, ref) => {
+    const context = useSwitchContext();
+    const { className, children, position } = getComponentProps(
+      props,
+      SwitchLabelPropDefs
+    );
+    React2.default.useLayoutEffect(() => {
+      _optionalChain([context, 'access', _50 => _50.setLabelPosition, 'optionalCall', _51 => _51(_nullishCoalesce(position, () => ( "right")))]);
+    }, [position, context.setLabelPosition]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "label",
+      {
+        ref,
+        htmlFor: context.labelId,
+        className: _clsx2.default.call(void 0, "switch-label", className),
+        ...position && { [`data-position`]: position },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { children })
+      }
+    );
+  }
+);
+SwitchLabel.displayName = "Switch.Label";
+
+// src/components/switch/root/switch-root.tsx
+
+
+
+
+
+
+
+
+var ALLOWED_CHILDREN7 = [
+  SwitchLabel.displayName,
+  SwitchIndicator.displayName
+];
+var SwitchRoot = (props) => {
+  const {
+    name,
+    size,
+    color,
+    variant,
+    checked,
+    dataAttrs,
+    onCheckedChange,
+    value: valueProp,
+    disabled = false,
+    required = false,
+    readonly = false,
+    defaultChecked = false
+  } = getComponentProps(
+    props,
+    SwitchRootPropsDefs,
+    AlignPropDef,
+    MarginPropDefs,
+    SizePropDef,
+    ColorPropDef
+  );
+  const [value, setValue] = useControllableState({
+    value: valueProp || checked,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange
+  });
+  const labelId = _react.useId.call(void 0, );
+  const [labelPosition, setLabelPosition] = _react.useState.call(void 0, "right");
+  const [hovered, setHovered] = _react.useState.call(void 0, false);
+  const [focused, setFocused] = _react.useState.call(void 0, false);
+  const validChildren = filterChildren(props.children, ALLOWED_CHILDREN7, {
+    parentDisplayName: SwitchRoot.displayName
+  });
+  const { restDataAttrs } = _react.useMemo.call(void 0, () => {
+    const { ["data-color"]: _, ...restDataAttrs2 } = dataAttrs || {};
+    return { restDataAttrs: restDataAttrs2 };
+  }, [dataAttrs]);
+  const { indicator, otherChildren } = _react.useMemo.call(void 0, () => {
+    const indicatorIndex = validChildren.findIndex(
+      (child) => _react.isValidElement.call(void 0, child) && child.type.displayName === SwitchIndicator.displayName
+    );
+    if (indicatorIndex > -1) {
+      return {
+        indicator: validChildren[indicatorIndex],
+        otherChildren: validChildren.filter((_, i) => i !== indicatorIndex)
+      };
+    }
+    return {
+      indicator: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SwitchIndicator, { size }),
+      otherChildren: validChildren
+    };
+  }, [validChildren, size]);
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({
+      name,
+      value,
+      color,
+      setValue,
+      onCheckedChange,
+      labelId,
+      labelPosition,
+      setLabelPosition,
+      variant,
+      hovered,
+      setHovered,
+      focused,
+      setFocused,
+      disabled,
+      readonly,
+      required
+    }),
+    [
+      name,
+      value,
+      color,
+      onCheckedChange,
+      setValue,
+      labelId,
+      labelPosition,
+      hovered,
+      focused,
+      disabled,
+      readonly,
+      required
+    ]
+  );
+  const handleClick = () => {
+    if (disabled || readonly) return;
+    setValue(!value);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SwitchContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _clsx2.default.call(void 0, "switch-root", props.className),
+      onClick: () => handleClick(),
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      ...restDataAttrs,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: "switch-container",
+            "data-size": size,
+            "data-color": color,
+            "data-checked": value,
+            "data-hovered": hovered,
+            "data-focused": focused,
+            "data-variant": variant,
+            children: indicator
+          }
+        ),
+        otherChildren,
+        name && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { type: "hidden", name, value: String(value) })
+      ]
+    }
+  ) });
+};
+SwitchRoot.displayName = "Switch";
+
+// src/components/switch/switch.tsx
+var Switch = Object.assign(SwitchRoot, {
+  Root: SwitchRoot,
+  Label: SwitchLabel,
+  Indicator: SwitchIndicator
+});
+
 // src/components/theme/theme.tsx
 
 
-var Theme = React29.forwardRef((props, ref) => {
-  const context = React29.useContext(ThemeContext);
+var Theme = React36.forwardRef((props, ref) => {
+  const context = React36.useContext(ThemeContext);
   const isRoot = context === void 0;
   if (isRoot) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThemeRoot, { ...props, ref });
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThemeSub, { ...props, ref });
 });
 Theme.displayName = "Theme";
-var ThemeRoot = React29.forwardRef((props, ref) => {
+var ThemeRoot = React36.forwardRef((props, ref) => {
   const {
     appearance: themeAppearance,
     radius: themeRadius,
@@ -2883,15 +3460,15 @@ var ThemeRoot = React29.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const [appearance, setAppearance] = React29.useState(
+  const [appearance, setAppearance] = React36.useState(
     _nullishCoalesce(themeAppearance, () => ( "light"))
   );
-  const [radius, setRadius] = React29.useState(_nullishCoalesce(themeRadius, () => ( "md")));
-  const [roundness2, setRoundness] = React29.useState(
+  const [radius, setRadius] = React36.useState(_nullishCoalesce(themeRadius, () => ( "md")));
+  const [roundness2, setRoundness] = React36.useState(
     _nullishCoalesce(themeRoundness, () => ( "3"))
   );
-  const [spacing, setSpacing] = React29.useState(_nullishCoalesce(themeSpacing, () => ( "md")));
-  const value = React29.useMemo(
+  const [spacing, setSpacing] = React36.useState(_nullishCoalesce(themeSpacing, () => ( "md")));
+  const value = React36.useMemo(
     () => ({
       appearance,
       radius,
@@ -2918,8 +3495,8 @@ var ThemeRoot = React29.forwardRef((props, ref) => {
   ) });
 });
 ThemeRoot.displayName = "ThemeRoot";
-var ThemeSub = React29.forwardRef((props, ref) => {
-  const context = React29.useContext(ThemeContext);
+var ThemeSub = React36.forwardRef((props, ref) => {
+  const context = React36.useContext(ThemeContext);
   const {
     appearance,
     radius,
@@ -2960,7 +3537,8 @@ ThemeSub.displayName = "ThemeSub";
 
 // src/components/theme/theme-control.tsx
 
-function ThemeControl() {
+
+function ThemeControl({ position = "bottom" }) {
   const {
     appearance,
     onAppearanceChange,
@@ -2971,84 +3549,103 @@ function ThemeControl() {
     spacing,
     onSpacingChange
   } = useTheme();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      Select.Root,
-      {
-        variant: "solid",
-        value: appearance,
-        onValueChange: (change) => _optionalChain([onAppearanceChange, 'optionalCall', _47 => _47(change)]),
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Label, { position: "inside", children: "Theme Settings" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Trigger, {}),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select.Content, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "light", children: "Light" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "dark", children: "Dark" })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      Select.Root,
-      {
-        variant: "solid",
-        value: radius,
-        onValueChange: (change) => _optionalChain([onRadiusChange, 'optionalCall', _48 => _48(change)]),
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Label, { position: "inside", children: "Radius" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Trigger, {}),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select.Content, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "none", children: "None" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "xs", children: "XS" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "sm", children: "SM" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "md", children: "MD" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "lg", children: "LG" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "xl", children: "XL" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "full", children: "FULL" })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      Select.Root,
-      {
-        variant: "solid",
-        value: roundness2,
-        onValueChange: (change) => _optionalChain([onRoundnessChange, 'optionalCall', _49 => _49(change)]),
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Label, { className: "min-w-40!", position: "inside", children: "Roundness" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Trigger, {}),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select.Content, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "1", children: "1" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "2", children: "2" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "3", children: "3" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "4", children: "4" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "5", children: "5" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "6", children: "6" })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      Select.Root,
-      {
-        variant: "solid",
-        value: spacing,
-        onValueChange: (change) => _optionalChain([onSpacingChange, 'optionalCall', _50 => _50(change)]),
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Label, { position: "inside", children: "Spacing" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Trigger, {}),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select.Content, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "xs", children: "XS" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "sm", children: "SM" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "md", children: "MD" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "lg", children: "LG" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "xl", children: "XL" })
-          ] })
-        ]
+  const [visible, setVisible] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    function handleKeyDown(event) {
+      if (event.altKey && event.code === "KeyT") {
+        event.preventDefault();
+        setVisible(!visible);
       }
-    )
-  ] });
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [visible]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Portal.Root, { open: visible, onOpenChange: setVisible, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Portal.Content, { position, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    Box,
+    {
+      m: "4",
+      p: "4",
+      className: "flex flex-col gap-2 border-[rgba(var(--border-color), 0.6)]",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          Select.Root,
+          {
+            variant: "solid",
+            value: appearance,
+            onValueChange: (change) => _optionalChain([onAppearanceChange, 'optionalCall', _52 => _52(change)]),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Label, { position: "inside", children: "Theme Settings" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Trigger, {}),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select.Content, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "light", children: "Light" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "dark", children: "Dark" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          Select.Root,
+          {
+            variant: "solid",
+            value: radius,
+            onValueChange: (change) => _optionalChain([onRadiusChange, 'optionalCall', _53 => _53(change)]),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Label, { position: "inside", children: "Radius" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Trigger, {}),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select.Content, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "none", children: "None" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "xs", children: "XS" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "sm", children: "SM" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "md", children: "MD" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "lg", children: "LG" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "xl", children: "XL" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "full", children: "FULL" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          Select.Root,
+          {
+            variant: "solid",
+            value: roundness2,
+            onValueChange: (change) => _optionalChain([onRoundnessChange, 'optionalCall', _54 => _54(change)]),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Label, { className: "min-w-40!", position: "inside", children: "Roundness" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Trigger, {}),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select.Content, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "1", children: "1" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "2", children: "2" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "3", children: "3" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "4", children: "4" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "5", children: "5" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "6", children: "6" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          Select.Root,
+          {
+            variant: "solid",
+            value: spacing,
+            onValueChange: (change) => _optionalChain([onSpacingChange, 'optionalCall', _55 => _55(change)]),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Label, { position: "inside", children: "Spacing" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Trigger, {}),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Select.Content, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "xs", children: "XS" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "sm", children: "SM" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "md", children: "MD" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "lg", children: "LG" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select.Item, { value: "xl", children: "XL" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) }) });
 }
 
 
@@ -3064,5 +3661,8 @@ function ThemeControl() {
 
 
 
-exports.Accordion = Accordion; exports.Badge = Badge; exports.Box = Box; exports.Button = Button; exports.Checkbox = Checkbox; exports.Container = Container; exports.Portal = Portal; exports.Select = Select; exports.Separator = Separator; exports.Text = Text; exports.Theme = Theme; exports.ThemeControl = ThemeControl; exports.useTheme = useTheme;
+
+
+
+exports.Accordion = Accordion; exports.Badge = Badge; exports.Box = Box; exports.Button = Button; exports.Checkbox = Checkbox; exports.Container = Container; exports.Panel = Panel; exports.Portal = Portal; exports.ProgressBar = ProgressBar; exports.Select = Select; exports.Separator = Separator; exports.Switch = Switch; exports.Text = Text; exports.Theme = Theme; exports.ThemeControl = ThemeControl; exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map