@schemavaults/ui 0.89.0 → 0.91.0

package/dist/components/ui/device-frame/device-frame.d.ts

@@ -0,0 +1,72 @@
+import { type VariantProps } from "class-variance-authority";
+import type { HTMLAttributes, ReactElement, ReactNode, Ref } from "react";
+export declare const deviceFrameVariantIds: ["phone-modern", "phone-classic", "tablet", "laptop"];
+export type DeviceFrameVariantId = (typeof deviceFrameVariantIds)[number];
+export declare const deviceFrameSizeIds: ["sm", "md", "lg"];
+export type DeviceFrameSizeId = (typeof deviceFrameSizeIds)[number];
+export declare const deviceFrameOrientationIds: ["portrait", "landscape"];
+export type DeviceFrameOrientationId = (typeof deviceFrameOrientationIds)[number];
+export declare const deviceFrameColorIds: ["graphite", "silver", "gold", "midnight"];
+export type DeviceFrameColorId = (typeof deviceFrameColorIds)[number];
+declare const deviceFrameVariants: (props?: ({
+    variant?: "phone-modern" | "phone-classic" | "tablet" | "laptop" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface DeviceFrameProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof deviceFrameVariants> {
+    /** Device silhouette. Defaults to `phone-modern`. */
+    variant?: DeviceFrameVariantId;
+    /** Portrait (default) or landscape. Ignored for `laptop` (always landscape). */
+    orientation?: DeviceFrameOrientationId;
+    /** Preset frame size. Defaults to `md`. */
+    size?: DeviceFrameSizeId;
+    /** Bezel color. Defaults to `graphite`. */
+    color?: DeviceFrameColorId;
+    /**
+     * When true, the phone-modern variant renders a Dynamic Island. When false,
+     * it renders a traditional notch. Ignored for other variants.
+     */
+    dynamicIsland?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function DeviceFrame({ className, variant, orientation, size, color, dynamicIsland, children, ref, ...props }: DeviceFrameProps): ReactElement;
+declare namespace DeviceFrame {
+    var displayName: string;
+}
+declare const deviceFrameScreenVariants: (props?: ({
+    variant?: "phone-modern" | "phone-classic" | "tablet" | "laptop" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface DeviceFrameScreenProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof deviceFrameScreenVariants> {
+    variant?: DeviceFrameVariantId;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function DeviceFrameScreen({ className, variant, ref, ...props }: DeviceFrameScreenProps): ReactElement;
+declare namespace DeviceFrameScreen {
+    var displayName: string;
+}
+export interface DeviceFrameStatusBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Displayed time. Defaults to `9:41` (Apple's canonical marketing time). */
+    time?: string;
+    /** Trailing icons cluster. Defaults to signal + wifi + battery. */
+    trailing?: ReactNode;
+    /** Skip the default padding accommodating a notch/island cutout. */
+    compact?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function DeviceFrameStatusBar({ className, time, trailing, compact, ref, ...props }: DeviceFrameStatusBarProps): ReactElement;
+declare namespace DeviceFrameStatusBar {
+    var displayName: string;
+}
+export interface DeviceFrameHomeIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+declare function DeviceFrameHomeIndicator({ className, ref, ...props }: DeviceFrameHomeIndicatorProps): ReactElement;
+declare namespace DeviceFrameHomeIndicator {
+    var displayName: string;
+}
+export interface DeviceFrameContentProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+declare function DeviceFrameContent({ className, ref, ...props }: DeviceFrameContentProps): ReactElement;
+declare namespace DeviceFrameContent {
+    var displayName: string;
+}
+export { DeviceFrame, DeviceFrameScreen, DeviceFrameStatusBar, DeviceFrameHomeIndicator, DeviceFrameContent, deviceFrameVariants, deviceFrameScreenVariants, };

package/dist/components/ui/device-frame/device-frame.js

@@ -0,0 +1,178 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils";
+export const deviceFrameVariantIds = [
+    "phone-modern",
+    "phone-classic",
+    "tablet",
+    "laptop",
+];
+export const deviceFrameSizeIds = [
+    "sm",
+    "md",
+    "lg",
+];
+export const deviceFrameOrientationIds = [
+    "portrait",
+    "landscape",
+];
+export const deviceFrameColorIds = [
+    "graphite",
+    "silver",
+    "gold",
+    "midnight",
+];
+const deviceBezelPalette = {
+    graphite: {
+        bezel: "bg-neutral-900 border-neutral-800 dark:bg-neutral-950 dark:border-neutral-900",
+        accent: "bg-neutral-800 dark:bg-neutral-900",
+    },
+    silver: {
+        bezel: "bg-neutral-200 border-neutral-300 dark:bg-neutral-300 dark:border-neutral-400",
+        accent: "bg-neutral-300 dark:bg-neutral-400",
+    },
+    gold: {
+        bezel: "bg-amber-100 border-amber-200 dark:bg-amber-200 dark:border-amber-300",
+        accent: "bg-amber-200 dark:bg-amber-300",
+    },
+    midnight: {
+        bezel: "bg-slate-950 border-slate-900 dark:bg-black dark:border-slate-950",
+        accent: "bg-slate-900 dark:bg-slate-950",
+    },
+};
+const deviceFrameVariants = cva("relative isolate box-content shrink-0 overflow-hidden border shadow-2xl", {
+    variants: {
+        variant: {
+            "phone-modern": "rounded-[2.75rem] p-[0.55rem]",
+            "phone-classic": "rounded-[2rem] px-[0.5rem] py-[3rem]",
+            tablet: "rounded-[1.75rem] p-[0.85rem]",
+            laptop: "rounded-t-xl rounded-b-none p-[0.6rem]",
+        },
+    },
+    defaultVariants: {
+        variant: "phone-modern",
+    },
+});
+const deviceFrameSizeMap = {
+    "phone-modern": {
+        portrait: {
+            sm: "w-[200px] aspect-[9/19.5]",
+            md: "w-[280px] aspect-[9/19.5]",
+            lg: "w-[360px] aspect-[9/19.5]",
+        },
+        landscape: {
+            sm: "w-[400px] aspect-[19.5/9]",
+            md: "w-[560px] aspect-[19.5/9]",
+            lg: "w-[720px] aspect-[19.5/9]",
+        },
+    },
+    "phone-classic": {
+        portrait: {
+            sm: "w-[200px] aspect-[9/16]",
+            md: "w-[280px] aspect-[9/16]",
+            lg: "w-[360px] aspect-[9/16]",
+        },
+        landscape: {
+            sm: "w-[400px] aspect-[16/9]",
+            md: "w-[560px] aspect-[16/9]",
+            lg: "w-[720px] aspect-[16/9]",
+        },
+    },
+    tablet: {
+        portrait: {
+            sm: "w-[300px] aspect-[3/4]",
+            md: "w-[420px] aspect-[3/4]",
+            lg: "w-[540px] aspect-[3/4]",
+        },
+        landscape: {
+            sm: "w-[400px] aspect-[4/3]",
+            md: "w-[560px] aspect-[4/3]",
+            lg: "w-[720px] aspect-[4/3]",
+        },
+    },
+    laptop: {
+        portrait: {
+            sm: "w-[500px] aspect-[16/10]",
+            md: "w-[700px] aspect-[16/10]",
+            lg: "w-[900px] aspect-[16/10]",
+        },
+        landscape: {
+            sm: "w-[500px] aspect-[16/10]",
+            md: "w-[700px] aspect-[16/10]",
+            lg: "w-[900px] aspect-[16/10]",
+        },
+    },
+};
+function DeviceFrame({ className, variant = "phone-modern", orientation = "portrait", size = "md", color = "graphite", dynamicIsland = true, children, ref, ...props }) {
+    const effectiveOrientation = variant === "laptop" ? "landscape" : orientation;
+    const sizeClasses = deviceFrameSizeMap[variant][effectiveOrientation][size];
+    const palette = deviceBezelPalette[color];
+    return (_jsxs("div", { ref: ref, "data-slot": "device-frame", "data-variant": variant, "data-orientation": effectiveOrientation, "data-size": size, "data-color": color, className: cn(deviceFrameVariants({ variant }), palette.bezel, sizeClasses, className), ...props, children: [variant === "phone-modern" ? (_jsx(PhoneModernOrnaments, { orientation: effectiveOrientation, dynamicIsland: dynamicIsland })) : null, variant === "phone-classic" ? (_jsx(PhoneClassicOrnaments, { orientation: effectiveOrientation, accent: palette.accent })) : null, variant === "tablet" ? (_jsx(TabletOrnaments, { accent: palette.accent })) : null, children, variant === "laptop" ? _jsx(LaptopBase, { color: color }) : null] }));
+}
+DeviceFrame.displayName = "DeviceFrame";
+function PhoneModernOrnaments({ orientation, dynamicIsland, }) {
+    const positionClass = orientation === "portrait"
+        ? "top-3 left-1/2 -translate-x-1/2"
+        : "left-3 top-1/2 -translate-y-1/2";
+    const shapeClass = dynamicIsland
+        ? orientation === "portrait"
+            ? "h-6 w-24 rounded-full"
+            : "h-24 w-6 rounded-full"
+        : orientation === "portrait"
+            ? "h-6 w-32 rounded-b-2xl"
+            : "h-32 w-6 rounded-r-2xl";
+    const nonIslandPosition = !dynamicIsland && orientation === "portrait"
+        ? "top-[0.55rem] left-1/2 -translate-x-1/2"
+        : !dynamicIsland && orientation === "landscape"
+            ? "left-[0.55rem] top-1/2 -translate-y-1/2"
+            : positionClass;
+    return (_jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none absolute z-20 bg-black", shapeClass, nonIslandPosition) }));
+}
+function PhoneClassicOrnaments({ orientation, accent, }) {
+    if (orientation === "portrait") {
+        return (_jsxs(_Fragment, { children: [_jsxs("span", { "aria-hidden": "true", className: "pointer-events-none absolute left-1/2 top-4 z-20 flex -translate-x-1/2 items-center gap-2", children: [_jsx("span", { className: "size-1.5 rounded-full bg-neutral-700/80" }), _jsx("span", { className: "h-1.5 w-12 rounded-full bg-neutral-800/80" })] }), _jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none absolute bottom-3 left-1/2 z-20 size-8 -translate-x-1/2 rounded-full border-2", accent, "border-neutral-500/60") })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("span", { "aria-hidden": "true", className: "pointer-events-none absolute left-4 top-1/2 z-20 flex -translate-y-1/2 flex-col items-center gap-2", children: [_jsx("span", { className: "size-1.5 rounded-full bg-neutral-700/80" }), _jsx("span", { className: "h-12 w-1.5 rounded-full bg-neutral-800/80" })] }), _jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none absolute right-3 top-1/2 z-20 size-8 -translate-y-1/2 rounded-full border-2", accent, "border-neutral-500/60") })] }));
+}
+function TabletOrnaments({ accent }) {
+    return (_jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none absolute right-3 top-1/2 z-20 size-1.5 -translate-y-1/2 rounded-full", accent) }));
+}
+function LaptopBase({ color }) {
+    const palette = deviceBezelPalette[color];
+    return (_jsxs("div", { "aria-hidden": "true", "data-slot": "device-frame-laptop-base", className: "pointer-events-none absolute -bottom-[0.9rem] left-1/2 z-30 w-[112%] -translate-x-1/2", children: [_jsx("div", { className: cn("h-2 rounded-b-md border-x border-b", palette.bezel) }), _jsx("div", { className: "mx-auto h-1 w-24 rounded-b-md bg-neutral-600/60 dark:bg-neutral-700/60" })] }));
+}
+const deviceFrameScreenVariants = cva("relative z-10 flex h-full w-full flex-col overflow-hidden bg-background text-foreground", {
+    variants: {
+        variant: {
+            "phone-modern": "rounded-[2.25rem]",
+            "phone-classic": "rounded-md",
+            tablet: "rounded-[1rem]",
+            laptop: "rounded-md",
+        },
+    },
+    defaultVariants: {
+        variant: "phone-modern",
+    },
+});
+function DeviceFrameScreen({ className, variant = "phone-modern", ref, ...props }) {
+    return (_jsx("div", { ref: ref, "data-slot": "device-frame-screen", "data-variant": variant, className: cn(deviceFrameScreenVariants({ variant }), className), ...props }));
+}
+DeviceFrameScreen.displayName = "DeviceFrameScreen";
+function DefaultStatusIcons() {
+    return (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 16 10", className: "h-2.5 w-3", fill: "currentColor", children: [_jsx("rect", { x: "0", y: "7", width: "2", height: "3", rx: "0.5" }), _jsx("rect", { x: "3.5", y: "5", width: "2", height: "5", rx: "0.5" }), _jsx("rect", { x: "7", y: "3", width: "2", height: "7", rx: "0.5" }), _jsx("rect", { x: "10.5", y: "0", width: "2", height: "10", rx: "0.5" })] }), _jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 16 12", className: "h-2.5 w-3", fill: "none", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", children: [_jsx("path", { d: "M1 5a10 10 0 0 1 14 0" }), _jsx("path", { d: "M3.5 7.5a6.5 6.5 0 0 1 9 0" }), _jsx("circle", { cx: "8", cy: "10", r: "0.75", fill: "currentColor", stroke: "none" })] }), _jsx("span", { "aria-hidden": "true", className: "ml-0.5 inline-flex h-3 w-6 items-center rounded-[3px] border border-current p-[1px]", children: _jsx("span", { className: "block h-full w-[70%] rounded-[1px] bg-current" }) })] }));
+}
+function DeviceFrameStatusBar({ className, time = "9:41", trailing, compact = false, ref, ...props }) {
+    return (_jsxs("div", { ref: ref, "data-slot": "device-frame-status-bar", className: cn("flex w-full shrink-0 items-center justify-between text-[0.7rem] font-semibold text-foreground", compact ? "px-4 py-1" : "px-6 py-2 pt-3", className), ...props, children: [_jsx("span", { className: "tabular-nums", children: time }), trailing ?? _jsx(DefaultStatusIcons, {})] }));
+}
+DeviceFrameStatusBar.displayName = "DeviceFrameStatusBar";
+function DeviceFrameHomeIndicator({ className, ref, ...props }) {
+    return (_jsx("div", { ref: ref, "aria-hidden": "true", "data-slot": "device-frame-home-indicator", className: cn("flex w-full shrink-0 items-center justify-center py-2", className), ...props, children: _jsx("span", { className: "h-1 w-1/3 max-w-[8rem] rounded-full bg-foreground/70" }) }));
+}
+DeviceFrameHomeIndicator.displayName = "DeviceFrameHomeIndicator";
+function DeviceFrameContent({ className, ref, ...props }) {
+    return (_jsx("div", { ref: ref, "data-slot": "device-frame-content", className: cn("relative flex-1 overflow-hidden", className), ...props }));
+}
+DeviceFrameContent.displayName = "DeviceFrameContent";
+export { DeviceFrame, DeviceFrameScreen, DeviceFrameStatusBar, DeviceFrameHomeIndicator, DeviceFrameContent, deviceFrameVariants, deviceFrameScreenVariants, };
+//# sourceMappingURL=device-frame.js.map

package/dist/components/ui/device-frame/device-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-frame.js","sourceRoot":"","sources":["../../../../src/components/ui/device-frame/device-frame.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/device-frame/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./device-frame";
+export type * from "./device-frame";

package/dist/components/ui/device-frame/index.js

@@ -0,0 +1,2 @@
+export * from "./device-frame";
+//# sourceMappingURL=index.js.map

package/dist/components/ui/device-frame/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/device-frame/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/components/ui/index.d.ts

@@ -128,6 +128,8 @@ export * from "./gauge";
 export type * from "./gauge";
 export * from "./meter";
 export type * from "./meter";
+export * from "./segmented-bar";
+export type * from "./segmented-bar";
 export * from "./breadcrumb";
 export type * from "./breadcrumb";
 export * from "./pagination";
@@ -220,6 +222,8 @@ export * from "./browser-frame";
 export type * from "./browser-frame";
 export * from "./terminal-frame";
 export type * from "./terminal-frame";
+export * from "./device-frame";
+export type * from "./device-frame";
 export * from "./inline-edit";
 export type * from "./inline-edit";
 export * from "./split-button";

package/dist/components/ui/index.js

@@ -63,6 +63,7 @@ export * from "./circular-progress";
 export * from "./scroll-progress";
 export * from "./gauge";
 export * from "./meter";
+export * from "./segmented-bar";
 export * from "./breadcrumb";
 export * from "./pagination";
 export * from "./kbd";
@@ -109,6 +110,7 @@ export * from "./mark";
 export * from "./http-method-badge";
 export * from "./browser-frame";
 export * from "./terminal-frame";
+export * from "./device-frame";
 export * from "./inline-edit";
 export * from "./split-button";
 export * from "./ribbon";

package/dist/components/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"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"}

package/dist/components/ui/segmented-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedBar, SegmentedBar as default, segmentedBarSizeIds, segmentedBarShapeIds, segmentedBarSegmentColorIds, segmentedBarTrackVariants, } from "./segmented-bar";
+export type * from "./segmented-bar";

package/dist/components/ui/segmented-bar/index.js

@@ -0,0 +1,2 @@
+export { SegmentedBar, SegmentedBar as default, segmentedBarSizeIds, segmentedBarShapeIds, segmentedBarSegmentColorIds, segmentedBarTrackVariants, } from "./segmented-bar";
+//# sourceMappingURL=index.js.map

package/dist/components/ui/segmented-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/segmented-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,YAAY,IAAI,OAAO,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,2BAA2B,EAC3B,yBAAyB,GAC1B,MAAM,iBAAiB,CAAC"}

package/dist/components/ui/segmented-bar/segmented-bar.d.ts

@@ -0,0 +1,121 @@
+import { type VariantProps } from "class-variance-authority";
+import type { HTMLAttributes, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from "react";
+export declare const segmentedBarSizeIds: ["sm", "default", "lg", "xl"];
+export type SegmentedBarSizeId = (typeof segmentedBarSizeIds)[number];
+export declare const segmentedBarShapeIds: ["rounded", "pill", "square"];
+export type SegmentedBarShapeId = (typeof segmentedBarShapeIds)[number];
+/**
+ * Preset colours available for segments. Mirrors the palette used by
+ * `PieChart` so a `SegmentedBar` and a `PieChart` visualising the same data
+ * agree on which slice is which.
+ */
+export declare const segmentedBarSegmentColorIds: ["default", "primary", "positive", "warning", "destructive", "muted"];
+export type SegmentedBarSegmentColorId = (typeof segmentedBarSegmentColorIds)[number];
+export declare const segmentedBarTrackVariants: (props?: ({
+    size?: "sm" | "default" | "lg" | "xl" | null | undefined;
+    shape?: "square" | "rounded" | "pill" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SegmentedBarSegment {
+    /** Stable identifier for the segment. Used as React key and click payload. */
+    id: string;
+    /** Human-readable label used in the legend and as the segment's `aria-label`. */
+    label: string;
+    /** Non-negative numeric size. Non-positive values are skipped. */
+    value: number;
+    /** Preset colour token from the shared palette. Ignored if `fill` is set. */
+    color?: SegmentedBarSegmentColorId;
+    /**
+     * Override the background with a raw CSS colour (e.g. `"#ff0080"` or
+     * `"hsl(var(--chart-1))"`). Takes precedence over `color`.
+     */
+    fill?: string;
+    /** Extra classes applied to this segment element. */
+    className?: string;
+    /** Fired when the segment is clicked or activated via keyboard. */
+    onClick?: (segment: SegmentedBarSegment, event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+}
+/**
+ * Args for a custom legend renderer. `total` reflects the effective total
+ * (i.e. the `total` prop when supplied, otherwise the sum of segment values).
+ */
+export interface SegmentedBarLegendRenderArgs {
+    segments: ReadonlyArray<SegmentedBarSegment>;
+    total: number;
+    /** Sum of `value` across `segments` (may be less than `total`). */
+    segmentsTotal: number;
+    /** `total - segmentsTotal`, clamped to 0. */
+    remainder: number;
+}
+export interface SegmentedBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onClick">, VariantProps<typeof segmentedBarTrackVariants> {
+    /** Segments to render, left to right. */
+    segments: ReadonlyArray<SegmentedBarSegment>;
+    /** Accessible label describing what the bar represents. */
+    label: string;
+    /**
+     * Total the segments should be measured against. Defaults to the sum of
+     * segment values. When `total` exceeds the sum, the remainder shows as an
+     * unfilled tail — useful for quotas (`used + reserved` of a `capacity`).
+     */
+    total?: number;
+    /**
+     * Whether to render the built-in legend below the bar. Defaults to `false`.
+     * Ignored when `renderLegend` is provided.
+     */
+    showLegend?: boolean;
+    /**
+     * Show the value alongside each label in the default legend. Defaults to
+     * `true`.
+     */
+    showLegendValues?: boolean;
+    /**
+     * Show the percentage share alongside each value in the default legend.
+     * Defaults to `false`.
+     */
+    showLegendPercentages?: boolean;
+    /** Unit appended to values in the default legend (e.g. `"GB"`, `"$"`). */
+    unit?: string;
+    /**
+     * Format a segment value shown in the default legend. Return a string or
+     * React node. Defaults to `value + unit`.
+     */
+    formatValue?: (value: number, segment: SegmentedBarSegment) => ReactNode;
+    /**
+     * Custom legend renderer. Overrides the default legend entirely and
+     * bypasses `showLegend`.
+     */
+    renderLegend?: (args: SegmentedBarLegendRenderArgs) => ReactNode;
+    /**
+     * Render a thin divider between adjacent segments. Defaults to `true`.
+     * Only visible when segments have distinct colours.
+     */
+    showDividers?: boolean;
+    /**
+     * When true (default), animates segment widths in on mount using
+     * framer-motion. Set to `false` for a static bar.
+     */
+    animate?: boolean;
+    /**
+     * Header label rendered above the bar. If omitted, the bar has no visible
+     * header (the `label` prop is still announced via `aria-label`).
+     */
+    headerLabel?: ReactNode;
+    /**
+     * Value rendered at the end of the header row (e.g. `"84 / 100 GB"`).
+     * Only shown when a header label is present.
+     */
+    headerValue?: ReactNode;
+    /** Extra classes for the header row. */
+    headerClassName?: string;
+    /** Extra classes for the legend wrapper. */
+    legendClassName?: string;
+    /** Extra classes applied to the bar track element. */
+    trackClassName?: string;
+    /** Fallback handler invoked for segments without their own `onClick`. */
+    onSegmentClick?: (segment: SegmentedBarSegment, event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function SegmentedBar({ segments, label, total, size, shape, showLegend, showLegendValues, showLegendPercentages, unit, formatValue, renderLegend, showDividers, animate, headerLabel, headerValue, className, headerClassName, legendClassName, trackClassName, onSegmentClick, ref, ...props }: SegmentedBarProps): ReactElement;
+declare namespace SegmentedBar {
+    var displayName: string;
+}
+export { SegmentedBar };

package/dist/components/ui/segmented-bar/segmented-bar.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId } from "react";
+import { m } from "../../../framer-motion";
+import { cn } from "../../../lib/utils";
+export const segmentedBarSizeIds = [
+    "sm",
+    "default",
+    "lg",
+    "xl",
+];
+export const segmentedBarShapeIds = [
+    "rounded",
+    "pill",
+    "square",
+];
+/**
+ * Preset colours available for segments. Mirrors the palette used by
+ * `PieChart` so a `SegmentedBar` and a `PieChart` visualising the same data
+ * agree on which slice is which.
+ */
+export const segmentedBarSegmentColorIds = [
+    "default",
+    "primary",
+    "positive",
+    "warning",
+    "destructive",
+    "muted",
+];
+const SEGMENT_BG_CLASSES = {
+    default: "bg-schemavaults-brand-blue",
+    primary: "bg-primary",
+    positive: "bg-emerald-500 dark:bg-emerald-400",
+    warning: "bg-warning",
+    destructive: "bg-destructive",
+    muted: "bg-muted-foreground/60",
+};
+/**
+ * Fallback colour rotation when a segment doesn't specify its own colour.
+ * Index is the segment position in the input array, modulo palette length.
+ */
+const DEFAULT_COLOR_ROTATION = [
+    "default",
+    "positive",
+    "warning",
+    "destructive",
+    "primary",
+    "muted",
+];
+export const segmentedBarTrackVariants = cva("relative isolate flex w-full overflow-hidden bg-secondary", {
+    variants: {
+        size: {
+            sm: "h-1.5",
+            default: "h-2.5",
+            lg: "h-4",
+            xl: "h-6",
+        },
+        shape: {
+            rounded: "rounded-md",
+            pill: "rounded-full",
+            square: "rounded-none",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+        shape: "pill",
+    },
+});
+function resolveBackground(segment, index) {
+    if (segment.fill) {
+        return { bgClass: undefined, style: { backgroundColor: segment.fill } };
+    }
+    const preset = segment.color ??
+        DEFAULT_COLOR_ROTATION[index % DEFAULT_COLOR_ROTATION.length];
+    return { bgClass: SEGMENT_BG_CLASSES[preset], style: undefined };
+}
+function SegmentedBar({ segments, label, total, size, shape, showLegend = false, showLegendValues = true, showLegendPercentages = false, unit, formatValue, renderLegend, showDividers = true, animate = true, headerLabel, headerValue, className, headerClassName, legendClassName, trackClassName, onSegmentClick, ref, ...props }) {
+    const validSegments = segments.filter((s) => Number.isFinite(s.value) && s.value > 0);
+    const segmentsTotal = validSegments.reduce((acc, s) => acc + s.value, 0);
+    const effectiveTotal = total ?? segmentsTotal;
+    const safeTotal = effectiveTotal > 0 ? effectiveTotal : 1;
+    const remainder = Math.max(0, effectiveTotal - segmentsTotal);
+    const filledPercentage = Math.min(100, (segmentsTotal / safeTotal) * 100);
+    const resolvedSegments = validSegments.map((segment, index) => ({
+        segment,
+        index,
+        percentage: (segment.value / safeTotal) * 100,
+        ...resolveBackground(segment, index),
+    }));
+    const titleId = useId();
+    const showHeader = headerLabel !== undefined || headerValue !== undefined;
+    function handleSegmentClick(segment, event) {
+        if (segment.onClick) {
+            segment.onClick(segment, event);
+            return;
+        }
+        if (onSegmentClick) {
+            onSegmentClick(segment, event);
+        }
+    }
+    const defaultFormatValue = (v, _s) => (_jsxs(_Fragment, { children: [v, unit ? _jsx("span", { className: "ml-0.5 text-muted-foreground", children: unit }) : null] }));
+    return (_jsxs("div", { ref: ref, "data-slot": "segmented-bar", className: cn("flex w-full flex-col gap-1.5", className), ...props, children: [showHeader && (_jsxs("div", { className: cn("flex items-baseline justify-between gap-2 text-sm", headerClassName), children: [headerLabel !== undefined && (_jsx("span", { id: titleId, className: "font-medium text-muted-foreground", "data-slot": "segmented-bar-header-label", children: headerLabel })), headerValue !== undefined && (_jsx("span", { className: "font-medium tabular-nums text-foreground", "data-slot": "segmented-bar-header-value", children: headerValue }))] })), _jsx("div", { role: "progressbar", "aria-label": label, "aria-labelledby": headerLabel !== undefined ? titleId : undefined, "aria-valuenow": Math.round(filledPercentage), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuetext": `${segmentsTotal} of ${effectiveTotal}`, "data-slot": "segmented-bar-track", className: cn(segmentedBarTrackVariants({ size, shape }), trackClassName), children: resolvedSegments.map((r, i) => {
+                    const isInteractive = r.segment.onClick !== undefined || onSegmentClick !== undefined;
+                    const showDivider = showDividers && (i > 0 || (remainder > 0 && i === 0 && false));
+                    const commonClass = cn("h-full min-w-0 first:rounded-l-[inherit]", remainder <= 0 && "last:rounded-r-[inherit]", r.bgClass, showDivider &&
+                        "border-l border-background/50 dark:border-background/70", isInteractive &&
+                        "cursor-pointer transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background", r.segment.className);
+                    const initialWidth = "0%";
+                    const animatedWidth = `${r.percentage}%`;
+                    const commonProps = {
+                        "data-slot": "segmented-bar-segment",
+                        "data-segment-id": r.segment.id,
+                        "aria-label": r.segment.label,
+                        title: r.segment.label,
+                        style: r.style,
+                        className: commonClass,
+                    };
+                    if (isInteractive) {
+                        return (_jsx(m.button, { type: "button", onClick: (e) => handleSegmentClick(r.segment, e), onKeyDown: (e) => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    handleSegmentClick(r.segment, e);
+                                }
+                            }, initial: animate ? { width: initialWidth } : false, animate: { width: animatedWidth }, transition: { duration: 0.4, ease: "easeOut" }, ...commonProps }, r.segment.id));
+                    }
+                    return (_jsx(m.div, { initial: animate ? { width: initialWidth } : false, animate: { width: animatedWidth }, transition: { duration: 0.4, ease: "easeOut" }, ...commonProps }, r.segment.id));
+                }) }), renderLegend
+                ? renderLegend({
+                    segments: validSegments,
+                    total: effectiveTotal,
+                    segmentsTotal,
+                    remainder,
+                })
+                : showLegend && (_jsxs("ul", { "data-slot": "segmented-bar-legend", className: cn("flex flex-wrap items-center gap-x-4 gap-y-1 text-xs", legendClassName), children: [resolvedSegments.map((r) => {
+                            const pct = safeTotal > 0 ? (r.segment.value / safeTotal) * 100 : 0;
+                            return (_jsxs("li", { "data-slot": "segmented-bar-legend-item", className: "inline-flex items-center gap-1.5", children: [_jsx("span", { "aria-hidden": "true", className: cn("inline-block size-2.5 shrink-0 rounded-[3px]", r.bgClass), style: r.style }), _jsx("span", { className: "font-medium text-foreground", children: r.segment.label }), showLegendValues && (_jsx("span", { className: "tabular-nums text-muted-foreground", children: formatValue
+                                            ? formatValue(r.segment.value, r.segment)
+                                            : defaultFormatValue(r.segment.value, r.segment) })), showLegendPercentages && (_jsxs("span", { className: "tabular-nums text-muted-foreground", children: ["(", pct.toFixed(pct < 10 ? 1 : 0), "%)"] }))] }, r.segment.id));
+                        }), remainder > 0 && (_jsxs("li", { "data-slot": "segmented-bar-legend-remainder", className: "inline-flex items-center gap-1.5", children: [_jsx("span", { "aria-hidden": "true", className: "inline-block size-2.5 shrink-0 rounded-[3px] bg-secondary" }), _jsx("span", { className: "font-medium text-muted-foreground", children: "Remaining" }), showLegendValues && (_jsx("span", { className: "tabular-nums text-muted-foreground", children: formatValue
+                                        ? formatValue(remainder, {
+                                            id: "__remainder__",
+                                            label: "Remaining",
+                                            value: remainder,
+                                        })
+                                        : defaultFormatValue(remainder, {
+                                            id: "__remainder__",
+                                            label: "Remaining",
+                                            value: remainder,
+                                        }) }))] }))] }))] }));
+}
+SegmentedBar.displayName = "SegmentedBar";
+export { SegmentedBar };
+//# sourceMappingURL=segmented-bar.js.map

package/dist/components/ui/segmented-bar/segmented-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-bar.js","sourceRoot":"","sources":["../../../../src/components/ui/segmented-bar/segmented-bar.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schemavaults/ui",
-  "version": "0.89.0",
+  "version": "0.91.0",
   "private": false,
   "license": "MIT",
   "description": "React.js UI components for SchemaVaults frontend applications",