@sixthshift/design-system 0.7.0 → 0.9.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/README.md +5 -4
- package/dist/components/Badge/Badge.d.ts +17 -35
- package/dist/components/Badge/Badge.d.ts.map +1 -1
- package/dist/components/Badge/Badge.js +19 -22
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Badge/index.d.ts +1 -1
- package/dist/components/Badge/index.d.ts.map +1 -1
- package/dist/components/Badge/index.js +1 -1
- package/dist/components/Badge/index.js.map +1 -1
- package/dist/components/Button/Button.d.ts +23 -41
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.js +28 -35
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/index.d.ts +1 -1
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +1 -1
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Card/Card.d.ts +2 -2
- package/dist/components/Card/Card.js +1 -1
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +20 -16
- package/dist/components/CheckboxGroup/CheckboxGroup.d.ts.map +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.js +12 -10
- package/dist/components/CheckboxGroup/CheckboxGroup.js.map +1 -1
- package/dist/components/Code/Workspace/Toolbar.d.ts +2 -1
- package/dist/components/Code/Workspace/Toolbar.d.ts.map +1 -1
- package/dist/components/Code/Workspace/Toolbar.js.map +1 -1
- package/dist/components/DataTable/DataTable.d.ts +89 -0
- package/dist/components/DataTable/DataTable.d.ts.map +1 -0
- package/dist/components/DataTable/DataTable.js +107 -0
- package/dist/components/DataTable/DataTable.js.map +1 -0
- package/dist/components/DataTable/index.d.ts +2 -0
- package/dist/components/DataTable/index.d.ts.map +1 -0
- package/dist/components/DataTable/index.js +2 -0
- package/dist/components/DataTable/index.js.map +1 -0
- package/dist/components/FileDropzone/FileDropzone.d.ts +87 -0
- package/dist/components/FileDropzone/FileDropzone.d.ts.map +1 -0
- package/dist/components/FileDropzone/FileDropzone.js +146 -0
- package/dist/components/FileDropzone/FileDropzone.js.map +1 -0
- package/dist/components/FileDropzone/index.d.ts +2 -0
- package/dist/components/FileDropzone/index.d.ts.map +1 -0
- package/dist/components/FileDropzone/index.js +2 -0
- package/dist/components/FileDropzone/index.js.map +1 -0
- package/dist/components/FormField/FormField.d.ts +3 -1
- package/dist/components/FormField/FormField.d.ts.map +1 -1
- package/dist/components/FormField/FormField.js.map +1 -1
- package/dist/components/ImageGallery/ImageGallery.d.ts +93 -0
- package/dist/components/ImageGallery/ImageGallery.d.ts.map +1 -0
- package/dist/components/ImageGallery/ImageGallery.js +121 -0
- package/dist/components/ImageGallery/ImageGallery.js.map +1 -0
- package/dist/components/ImageGallery/index.d.ts +2 -0
- package/dist/components/ImageGallery/index.d.ts.map +1 -0
- package/dist/components/ImageGallery/index.js +2 -0
- package/dist/components/ImageGallery/index.js.map +1 -0
- package/dist/components/Input/Input.d.ts +3 -3
- package/dist/components/Input/Input.js +3 -3
- package/dist/components/Markdown/Markdown.js +1 -1
- package/dist/components/Markdown/Markdown.js.map +1 -1
- package/dist/components/NumberStepper/NumberStepper.d.ts +78 -0
- package/dist/components/NumberStepper/NumberStepper.d.ts.map +1 -0
- package/dist/components/NumberStepper/NumberStepper.js +129 -0
- package/dist/components/NumberStepper/NumberStepper.js.map +1 -0
- package/dist/components/NumberStepper/index.d.ts +2 -0
- package/dist/components/NumberStepper/index.d.ts.map +1 -0
- package/dist/components/NumberStepper/index.js +2 -0
- package/dist/components/NumberStepper/index.js.map +1 -0
- package/dist/components/ProgressBar/ProgressBar.d.ts +11 -0
- package/dist/components/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/components/ProgressBar/ProgressBar.js +6 -2
- package/dist/components/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/components/ProgressBar/index.d.ts +1 -1
- package/dist/components/ProgressBar/index.d.ts.map +1 -1
- package/dist/components/ProgressBar/index.js.map +1 -1
- package/dist/components/RadioButtonGroup/RadioButtonGroup.d.ts +19 -16
- package/dist/components/RadioButtonGroup/RadioButtonGroup.d.ts.map +1 -1
- package/dist/components/RadioButtonGroup/RadioButtonGroup.js +13 -12
- package/dist/components/RadioButtonGroup/RadioButtonGroup.js.map +1 -1
- package/dist/components/SearchInput/SearchInput.d.ts +3 -2
- package/dist/components/SearchInput/SearchInput.d.ts.map +1 -1
- package/dist/components/SearchInput/SearchInput.js +13 -8
- package/dist/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/components/Sparkline/Sparkline.d.ts +8 -4
- package/dist/components/Sparkline/Sparkline.d.ts.map +1 -1
- package/dist/components/Sparkline/Sparkline.js +1 -1
- package/dist/components/Sparkline/Sparkline.js.map +1 -1
- package/dist/components/Sparkline/index.d.ts +1 -1
- package/dist/components/Sparkline/index.d.ts.map +1 -1
- package/dist/components/Sparkline/index.js.map +1 -1
- package/dist/components/Steps/Steps.d.ts +65 -0
- package/dist/components/Steps/Steps.d.ts.map +1 -0
- package/dist/components/Steps/Steps.js +62 -0
- package/dist/components/Steps/Steps.js.map +1 -0
- package/dist/components/Steps/index.d.ts +2 -0
- package/dist/components/Steps/index.d.ts.map +1 -0
- package/dist/components/Steps/index.js +2 -0
- package/dist/components/Steps/index.js.map +1 -0
- package/dist/components/TagChip/TagChip.d.ts +0 -13
- package/dist/components/TagChip/TagChip.d.ts.map +1 -1
- package/dist/components/TagChip/TagChip.js +10 -4
- package/dist/components/TagChip/TagChip.js.map +1 -1
- package/dist/components/TextInline/TextInline.d.ts +2 -2
- package/dist/components/Toast/Toast.js +1 -1
- package/dist/components/Toast/Toast.js.map +1 -1
- package/dist/components/Toggle/Toggle.d.ts +29 -18
- package/dist/components/Toggle/Toggle.d.ts.map +1 -1
- package/dist/components/Toggle/Toggle.js +48 -11
- package/dist/components/Toggle/Toggle.js.map +1 -1
- package/dist/components/Toggle/index.d.ts +1 -1
- package/dist/components/Toggle/index.d.ts.map +1 -1
- package/dist/components/Toggle/index.js +1 -1
- package/dist/components/Toggle/index.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.d.ts +4 -4
- package/dist/components/ToggleGroup/ToggleGroup.js +4 -4
- package/dist/components/ToggleGroup/ToggleGroupItem.d.ts +1 -1
- package/dist/components/ToggleGroup/ToggleGroupItem.d.ts.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupItem.js +37 -7
- package/dist/components/ToggleGroup/ToggleGroupItem.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupMultiple.d.ts +3 -3
- package/dist/components/ToggleGroup/ToggleGroupSingle.d.ts +3 -3
- package/dist/components/ToggleGroup/index.d.ts +1 -1
- package/dist/components/ToggleGroup/index.d.ts.map +1 -1
- package/dist/components/ToggleGroup/toggleGroup.types.d.ts +18 -16
- package/dist/components/ToggleGroup/toggleGroup.types.d.ts.map +1 -1
- package/dist/typography/Code.js +1 -1
- package/dist/typography/Code.js.map +1 -1
- package/package.json +22 -1
- package/src/components/Badge/Badge.tsx +38 -45
- package/src/components/Badge/badge.recipe.css +20 -101
- package/src/components/Badge/index.ts +0 -1
- package/src/components/Button/Button.tsx +57 -51
- package/src/components/Button/button.recipe.css +39 -122
- package/src/components/Button/index.ts +0 -1
- package/src/components/Card/Card.tsx +1 -1
- package/src/components/CheckboxGroup/CheckboxGroup.tsx +17 -15
- package/src/components/Code/Workspace/Toolbar.tsx +2 -2
- package/src/components/DataTable/DataTable.tsx +261 -0
- package/src/components/DataTable/data-table.recipe.css +28 -0
- package/src/components/DataTable/index.ts +10 -0
- package/src/components/FileDropzone/FileDropzone.tsx +239 -0
- package/src/components/FileDropzone/file-dropzone.recipe.css +38 -0
- package/src/components/FileDropzone/index.ts +1 -0
- package/src/components/FormField/FormField.tsx +3 -2
- package/src/components/ImageGallery/ImageGallery.tsx +285 -0
- package/src/components/ImageGallery/image-gallery.recipe.css +50 -0
- package/src/components/ImageGallery/index.ts +7 -0
- package/src/components/Input/Input.tsx +3 -3
- package/src/components/Markdown/Markdown.tsx +1 -1
- package/src/components/Message/message.recipe.css +13 -28
- package/src/components/NumberStepper/NumberStepper.tsx +227 -0
- package/src/components/NumberStepper/index.ts +1 -0
- package/src/components/NumberStepper/number-stepper.recipe.css +31 -0
- package/src/components/ProgressBar/ProgressBar.tsx +16 -4
- package/src/components/ProgressBar/index.ts +1 -1
- package/src/components/ProgressBar/progress-bar.recipe.css +29 -0
- package/src/components/RadioButtonGroup/RadioButtonGroup.tsx +18 -17
- package/src/components/SearchInput/SearchInput.tsx +34 -20
- package/src/components/SearchInput/search-input.recipe.css +14 -6
- package/src/components/Sparkline/Sparkline.tsx +9 -4
- package/src/components/Sparkline/index.ts +1 -1
- package/src/components/Steps/Steps.tsx +149 -0
- package/src/components/Steps/index.ts +1 -0
- package/src/components/Steps/steps.recipe.css +51 -0
- package/src/components/TagChip/TagChip.tsx +17 -8
- package/src/components/TagChip/tag-chip.recipe.css +12 -12
- package/src/components/Toast/Toast.tsx +1 -1
- package/src/components/Toggle/Toggle.tsx +67 -21
- package/src/components/Toggle/index.ts +9 -1
- package/src/components/Toggle/toggle.recipe.css +45 -73
- package/src/components/ToggleGroup/ToggleGroup.tsx +4 -4
- package/src/components/ToggleGroup/ToggleGroupItem.tsx +46 -11
- package/src/components/ToggleGroup/index.ts +9 -1
- package/src/components/ToggleGroup/toggle-group.recipe.css +62 -0
- package/src/components/ToggleGroup/toggleGroup.types.ts +18 -16
- package/src/theme/linen/theme.css +21 -0
- package/src/theming/intents.css +112 -0
- package/src/theming/tailwind.css +22 -1
- package/src/typography/Code.tsx +1 -1
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useControllableState } from "@sixthshift/design-system/hooks";
|
|
4
|
+
import { cn } from "@sixthshift/design-system/utils";
|
|
5
|
+
import { cva } from "class-variance-authority";
|
|
6
|
+
import { Minus, Plus } from "lucide-react";
|
|
7
|
+
import * as React from "react";
|
|
8
|
+
/**
|
|
9
|
+
* Geometry only. Every colour reads a `--number-stepper-*` component token
|
|
10
|
+
* whose value is decided by src/components/NumberStepper/number-stepper.recipe.css.
|
|
11
|
+
*
|
|
12
|
+
* `size` tracks Input's and Button's heights (`sm` 32px, `md` 36px, `lg`
|
|
13
|
+
* 40px) so a stepper sits on the same baseline as the fields beside it.
|
|
14
|
+
*/
|
|
15
|
+
const numberStepperVariants = cva(
|
|
16
|
+
// One literal, deliberately — see Button.tsx for why a `+` concatenation is a trap.
|
|
17
|
+
"number-stepper border-(color:--number-stepper-border) focus-within:ring-(color:--number-stepper-ring) inline-flex w-fit items-stretch overflow-hidden rounded-md border bg-(--number-stepper-bg) text-(--number-stepper-fg) shadow-xs transition-colors focus-within:ring-2 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50", {
|
|
18
|
+
variants: {
|
|
19
|
+
size: {
|
|
20
|
+
sm: "h-8 text-xs [&_svg]:size-3.5",
|
|
21
|
+
md: "h-9 text-sm [&_svg]:size-4",
|
|
22
|
+
lg: "h-10 text-sm [&_svg]:size-4",
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
defaultVariants: {
|
|
26
|
+
size: "md",
|
|
27
|
+
},
|
|
28
|
+
});
|
|
29
|
+
/** Button width per size — square against the field's height. */
|
|
30
|
+
const buttonGeometry = {
|
|
31
|
+
sm: "w-8",
|
|
32
|
+
md: "w-9",
|
|
33
|
+
lg: "w-10",
|
|
34
|
+
};
|
|
35
|
+
/** Input width per size — room for three digits before it grows. */
|
|
36
|
+
const inputGeometry = {
|
|
37
|
+
sm: "w-10",
|
|
38
|
+
md: "w-12",
|
|
39
|
+
lg: "w-14",
|
|
40
|
+
};
|
|
41
|
+
function clamp(value, min, max) {
|
|
42
|
+
const floored = Math.max(min, value);
|
|
43
|
+
return max === undefined ? floored : Math.min(max, floored);
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* A whole-number field with decrement and increment buttons — a cart
|
|
47
|
+
* quantity, a guest count, a per-day capacity.
|
|
48
|
+
*
|
|
49
|
+
* Implements the WAI-ARIA spinbutton pattern on the `<input>` itself:
|
|
50
|
+
* `role="spinbutton"` with `aria-valuenow`/`min`/`max`, `ArrowUp`/`ArrowDown`
|
|
51
|
+
* step, `PageUp`/`PageDown` step by ten, and `Home`/`End` jump to the bounds
|
|
52
|
+
* that exist. The two buttons are pointer affordances and stay out of the tab
|
|
53
|
+
* order, so the field is one tab stop — the same reason RadioButtonGroup is.
|
|
54
|
+
*
|
|
55
|
+
* Typing is free-form while focused and committed on blur or `Enter`: the
|
|
56
|
+
* draft is parsed, rounded to the nearest `step` from `min`, and clamped.
|
|
57
|
+
* Anything unparseable reverts to the last committed value rather than
|
|
58
|
+
* reporting `NaN`. Every value `onValueChange` receives is in range.
|
|
59
|
+
*
|
|
60
|
+
* Controlled or uncontrolled through the `value`/`defaultValue`/
|
|
61
|
+
* `onValueChange` triad. `name` submits the committed value with a form, since
|
|
62
|
+
* the input is a real `<input>`. The ref and every unlisted prop land on that
|
|
63
|
+
* input — so `FormField`'s `id`/`aria-describedby` wiring reaches the control
|
|
64
|
+
* — while `className` styles the surrounding group.
|
|
65
|
+
*/
|
|
66
|
+
export const NumberStepper = React.forwardRef(({ className, inputClassName, size = "md", value: controlledValue, defaultValue, onValueChange, min = 0, max, step = 1, disabled = false, readOnly = false, decrementLabel = "Decrease", incrementLabel = "Increase", onKeyDown, onBlur, onFocus, ...props }, ref) => {
|
|
67
|
+
const [value, setValue] = useControllableState({
|
|
68
|
+
value: controlledValue,
|
|
69
|
+
defaultValue: clamp(defaultValue ?? min, min, max),
|
|
70
|
+
onChange: onValueChange,
|
|
71
|
+
});
|
|
72
|
+
// The text being typed, or `null` when the field shows the committed value.
|
|
73
|
+
const [draft, setDraft] = React.useState(null);
|
|
74
|
+
const commit = (next) => {
|
|
75
|
+
const snapped = min + Math.round((next - min) / step) * step;
|
|
76
|
+
const clamped = clamp(snapped, min, max);
|
|
77
|
+
if (clamped !== value)
|
|
78
|
+
setValue(clamped);
|
|
79
|
+
};
|
|
80
|
+
const commitDraft = () => {
|
|
81
|
+
if (draft === null)
|
|
82
|
+
return;
|
|
83
|
+
const parsed = Number.parseFloat(draft);
|
|
84
|
+
setDraft(null);
|
|
85
|
+
if (Number.isFinite(parsed))
|
|
86
|
+
commit(parsed);
|
|
87
|
+
};
|
|
88
|
+
const interactive = !disabled && !readOnly;
|
|
89
|
+
const atMin = value <= min;
|
|
90
|
+
const atMax = max !== undefined && value >= max;
|
|
91
|
+
const handleKeyDown = (event) => {
|
|
92
|
+
onKeyDown?.(event);
|
|
93
|
+
if (event.defaultPrevented || !interactive)
|
|
94
|
+
return;
|
|
95
|
+
const moves = {
|
|
96
|
+
ArrowUp: () => value + step,
|
|
97
|
+
ArrowDown: () => value - step,
|
|
98
|
+
PageUp: () => value + step * 10,
|
|
99
|
+
PageDown: () => value - step * 10,
|
|
100
|
+
Home: () => min,
|
|
101
|
+
End: max === undefined ? undefined : () => max,
|
|
102
|
+
};
|
|
103
|
+
const move = moves[event.key];
|
|
104
|
+
if (event.key === "Enter") {
|
|
105
|
+
commitDraft();
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
if (!move)
|
|
109
|
+
return;
|
|
110
|
+
event.preventDefault();
|
|
111
|
+
setDraft(null);
|
|
112
|
+
commit(move());
|
|
113
|
+
};
|
|
114
|
+
const handleBlur = (event) => {
|
|
115
|
+
commitDraft();
|
|
116
|
+
onBlur?.(event);
|
|
117
|
+
};
|
|
118
|
+
const stepBy = (direction) => {
|
|
119
|
+
setDraft(null);
|
|
120
|
+
commit(value + step * direction);
|
|
121
|
+
};
|
|
122
|
+
const buttonClass = cn("number-stepper-button flex shrink-0 cursor-pointer items-center justify-center text-(--number-stepper-button-fg) transition-colors enabled:active:bg-(--number-stepper-button-bg-pressed) enabled:hover:bg-(--number-stepper-button-bg-hovered) disabled:cursor-not-allowed disabled:text-(--number-stepper-button-fg-disabled)", buttonGeometry[size ?? "md"]);
|
|
123
|
+
return (
|
|
124
|
+
// biome-ignore lint/a11y/useSemanticElements: a <fieldset> brings a border, min-width and legend semantics this inline control does not want; role="group" only ties the buttons to the field
|
|
125
|
+
_jsxs("div", { role: "group", "data-disabled": disabled, className: numberStepperVariants({ size, className }), children: [_jsx("button", { type: "button", tabIndex: -1, "aria-label": decrementLabel, disabled: !interactive || atMin, onClick: () => stepBy(-1), className: buttonClass, children: _jsx(Minus, { "aria-hidden": "true" }) }), _jsx("input", { ref: ref, type: "text", inputMode: "numeric", role: "spinbutton", autoComplete: "off", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, disabled: disabled, readOnly: readOnly, value: draft ?? String(value), onChange: (event) => setDraft(event.target.value), onKeyDown: handleKeyDown, onBlur: handleBlur, onFocus: onFocus, className: cn("border-(color:--number-stepper-divider-border) min-w-0 border-x bg-transparent text-center text-[length:inherit] tabular-nums outline-hidden disabled:cursor-not-allowed", inputGeometry[size ?? "md"], inputClassName), ...props }), _jsx("button", { type: "button", tabIndex: -1, "aria-label": incrementLabel, disabled: !interactive || atMax, onClick: () => stepBy(1), className: buttonClass, children: _jsx(Plus, { "aria-hidden": "true" }) })] }));
|
|
126
|
+
});
|
|
127
|
+
NumberStepper.displayName = "NumberStepper";
|
|
128
|
+
export { numberStepperVariants };
|
|
129
|
+
//# sourceMappingURL=NumberStepper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NumberStepper.js","sourceRoot":"","sources":["../../../src/components/NumberStepper/NumberStepper.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NumberStepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/NumberStepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAmD,qBAAqB,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
export type ProgressBarIntentName = "neutral" | "brand" | "danger" | "success" | "warning";
|
|
3
|
+
/** Widened, like every intent prop: a consumer adds an intent in CSS, not in a release. */
|
|
4
|
+
export type ProgressBarIntent = ProgressBarIntentName | (string & {});
|
|
2
5
|
export type ProgressBarProps = {
|
|
3
6
|
completed: number;
|
|
4
7
|
total: number;
|
|
5
8
|
showFraction?: boolean;
|
|
9
|
+
/** The fill's colour family. Defaults to `brand`. */
|
|
10
|
+
intent?: ProgressBarIntent | undefined;
|
|
11
|
+
/** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the bar follows the nearest `data-brand` ancestor. */
|
|
12
|
+
brand?: string | undefined;
|
|
6
13
|
/** Accessible name for the progress bar. */
|
|
7
14
|
label?: string;
|
|
8
15
|
className?: string;
|
|
@@ -20,6 +27,10 @@ export type ProgressBarProps = {
|
|
|
20
27
|
* invalid CSS or an impossible reported value — though the fraction text
|
|
21
28
|
* still shows the raw, unclamped numbers. When `total` is not positive the
|
|
22
29
|
* bar renders as indeterminate: no `aria-valuenow`/`aria-valuemax`, 0% fill.
|
|
30
|
+
*
|
|
31
|
+
* `intent` colours the fill and defaults to `brand`: progress is not an
|
|
32
|
+
* outcome, so a bar at 40% is not `success`. Pass `success` when completion
|
|
33
|
+
* really is the good news, or `danger` for a quota running out.
|
|
23
34
|
*/
|
|
24
35
|
export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
|
|
25
36
|
//# sourceMappingURL=ProgressBar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAC3F,2FAA2F;AAC3F,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,MAAM,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACvC,+HAA+H;IAC/H,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,WAAW,yFA+BvB,CAAC"}
|
|
@@ -15,14 +15,18 @@ import * as React from "react";
|
|
|
15
15
|
* invalid CSS or an impossible reported value — though the fraction text
|
|
16
16
|
* still shows the raw, unclamped numbers. When `total` is not positive the
|
|
17
17
|
* bar renders as indeterminate: no `aria-valuenow`/`aria-valuemax`, 0% fill.
|
|
18
|
+
*
|
|
19
|
+
* `intent` colours the fill and defaults to `brand`: progress is not an
|
|
20
|
+
* outcome, so a bar at 40% is not `success`. Pass `success` when completion
|
|
21
|
+
* really is the good news, or `danger` for a quota running out.
|
|
18
22
|
*/
|
|
19
|
-
export const ProgressBar = React.forwardRef(({ completed, total, showFraction = true, label = "Progress", className }, ref) => {
|
|
23
|
+
export const ProgressBar = React.forwardRef(({ completed, total, intent = "brand", brand, showFraction = true, label = "Progress", className }, ref) => {
|
|
20
24
|
// A caller can hand us anything; the bar must not render an out-of-range
|
|
21
25
|
// width (a negative `width` is invalid CSS) or report impossible progress.
|
|
22
26
|
const isMeasurable = total > 0;
|
|
23
27
|
const clamped = isMeasurable ? Math.min(Math.max(completed, 0), total) : 0;
|
|
24
28
|
const percentage = isMeasurable ? (clamped / total) * 100 : 0;
|
|
25
|
-
return (_jsxs("div", { ref: ref, className: cn("flex items-center gap-3", className), children: [_jsx("div", { role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": isMeasurable ? total : undefined, "aria-valuenow": isMeasurable ? clamped : undefined, "aria-valuetext": isMeasurable ? `${clamped} of ${total}` : undefined, className: "h-2 flex-1 overflow-hidden rounded-full bg-bg
|
|
29
|
+
return (_jsxs("div", { ref: ref, "data-intent": intent, "data-brand": brand, className: cn("progress-bar flex items-center gap-3", className), children: [_jsx("div", { role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": isMeasurable ? total : undefined, "aria-valuenow": isMeasurable ? clamped : undefined, "aria-valuetext": isMeasurable ? `${clamped} of ${total}` : undefined, className: "h-2 flex-1 overflow-hidden rounded-full bg-(--progress-bar-track-bg)", children: _jsx("div", { className: "h-full rounded-full bg-(--progress-bar-fill-bg) transition-all", style: { width: `${percentage}%` } }) }), showFraction && (_jsxs(Caption, { className: "shrink-0", children: [completed, "/", total] }))] }));
|
|
26
30
|
});
|
|
27
31
|
ProgressBar.displayName = "ProgressBar";
|
|
28
32
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,YAAY,GAAG,IAAI,EAAE,KAAK,GAAG,UAAU,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;IACzG,yEAAyE;IACzE,2EAA2E;IAC3E,MAAM,YAAY,GAAG,KAAK,GAAG,CAAC,CAAC;IAC/B,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3E,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,iBAAe,MAAM,gBAAc,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,sCAAsC,EAAE,SAAS,CAAC,aACrH,cACE,IAAI,EAAC,aAAa,gBACN,KAAK,mBACF,CAAC,mBACD,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,mBAGhC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,oBACjC,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EACnE,SAAS,EAAC,sEAAsE,YAEhF,cAAK,SAAS,EAAC,gEAAgE,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,UAAU,GAAG,EAAE,GAAI,GAClH,EACL,YAAY,IAAI,CACf,MAAC,OAAO,IAAC,SAAS,EAAC,UAAU,aAC1B,SAAS,OAAG,KAAK,IACV,CACX,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { ProgressBar, type ProgressBarProps } from "./ProgressBar.js";
|
|
1
|
+
export { ProgressBar, type ProgressBarIntent, type ProgressBarIntentName, type ProgressBarProps } from "./ProgressBar.js";
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,iBAAiB,EAAE,KAAK,qBAAqB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA6E,MAAM,eAAe,CAAC"}
|
|
@@ -18,10 +18,11 @@ export type RadioButtonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "
|
|
|
18
18
|
onValueChange?: (value: string) => void;
|
|
19
19
|
/** Layout orientation */
|
|
20
20
|
orientation?: "vertical" | "horizontal";
|
|
21
|
-
/**
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
/**
|
|
22
|
+
* How the options render: `control` (the default) is one `RadioButton` per option;
|
|
23
|
+
* `segmented` and `separate` are a row or column of buttons, joined or apart.
|
|
24
|
+
*/
|
|
25
|
+
appearance?: "control" | "segmented" | "separate";
|
|
25
26
|
/** Input name for form submission */
|
|
26
27
|
name?: string;
|
|
27
28
|
/** Disable all options */
|
|
@@ -34,21 +35,22 @@ export type RadioButtonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "
|
|
|
34
35
|
* uncontrolled `string` selection, via the `value`/`defaultValue`/
|
|
35
36
|
* `onValueChange` triad (`useControllableState`).
|
|
36
37
|
*
|
|
37
|
-
* `
|
|
38
|
-
* `
|
|
39
|
-
* `RadioButton` — a row/column of plain buttons with
|
|
40
|
-
* contiguous buttons touch and share borders (`
|
|
41
|
-
*
|
|
42
|
-
*
|
|
38
|
+
* `appearance="control"` (the default) renders one `RadioButton` per option.
|
|
39
|
+
* `appearance="segmented"` or `"separate"` is a separate rendering path — not
|
|
40
|
+
* a re-skinned `RadioButton` — a row/column of plain buttons with
|
|
41
|
+
* `role="radio"`; contiguous buttons touch and share borders (`segmented`) or
|
|
42
|
+
* sit apart with their own rounded corners (`separate`). One prop rather than
|
|
43
|
+
* a `variant` + `appearance` pair, so "appearance without buttons" — which
|
|
44
|
+
* used to mean nothing — cannot be written.
|
|
43
45
|
*
|
|
44
46
|
* Implements the WAI-ARIA radiogroup keyboard pattern: the group is one tab
|
|
45
47
|
* stop, landing on the checked option (or the first enabled option if none
|
|
46
48
|
* is checked), and arrow/Home/End keys move focus *and* selection between
|
|
47
49
|
* enabled options, wrapping at the ends.
|
|
48
50
|
*
|
|
49
|
-
* Form submission only happens when `name` is set.
|
|
51
|
+
* Form submission only happens when `name` is set. With `control`
|
|
50
52
|
* that means each underlying `RadioButton` gets `name`, so one hidden
|
|
51
|
-
* native radio input is rendered per option;
|
|
53
|
+
* native radio input is rendered per option; with the button appearances the
|
|
52
54
|
* group itself renders a single hidden `<input type="hidden">` carrying the
|
|
53
55
|
* selected value.
|
|
54
56
|
*
|
|
@@ -66,10 +68,11 @@ declare const RadioButtonGroup: React.ForwardRefExoticComponent<Omit<React.HTMLA
|
|
|
66
68
|
onValueChange?: (value: string) => void;
|
|
67
69
|
/** Layout orientation */
|
|
68
70
|
orientation?: "vertical" | "horizontal";
|
|
69
|
-
/**
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
71
|
+
/**
|
|
72
|
+
* How the options render: `control` (the default) is one `RadioButton` per option;
|
|
73
|
+
* `segmented` and `separate` are a row or column of buttons, joined or apart.
|
|
74
|
+
*/
|
|
75
|
+
appearance?: "control" | "segmented" | "separate";
|
|
73
76
|
/** Input name for form submission */
|
|
74
77
|
name?: string;
|
|
75
78
|
/** Disable all options */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC,GAAG;IACtG,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB;IACxB,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,yBAAyB;IACzB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC,GAAG;IACtG,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB;IACxB,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,yBAAyB;IACzB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAClD,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,gBAAgB;IAlDpB,gCAAgC;YACxB,MAAM;IACd,mDAAmD;mBACpC,MAAM;IACrB,wBAAwB;aACf,SAAS,sBAAsB,EAAE;IAC1C,oCAAoC;oBACpB,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IACvC,yBAAyB;kBACX,UAAU,GAAG,YAAY;IACvC;;;OAGG;iBACU,SAAS,GAAG,WAAW,GAAG,UAAU;IACjD,qCAAqC;WAC9B,MAAM;IACb,0BAA0B;eACf,OAAO;IAClB,kDAAkD;aACzC,MAAM,IAAI;wCAyLpB,CAAC;AAGF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -10,28 +10,29 @@ import { getRovingTargetIndex } from "../../internal/rovingFocus.js";
|
|
|
10
10
|
* uncontrolled `string` selection, via the `value`/`defaultValue`/
|
|
11
11
|
* `onValueChange` triad (`useControllableState`).
|
|
12
12
|
*
|
|
13
|
-
* `
|
|
14
|
-
* `
|
|
15
|
-
* `RadioButton` — a row/column of plain buttons with
|
|
16
|
-
* contiguous buttons touch and share borders (`
|
|
17
|
-
*
|
|
18
|
-
*
|
|
13
|
+
* `appearance="control"` (the default) renders one `RadioButton` per option.
|
|
14
|
+
* `appearance="segmented"` or `"separate"` is a separate rendering path — not
|
|
15
|
+
* a re-skinned `RadioButton` — a row/column of plain buttons with
|
|
16
|
+
* `role="radio"`; contiguous buttons touch and share borders (`segmented`) or
|
|
17
|
+
* sit apart with their own rounded corners (`separate`). One prop rather than
|
|
18
|
+
* a `variant` + `appearance` pair, so "appearance without buttons" — which
|
|
19
|
+
* used to mean nothing — cannot be written.
|
|
19
20
|
*
|
|
20
21
|
* Implements the WAI-ARIA radiogroup keyboard pattern: the group is one tab
|
|
21
22
|
* stop, landing on the checked option (or the first enabled option if none
|
|
22
23
|
* is checked), and arrow/Home/End keys move focus *and* selection between
|
|
23
24
|
* enabled options, wrapping at the ends.
|
|
24
25
|
*
|
|
25
|
-
* Form submission only happens when `name` is set.
|
|
26
|
+
* Form submission only happens when `name` is set. With `control`
|
|
26
27
|
* that means each underlying `RadioButton` gets `name`, so one hidden
|
|
27
|
-
* native radio input is rendered per option;
|
|
28
|
+
* native radio input is rendered per option; with the button appearances the
|
|
28
29
|
* group itself renders a single hidden `<input type="hidden">` carrying the
|
|
29
30
|
* selected value.
|
|
30
31
|
*
|
|
31
32
|
* Renders `role="radiogroup"`; focus leaving the whole group — not just
|
|
32
33
|
* moving between options — fires `onBlur`.
|
|
33
34
|
*/
|
|
34
|
-
const RadioButtonGroup = React.forwardRef(({ value: controlledValue, defaultValue = "", options, onValueChange, orientation = "vertical",
|
|
35
|
+
const RadioButtonGroup = React.forwardRef(({ value: controlledValue, defaultValue = "", options, onValueChange, orientation = "vertical", appearance = "control", name, disabled, onBlur, className, ...props }, ref) => {
|
|
35
36
|
const [value, setValue] = useControllableState({
|
|
36
37
|
value: controlledValue,
|
|
37
38
|
defaultValue,
|
|
@@ -53,8 +54,8 @@ const RadioButtonGroup = React.forwardRef(({ value: controlledValue, defaultValu
|
|
|
53
54
|
const handleOptionSelect = (optionValue) => {
|
|
54
55
|
// Re-selecting the current option reports nothing, as a native radio does
|
|
55
56
|
// not. The guard lives here as well as in `RadioButton` because the button
|
|
56
|
-
//
|
|
57
|
-
// the two
|
|
57
|
+
// appearances are a separate rendering path that never goes through it —
|
|
58
|
+
// and the two paths must not disagree about this. `ToggleGroup` in
|
|
58
59
|
// `"single"` mode already works this way.
|
|
59
60
|
if (optionValue === value)
|
|
60
61
|
return;
|
|
@@ -79,7 +80,7 @@ const RadioButtonGroup = React.forwardRef(({ value: controlledValue, defaultValu
|
|
|
79
80
|
const firstEnabledValue = options.find((option) => !(disabled || option.disabled))?.value;
|
|
80
81
|
const hasCheckedOption = options.some((option) => option.value === value);
|
|
81
82
|
const tabStopValue = hasCheckedOption ? value : firstEnabledValue;
|
|
82
|
-
if (
|
|
83
|
+
if (appearance === "segmented" || appearance === "separate") {
|
|
83
84
|
const isVertical = orientation === "vertical";
|
|
84
85
|
const isSegmented = appearance === "segmented";
|
|
85
86
|
return (_jsxs("div", { ref: mergedRef, role: "radiogroup", onBlurCapture: handleFocusOut, onKeyDown: handleKeyDown, className: cn("inline-flex", isVertical ? "flex-col" : "flex-row", !isSegmented && (isVertical ? "gap-2" : "gap-2"), className), ...props, children: [options.map((option, index) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"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"}
|
|
@@ -11,8 +11,9 @@ export type SearchInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>,
|
|
|
11
11
|
* Text input specialised for search: a search icon fixed on the left and,
|
|
12
12
|
* once there is a value, a clear button on the right.
|
|
13
13
|
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
14
|
+
* Its own field, not a wrapped `Input`: the markup and classes are duplicated
|
|
15
|
+
* from Input on purpose, so importing SearchInput pulls in nothing else and
|
|
16
|
+
* its colours are its own `--search-input-*` tokens. Always controlled — `value` is required and
|
|
16
17
|
* there is no `defaultValue`/uncontrolled mode. `onValueChange` receives the
|
|
17
18
|
* string value directly; the native `onChange` keeps its event signature and
|
|
18
19
|
* fires too if passed. Clearing calls `onClear` if provided, otherwise calls
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG;IACzF,KAAK,EAAE,MAAM,CAAC;IACd,gHAAgH;IAChH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAQF;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,WAAW;WA1BR,MAAM;IACb,gHAAgH;mBACjG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;cAC5B,MAAM,IAAI;IACpB,8DAA8D;iBACjD,MAAM;0CA6DpB,CAAC;AAGF,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { Input } from "@sixthshift/design-system/input";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
3
|
import { cn } from "@sixthshift/design-system/utils";
|
|
5
4
|
import { Search, X } from "lucide-react";
|
|
6
5
|
import * as React from "react";
|
|
6
|
+
/** The icon slots, duplicated from Input's. */
|
|
7
|
+
const iconSlotStyles = `absolute top-1/2 -translate-y-1/2 text-(--search-input-icon-fg)
|
|
8
|
+
[&_svg]:h-4 [&_svg]:w-4
|
|
9
|
+
[&_button]:flex [&_button]:cursor-pointer [&_button]:appearance-none
|
|
10
|
+
[&_button]:border-0 [&_button]:bg-transparent`;
|
|
7
11
|
/**
|
|
8
12
|
* Text input specialised for search: a search icon fixed on the left and,
|
|
9
13
|
* once there is a value, a clear button on the right.
|
|
10
14
|
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
15
|
+
* Its own field, not a wrapped `Input`: the markup and classes are duplicated
|
|
16
|
+
* from Input on purpose, so importing SearchInput pulls in nothing else and
|
|
17
|
+
* its colours are its own `--search-input-*` tokens. Always controlled — `value` is required and
|
|
13
18
|
* there is no `defaultValue`/uncontrolled mode. `onValueChange` receives the
|
|
14
19
|
* string value directly; the native `onChange` keeps its event signature and
|
|
15
20
|
* fires too if passed. Clearing calls `onClear` if provided, otherwise calls
|
|
@@ -24,10 +29,10 @@ const SearchInput = React.forwardRef(({ className, value, onValueChange, onChang
|
|
|
24
29
|
onValueChange("");
|
|
25
30
|
}
|
|
26
31
|
};
|
|
27
|
-
return (_jsx(
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
32
|
+
return (_jsxs("div", { className: cn("search-input relative h-9 w-full text-sm", className), children: [_jsx("span", { className: cn(iconSlotStyles, "left-3"), children: _jsx(Search, {}) }), _jsx("input", { ref: ref, type: "text", value: value, onChange: (e) => {
|
|
33
|
+
onValueChange(e.target.value);
|
|
34
|
+
onChange?.(e);
|
|
35
|
+
}, className: cn("border-(color:--search-input-border) focus-visible:ring-(color:--search-input-ring) flex h-full w-full rounded-md border bg-(--search-input-bg) py-1 text-[length:inherit] shadow-xs transition-colors placeholder:text-(--search-input-placeholder-fg) focus-visible:outline-hidden focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50", "pl-9", value ? "pr-9" : "pr-3"), ...props }), value && (_jsx("span", { className: cn(iconSlotStyles, "right-3"), children: _jsx("button", { type: "button", onClick: handleClear, "aria-label": clearLabel, className: "rounded-sm hover:bg-(--search-input-clear-bg-hovered)", children: _jsx(X, {}) }) }))] }));
|
|
31
36
|
});
|
|
32
37
|
SearchInput.displayName = "SearchInput";
|
|
33
38
|
export { SearchInput };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,+CAA+C;AAC/C,MAAM,cAAc,GAAG;;;gDAGyB,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,GAAG,cAAc,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACrG,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,EAAE,CAAC;QACZ,CAAC;aAAM,CAAC;YACN,aAAa,CAAC,EAAE,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,aACvE,eAAM,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,QAAQ,CAAC,YAC3C,KAAC,MAAM,KAAG,GACL,EACP,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBAC9B,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;gBAChB,CAAC,EACD,SAAS,EAAE,EAAE,CACX,2VAA2V,EAC3V,MAAM,EACN,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CACxB,KACG,KAAK,GACT,EACD,KAAK,IAAI,CACR,eAAM,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,YAC5C,iBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,gBAAc,UAAU,EAAE,SAAS,EAAC,uDAAuD,YACnI,KAAC,CAAC,KAAG,GACE,GACJ,CACR,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
import type { Interpolation } from "@sixthshift/design-system/line-chart";
|
|
2
1
|
import * as React from "react";
|
|
2
|
+
/**
|
|
3
|
+
* How the line joins its points. The same four as LineChart's — duplicated, not
|
|
4
|
+
* imported, so a sparkline does not pull in the chart.
|
|
5
|
+
*/
|
|
6
|
+
export type SparklineInterpolation = "linear" | "monotone" | "stepBefore" | "stepAfter";
|
|
3
7
|
export type SparklineProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
4
8
|
data: number[];
|
|
5
9
|
width?: number;
|
|
6
10
|
height?: number;
|
|
7
11
|
color?: string;
|
|
8
12
|
fillArea?: boolean;
|
|
9
|
-
interpolation?:
|
|
13
|
+
interpolation?: SparklineInterpolation;
|
|
10
14
|
strokeWidth?: number;
|
|
11
15
|
};
|
|
12
16
|
/**
|
|
@@ -16,7 +20,7 @@ export type SparklineProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
|
16
20
|
*
|
|
17
21
|
* Requires at least 2 data points; with fewer it renders nothing (`null`).
|
|
18
22
|
* `color` is a single CSS color string (default `var(--fg-brand)`), and
|
|
19
|
-
* `interpolation`
|
|
23
|
+
* `interpolation` takes the same four values as `LineChart`'s. The
|
|
20
24
|
* accessible name is a static `aria-label="Trend line"` — it does not
|
|
21
25
|
* describe the actual values.
|
|
22
26
|
*/
|
|
@@ -26,7 +30,7 @@ export declare const Sparkline: React.ForwardRefExoticComponent<React.HTMLAttrib
|
|
|
26
30
|
height?: number;
|
|
27
31
|
color?: string;
|
|
28
32
|
fillArea?: boolean;
|
|
29
|
-
interpolation?:
|
|
33
|
+
interpolation?: SparklineInterpolation;
|
|
30
34
|
strokeWidth?: number;
|
|
31
35
|
} & React.RefAttributes<HTMLSpanElement>>;
|
|
32
36
|
//# sourceMappingURL=Sparkline.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../../src/components/Sparkline/Sparkline.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../../src/components/Sparkline/Sparkline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG,UAAU,GAAG,YAAY,GAAG,WAAW,CAAC;AAExF,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG;IACnE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAyCF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;UA3Dd,MAAM,EAAE;YACN,MAAM;aACL,MAAM;YACP,MAAM;eACH,OAAO;oBACF,sBAAsB;kBACxB,MAAM;yCAoFrB,CAAC"}
|
|
@@ -45,7 +45,7 @@ function buildPath(points, interpolation) {
|
|
|
45
45
|
*
|
|
46
46
|
* Requires at least 2 data points; with fewer it renders nothing (`null`).
|
|
47
47
|
* `color` is a single CSS color string (default `var(--fg-brand)`), and
|
|
48
|
-
* `interpolation`
|
|
48
|
+
* `interpolation` takes the same four values as `LineChart`'s. The
|
|
49
49
|
* accessible name is a static `aria-label="Trend line"` — it does not
|
|
50
50
|
* describe the actual values.
|
|
51
51
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.js","sourceRoot":"","sources":["../../../src/components/Sparkline/Sparkline.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Sparkline.js","sourceRoot":"","sources":["../../../src/components/Sparkline/Sparkline.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Sparkline, type SparklineProps } from "./Sparkline.js";
|
|
1
|
+
export { Sparkline, type SparklineInterpolation, type SparklineProps } from "./Sparkline.js";
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sparkline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sparkline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,sBAAsB,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Sparkline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Sparkline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoD,MAAM,aAAa,CAAC"}
|