@locus-ui/components 0.0.13 → 0.0.15

package/dist/index.mjs

@@ -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;
@@ -1470,18 +1477,10 @@ var Text = React8.forwardRef(
       props,
       TextPropsDefs,
       MarginPropDefs,
-      PaddingPropDefs
-    );
-    return /* @__PURE__ */ jsx11(
-      "p",
-      {
-        ref,
-        ...dataAttrs,
-        className: clsx10("lcs-text", className),
-        ...rest,
-        children
-      }
+      PaddingPropDefs,
+      ColorPropDef
     );
+    return /* @__PURE__ */ jsx11("p", { ref, ...dataAttrs, className: clsx10("text", className), ...rest, children });
   }
 );
 
@@ -1710,7 +1709,8 @@ var Panel = React12.forwardRef((props, ref) => {
     PaddingPropDefs,
     SpacingPropDef,
     RadiusPropDefs,
-    RoundnessPropDef
+    RoundnessPropDef,
+    ColorPropDef
   );
   return /* @__PURE__ */ jsx15(
     "div",
@@ -3094,17 +3094,364 @@ var Separator = (props) => {
 };
 Separator.displayName = "Separator";
 
-// src/components/theme/theme.tsx
-import * as React32 from "react";
+// src/components/switch/indicator/switch-indicator.tsx
+import clsx30 from "clsx";
+import React33 from "react";
+
+// src/components/switch/switch-context.ts
+import React32 from "react";
+var SwitchContext = React32.createContext(
+  null
+);
+function useSwitchContext() {
+  const context = React32.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
 import { jsx as jsx34 } from "react/jsx-runtime";
-var Theme = React32.forwardRef((props, ref) => {
-  const context = React32.useContext(ThemeContext);
+var SwitchIndicator = React33.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__ */ jsx34(
+    "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: clsx30("switch-indicator", className),
+      ...indicatorProps,
+      ...dataAttrs
+    }
+  );
+});
+SwitchIndicator.displayName = "Switch.Indicator";
+
+// src/components/switch/label/switch-label.tsx
+import clsx31 from "clsx";
+import React34 from "react";
+
+// 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
+import { jsx as jsx35 } from "react/jsx-runtime";
+var SwitchLabel = React34.forwardRef(
+  (props, ref) => {
+    const context = useSwitchContext();
+    const { className, children, position } = getComponentProps(
+      props,
+      SwitchLabelPropDefs
+    );
+    React34.useLayoutEffect(() => {
+      context.setLabelPosition?.(position ?? "right");
+    }, [position, context.setLabelPosition]);
+    return /* @__PURE__ */ jsx35(
+      "label",
+      {
+        ref,
+        htmlFor: context.labelId,
+        className: clsx31("switch-label", className),
+        ...position && { [`data-position`]: position },
+        children: /* @__PURE__ */ jsx35(Text, { children })
+      }
+    );
+  }
+);
+SwitchLabel.displayName = "Switch.Label";
+
+// src/components/switch/root/switch-root.tsx
+import clsx32 from "clsx";
+import {
+  isValidElement as isValidElement5,
+  useId as useId3,
+  useMemo as useMemo7,
+  useState as useState7
+} from "react";
+import { jsx as jsx36, jsxs as jsxs9 } from "react/jsx-runtime";
+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 = useId3();
+  const [labelPosition, setLabelPosition] = useState7("right");
+  const [hovered, setHovered] = useState7(false);
+  const [focused, setFocused] = useState7(false);
+  const validChildren = filterChildren(props.children, ALLOWED_CHILDREN7, {
+    parentDisplayName: SwitchRoot.displayName
+  });
+  const { restDataAttrs } = useMemo7(() => {
+    const { ["data-color"]: _, ...restDataAttrs2 } = dataAttrs || {};
+    return { restDataAttrs: restDataAttrs2 };
+  }, [dataAttrs]);
+  const { indicator, otherChildren } = useMemo7(() => {
+    const indicatorIndex = validChildren.findIndex(
+      (child) => isValidElement5(child) && child.type.displayName === SwitchIndicator.displayName
+    );
+    if (indicatorIndex > -1) {
+      return {
+        indicator: validChildren[indicatorIndex],
+        otherChildren: validChildren.filter((_, i) => i !== indicatorIndex)
+      };
+    }
+    return {
+      indicator: /* @__PURE__ */ jsx36(SwitchIndicator, { size }),
+      otherChildren: validChildren
+    };
+  }, [validChildren, size]);
+  const contextValue = useMemo7(
+    () => ({
+      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__ */ jsx36(SwitchContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: clsx32("switch-root", props.className),
+      onClick: () => handleClick(),
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      ...restDataAttrs,
+      children: [
+        /* @__PURE__ */ jsx36(
+          "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__ */ jsx36("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
+import * as React36 from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var Theme = React36.forwardRef((props, ref) => {
+  const context = React36.useContext(ThemeContext);
   const isRoot = context === void 0;
-  if (isRoot) return /* @__PURE__ */ jsx34(ThemeRoot, { ...props, ref });
-  return /* @__PURE__ */ jsx34(ThemeSub, { ...props, ref });
+  if (isRoot) return /* @__PURE__ */ jsx37(ThemeRoot, { ...props, ref });
+  return /* @__PURE__ */ jsx37(ThemeSub, { ...props, ref });
 });
 Theme.displayName = "Theme";
-var ThemeRoot = React32.forwardRef((props, ref) => {
+var ThemeRoot = React36.forwardRef((props, ref) => {
   const {
     appearance: themeAppearance,
     radius: themeRadius,
@@ -3113,15 +3460,15 @@ var ThemeRoot = React32.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const [appearance, setAppearance] = React32.useState(
+  const [appearance, setAppearance] = React36.useState(
     themeAppearance ?? "light"
   );
-  const [radius, setRadius] = React32.useState(themeRadius ?? "md");
-  const [roundness2, setRoundness] = React32.useState(
+  const [radius, setRadius] = React36.useState(themeRadius ?? "md");
+  const [roundness2, setRoundness] = React36.useState(
     themeRoundness ?? "3"
   );
-  const [spacing, setSpacing] = React32.useState(themeSpacing ?? "md");
-  const value = React32.useMemo(
+  const [spacing, setSpacing] = React36.useState(themeSpacing ?? "md");
+  const value = React36.useMemo(
     () => ({
       appearance,
       radius,
@@ -3134,7 +3481,7 @@ var ThemeRoot = React32.forwardRef((props, ref) => {
     }),
     [appearance, radius, roundness2, spacing]
   );
-  return /* @__PURE__ */ jsx34(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx37(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx37(
     "div",
     {
       ref,
@@ -3148,8 +3495,8 @@ var ThemeRoot = React32.forwardRef((props, ref) => {
   ) });
 });
 ThemeRoot.displayName = "ThemeRoot";
-var ThemeSub = React32.forwardRef((props, ref) => {
-  const context = React32.useContext(ThemeContext);
+var ThemeSub = React36.forwardRef((props, ref) => {
+  const context = React36.useContext(ThemeContext);
   const {
     appearance,
     radius,
@@ -3172,7 +3519,7 @@ var ThemeSub = React32.forwardRef((props, ref) => {
     onRoundnessChange: context.onRoundnessChange,
     onSpacingChange: context.onSpacingChange
   };
-  return /* @__PURE__ */ jsx34(ThemeContext.Provider, { value: contextProps, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx37(ThemeContext.Provider, { value: contextProps, children: /* @__PURE__ */ jsx37(
     "div",
     {
       ref,
@@ -3189,8 +3536,8 @@ var ThemeSub = React32.forwardRef((props, ref) => {
 ThemeSub.displayName = "ThemeSub";
 
 // src/components/theme/theme-control.tsx
-import { useEffect as useEffect7, useState as useState8 } from "react";
-import { jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useState as useState9 } from "react";
+import { jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
 function ThemeControl({ position = "bottom" }) {
   const {
     appearance,
@@ -3202,7 +3549,7 @@ function ThemeControl({ position = "bottom" }) {
     spacing,
     onSpacingChange
   } = useTheme();
-  const [visible, setVisible] = useState8(false);
+  const [visible, setVisible] = useState9(false);
   useEffect7(() => {
     function handleKeyDown(event) {
       if (event.altKey && event.code === "KeyT") {
@@ -3213,85 +3560,85 @@ function ThemeControl({ position = "bottom" }) {
     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(
+  return /* @__PURE__ */ jsx38(Portal.Root, { open: visible, onOpenChange: setVisible, children: /* @__PURE__ */ jsx38(Portal.Content, { position, children: /* @__PURE__ */ jsxs10(
     Box,
     {
       m: "4",
       p: "4",
       className: "flex flex-col gap-2 border-[rgba(var(--border-color), 0.6)]",
       children: [
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs10(
           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__ */ jsx38(Select.Label, { position: "inside", children: "Theme Settings" }),
+              /* @__PURE__ */ jsx38(Select.Trigger, {}),
+              /* @__PURE__ */ jsxs10(Select.Content, { children: [
+                /* @__PURE__ */ jsx38(Select.Item, { value: "light", children: "Light" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "dark", children: "Dark" })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs10(
           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__ */ jsx38(Select.Label, { position: "inside", children: "Radius" }),
+              /* @__PURE__ */ jsx38(Select.Trigger, {}),
+              /* @__PURE__ */ jsxs10(Select.Content, { children: [
+                /* @__PURE__ */ jsx38(Select.Item, { value: "none", children: "None" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "xs", children: "XS" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "sm", children: "SM" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "md", children: "MD" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "lg", children: "LG" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "xl", children: "XL" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "full", children: "FULL" })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs10(
           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__ */ jsx38(Select.Label, { className: "min-w-40!", position: "inside", children: "Roundness" }),
+              /* @__PURE__ */ jsx38(Select.Trigger, {}),
+              /* @__PURE__ */ jsxs10(Select.Content, { children: [
+                /* @__PURE__ */ jsx38(Select.Item, { value: "1", children: "1" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "2", children: "2" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "3", children: "3" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "4", children: "4" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "5", children: "5" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "6", children: "6" })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs10(
           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" })
+              /* @__PURE__ */ jsx38(Select.Label, { position: "inside", children: "Spacing" }),
+              /* @__PURE__ */ jsx38(Select.Trigger, {}),
+              /* @__PURE__ */ jsxs10(Select.Content, { children: [
+                /* @__PURE__ */ jsx38(Select.Item, { value: "xs", children: "XS" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "sm", children: "SM" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "md", children: "MD" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "lg", children: "LG" }),
+                /* @__PURE__ */ jsx38(Select.Item, { value: "xl", children: "XL" })
               ] })
             ]
           }
@@ -3312,6 +3659,7 @@ export {
   ProgressBar,
   Select,
   Separator,
+  Switch,
   Text,
   Theme,
   ThemeControl,