@luxfi/ui 6.1.3 → 7.1.0

package/dist/progress.cjs

@@ -0,0 +1,117 @@
+"use client";
+'use strict';
+
+var RadixProgress = require('@radix-ui/react-progress');
+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 RadixProgress__namespace = /*#__PURE__*/_interopNamespace(RadixProgress);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/progress.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var SIZE_CLASSES = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3",
+  xl: "h-4"
+};
+function normalizeValue(value, min, max) {
+  if (value == null) return 0;
+  if (max <= min) return 0;
+  return Math.round((value - min) / (max - min) * 100);
+}
+var Progress = React__namespace.forwardRef(
+  function Progress2(props, ref) {
+    const {
+      value,
+      min = 0,
+      max = 100,
+      size = "md",
+      color,
+      trackProps,
+      className,
+      style,
+      w,
+      flex,
+      ...rest
+    } = props;
+    const percent = normalizeValue(value, min, max);
+    const trackStyle = {
+      ...trackProps?.style,
+      ...trackProps?.borderStartRadius !== void 0 && {
+        borderStartStartRadius: trackProps.borderStartRadius,
+        borderEndStartRadius: trackProps.borderStartRadius
+      },
+      ...trackProps?.borderEndRadius !== void 0 && {
+        borderStartEndRadius: trackProps.borderEndRadius,
+        borderEndEndRadius: trackProps.borderEndRadius
+      }
+    };
+    const rootStyle = {
+      ...style,
+      ...w !== void 0 && { width: w === "full" ? "100%" : w },
+      ...flex !== void 0 && { flex }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn("relative", className),
+        style: rootStyle,
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          RadixProgress__namespace.Root,
+          {
+            value: percent,
+            max: 100,
+            className: cn(
+              "w-full overflow-hidden rounded-full",
+              "bg-[var(--color-progress-track)]",
+              SIZE_CLASSES[size],
+              trackProps?.className
+            ),
+            style: trackStyle,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              RadixProgress__namespace.Indicator,
+              {
+                className: cn(
+                  "h-full rounded-full transition-transform duration-500 ease-out",
+                  !color && "bg-[var(--color-progress-indicator)]"
+                ),
+                style: {
+                  width: `${percent}%`,
+                  ...color && { backgroundColor: `var(--color-${color.replace(".", "-")}, ${color})` }
+                }
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+
+exports.Progress = Progress;

package/dist/progress.d.cts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+declare const SIZE_CLASSES: {
+    readonly sm: "h-1";
+    readonly md: "h-2";
+    readonly lg: "h-3";
+    readonly xl: "h-4";
+};
+type Size = keyof typeof SIZE_CLASSES;
+interface TrackProps {
+    readonly borderStartRadius?: number | string;
+    readonly borderEndRadius?: number | string;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+}
+interface ProgressProps extends React.ComponentPropsWithoutRef<'div'> {
+    readonly value?: number | null;
+    readonly min?: number;
+    readonly max?: number;
+    readonly size?: Size;
+    readonly color?: string;
+    readonly trackProps?: TrackProps;
+    readonly w?: string;
+    readonly flex?: string | number;
+}
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Progress };

package/dist/progress.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+declare const SIZE_CLASSES: {
+    readonly sm: "h-1";
+    readonly md: "h-2";
+    readonly lg: "h-3";
+    readonly xl: "h-4";
+};
+type Size = keyof typeof SIZE_CLASSES;
+interface TrackProps {
+    readonly borderStartRadius?: number | string;
+    readonly borderEndRadius?: number | string;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+}
+interface ProgressProps extends React.ComponentPropsWithoutRef<'div'> {
+    readonly value?: number | null;
+    readonly min?: number;
+    readonly max?: number;
+    readonly size?: Size;
+    readonly color?: string;
+    readonly trackProps?: TrackProps;
+    readonly w?: string;
+    readonly flex?: string | number;
+}
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Progress };

package/dist/progress.js

@@ -0,0 +1,94 @@
+"use client";
+import * as RadixProgress from '@radix-ui/react-progress';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/progress.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var SIZE_CLASSES = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-3",
+  xl: "h-4"
+};
+function normalizeValue(value, min, max) {
+  if (value == null) return 0;
+  if (max <= min) return 0;
+  return Math.round((value - min) / (max - min) * 100);
+}
+var Progress = React.forwardRef(
+  function Progress2(props, ref) {
+    const {
+      value,
+      min = 0,
+      max = 100,
+      size = "md",
+      color,
+      trackProps,
+      className,
+      style,
+      w,
+      flex,
+      ...rest
+    } = props;
+    const percent = normalizeValue(value, min, max);
+    const trackStyle = {
+      ...trackProps?.style,
+      ...trackProps?.borderStartRadius !== void 0 && {
+        borderStartStartRadius: trackProps.borderStartRadius,
+        borderEndStartRadius: trackProps.borderStartRadius
+      },
+      ...trackProps?.borderEndRadius !== void 0 && {
+        borderStartEndRadius: trackProps.borderEndRadius,
+        borderEndEndRadius: trackProps.borderEndRadius
+      }
+    };
+    const rootStyle = {
+      ...style,
+      ...w !== void 0 && { width: w === "full" ? "100%" : w },
+      ...flex !== void 0 && { flex }
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("relative", className),
+        style: rootStyle,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          RadixProgress.Root,
+          {
+            value: percent,
+            max: 100,
+            className: cn(
+              "w-full overflow-hidden rounded-full",
+              "bg-[var(--color-progress-track)]",
+              SIZE_CLASSES[size],
+              trackProps?.className
+            ),
+            style: trackStyle,
+            children: /* @__PURE__ */ jsx(
+              RadixProgress.Indicator,
+              {
+                className: cn(
+                  "h-full rounded-full transition-transform duration-500 ease-out",
+                  !color && "bg-[var(--color-progress-indicator)]"
+                ),
+                style: {
+                  width: `${percent}%`,
+                  ...color && { backgroundColor: `var(--color-${color.replace(".", "-")}, ${color})` }
+                }
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+
+export { Progress };

package/dist/provider.cjs

@@ -0,0 +1,62 @@
+"use client";
+'use strict';
+
+var React = require('react');
+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);
+
+var ColorModeContext = React__namespace.createContext(void 0);
+function ColorModeProvider(props) {
+  const { children, defaultTheme = "light", value: controlledValue, onValueChange } = props;
+  const [internalMode, setInternalMode] = React__namespace.useState(() => {
+    if (controlledValue === "dark" || controlledValue === "light") {
+      return controlledValue;
+    }
+    if (typeof document !== "undefined") {
+      if (document.documentElement.classList.contains("dark")) return "dark";
+    }
+    return defaultTheme === "dark" ? "dark" : "light";
+  });
+  const colorMode = controlledValue === "dark" || controlledValue === "light" ? controlledValue : internalMode;
+  const setColorMode = React__namespace.useCallback((mode) => {
+    const resolved = mode === "dark" ? "dark" : "light";
+    setInternalMode(resolved);
+    onValueChange?.(resolved);
+    if (typeof document !== "undefined") {
+      document.documentElement.classList.toggle("dark", resolved === "dark");
+      document.documentElement.classList.toggle("light", resolved === "light");
+    }
+  }, [onValueChange]);
+  const toggleColorMode = React__namespace.useCallback(() => {
+    setColorMode(colorMode === "dark" ? "light" : "dark");
+  }, [colorMode, setColorMode]);
+  const ctx = React__namespace.useMemo(
+    () => ({ colorMode, setColorMode, toggleColorMode }),
+    [colorMode, setColorMode, toggleColorMode]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ColorModeContext.Provider, { value: ctx, children });
+}
+function Provider(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ColorModeProvider, { ...props });
+}
+
+exports.Provider = Provider;

package/dist/provider.d.cts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ColorModeProviderProps } from './color-mode.cjs';
+import 'react';
+
+declare function Provider(props: ColorModeProviderProps): react_jsx_runtime.JSX.Element;
+
+export { Provider };

package/dist/provider.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ColorModeProviderProps } from './color-mode.js';
+import 'react';
+
+declare function Provider(props: ColorModeProviderProps): react_jsx_runtime.JSX.Element;
+
+export { Provider };

package/dist/provider.js

@@ -0,0 +1,40 @@
+"use client";
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var ColorModeContext = React.createContext(void 0);
+function ColorModeProvider(props) {
+  const { children, defaultTheme = "light", value: controlledValue, onValueChange } = props;
+  const [internalMode, setInternalMode] = React.useState(() => {
+    if (controlledValue === "dark" || controlledValue === "light") {
+      return controlledValue;
+    }
+    if (typeof document !== "undefined") {
+      if (document.documentElement.classList.contains("dark")) return "dark";
+    }
+    return defaultTheme === "dark" ? "dark" : "light";
+  });
+  const colorMode = controlledValue === "dark" || controlledValue === "light" ? controlledValue : internalMode;
+  const setColorMode = React.useCallback((mode) => {
+    const resolved = mode === "dark" ? "dark" : "light";
+    setInternalMode(resolved);
+    onValueChange?.(resolved);
+    if (typeof document !== "undefined") {
+      document.documentElement.classList.toggle("dark", resolved === "dark");
+      document.documentElement.classList.toggle("light", resolved === "light");
+    }
+  }, [onValueChange]);
+  const toggleColorMode = React.useCallback(() => {
+    setColorMode(colorMode === "dark" ? "light" : "dark");
+  }, [colorMode, setColorMode]);
+  const ctx = React.useMemo(
+    () => ({ colorMode, setColorMode, toggleColorMode }),
+    [colorMode, setColorMode, toggleColorMode]
+  );
+  return /* @__PURE__ */ jsx(ColorModeContext.Provider, { value: ctx, children });
+}
+function Provider(props) {
+  return /* @__PURE__ */ jsx(ColorModeProvider, { ...props });
+}
+
+export { Provider };

package/dist/radio.cjs

@@ -0,0 +1,177 @@
+"use client";
+'use strict';
+
+var RadixRadioGroup = require('@radix-ui/react-radio-group');
+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 RadixRadioGroup__namespace = /*#__PURE__*/_interopNamespace(RadixRadioGroup);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/radio.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var SIZE_CLASSES = {
+  xs: {
+    root: "gap-1.5",
+    control: "h-3 w-3",
+    indicator: "h-1.5 w-1.5",
+    label: "text-xs"
+  },
+  sm: {
+    root: "gap-1.5",
+    control: "h-3.5 w-3.5",
+    indicator: "h-1.5 w-1.5",
+    label: "text-xs"
+  },
+  md: {
+    root: "gap-2",
+    control: "h-4 w-4",
+    indicator: "h-2 w-2",
+    label: "text-sm"
+  },
+  lg: {
+    root: "gap-2.5",
+    control: "h-5 w-5",
+    indicator: "h-2.5 w-2.5",
+    label: "text-base"
+  }
+};
+var RadioSizeContext = React__namespace.createContext("md");
+var RadioGroupBase = React__namespace.forwardRef(
+  function RadioGroup(props, ref) {
+    const {
+      children,
+      name,
+      required,
+      disabled = false,
+      readOnly = false,
+      orientation = "vertical",
+      loop = true,
+      defaultValue,
+      value,
+      onValueChange,
+      size = "md",
+      className,
+      ...rest
+    } = props;
+    const handleValueChange = React__namespace.useCallback(
+      (nextValue) => {
+        if (readOnly) return;
+        onValueChange?.({ value: nextValue });
+      },
+      [readOnly, onValueChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(RadioSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(
+      RadixRadioGroup__namespace.Root,
+      {
+        ref,
+        name,
+        required,
+        disabled: disabled || readOnly,
+        orientation,
+        loop,
+        defaultValue,
+        value: value ?? void 0,
+        onValueChange: handleValueChange,
+        className: cn(
+          "flex",
+          orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-6",
+          className
+        ),
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+var RadioGroup2 = RadioGroupBase;
+var NOOP = () => {
+};
+var RadioBase = React__namespace.forwardRef(
+  function Radio(props, ref) {
+    const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
+    const size = React__namespace.useContext(RadioSizeContext);
+    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",
+          className
+        ),
+        "data-disabled": disabled || void 0,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RadixRadioGroup__namespace.Item,
+            {
+              value,
+              disabled,
+              className: cn(
+                "inline-flex items-center justify-center shrink-0 rounded-full",
+                "border-2 border-current/30",
+                "data-[state=checked]:border-gray-800 dark:border-white",
+                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
+                "transition-colors duration-150",
+                sizeClasses.control
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                RadixRadioGroup__namespace.Indicator,
+                {
+                  className: cn(
+                    "block rounded-full bg-gray-800 dark:bg-white",
+                    sizeClasses.indicator
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              type: "radio",
+              className: "sr-only",
+              value,
+              disabled,
+              tabIndex: -1,
+              "aria-hidden": true,
+              onChange: NOOP,
+              ...inputProps
+            }
+          ),
+          children != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: sizeClasses.label, children })
+        ]
+      }
+    );
+  }
+);
+var Radio2 = RadioBase;
+
+exports.Radio = Radio2;
+exports.RadioGroup = RadioGroup2;

package/dist/radio.d.cts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+declare const SIZE_CLASSES: {
+    readonly xs: {
+        readonly root: "gap-1.5";
+        readonly control: "h-3 w-3";
+        readonly indicator: "h-1.5 w-1.5";
+        readonly label: "text-xs";
+    };
+    readonly sm: {
+        readonly root: "gap-1.5";
+        readonly control: "h-3.5 w-3.5";
+        readonly indicator: "h-1.5 w-1.5";
+        readonly label: "text-xs";
+    };
+    readonly md: {
+        readonly root: "gap-2";
+        readonly control: "h-4 w-4";
+        readonly indicator: "h-2 w-2";
+        readonly label: "text-sm";
+    };
+    readonly lg: {
+        readonly root: "gap-2.5";
+        readonly control: "h-5 w-5";
+        readonly indicator: "h-2.5 w-2.5";
+        readonly label: "text-base";
+    };
+};
+type RadioSize = keyof typeof SIZE_CLASSES;
+interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'dir'> {
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    loop?: boolean;
+    defaultValue?: string;
+    value?: string | null;
+    onValueChange?: (details: {
+        value: string | null;
+    }) => void;
+    size?: RadioSize;
+}
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface RadioProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange'> {
+    rootRef?: React.Ref<HTMLLabelElement>;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    value: string;
+    disabled?: boolean;
+}
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };

package/dist/radio.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+declare const SIZE_CLASSES: {
+    readonly xs: {
+        readonly root: "gap-1.5";
+        readonly control: "h-3 w-3";
+        readonly indicator: "h-1.5 w-1.5";
+        readonly label: "text-xs";
+    };
+    readonly sm: {
+        readonly root: "gap-1.5";
+        readonly control: "h-3.5 w-3.5";
+        readonly indicator: "h-1.5 w-1.5";
+        readonly label: "text-xs";
+    };
+    readonly md: {
+        readonly root: "gap-2";
+        readonly control: "h-4 w-4";
+        readonly indicator: "h-2 w-2";
+        readonly label: "text-sm";
+    };
+    readonly lg: {
+        readonly root: "gap-2.5";
+        readonly control: "h-5 w-5";
+        readonly indicator: "h-2.5 w-2.5";
+        readonly label: "text-base";
+    };
+};
+type RadioSize = keyof typeof SIZE_CLASSES;
+interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'dir'> {
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    loop?: boolean;
+    defaultValue?: string;
+    value?: string | null;
+    onValueChange?: (details: {
+        value: string | null;
+    }) => void;
+    size?: RadioSize;
+}
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface RadioProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange'> {
+    rootRef?: React.Ref<HTMLLabelElement>;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    value: string;
+    disabled?: boolean;
+}
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };