@luxfi/ui 6.1.2 → 7.0.0

package/dist/popover.js

@@ -0,0 +1,294 @@
+"use client";
+import * as RadixPopover from '@radix-ui/react-popover';
+import * as React2 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/popover.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 = React2.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"
+            }
+          )
+        }
+      )
+    }
+  );
+});
+function parsePlacement(placement) {
+  if (!placement) {
+    return { side: "bottom", align: "start" };
+  }
+  const parts = placement.split("-");
+  const side = parts[0] ?? "bottom";
+  const alignPart = parts[1];
+  let align = "center";
+  if (alignPart === "start") {
+    align = "start";
+  } else if (alignPart === "end") {
+    align = "end";
+  }
+  return { side, align };
+}
+var PositioningContext = React2.createContext({
+  side: "bottom",
+  align: "start",
+  sideOffset: 4,
+  alignOffset: 0,
+  collisionPadding: 4,
+  autoFocus: false,
+  closeOnInteractOutside: true
+});
+var PopoverRoot = (props) => {
+  const {
+    children,
+    open,
+    defaultOpen,
+    onOpenChange,
+    positioning,
+    autoFocus = false,
+    closeOnInteractOutside = true,
+    modal = false,
+    // lazyMount and unmountOnExit are handled via forceMount on Portal/Content
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    lazyMount: _lazyMount,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    unmountOnExit: _unmountOnExit
+  } = props;
+  const mergedPositioning = {
+    placement: "bottom-start",
+    overflowPadding: 4,
+    ...positioning,
+    offset: {
+      mainAxis: 4,
+      ...positioning?.offset
+    }
+  };
+  const { side, align } = parsePlacement(mergedPositioning.placement);
+  const positioningValue = React2.useMemo(() => ({
+    side,
+    align,
+    sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
+    alignOffset: mergedPositioning.offset?.crossAxis ?? 0,
+    collisionPadding: mergedPositioning.overflowPadding ?? 4,
+    autoFocus,
+    closeOnInteractOutside
+  }), [
+    side,
+    align,
+    mergedPositioning.offset?.mainAxis,
+    mergedPositioning.offset?.crossAxis,
+    mergedPositioning.overflowPadding,
+    autoFocus,
+    closeOnInteractOutside
+  ]);
+  const handleOpenChange = React2.useCallback((isOpen) => {
+    onOpenChange?.({ open: isOpen });
+  }, [onOpenChange]);
+  return /* @__PURE__ */ jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsx(
+    RadixPopover.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      modal,
+      children
+    }
+  ) });
+};
+var PopoverTrigger = React2.forwardRef(function PopoverTrigger2(props, ref) {
+  const { asChild = true, ...rest } = props;
+  return /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild, ref, ...rest });
+});
+var PopoverContent = React2.forwardRef(function PopoverContent2(props, ref) {
+  const { portalled = true, portalRef, className, w, minW, maxW, paddingTop, style: styleProp, ...rest } = props;
+  const resolvedW = typeof w === "object" ? w.base ?? w.lg : w;
+  const contentStyle = {
+    ...styleProp,
+    ...resolvedW ? { width: resolvedW } : {},
+    ...minW ? { minWidth: minW } : {},
+    ...maxW ? { maxWidth: maxW } : {},
+    ...paddingTop !== void 0 ? { paddingTop: typeof paddingTop === "number" ? `${paddingTop * 4}px` : paddingTop } : {}
+  };
+  const positioning = React2.useContext(PositioningContext);
+  const preventFocus = React2.useCallback((e) => e.preventDefault(), []);
+  const preventInteract = React2.useCallback((e) => e.preventDefault(), []);
+  const content = /* @__PURE__ */ jsx(
+    RadixPopover.Content,
+    {
+      ref,
+      side: positioning.side,
+      align: positioning.align,
+      sideOffset: positioning.sideOffset,
+      alignOffset: positioning.alignOffset,
+      collisionPadding: positioning.collisionPadding,
+      onOpenAutoFocus: positioning.autoFocus ? void 0 : preventFocus,
+      onInteractOutside: positioning.closeOnInteractOutside ? void 0 : preventInteract,
+      className: cn(
+        "z-50 rounded-lg border border-[var(--color-popover-border,var(--color-border-divider))]",
+        "bg-[var(--color-popover-bg,var(--color-dialog-bg))]",
+        "shadow-[var(--shadow-popover,var(--shadow-lg))]",
+        "outline-none",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      ),
+      style: Object.keys(contentStyle).length > 0 ? contentStyle : void 0,
+      ...rest
+    }
+  );
+  if (!portalled) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx(RadixPopover.Portal, { container: portalRef?.current ?? void 0, children: content });
+});
+var PopoverArrow = React2.forwardRef(function PopoverArrow2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    RadixPopover.Arrow,
+    {
+      ref,
+      className: cn("fill-[var(--color-popover-bg,var(--color-dialog-bg))]", className),
+      ...rest
+    }
+  );
+});
+var PopoverCloseTrigger = React2.forwardRef(function PopoverCloseTrigger2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    RadixPopover.Close,
+    {
+      className: cn("absolute top-1 right-1", className),
+      ...rest,
+      asChild: true,
+      ref,
+      children: /* @__PURE__ */ jsx(CloseButton, {})
+    }
+  );
+});
+var PopoverCloseTriggerWrapper = React2.forwardRef(function PopoverCloseTriggerWrapper2(props, ref) {
+  const { disabled, children, ...rest } = props;
+  if (disabled) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx(RadixPopover.Close, { ref, ...rest, asChild: true, children });
+});
+var PopoverBody = React2.forwardRef(function PopoverBody2(props, ref) {
+  const {
+    className,
+    style: styleProp,
+    display: _display,
+    flexDir: _flexDir,
+    rowGap: _rowGap,
+    px: _px,
+    py: _py,
+    textStyle: _textStyle,
+    alignItems: _alignItems,
+    ...rest
+  } = props;
+  const bodyStyle = {
+    ...styleProp,
+    ..._display ? { display: _display } : {},
+    ..._flexDir ? { flexDirection: _flexDir } : {},
+    ..._rowGap !== void 0 ? { rowGap: typeof _rowGap === "number" ? `${_rowGap * 4}px` : _rowGap } : {},
+    ..._px !== void 0 ? {
+      paddingLeft: typeof _px === "number" ? `${_px * 4}px` : _px,
+      paddingRight: typeof _px === "number" ? `${_px * 4}px` : _px
+    } : {},
+    ..._py !== void 0 ? {
+      paddingTop: typeof _py === "number" ? `${_py * 4}px` : _py,
+      paddingBottom: typeof _py === "number" ? `${_py * 4}px` : _py
+    } : {},
+    ..._alignItems ? { alignItems: _alignItems } : {}
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("p-4", className),
+      style: Object.keys(bodyStyle).length > 0 ? bodyStyle : void 0,
+      ...rest
+    }
+  );
+});
+var PopoverHeader = React2.forwardRef(function PopoverHeader2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("px-4 pt-4 pb-0 font-semibold", className),
+      ...rest
+    }
+  );
+});
+var PopoverFooter = React2.forwardRef(function PopoverFooter2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("px-4 pb-4 pt-0", className),
+      ...rest
+    }
+  );
+});
+var PopoverTitle = React2.forwardRef(function PopoverTitle2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      className: cn("text-base font-semibold", className),
+      ...rest
+    }
+  );
+});
+var PopoverDescription = React2.forwardRef(function PopoverDescription2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cn("text-sm", className),
+      ...rest
+    }
+  );
+});
+
+export { PopoverArrow, PopoverBody, PopoverCloseTrigger, PopoverCloseTriggerWrapper, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger };

