@luxfi/ui 5.5.3 → 5.6.0

package/dist/checkbox.cjs

@@ -0,0 +1,265 @@
+"use client";
+'use strict';
+
+var RadixCheckbox = require('@radix-ui/react-checkbox');
+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 RadixCheckbox__namespace = /*#__PURE__*/_interopNamespace(RadixCheckbox);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/checkbox.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var NOOP = () => {
+};
+var CheckboxGroupContext = React__namespace.createContext(null);
+function useCheckboxGroupContext() {
+  return React__namespace.useContext(CheckboxGroupContext);
+}
+var CheckboxGroupBase = React__namespace.forwardRef(
+  function CheckboxGroup(props, ref) {
+    const {
+      children,
+      value: controlledValue,
+      defaultValue,
+      onValueChange,
+      orientation = "vertical",
+      name: _name,
+      className,
+      ...rest
+    } = props;
+    const [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(defaultValue ?? []);
+    const isControlled = controlledValue !== void 0;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    const toggle = React__namespace.useCallback(
+      (itemValue) => {
+        const next = value.includes(itemValue) ? value.filter((v) => v !== itemValue) : [...value, itemValue];
+        if (!isControlled) {
+          setUncontrolledValue(next);
+        }
+        onValueChange?.(next);
+      },
+      [value, isControlled, onValueChange]
+    );
+    React__namespace.useEffect(() => {
+      if (isControlled) {
+        setUncontrolledValue(controlledValue);
+      }
+    }, [isControlled, controlledValue]);
+    const ctx = React__namespace.useMemo(() => ({ value, toggle }), [value, toggle]);
+    return /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn(
+          "flex",
+          orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-8",
+          className
+        ),
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+var CheckboxGroup2 = CheckboxGroupBase;
+var SIZE_CLASSES = {
+  sm: {
+    root: "gap-1.5",
+    control: "h-3.5 w-3.5 rounded-sm",
+    label: "text-xs",
+    icon: "h-3 w-3"
+  },
+  md: {
+    root: "gap-2",
+    control: "h-4 w-4 rounded",
+    label: "text-sm",
+    icon: "h-3.5 w-3.5"
+  }
+};
+var CheckIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 12 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M10.59 0.59L4 7.17L1.41 4.59L0 6L4 10L12 2L10.59 0.59Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var IndeterminateIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 12 2",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 0H12V2H0V0Z", fill: "currentColor" })
+  }
+);
+var CheckboxBase = React__namespace.forwardRef(
+  function Checkbox(props, ref) {
+    const {
+      icon,
+      children,
+      inputProps,
+      rootRef,
+      checked: checkedProp,
+      defaultChecked,
+      onCheckedChange,
+      onChange,
+      disabled = false,
+      readOnly = false,
+      value,
+      size = "md",
+      name,
+      required,
+      className,
+      ...rest
+    } = props;
+    const group = useCheckboxGroupContext();
+    const hiddenInputRef = React__namespace.useRef(null);
+    const setHiddenInputRef = React__namespace.useCallback(
+      (node) => {
+        hiddenInputRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const isInGroup = group !== null && value !== void 0;
+    const groupChecked = isInGroup ? group.value.includes(value) : void 0;
+    const [internalChecked, setInternalChecked] = React__namespace.useState(
+      defaultChecked ?? false
+    );
+    const isControlled = checkedProp !== void 0 || isInGroup;
+    let checkedState;
+    if (checkedProp !== void 0) {
+      checkedState = checkedProp;
+    } else if (isInGroup) {
+      checkedState = groupChecked ?? false;
+    } else {
+      checkedState = internalChecked;
+    }
+    const handleCheckedChange = React__namespace.useCallback(
+      (nextChecked) => {
+        if (readOnly) return;
+        if (!isControlled) {
+          setInternalChecked(nextChecked);
+        }
+        if (isInGroup) {
+          group.toggle(value);
+        }
+        onCheckedChange?.(nextChecked);
+        if (onChange && hiddenInputRef.current) {
+          const input = hiddenInputRef.current;
+          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+            HTMLInputElement.prototype,
+            "checked"
+          )?.set;
+          nativeInputValueSetter?.call(input, nextChecked === true);
+          const event = new Event("change", { bubbles: true });
+          input.dispatchEvent(event);
+        }
+      },
+      [readOnly, isControlled, isInGroup, group, value, onCheckedChange, onChange]
+    );
+    const sizeClasses = SIZE_CLASSES[size];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        ref: rootRef,
+        className: cn(
+          "inline-flex items-center cursor-pointer select-none",
+          sizeClasses.root,
+          disabled && "opacity-50 cursor-not-allowed",
+          readOnly && "cursor-default",
+          className
+        ),
+        onChange,
+        "data-disabled": disabled || void 0,
+        "data-readonly": readOnly || void 0,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RadixCheckbox__namespace.Root,
+            {
+              checked: checkedState,
+              onCheckedChange: handleCheckedChange,
+              disabled: disabled || readOnly,
+              name,
+              value,
+              required,
+              className: cn(
+                "inline-flex items-center justify-center shrink-0",
+                "border-2 border-current/30",
+                "data-[state=checked]:bg-gray-800 data-[state=checked]:text-white",
+                "dark:data-[state=checked]:bg-white dark:data-[state=checked]:text-black",
+                "data-[state=indeterminate]:bg-gray-800 data-[state=indeterminate]:text-white",
+                "dark:data-[state=indeterminate]:bg-white dark:data-[state=indeterminate]:text-black",
+                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
+                "transition-colors duration-150",
+                sizeClasses.control
+              ),
+              children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(RadixCheckbox__namespace.Indicator, { className: cn("flex items-center justify-center", sizeClasses.icon), children: checkedState === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(IndeterminateIcon, { className: sizeClasses.icon }) : /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: sizeClasses.icon }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: setHiddenInputRef,
+              type: "checkbox",
+              className: "sr-only",
+              checked: checkedState === true,
+              disabled,
+              readOnly,
+              name,
+              value,
+              tabIndex: -1,
+              "aria-hidden": true,
+              onChange: NOOP,
+              ...inputProps
+            }
+          ),
+          children != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(sizeClasses.label), children })
+        ]
+      }
+    );
+  }
+);
+var Checkbox2 = CheckboxBase;
+
+exports.Checkbox = Checkbox2;
+exports.CheckboxGroup = CheckboxGroup2;

