@luxfi/ui 7.4.11 → 7.4.13

package/dist/pin-input.js

@@ -1,27 +1,29 @@
 "use client";
+import { XStack, Input } 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/pin-input.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var INPUT_BASE = [
-  "w-10 h-10",
-  "text-center text-sm font-medium",
-  "border-2 rounded-md",
-  "outline-none appearance-none",
-  "bg-[var(--color-input-bg)] text-[var(--color-input-fg)]",
-  "border-[var(--color-input-border)]",
-  "placeholder:text-[var(--color-input-placeholder)]",
-  "hover:border-[var(--color-input-border-hover)]",
-  "focus:border-[var(--color-input-border-focus)] focus:shadow-md",
-  "disabled:opacity-40"
-].join(" ");
-var INPUT_FILLED = "border-[var(--color-input-border)]";
-var INPUT_INVALID = "border-[var(--color-border-error)] hover:border-[var(--color-border-error)]";
+var BOX = {
+  width: 40,
+  height: 40,
+  textAlign: "center",
+  fontSize: 14,
+  fontWeight: 500,
+  borderRadius: 6,
+  borderWidth: 2,
+  borderStyle: "solid",
+  outlineWidth: 0,
+  backgroundColor: "var(--color-input-bg)",
+  color: "var(--color-input-fg)",
+  borderColor: "var(--color-input-border)",
+  hoverStyle: { borderColor: "var(--color-input-border-hover)" },
+  focusStyle: {
+    borderColor: "var(--color-input-border-focus)",
+    boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+  },
+  disabledStyle: { opacity: 0.4 }
+};
 var PinInput = React.forwardRef(
   function PinInput2(props, ref) {
     const {
@@ -113,8 +115,8 @@ var PinInput = React.forwardRef(
     const onKeyDownAtIndex = React.useCallback((index) => (e) => {
       handleKeyDown(index, e);
     }, [handleKeyDown]);
-    const bgStyle = bgColor ? { backgroundColor: `var(--color-${bgColor.replace(/\./g, "-")})` } : void 0;
-    return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("inline-flex items-center", attached ? "gap-0" : "gap-2", className), children: [
+    const boxBackground = bgColor ? `var(--color-${bgColor.replace(/\./g, "-")})` : BOX.backgroundColor;
+    return /* @__PURE__ */ jsxs(XStack, { ref: rootRef, alignItems: "center", gap: attached ? 0 : 8, className, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -126,9 +128,10 @@ var PinInput = React.forwardRef(
         }
       ),
       Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
-        "input",
+        Input,
         {
           ref: setInputRef(index),
+          unstyled: true,
           type: "text",
           inputMode: "numeric",
           autoComplete: otp ? "one-time-code" : "off",
@@ -137,14 +140,12 @@ var PinInput = React.forwardRef(
           placeholder,
           disabled,
           "aria-invalid": invalid || void 0,
+          "data-invalid": invalid || void 0,
           value: values[index] || "",
-          className: cn(
-            INPUT_BASE,
-            values[index] && INPUT_FILLED,
-            invalid && INPUT_INVALID,
-            attached && index > 0 && "-ml-0.5"
-          ),
-          style: bgStyle,
+          className: "lux-control",
+          ...BOX,
+          backgroundColor: boxBackground,
+          marginLeft: attached && index > 0 ? -2 : void 0,
           onInput: onInputAtIndex(index),
           onKeyDown: onKeyDownAtIndex(index),
           onPaste: handlePaste,

package/dist/pnl-diagram.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) {
@@ -26,9 +25,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 function calcLegPnl(leg, price, multiplier) {
   const premium = leg.premium ?? 0;
   let intrinsic;
@@ -160,19 +156,21 @@ var PnlDiagram = React__namespace.forwardRef(
       chartH
     );
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      gui.View,
       {
         ref,
-        className: cn("w-full", className),
+        unstyled: true,
+        width: "100%",
+        className,
         ...rest,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "w-full h-full min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(gui.View, { unstyled: true, ref: containerRef, width: "100%", height: "100%", minHeight: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(
             "svg",
             {
               width,
               height,
               viewBox: `0 0 ${width} ${height}`,
-              className: "select-none",
+              style: { userSelect: "none" },
               onMouseMove: handleMouseMove,
               onMouseLeave: handleMouseLeave,
               children: [
@@ -411,16 +409,18 @@ var PnlDiagram = React__namespace.forwardRef(
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-4 px-2 pt-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-0.5 w-4 bg-zinc-200 rounded" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-zinc-400", children: "Combined" })
+          /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { flexWrap: "wrap", alignItems: "center", gap: 16, paddingHorizontal: 8, paddingTop: 4, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", gap: 6, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(gui.View, { height: 2, width: 16, borderRadius: 4, backgroundColor: "var(--color-gray-200)" }),
+              /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 10, color: "var(--color-text-secondary)", children: "Combined" })
             ] }),
-            legs.map((leg, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            legs.map((leg, i) => /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", gap: 6, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+                gui.View,
                 {
-                  className: "h-0.5 w-4 rounded",
+                  height: 2,
+                  width: 16,
+                  borderRadius: 4,
                   style: {
                     backgroundColor: LEG_COLORS[i % LEG_COLORS.length],
                     opacity: 0.6,
@@ -428,7 +428,7 @@ var PnlDiagram = React__namespace.forwardRef(
                   }
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(gui.Text, { fontSize: 10, color: "var(--color-text-secondary)", children: [
                 leg.action === "buy" ? "B" : "S",
                 " ",
                 leg.quantity,
@@ -438,9 +438,9 @@ var PnlDiagram = React__namespace.forwardRef(
                 leg.type === "call" ? "C" : "P"
               ] })
             ] }, i)),
-            breakevens.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 rounded-full", style: { background: BREAKEVEN_COLOR } }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+            breakevens.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", gap: 6, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(gui.View, { width: 6, height: 6, borderRadius: 9999, style: { background: BREAKEVEN_COLOR } }),
+              /* @__PURE__ */ jsxRuntime.jsxs(gui.Text, { fontSize: 10, color: "var(--color-text-secondary)", children: [
                 "BE: ",
                 breakevens.map((b) => b.toFixed(1)).join(", ")
               ] })

package/dist/pnl-diagram.js

@@ -1,12 +1,8 @@
 "use client";
+import { View, XStack, Text } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 function calcLegPnl(leg, price, multiplier) {
   const premium = leg.premium ?? 0;
   let intrinsic;
@@ -138,19 +134,21 @@ var PnlDiagram = React.forwardRef(
       chartH
     );
     return /* @__PURE__ */ jsxs(
-      "div",
+      View,
       {
         ref,
-        className: cn("w-full", className),
+        unstyled: true,
+        width: "100%",
+        className,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx("div", { ref: containerRef, className: "w-full h-full min-h-[200px]", children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(View, { unstyled: true, ref: containerRef, width: "100%", height: "100%", minHeight: 200, children: /* @__PURE__ */ jsxs(
             "svg",
             {
               width,
               height,
               viewBox: `0 0 ${width} ${height}`,
-              className: "select-none",
+              style: { userSelect: "none" },
               onMouseMove: handleMouseMove,
               onMouseLeave: handleMouseLeave,
               children: [
@@ -389,16 +387,18 @@ var PnlDiagram = React.forwardRef(
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4 px-2 pt-1", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-0.5 w-4 bg-zinc-200 rounded" }),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-zinc-400", children: "Combined" })
+          /* @__PURE__ */ jsxs(XStack, { flexWrap: "wrap", alignItems: "center", gap: 16, paddingHorizontal: 8, paddingTop: 4, children: [
+            /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 6, children: [
+              /* @__PURE__ */ jsx(View, { height: 2, width: 16, borderRadius: 4, backgroundColor: "var(--color-gray-200)" }),
+              /* @__PURE__ */ jsx(Text, { fontSize: 10, color: "var(--color-text-secondary)", children: "Combined" })
             ] }),
-            legs.map((leg, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            legs.map((leg, i) => /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 6, children: [
               /* @__PURE__ */ jsx(
-                "div",
+                View,
                 {
-                  className: "h-0.5 w-4 rounded",
+                  height: 2,
+                  width: 16,
+                  borderRadius: 4,
                   style: {
                     backgroundColor: LEG_COLORS[i % LEG_COLORS.length],
                     opacity: 0.6,
@@ -406,7 +406,7 @@ var PnlDiagram = React.forwardRef(
                   }
                 }
               ),
-              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+              /* @__PURE__ */ jsxs(Text, { fontSize: 10, color: "var(--color-text-secondary)", children: [
                 leg.action === "buy" ? "B" : "S",
                 " ",
                 leg.quantity,
@@ -416,9 +416,9 @@ var PnlDiagram = React.forwardRef(
                 leg.type === "call" ? "C" : "P"
               ] })
             ] }, i)),
-            breakevens.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 rounded-full", style: { background: BREAKEVEN_COLOR } }),
-              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+            breakevens.length > 0 && /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 6, children: [
+              /* @__PURE__ */ jsx(View, { width: 6, height: 6, borderRadius: 9999, style: { background: BREAKEVEN_COLOR } }),
+              /* @__PURE__ */ jsxs(Text, { fontSize: 10, color: "var(--color-text-secondary)", children: [
                 "BE: ",
                 breakevens.map((b) => b.toFixed(1)).join(", ")
               ] })

package/dist/popover.cjs

@@ -61,23 +61,19 @@ var CloseButtonFrame = gui.styled(gui.View, {
     }
   }
 });
-var CLOSE_BUTTON_CLASSES = [
-  "text-[var(--closeButton-fg,currentColor)]",
-  "hover:text-[var(--hover-color,currentColor)]",
-  "disabled:opacity-40"
-].join(" ");
 var CloseButton = React2__namespace.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     CloseButtonFrame,
     {
       ref,
-      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      className,
       ...rest,
       children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
         {
-          className: "size-5",
+          width: 20,
+          height: 20,
           viewBox: "0 0 20 20",
           fill: "none",
           "aria-hidden": "true",

package/dist/popover.js

@@ -39,23 +39,19 @@ var CloseButtonFrame = styled(View, {
     }
   }
 });
-var CLOSE_BUTTON_CLASSES = [
-  "text-[var(--closeButton-fg,currentColor)]",
-  "hover:text-[var(--hover-color,currentColor)]",
-  "disabled:opacity-40"
-].join(" ");
 var CloseButton = React2.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
     CloseButtonFrame,
     {
       ref,
-      className: [CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(" "),
+      className,
       ...rest,
       children: children ?? /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "size-5",
+          width: 20,
+          height: 20,
           viewBox: "0 0 20 20",
           fill: "none",
           "aria-hidden": "true",

package/dist/progress-circle.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -27,15 +28,23 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/progress-circle.tsx
+var ink = (children, Wrap = gui.Text, props = {}) => {
+  let hasText = false;
+  React.Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return React.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React.createElement(Wrap, props, child) : child);
+};
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.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__namespace.createContext({
   value: 0,
@@ -56,16 +65,18 @@ var ProgressCircleRoot = React__namespace.forwardRef(function ProgressCircleRoot
     [value, size, colorPalette]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(Ctx.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    gui.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)
     }
   ) });
 });
@@ -84,10 +95,7 @@ var ProgressCircleRing = React__namespace.forwardRef(function ProgressCircleRing
       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__ */ jsxRuntime.jsx(
@@ -99,7 +107,7 @@ var ProgressCircleRing = React__namespace.forwardRef(function ProgressCircleRing
             fill: "transparent",
             strokeWidth: thickness,
             stroke: trackColor ?? "currentColor",
-            className: !trackColor ? "opacity-20" : void 0
+            opacity: !trackColor ? 0.2 : void 0
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -129,20 +137,30 @@ var ProgressCircleRing = React__namespace.forwardRef(function ProgressCircleRing
 var ProgressCircleValueText = React__namespace.forwardRef(function ProgressCircleValueText2(props, ref) {
   const { className, children, ...rest } = props;
   const { value, size: sizeKey } = React__namespace.useContext(Ctx);
-  const { textClass } = SIZE_MAP[sizeKey];
+  const { fontSize } = SIZE_MAP[sizeKey];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    gui.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/progress-circle.d.cts

@@ -4,27 +4,27 @@ declare const SIZE_MAP: {
     readonly xs: {
         readonly size: 24;
         readonly thickness: 4;
-        readonly textClass: "text-[10px]";
+        readonly fontSize: 10;
     };
     readonly sm: {
         readonly size: 32;
         readonly thickness: 5;
-        readonly textClass: "text-[10px]";
+        readonly fontSize: 10;
     };
     readonly md: {
         readonly size: 40;
         readonly thickness: 6;
-        readonly textClass: "text-xs";
+        readonly fontSize: 12;
     };
     readonly lg: {
         readonly size: 48;
         readonly thickness: 7;
-        readonly textClass: "text-sm";
+        readonly fontSize: 14;
     };
     readonly xl: {
         readonly size: 64;
         readonly thickness: 8;
-        readonly textClass: "text-sm";
+        readonly fontSize: 14;
     };
 };
 type Size = keyof typeof SIZE_MAP;

package/dist/progress-circle.d.ts

@@ -4,27 +4,27 @@ declare const SIZE_MAP: {
     readonly xs: {
         readonly size: 24;
         readonly thickness: 4;
-        readonly textClass: "text-[10px]";
+        readonly fontSize: 10;
     };
     readonly sm: {
         readonly size: 32;
         readonly thickness: 5;
-        readonly textClass: "text-[10px]";
+        readonly fontSize: 10;
     };
     readonly md: {
         readonly size: 40;
         readonly thickness: 6;
-        readonly textClass: "text-xs";
+        readonly fontSize: 12;
     };
     readonly lg: {
         readonly size: 48;
         readonly thickness: 7;
-        readonly textClass: "text-sm";
+        readonly fontSize: 14;
     };
     readonly xl: {
         readonly size: 64;
         readonly thickness: 8;
-        readonly textClass: "text-sm";
+        readonly fontSize: 14;
     };
 };
 type Size = keyof typeof SIZE_MAP;

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)}%`)
     }
   );
 });