package/dist/progress-circle.cjs

@@ -0,0 +1,152 @@
+"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/progress-circle.tsx
+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" }
+};
+var Ctx = React__namespace.createContext({
+  value: 0,
+  size: "md",
+  colorPalette: "blue"
+});
+var ProgressCircleRoot = React__namespace.forwardRef(function ProgressCircleRoot2(props, ref) {
+  const {
+    value = 0,
+    size = "md",
+    colorPalette = "blue",
+    className,
+    children,
+    ...rest
+  } = props;
+  const ctx = React__namespace.useMemo(
+    () => ({ value: value ?? null, size, colorPalette }),
+    [value, size, colorPalette]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Ctx.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "progressbar",
+      "aria-valuenow": value ?? void 0,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: cn("relative inline-flex text-sm", className),
+      ...rest,
+      children
+    }
+  ) });
+});
+var ProgressCircleRing = React__namespace.forwardRef(function ProgressCircleRing2(props, ref) {
+  const { trackColor, cap, color, className, ...rest } = props;
+  const { value, size: sizeKey } = React__namespace.useContext(Ctx);
+  const { size, thickness } = SIZE_MAP[sizeKey];
+  const radius = size / 2 - thickness / 2;
+  const circumference = 2 * Math.PI * radius;
+  const percent = value ?? 0;
+  const offset = circumference * ((100 - percent) / 100);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ref,
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      className: cn(
+        value === null && "animate-spin",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r: radius,
+            fill: "transparent",
+            strokeWidth: thickness,
+            stroke: trackColor ?? "currentColor",
+            className: !trackColor ? "opacity-20" : void 0
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r: radius,
+            fill: "transparent",
+            strokeWidth: thickness,
+            stroke: color ?? "currentColor",
+            strokeLinecap: cap,
+            strokeDasharray: circumference,
+            strokeDashoffset: offset,
+            style: {
+              transformOrigin: "center",
+              transform: "rotate(-90deg)",
+              transition: "stroke-dashoffset 0.6s, stroke-dasharray 0.6s",
+              opacity: percent === 0 ? 0 : void 0
+            }
+          }
+        )
+      ]
+    }
+  );
+});
+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];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "aria-live": "polite",
+      className: cn(
+        "absolute inset-0 flex items-center justify-center",
+        "font-medium tracking-tight tabular-nums leading-none",
+        textClass,
+        className
+      ),
+      ...rest,
+      children: children ?? `${Math.round(value ?? 0)}%`
+    }
+  );
+});
+
+exports.ProgressCircleRing = ProgressCircleRing;
+exports.ProgressCircleRoot = ProgressCircleRoot;
+exports.ProgressCircleValueText = ProgressCircleValueText;

