@locus-ui/components 0.0.11 → 0.0.13

package/dist/index.mjs

@@ -19,7 +19,7 @@ function getComponentProps(props, ...propDefs) {
     const prop = allProps[key];
     const value = props?.[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 = {
@@ -41,13 +41,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) {
@@ -322,6 +323,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 +1167,7 @@ var Button = (props) => {
   } = getComponentProps(
     props,
     ButtonRootPropsDefs,
+    ColorPropDef,
     MarginPropDefs,
     PaddingPropDefs,
     RadiusPropDefs,
@@ -1616,17 +1672,70 @@ var Container = React11.forwardRef((props, ref) => {
 });
 Container.displayName = "Container";
 
-// src/components/portal/backdrop/portal-backdrop.tsx
+// src/components/panel/panel.tsx
 import clsx14 from "clsx";
-import * as React13 from "react";
+import * as React12 from "react";
+
+// 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
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Panel = React12.forwardRef((props, ref) => {
+  const { className, dataAttrs, children, ...rest } = getComponentProps(
+    props,
+    PanelPropsDefs,
+    MarginPropDefs,
+    PaddingPropDefs,
+    SpacingPropDef,
+    RadiusPropDefs,
+    RoundnessPropDef
+  );
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      ref,
+      className: clsx14("panel", className),
+      ...dataAttrs,
+      ...rest,
+      children
+    }
+  );
+});
+Panel.displayName = "Panel";
+
+// src/components/portal/backdrop/portal-backdrop.tsx
+import clsx15 from "clsx";
+import * as React14 from "react";
 
 // src/components/portal/portal-context.tsx
-import * as React12 from "react";
-var PortalContext = React12.createContext(
+import * as React13 from "react";
+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`");
   }
@@ -1673,8 +1782,8 @@ var PortalBackdropPropsDefs = {
 };
 
 // src/components/portal/backdrop/portal-backdrop.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var PortalBackdrop = React13.forwardRef(
+import { jsx as jsx16 } from "react/jsx-runtime";
+var PortalBackdrop = React14.forwardRef(
   (props, ref) => {
     const context = usePortalContext();
     const { className, dataAttrs, ...rest } = getComponentProps(
@@ -1682,11 +1791,11 @@ var PortalBackdrop = React13.forwardRef(
       PortalBackdropPropsDefs
     );
     if (!context.open) return null;
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       "div",
       {
         ref,
-        className: clsx14("portal-backdrop", className),
+        className: clsx15("portal-backdrop", className),
         ...dataAttrs,
         ...rest
       }
@@ -1696,17 +1805,17 @@ var PortalBackdrop = React13.forwardRef(
 PortalBackdrop.displayName = "Portal.Backdrop";
 
 // src/components/portal/content/portal-content.tsx
-import clsx15 from "clsx";
-import * as React16 from "react";
+import clsx16 from "clsx";
+import * as React17 from "react";
 import ReactDOM from "react-dom";
 
 // src/components/theme/theme-context.tsx
-import * as React14 from "react";
-var ThemeContext = React14.createContext(
+import * as React15 from "react";
+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`");
   }
@@ -1714,7 +1823,7 @@ function useTheme() {
 }
 
 // src/components/portal/utils/use-anchor-position.ts
-import * as React15 from "react";
+import * as React16 from "react";
 function useAnchorPosition({
   anchorRef,
   contentRef,
@@ -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;
@@ -1868,12 +1977,12 @@ var PortalContentPropsDefs = {
 };
 
 // src/components/portal/content/portal-content.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var PortalContent = React16.forwardRef(
+import { jsx as jsx17 } from "react/jsx-runtime";
+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;
@@ -1953,11 +2062,11 @@ var PortalContent = React16.forwardRef(
         left: anchorPosition.left
       } : {}
     };
-    const portalContent = /* @__PURE__ */ jsx16(
+    const portalContent = /* @__PURE__ */ jsx17(
       "div",
       {
         ref: setRefs,
-        className: clsx15("portal", className),
+        className: clsx16("portal", className),
         "data-appearance": themeContext?.appearance,
         "data-radius": themeContext?.radius,
         "data-roundness": themeContext?.roundness ?? "theme",
@@ -1968,7 +2077,7 @@ var PortalContent = React16.forwardRef(
         onClick: anchored ? void 0 : () => portalContext.onOpenChange?.(false),
         style: combinedStyle,
         ...dataAttrs,
-        children: /* @__PURE__ */ jsx16(
+        children: /* @__PURE__ */ jsx17(
           "div",
           {
             className: "portal-content",
@@ -1978,23 +2087,23 @@ var PortalContent = React16.forwardRef(
         )
       }
     );
-    const content = themeContext ? /* @__PURE__ */ jsx16(ThemeContext.Provider, { value: themeContext, children: portalContent }) : portalContent;
+    const content = themeContext ? /* @__PURE__ */ jsx17(ThemeContext.Provider, { value: themeContext, children: portalContent }) : portalContent;
     return ReactDOM.createPortal(content, container);
   }
 );
 PortalContent.displayName = "Portal.Content";
 
 // src/components/portal/root/portal-root.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 
 // src/components/portal/trigger/portal-trigger.tsx
-import * as React17 from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var PortalTrigger = React17.forwardRef(
+import * as React18 from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+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(
       context.onOpenChange?.(!context.open);
       onClick?.(event);
     };
-    const setRefs = React17.useCallback(
+    const setRefs = React18.useCallback(
       (node) => {
         internalRef.current = node;
         if (typeof ref === "function") {
@@ -2015,14 +2124,14 @@ 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
       });
     }
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       "button",
       {
         ref: setRefs,
@@ -2061,7 +2170,7 @@ var PortalRootPropsDefs = {
 };
 
 // src/components/portal/root/portal-root.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var ALLOWED_CHILDREN4 = [
   PortalTrigger.displayName,
   PortalBackdrop.displayName,
@@ -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,
@@ -2093,7 +2202,7 @@ var PortalRoot = (props) => {
   const validChildren = filterChildren(children, ALLOWED_CHILDREN4, {
     parentDisplayName: PortalRoot.displayName
   });
-  return /* @__PURE__ */ jsx18(PortalContext.Provider, { value, children: validChildren });
+  return /* @__PURE__ */ jsx19(PortalContext.Provider, { value, children: validChildren });
 };
 PortalRoot.displayName = "Portal.Root";
 
@@ -2109,17 +2218,138 @@ var Portal = {
   Backdrop: PortalBackdrop
 };
 
-// src/components/select/content/select-content.tsx
+// src/components/progress-bar/fill/progress-bar-fill.tsx
 import clsx17 from "clsx";
-import * as React22 from "react";
+import { useContext as useContext4 } from "react";
+
+// src/components/progress-bar/progress-bar-context.ts
+import React20 from "react";
+var ProgressBarContext = React20.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
+import { jsx as jsx20 } from "react/jsx-runtime";
+var ProgressBarFill = (props) => {
+  const context = useContext4(ProgressBarContext);
+  const { value, color, style, className, dataAttrs, ...rest } = getComponentProps(props, ProgressBarFillPropsDefs);
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      "data-color": color ?? context?.color,
+      "data-variant": context?.variant,
+      style: { ...style, width: `${(value ?? 0) / ((context?.totalValue ?? 0) > 1 ? context.totalValue : 1) * 100}%` },
+      className: clsx17("progress-bar-fill", className),
+      ...dataAttrs,
+      ...rest
+    }
+  );
+};
+ProgressBarFill.displayName = "ProgressBar.Fill";
+
+// src/components/progress-bar/root/progress-bar-root.tsx
+import clsx18 from "clsx";
+import React21, { isValidElement as isValidElement4, useMemo as useMemo5 } from "react";
+
+// 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
+import { jsx as jsx21 } from "react/jsx-runtime";
+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 } = useMemo5(() => {
+    const fills2 = validChildren.filter(
+      (child) => isValidElement4(child) && child.type.displayName === ProgressBarFill.displayName
+    );
+    if (fills2.length > 0) {
+      const totalValue2 = fills2.reduce(
+        (sum, child) => sum + (isValidElement4(child) ? child.props.value ?? 0 : 0),
+        0
+      );
+      return {
+        fills: fills2,
+        totalValue: totalValue2
+      };
+    }
+    return {
+      fills: [/* @__PURE__ */ jsx21(ProgressBarFill, { color, value })],
+      totalValue: value ?? 0
+    };
+  }, [validChildren, color, value]);
+  return /* @__PURE__ */ jsx21(ProgressBarContext.Provider, { value: { color, variant, totalValue }, children: /* @__PURE__ */ jsx21(
+    "div",
+    {
+      "data-size": size,
+      "data-color": color,
+      "data-variant": variant,
+      className: clsx18("progress-bar-root", className),
+      ...dataAttrs,
+      ...rest,
+      children: fills.map((fill, index) => /* @__PURE__ */ jsx21(React21.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
+import clsx20 from "clsx";
+import * as React25 from "react";
 
 // src/components/select/select-context.tsx
-import * as React19 from "react";
-var SelectContext = React19.createContext(
+import * as React22 from "react";
+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");
   }
@@ -2127,9 +2357,9 @@ function useSelectContext() {
 }
 
 // src/components/select/utils/user-composed-refs.ts
-import * as React20 from "react";
+import * as React23 from "react";
 function useComposedRefs(...refs) {
-  return React20.useCallback(
+  return React23.useCallback(
     (node) => {
       refs.forEach((ref) => {
         if (typeof ref === "function") {
@@ -2144,20 +2374,20 @@ function useComposedRefs(...refs) {
 }
 
 // src/components/select/viewport/select-viewport.tsx
-import clsx16 from "clsx";
-import * as React21 from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var SelectViewport = React21.forwardRef(
+import clsx19 from "clsx";
+import * as React24 from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var SelectViewport = React24.forwardRef(
   (props, ref) => {
     const { className, children, ...rest } = props;
-    return /* @__PURE__ */ jsx19("div", { ref, className: clsx16("select-viewport", className), ...rest, children });
+    return /* @__PURE__ */ jsx22("div", { ref, className: clsx19("select-viewport", className), ...rest, children });
   }
 );
 SelectViewport.displayName = "Select.Viewport";
 
 // src/components/select/content/select-content.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var SelectContent = React22.forwardRef(
+import { jsx as jsx23 } from "react/jsx-runtime";
+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;
@@ -2237,24 +2467,24 @@ var SelectContent = React22.forwardRef(
       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);
       }
     }, [context.open, context.labelPosition, anchorRef]);
     if (!context.open) {
-      return /* @__PURE__ */ jsx20("div", { style: { display: "none" }, "aria-hidden": "true", children });
+      return /* @__PURE__ */ jsx23("div", { style: { display: "none" }, "aria-hidden": "true", children });
     }
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx23(
       Portal.Root,
       {
         open: context.open,
         onOpenChange: context.onOpenChange,
         anchorRef,
-        children: /* @__PURE__ */ jsx20(Portal.Content, { anchored: true, side, align, sideOffset: offset, children: /* @__PURE__ */ jsx20(
+        children: /* @__PURE__ */ jsx23(Portal.Content, { anchored: true, side, align, sideOffset: offset, children: /* @__PURE__ */ jsx23(
           "div",
           {
             ref: composedRef,
@@ -2263,10 +2493,10 @@ var SelectContent = React22.forwardRef(
             "data-side": side,
             "data-align": align,
             "data-trigger-variant": context.triggerVariant,
-            className: clsx17("select-content", className),
+            className: clsx20("select-content", className),
             style: { width: contentWidth },
             ...rest,
-            children: /* @__PURE__ */ jsx20(SelectViewport, { children })
+            children: /* @__PURE__ */ jsx23(SelectViewport, { children })
           }
         ) })
       }
@@ -2276,8 +2506,8 @@ var SelectContent = React22.forwardRef(
 SelectContent.displayName = "Select.Content";
 
 // src/components/select/group/select-group.tsx
-import clsx18 from "clsx";
-import * as React23 from "react";
+import clsx21 from "clsx";
+import * as React26 from "react";
 
 // src/components/select/group/select-group.props.ts
 var SelectGroupsPropDefs = {
@@ -2287,8 +2517,8 @@ var SelectGroupsPropDefs = {
 };
 
 // src/components/select/group/select-group.tsx
-import { jsx as jsx21, jsxs as jsxs5 } from "react/jsx-runtime";
-var SelectGroup = React23.forwardRef(
+import { jsx as jsx24, jsxs as jsxs5 } from "react/jsx-runtime";
+var SelectGroup = React26.forwardRef(
   (props, ref) => {
     const { className, children, dataAttrs, ...rest } = getComponentProps(
       props,
@@ -2299,10 +2529,10 @@ var SelectGroup = React23.forwardRef(
       {
         ref,
         role: "group",
-        className: clsx18("select-group", className),
+        className: clsx21("select-group", className),
         ...rest,
         children: [
-          /* @__PURE__ */ jsx21(Text, { className: "select-group-label", disabled: true, children: props.title }),
+          /* @__PURE__ */ jsx24(Text, { className: "select-group-label", disabled: true, children: props.title }),
           children
         ]
       }
@@ -2312,13 +2542,13 @@ var SelectGroup = React23.forwardRef(
 SelectGroup.displayName = "Select.Group";
 
 // src/components/select/item/select-item.tsx
-import clsx19 from "clsx";
-import * as React24 from "react";
+import clsx22 from "clsx";
+import * as React27 from "react";
 
 // src/components/select/item/select-item-indicator.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var SelectItemIndicator = () => {
-  return /* @__PURE__ */ jsx22("span", { className: "select-item-indicator", children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx25("span", { className: "select-item-indicator", children: /* @__PURE__ */ jsx25(
     "svg",
     {
       width: "20",
@@ -2326,7 +2556,7 @@ var SelectItemIndicator = () => {
       viewBox: "0 0 15 15",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx25(
         "path",
         {
           d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
@@ -2351,8 +2581,8 @@ var SelectItemPropDefs = {
 };
 
 // src/components/select/item/select-item.tsx
-import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
-var SelectItem = React24.forwardRef(
+import { jsx as jsx26, jsxs as jsxs6 } from "react/jsx-runtime";
+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;
@@ -2404,20 +2634,20 @@ var SelectItem = React24.forwardRef(
         "data-state": selected ? "checked" : "unchecked",
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: clsx19("select-item", className),
+        className: clsx22("select-item", className),
         onClick: handleClick,
         onMouseEnter: handleMouseEnter,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx26(
             Box,
             {
               style: { width: 24, height: 24, justifyContent: "center" },
               className: "flex items-center",
-              children: selected && /* @__PURE__ */ jsx23(SelectItemIndicator, {})
+              children: selected && /* @__PURE__ */ jsx26(SelectItemIndicator, {})
             }
           ),
-          /* @__PURE__ */ jsx23(Text, { disabled, children })
+          /* @__PURE__ */ jsx26(Text, { disabled, children })
         ]
       }
     );
@@ -2426,8 +2656,8 @@ var SelectItem = React24.forwardRef(
 SelectItem.displayName = "Select.Item";
 
 // src/components/select/label/select-label.tsx
-import clsx20 from "clsx";
-import * as React25 from "react";
+import clsx23 from "clsx";
+import * as React28 from "react";
 
 // src/components/select/label/select-label.props.ts
 var labelPositions2 = ["top", "left", "inside"];
@@ -2441,25 +2671,25 @@ var SelectLabelPropDefs = {
 };
 
 // src/components/select/label/select-label.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
-var SelectLabel = React25.forwardRef(
+import { jsx as jsx27 } from "react/jsx-runtime";
+var SelectLabel = React28.forwardRef(
   (props, ref) => {
     const context = useSelectContext();
     const { className, children, position, dataAttrs } = getComponentProps(
       props,
       SelectLabelPropDefs
     );
-    React25.useLayoutEffect(() => {
+    React28.useLayoutEffect(() => {
       context.setLabelPosition?.(position ?? "top");
     }, [position, context.setLabelPosition]);
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx27(
       "label",
       {
         ref,
         htmlFor: context.labelId,
-        className: clsx20("select-label", className),
+        className: clsx23("select-label", className),
         ...dataAttrs,
-        children: /* @__PURE__ */ jsx24(Text, { disabled: context.disabled, children })
+        children: /* @__PURE__ */ jsx27(Text, { disabled: context.disabled, children })
       }
     );
   }
@@ -2467,36 +2697,36 @@ var SelectLabel = React25.forwardRef(
 SelectLabel.displayName = "Select.Label";
 
 // src/components/select/root/select-root.tsx
-import clsx24 from "clsx";
+import clsx27 from "clsx";
 import {
   useId as useId2,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo5,
+  useMemo as useMemo6,
   useRef as useRef5,
   useState as useState6
 } from "react";
 
 // src/components/select/trigger/select-trigger.tsx
-import clsx23 from "clsx";
-import * as React27 from "react";
+import clsx26 from "clsx";
+import * as React30 from "react";
 
 // src/components/select/value/select-value.tsx
-import clsx21 from "clsx";
-import * as React26 from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var SelectValue = React26.forwardRef(
+import clsx24 from "clsx";
+import * as React29 from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var SelectValue = React29.forwardRef(
   (props, ref) => {
     const { className, placeholder: placeholderProp, ...rest } = props;
     const context = useSelectContext();
     const placeholder = placeholderProp ?? context.placeholder;
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx28(
       "span",
       {
         ref,
-        className: clsx21("select-value", className),
+        className: clsx24("select-value", className),
         "data-placeholder": !context.value ? "" : void 0,
         ...rest,
-        children: /* @__PURE__ */ jsx25(Text, { disabled: context.disabled, children: context.displayValue || placeholder })
+        children: /* @__PURE__ */ jsx28(Text, { disabled: context.disabled, children: context.displayValue || placeholder })
       }
     );
   }
@@ -2504,21 +2734,21 @@ var SelectValue = React26.forwardRef(
 SelectValue.displayName = "Select.Value";
 
 // src/components/select/trigger/select-trigger-icon.tsx
-import clsx22 from "clsx";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import clsx25 from "clsx";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var SelectTriggerIcon = (props) => {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx29(
     "svg",
     {
-      className: clsx22("select-trigger-icon", className),
+      className: clsx25("select-trigger-icon", className),
       width: "20",
       height: "20",
       viewBox: "0 0 15 15",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...rest,
-      children: /* @__PURE__ */ jsx26(
+      children: /* @__PURE__ */ jsx29(
         "path",
         {
           d: "M4.18179 6.18181C4.35753 6.00608 4.64245 6.00608 4.81819 6.18181L7.49999 8.86362L10.1818 6.18181C10.3575 6.00608 10.6424 6.00608 10.8182 6.18181C10.9939 6.35755 10.9939 6.64247 10.8182 6.81821L7.81819 9.81821C7.73379 9.9026 7.61934 9.95001 7.49999 9.95001C7.38064 9.95001 7.26618 9.9026 7.18179 9.81821L4.18179 6.81821C4.00605 6.64247 4.00605 6.35755 4.18179 6.18181Z",
@@ -2535,8 +2765,8 @@ var SelectTriggerIcon = (props) => {
 var SelectTriggerPropsDefs = {};
 
 // src/components/select/trigger/select-trigger.tsx
-import { jsx as jsx27, jsxs as jsxs7 } from "react/jsx-runtime";
-var SelectTrigger = React27.forwardRef(
+import { jsx as jsx30, jsxs as jsxs7 } from "react/jsx-runtime";
+var SelectTrigger = React30.forwardRef(
   (props, forwardedRef) => {
     const {
       className,
@@ -2572,11 +2802,11 @@ var SelectTrigger = React27.forwardRef(
           "data-state": context.open ? "open" : "closed",
           "data-disabled": disabled ? "" : void 0,
           "data-variant": context.triggerVariant,
-          className: clsx23("select-trigger", className),
+          className: clsx26("select-trigger", className),
           ...dataAttrs,
           children: [
-            /* @__PURE__ */ jsx27(SelectValue, {}),
-            /* @__PURE__ */ jsx27(SelectTriggerIcon, {})
+            /* @__PURE__ */ jsx30(SelectValue, {}),
+            /* @__PURE__ */ jsx30(SelectTriggerIcon, {})
           ]
         }
       );
@@ -2593,14 +2823,14 @@ var SelectTrigger = React27.forwardRef(
         disabled,
         "data-state": context.open ? "open" : "closed",
         "data-disabled": disabled ? "" : void 0,
-        className: clsx23("select-trigger", className),
+        className: clsx26("select-trigger", className),
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         "data-variant": context.triggerVariant,
         ...dataAttrs,
         children: [
-          /* @__PURE__ */ jsx27(SelectValue, {}),
-          /* @__PURE__ */ jsx27(SelectTriggerIcon, {})
+          /* @__PURE__ */ jsx30(SelectValue, {}),
+          /* @__PURE__ */ jsx30(SelectTriggerIcon, {})
         ]
       }
     );
@@ -2640,8 +2870,8 @@ var SelectRootPropsDefs = {
 };
 
 // src/components/select/root/select-root.tsx
-import { jsx as jsx28, jsxs as jsxs8 } from "react/jsx-runtime";
-var ALLOWED_CHILDREN5 = [
+import { jsx as jsx31, jsxs as jsxs8 } from "react/jsx-runtime";
+var ALLOWED_CHILDREN6 = [
   SelectLabel.displayName,
   SelectTrigger.displayName,
   SelectContent.displayName
@@ -2682,7 +2912,7 @@ var SelectRoot = (props) => {
   const contentRef = useRef5(null);
   const itemsRef = useRef5(/* @__PURE__ */ new Map());
   const itemValues = useRef5([]);
-  const contextValue = useMemo5(
+  const contextValue = useMemo6(
     () => ({
       open,
       value,
@@ -2724,7 +2954,7 @@ var SelectRoot = (props) => {
   useLayoutEffect3(() => {
     setTriggerVariant?.(variant ?? "outlined");
   }, [variant, setTriggerVariant]);
-  const validChildren = filterChildren(children, ALLOWED_CHILDREN5, {
+  const validChildren = filterChildren(children, ALLOWED_CHILDREN6, {
     parentDisplayName: SelectRoot.displayName
   });
   const labelInside = labelPosition === "inside";
@@ -2746,7 +2976,7 @@ var SelectRoot = (props) => {
     }
   };
   if (labelInside) {
-    return /* @__PURE__ */ jsx28(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsx31(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
       "button",
       {
         type: "button",
@@ -2758,26 +2988,26 @@ var SelectRoot = (props) => {
         ref: rootRef,
         "data-state": open ? "open" : "closed",
         "data-disabled": disabled ? "" : void 0,
-        className: clsx24("select-root", className),
+        className: clsx27("select-root", className),
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         ...dataAttrs,
         children: [
           validChildren,
-          name && /* @__PURE__ */ jsx28("input", { type: "hidden", name, value })
+          name && /* @__PURE__ */ jsx31("input", { type: "hidden", name, value })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ jsx28(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsx31(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
     Box,
     {
       ref: rootRef,
-      className: clsx24("select-root", className),
+      className: clsx27("select-root", className),
       ...dataAttrs,
       children: [
         validChildren,
-        name && /* @__PURE__ */ jsx28("input", { type: "hidden", name, value })
+        name && /* @__PURE__ */ jsx31("input", { type: "hidden", name, value })
       ]
     }
   ) });
@@ -2785,17 +3015,17 @@ var SelectRoot = (props) => {
 SelectRoot.displayName = "Select.Root";
 
 // src/components/select/separator/select-separator.tsx
-import clsx25 from "clsx";
-import * as React28 from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var SelectSeparator = React28.forwardRef(
+import clsx28 from "clsx";
+import * as React31 from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var SelectSeparator = React31.forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx32(
       "div",
       {
         ref,
-        className: clsx25("select-separator", className),
+        className: clsx28("select-separator", className),
         ...rest
       }
     );
@@ -2816,7 +3046,7 @@ var Select = {
 };
 
 // src/components/separator/separator.tsx
-import clsx26 from "clsx";
+import clsx29 from "clsx";
 
 // src/components/separator/separator.props.ts
 var directions = ["horizontal", "vertical"];
@@ -2847,16 +3077,16 @@ var SeparatorPropsDefs = {
 };
 
 // src/components/separator/separator.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var Separator = (props) => {
   const { className, dataAttrs, style } = getComponentProps(
     props,
     SeparatorPropsDefs
   );
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
-      className: clsx26("separator", className),
+      className: clsx29("separator", className),
       style,
       ...dataAttrs
     }
@@ -2865,16 +3095,16 @@ var Separator = (props) => {
 Separator.displayName = "Separator";
 
 // src/components/theme/theme.tsx
-import * as React29 from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var Theme = React29.forwardRef((props, ref) => {
-  const context = React29.useContext(ThemeContext);
+import * as React32 from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var Theme = React32.forwardRef((props, ref) => {
+  const context = React32.useContext(ThemeContext);
   const isRoot = context === void 0;
-  if (isRoot) return /* @__PURE__ */ jsx31(ThemeRoot, { ...props, ref });
-  return /* @__PURE__ */ jsx31(ThemeSub, { ...props, ref });
+  if (isRoot) return /* @__PURE__ */ jsx34(ThemeRoot, { ...props, ref });
+  return /* @__PURE__ */ jsx34(ThemeSub, { ...props, ref });
 });
 Theme.displayName = "Theme";
-var ThemeRoot = React29.forwardRef((props, ref) => {
+var ThemeRoot = React32.forwardRef((props, ref) => {
   const {
     appearance: themeAppearance,
     radius: themeRadius,
@@ -2883,15 +3113,15 @@ var ThemeRoot = React29.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const [appearance, setAppearance] = React29.useState(
+  const [appearance, setAppearance] = React32.useState(
     themeAppearance ?? "light"
   );
-  const [radius, setRadius] = React29.useState(themeRadius ?? "md");
-  const [roundness2, setRoundness] = React29.useState(
+  const [radius, setRadius] = React32.useState(themeRadius ?? "md");
+  const [roundness2, setRoundness] = React32.useState(
     themeRoundness ?? "3"
   );
-  const [spacing, setSpacing] = React29.useState(themeSpacing ?? "md");
-  const value = React29.useMemo(
+  const [spacing, setSpacing] = React32.useState(themeSpacing ?? "md");
+  const value = React32.useMemo(
     () => ({
       appearance,
       radius,
@@ -2904,7 +3134,7 @@ var ThemeRoot = React29.forwardRef((props, ref) => {
     }),
     [appearance, radius, roundness2, spacing]
   );
-  return /* @__PURE__ */ jsx31(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx34(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx34(
     "div",
     {
       ref,
@@ -2918,8 +3148,8 @@ var ThemeRoot = React29.forwardRef((props, ref) => {
   ) });
 });
 ThemeRoot.displayName = "ThemeRoot";
-var ThemeSub = React29.forwardRef((props, ref) => {
-  const context = React29.useContext(ThemeContext);
+var ThemeSub = React32.forwardRef((props, ref) => {
+  const context = React32.useContext(ThemeContext);
   const {
     appearance,
     radius,
@@ -2942,7 +3172,7 @@ var ThemeSub = React29.forwardRef((props, ref) => {
     onRoundnessChange: context.onRoundnessChange,
     onSpacingChange: context.onSpacingChange
   };
-  return /* @__PURE__ */ jsx31(ThemeContext.Provider, { value: contextProps, children: /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx34(ThemeContext.Provider, { value: contextProps, children: /* @__PURE__ */ jsx34(
     "div",
     {
       ref,
@@ -2959,8 +3189,9 @@ var ThemeSub = React29.forwardRef((props, ref) => {
 ThemeSub.displayName = "ThemeSub";
 
 // src/components/theme/theme-control.tsx
-import { jsx as jsx32, jsxs as jsxs9 } from "react/jsx-runtime";
-function ThemeControl() {
+import { useEffect as useEffect7, useState as useState8 } from "react";
+import { jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
+function ThemeControl({ position = "bottom" }) {
   const {
     appearance,
     onAppearanceChange,
@@ -2971,84 +3202,103 @@ function ThemeControl() {
     spacing,
     onSpacingChange
   } = useTheme();
-  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs9(
-      Select.Root,
-      {
-        variant: "solid",
-        value: appearance,
-        onValueChange: (change) => onAppearanceChange?.(change),
-        children: [
-          /* @__PURE__ */ jsx32(Select.Label, { position: "inside", children: "Theme Settings" }),
-          /* @__PURE__ */ jsx32(Select.Trigger, {}),
-          /* @__PURE__ */ jsxs9(Select.Content, { children: [
-            /* @__PURE__ */ jsx32(Select.Item, { value: "light", children: "Light" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "dark", children: "Dark" })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs9(
-      Select.Root,
-      {
-        variant: "solid",
-        value: radius,
-        onValueChange: (change) => onRadiusChange?.(change),
-        children: [
-          /* @__PURE__ */ jsx32(Select.Label, { position: "inside", children: "Radius" }),
-          /* @__PURE__ */ jsx32(Select.Trigger, {}),
-          /* @__PURE__ */ jsxs9(Select.Content, { children: [
-            /* @__PURE__ */ jsx32(Select.Item, { value: "none", children: "None" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "xs", children: "XS" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "sm", children: "SM" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "md", children: "MD" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "lg", children: "LG" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "xl", children: "XL" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "full", children: "FULL" })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs9(
-      Select.Root,
-      {
-        variant: "solid",
-        value: roundness2,
-        onValueChange: (change) => onRoundnessChange?.(change),
-        children: [
-          /* @__PURE__ */ jsx32(Select.Label, { className: "min-w-40!", position: "inside", children: "Roundness" }),
-          /* @__PURE__ */ jsx32(Select.Trigger, {}),
-          /* @__PURE__ */ jsxs9(Select.Content, { children: [
-            /* @__PURE__ */ jsx32(Select.Item, { value: "1", children: "1" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "2", children: "2" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "3", children: "3" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "4", children: "4" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "5", children: "5" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "6", children: "6" })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs9(
-      Select.Root,
-      {
-        variant: "solid",
-        value: spacing,
-        onValueChange: (change) => onSpacingChange?.(change),
-        children: [
-          /* @__PURE__ */ jsx32(Select.Label, { position: "inside", children: "Spacing" }),
-          /* @__PURE__ */ jsx32(Select.Trigger, {}),
-          /* @__PURE__ */ jsxs9(Select.Content, { children: [
-            /* @__PURE__ */ jsx32(Select.Item, { value: "xs", children: "XS" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "sm", children: "SM" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "md", children: "MD" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "lg", children: "LG" }),
-            /* @__PURE__ */ jsx32(Select.Item, { value: "xl", children: "XL" })
-          ] })
-        ]
+  const [visible, setVisible] = useState8(false);
+  useEffect7(() => {
+    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__ */ jsx35(Portal.Root, { open: visible, onOpenChange: setVisible, children: /* @__PURE__ */ jsx35(Portal.Content, { position, children: /* @__PURE__ */ jsxs9(
+    Box,
+    {
+      m: "4",
+      p: "4",
+      className: "flex flex-col gap-2 border-[rgba(var(--border-color), 0.6)]",
+      children: [
+        /* @__PURE__ */ jsxs9(
+          Select.Root,
+          {
+            variant: "solid",
+            value: appearance,
+            onValueChange: (change) => onAppearanceChange?.(change),
+            children: [
+              /* @__PURE__ */ jsx35(Select.Label, { position: "inside", children: "Theme Settings" }),
+              /* @__PURE__ */ jsx35(Select.Trigger, {}),
+              /* @__PURE__ */ jsxs9(Select.Content, { children: [
+                /* @__PURE__ */ jsx35(Select.Item, { value: "light", children: "Light" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "dark", children: "Dark" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs9(
+          Select.Root,
+          {
+            variant: "solid",
+            value: radius,
+            onValueChange: (change) => onRadiusChange?.(change),
+            children: [
+              /* @__PURE__ */ jsx35(Select.Label, { position: "inside", children: "Radius" }),
+              /* @__PURE__ */ jsx35(Select.Trigger, {}),
+              /* @__PURE__ */ jsxs9(Select.Content, { children: [
+                /* @__PURE__ */ jsx35(Select.Item, { value: "none", children: "None" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "xs", children: "XS" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "sm", children: "SM" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "md", children: "MD" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "lg", children: "LG" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "xl", children: "XL" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "full", children: "FULL" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs9(
+          Select.Root,
+          {
+            variant: "solid",
+            value: roundness2,
+            onValueChange: (change) => onRoundnessChange?.(change),
+            children: [
+              /* @__PURE__ */ jsx35(Select.Label, { className: "min-w-40!", position: "inside", children: "Roundness" }),
+              /* @__PURE__ */ jsx35(Select.Trigger, {}),
+              /* @__PURE__ */ jsxs9(Select.Content, { children: [
+                /* @__PURE__ */ jsx35(Select.Item, { value: "1", children: "1" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "2", children: "2" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "3", children: "3" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "4", children: "4" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "5", children: "5" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "6", children: "6" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs9(
+          Select.Root,
+          {
+            variant: "solid",
+            value: spacing,
+            onValueChange: (change) => onSpacingChange?.(change),
+            children: [
+              /* @__PURE__ */ jsx35(Select.Label, { position: "inside", children: "Spacing" }),
+              /* @__PURE__ */ jsx35(Select.Trigger, {}),
+              /* @__PURE__ */ jsxs9(Select.Content, { children: [
+                /* @__PURE__ */ jsx35(Select.Item, { value: "xs", children: "XS" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "sm", children: "SM" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "md", children: "MD" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "lg", children: "LG" }),
+                /* @__PURE__ */ jsx35(Select.Item, { value: "xl", children: "XL" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) }) });
 }
 export {
   Accordion,
@@ -3057,7 +3307,9 @@ export {
   Button,
   Checkbox,
   Container,
+  Panel,
   Portal,
+  ProgressBar,
   Select,
   Separator,
   Text,