@locus-ui/components 0.0.1 → 0.0.12

package/dist/index.mjs

@@ -971,8 +971,48 @@ var Accordion = Object.assign(AccordionRoot, {
   Content: AccordionContent
 });
 
-// src/components/box/box.tsx
+// src/components/badge/badge.tsx
 import clsx6 from "clsx";
+
+// src/components/badge/badge.props.ts
+var BadgeVariants = ["solid", "outlined", "muted", "clear"];
+var BadgeRootPropsDefs = {
+  /**
+   * Sets the variant style of the badge ("solid", "outlined", "muted", or "clear").
+   */
+  variant: {
+    type: "enum",
+    values: BadgeVariants,
+    dataAttr: "variant"
+  }
+};
+
+// src/components/badge/badge.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Badge = (props) => {
+  const { color, variant, className, dataAttrs, ...rest } = getComponentProps(
+    props,
+    BadgeRootPropsDefs,
+    MarginPropDefs,
+    PaddingPropDefs,
+    RadiusPropDefs,
+    SizePropDef
+  );
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: clsx6("badge", className),
+      "data-color": color ?? true,
+      "data-variant": variant,
+      ...dataAttrs,
+      ...rest,
+      children: props.children
+    }
+  );
+};
+
+// src/components/box/box.tsx
+import clsx7 from "clsx";
 import * as React5 from "react";
 
 // src/components/box/box.props.ts