package/dist/progress-circle.d.cts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+declare const SIZE_MAP: {
+    readonly xs: {
+        readonly size: 24;
+        readonly thickness: 4;
+        readonly textClass: "text-[10px]";
+    };
+    readonly sm: {
+        readonly size: 32;
+        readonly thickness: 5;
+        readonly textClass: "text-[10px]";
+    };
+    readonly md: {
+        readonly size: 40;
+        readonly thickness: 6;
+        readonly textClass: "text-xs";
+    };
+    readonly lg: {
+        readonly size: 48;
+        readonly thickness: 7;
+        readonly textClass: "text-sm";
+    };
+    readonly xl: {
+        readonly size: 64;
+        readonly thickness: 8;
+        readonly textClass: "text-sm";
+    };
+};
+type Size = keyof typeof SIZE_MAP;
+interface ProgressCircleRootProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
+    readonly value?: number | null;
+    readonly size?: Size;
+    readonly colorPalette?: string;
+}
+declare const ProgressCircleRoot: React.ForwardRefExoticComponent<ProgressCircleRootProps & React.RefAttributes<HTMLDivElement>>;
+interface ProgressCircleRingProps extends Omit<React.SVGAttributes<SVGSVGElement>, 'color'> {
+    readonly trackColor?: string;
+    readonly cap?: React.SVGAttributes<SVGCircleElement>['strokeLinecap'];
+    readonly color?: string;
+}
+declare const ProgressCircleRing: React.ForwardRefExoticComponent<ProgressCircleRingProps & React.RefAttributes<SVGSVGElement>>;
+interface ProgressCircleValueTextProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ProgressCircleValueText: React.ForwardRefExoticComponent<ProgressCircleValueTextProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ProgressCircleRing, type ProgressCircleRingProps, ProgressCircleRoot, type ProgressCircleRootProps, ProgressCircleValueText, type ProgressCircleValueTextProps };

