@starci/grammar 0.9.5 → 0.9.8
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/LICENSE +21 -21
- package/dist/.build-stamp.json +4 -4
- package/dist/common/components-forms.css +129 -1
- package/dist/common/components-navigation.css +101 -0
- package/dist/common/components-overlays.css +17 -0
- package/dist/common/registry.d.ts +16 -16
- package/dist/common/renderers-forms.d.ts +7 -7
- package/dist/common/renderers-navigation.d.ts +5 -5
- package/dist/common/renderers-overlays.d.ts +1 -1
- package/dist/common/renderers.d.ts +1 -1
- package/dist/common/renderers.d.ts.map +1 -1
- package/dist/common/renderers.js +1 -1
- package/dist/common/renderers.js.map +1 -1
- package/dist/common/styles.css +14 -0
- package/dist/core/branch/ComboBox/index.d.ts +1 -1
- package/dist/core/branch/ComboBox/index.d.ts.map +1 -1
- package/dist/core/branch/ComboBox/index.js +14 -1
- package/dist/core/branch/ComboBox/index.js.map +1 -1
- package/dist/core/branch/Disclosure/index.d.ts +6 -1
- package/dist/core/branch/Disclosure/index.d.ts.map +1 -1
- package/dist/core/branch/Disclosure/index.js +5 -3
- package/dist/core/branch/Disclosure/index.js.map +1 -1
- package/dist/core/branch/ListBox/index.d.ts +9 -1
- package/dist/core/branch/ListBox/index.d.ts.map +1 -1
- package/dist/core/branch/ListBox/index.js +8 -2
- package/dist/core/branch/ListBox/index.js.map +1 -1
- package/dist/core/branch/Select/index.d.ts +6 -1
- package/dist/core/branch/Select/index.d.ts.map +1 -1
- package/dist/core/branch/Select/index.js +15 -4
- package/dist/core/branch/Select/index.js.map +1 -1
- package/dist/core/composite/Breadcrumbs/index.d.ts +5 -0
- package/dist/core/composite/Breadcrumbs/index.d.ts.map +1 -1
- package/dist/core/composite/Breadcrumbs/index.js +3 -2
- package/dist/core/composite/Breadcrumbs/index.js.map +1 -1
- package/dist/core/composite/ChatBubble/index.d.ts +21 -3
- package/dist/core/composite/ChatBubble/index.d.ts.map +1 -1
- package/dist/core/composite/ChatBubble/index.js +10 -1
- package/dist/core/composite/ChatBubble/index.js.map +1 -1
- package/dist/core/composite/CheckboxGroup/index.d.ts +6 -1
- package/dist/core/composite/CheckboxGroup/index.d.ts.map +1 -1
- package/dist/core/composite/CheckboxGroup/index.js +2 -2
- package/dist/core/composite/CheckboxGroup/index.js.map +1 -1
- package/dist/core/composite/SegmentedControl/index.d.ts +6 -1
- package/dist/core/composite/SegmentedControl/index.d.ts.map +1 -1
- package/dist/core/composite/SegmentedControl/index.js +5 -2
- package/dist/core/composite/SegmentedControl/index.js.map +1 -1
- package/dist/core/composite/Stepper/index.d.ts +7 -1
- package/dist/core/composite/Stepper/index.d.ts.map +1 -1
- package/dist/core/composite/Stepper/index.js +2 -1
- package/dist/core/composite/Stepper/index.js.map +1 -1
- package/dist/core/composite/Timeline/index.d.ts +8 -1
- package/dist/core/composite/Timeline/index.d.ts.map +1 -1
- package/dist/core/composite/Timeline/index.js +2 -1
- package/dist/core/composite/Timeline/index.js.map +1 -1
- package/dist/core/primitive/Avatar/index.d.ts +6 -1
- package/dist/core/primitive/Avatar/index.d.ts.map +1 -1
- package/dist/core/primitive/Avatar/index.js +2 -1
- package/dist/core/primitive/Avatar/index.js.map +1 -1
- package/dist/core/primitive/Field/index.d.ts +24 -0
- package/dist/core/primitive/Field/index.d.ts.map +1 -1
- package/dist/core/primitive/Field/index.js +15 -1
- package/dist/core/primitive/Field/index.js.map +1 -1
- package/dist/core/primitive/Input/index.d.ts +20 -3
- package/dist/core/primitive/Input/index.d.ts.map +1 -1
- package/dist/core/primitive/Input/index.js +13 -4
- package/dist/core/primitive/Input/index.js.map +1 -1
- package/dist/core/primitive/Meter/index.d.ts +7 -1
- package/dist/core/primitive/Meter/index.d.ts.map +1 -1
- package/dist/core/primitive/Meter/index.js +5 -1
- package/dist/core/primitive/Meter/index.js.map +1 -1
- package/dist/core/primitive/NumberField/index.d.ts +6 -1
- package/dist/core/primitive/NumberField/index.d.ts.map +1 -1
- package/dist/core/primitive/NumberField/index.js +2 -2
- package/dist/core/primitive/NumberField/index.js.map +1 -1
- package/dist/core/primitive/SearchField/index.d.ts +13 -1
- package/dist/core/primitive/SearchField/index.d.ts.map +1 -1
- package/dist/core/primitive/SearchField/index.js +2 -2
- package/dist/core/primitive/SearchField/index.js.map +1 -1
- package/dist/core/primitive/SectionHeader/index.d.ts +8 -1
- package/dist/core/primitive/SectionHeader/index.d.ts.map +1 -1
- package/dist/core/primitive/SectionHeader/index.js +2 -1
- package/dist/core/primitive/SectionHeader/index.js.map +1 -1
- package/dist/core/primitive/Switch/index.d.ts +6 -1
- package/dist/core/primitive/Switch/index.d.ts.map +1 -1
- package/dist/core/primitive/Switch/index.js +2 -2
- package/dist/core/primitive/Switch/index.js.map +1 -1
- package/dist/core/primitive/Textarea/index.d.ts +13 -1
- package/dist/core/primitive/Textarea/index.d.ts.map +1 -1
- package/dist/core/primitive/Textarea/index.js +10 -4
- package/dist/core/primitive/Textarea/index.js.map +1 -1
- package/dist/offset-pop/components-forms.css +29 -0
- package/dist/offset-pop/components-navigation.css +7 -0
- package/package.json +2 -2
|
@@ -14,11 +14,16 @@ export type SegmentedControlProps = FieldControlProps & {
|
|
|
14
14
|
readonly onValueChange?: (value: string) => void;
|
|
15
15
|
/** `fill` stretches the segments across the parent. */
|
|
16
16
|
readonly width?: "content" | "fill";
|
|
17
|
+
/**
|
|
18
|
+
* Initial unresolved content (knowledge STATE-8): the label stays real text and the segments become one Skeleton block of the same
|
|
19
|
+
* height (one segment-width per option; `fill` stretches it), `aria-hidden`, nothing focusable; the root is `aria-busy`.
|
|
20
|
+
*/
|
|
21
|
+
readonly isSkeleton?: boolean;
|
|
17
22
|
};
|
|
18
23
|
/**
|
|
19
24
|
* One-of-few choice drawn as joined segments (a toggle-button group in single-selection mode, so it
|
|
20
25
|
* is announced as a radio group). A segment is never deselected by pressing it again. With `name`,
|
|
21
26
|
* the selected value is submitted through a hidden input so it works inside a Form.
|
|
22
27
|
*/
|
|
23
|
-
export declare const SegmentedControl: ({ options, value, defaultValue, onValueChange, width, label, isLabelHidden, description, errorMessage, isInvalid, isRequired, isDisabled, isReadOnly, name, }: SegmentedControlProps) => import("react").JSX.Element;
|
|
28
|
+
export declare const SegmentedControl: ({ options, value, defaultValue, onValueChange, width, label, isLabelHidden, description, errorMessage, isInvalid, isRequired, isDisabled, isReadOnly, name, isSkeleton, }: SegmentedControlProps) => import("react").JSX.Element;
|
|
24
29
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/composite/SegmentedControl/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACvD,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/composite/SegmentedControl/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACvD,OAAO,EAAuD,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAE5H,MAAM,MAAM,aAAa,GAAG;IACxB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAA;IACzB,6CAA6C;IAC7C,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,GAAG;IACpD,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAC,aAAa,CAAC,CAAA;IAC9C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,uDAAuD;IACvD,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACnC;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AAOD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,2KAgB9B,qBAAqB,gCAsEvB,CAAA"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { ToggleButton as HeroToggleButton, ToggleButtonGroup as HeroToggleButtonGroup } from "@heroui/react";
|
|
4
4
|
import { useId, useState } from "react";
|
|
5
|
-
import { fieldStateAttributes, isFieldInvalid } from "../../primitive/Field/index.js";
|
|
5
|
+
import { fieldStateAttributes, FieldSkeleton, isFieldInvalid } from "../../primitive/Field/index.js";
|
|
6
6
|
const firstKey = (keys) => {
|
|
7
7
|
const first = keys[Symbol.iterator]().next();
|
|
8
8
|
return first.done ? undefined : String(first.value);
|
|
@@ -12,7 +12,7 @@ const firstKey = (keys) => {
|
|
|
12
12
|
* is announced as a radio group). A segment is never deselected by pressing it again. With `name`,
|
|
13
13
|
* the selected value is submitted through a hidden input so it works inside a Form.
|
|
14
14
|
*/
|
|
15
|
-
export const SegmentedControl = ({ options, value, defaultValue, onValueChange, width = "content", label, isLabelHidden, description, errorMessage, isInvalid, isRequired, isDisabled, isReadOnly, name, }) => {
|
|
15
|
+
export const SegmentedControl = ({ options, value, defaultValue, onValueChange, width = "content", label, isLabelHidden, description, errorMessage, isInvalid, isRequired, isDisabled, isReadOnly, name, isSkeleton = false, }) => {
|
|
16
16
|
const id = useId().replaceAll(":", "");
|
|
17
17
|
const [held, setHeld] = useState(value ?? defaultValue ?? options[0]?.value);
|
|
18
18
|
const selected = value ?? held;
|
|
@@ -21,6 +21,9 @@ export const SegmentedControl = ({ options, value, defaultValue, onValueChange,
|
|
|
21
21
|
const descriptionId = description == null ? undefined : `segmented${id}-description`;
|
|
22
22
|
const errorId = invalid && errorMessage != null ? `segmented${id}-error` : undefined;
|
|
23
23
|
const describedBy = [descriptionId, errorId].filter((part) => part !== undefined).join(" ");
|
|
24
|
+
if (isSkeleton) {
|
|
25
|
+
return _jsx(FieldSkeleton, { component: "SegmentedControl", tier: "composite", label: label, isLabelHidden: isLabelHidden, isRequired: isRequired, kind: "segmented", count: options.length, fill: width === "fill", className: "starci-core-segmented-control" });
|
|
26
|
+
}
|
|
24
27
|
return (_jsxs("div", { "data-tier": "composite", "data-component": "SegmentedControl", "data-contract": "A11Y-1 FIELD-2", "data-width": width, className: "starci-core-field starci-core-segmented-control", ...fieldStateAttributes({ isInvalid: invalid, isDisabled, isReadOnly, isRequired }), children: [_jsx("span", { id: labelId, className: isLabelHidden === true ? "starci-core-field-label starci-core-form-label--screen-reader" : "starci-core-field-label", "data-grammar-field-label": "true", children: label }), _jsx(HeroToggleButtonGroup, { "aria-labelledby": labelId, ...(describedBy === "" ? {} : { "aria-describedby": describedBy }), selectionMode: "single", disallowEmptySelection: true, fullWidth: width === "fill", ...(isDisabled === true ? { isDisabled: true } : {}), selectedKeys: selected === undefined ? [] : [selected], onSelectionChange: (keys) => {
|
|
25
28
|
const next = firstKey(keys);
|
|
26
29
|
if (isReadOnly === true || next === undefined)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/composite/SegmentedControl/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,YAAY,IAAI,gBAAgB,EAAE,iBAAiB,IAAI,qBAAqB,EAAY,MAAM,eAAe,CAAA;AACtH,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AACvD,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAA0B,MAAM,gCAAgC,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/composite/SegmentedControl/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -21,6 +21,12 @@ export type StepperProps = {
|
|
|
21
21
|
/** App-owned marker; defaults to the 1-based step number. */
|
|
22
22
|
readonly renderMarker?: (step: StepperStep, index: number, state: StepperStepState) => ReactNode;
|
|
23
23
|
readonly className?: string;
|
|
24
|
+
/**
|
|
25
|
+
* The flow is loading (knowledge STATE-8): step labels stay real text when given (an empty label draws a Skeleton text line), each
|
|
26
|
+
* marker becomes a static Skeleton circle, descriptions are not drawn, no step is current or a button, and the landmark is `aria-busy`.
|
|
27
|
+
* (A stepper draws no connector line, so there is none to tint.)
|
|
28
|
+
*/
|
|
29
|
+
readonly isLoading?: boolean;
|
|
24
30
|
};
|
|
25
31
|
/** Position-derived state: before the current step is complete, after it is upcoming. */
|
|
26
32
|
export declare const stepStateFor: (steps: ReadonlyArray<StepperStep>, currentStepId: string, index: number) => StepperStepState;
|
|
@@ -30,5 +36,5 @@ export declare const stepStateFor: (steps: ReadonlyArray<StepperStep>, currentSt
|
|
|
30
36
|
* between them. Below 30rem a horizontal stepper keeps only the current step's label in the paint.
|
|
31
37
|
* Contract: list HIERARCHY-3 (+FOCUS-2 when interactive), step STATE-1, marker ICON-6, control FOCUS-1.
|
|
32
38
|
*/
|
|
33
|
-
export declare const Stepper: ({ label, steps, currentStepId, orientation, onStepSelect, stateLabel, renderMarker, className, }: StepperProps) => import("react").JSX.Element;
|
|
39
|
+
export declare const Stepper: ({ label, steps, currentStepId, orientation, onStepSelect, stateLabel, renderMarker, className, isLoading, }: StepperProps) => import("react").JSX.Element;
|
|
34
40
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/composite/Stepper/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/composite/Stepper/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAA;AAE5E,MAAM,MAAM,WAAW,GAAG;IACtB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAA;IAChC,4FAA4F;IAC5F,QAAQ,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACvB,6DAA6D;IAC7D,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,CAAA;IAC1C,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAChD,4FAA4F;IAC5F,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,2GAA2G;IAC3G,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,MAAM,GAAG,SAAS,CAAA;IACrE,6DAA6D;IAC7D,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,KAAK,SAAS,CAAA;IAChG,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AAED,yFAAyF;AACzF,eAAO,MAAM,YAAY,GAAI,OAAO,aAAa,CAAC,WAAW,CAAC,EAAE,eAAe,MAAM,EAAE,OAAO,MAAM,KAAG,gBAMtG,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAAI,6GAUrB,YAAY,gCA+Ed,CAAA"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { moveFocusBetweenPeers } from "../../navigationKeys.js";
|
|
4
4
|
import { navigationClassName } from "../../navigationClassNames.js";
|
|
5
|
+
import { Skeleton } from "../../primitive/Skeleton/index.js";
|
|
5
6
|
/** Position-derived state: before the current step is complete, after it is upcoming. */
|
|
6
7
|
export const stepStateFor = (steps, currentStepId, index) => {
|
|
7
8
|
const step = steps[index];
|
|
@@ -18,7 +19,7 @@ export const stepStateFor = (steps, currentStepId, index) => {
|
|
|
18
19
|
* between them. Below 30rem a horizontal stepper keeps only the current step's label in the paint.
|
|
19
20
|
* Contract: list HIERARCHY-3 (+FOCUS-2 when interactive), step STATE-1, marker ICON-6, control FOCUS-1.
|
|
20
21
|
*/
|
|
21
|
-
export const Stepper = ({ label, steps, currentStepId, orientation = "horizontal", onStepSelect, stateLabel, renderMarker, className, }) => (_jsx("nav", { "aria-label": label, className: navigationClassName("starci-core-stepper", className), "data-component": "Stepper", "data-tier": "composite", "data-grammar-stepper-orientation": orientation, "data-grammar-stepper-interactive": onStepSelect === undefined ? "false" : "true", children: _jsx("ol", { className: "starci-core-stepper-list", "data-contract": onStepSelect === undefined ? "HIERARCHY-3" : "HIERARCHY-3 FOCUS-2", onKeyDown: onStepSelect === undefined ? undefined : (event) => { moveFocusBetweenPeers(event, "[data-grammar-step-control]", orientation === "vertical" ? "vertical" : "horizontal"); }, children: steps.map((step, index) => {
|
|
22
|
+
export const Stepper = ({ label, steps, currentStepId, orientation = "horizontal", onStepSelect, stateLabel, renderMarker, className, isLoading = false, }) => isLoading ? (_jsx("nav", { "aria-label": label, "aria-busy": "true", className: navigationClassName("starci-core-stepper", className), "data-component": "Stepper", "data-tier": "composite", "data-loading": "true", "data-grammar-stepper-orientation": orientation, "data-grammar-stepper-interactive": "false", children: _jsx("ol", { className: "starci-core-stepper-list", "data-contract": "HIERARCHY-3 STATE-8", children: steps.map((step) => (_jsx("li", { className: "starci-core-step", "data-contract": "STATE-1", "data-grammar-step-state": "upcoming", "data-grammar-current": "false", "data-grammar-skeleton": "true", children: _jsxs("span", { className: "starci-core-step-body", children: [_jsx("span", { "aria-hidden": "true", className: "starci-core-step-marker starci-core-step-skeleton-marker", "data-grammar-step-marker": "true", children: _jsx(Skeleton, { shape: "circle", size: "sm" }) }), _jsx("span", { className: "starci-core-step-copy", children: step.label === "" ? _jsx("span", { "aria-hidden": "true", className: "starci-core-step-skeleton-label", children: _jsx(Skeleton, { shape: "text" }) }) : _jsx("span", { className: "starci-core-step-label", "data-grammar-step-label": "true", children: step.label }) })] }) }, step.id))) }) })) : (_jsx("nav", { "aria-label": label, className: navigationClassName("starci-core-stepper", className), "data-component": "Stepper", "data-tier": "composite", "data-grammar-stepper-orientation": orientation, "data-grammar-stepper-interactive": onStepSelect === undefined ? "false" : "true", children: _jsx("ol", { className: "starci-core-stepper-list", "data-contract": onStepSelect === undefined ? "HIERARCHY-3" : "HIERARCHY-3 FOCUS-2", onKeyDown: onStepSelect === undefined ? undefined : (event) => { moveFocusBetweenPeers(event, "[data-grammar-step-control]", orientation === "vertical" ? "vertical" : "horizontal"); }, children: steps.map((step, index) => {
|
|
22
23
|
const state = stepStateFor(steps, currentStepId, index);
|
|
23
24
|
const announcement = stateLabel?.(state);
|
|
24
25
|
const content = _jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "starci-core-step-marker", "data-contract": "ICON-6", "data-grammar-step-marker": "true", children: renderMarker === undefined ? index + 1 : renderMarker(step, index, state) }), _jsxs("span", { className: "starci-core-step-copy", children: [_jsx("span", { className: "starci-core-step-label", "data-grammar-step-label": "true", children: step.label }), announcement === undefined ? null : _jsx("span", { className: "starci-core-nav-visually-hidden", children: `, ${announcement}` }), step.description === undefined ? null : _jsx("span", { className: "starci-core-step-description", "data-grammar-step-description": "true", children: step.description })] })] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/composite/Stepper/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAGZ,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/composite/Stepper/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,11 +18,18 @@ export type TimelineProps = {
|
|
|
18
18
|
readonly label: string;
|
|
19
19
|
readonly items: ReadonlyArray<TimelineItem>;
|
|
20
20
|
readonly className?: string;
|
|
21
|
+
/**
|
|
22
|
+
* The history is loading (knowledge STATE-8). With no `items` it draws `loadingRows` skeleton entries (a static marker, a title line,
|
|
23
|
+
* a time line and a description line, `aria-hidden`) in the same named list, which is `aria-busy`; real `items` win.
|
|
24
|
+
*/
|
|
25
|
+
readonly isLoading?: boolean;
|
|
26
|
+
/** How many skeleton entries a loading timeline draws (default 3, 1 to 12). */
|
|
27
|
+
readonly loadingRows?: number;
|
|
21
28
|
};
|
|
22
29
|
/**
|
|
23
30
|
* An ordered history of events. Each entry exposes `data-grammar-timeline-state` from the Common
|
|
24
31
|
* presentation states and `data-grammar-current`; the connector line is drawn by the stylesheet.
|
|
25
32
|
* Contract: list HIERARCHY-3, entry STATE-1 TRUTH-1 (closed presentation states, neutral default), marker ICON-6.
|
|
26
33
|
*/
|
|
27
|
-
export declare const Timeline: ({ label, items, className }: TimelineProps) => import("react").JSX.Element;
|
|
34
|
+
export declare const Timeline: ({ label, items, className, isLoading, loadingRows }: TimelineProps) => import("react").JSX.Element;
|
|
28
35
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/composite/Timeline/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAA2B,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/composite/Timeline/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAA2B,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAI1F,MAAM,MAAM,YAAY,GAAG;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAA;IACzB,6FAA6F;IAC7F,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,iBAAiB,CAAA;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,iDAAiD;IACjD,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IACxB,4CAA4C;IAC5C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC,CAAA;IAC3C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,+EAA+E;IAC/E,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAChC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,qDAAiE,aAAa,gCA2CtG,CAAA"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { assertPresentationState } from "../../../common/state.js";
|
|
3
3
|
import { navigationClassName } from "../../navigationClassNames.js";
|
|
4
|
+
import { Skeleton } from "../../primitive/Skeleton/index.js";
|
|
4
5
|
/**
|
|
5
6
|
* An ordered history of events. Each entry exposes `data-grammar-timeline-state` from the Common
|
|
6
7
|
* presentation states and `data-grammar-current`; the connector line is drawn by the stylesheet.
|
|
7
8
|
* Contract: list HIERARCHY-3, entry STATE-1 TRUTH-1 (closed presentation states, neutral default), marker ICON-6.
|
|
8
9
|
*/
|
|
9
|
-
export const Timeline = ({ label, items, className }) => (_jsx("ol", { "aria-label": label, className: navigationClassName("starci-core-timeline", className), "data-component": "Timeline", "data-contract": "HIERARCHY-3", "data-tier": "composite", children: items.map((item) => {
|
|
10
|
+
export const Timeline = ({ label, items, className, isLoading = false, loadingRows = 3 }) => (_jsx("ol", { "aria-label": label, "data-loading": String(isLoading), ...(isLoading ? { "aria-busy": true } : {}), className: navigationClassName("starci-core-timeline", className), "data-component": "Timeline", "data-contract": "HIERARCHY-3", "data-tier": "composite", children: isLoading && items.length === 0 ? Array.from({ length: Math.min(12, Math.max(1, Math.floor(Number.isFinite(loadingRows) ? loadingRows : 3))) }, (_, index) => (_jsxs("li", { "aria-hidden": "true", className: "starci-core-timeline-item", "data-contract": "STATE-1 STATE-8", "data-grammar-timeline-state": "neutral", "data-grammar-current": "false", "data-grammar-skeleton": "true", children: [_jsx("span", { "aria-hidden": "true", className: "starci-core-timeline-marker starci-core-timeline-skeleton-marker", "data-grammar-timeline-marker": "true", children: _jsx(Skeleton, { shape: "circle", size: "sm" }) }), _jsxs("div", { className: "starci-core-timeline-copy", children: [_jsx("p", { className: "starci-core-timeline-title", children: _jsx(Skeleton, { shape: "text" }) }), _jsx("span", { className: "starci-core-timeline-time", children: _jsx(Skeleton, { shape: "text" }) }), _jsx("div", { className: "starci-core-timeline-description", children: _jsx(Skeleton, { shape: "text" }) })] })] }, index))) : items.map((item) => {
|
|
10
11
|
const state = item.state ?? "neutral";
|
|
11
12
|
assertPresentationState(state);
|
|
12
13
|
return (_jsxs("li", { "aria-current": item.isCurrent ? "step" : undefined, className: "starci-core-timeline-item", "data-contract": "STATE-1 TRUTH-1", "data-grammar-timeline-state": state, "data-grammar-current": item.isCurrent ? "true" : "false", children: [_jsx("span", { "aria-hidden": "true", className: "starci-core-timeline-marker", "data-contract": "ICON-6", "data-grammar-timeline-marker": "true", children: item.marker }), _jsxs("div", { className: "starci-core-timeline-copy", children: [_jsx("p", { className: "starci-core-timeline-title", children: item.title }), item.timeLabel === undefined ? null : (_jsx("time", { className: "starci-core-timeline-time", ...(item.dateTime === undefined ? {} : { dateTime: item.dateTime }), children: item.timeLabel })), item.description === undefined ? null : _jsx("div", { className: "starci-core-timeline-description", children: item.description })] })] }, item.id));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/composite/Timeline/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,uBAAuB,EAA0B,MAAM,0BAA0B,CAAA;AAC1F,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/composite/Timeline/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -12,6 +12,11 @@ export type AvatarProps = {
|
|
|
12
12
|
/** Selected/current identity, e.g. the active account in a switcher. */
|
|
13
13
|
readonly isCurrent?: boolean;
|
|
14
14
|
readonly className?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Initial unresolved identity (knowledge STATE-8): a Skeleton circle at the avatar's `size`, `aria-hidden` (no name, no image, no
|
|
17
|
+
* initials). The owning list or card carries `aria-busy`.
|
|
18
|
+
*/
|
|
19
|
+
readonly isSkeleton?: boolean;
|
|
15
20
|
};
|
|
16
21
|
/** Up to two initials from a display name; letters only come from the name the app supplied. */
|
|
17
22
|
export declare const avatarInitials: (name: string) => string;
|
|
@@ -30,5 +35,5 @@ export declare const avatarA11yProps: (name: string, isDecorative: boolean) => {
|
|
|
30
35
|
* A person or entity mark with image, initials fallback and an explicit accessible name.
|
|
31
36
|
* Contract: ICON-6 (named once or aria-hidden when decorative), MEDIA-5 (initials while loading/failed).
|
|
32
37
|
*/
|
|
33
|
-
export declare const Avatar: ({ name, src, fallback, size, isDecorative, isCurrent, className }: AvatarProps) => import("react").JSX.Element;
|
|
38
|
+
export declare const Avatar: ({ name, src, fallback, size, isDecorative, isCurrent, className, isSkeleton }: AvatarProps) => import("react").JSX.Element;
|
|
34
39
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/primitive/Avatar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/primitive/Avatar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,MAAM,MAAM,WAAW,GAAG;IACtB,6EAA6E;IAC7E,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAA;IACrB,8FAA8F;IAC9F,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;IAC7B,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAA;IAC1B,+FAA+F;IAC/F,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAA;IAC/B,wEAAwE;IACxE,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AAED,gGAAgG;AAChG,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,KAAG,MAOtB,CAAA;AAExB,mFAAmF;AACnF,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,EAAE,KAAK,MAAM,GAAG,SAAS,EAAE,UAAU,SAAS,GAAG,SAAS,gCAG/F,CAAA;AAEH,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,cAAc,OAAO;;;;;;;;CAEjB,CAAA;AAElD;;;GAGG;AACH,eAAO,MAAM,MAAM,GAAI,+EAA8G,WAAW,gCA0B/I,CAAA"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Avatar as HeroAvatar } from "@heroui/react";
|
|
4
4
|
import { navigationClassName } from "../../navigationClassNames.js";
|
|
5
|
+
import { Skeleton } from "../Skeleton/index.js";
|
|
5
6
|
/** Up to two initials from a display name; letters only come from the name the app supplied. */
|
|
6
7
|
export const avatarInitials = (name) => name
|
|
7
8
|
.trim()
|
|
@@ -20,5 +21,5 @@ export const avatarA11yProps = (name, isDecorative) => isDecorative
|
|
|
20
21
|
* A person or entity mark with image, initials fallback and an explicit accessible name.
|
|
21
22
|
* Contract: ICON-6 (named once or aria-hidden when decorative), MEDIA-5 (initials while loading/failed).
|
|
22
23
|
*/
|
|
23
|
-
export const Avatar = ({ name, src, fallback, size = "md", isDecorative = false, isCurrent = false, className }) => (_jsx(HeroAvatar, { ...avatarA11yProps(name, isDecorative), className: navigationClassName("starci-core-avatar", className), "data-component": "Avatar", "data-contract": "ICON-6 MEDIA-5", "data-tier": "atom", "data-grammar-avatar-size": size, "data-grammar-current": isCurrent ? "true" : "false", size: size, children: avatarParts(name, src, fallback) }));
|
|
24
|
+
export const Avatar = ({ name, src, fallback, size = "md", isDecorative = false, isCurrent = false, className, isSkeleton = false }) => isSkeleton ? (_jsx("span", { "aria-hidden": "true", className: navigationClassName("starci-core-avatar starci-core-avatar-skeleton", className), "data-component": "Avatar", "data-contract": "STATE-8", "data-tier": "atom", "data-grammar-avatar-size": size, "data-grammar-current": "false", "data-grammar-skeleton": "true", children: _jsx(Skeleton, { shape: "circle", size: size }) })) : (_jsx(HeroAvatar, { ...avatarA11yProps(name, isDecorative), className: navigationClassName("starci-core-avatar", className), "data-component": "Avatar", "data-contract": "ICON-6 MEDIA-5", "data-tier": "atom", "data-grammar-avatar-size": size, "data-grammar-current": isCurrent ? "true" : "false", size: size, children: avatarParts(name, src, fallback) }));
|
|
24
25
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/primitive/Avatar/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,eAAe,CAAA;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/primitive/Avatar/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,eAAe,CAAA;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAA;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAuB/C,gGAAgG;AAChG,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAY,EAAU,EAAE,CAAC,IAAI;KACvD,IAAI,EAAE;KACN,KAAK,CAAC,KAAK,CAAC;KACZ,MAAM,CAAC,OAAO,CAAC;KACf,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;KACX,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;KACxC,IAAI,CAAC,EAAE,CAAC;KACR,iBAAiB,EAAE,CAAA;AAExB,mFAAmF;AACnF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,GAAuB,EAAE,QAA+B,EAAE,EAAE,CAAC,8BAClG,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,UAAU,CAAC,KAAK,IAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAE,GAAG,GAAI,EACjE,KAAC,UAAU,CAAC,QAAQ,mBAAa,MAAM,kCAA8B,MAAM,YAAE,QAAQ,IAAI,cAAc,CAAC,IAAI,CAAC,GAAuB,IACrI,CAAA;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAY,EAAE,YAAqB,EAAE,EAAE,CAAC,YAAY;IAChF,CAAC,CAAC,EAAE,aAAa,EAAE,IAAa,EAAE;IAClC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAc,EAAE,YAAY,EAAE,IAAI,EAAE,CAAA;AAElD;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAE,YAAY,GAAG,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,SAAS,EAAE,UAAU,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAC9J,8BACgB,MAAM,EAClB,SAAS,EAAE,mBAAmB,CAAC,gDAAgD,EAAE,SAAS,CAAC,oBAC5E,QAAQ,mBACT,SAAS,eACb,MAAM,8BACU,IAAI,0BACT,OAAO,2BACN,MAAM,YAE5B,KAAC,QAAQ,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,GAAI,GACpC,CACV,CAAC,CAAC,CAAC,CACA,KAAC,UAAU,OACH,eAAe,CAAC,IAAI,EAAE,YAAY,CAAC,EACvC,SAAS,EAAE,mBAAmB,CAAC,oBAAoB,EAAE,SAAS,CAAC,oBAChD,QAAQ,mBACT,gBAAgB,eACpB,MAAM,8BACU,IAAI,0BACR,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAClD,IAAI,EAAE,IAAI,YAET,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,CAAC,GACxB,CAChB,CAAA"}
|
|
@@ -136,4 +136,28 @@ export type FieldProps = FieldControlProps & {
|
|
|
136
136
|
* control so a custom control is announced exactly like a Grammar one.
|
|
137
137
|
*/
|
|
138
138
|
export declare const Field: ({ id: idProp, label, isLabelHidden, description, errorMessage, isInvalid, isRequired, isDisabled, isReadOnly, name, children, }: FieldProps) => import("react").JSX.Element;
|
|
139
|
+
export type FieldSkeletonKind = "select" | "textarea" | "input" | "segmented" | "choices" | "switch";
|
|
140
|
+
/**
|
|
141
|
+
* Loading view of a field (knowledge STATE-8): the label stays real text, the control becomes Skeleton geometry of the loaded
|
|
142
|
+
* control's size. The geometry is `aria-hidden` and nothing in it is focusable; the root owns `aria-busy`. Description and error
|
|
143
|
+
* copy are not drawn (they are content, and nothing is invalid while loading).
|
|
144
|
+
* `kind`: `select` and `input` a one-line field block, `textarea` the `rows` height, `segmented` a joined-segments block
|
|
145
|
+
* (`count` segments wide; `fill` stretches it), `choices` one Skeleton box per option beside its real label, `switch` a
|
|
146
|
+
* Skeleton track beside the real label.
|
|
147
|
+
*/
|
|
148
|
+
export declare const FieldSkeleton: ({ component, tier, label, isLabelHidden, isRequired, variant, kind, rows, count, fill, choiceLabels, orientation, className }: {
|
|
149
|
+
readonly component: string;
|
|
150
|
+
readonly tier: "atom" | "branch" | "composite";
|
|
151
|
+
readonly label: ReactNode;
|
|
152
|
+
readonly isLabelHidden?: boolean | undefined;
|
|
153
|
+
readonly isRequired?: boolean | undefined;
|
|
154
|
+
readonly variant?: FieldVariant | undefined;
|
|
155
|
+
readonly kind: FieldSkeletonKind;
|
|
156
|
+
readonly rows?: number;
|
|
157
|
+
readonly count?: number;
|
|
158
|
+
readonly fill?: boolean;
|
|
159
|
+
readonly choiceLabels?: ReadonlyArray<ReactNode>;
|
|
160
|
+
readonly orientation?: "vertical" | "horizontal";
|
|
161
|
+
readonly className: string;
|
|
162
|
+
}) => import("react").JSX.Element;
|
|
139
163
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/primitive/Field/index.tsx"],"names":[],"mappings":"AAOA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/primitive/Field/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { Description as HeroDescription, FieldError as HeroFieldError, Label as HeroLabel, } from "@heroui/react";
|
|
4
4
|
import { useCallback, useId, useState } from "react";
|
|
5
|
+
import { Skeleton } from "../Skeleton/index.js";
|
|
5
6
|
/** The hook a rendered control carries so a gate reads its layer variant without vendor class names. */
|
|
6
7
|
export const fieldVariantAttributes = (variant) => ({ "data-grammar-variant": variant });
|
|
7
8
|
/** Folds the control's state into the render-neutral presentation vocabulary. */
|
|
@@ -99,4 +100,17 @@ export const Field = ({ id: idProp, label, isLabelHidden, description, errorMess
|
|
|
99
100
|
...(isReadOnly === true ? { readOnly: true } : {}),
|
|
100
101
|
}) }), errorId === undefined ? null : (_jsx("span", { id: errorId, className: "starci-core-field-error", "data-grammar-field-error": "true", "data-contract": "FEEDBACK-1", children: errorMessage }))] }));
|
|
101
102
|
};
|
|
103
|
+
/**
|
|
104
|
+
* Loading view of a field (knowledge STATE-8): the label stays real text, the control becomes Skeleton geometry of the loaded
|
|
105
|
+
* control's size. The geometry is `aria-hidden` and nothing in it is focusable; the root owns `aria-busy`. Description and error
|
|
106
|
+
* copy are not drawn (they are content, and nothing is invalid while loading).
|
|
107
|
+
* `kind`: `select` and `input` a one-line field block, `textarea` the `rows` height, `segmented` a joined-segments block
|
|
108
|
+
* (`count` segments wide; `fill` stretches it), `choices` one Skeleton box per option beside its real label, `switch` a
|
|
109
|
+
* Skeleton track beside the real label.
|
|
110
|
+
*/
|
|
111
|
+
export const FieldSkeleton = ({ component, tier, label, isLabelHidden, isRequired, variant, kind, rows, count, fill, choiceLabels, orientation, className }) => {
|
|
112
|
+
const geometry = (shape, style, extra) => (_jsx("span", { "aria-hidden": "true", className: "starci-core-field-skeleton-control", "data-grammar-field-skeleton": shape, ...(extra ?? {}), ...(style === undefined ? {} : { style }), children: _jsx(Skeleton, { shape: "rect" }) }));
|
|
113
|
+
const labelNode = (_jsxs("span", { className: labelClassName(isLabelHidden), "data-grammar-field-label": "true", children: [label, isRequired === true ? _jsx("span", { "aria-hidden": "true", className: "starci-core-field-required", children: "*" }) : null] }));
|
|
114
|
+
return (_jsx("div", { "data-tier": tier, "data-component": component, "data-contract": "A11Y-1 FIELD-1 STATE-8", className: `${kind === "switch" ? "starci-core-choice" : "starci-core-field"} ${className} starci-core-field-skeleton`, ...(variant === undefined ? {} : fieldVariantAttributes(variant)), ...(orientation === undefined ? {} : { "data-grammar-orientation": orientation }), "data-grammar-skeleton": "true", "data-loading": "true", "aria-busy": "true", children: kind === "switch" ? (_jsxs("span", { className: "starci-core-choice-content", children: [geometry("switch"), labelNode] })) : (_jsxs(_Fragment, { children: [labelNode, kind === "choices" ? (_jsx("div", { className: "starci-core-choice-group-options", children: (choiceLabels ?? []).map((choiceLabel, index) => (_jsxs("span", { className: "starci-core-choice-content", children: [geometry("choice"), _jsx("span", { className: "starci-core-field-skeleton-choice-label", children: choiceLabel })] }, index))) })) : kind === "textarea" ? (geometry("textarea", { "--starci-core-skeleton-rows": Math.max(1, Math.round(Number.isFinite(rows) ? rows : 4)) })) : kind === "segmented" ? (geometry("segmented", { "--starci-core-skeleton-segments": Math.max(1, Math.round(count ?? 2)) }, { "data-width": fill === true ? "fill" : "content" })) : (geometry(kind))] })) }));
|
|
115
|
+
};
|
|
102
116
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/primitive/Field/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EACH,WAAW,IAAI,eAAe,EAC9B,UAAU,IAAI,cAAc,EAC5B,KAAK,IAAI,SAAS,GACrB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/primitive/Field/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ComponentType, type ReactNode } from "react";
|
|
1
|
+
import { type ClipboardEvent, type ComponentType, type ReactNode } from "react";
|
|
2
2
|
export type InputKind = "email" | "tel" | "password" | "newPassword" | "code" | "text";
|
|
3
3
|
export type InputVariant = "primary" | "secondary";
|
|
4
4
|
type InputIcon = ComponentType<{
|
|
@@ -8,6 +8,8 @@ export type InputProps = {
|
|
|
8
8
|
readonly id: string;
|
|
9
9
|
readonly name: string;
|
|
10
10
|
readonly label: ReactNode;
|
|
11
|
+
/** Keeps the label as the accessible name but hides it visually (a row of inputs that label themselves by position). */
|
|
12
|
+
readonly isLabelHidden?: boolean;
|
|
11
13
|
readonly kind?: InputKind;
|
|
12
14
|
readonly variant?: InputVariant;
|
|
13
15
|
readonly placeholder?: string;
|
|
@@ -38,8 +40,23 @@ export type InputProps = {
|
|
|
38
40
|
readonly revealIcon?: InputIcon;
|
|
39
41
|
readonly hideIcon?: InputIcon;
|
|
40
42
|
readonly onValueChange?: (value: string) => void;
|
|
43
|
+
/** Focus left the input itself (not an in-field action). Forwarded to the underlying input. */
|
|
44
|
+
readonly onBlur?: () => void;
|
|
45
|
+
/** The native paste event of the input, before the value changes; `preventDefault()` keeps the vendor from inserting. */
|
|
46
|
+
readonly onPaste?: (event: ClipboardEvent<HTMLInputElement>) => void;
|
|
47
|
+
/** Focuses the input when it mounts (a row that was just added, a drawer that just opened). */
|
|
48
|
+
readonly autoFocus?: boolean;
|
|
41
49
|
};
|
|
42
|
-
/**
|
|
43
|
-
|
|
50
|
+
/**
|
|
51
|
+
* Core ownership boundary for label, guidance, control state, and validation copy.
|
|
52
|
+
*
|
|
53
|
+
* Layout: the field is a grid of label, hint, control box and error. The error message is the LAST row and reserves no
|
|
54
|
+
* space until it exists, so showing or clearing it moves nothing above it: the control box keeps its position and height.
|
|
55
|
+
* A row that puts a trailing action beside the field (an input and a Delete button) aligns that action to the control
|
|
56
|
+
* box, not to the whole field: `[data-grammar-input-control="true"]` is the control box (the input and its in-field
|
|
57
|
+
* actions). Give the row `align-items: start` and align the action to that box (offset by the label and hint above it),
|
|
58
|
+
* so an error appearing under the field never shifts the action.
|
|
59
|
+
*/
|
|
60
|
+
export declare const Input: ({ id, name, label, isLabelHidden, kind: kindName, variant, placeholder, defaultValue, value, hint, errorMessage, isError, isDisabled, isRequired, isSkeleton, isReadOnly, isCopyable, copyLabel, copiedLabel, copyIcon: CopyIcon, copiedIcon: CopiedIcon, onCopy, revealLabel, hideLabel, revealIcon: RevealIcon, hideIcon: HideIcon, onValueChange, onBlur, onPaste, autoFocus, }: InputProps) => import("react").JSX.Element;
|
|
44
61
|
export {};
|
|
45
62
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/primitive/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,KAAK,aAAa,EAAsB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/primitive/Input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,KAAK,cAAc,EAAE,KAAK,aAAa,EAAsB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAUjJ,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,CAAA;AACtF,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,CAAA;AAElD,KAAK,SAAS,GAAG,aAAa,CAAC;IAAE,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AAE/D,MAAM,MAAM,UAAU,GAAG;IACrB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAA;IACzB,wHAAwH;IACxH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAA;IAC/B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAA;IACjC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,sHAAsH;IACtH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,2GAA2G;IAC3G,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;IAC/B,mEAAmE;IACnE,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;IAC7B,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,+FAA+F;IAC/F,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,yHAAyH;IACzH,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACpE,+FAA+F;IAC/F,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AAWD;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,GAAI,oXA+BnB,UAAU,gCAqIZ,CAAA"}
|
|
@@ -10,8 +10,17 @@ const KINDS = {
|
|
|
10
10
|
code: { type: "text", autoComplete: "one-time-code", inputMode: "numeric" },
|
|
11
11
|
text: { type: "text", autoComplete: "off", inputMode: "text" },
|
|
12
12
|
};
|
|
13
|
-
/**
|
|
14
|
-
|
|
13
|
+
/**
|
|
14
|
+
* Core ownership boundary for label, guidance, control state, and validation copy.
|
|
15
|
+
*
|
|
16
|
+
* Layout: the field is a grid of label, hint, control box and error. The error message is the LAST row and reserves no
|
|
17
|
+
* space until it exists, so showing or clearing it moves nothing above it: the control box keeps its position and height.
|
|
18
|
+
* A row that puts a trailing action beside the field (an input and a Delete button) aligns that action to the control
|
|
19
|
+
* box, not to the whole field: `[data-grammar-input-control="true"]` is the control box (the input and its in-field
|
|
20
|
+
* actions). Give the row `align-items: start` and align the action to that box (offset by the label and hint above it),
|
|
21
|
+
* so an error appearing under the field never shifts the action.
|
|
22
|
+
*/
|
|
23
|
+
export const Input = ({ id, name, label, isLabelHidden = false, kind: kindName = "text", variant = "primary", placeholder, defaultValue, value, hint, errorMessage, isError = false, isDisabled = false, isRequired = false, isSkeleton = false, isReadOnly = false, isCopyable = false, copyLabel, copiedLabel, copyIcon: CopyIcon, copiedIcon: CopiedIcon, onCopy, revealLabel, hideLabel, revealIcon: RevealIcon, hideIcon: HideIcon, onValueChange, onBlur, onPaste, autoFocus = false, }) => {
|
|
15
24
|
const [isRevealed, setIsRevealed] = useState(false);
|
|
16
25
|
const kind = KINDS[kindName];
|
|
17
26
|
const isSecret = kindName === "password" || kindName === "newPassword";
|
|
@@ -62,10 +71,10 @@ export const Input = ({ id, name, label, kind: kindName = "text", variant = "pri
|
|
|
62
71
|
}
|
|
63
72
|
};
|
|
64
73
|
if (isSkeleton) {
|
|
65
|
-
return (_jsxs("div", { "data-tier": "atom", "data-component": "Input", "data-state": "skeleton", "data-contract": "GAP-2", className: "starci-core-input", children: [_jsx(HeroSkeleton, { className: "starci-core-input-resting-label" }), _jsx(HeroSkeleton, { className: "starci-core-input-resting-control" })] }));
|
|
74
|
+
return (_jsxs("div", { "data-tier": "atom", "data-component": "Input", "data-state": "skeleton", "data-contract": "GAP-2", className: "starci-core-input", children: [isLabelHidden ? null : _jsx(HeroSkeleton, { className: "starci-core-input-resting-label" }), _jsx(HeroSkeleton, { className: "starci-core-input-resting-control" })] }));
|
|
66
75
|
}
|
|
67
76
|
return (_jsxs(HeroTextField, { "data-tier": "atom", "data-component": "Input", fullWidth: true, variant: variant, "data-grammar-variant": variant, isInvalid: invalid, isDisabled: isDisabled, isRequired: isRequired, isReadOnly: isReadOnly, ...(value === undefined
|
|
68
77
|
? defaultValue === undefined ? {} : { defaultValue }
|
|
69
|
-
: { value }), onChange: (next) => onValueChange?.(next), "data-grammar-readonly": isReadOnly ? "true" : "false", "data-contract": "GAP-2", className: "starci-core-input", children: [_jsx(HeroLabel, { children: label }), hint == null ? null : _jsx(HeroDescription, { children: hint }), _jsxs("div", { className: "starci-core-input-control", "data-reveal": canReveal ? "true" : "false", "data-copyable": canCopy ? "true" : "false", style: actionsWidth === null ? undefined : { "--starci-core-input-actions-width": `${actionsWidth}px` }, children: [_jsx(HeroInput, { id: id, name: name, type: isSecret && isRevealed ? "text" : kind.type, autoComplete: kind.autoComplete, inputMode: kind.inputMode, ...(placeholder === undefined ? {} : { placeholder }), fullWidth: true, className: "starci-core-input-field" }), canReveal || canCopy ? (_jsxs("span", { ref: actions, className: "starci-core-input-actions", children: [canReveal ? (_jsx("button", { type: "button", "aria-label": toggleLabel, disabled: isDisabled, "data-contract": "TONE-2", className: "starci-core-input-reveal", onClick: () => setIsRevealed((current) => !current), children: ToggleIcon === undefined ? _jsx("span", { "data-contract": "FONT-1", className: "starci-core-input-reveal-label", children: toggleLabel }) : _jsx(ToggleIcon, { className: "starci-core-input-reveal-icon" }) })) : null, canCopy ? (_jsx("button", { type: "button", "aria-label": copyName, disabled: isDisabled, "data-contract": "TONE-2", "data-copied": isCopied ? "true" : "false", className: "starci-core-input-reveal starci-core-input-copy", onClick: () => void copy(), children: CopyGlyph === undefined ? _jsx("span", { "data-contract": "FONT-1", className: "starci-core-input-reveal-label", children: copyName }) : _jsx(CopyGlyph, { className: "starci-core-input-reveal-icon" }) })) : null, _jsx("span", { className: "starci-core-input-live", "aria-live": "polite", children: isCopied ? copiedLabel ?? "" : "" })] })) : null] }), errorMessage == null ? null : _jsx(HeroErrorMessage, { children: errorMessage })] }));
|
|
78
|
+
: { value }), onChange: (next) => onValueChange?.(next), "data-grammar-readonly": isReadOnly ? "true" : "false", "data-contract": "GAP-2", className: "starci-core-input", children: [_jsx(HeroLabel, { ...(isLabelHidden ? { className: "starci-core-form-label--screen-reader" } : {}), children: label }), hint == null ? null : _jsx(HeroDescription, { children: hint }), _jsxs("div", { className: "starci-core-input-control", "data-grammar-input-control": "true", "data-reveal": canReveal ? "true" : "false", "data-copyable": canCopy ? "true" : "false", style: actionsWidth === null ? undefined : { "--starci-core-input-actions-width": `${actionsWidth}px` }, children: [_jsx(HeroInput, { id: id, name: name, type: isSecret && isRevealed ? "text" : kind.type, autoComplete: kind.autoComplete, inputMode: kind.inputMode, ...(placeholder === undefined ? {} : { placeholder }), fullWidth: true, className: "starci-core-input-field", ...(autoFocus ? { autoFocus: true } : {}), ...(onBlur === undefined ? {} : { onBlur: () => onBlur() }), ...(onPaste === undefined ? {} : { onPaste }) }), canReveal || canCopy ? (_jsxs("span", { ref: actions, className: "starci-core-input-actions", children: [canReveal ? (_jsx("button", { type: "button", "aria-label": toggleLabel, disabled: isDisabled, "data-contract": "TONE-2", className: "starci-core-input-reveal", onClick: () => setIsRevealed((current) => !current), children: ToggleIcon === undefined ? _jsx("span", { "data-contract": "FONT-1", className: "starci-core-input-reveal-label", children: toggleLabel }) : _jsx(ToggleIcon, { className: "starci-core-input-reveal-icon" }) })) : null, canCopy ? (_jsx("button", { type: "button", "aria-label": copyName, disabled: isDisabled, "data-contract": "TONE-2", "data-copied": isCopied ? "true" : "false", className: "starci-core-input-reveal starci-core-input-copy", onClick: () => void copy(), children: CopyGlyph === undefined ? _jsx("span", { "data-contract": "FONT-1", className: "starci-core-input-reveal-label", children: copyName }) : _jsx(CopyGlyph, { className: "starci-core-input-reveal-icon" }) })) : null, _jsx("span", { className: "starci-core-input-live", "aria-live": "polite", children: isCopied ? copiedLabel ?? "" : "" })] })) : null] }), errorMessage == null ? null : _jsx(HeroErrorMessage, { children: errorMessage })] }));
|
|
70
79
|
};
|
|
71
80
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/primitive/Input/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/primitive/Input/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -25,6 +25,12 @@ export type MeterProps = {
|
|
|
25
25
|
* accessible name and `aria-value*`. Out-of-range counts from untyped callers clamp to 2..12.
|
|
26
26
|
*/
|
|
27
27
|
readonly segments?: MeterSegments;
|
|
28
|
+
/**
|
|
29
|
+
* Initial unresolved reading (knowledge STATE-8), the twin of `Progress isSkeleton`: the `label` stays real text, the
|
|
30
|
+
* bar is a static Skeleton bar of the track height, and no `role="meter"`, value or reading is announced (a skeleton is
|
|
31
|
+
* not a zero measurement). The geometry is `aria-hidden`; the root is `aria-busy`. `value`, `tone` and `segments` are ignored.
|
|
32
|
+
*/
|
|
33
|
+
readonly isSkeleton?: boolean;
|
|
28
34
|
};
|
|
29
|
-
export declare const Meter: ({ label, value, minValue, maxValue, valueLabel, tone, isLabelHidden, segments, }: MeterProps) => import("react").JSX.Element;
|
|
35
|
+
export declare const Meter: ({ label, value, minValue, maxValue, valueLabel, tone, isLabelHidden, segments, isSkeleton, }: MeterProps) => import("react").JSX.Element;
|
|
30
36
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/primitive/Meter/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/primitive/Meter/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAIjE;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;AAExE,MAAM,MAAM,UAAU,GAAG;IACrB,4FAA4F;IAC5F,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAC1B,qFAAqF;IACrF,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,0FAA0F;IAC1F,QAAQ,CAAC,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACjC,qEAAqE;IACrE,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC;;;;;;;OAOG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAA;IACjC;;;;OAIG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AA0BD,eAAO,MAAM,KAAK,GAAI,8FAUnB,UAAU,gCAmEZ,CAAA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Label as HeroLabel, Meter as HeroMeter } from "@heroui/react";
|
|
3
3
|
import { vendorStatusFor } from "../../overlayScope.js";
|
|
4
|
+
import { Skeleton } from "../Skeleton/index.js";
|
|
4
5
|
const MIN_SEGMENTS = 2;
|
|
5
6
|
const MAX_SEGMENTS = 12;
|
|
6
7
|
/** A whole segment count in 2..12, whatever an untyped caller passed. */
|
|
@@ -21,7 +22,10 @@ const wholeNumber = (value, fallback) => (Number.isFinite(value) ? Math.round(va
|
|
|
21
22
|
* `data-grammar-meter-segments` and each segment its state on `data-grammar-meter-segment`.
|
|
22
23
|
*/
|
|
23
24
|
const renderMeterRoot = (domProps) => _jsx("div", { ...domProps, role: "meter" });
|
|
24
|
-
export const Meter = ({ label, value, minValue = 0, maxValue = 100, valueLabel, tone = "neutral", isLabelHidden = false, segments, }) => {
|
|
25
|
+
export const Meter = ({ label, value, minValue = 0, maxValue = 100, valueLabel, tone = "neutral", isLabelHidden = false, segments, isSkeleton = false, }) => {
|
|
26
|
+
if (isSkeleton) {
|
|
27
|
+
return (_jsxs("div", { "data-tier": "atom", "data-component": "Meter", "data-loading": "true", "data-grammar-skeleton": "true", "data-grammar-tone": "neutral", "data-contract": "A11Y-3 STATE-8", "aria-busy": "true", className: "starci-core-meter starci-core-meter-skeleton", children: [_jsx("span", { className: "starci-core-meter-header", children: _jsx("span", { className: isLabelHidden ? "starci-core-meter-label starci-core-form-label--screen-reader" : "starci-core-meter-label", children: label }) }), _jsx("span", { "aria-hidden": "true", "data-slot": "meter-track", className: "starci-core-meter-skeleton-bar", children: _jsx(Skeleton, { shape: "rect" }) })] }));
|
|
28
|
+
}
|
|
25
29
|
const status = vendorStatusFor(tone);
|
|
26
30
|
const count = segments === undefined ? undefined : clampSegments(segments);
|
|
27
31
|
const min = count === undefined ? minValue : wholeNumber(minValue, 0);
|