@schemavaults/ui 0.83.0 → 0.84.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/index.d.ts +2 -0
- package/dist/components/ui/index.js +1 -0
- package/dist/components/ui/index.js.map +1 -1
- package/dist/components/ui/meter/index.d.ts +3 -0
- package/dist/components/ui/meter/index.js +3 -0
- package/dist/components/ui/meter/index.js.map +1 -0
- package/dist/components/ui/meter/meter.d.ts +74 -0
- package/dist/components/ui/meter/meter.js +125 -0
- package/dist/components/ui/meter/meter.js.map +1 -0
- package/package.json +1 -1
|
@@ -124,6 +124,8 @@ export * from "./scroll-progress";
|
|
|
124
124
|
export type * from "./scroll-progress";
|
|
125
125
|
export * from "./gauge";
|
|
126
126
|
export type * from "./gauge";
|
|
127
|
+
export * from "./meter";
|
|
128
|
+
export type * from "./meter";
|
|
127
129
|
export * from "./breadcrumb";
|
|
128
130
|
export type * from "./breadcrumb";
|
|
129
131
|
export * from "./pagination";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/meter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,aAAa,EACb,sBAAsB,EACtB,YAAY,EACZ,aAAa,GACd,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
|
+
import type { HTMLAttributes, ReactElement, ReactNode } from "react";
|
|
3
|
+
export declare const meterSizeIds: readonly ["sm", "default", "lg"];
|
|
4
|
+
export type MeterSizeId = (typeof meterSizeIds)[number];
|
|
5
|
+
export declare const meterColorIds: readonly ["default", "positive", "warning", "destructive"];
|
|
6
|
+
export type MeterColorId = (typeof meterColorIds)[number];
|
|
7
|
+
export declare const meterVariants: (props?: ({
|
|
8
|
+
size?: "sm" | "default" | "lg" | null | undefined;
|
|
9
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
|
+
export declare const meterIndicatorVariants: (props?: ({
|
|
11
|
+
color?: "default" | "warning" | "destructive" | "positive" | null | undefined;
|
|
12
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
13
|
+
export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, "role" | "color">, VariantProps<typeof meterVariants>, VariantProps<typeof meterIndicatorVariants> {
|
|
14
|
+
/** Current value (clamped to [min, max]). */
|
|
15
|
+
value: number;
|
|
16
|
+
/** Accessible label describing what the meter represents. */
|
|
17
|
+
label: string;
|
|
18
|
+
/** Minimum value (defaults to 0). */
|
|
19
|
+
min?: number;
|
|
20
|
+
/** Maximum value (defaults to 100). */
|
|
21
|
+
max?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Upper bound of the "low" band. Values below `low` are considered low.
|
|
24
|
+
* Defaults to `min` (i.e. no low band).
|
|
25
|
+
*/
|
|
26
|
+
low?: number;
|
|
27
|
+
/**
|
|
28
|
+
* Lower bound of the "high" band. Values above `high` are considered high.
|
|
29
|
+
* Defaults to `max` (i.e. no high band).
|
|
30
|
+
*/
|
|
31
|
+
high?: number;
|
|
32
|
+
/**
|
|
33
|
+
* Ideal value. When `optimum` sits between `low` and `high`, the mid
|
|
34
|
+
* band is optimal; otherwise the band containing `optimum` is optimal.
|
|
35
|
+
* Defaults to the midpoint of [min, max].
|
|
36
|
+
*/
|
|
37
|
+
optimum?: number;
|
|
38
|
+
/**
|
|
39
|
+
* When true, the indicator color is chosen automatically based on where
|
|
40
|
+
* the current value sits relative to the thresholds — overriding `color`.
|
|
41
|
+
*/
|
|
42
|
+
autoColorFromThresholds?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* When true (default), renders the label above the bar. Set to `false` to
|
|
45
|
+
* hide the visible label (it is still announced via `aria-label`).
|
|
46
|
+
*/
|
|
47
|
+
showLabel?: boolean;
|
|
48
|
+
/** When true (default), renders the numeric value alongside the label. */
|
|
49
|
+
showValue?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* When true, faintly renders the threshold band edges behind the
|
|
52
|
+
* indicator so the reader can see where "low", "mid", and "high" sit.
|
|
53
|
+
*/
|
|
54
|
+
showThresholdMarks?: boolean;
|
|
55
|
+
/** Displayed unit next to the value (e.g. "%", "GB"). */
|
|
56
|
+
unit?: string;
|
|
57
|
+
/**
|
|
58
|
+
* Optional formatter for the value shown next to the label. Overrides
|
|
59
|
+
* the default `Math.round(value) + unit` display.
|
|
60
|
+
*/
|
|
61
|
+
formatValue?: (value: number) => ReactNode;
|
|
62
|
+
/** Additional classes for the filled indicator. */
|
|
63
|
+
indicatorClassName?: string;
|
|
64
|
+
/** Additional classes for the header row containing label + value. */
|
|
65
|
+
headerClassName?: string;
|
|
66
|
+
/** Additional classes for the label text. */
|
|
67
|
+
labelClassName?: string;
|
|
68
|
+
/** Additional classes for the value text. */
|
|
69
|
+
valueClassName?: string;
|
|
70
|
+
}
|
|
71
|
+
export declare function Meter({ value, label, min, max, low, high, optimum, size, color, autoColorFromThresholds, showLabel, showValue, showThresholdMarks, unit, formatValue, className, indicatorClassName, headerClassName, labelClassName, valueClassName, ...props }: MeterProps): ReactElement;
|
|
72
|
+
export declare namespace Meter {
|
|
73
|
+
var displayName: string;
|
|
74
|
+
}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { m } from "../../../framer-motion";
|
|
5
|
+
import { cn } from "../../../lib/utils";
|
|
6
|
+
export const meterSizeIds = ["sm", "default", "lg"];
|
|
7
|
+
export const meterColorIds = [
|
|
8
|
+
"default",
|
|
9
|
+
"positive",
|
|
10
|
+
"warning",
|
|
11
|
+
"destructive",
|
|
12
|
+
];
|
|
13
|
+
export const meterVariants = cva("relative w-full overflow-hidden rounded-full bg-secondary", {
|
|
14
|
+
variants: {
|
|
15
|
+
size: {
|
|
16
|
+
sm: "h-1.5",
|
|
17
|
+
default: "h-2.5",
|
|
18
|
+
lg: "h-4",
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
defaultVariants: {
|
|
22
|
+
size: "default",
|
|
23
|
+
},
|
|
24
|
+
});
|
|
25
|
+
export const meterIndicatorVariants = cva("h-full rounded-full transition-colors duration-300", {
|
|
26
|
+
variants: {
|
|
27
|
+
color: {
|
|
28
|
+
default: "bg-schemavaults-brand-blue",
|
|
29
|
+
positive: "bg-emerald-500 dark:bg-emerald-400",
|
|
30
|
+
warning: "bg-warning",
|
|
31
|
+
destructive: "bg-destructive",
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
defaultVariants: {
|
|
35
|
+
color: "default",
|
|
36
|
+
},
|
|
37
|
+
});
|
|
38
|
+
const meterValueTextVariants = cva("tabular-nums text-foreground", {
|
|
39
|
+
variants: {
|
|
40
|
+
size: {
|
|
41
|
+
sm: "text-xs",
|
|
42
|
+
default: "text-sm",
|
|
43
|
+
lg: "text-base",
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
defaultVariants: {
|
|
47
|
+
size: "default",
|
|
48
|
+
},
|
|
49
|
+
});
|
|
50
|
+
/**
|
|
51
|
+
* A meter behaves like the HTML `<meter>` element: the value is a scalar
|
|
52
|
+
* measurement inside a known range, with optional quality thresholds
|
|
53
|
+
* (`low`, `high`, `optimum`) that define which sub-range is preferable.
|
|
54
|
+
*
|
|
55
|
+
* The rules are the same as `<meter>`:
|
|
56
|
+
* - "optimum" marks the ideal value.
|
|
57
|
+
* - If `optimum` falls between `low` and `high`, values inside the same
|
|
58
|
+
* band are considered optimal, adjacent bands are sub-optimal, and the
|
|
59
|
+
* farthest band is considered bad.
|
|
60
|
+
* - When only one of `low`/`high` is set, the missing side extends to the
|
|
61
|
+
* matching endpoint.
|
|
62
|
+
*
|
|
63
|
+
* When `autoColorFromThresholds` is enabled the indicator color is chosen
|
|
64
|
+
* automatically from the resolved quality: optimum → positive, sub-optimum
|
|
65
|
+
* → warning, worst → destructive.
|
|
66
|
+
*/
|
|
67
|
+
function clampValue(value, min, max) {
|
|
68
|
+
return Math.min(max, Math.max(min, value));
|
|
69
|
+
}
|
|
70
|
+
function valueToPercentage(value, min, max) {
|
|
71
|
+
if (max === min) {
|
|
72
|
+
return 0;
|
|
73
|
+
}
|
|
74
|
+
return ((value - min) / (max - min)) * 100;
|
|
75
|
+
}
|
|
76
|
+
function resolveQuality(value, low, high, optimum) {
|
|
77
|
+
const inLow = value < low;
|
|
78
|
+
const inHigh = value > high;
|
|
79
|
+
const inMid = !inLow && !inHigh;
|
|
80
|
+
const optimumInMid = optimum >= low && optimum <= high;
|
|
81
|
+
const optimumInLow = optimum < low;
|
|
82
|
+
const optimumInHigh = optimum > high;
|
|
83
|
+
if (optimumInMid) {
|
|
84
|
+
return inMid ? "optimum" : "sub-optimum";
|
|
85
|
+
}
|
|
86
|
+
if (optimumInLow) {
|
|
87
|
+
if (inLow) {
|
|
88
|
+
return "optimum";
|
|
89
|
+
}
|
|
90
|
+
return inMid ? "sub-optimum" : "worst";
|
|
91
|
+
}
|
|
92
|
+
if (optimumInHigh) {
|
|
93
|
+
if (inHigh) {
|
|
94
|
+
return "optimum";
|
|
95
|
+
}
|
|
96
|
+
return inMid ? "sub-optimum" : "worst";
|
|
97
|
+
}
|
|
98
|
+
return inMid ? "optimum" : "sub-optimum";
|
|
99
|
+
}
|
|
100
|
+
const QUALITY_TO_COLOR = {
|
|
101
|
+
optimum: "positive",
|
|
102
|
+
"sub-optimum": "warning",
|
|
103
|
+
worst: "destructive",
|
|
104
|
+
};
|
|
105
|
+
export function Meter({ value, label, min = 0, max = 100, low, high, optimum, size, color, autoColorFromThresholds = false, showLabel = true, showValue = true, showThresholdMarks = false, unit, formatValue, className, indicatorClassName, headerClassName, labelClassName, valueClassName, ...props }) {
|
|
106
|
+
const resolvedSize = size ?? "default";
|
|
107
|
+
const resolvedLow = low ?? min;
|
|
108
|
+
const resolvedHigh = high ?? max;
|
|
109
|
+
const resolvedOptimum = optimum ?? (min + max) / 2;
|
|
110
|
+
const clamped = clampValue(value, min, max);
|
|
111
|
+
const percentage = valueToPercentage(clamped, min, max);
|
|
112
|
+
const quality = resolveQuality(clamped, resolvedLow, resolvedHigh, resolvedOptimum);
|
|
113
|
+
const indicatorColor = autoColorFromThresholds
|
|
114
|
+
? QUALITY_TO_COLOR[quality]
|
|
115
|
+
: (color ?? "default");
|
|
116
|
+
const lowPct = valueToPercentage(clampValue(resolvedLow, min, max), min, max);
|
|
117
|
+
const highPct = valueToPercentage(clampValue(resolvedHigh, min, max), min, max);
|
|
118
|
+
const showLowMark = showThresholdMarks && lowPct > 0 && lowPct < 100;
|
|
119
|
+
const showHighMark = showThresholdMarks && highPct > 0 && highPct < 100 && highPct !== lowPct;
|
|
120
|
+
const showHeader = showLabel || showValue;
|
|
121
|
+
const defaultFormattedValue = (_jsxs(_Fragment, { children: [Math.round(clamped), unit && (_jsx("span", { className: "ml-0.5 text-muted-foreground", children: unit }))] }));
|
|
122
|
+
return (_jsxs("div", { className: cn("flex w-full flex-col gap-1", className), ...props, children: [showHeader && (_jsxs("div", { className: cn("flex items-baseline justify-between gap-2", headerClassName), children: [showLabel && (_jsx("span", { className: cn(meterValueTextVariants({ size: resolvedSize }), "text-muted-foreground", labelClassName), children: label })), showValue && (_jsx("span", { className: cn(meterValueTextVariants({ size: resolvedSize }), "font-medium", valueClassName), children: formatValue ? formatValue(clamped) : defaultFormattedValue }))] })), _jsxs("div", { role: "meter", "aria-valuenow": clamped, "aria-valuemin": min, "aria-valuemax": max, "aria-label": label, className: cn(meterVariants({ size: resolvedSize })), children: [showLowMark && (_jsx("span", { "aria-hidden": "true", className: "absolute inset-y-0 w-px bg-foreground/25", style: { left: `${lowPct}%` } })), showHighMark && (_jsx("span", { "aria-hidden": "true", className: "absolute inset-y-0 w-px bg-foreground/25", style: { left: `${highPct}%` } })), _jsx(m.div, { initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: { duration: 0.4, ease: "easeOut" }, className: cn(meterIndicatorVariants({ color: indicatorColor }), indicatorClassName) })] })] }));
|
|
123
|
+
}
|
|
124
|
+
Meter.displayName = "Meter";
|
|
125
|
+
//# sourceMappingURL=meter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"meter.js","sourceRoot":"","sources":["../../../../src/components/ui/meter/meter.tsx"],"names":[],"mappings":"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"}
|