package/dist/progress-circle.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+declare const SIZE_MAP: {
+    readonly xs: {
+        readonly size: 24;
+        readonly thickness: 4;
+        readonly textClass: "text-[10px]";
+    };
+    readonly sm: {
+        readonly size: 32;
+        readonly thickness: 5;
+        readonly textClass: "text-[10px]";
+    };
+    readonly md: {
+        readonly size: 40;
+        readonly thickness: 6;
+        readonly textClass: "text-xs";
+    };
+    readonly lg: {
+        readonly size: 48;
+        readonly thickness: 7;
+        readonly textClass: "text-sm";
+    };
+    readonly xl: {
+        readonly size: 64;
+        readonly thickness: 8;
+        readonly textClass: "text-sm";
+    };
+};
+type Size = keyof typeof SIZE_MAP;
+interface ProgressCircleRootProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
+    readonly value?: number | null;
+    readonly size?: Size;
+    readonly colorPalette?: string;
+}
+declare const ProgressCircleRoot: React.ForwardRefExoticComponent<ProgressCircleRootProps & React.RefAttributes<HTMLDivElement>>;
+interface ProgressCircleRingProps extends Omit<React.SVGAttributes<SVGSVGElement>, 'color'> {
+    readonly trackColor?: string;
+    readonly cap?: React.SVGAttributes<SVGCircleElement>['strokeLinecap'];
+    readonly color?: string;
+}
+declare const ProgressCircleRing: React.ForwardRefExoticComponent<ProgressCircleRingProps & React.RefAttributes<SVGSVGElement>>;
+interface ProgressCircleValueTextProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ProgressCircleValueText: React.ForwardRefExoticComponent<ProgressCircleValueTextProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ProgressCircleRing, type ProgressCircleRingProps, ProgressCircleRoot, type ProgressCircleRootProps, ProgressCircleValueText, type ProgressCircleValueTextProps };

package/dist/progress-circle.js

@@ -0,0 +1,128 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/progress-circle.tsx
+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" }
+};
+var Ctx = React.createContext({
+  value: 0,
+  size: "md",
+  colorPalette: "blue"
+});
+var ProgressCircleRoot = React.forwardRef(function ProgressCircleRoot2(props, ref) {
+  const {
+    value = 0,
+    size = "md",
+    colorPalette = "blue",
+    className,
+    children,
+    ...rest
+  } = props;
+  const ctx = React.useMemo(
+    () => ({ value: value ?? null, size, colorPalette }),
+    [value, size, colorPalette]
+  );
+  return /* @__PURE__ */ jsx(Ctx.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "progressbar",
+      "aria-valuenow": value ?? void 0,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      className: cn("relative inline-flex text-sm", className),
+      ...rest,
+      children
+    }
+  ) });
+});
+var ProgressCircleRing = React.forwardRef(function ProgressCircleRing2(props, ref) {
+  const { trackColor, cap, color, className, ...rest } = props;
+  const { value, size: sizeKey } = React.useContext(Ctx);
+  const { size, thickness } = SIZE_MAP[sizeKey];
+  const radius = size / 2 - thickness / 2;
+  const circumference = 2 * Math.PI * radius;
+  const percent = value ?? 0;
+  const offset = circumference * ((100 - percent) / 100);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      className: cn(
+        value === null && "animate-spin",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r: radius,
+            fill: "transparent",
+            strokeWidth: thickness,
+            stroke: trackColor ?? "currentColor",
+            className: !trackColor ? "opacity-20" : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: size / 2,
+            cy: size / 2,
+            r: radius,
+            fill: "transparent",
+            strokeWidth: thickness,
+            stroke: color ?? "currentColor",
+            strokeLinecap: cap,
+            strokeDasharray: circumference,
+            strokeDashoffset: offset,
+            style: {
+              transformOrigin: "center",
+              transform: "rotate(-90deg)",
+              transition: "stroke-dashoffset 0.6s, stroke-dasharray 0.6s",
+              opacity: percent === 0 ? 0 : void 0
+            }
+          }
+        )
+      ]
+    }
+  );
+});
+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];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "aria-live": "polite",
+      className: cn(
+        "absolute inset-0 flex items-center justify-center",
+        "font-medium tracking-tight tabular-nums leading-none",
+        textClass,
+        className
+      ),
+      ...rest,
+      children: children ?? `${Math.round(value ?? 0)}%`
+    }
+  );
+});
+
+export { ProgressCircleRing, ProgressCircleRoot, ProgressCircleValueText };