@danxbot/ui 15.39.0 → 16.0.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/components/rbac/ProfileForm.d.ts

@@ -11,15 +11,17 @@ export interface ProfileFormSaveInput {
     name: string;
     username?: string;
     email: string;
+    /** Present only when the avatar changed: a URL sets it, `null` removes it. */
+    avatarUrl?: string | null;
 }
 export interface ProfileFormProps {
     account: ProfileFormAccount;
     onSave: (input: ProfileFormSaveInput) => Promise<void>;
+    /** Uploads the file to storage and resolves with its URL. Must NOT change the
+     *  account — the avatar is only persisted by `onSave`. */
     onUploadAvatar: (file: File) => Promise<string>;
-    /** Fired the moment a new avatar finishes uploading (or is removed) — see
-     *  the module header for why the avatar has no separate Save step. */
-    onAvatarChange?: (avatarUrl: string | null) => void;
     saveLabel?: string;
+    discardLabel?: string;
     className?: string;
 }
-export declare function ProfileForm({ account, onSave, onUploadAvatar, onAvatarChange, saveLabel, className, }: ProfileFormProps): import("react").JSX.Element;
+export declare function ProfileForm({ account, onSave, onUploadAvatar, saveLabel, discardLabel, className, }: ProfileFormProps): import("react").JSX.Element;

package/dist/types/components/rbac/ProfilePage.d.ts

@@ -4,8 +4,8 @@ export interface ProfilePageProps {
      *  still locally-editable) `actualUser` display. */
     account?: ProfileFormAccount;
     onSave?: (input: ProfileFormSaveInput) => Promise<void>;
+    /** Uploads the file and resolves with its URL; the avatar is persisted only by `onSave` (DX-4131). */
     onUploadAvatar?: (file: File) => Promise<string>;
-    onAvatarChange?: (avatarUrl: string | null) => void;
     /** DX-4029: `false` omits the page's own title text (the `<h1>` and the
      *  team-name line) so a host layout can own the screen's one `<h1>`. The
      *  read-only avatar (content, not title) stays, and the default `true` is
@@ -13,4 +13,4 @@ export interface ProfilePageProps {
     heading?: boolean;
     className?: string;
 }
-export declare function ProfilePage({ account, onSave, onUploadAvatar, onAvatarChange, heading, className, }: ProfilePageProps): import("react").JSX.Element;
+export declare function ProfilePage({ account, onSave, onUploadAvatar, heading, className, }: ProfilePageProps): import("react").JSX.Element;

package/dist/types/components/rbac/TeamSettingsForm.d.ts

@@ -4,17 +4,19 @@ export interface TeamSettingsFormTeam {
 }
 export interface TeamSettingsFormSaveInput {
     name: string;
+    /** Present only when the logo changed: a URL sets it, `null` removes it. */
+    logoUrl?: string | null;
 }
 export interface TeamSettingsFormProps {
     team: TeamSettingsFormTeam;
     onSave: (input: TeamSettingsFormSaveInput) => Promise<void>;
+    /** Uploads the file to storage and resolves with its URL. Must NOT change the
+     *  team record — the logo is only persisted by `onSave`. */
     onUploadLogo: (file: File) => Promise<string>;
-    /** Fired the moment a new logo finishes uploading (or is removed) — see
-     *  the module header for why the logo has no separate Save step. */
-    onLogoChange?: (logoUrl: string | null) => void;
     /** The viewer lacks `team.update` — every control renders disabled. */
     readOnly?: boolean;
     saveLabel?: string;
+    discardLabel?: string;
     className?: string;
 }
-export declare function TeamSettingsForm({ team, onSave, onUploadLogo, onLogoChange, readOnly, saveLabel, className, }: TeamSettingsFormProps): import("react").JSX.Element;
+export declare function TeamSettingsForm({ team, onSave, onUploadLogo, readOnly, saveLabel, discardLabel, className, }: TeamSettingsFormProps): import("react").JSX.Element;

package/dist/types/components/rbac/stagedForm.d.ts

@@ -0,0 +1,25 @@
+export interface SaveFlow {
+    saving: boolean;
+    /** The last Save resolved and nothing has been edited since. */
+    saved: boolean;
+    error: string | null;
+    /** Run a draft change (an edit, or a Discard) and retire the last outcome. */
+    edit: (change: () => void) => void;
+    /** Run the consumer's `onSave`; a rejection's message (or `failureMessage`) becomes `error`. */
+    save: (run: () => Promise<void>) => Promise<void>;
+}
+export declare function useSaveFlow(failureMessage: string): SaveFlow;
+/** The line under a staged image, naming what Save will do with it. */
+export declare function stagedImageNote(noun: string, saveLabel: string, removed: boolean): string;
+export interface StagedFormActionsProps {
+    onSave: () => void;
+    onDiscard: () => void;
+    /** The draft is valid, changed, and nothing is in flight. */
+    canSave: boolean;
+    /** The draft differs from what is saved in ANY way, including whitespace Save would trim away. */
+    canDiscard: boolean;
+    saving: boolean;
+    saveLabel: string;
+    discardLabel: string;
+}
+export declare function StagedFormActions({ onSave, onDiscard, canSave, canDiscard, saving, saveLabel, discardLabel, }: StagedFormActionsProps): import("react").JSX.Element;

package/dist/types/components/rbac/useStagedImage.d.ts

@@ -0,0 +1,15 @@
+export interface StagedImage {
+    /** What to show: the staged URL (or `null` for a staged removal), else the saved one. */
+    value: string | null;
+    /** The staged value differs from the saved one — the form must send it on Save. */
+    dirty: boolean;
+    /** A pick is mid-upload. */
+    uploading: boolean;
+    /** Stage a URL, or `null` to stage a removal. */
+    stage: (url: string | null) => void;
+    /** Drop the staged value and go back to the saved one. */
+    discard: () => void;
+    /** Pass to `ImageUploadField.onUpload`. */
+    upload: (file: File) => Promise<string>;
+}
+export declare function useStagedImage(saved: string | null | undefined, onUpload: (file: File) => Promise<string>): StagedImage;

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": "16.0.0",
   "type": "module",
   "description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
   "license": "MIT",