@locus-ui/components 0.0.13 → 0.0.16

package/dist/index.js

@@ -21,11 +21,18 @@ function getComponentProps(props, ...propDefs) {
     delete restProps[key];
     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;
@@ -87,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 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 React32 = _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 React13 = _interopRequireWildcard(_react); var React15 = _interopRequireWildcard(_react); var React14 = _interopRequireWildcard(_react); var React18 = _interopRequireWildcard(_react); var React16 = _interopRequireWildcard(_react); var React17 = _interopRequireWildcard(_react); var React20 = _interopRequireWildcard(_react); var React19 = _interopRequireWildcard(_react); var React26 = _interopRequireWildcard(_react); var React23 = _interopRequireWildcard(_react); var React24 = _interopRequireWildcard(_react); var React25 = _interopRequireWildcard(_react); var React27 = _interopRequireWildcard(_react); var React28 = _interopRequireWildcard(_react); var React29 = _interopRequireWildcard(_react); var React31 = _interopRequireWildcard(_react); var React30 = _interopRequireWildcard(_react); var React32 = _interopRequireWildcard(_react); var React37 = _interopRequireWildcard(_react);
 var AccordionContext = React2.default.createContext(null);
 function useAccordionContext() {
   const context = React2.default.useContext(AccordionContext);
@@ -1470,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 });
   }
 );
 
@@ -1672,6 +1671,96 @@ var Container = React11.forwardRef((props, ref) => {
 });
 Container.displayName = "Container";
 
+// src/components/flex/flex.tsx
+
+
+
+// src/components/flex/flex.props.ts
+var FlexGapValues = ["0", "1", "2", "3", "4", "5", "6", "8"];
+var FlexDirectionValues = [
+  "row",
+  "row-reverse",
+  "column",
+  "column-reverse"
+];
+var FlexJustifyValues = [
+  "start",
+  "end",
+  "center",
+  "between",
+  "around",
+  "evenly"
+];
+var FlexAlignValues = [
+  "start",
+  "end",
+  "center",
+  "stretch",
+  "baseline"
+];
+var FlexWrapValues = ["nowrap", "wrap", "wrap-reverse"];
+var FlexPropsDefs = {
+  /**
+   * Sets the gap between flex items.
+   */
+  gap: {
+    type: "enum | string",
+    values: FlexGapValues,
+    dataAttr: "gap",
+    responsive: true
+  },
+  /**
+   * Sets the justification of flex items along the main axis.
+   */
+  justify: {
+    type: "enum",
+    values: FlexJustifyValues,
+    dataAttr: "justify",
+    responsive: true
+  },
+  /**
+   * Sets the direction of flex items.
+   */
+  direction: {
+    type: "enum",
+    values: FlexDirectionValues,
+    dataAttr: "direction",
+    responsive: true
+  },
+  /**
+   * Sets the alignment of flex items along the cross axis.
+   */
+  align: {
+    type: "enum",
+    values: FlexAlignValues,
+    dataAttr: "align",
+    responsive: true
+  },
+  /**
+   * Sets the wrapping behavior of flex items.
+   */
+  wrap: {
+    type: "enum",
+    values: FlexWrapValues,
+    dataAttr: "wrap",
+    responsive: true
+  }
+};
+
+// src/components/flex/flex.tsx
+
+var Flex = React12.forwardRef((props, ref) => {
+  const { className, dataAttrs, children, ...rest } = getComponentProps(
+    props,
+    FlexPropsDefs,
+    MarginPropDefs,
+    PaddingPropDefs,
+    SpacingPropDef
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, className: _clsx2.default.call(void 0, "flex", className), ...dataAttrs, ...rest, children });
+});
+Flex.displayName = "Flex";
+
 // src/components/panel/panel.tsx
 
 
