@locus-ui/components 0.0.13 → 0.0.15

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 React14 = _interopRequireWildcard(_react); var React13 = _interopRequireWildcard(_react); var React17 = _interopRequireWildcard(_react); var React15 = _interopRequireWildcard(_react); var React16 = _interopRequireWildcard(_react); var React19 = _interopRequireWildcard(_react); var React18 = _interopRequireWildcard(_react); var React25 = _interopRequireWildcard(_react); var React22 = _interopRequireWildcard(_react); var React23 = _interopRequireWildcard(_react); var React24 = _interopRequireWildcard(_react); var React26 = _interopRequireWildcard(_react); var React27 = _interopRequireWildcard(_react); var React28 = _interopRequireWildcard(_react); var React30 = _interopRequireWildcard(_react); var React29 = _interopRequireWildcard(_react); var React31 = _interopRequireWildcard(_react); var React36 = _interopRequireWildcard(_react);
 var AccordionContext = React2.default.createContext(null);
 function useAccordionContext() {
   const context = React2.default.useContext(AccordionContext);
@@ -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 });
   }
 );
 
@@ -1710,7 +1709,8 @@ var Panel = React12.forwardRef((props, ref) => {
     PaddingPropDefs,
     SpacingPropDef,
     RadiusPropDefs,
-    RoundnessPropDef
+    RoundnessPropDef,
+    ColorPropDef
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
@@ -3094,17 +3094,364 @@ var Separator = (props) => {
 };
 Separator.displayName = "Separator";
 
+// src/components/switch/indicator/switch-indicator.tsx
+
+
+
+// src/components/switch/switch-context.ts
+
+var SwitchContext = React2.default.createContext(
+  null
+);
+function useSwitchContext() {
+  const context = React2.default.useContext(SwitchContext);
+  if (!context) {
+    throw new Error("Switch components must be used within a Switch.Root");
+  }
+  return context;
+}
+
+// src/components/switch/root/switch-root.props.ts
+var SwitchVariants = ["solid", "outlined", "muted"];
+var SwitchRootPropsDefs = {
+  /**
+   * Sets the variant style of the switch ("solid" or "outlined").
+   */
+  variant: {
+    type: "enum",
+    values: SwitchVariants,
+    dataAttr: "variant"
+  },
+  /**
+   * Sets the checked state of the switch.
+   *
+   * When using an uncontrolled switch, use `defaultChecked` instead.
+   * @default undefined
+   */
+  checked: {
+    type: "boolean",
+    dataAttr: "checked"
+  },
+  /**
+   * The value of the switch (checked state).
+   */
+  value: {
+    type: "boolean"
+  },
+  /**
+   * Sets the default checked state of the switch.
+   * @default undefined
+   */
+  defaultChecked: {
+    type: "boolean"
+  },
+  /**
+   * Disables the switch component.
+   * @default undefined
+   */
+  disabled: {
+    type: "boolean",
+    dataAttr: "disabled"
+  },
+  /**
+   * Makes the switch read-only.
+   * @default undefined
+   */
+  readonly: {
+    type: "boolean",
+    dataAttr: "readonly"
+  },
+  /**
+   * Marks the switch as required.
+   * @default undefined
+   */
+  required: {
+    type: "boolean",
+    dataAttr: "required"
+  },
+  /**
+   * Sets the name attribute of the switch input for form control.
+   * @default undefined
+   */
+  name: {
+    type: "string"
+  },
+  /**
+   * Callback fired when the checked state changes.
+   *
+   * @param value - The new checked state.
+   */
+  onCheckedChange: {
+    type: "function"
+  }
+};
+
+// src/components/switch/indicator/switch-indicator.props.ts
+var SwitchIndicatorPropDefs = {
+  /**
+   * Sets the variant style of the switch ("solid" or "outlined").
+   */
+  variant: {
+    type: "enum",
+    values: SwitchVariants,
+    dataAttr: "variant"
+  }
+};
+
+// src/components/switch/indicator/switch-indicator.tsx
+
+var SwitchIndicator = React2.default.forwardRef((props, ref) => {
+  const {
+    value,
+    setValue,
+    hovered,
+    color,
+    disabled,
+    readonly,
+    focused,
+    variant: contextVariant
+  } = useSwitchContext();
+  const { size, variant, className, style, dataAttrs } = getComponentProps(
+    props,
+    SwitchIndicatorPropDefs,
+    SizePropDef
+  );
+  const indicatorVariant = variant || contextVariant;
+  const handleKeyDown = (event) => {
+    if (disabled || readonly) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      setValue(!value);
+    }
+  };
+  const indicatorProps = {
+    ...value && { "data-checked": true },
+    ...disabled && { "data-disabled": true },
+    ...readonly && { "data-readonly": true },
+    ...(variant || contextVariant) && { "data-variant": indicatorVariant }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref,
+      style,
+      role: "switch",
+      "data-size": size,
+      "data-color": color,
+      "data-hovered": hovered,
+      "aria-disabled": disabled,
+      "data-focused": focused,
+      "aria-readonly": readonly,
+      onKeyDown: handleKeyDown,
+      tabIndex: disabled || readonly ? -1 : 0,
+      className: _clsx2.default.call(void 0, "switch-indicator", className),
+      ...indicatorProps,
+      ...dataAttrs
+    }
+  );
+});
+SwitchIndicator.displayName = "Switch.Indicator";
+
+// src/components/switch/label/switch-label.tsx
+
+
+
+// src/components/switch/label/switch-label.props.ts
+var labelPositions3 = ["top", "left", "right", "bottom"];
+var SwitchLabelPropDefs = {
+  /**
+   * Sets the position of the label relative to the switch.
+   *
+   * @example position="left" // positions the label to the left of the switch
+   * @example position="top" // positions the label above the switch
+   */
+  position: {
+    type: "enum",
+    values: labelPositions3,
+    dataAttr: "position"
+  }
+};
+
+// src/components/switch/label/switch-label.tsx
+
+var SwitchLabel = React2.default.forwardRef(
+  (props, ref) => {
+    const context = useSwitchContext();
+    const { className, children, position } = getComponentProps(
+      props,
+      SwitchLabelPropDefs
+    );
+    React2.default.useLayoutEffect(() => {
+      _optionalChain([context, 'access', _50 => _50.setLabelPosition, 'optionalCall', _51 => _51(_nullishCoalesce(position, () => ( "right")))]);
+    }, [position, context.setLabelPosition]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "label",
+      {
+        ref,
+        htmlFor: context.labelId,
+        className: _clsx2.default.call(void 0, "switch-label", className),
+        ...position && { [`data-position`]: position },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { children })
+      }
+    );
+  }
+);
+SwitchLabel.displayName = "Switch.Label";
+
+// src/components/switch/root/switch-root.tsx
+
+
+
+
+
+
+
+
+var ALLOWED_CHILDREN7 = [
+  SwitchLabel.displayName,
+  SwitchIndicator.displayName
+];
+var SwitchRoot = (props) => {
+  const {
+    name,
+    size,
+    color,
+    variant,
+    checked,
+    dataAttrs,
+    onCheckedChange,
+    value: valueProp,
+    disabled = false,
+    required = false,
+    readonly = false,
+    defaultChecked = false
+  } = getComponentProps(
+    props,
+    SwitchRootPropsDefs,
+    AlignPropDef,
+    MarginPropDefs,
+    SizePropDef,
+    ColorPropDef
+  );
+  const [value, setValue] = useControllableState({
+    value: valueProp || checked,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange
+  });
+  const labelId = _react.useId.call(void 0, );
+  const [labelPosition, setLabelPosition] = _react.useState.call(void 0, "right");
+  const [hovered, setHovered] = _react.useState.call(void 0, false);
+  const [focused, setFocused] = _react.useState.call(void 0, false);
+  const validChildren = filterChildren(props.children, ALLOWED_CHILDREN7, {
+    parentDisplayName: SwitchRoot.displayName
+  });
+  const { restDataAttrs } = _react.useMemo.call(void 0, () => {
+    const { ["data-color"]: _, ...restDataAttrs2 } = dataAttrs || {};
+    return { restDataAttrs: restDataAttrs2 };
+  }, [dataAttrs]);
+  const { indicator, otherChildren } = _react.useMemo.call(void 0, () => {
+    const indicatorIndex = validChildren.findIndex(
+      (child) => _react.isValidElement.call(void 0, child) && child.type.displayName === SwitchIndicator.displayName
+    );
+    if (indicatorIndex > -1) {
+      return {
+        indicator: validChildren[indicatorIndex],
+        otherChildren: validChildren.filter((_, i) => i !== indicatorIndex)
+      };
+    }
+    return {
+      indicator: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SwitchIndicator, { size }),
+      otherChildren: validChildren
+    };
+  }, [validChildren, size]);
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({
+      name,
+      value,
+      color,
+      setValue,
+      onCheckedChange,
+      labelId,
+      labelPosition,
+      setLabelPosition,
+      variant,
+      hovered,
+      setHovered,
+      focused,
+      setFocused,
+      disabled,
+      readonly,
+      required
+    }),
+    [
+      name,
+      value,
+      color,
+      onCheckedChange,
+      setValue,
+      labelId,
+      labelPosition,
+      hovered,
+      focused,
+      disabled,
+      readonly,
+      required
+    ]
+  );
+  const handleClick = () => {
+    if (disabled || readonly) return;
+    setValue(!value);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SwitchContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _clsx2.default.call(void 0, "switch-root", props.className),
+      onClick: () => handleClick(),
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      ...restDataAttrs,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: "switch-container",
+            "data-size": size,
+            "data-color": color,
+            "data-checked": value,
+            "data-hovered": hovered,
+            "data-focused": focused,
+            "data-variant": variant,
+            children: indicator
+          }
+        ),
+        otherChildren,
+        name && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { type: "hidden", name, value: String(value) })
+      ]
+    }
+  ) });
+};
+SwitchRoot.displayName = "Switch";
+
+// src/components/switch/switch.tsx
+var Switch = Object.assign(SwitchRoot, {
+  Root: SwitchRoot,
+  Label: SwitchLabel,
+  Indicator: SwitchIndicator
+});
+
 // src/components/theme/theme.tsx
 
 
