@schemavaults/ui 0.89.0 → 0.90.0

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";

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";

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.90.0",
   "private": false,
   "license": "MIT",
   "description": "React.js UI components for SchemaVaults frontend applications",