@@ -1702,7 +1791,7 @@ var PanelPropsDefs = {
 
 // src/components/panel/panel.tsx
 
-var Panel = React12.forwardRef((props, ref) => {
+var Panel = React13.forwardRef((props, ref) => {
   const { className, dataAttrs, children, ...rest } = getComponentProps(
     props,
     PanelPropsDefs,
@@ -1710,7 +1799,8 @@ var Panel = React12.forwardRef((props, ref) => {
     PaddingPropDefs,
     SpacingPropDef,
     RadiusPropDefs,
-    RoundnessPropDef
+    RoundnessPropDef,
+    ColorPropDef
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
@@ -1731,11 +1821,11 @@ Panel.displayName = "Panel";
 
 // src/components/portal/portal-context.tsx
 
-var PortalContext = React13.createContext(
+var PortalContext = React14.createContext(
   void 0
 );
 function usePortalContext() {
-  const context = React13.useContext(PortalContext);
+  const context = React14.useContext(PortalContext);
   if (!context) {
     throw new Error("`usePortalContext` must be used within a `Portal.Root`");
   }
@@ -1783,7 +1873,7 @@ var PortalBackdropPropsDefs = {
 
 // src/components/portal/backdrop/portal-backdrop.tsx
 
-var PortalBackdrop = React14.forwardRef(
+var PortalBackdrop = React15.forwardRef(
   (props, ref) => {
     const context = usePortalContext();
     const { className, dataAttrs, ...rest } = getComponentProps(
@@ -1811,11 +1901,11 @@ var _reactdom = require('react-dom'); var _reactdom2 = _interopRequireDefault(_r
 
 // src/components/theme/theme-context.tsx
 
-var ThemeContext = React15.createContext(
+var ThemeContext = React16.createContext(
   void 0
 );
 function useTheme() {
-  const context = React15.useContext(ThemeContext);
+  const context = React16.useContext(ThemeContext);
   if (!context) {
     throw new Error("`useTheme` must be used within a `Theme`");
   }
@@ -1833,9 +1923,9 @@ function useAnchorPosition({
   alignOffset = 0,
   enabled = true
 }) {
-  const [position, setPosition] = React16.useState(null);
-  const [, _forceUpdate] = React16.useReducer((x) => x + 1, 0);
-  const updatePosition = React16.useCallback(() => {
+  const [position, setPosition] = React17.useState(null);
+  const [, _forceUpdate] = React17.useReducer((x) => x + 1, 0);
+  const updatePosition = React17.useCallback(() => {
     const anchor = anchorRef.current;
     const content = contentRef.current;
     if (!anchor || !content || !enabled) {
@@ -1896,7 +1986,7 @@ function useAnchorPosition({
     );
     setPosition({ top, left });
   }, [anchorRef, contentRef, side, align, sideOffset, alignOffset, enabled]);
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (!enabled) {
       setPosition(null);
       return;
@@ -1978,11 +2068,11 @@ var PortalContentPropsDefs = {
 
 // src/components/portal/content/portal-content.tsx
 
-var PortalContent = React17.forwardRef(
+var PortalContent = React18.forwardRef(
   (props, ref) => {
     const portalContext = usePortalContext();
-    const themeContext = React17.useContext(ThemeContext);
-    const contentRef = React17.useRef(null);
+    const themeContext = React18.useContext(ThemeContext);
+    const contentRef = React18.useRef(null);
     const {
       side = "bottom",
       align = "center",
@@ -2004,7 +2094,7 @@ var PortalContent = React17.forwardRef(
       alignOffset: parseInt(alignOffset, 10) || 0,
       enabled: anchored && portalContext.open
     });
-    const setRefs = React17.useCallback(
+    const setRefs = React18.useCallback(
       (node) => {
         contentRef.current = node;
         if (typeof ref === "function") {
@@ -2015,7 +2105,7 @@ var PortalContent = React17.forwardRef(
       },
       [ref]
     );
-    React17.useEffect(() => {
+    React18.useEffect(() => {
       if (!portalContext.open) return;
       function onKeyDown(e) {
         if (e.key === "Escape") {
@@ -2027,7 +2117,7 @@ var PortalContent = React17.forwardRef(
         document.removeEventListener("keydown", onKeyDown);
       };
     }, [portalContext.open, portalContext.onOpenChange]);
-    React17.useEffect(() => {
+    React18.useEffect(() => {
       if (!portalContext.open || !anchored) return;
       function onClickOutside(e) {
         const target = e.target;
@@ -2099,11 +2189,11 @@ PortalContent.displayName = "Portal.Content";
 // src/components/portal/trigger/portal-trigger.tsx
 
 
-var PortalTrigger = React18.forwardRef(
+var PortalTrigger = React19.forwardRef(
   ({ children, asChild, onClick, ...props }, ref) => {
     const context = usePortalContext();
-    const internalRef = React18.useRef(null);
-    React18.useEffect(() => {
+    const internalRef = React19.useRef(null);
+    React19.useEffect(() => {
       if (internalRef.current) {
         context.triggerRef.current = internalRef.current;
       }
@@ -2112,7 +2202,7 @@ var PortalTrigger = React18.forwardRef(
       _optionalChain([context, 'access', _33 => _33.onOpenChange, 'optionalCall', _34 => _34(!context.open)]);
       _optionalChain([onClick, 'optionalCall', _35 => _35(event)]);
     };
-    const setRefs = React18.useCallback(
+    const setRefs = React19.useCallback(
       (node) => {
         internalRef.current = node;
         if (typeof ref === "function") {
@@ -2124,8 +2214,8 @@ var PortalTrigger = React18.forwardRef(
       },
       [ref, context.triggerRef]
     );
-    if (asChild && React18.isValidElement(children)) {
-      return React18.cloneElement(children, {
+    if (asChild && React19.isValidElement(children)) {
+      return React19.cloneElement(children, {
         ref: setRefs,
         onClick: handleClick,
         ...props
@@ -2189,8 +2279,8 @@ var PortalRoot = (props) => {
     defaultValue: defaultOpen,
     onChange: onOpenChange
   });
-  const triggerRef = React19.useRef(null);
-  const value = React19.useMemo(
+  const triggerRef = React20.useRef(null);
+  const value = React20.useMemo(
     () => ({
       open,
       onOpenChange: setOpen,
@@ -2345,11 +2435,11 @@ var ProgressBar = Object.assign(ProgressBarRoot, {
 
 // src/components/select/select-context.tsx
 
-var SelectContext = React22.createContext(
+var SelectContext = React23.createContext(
   null
 );
 function useSelectContext() {
-  const context = React22.useContext(SelectContext);
+  const context = React23.useContext(SelectContext);
   if (!context) {
     throw new Error("Select components must be used within a Select.Root");
   }
@@ -2359,7 +2449,7 @@ function useSelectContext() {
 // src/components/select/utils/user-composed-refs.ts
 
 function useComposedRefs(...refs) {
-  return React23.useCallback(
+  return React24.useCallback(
     (node) => {
       refs.forEach((ref) => {
         if (typeof ref === "function") {
@@ -2377,7 +2467,7 @@ function useComposedRefs(...refs) {
 
 
 
-var SelectViewport = React24.forwardRef(
+var SelectViewport = React25.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 });
@@ -2387,7 +2477,7 @@ SelectViewport.displayName = "Select.Viewport";
 
 // src/components/select/content/select-content.tsx
 
-var SelectContent = React25.forwardRef(
+var SelectContent = React26.forwardRef(
   (props, forwardedRef) => {
     const {
       className,
@@ -2400,10 +2490,10 @@ var SelectContent = React25.forwardRef(
     } = props;
     const context = useSelectContext();
     const composedRef = useComposedRefs(forwardedRef, context.contentRef);
-    React25.useEffect(() => {
+    React26.useEffect(() => {
       context.itemValues.current = [];
     }, [context.open]);
-    React25.useEffect(() => {
+    React26.useEffect(() => {
       if (!context.open) return;
       const handleClickOutside = (event) => {
         const target = event.target;
@@ -2414,7 +2504,7 @@ var SelectContent = React25.forwardRef(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [context.open]);
-    React25.useEffect(() => {
+    React26.useEffect(() => {
       if (!context.open) return;
       const handleKeyDown = (event) => {
         const items = context.itemValues.current;
@@ -2467,10 +2557,10 @@ var SelectContent = React25.forwardRef(
       document.addEventListener("keydown", handleKeyDown);
       return () => document.removeEventListener("keydown", handleKeyDown);
     }, [context.open, context.highlightedIndex]);
-    const [contentWidth, setContentWidth] = React25.useState();
+    const [contentWidth, setContentWidth] = React26.useState();
     const labelInside = context.labelPosition === "inside";
     const anchorRef = labelInside ? context.rootRef : context.triggerRef;
-    React25.useLayoutEffect(() => {
+    React26.useLayoutEffect(() => {
       if (context.open && anchorRef.current) {
         setContentWidth(anchorRef.current.getBoundingClientRect().width);
       }
@@ -2518,7 +2608,7 @@ var SelectGroupsPropDefs = {
 
 // src/components/select/group/select-group.tsx
 
-var SelectGroup = React26.forwardRef(
+var SelectGroup = React27.forwardRef(
   (props, ref) => {
     const { className, children, dataAttrs, ...rest } = getComponentProps(
       props,
@@ -2582,7 +2672,7 @@ var SelectItemPropDefs = {
 
 // src/components/select/item/select-item.tsx
 
-var SelectItem = React27.forwardRef(
+var SelectItem = React28.forwardRef(
   (props, ref) => {
     const context = useSelectContext();
     const { value, disabled, children, className, ...rest } = getComponentProps(
@@ -2590,12 +2680,12 @@ var SelectItem = React27.forwardRef(
       SelectItemPropDefs
     );
     const selected = context.value === value;
-    React27.useEffect(() => {
+    React28.useEffect(() => {
       if (selected && children) {
         context.setDisplayValue(children);
       }
     }, [selected]);
-    React27.useEffect(() => {
+    React28.useEffect(() => {
       if (!value) return;
       if (!disabled) {
         const values = context.itemValues.current;
@@ -2672,14 +2762,14 @@ var SelectLabelPropDefs = {
 
 // src/components/select/label/select-label.tsx
 
-var SelectLabel = React28.forwardRef(
+var SelectLabel = React29.forwardRef(
   (props, ref) => {
     const context = useSelectContext();
     const { className, children, position, dataAttrs } = getComponentProps(
       props,
       SelectLabelPropDefs
     );
-    React28.useLayoutEffect(() => {
+    React29.useLayoutEffect(() => {
       _optionalChain([context, 'access', _47 => _47.setLabelPosition, 'optionalCall', _48 => _48(_nullishCoalesce(position, () => ( "top")))]);
     }, [position, context.setLabelPosition]);
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -2714,7 +2804,7 @@ SelectLabel.displayName = "Select.Label";
 
 
 
-var SelectValue = React29.forwardRef(
+var SelectValue = React30.forwardRef(
   (props, ref) => {
     const { className, placeholder: placeholderProp, ...rest } = props;
     const context = useSelectContext();
@@ -2766,7 +2856,7 @@ var SelectTriggerPropsDefs = {};
 
 // src/components/select/trigger/select-trigger.tsx
 
-var SelectTrigger = React30.forwardRef(
+var SelectTrigger = React31.forwardRef(
   (props, forwardedRef) => {
     const {
       className,
@@ -3018,7 +3108,7 @@ SelectRoot.displayName = "Select.Root";
 
 
 
-var SelectSeparator = React31.forwardRef(
+var SelectSeparator = React32.forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -3094,17 +3184,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 = React32.forwardRef((props, ref) => {
-  const context = React32.useContext(ThemeContext);
+var Theme = React37.forwardRef((props, ref) => {
+  const context = React37.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 = React32.forwardRef((props, ref) => {
+var ThemeRoot = React37.forwardRef((props, ref) => {
   const {
     appearance: themeAppearance,
     radius: themeRadius,
@@ -3113,15 +3550,15 @@ var ThemeRoot = React32.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const [appearance, setAppearance] = React32.useState(
+  const [appearance, setAppearance] = React37.useState(
     _nullishCoalesce(themeAppearance, () => ( "light"))
   );
-  const [radius, setRadius] = React32.useState(_nullishCoalesce(themeRadius, () => ( "md")));
-  const [roundness2, setRoundness] = React32.useState(
+  const [radius, setRadius] = React37.useState(_nullishCoalesce(themeRadius, () => ( "md")));
+  const [roundness2, setRoundness] = React37.useState(
     _nullishCoalesce(themeRoundness, () => ( "3"))
   );
-  const [spacing, setSpacing] = React32.useState(_nullishCoalesce(themeSpacing, () => ( "md")));
-  const value = React32.useMemo(
+  const [spacing, setSpacing] = React37.useState(_nullishCoalesce(themeSpacing, () => ( "md")));
+  const value = React37.useMemo(
     () => ({
       appearance,
       radius,
@@ -3148,8 +3585,8 @@ var ThemeRoot = React32.forwardRef((props, ref) => {
   ) });
 });
 ThemeRoot.displayName = "ThemeRoot";
-var ThemeSub = React32.forwardRef((props, ref) => {
-  const context = React32.useContext(ThemeContext);
+var ThemeSub = React37.forwardRef((props, ref) => {
+  const context = React37.useContext(ThemeContext);
   const {
     appearance,
     radius,
@@ -3225,7 +3662,7 @@ function ThemeControl({ position = "bottom" }) {
           {
             variant: "solid",
             value: appearance,
-            onValueChange: (change) => _optionalChain([onAppearanceChange, 'optionalCall', _50 => _50(change)]),
+            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, {}),
@@ -3241,7 +3678,7 @@ function ThemeControl({ position = "bottom" }) {
           {
             variant: "solid",
             value: radius,
-            onValueChange: (change) => _optionalChain([onRadiusChange, 'optionalCall', _51 => _51(change)]),
+            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, {}),
@@ -3262,7 +3699,7 @@ function ThemeControl({ position = "bottom" }) {
           {
             variant: "solid",
             value: roundness2,
-            onValueChange: (change) => _optionalChain([onRoundnessChange, 'optionalCall', _52 => _52(change)]),
+            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, {}),
@@ -3282,7 +3719,7 @@ function ThemeControl({ position = "bottom" }) {
           {
             variant: "solid",
             value: spacing,
-            onValueChange: (change) => _optionalChain([onSpacingChange, 'optionalCall', _53 => _53(change)]),
+            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, {}),
@@ -3316,5 +3753,7 @@ function ThemeControl({ position = "bottom" }) {
 
 
 
-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.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.Flex = Flex; 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