-var Theme = React32.forwardRef((props, ref) => {
-  const context = React32.useContext(ThemeContext);
+var Theme = React36.forwardRef((props, ref) => {
+  const context = React36.useContext(ThemeContext);
   const isRoot = context === void 0;
   if (isRoot) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThemeRoot, { ...props, ref });
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThemeSub, { ...props, ref });
 });
 Theme.displayName = "Theme";
-var ThemeRoot = 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(
     _nullishCoalesce(themeAppearance, () => ( "light"))
   );
-  const [radius, setRadius] = React32.useState(_nullishCoalesce(themeRadius, () => ( "md")));
-  const [roundness2, setRoundness] = React32.useState(
+  const [radius, setRadius] = React36.useState(_nullishCoalesce(themeRadius, () => ( "md")));
+  const [roundness2, setRoundness] = React36.useState(
     _nullishCoalesce(themeRoundness, () => ( "3"))
   );
-  const [spacing, setSpacing] = React32.useState(_nullishCoalesce(themeSpacing, () => ( "md")));
-  const value = React32.useMemo(
+  const [spacing, setSpacing] = React36.useState(_nullishCoalesce(themeSpacing, () => ( "md")));
+  const value = React36.useMemo(
     () => ({
       appearance,
       radius,
@@ -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,
@@ -3225,7 +3572,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 +3588,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 +3609,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 +3629,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 +3663,6 @@ 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.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