@luxfi/ui 7.4.12 → 7.4.13

package/dist/progress-circle.js

@@ -1,19 +1,29 @@
 "use client";
+import { View, Text } from '@hanzo/gui';
 import * as React from 'react';
+import { Children, createElement } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/progress-circle.tsx
+var ink = (children, Wrap = Text, props = {}) => {
+  let hasText = false;
+  Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child);
+};
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var SIZE_MAP = {
-  xs: { size: 24, thickness: 4, textClass: "text-[10px]" },
-  sm: { size: 32, thickness: 5, textClass: "text-[10px]" },
-  md: { size: 40, thickness: 6, textClass: "text-xs" },
-  lg: { size: 48, thickness: 7, textClass: "text-sm" },
-  xl: { size: 64, thickness: 8, textClass: "text-sm" }
+  xs: { size: 24, thickness: 4, fontSize: 10 },
+  sm: { size: 32, thickness: 5, fontSize: 10 },
+  md: { size: 40, thickness: 6, fontSize: 12 },
+  lg: { size: 48, thickness: 7, fontSize: 14 },
+  xl: { size: 64, thickness: 8, fontSize: 14 }
 };
 var Ctx = React.createContext({
   value: 0,
@@ -34,16 +44,18 @@ var ProgressCircleRoot = React.forwardRef(function ProgressCircleRoot2(props, re
     [value, size, colorPalette]
   );
   return /* @__PURE__ */ jsx(Ctx.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
-    "div",
+    View,
     {
       ref,
       role: "progressbar",
       "aria-valuenow": value ?? void 0,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      className: cn("relative inline-flex text-sm", className),
+      position: "relative",
+      style: { display: "inline-flex", fontSize: 14 },
+      className,
       ...rest,
-      children
+      children: ink(children)
     }
   ) });
 });
@@ -62,10 +74,7 @@ var ProgressCircleRing = React.forwardRef(function ProgressCircleRing2(props, re
       width: size,
       height: size,
       viewBox: `0 0 ${size} ${size}`,
-      className: cn(
-        value === null && "animate-spin",
-        className
-      ),
+      className: value === null ? cn("lux-spin", className) : className,
       ...rest,
       children: [
         /* @__PURE__ */ jsx(
@@ -77,7 +86,7 @@ var ProgressCircleRing = React.forwardRef(function ProgressCircleRing2(props, re
             fill: "transparent",
             strokeWidth: thickness,
             stroke: trackColor ?? "currentColor",
-            className: !trackColor ? "opacity-20" : void 0
+            opacity: !trackColor ? 0.2 : void 0
           }
         ),
         /* @__PURE__ */ jsx(
@@ -107,20 +116,30 @@ var ProgressCircleRing = React.forwardRef(function ProgressCircleRing2(props, re
 var ProgressCircleValueText = React.forwardRef(function ProgressCircleValueText2(props, ref) {
   const { className, children, ...rest } = props;
   const { value, size: sizeKey } = React.useContext(Ctx);
-  const { textClass } = SIZE_MAP[sizeKey];
+  const { fontSize } = SIZE_MAP[sizeKey];
   return /* @__PURE__ */ jsx(
-    "div",
+    View,
     {
       ref,
       "aria-live": "polite",
-      className: cn(
-        "absolute inset-0 flex items-center justify-center",
-        "font-medium tracking-tight tabular-nums leading-none",
-        textClass,
-        className
-      ),
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      style: {
+        fontWeight: 500,
+        fontSize,
+        lineHeight: `${fontSize}px`,
+        letterSpacing: fontSize * -0.025,
+        fontVariantNumeric: "tabular-nums"
+      },
+      className,
       ...rest,
-      children: children ?? `${Math.round(value ?? 0)}%`
+      children: ink(children ?? `${Math.round(value ?? 0)}%`)
     }
   );
 });

package/dist/radio.cjs

@@ -64,7 +64,6 @@ var RadioGroupBase = React__namespace.forwardRef(
       gui.RadioGroup,
       {
         ref,
-        unstyled: true,
         name,
         required,
         disabled: disabled || readOnly,

package/dist/radio.js

@@ -42,7 +42,6 @@ var RadioGroupBase = React.forwardRef(
       RadioGroup,
       {
         ref,
-        unstyled: true,
         name,
         required,
         disabled: disabled || readOnly,

package/dist/rating.cjs

@@ -1,9 +1,8 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -27,11 +26,8 @@ function _interopNamespace(e) {
 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 StarFilledIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 20, height: 20, 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 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 20, height: 20, 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;
@@ -51,28 +47,30 @@ var Rating = React__namespace.forwardRef(
     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) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { ref, display: "inline-flex", alignItems: "center", gap: 4, className, ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { display: "inline-flex", alignItems: "center", onMouseLeave: handleMouseLeave, children: Array.from({ length: count }).map((_, index) => {
         const filled = index < highlightedIndex;
         const starIndex = index + 1;
         return /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          gui.View,
           {
-            type: "button",
+            render: /* @__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"
-            ),
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 20,
+            height: 20,
+            cursor: readOnly ? "default" : "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" })
+            children: filled ? /* @__PURE__ */ jsxRuntime.jsx(StarFilledIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(StarOutlineIcon, {})
           },
           index
         );
       }) }),
-      label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: label })
+      label && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, children: label })
     ] });
   }
 );

package/dist/rating.js

@@ -1,15 +1,11 @@
 "use client";
+import { XStack, View, Text } from '@hanzo/gui';
 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 StarFilledIcon = () => /* @__PURE__ */ jsx("svg", { width: 20, height: 20, 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 = () => /* @__PURE__ */ jsx("svg", { width: 20, height: 20, 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;
@@ -29,28 +25,30 @@ var Rating = React.forwardRef(
     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) => {
+    return /* @__PURE__ */ jsxs(XStack, { ref, display: "inline-flex", alignItems: "center", gap: 4, className, ...rest, children: [
+      /* @__PURE__ */ jsx(XStack, { display: "inline-flex", alignItems: "center", onMouseLeave: handleMouseLeave, children: Array.from({ length: count }).map((_, index) => {
         const filled = index < highlightedIndex;
         const starIndex = index + 1;
         return /* @__PURE__ */ jsx(
-          "button",
+          View,
           {
-            type: "button",
+            render: /* @__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"
-            ),
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 20,
+            height: 20,
+            cursor: readOnly ? "default" : "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" })
+            children: filled ? /* @__PURE__ */ jsx(StarFilledIcon, {}) : /* @__PURE__ */ jsx(StarOutlineIcon, {})
           },
           index
         );
       }) }),
-      label && /* @__PURE__ */ jsx("span", { className: "text-sm", children: label })
+      label && /* @__PURE__ */ jsx(Text, { fontSize: 14, children: label })
     ] });
   }
 );

package/dist/slider.cjs

@@ -73,7 +73,6 @@ var Slider = React__namespace.forwardRef(
         gui.Slider,
         {
           ref,
-          unstyled: true,
           position: "relative",
           flexDirection: "row",
           width: "100%",

package/dist/slider.js

@@ -51,7 +51,6 @@ var Slider = React.forwardRef(
         Slider$1,
         {
           ref,
-          unstyled: true,
           position: "relative",
           flexDirection: "row",
           width: "100%",