@@ -992,7 +1032,7 @@ var BoxPropsDefs = {
 };
 
 // src/components/box/box.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var Box = React5.forwardRef((props, ref) => {
   const { className, dataAttrs, children, ...rest } = getComponentProps(
     props,
@@ -1003,12 +1043,12 @@ var Box = React5.forwardRef((props, ref) => {
     RadiusPropDefs,
     RoundnessPropDef
   );
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       ref,
       ...dataAttrs,
-      className: clsx6("lcs-box", className),
+      className: clsx7("lcs-box", className),
       ...rest,
       children
     }
@@ -1017,7 +1057,7 @@ var Box = React5.forwardRef((props, ref) => {
 Box.displayName = "Box";
 
 // src/components/button/button.tsx
-import clsx7 from "clsx";
+import clsx8 from "clsx";
 import { useState as useState2 } from "react";
 
 // src/components/button/button.props.ts
@@ -1058,7 +1098,7 @@ var ButtonRootPropsDefs = {
 };
 
 // src/components/button/button.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var Button = (props) => {
   const {
     color,
@@ -1078,10 +1118,10 @@ var Button = (props) => {
     SizePropDef
   );
   const [hovered, setHovered] = useState2(false);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "button",
     {
-      className: clsx7("button", className),
+      className: clsx8("button", className),
       "data-color": color ?? true,
       "data-variant": variant,
       "data-disabled": disabled ? true : void 0,
@@ -1093,19 +1133,19 @@ var Button = (props) => {
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       ...rest,
-      children: /* @__PURE__ */ jsx6("span", { children: props.children })
+      children: /* @__PURE__ */ jsx7("span", { children: props.children })
     }
   );
 };
 
 // src/components/checkbox/indicator/checkbox-indicator.tsx
-import clsx8 from "clsx";
+import clsx9 from "clsx";
 import React7 from "react";
 
 // src/icons/check-mark.icon.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var CheckMark = ({ color = "currentColor" }) => {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "svg",
     {
       width: "64",
@@ -1113,7 +1153,7 @@ var CheckMark = ({ color = "currentColor" }) => {
       viewBox: "0 0 15 15",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(
         "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",
@@ -1127,9 +1167,9 @@ var CheckMark = ({ color = "currentColor" }) => {
 };
 
 // src/icons/minus.icon.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Minus = ({ color = "currentColor" }) => {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "svg",
     {
       width: "64",
@@ -1137,7 +1177,7 @@ var Minus = ({ color = "currentColor" }) => {
       viewBox: "0 0 15 15",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx9(
         "path",
         {
           d: "M3.5 7.5C3.5 7.08579 3.83579 6.75 4.25 6.75H10.75C11.1642 6.75 11.5 7.08579 11.5 7.5C11.5 7.91421 11.1642 8.25 10.75 8.25H4.25C3.83579 8.25 3.5 7.91421 3.5 7.5Z",
@@ -1267,7 +1307,7 @@ var CheckboxIndicatorPropDefs = {
 };
 
 // src/components/checkbox/indicator/checkbox-indicator.tsx
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var CheckboxIndicator = React7.forwardRef((props, ref) => {
   const {
     value,
@@ -1314,17 +1354,17 @@ var CheckboxIndicator = React7.forwardRef((props, ref) => {
       "aria-checked": indeterminate ? "mixed" : value,
       onKeyDown: handleKeyDown,
       tabIndex: disabled || readonly ? -1 : 0,
-      className: clsx8("checkbox-indicator", className),
+      className: clsx9("checkbox-indicator", className),
       ...indicatorProps,
       ...dataAttrs,
       children: [
-        indeterminate && !value && /* @__PURE__ */ jsx9(
+        indeterminate && !value && /* @__PURE__ */ jsx10(
           Minus,
           {
             color: highContrast && indicatorVariant === "solid" ? "black" : "white"
           }
         ),
-        value && /* @__PURE__ */ jsx9(
+        value && /* @__PURE__ */ jsx10(
           CheckMark,
           {
             color: highContrast && indicatorVariant === "solid" ? "black" : "white"
@@ -1337,11 +1377,11 @@ var CheckboxIndicator = React7.forwardRef((props, ref) => {
 CheckboxIndicator.displayName = "Checkbox.Indicator";
 
 // src/components/checkbox/label/checkbox-label.tsx
-import clsx10 from "clsx";
+import clsx11 from "clsx";
 import React9 from "react";
 
 // src/components/text/text.tsx
-import clsx9 from "clsx";
+import clsx10 from "clsx";
 import React8 from "react";
 
 // src/components/text/text.props.ts
@@ -1367,7 +1407,7 @@ var TextPropsDefs = {
 };
 
 // src/components/text/text.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var Text = React8.forwardRef(
   (props, ref) => {
     const { className, dataAttrs, children, ...rest } = getComponentProps(
@@ -1376,12 +1416,12 @@ var Text = React8.forwardRef(
       MarginPropDefs,
       PaddingPropDefs
     );
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       "p",
       {
         ref,
         ...dataAttrs,
-        className: clsx9("lcs-text", className),
+        className: clsx10("lcs-text", className),
         ...rest,
         children
       }
@@ -1406,7 +1446,7 @@ var CheckboxLabelPropDefs = {
 };
 
 // src/components/checkbox/label/checkbox-label.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var CheckboxLabel = React9.forwardRef(
   (props, ref) => {
     const context = useCheckboxContext();
@@ -1417,14 +1457,14 @@ var CheckboxLabel = React9.forwardRef(
     React9.useLayoutEffect(() => {
       context.setLabelPosition?.(position ?? "right");
     }, [position, context.setLabelPosition]);
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "label",
       {
         ref,
         htmlFor: context.labelId,
-        className: clsx10("checkbox-label", className),
+        className: clsx11("checkbox-label", className),
         ...position && { [`data-position`]: position },
-        children: /* @__PURE__ */ jsx11(Text, { children })
+        children: /* @__PURE__ */ jsx12(Text, { children })
       }
     );
   }
@@ -1432,14 +1472,14 @@ var CheckboxLabel = React9.forwardRef(
 CheckboxLabel.displayName = "Checkbox.Label";
 
 // src/components/checkbox/root/checkbox-root.tsx
-import clsx11 from "clsx";
+import clsx12 from "clsx";
 import {
   isValidElement as isValidElement2,
   useId,
   useMemo as useMemo3,
   useState as useState3
 } from "react";
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 var ALLOWED_CHILDREN3 = [
   CheckboxLabel.displayName,
   CheckboxIndicator.displayName
@@ -1489,7 +1529,7 @@ var CheckboxRoot = (props) => {
       };
     }
     return {
-      indicator: /* @__PURE__ */ jsx12(CheckboxIndicator, { size }),
+      indicator: /* @__PURE__ */ jsx13(CheckboxIndicator, { size }),
       otherChildren: validChildren
     };
   }, [validChildren, size]);
@@ -1532,10 +1572,10 @@ var CheckboxRoot = (props) => {
     if (disabled || readonly) return;
     setValue(!value);
   };
-  return /* @__PURE__ */ jsx12(CheckboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx13(CheckboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: clsx11("checkbox-root", props.className),
+      className: clsx12("checkbox-root", props.className),
       onClick: () => handleClick(),
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
@@ -1543,7 +1583,7 @@ var CheckboxRoot = (props) => {
       children: [
         indicator,
         otherChildren,
-        name && /* @__PURE__ */ jsx12("input", { type: "hidden", name, value: String(value) })
+        name && /* @__PURE__ */ jsx13("input", { type: "hidden", name, value: String(value) })
       ]
     }
   ) });
@@ -1558,17 +1598,17 @@ var Checkbox = Object.assign(CheckboxRoot, {
 });
 
 // src/components/container/container.tsx
-import clsx12 from "clsx";
+import clsx13 from "clsx";
 import * as React11 from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var Container = React11.forwardRef((props, ref) => {
   const { className, children, direction, ...rest } = props;
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       ref,
       "data-direction": direction,
-      className: clsx12(className, "lcs-container"),
+      className: clsx13(className, "lcs-container"),
       ...rest,
       children
     }
@@ -1577,7 +1617,7 @@ var Container = React11.forwardRef((props, ref) => {
 Container.displayName = "Container";
 
 // src/components/portal/backdrop/portal-backdrop.tsx
-import clsx13 from "clsx";
+import clsx14 from "clsx";
 import * as React13 from "react";
 
 // src/components/portal/portal-context.tsx
@@ -1633,7 +1673,7 @@ var PortalBackdropPropsDefs = {
 };
 
 // src/components/portal/backdrop/portal-backdrop.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var PortalBackdrop = React13.forwardRef(
   (props, ref) => {
     const context = usePortalContext();
@@ -1642,11 +1682,11 @@ var PortalBackdrop = React13.forwardRef(
       PortalBackdropPropsDefs
     );
     if (!context.open) return null;
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       "div",
       {
         ref,
-        className: clsx13("portal-backdrop", className),
+        className: clsx14("portal-backdrop", className),
         ...dataAttrs,
         ...rest
       }
@@ -1656,7 +1696,7 @@ var PortalBackdrop = React13.forwardRef(
 PortalBackdrop.displayName = "Portal.Backdrop";
 
 // src/components/portal/content/portal-content.tsx
-import clsx14 from "clsx";
+import clsx15 from "clsx";
 import * as React16 from "react";
 import ReactDOM from "react-dom";
 
@@ -1828,7 +1868,7 @@ var PortalContentPropsDefs = {
 };
 
 // src/components/portal/content/portal-content.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var PortalContent = React16.forwardRef(
   (props, ref) => {
     const portalContext = usePortalContext();
@@ -1913,11 +1953,11 @@ var PortalContent = React16.forwardRef(
         left: anchorPosition.left
       } : {}
     };
-    const portalContent = /* @__PURE__ */ jsx15(
+    const portalContent = /* @__PURE__ */ jsx16(
       "div",
       {
         ref: setRefs,
-        className: clsx14("portal", className),
+        className: clsx15("portal", className),
         "data-appearance": themeContext?.appearance,
         "data-radius": themeContext?.radius,
         "data-roundness": themeContext?.roundness ?? "theme",
@@ -1928,7 +1968,7 @@ var PortalContent = React16.forwardRef(
         onClick: anchored ? void 0 : () => portalContext.onOpenChange?.(false),
         style: combinedStyle,
         ...dataAttrs,
-        children: /* @__PURE__ */ jsx15(
+        children: /* @__PURE__ */ jsx16(
           "div",
           {
             className: "portal-content",
@@ -1938,7 +1978,7 @@ var PortalContent = React16.forwardRef(
         )
       }
     );
-    const content = themeContext ? /* @__PURE__ */ jsx15(ThemeContext.Provider, { value: themeContext, children: portalContent }) : portalContent;
+    const content = themeContext ? /* @__PURE__ */ jsx16(ThemeContext.Provider, { value: themeContext, children: portalContent }) : portalContent;
     return ReactDOM.createPortal(content, container);
   }
 );
@@ -1949,7 +1989,7 @@ import * as React18 from "react";
 
 // src/components/portal/trigger/portal-trigger.tsx
 import * as React17 from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var PortalTrigger = React17.forwardRef(
   ({ children, asChild, onClick, ...props }, ref) => {
     const context = usePortalContext();
@@ -1982,7 +2022,7 @@ var PortalTrigger = React17.forwardRef(
         ...props
       });
     }
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       "button",
       {
         ref: setRefs,
@@ -2021,7 +2061,7 @@ var PortalRootPropsDefs = {
 };
 
 // src/components/portal/root/portal-root.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var ALLOWED_CHILDREN4 = [
   PortalTrigger.displayName,
   PortalBackdrop.displayName,
@@ -2053,7 +2093,7 @@ var PortalRoot = (props) => {
   const validChildren = filterChildren(children, ALLOWED_CHILDREN4, {
     parentDisplayName: PortalRoot.displayName
   });
-  return /* @__PURE__ */ jsx17(PortalContext.Provider, { value, children: validChildren });
+  return /* @__PURE__ */ jsx18(PortalContext.Provider, { value, children: validChildren });
 };
 PortalRoot.displayName = "Portal.Root";
 
@@ -2070,7 +2110,7 @@ var Portal = {
 };
 
 // src/components/select/content/select-content.tsx
-import clsx16 from "clsx";
+import clsx17 from "clsx";
 import * as React22 from "react";
 
 // src/components/select/select-context.tsx
@@ -2104,19 +2144,19 @@ function useComposedRefs(...refs) {
 }
 
 // src/components/select/viewport/select-viewport.tsx
-import clsx15 from "clsx";
+import clsx16 from "clsx";
 import * as React21 from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var SelectViewport = React21.forwardRef(
   (props, ref) => {
     const { className, children, ...rest } = props;
-    return /* @__PURE__ */ jsx18("div", { ref, className: clsx15("select-viewport", className), ...rest, children });
+    return /* @__PURE__ */ jsx19("div", { ref, className: clsx16("select-viewport", className), ...rest, children });
   }
 );
 SelectViewport.displayName = "Select.Viewport";
 
 // src/components/select/content/select-content.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var SelectContent = React22.forwardRef(
   (props, forwardedRef) => {
     const {
@@ -2206,15 +2246,15 @@ var SelectContent = React22.forwardRef(
       }
     }, [context.open, context.labelPosition, anchorRef]);
     if (!context.open) {
-      return /* @__PURE__ */ jsx19("div", { style: { display: "none" }, "aria-hidden": "true", children });
+      return /* @__PURE__ */ jsx20("div", { style: { display: "none" }, "aria-hidden": "true", children });
     }
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx20(
       Portal.Root,
       {
         open: context.open,
         onOpenChange: context.onOpenChange,
         anchorRef,
-        children: /* @__PURE__ */ jsx19(Portal.Content, { anchored: true, side, align, sideOffset: offset, children: /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsx20(Portal.Content, { anchored: true, side, align, sideOffset: offset, children: /* @__PURE__ */ jsx20(
           "div",
           {
             ref: composedRef,
@@ -2223,10 +2263,10 @@ var SelectContent = React22.forwardRef(
             "data-side": side,
             "data-align": align,
             "data-trigger-variant": context.triggerVariant,
-            className: clsx16("select-content", className),
+            className: clsx17("select-content", className),
             style: { width: contentWidth },
             ...rest,
-            children: /* @__PURE__ */ jsx19(SelectViewport, { children })
+            children: /* @__PURE__ */ jsx20(SelectViewport, { children })
           }
         ) })
       }
@@ -2236,7 +2276,7 @@ var SelectContent = React22.forwardRef(
 SelectContent.displayName = "Select.Content";
 
 // src/components/select/group/select-group.tsx
-import clsx17 from "clsx";
+import clsx18 from "clsx";
 import * as React23 from "react";
 
 // src/components/select/group/select-group.props.ts
@@ -2247,7 +2287,7 @@ var SelectGroupsPropDefs = {
 };
 
 // src/components/select/group/select-group.tsx
-import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs5 } from "react/jsx-runtime";
 var SelectGroup = React23.forwardRef(
   (props, ref) => {
     const { className, children, dataAttrs, ...rest } = getComponentProps(
@@ -2259,10 +2299,10 @@ var SelectGroup = React23.forwardRef(
       {
         ref,
         role: "group",
-        className: clsx17("select-group", className),
+        className: clsx18("select-group", className),
         ...rest,
         children: [
-          /* @__PURE__ */ jsx20(Text, { className: "select-group-label", disabled: true, children: props.title }),
+          /* @__PURE__ */ jsx21(Text, { className: "select-group-label", disabled: true, children: props.title }),
           children
         ]
       }
@@ -2272,13 +2312,13 @@ var SelectGroup = React23.forwardRef(
 SelectGroup.displayName = "Select.Group";
 
 // src/components/select/item/select-item.tsx
-import clsx18 from "clsx";
+import clsx19 from "clsx";
 import * as React24 from "react";
 
 // src/components/select/item/select-item-indicator.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var SelectItemIndicator = () => {
-  return /* @__PURE__ */ jsx21("span", { className: "select-item-indicator", children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22("span", { className: "select-item-indicator", children: /* @__PURE__ */ jsx22(
     "svg",
     {
       width: "20",
@@ -2286,7 +2326,7 @@ var SelectItemIndicator = () => {
       viewBox: "0 0 15 15",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx22(
         "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",
@@ -2311,7 +2351,7 @@ var SelectItemPropDefs = {
 };
 
 // src/components/select/item/select-item.tsx
-import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
 var SelectItem = React24.forwardRef(
   (props, ref) => {
     const context = useSelectContext();
@@ -2364,20 +2404,20 @@ var SelectItem = React24.forwardRef(
         "data-state": selected ? "checked" : "unchecked",
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: clsx18("select-item", className),
+        className: clsx19("select-item", className),
         onClick: handleClick,
         onMouseEnter: handleMouseEnter,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23(
             Box,
             {
               style: { width: 24, height: 24, justifyContent: "center" },
               className: "flex items-center",
-              children: selected && /* @__PURE__ */ jsx22(SelectItemIndicator, {})
+              children: selected && /* @__PURE__ */ jsx23(SelectItemIndicator, {})
             }
           ),
-          /* @__PURE__ */ jsx22(Text, { disabled, children })
+          /* @__PURE__ */ jsx23(Text, { disabled, children })
         ]
       }
     );
@@ -2386,7 +2426,7 @@ var SelectItem = React24.forwardRef(
 SelectItem.displayName = "Select.Item";
 
 // src/components/select/label/select-label.tsx
-import clsx19 from "clsx";
+import clsx20 from "clsx";
 import * as React25 from "react";
 
 // src/components/select/label/select-label.props.ts
@@ -2401,7 +2441,7 @@ var SelectLabelPropDefs = {
 };
 
 // src/components/select/label/select-label.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var SelectLabel = React25.forwardRef(
   (props, ref) => {
     const context = useSelectContext();
@@ -2412,14 +2452,14 @@ var SelectLabel = React25.forwardRef(
     React25.useLayoutEffect(() => {
       context.setLabelPosition?.(position ?? "top");
     }, [position, context.setLabelPosition]);
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx24(
       "label",
       {
         ref,
         htmlFor: context.labelId,
-        className: clsx19("select-label", className),
+        className: clsx20("select-label", className),
         ...dataAttrs,
-        children: /* @__PURE__ */ jsx23(Text, { disabled: context.disabled, children })
+        children: /* @__PURE__ */ jsx24(Text, { disabled: context.disabled, children })
       }
     );
   }
@@ -2427,7 +2467,7 @@ var SelectLabel = React25.forwardRef(
 SelectLabel.displayName = "Select.Label";
 
 // src/components/select/root/select-root.tsx
-import clsx23 from "clsx";
+import clsx24 from "clsx";
 import {
   useId as useId2,
   useLayoutEffect as useLayoutEffect3,
@@ -2437,26 +2477,26 @@ import {
 } from "react";
 
 // src/components/select/trigger/select-trigger.tsx
-import clsx22 from "clsx";
+import clsx23 from "clsx";
 import * as React27 from "react";
 
 // src/components/select/value/select-value.tsx
-import clsx20 from "clsx";
+import clsx21 from "clsx";
 import * as React26 from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var SelectValue = React26.forwardRef(
   (props, ref) => {
     const { className, placeholder: placeholderProp, ...rest } = props;
     const context = useSelectContext();
     const placeholder = placeholderProp ?? context.placeholder;
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25(
       "span",
       {
         ref,
-        className: clsx20("select-value", className),
+        className: clsx21("select-value", className),
         "data-placeholder": !context.value ? "" : void 0,
         ...rest,
-        children: /* @__PURE__ */ jsx24(Text, { disabled: context.disabled, children: context.displayValue || placeholder })
+        children: /* @__PURE__ */ jsx25(Text, { disabled: context.disabled, children: context.displayValue || placeholder })
       }
     );
   }
@@ -2464,21 +2504,21 @@ var SelectValue = React26.forwardRef(
 SelectValue.displayName = "Select.Value";
 
 // src/components/select/trigger/select-trigger-icon.tsx
-import clsx21 from "clsx";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import clsx22 from "clsx";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var SelectTriggerIcon = (props) => {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "svg",
     {
-      className: clsx21("select-trigger-icon", className),
+      className: clsx22("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__ */ jsx25(
+      children: /* @__PURE__ */ jsx26(
         "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",
@@ -2495,7 +2535,7 @@ var SelectTriggerIcon = (props) => {
 var SelectTriggerPropsDefs = {};
 
 // src/components/select/trigger/select-trigger.tsx
-import { jsx as jsx26, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs7 } from "react/jsx-runtime";
 var SelectTrigger = React27.forwardRef(
   (props, forwardedRef) => {
     const {
@@ -2532,11 +2572,11 @@ var SelectTrigger = React27.forwardRef(
           "data-state": context.open ? "open" : "closed",
           "data-disabled": disabled ? "" : void 0,
           "data-variant": context.triggerVariant,
-          className: clsx22("select-trigger", className),
+          className: clsx23("select-trigger", className),
           ...dataAttrs,
           children: [
-            /* @__PURE__ */ jsx26(SelectValue, {}),
-            /* @__PURE__ */ jsx26(SelectTriggerIcon, {})
+            /* @__PURE__ */ jsx27(SelectValue, {}),
+            /* @__PURE__ */ jsx27(SelectTriggerIcon, {})
           ]
         }
       );
@@ -2553,14 +2593,14 @@ var SelectTrigger = React27.forwardRef(
         disabled,
         "data-state": context.open ? "open" : "closed",
         "data-disabled": disabled ? "" : void 0,
-        className: clsx22("select-trigger", className),
+        className: clsx23("select-trigger", className),
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         "data-variant": context.triggerVariant,
         ...dataAttrs,
         children: [
-          /* @__PURE__ */ jsx26(SelectValue, {}),
-          /* @__PURE__ */ jsx26(SelectTriggerIcon, {})
+          /* @__PURE__ */ jsx27(SelectValue, {}),
+          /* @__PURE__ */ jsx27(SelectTriggerIcon, {})
         ]
       }
     );
@@ -2600,7 +2640,7 @@ var SelectRootPropsDefs = {
 };
 
 // src/components/select/root/select-root.tsx
-import { jsx as jsx27, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs8 } from "react/jsx-runtime";
 var ALLOWED_CHILDREN5 = [
   SelectLabel.displayName,
   SelectTrigger.displayName,
@@ -2706,7 +2746,7 @@ var SelectRoot = (props) => {
     }
   };
   if (labelInside) {
-    return /* @__PURE__ */ jsx27(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsx28(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
       "button",
       {
         type: "button",
@@ -2718,26 +2758,26 @@ var SelectRoot = (props) => {
         ref: rootRef,
         "data-state": open ? "open" : "closed",
         "data-disabled": disabled ? "" : void 0,
-        className: clsx23("select-root", className),
+        className: clsx24("select-root", className),
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         ...dataAttrs,
         children: [
           validChildren,
-          name && /* @__PURE__ */ jsx27("input", { type: "hidden", name, value })
+          name && /* @__PURE__ */ jsx28("input", { type: "hidden", name, value })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ jsx27(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsx28(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
     Box,
     {
       ref: rootRef,
-      className: clsx23("select-root", className),
+      className: clsx24("select-root", className),
       ...dataAttrs,
       children: [
         validChildren,
-        name && /* @__PURE__ */ jsx27("input", { type: "hidden", name, value })
+        name && /* @__PURE__ */ jsx28("input", { type: "hidden", name, value })
       ]
     }
   ) });
@@ -2745,17 +2785,17 @@ var SelectRoot = (props) => {
 SelectRoot.displayName = "Select.Root";
 
 // src/components/select/separator/select-separator.tsx
-import clsx24 from "clsx";
+import clsx25 from "clsx";
 import * as React28 from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var SelectSeparator = React28.forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
-    return /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx29(
       "div",
       {
         ref,
-        className: clsx24("select-separator", className),
+        className: clsx25("select-separator", className),
         ...rest
       }
     );
@@ -2776,7 +2816,7 @@ var Select = {
 };
 
 // src/components/separator/separator.tsx
-import clsx25 from "clsx";
+import clsx26 from "clsx";
 
 // src/components/separator/separator.props.ts
 var directions = ["horizontal", "vertical"];
@@ -2807,16 +2847,16 @@ var SeparatorPropsDefs = {
 };
 
 // src/components/separator/separator.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var Separator = (props) => {
   const { className, dataAttrs, style } = getComponentProps(
     props,
     SeparatorPropsDefs
   );
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
-      className: clsx25("separator", className),
+      className: clsx26("separator", className),
       style,
       ...dataAttrs
     }
@@ -2826,12 +2866,12 @@ Separator.displayName = "Separator";
 
 // src/components/theme/theme.tsx
 import * as React29 from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var Theme = React29.forwardRef((props, ref) => {
   const context = React29.useContext(ThemeContext);
   const isRoot = context === void 0;
-  if (isRoot) return /* @__PURE__ */ jsx30(ThemeRoot, { ...props, ref });
-  return /* @__PURE__ */ jsx30(ThemeSub, { ...props, ref });
+  if (isRoot) return /* @__PURE__ */ jsx31(ThemeRoot, { ...props, ref });
+  return /* @__PURE__ */ jsx31(ThemeSub, { ...props, ref });
 });
 Theme.displayName = "Theme";
 var ThemeRoot = React29.forwardRef((props, ref) => {
@@ -2864,7 +2904,7 @@ var ThemeRoot = React29.forwardRef((props, ref) => {
     }),
     [appearance, radius, roundness2, spacing]
   );
-  return /* @__PURE__ */ jsx30(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx31(
     "div",
     {
       ref,
@@ -2902,7 +2942,7 @@ var ThemeSub = React29.forwardRef((props, ref) => {
     onRoundnessChange: context.onRoundnessChange,
     onSpacingChange: context.onSpacingChange
   };
-  return /* @__PURE__ */ jsx30(ThemeContext.Provider, { value: contextProps, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(ThemeContext.Provider, { value: contextProps, children: /* @__PURE__ */ jsx31(
     "div",
     {
       ref,
@@ -2919,7 +2959,7 @@ var ThemeSub = React29.forwardRef((props, ref) => {
 ThemeSub.displayName = "ThemeSub";
 
 // src/components/theme/theme-control.tsx
-import { jsx as jsx31, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs9 } from "react/jsx-runtime";
 function ThemeControl() {
   const {
     appearance,
@@ -2939,11 +2979,11 @@ function ThemeControl() {
         value: appearance,
         onValueChange: (change) => onAppearanceChange?.(change),
         children: [
-          /* @__PURE__ */ jsx31(Select.Label, { position: "inside", children: "Theme Settings" }),
-          /* @__PURE__ */ jsx31(Select.Trigger, {}),
+          /* @__PURE__ */ jsx32(Select.Label, { position: "inside", children: "Theme Settings" }),
+          /* @__PURE__ */ jsx32(Select.Trigger, {}),
           /* @__PURE__ */ jsxs9(Select.Content, { children: [
-            /* @__PURE__ */ jsx31(Select.Item, { value: "light", children: "Light" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "dark", children: "Dark" })
+            /* @__PURE__ */ jsx32(Select.Item, { value: "light", children: "Light" }),
+            /* @__PURE__ */ jsx32(Select.Item, { value: "dark", children: "Dark" })
           ] })
         ]
       }
@@ -2955,16 +2995,16 @@ function ThemeControl() {
         value: radius,
         onValueChange: (change) => onRadiusChange?.(change),
         children: [
-          /* @__PURE__ */ jsx31(Select.Label, { position: "inside", children: "Radius" }),
-          /* @__PURE__ */ jsx31(Select.Trigger, {}),
+          /* @__PURE__ */ jsx32(Select.Label, { position: "inside", children: "Radius" }),
+          /* @__PURE__ */ jsx32(Select.Trigger, {}),
           /* @__PURE__ */ jsxs9(Select.Content, { children: [
-            /* @__PURE__ */ jsx31(Select.Item, { value: "none", children: "None" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "xs", children: "XS" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "sm", children: "SM" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "md", children: "MD" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "lg", children: "LG" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "xl", children: "XL" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "full", children: "FULL" })
+            /* @__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" })
           ] })
         ]
       }
@@ -2976,15 +3016,15 @@ function ThemeControl() {
         value: roundness2,
         onValueChange: (change) => onRoundnessChange?.(change),
         children: [
-          /* @__PURE__ */ jsx31(Select.Label, { className: "min-w-40!", position: "inside", children: "Roundness" }),
-          /* @__PURE__ */ jsx31(Select.Trigger, {}),
+          /* @__PURE__ */ jsx32(Select.Label, { className: "min-w-40!", position: "inside", children: "Roundness" }),
+          /* @__PURE__ */ jsx32(Select.Trigger, {}),
           /* @__PURE__ */ jsxs9(Select.Content, { children: [
-            /* @__PURE__ */ jsx31(Select.Item, { value: "1", children: "1" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "2", children: "2" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "3", children: "3" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "4", children: "4" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "5", children: "5" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "6", children: "6" })
+            /* @__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" })
           ] })
         ]
       }
@@ -2996,14 +3036,14 @@ function ThemeControl() {
         value: spacing,
         onValueChange: (change) => onSpacingChange?.(change),
         children: [
-          /* @__PURE__ */ jsx31(Select.Label, { position: "inside", children: "Spacing" }),
-          /* @__PURE__ */ jsx31(Select.Trigger, {}),
+          /* @__PURE__ */ jsx32(Select.Label, { position: "inside", children: "Spacing" }),
+          /* @__PURE__ */ jsx32(Select.Trigger, {}),
           /* @__PURE__ */ jsxs9(Select.Content, { children: [
-            /* @__PURE__ */ jsx31(Select.Item, { value: "xs", children: "XS" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "sm", children: "SM" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "md", children: "MD" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "lg", children: "LG" }),
-            /* @__PURE__ */ jsx31(Select.Item, { value: "xl", children: "XL" })
+            /* @__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" })
           ] })
         ]
       }
@@ -3012,6 +3052,7 @@ function ThemeControl() {
 }
 export {
   Accordion,
+  Badge,
   Box,
   Button,
   Checkbox,