package/dist/checkbox.js

@@ -0,0 +1,241 @@
+"use client";
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/checkbox.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var NOOP = () => {
+};
+var CheckboxGroupContext = React.createContext(null);
+function useCheckboxGroupContext() {
+  return React.useContext(CheckboxGroupContext);
+}
+var CheckboxGroupBase = React.forwardRef(
+  function CheckboxGroup(props, ref) {
+    const {
+      children,
+      value: controlledValue,
+      defaultValue,
+      onValueChange,
+      orientation = "vertical",
+      name: _name,
+      className,
+      ...rest
+    } = props;
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? []);
+    const isControlled = controlledValue !== void 0;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    const toggle = React.useCallback(
+      (itemValue) => {
+        const next = value.includes(itemValue) ? value.filter((v) => v !== itemValue) : [...value, itemValue];
+        if (!isControlled) {
+          setUncontrolledValue(next);
+        }
+        onValueChange?.(next);
+      },
+      [value, isControlled, onValueChange]
+    );
+    React.useEffect(() => {
+      if (isControlled) {
+        setUncontrolledValue(controlledValue);
+      }
+    }, [isControlled, controlledValue]);
+    const ctx = React.useMemo(() => ({ value, toggle }), [value, toggle]);
+    return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn(
+          "flex",
+          orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-8",
+          className
+        ),
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+var CheckboxGroup2 = CheckboxGroupBase;
+var SIZE_CLASSES = {
+  sm: {
+    root: "gap-1.5",
+    control: "h-3.5 w-3.5 rounded-sm",
+    label: "text-xs",
+    icon: "h-3 w-3"
+  },
+  md: {
+    root: "gap-2",
+    control: "h-4 w-4 rounded",
+    label: "text-sm",
+    icon: "h-3.5 w-3.5"
+  }
+};
+var CheckIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 12 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M10.59 0.59L4 7.17L1.41 4.59L0 6L4 10L12 2L10.59 0.59Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var IndeterminateIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 12 2",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx("path", { d: "M0 0H12V2H0V0Z", fill: "currentColor" })
+  }
+);
+var CheckboxBase = React.forwardRef(
+  function Checkbox(props, ref) {
+    const {
+      icon,
+      children,
+      inputProps,
+      rootRef,
+      checked: checkedProp,
+      defaultChecked,
+      onCheckedChange,
+      onChange,
+      disabled = false,
+      readOnly = false,
+      value,
+      size = "md",
+      name,
+      required,
+      className,
+      ...rest
+    } = props;
+    const group = useCheckboxGroupContext();
+    const hiddenInputRef = React.useRef(null);
+    const setHiddenInputRef = React.useCallback(
+      (node) => {
+        hiddenInputRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const isInGroup = group !== null && value !== void 0;
+    const groupChecked = isInGroup ? group.value.includes(value) : void 0;
+    const [internalChecked, setInternalChecked] = React.useState(
+      defaultChecked ?? false
+    );
+    const isControlled = checkedProp !== void 0 || isInGroup;
+    let checkedState;
+    if (checkedProp !== void 0) {
+      checkedState = checkedProp;
+    } else if (isInGroup) {
+      checkedState = groupChecked ?? false;
+    } else {
+      checkedState = internalChecked;
+    }
+    const handleCheckedChange = React.useCallback(
+      (nextChecked) => {
+        if (readOnly) return;
+        if (!isControlled) {
+          setInternalChecked(nextChecked);
+        }
+        if (isInGroup) {
+          group.toggle(value);
+        }
+        onCheckedChange?.(nextChecked);
+        if (onChange && hiddenInputRef.current) {
+          const input = hiddenInputRef.current;
+          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+            HTMLInputElement.prototype,
+            "checked"
+          )?.set;
+          nativeInputValueSetter?.call(input, nextChecked === true);
+          const event = new Event("change", { bubbles: true });
+          input.dispatchEvent(event);
+        }
+      },
+      [readOnly, isControlled, isInGroup, group, value, onCheckedChange, onChange]
+    );
+    const sizeClasses = SIZE_CLASSES[size];
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        ref: rootRef,
+        className: cn(
+          "inline-flex items-center cursor-pointer select-none",
+          sizeClasses.root,
+          disabled && "opacity-50 cursor-not-allowed",
+          readOnly && "cursor-default",
+          className
+        ),
+        onChange,
+        "data-disabled": disabled || void 0,
+        "data-readonly": readOnly || void 0,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            RadixCheckbox.Root,
+            {
+              checked: checkedState,
+              onCheckedChange: handleCheckedChange,
+              disabled: disabled || readOnly,
+              name,
+              value,
+              required,
+              className: cn(
+                "inline-flex items-center justify-center shrink-0",
+                "border-2 border-current/30",
+                "data-[state=checked]:bg-gray-800 data-[state=checked]:text-white",
+                "dark:data-[state=checked]:bg-white dark:data-[state=checked]:text-black",
+                "data-[state=indeterminate]:bg-gray-800 data-[state=indeterminate]:text-white",
+                "dark:data-[state=indeterminate]:bg-white dark:data-[state=indeterminate]:text-black",
+                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
+                "transition-colors duration-150",
+                sizeClasses.control
+              ),
+              children: icon ?? /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: cn("flex items-center justify-center", sizeClasses.icon), children: checkedState === "indeterminate" ? /* @__PURE__ */ jsx(IndeterminateIcon, { className: sizeClasses.icon }) : /* @__PURE__ */ jsx(CheckIcon, { className: sizeClasses.icon }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: setHiddenInputRef,
+              type: "checkbox",
+              className: "sr-only",
+              checked: checkedState === true,
+              disabled,
+              readOnly,
+              name,
+              value,
+              tabIndex: -1,
+              "aria-hidden": true,
+              onChange: NOOP,
+              ...inputProps
+            }
+          ),
+          children != null && /* @__PURE__ */ jsx("span", { className: cn(sizeClasses.label), children })
+        ]
+      }
+    );
+  }
+);
+var Checkbox2 = CheckboxBase;
+
+export { Checkbox2 as Checkbox, CheckboxGroup2 as CheckboxGroup };

