@danxbot/ui 15.39.0 → 15.40.0

package/dist/types/components/ConcentricRing.d.ts

@@ -0,0 +1,61 @@
+import type { ReactNode, Ref } from "react";
+import { type VariantProps } from "tailwind-variants";
+import { type ProgressTone } from "./Progress";
+declare const ring: import("tailwind-variants").TVReturnType<{
+    size: {
+        /** 28px — sits in a tab or a row beside a 14px label; a two-digit count fits the centre. */
+        sm: "size-7";
+        md: "size-10";
+        lg: "size-16";
+    };
+}, undefined, "relative inline-grid shrink-0 place-items-center", {
+    size: {
+        /** 28px — sits in a tab or a row beside a 14px label; a two-digit count fits the centre. */
+        sm: "size-7";
+        md: "size-10";
+        lg: "size-16";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        /** 28px — sits in a tab or a row beside a 14px label; a two-digit count fits the centre. */
+        sm: "size-7";
+        md: "size-10";
+        lg: "size-16";
+    };
+}, undefined>>;
+/** One ring: how full it is (0-100, clamped) and the tone it is drawn in. */
+export interface ConcentricRingLevel {
+    value: number;
+    tone: ProgressTone;
+}
+export interface ConcentricRingProps extends VariantProps<typeof ring> {
+    /**
+     * REQUIRED, and the whole sentence — both fractions in words, with their
+     * numbers. See the banner: this is what keeps color from being the only
+     * carrier of "which ring is which".
+     */
+    label: string;
+    /** The larger, first-read ring. */
+    outer: ConcentricRingLevel;
+    /** The smaller ring inside it. */
+    inner: ConcentricRingLevel;
+    /** Centred in the disc inside the inner ring, e.g. the total. Hidden from assistive tech. */
+    children?: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * Two nested rings, each filled by its own 0-100 value, around a centre number.
+ *
+ * ```tsx
+ * <ConcentricRing
+ *   label="Goals: 5 of 6 signed off by a person, 1 of 6 verified by an agent"
+ *   outer={{ value: (5 / 6) * 100, tone: "success" }}
+ *   inner={{ value: (1 / 6) * 100, tone: "brand" }}
+ * >
+ *   6
+ * </ConcentricRing>
+ * ```
+ */
+export declare function ConcentricRing({ label, outer, inner, size, children, className, ref }: ConcentricRingProps): import("react").JSX.Element;
+export {};

package/dist/types/components/Progress.d.ts

@@ -473,6 +473,7 @@ export type ProgressRingSegmentsProps = ProgressRingBase & ProgressRingCentre &
     tone?: never;
 };
 export type ProgressRingProps = ProgressRingValueProps | ProgressRingSegmentsProps;
+export declare const RING_TONE: Record<string, string>;
 /** One arc, resolved to the two fractions an SVG dash actually needs. */
 export interface ProgressRingArc {
     label: string;

package/dist/types/index.d.ts

@@ -70,6 +70,7 @@ export { Separator, ScrollArea, Collapsible, CollapsibleRoot, CollapsibleTrigger
 export { PanelGroup, Panel, PanelResizer, type PanelGroupProps, type PanelProps, type PanelResizerProps, type PanelDirection, type PanelNarrowMode, } from "./components/Panel";
 export { Avatar, AvatarGroup, type AvatarProps, type AvatarGroupProps, type AvatarStatus, } from "./components/Avatar";
 export { Progress, Meter, ProgressRing, type ProgressProps, type MeterProps, type ProgressRingProps, type ProgressRingValueProps, type ProgressRingSegmentsProps, type ProgressRingSegment, type ProgressTone, } from "./components/Progress";
+export { ConcentricRing, type ConcentricRingProps, type ConcentricRingLevel, } from "./components/ConcentricRing";
 export { Stat, StatRow, Sparkline, type StatProps, type StatRowProps, type SparklineProps, type StatSize, type StatTrend, type StatSentiment, } from "./components/Stat";
 export { ShareBar, type ShareBarProps, type ShareBarSegment, } from "./components/chart/ShareBar";
 export { BarList, type BarListProps, type BarListItem, } from "./components/chart/BarList";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danxbot/ui",
-  "version": "15.39.0",
+  "version": "15.40.0",
   "type": "module",
   "description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
   "license": "MIT",