@luxfi/ui 5.5.3 → 5.6.0

package/dist/switch.cjs

@@ -0,0 +1,163 @@
+"use client";
+'use strict';
+
+var RadixSwitch = require('@radix-ui/react-switch');
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/switch.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var NOOP = () => {
+};
+var SIZE_CLASSES = {
+  sm: {
+    root: "h-4 w-7",
+    thumb: "h-3 w-3 data-[state=checked]:translate-x-3",
+    label: "text-xs"
+  },
+  md: {
+    root: "h-5 w-9",
+    thumb: "h-4 w-4 data-[state=checked]:translate-x-4",
+    label: "text-sm"
+  },
+  lg: {
+    root: "h-6 w-11",
+    thumb: "h-5 w-5 data-[state=checked]:translate-x-5",
+    label: "text-base"
+  }
+};
+var SwitchBase = React__namespace.forwardRef(
+  function Switch(props, ref) {
+    const {
+      inputProps,
+      children,
+      rootRef,
+      labelProps,
+      trackLabel,
+      thumbLabel,
+      checked: checkedProp,
+      defaultChecked,
+      onCheckedChange,
+      onChange,
+      disabled = false,
+      size = "md",
+      direction,
+      className,
+      ...rest
+    } = props;
+    const [internalChecked, setInternalChecked] = React__namespace.useState(defaultChecked ?? false);
+    const isControlled = checkedProp !== void 0;
+    const checkedState = isControlled ? checkedProp : internalChecked;
+    const handleCheckedChange = React__namespace.useCallback(
+      (nextChecked) => {
+        if (!isControlled) {
+          setInternalChecked(nextChecked);
+        }
+        if (onCheckedChange) {
+          onCheckedChange({ checked: nextChecked });
+        }
+      },
+      [isControlled, onCheckedChange]
+    );
+    const sizeClasses = SIZE_CLASSES[size];
+    const isRtl = direction === "rtl";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        ref: rootRef,
+        className: cn(
+          "inline-flex items-center cursor-pointer select-none gap-2",
+          isRtl && "flex-row-reverse",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        onChange,
+        "data-disabled": disabled || void 0,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            RadixSwitch__namespace.Root,
+            {
+              checked: checkedState,
+              onCheckedChange: handleCheckedChange,
+              disabled,
+              className: cn(
+                "relative inline-flex shrink-0 items-center rounded-full",
+                "bg-gray-300 dark:bg-gray-600",
+                "data-[state=checked]:bg-gray-800 dark:bg-white",
+                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
+                "transition-colors duration-200",
+                sizeClasses.root
+              ),
+              children: [
+                trackLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none", children: checkedState ? trackLabel.on : trackLabel.off }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RadixSwitch__namespace.Thumb,
+                  {
+                    className: cn(
+                      "block rounded-full bg-white shadow-sm",
+                      "transition-transform duration-200",
+                      "translate-x-0.5",
+                      sizeClasses.thumb
+                    ),
+                    children: thumbLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center h-full w-full text-[8px]", children: checkedState ? thumbLabel.on : thumbLabel.off })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              type: "checkbox",
+              className: "sr-only",
+              checked: checkedState,
+              disabled,
+              tabIndex: -1,
+              "aria-hidden": true,
+              onChange: NOOP,
+              ...inputProps
+            }
+          ),
+          children != null && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              ...labelProps,
+              className: cn(sizeClasses.label, labelProps?.className),
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var Switch2 = SwitchBase;
+
+exports.Switch = Switch2;

package/dist/switch.js

@@ -0,0 +1,140 @@
+"use client";
+import * as RadixSwitch from '@radix-ui/react-switch';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/switch.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var NOOP = () => {
+};
+var SIZE_CLASSES = {
+  sm: {
+    root: "h-4 w-7",
+    thumb: "h-3 w-3 data-[state=checked]:translate-x-3",
+    label: "text-xs"
+  },
+  md: {
+    root: "h-5 w-9",
+    thumb: "h-4 w-4 data-[state=checked]:translate-x-4",
+    label: "text-sm"
+  },
+  lg: {
+    root: "h-6 w-11",
+    thumb: "h-5 w-5 data-[state=checked]:translate-x-5",
+    label: "text-base"
+  }
+};
+var SwitchBase = React.forwardRef(
+  function Switch(props, ref) {
+    const {
+      inputProps,
+      children,
+      rootRef,
+      labelProps,
+      trackLabel,
+      thumbLabel,
+      checked: checkedProp,
+      defaultChecked,
+      onCheckedChange,
+      onChange,
+      disabled = false,
+      size = "md",
+      direction,
+      className,
+      ...rest
+    } = props;
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false);
+    const isControlled = checkedProp !== void 0;
+    const checkedState = isControlled ? checkedProp : internalChecked;
+    const handleCheckedChange = React.useCallback(
+      (nextChecked) => {
+        if (!isControlled) {
+          setInternalChecked(nextChecked);
+        }
+        if (onCheckedChange) {
+          onCheckedChange({ checked: nextChecked });
+        }
+      },
+      [isControlled, onCheckedChange]
+    );
+    const sizeClasses = SIZE_CLASSES[size];
+    const isRtl = direction === "rtl";
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        ref: rootRef,
+        className: cn(
+          "inline-flex items-center cursor-pointer select-none gap-2",
+          isRtl && "flex-row-reverse",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        onChange,
+        "data-disabled": disabled || void 0,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(
+            RadixSwitch.Root,
+            {
+              checked: checkedState,
+              onCheckedChange: handleCheckedChange,
+              disabled,
+              className: cn(
+                "relative inline-flex shrink-0 items-center rounded-full",
+                "bg-gray-300 dark:bg-gray-600",
+                "data-[state=checked]:bg-gray-800 dark:bg-white",
+                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
+                "transition-colors duration-200",
+                sizeClasses.root
+              ),
+              children: [
+                trackLabel && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none", children: checkedState ? trackLabel.on : trackLabel.off }),
+                /* @__PURE__ */ jsx(
+                  RadixSwitch.Thumb,
+                  {
+                    className: cn(
+                      "block rounded-full bg-white shadow-sm",
+                      "transition-transform duration-200",
+                      "translate-x-0.5",
+                      sizeClasses.thumb
+                    ),
+                    children: thumbLabel && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center h-full w-full text-[8px]", children: checkedState ? thumbLabel.on : thumbLabel.off })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "checkbox",
+              className: "sr-only",
+              checked: checkedState,
+              disabled,
+              tabIndex: -1,
+              "aria-hidden": true,
+              onChange: NOOP,
+              ...inputProps
+            }
+          ),
+          children != null && /* @__PURE__ */ jsx(
+            "span",
+            {
+              ...labelProps,
+              className: cn(sizeClasses.label, labelProps?.className),
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var Switch2 = SwitchBase;
+
+export { Switch2 as Switch };