package/dist/close-button.cjs

@@ -0,0 +1,73 @@
+"use client";
+'use strict';
+
+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 React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/close-button.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
+var CloseButton = React__namespace.forwardRef(function CloseButton2(props, ref) {
+  const { variant: _variant, size: _size, className, children, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Close",
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center",
+        "size-5 min-w-0 shrink-0 p-0",
+        "rounded-sm border-0 overflow-hidden",
+        "bg-transparent text-[var(--closeButton-fg,currentColor)]",
+        "hover:bg-transparent hover:text-[var(--hover-color,currentColor)]",
+        "disabled:opacity-40",
+        "cursor-pointer",
+        className
+      ),
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "size-5",
+          viewBox: "0 0 20 20",
+          fill: "none",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: CLOSE_ICON_PATH,
+              fill: "currentColor"
+            }
+          )
+        }
+      )
+    }
+  );
+});
+
+exports.CloseButton = CloseButton;

package/dist/close-button.js

@@ -0,0 +1,51 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/close-button.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
+var CloseButton = React.forwardRef(function CloseButton2(props, ref) {
+  const { variant: _variant, size: _size, className, children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Close",
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center",
+        "size-5 min-w-0 shrink-0 p-0",
+        "rounded-sm border-0 overflow-hidden",
+        "bg-transparent text-[var(--closeButton-fg,currentColor)]",
+        "hover:bg-transparent hover:text-[var(--hover-color,currentColor)]",
+        "disabled:opacity-40",
+        "cursor-pointer",
+        className
+      ),
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "size-5",
+          viewBox: "0 0 20 20",
+          fill: "none",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: CLOSE_ICON_PATH,
+              fill: "currentColor"
+            }
+          )
+        }
+      )
+    }
+  );
+});
+
+export { CloseButton };