@luxfi/ui 6.1.2 → 7.0.0

package/dist/radio.js

@@ -0,0 +1,153 @@
+"use client";
+import * as RadixRadioGroup from '@radix-ui/react-radio-group';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/radio.tsx
+function cn(...inputs) {
+  return twMerge(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.createContext("md");
+var RadioGroupBase = React.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.useCallback(
+      (nextValue) => {
+        if (readOnly) return;
+        onValueChange?.({ value: nextValue });
+      },
+      [readOnly, onValueChange]
+    );
+    return /* @__PURE__ */ jsx(RadioSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
+      RadixRadioGroup.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.forwardRef(
+  function Radio(props, ref) {
+    const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
+    const size = React.useContext(RadioSizeContext);
+    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",
+          className
+        ),
+        "data-disabled": disabled || void 0,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            RadixRadioGroup.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__ */ jsx(
+                RadixRadioGroup.Indicator,
+                {
+                  className: cn(
+                    "block rounded-full bg-gray-800 dark:bg-white",
+                    sizeClasses.indicator
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "radio",
+              className: "sr-only",
+              value,
+              disabled,
+              tabIndex: -1,
+              "aria-hidden": true,
+              onChange: NOOP,
+              ...inputProps
+            }
+          ),
+          children != null && /* @__PURE__ */ jsx("span", { className: sizeClasses.label, children })
+        ]
+      }
+    );
+  }
+);
+var Radio2 = RadioBase;
+
+export { Radio2 as Radio, RadioGroup2 as RadioGroup };

package/dist/rating.cjs

@@ -0,0 +1,80 @@
+"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/rating.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var StarFilledIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
+var StarOutlineIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z", strokeWidth: "1.5" }) });
+var Rating = React__namespace.forwardRef(
+  function Rating2(props, ref) {
+    const { count = 5, label: labelProp, defaultValue = 0, onValueChange, readOnly, className, ...rest } = props;
+    const [value, setValue] = React__namespace.useState(defaultValue);
+    const [hoveredIndex, setHoveredIndex] = React__namespace.useState(-1);
+    const highlightedIndex = hoveredIndex >= 0 && !readOnly ? hoveredIndex + 1 : value;
+    const label = Array.isArray(labelProp) ? labelProp[highlightedIndex - 1] : labelProp;
+    const handleClick = React__namespace.useCallback((index) => () => {
+      if (readOnly) return;
+      setValue(index);
+      onValueChange?.({ value: index });
+    }, [readOnly, onValueChange]);
+    const handleMouseEnter = React__namespace.useCallback((index) => () => {
+      if (readOnly) return;
+      setHoveredIndex(index);
+    }, [readOnly]);
+    const handleMouseLeave = React__namespace.useCallback(() => {
+      setHoveredIndex(-1);
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("inline-flex items-center gap-1", className), ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center", onMouseLeave: handleMouseLeave, children: Array.from({ length: count }).map((_, index) => {
+        const filled = index < highlightedIndex;
+        const starIndex = index + 1;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: readOnly ? -1 : 0,
+            "aria-label": `Rate ${starIndex} of ${count}`,
+            className: cn(
+              "inline-flex items-center justify-center w-5 h-5 text-current",
+              readOnly ? "cursor-default" : "cursor-pointer"
+            ),
+            onClick: handleClick(starIndex),
+            onMouseEnter: handleMouseEnter(index),
+            children: filled ? /* @__PURE__ */ jsxRuntime.jsx(StarFilledIcon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(StarOutlineIcon, { className: "w-5 h-5" })
+          },
+          index
+        );
+      }) }),
+      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: label })
+    ] });
+  }
+);
+
+exports.Rating = Rating;

package/dist/rating.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    count?: number;
+    label?: string | Array<string>;
+    defaultValue?: number;
+    onValueChange?: ({ value }: {
+        value: number;
+    }) => void;
+    readOnly?: boolean;
+}
+declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Rating, type RatingProps };

package/dist/rating.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    count?: number;
+    label?: string | Array<string>;
+    defaultValue?: number;
+    onValueChange?: ({ value }: {
+        value: number;
+    }) => void;
+    readOnly?: boolean;
+}
+declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Rating, type RatingProps };

package/dist/rating.js

@@ -0,0 +1,58 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/rating.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var StarFilledIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
+var StarOutlineIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z", strokeWidth: "1.5" }) });
+var Rating = React.forwardRef(
+  function Rating2(props, ref) {
+    const { count = 5, label: labelProp, defaultValue = 0, onValueChange, readOnly, className, ...rest } = props;
+    const [value, setValue] = React.useState(defaultValue);
+    const [hoveredIndex, setHoveredIndex] = React.useState(-1);
+    const highlightedIndex = hoveredIndex >= 0 && !readOnly ? hoveredIndex + 1 : value;
+    const label = Array.isArray(labelProp) ? labelProp[highlightedIndex - 1] : labelProp;
+    const handleClick = React.useCallback((index) => () => {
+      if (readOnly) return;
+      setValue(index);
+      onValueChange?.({ value: index });
+    }, [readOnly, onValueChange]);
+    const handleMouseEnter = React.useCallback((index) => () => {
+      if (readOnly) return;
+      setHoveredIndex(index);
+    }, [readOnly]);
+    const handleMouseLeave = React.useCallback(() => {
+      setHoveredIndex(-1);
+    }, []);
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-flex items-center gap-1", className), ...rest, children: [
+      /* @__PURE__ */ jsx("div", { className: "inline-flex items-center", onMouseLeave: handleMouseLeave, children: Array.from({ length: count }).map((_, index) => {
+        const filled = index < highlightedIndex;
+        const starIndex = index + 1;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: readOnly ? -1 : 0,
+            "aria-label": `Rate ${starIndex} of ${count}`,
+            className: cn(
+              "inline-flex items-center justify-center w-5 h-5 text-current",
+              readOnly ? "cursor-default" : "cursor-pointer"
+            ),
+            onClick: handleClick(starIndex),
+            onMouseEnter: handleMouseEnter(index),
+            children: filled ? /* @__PURE__ */ jsx(StarFilledIcon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(StarOutlineIcon, { className: "w-5 h-5" })
+          },
+          index
+        );
+      }) }),
+      label && /* @__PURE__ */ jsx("span", { className: "text-sm", children: label })
+    ] });
+  }
+);
+
+export { Rating };