@misoto22/kioku-ui 0.0.0 → 0.1.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/package.json +1 -1
- package/dist/components/Alert.d.ts +0 -7
- package/dist/components/Alert.doc.d.ts +0 -11
- package/dist/components/Alert.doc.js +0 -15
- package/dist/components/Alert.js +0 -149
- package/dist/components/AsyncState.d.ts +0 -30
- package/dist/components/AsyncState.doc.d.ts +0 -16
- package/dist/components/AsyncState.doc.js +0 -16
- package/dist/components/AsyncState.js +0 -36
- package/dist/components/Badge.d.ts +0 -10
- package/dist/components/Badge.doc.d.ts +0 -11
- package/dist/components/Badge.doc.js +0 -12
- package/dist/components/Badge.js +0 -58
- package/dist/components/Button.d.ts +0 -18
- package/dist/components/Button.doc.d.ts +0 -11
- package/dist/components/Button.doc.js +0 -18
- package/dist/components/Button.js +0 -151
- package/dist/components/Card.d.ts +0 -6
- package/dist/components/Card.doc.d.ts +0 -11
- package/dist/components/Card.doc.js +0 -15
- package/dist/components/Card.js +0 -41
- package/dist/components/CardFooter.d.ts +0 -3
- package/dist/components/CardFooter.doc.d.ts +0 -11
- package/dist/components/CardFooter.doc.js +0 -12
- package/dist/components/CardFooter.js +0 -16
- package/dist/components/CardHeader.d.ts +0 -3
- package/dist/components/CardHeader.doc.d.ts +0 -11
- package/dist/components/CardHeader.doc.js +0 -12
- package/dist/components/CardHeader.js +0 -16
- package/dist/components/Center.d.ts +0 -3
- package/dist/components/Center.doc.d.ts +0 -11
- package/dist/components/Center.doc.js +0 -12
- package/dist/components/Center.js +0 -15
- package/dist/components/Divider.d.ts +0 -3
- package/dist/components/Divider.doc.d.ts +0 -11
- package/dist/components/Divider.doc.js +0 -12
- package/dist/components/Divider.js +0 -12
- package/dist/components/EmptyState.d.ts +0 -11
- package/dist/components/EmptyState.doc.d.ts +0 -16
- package/dist/components/EmptyState.doc.js +0 -25
- package/dist/components/EmptyState.js +0 -55
- package/dist/components/Field.d.ts +0 -21
- package/dist/components/Field.doc.d.ts +0 -16
- package/dist/components/Field.doc.js +0 -28
- package/dist/components/Field.js +0 -117
- package/dist/components/Grid.d.ts +0 -7
- package/dist/components/Grid.doc.d.ts +0 -11
- package/dist/components/Grid.doc.js +0 -15
- package/dist/components/Grid.js +0 -76
- package/dist/components/Heading.d.ts +0 -293
- package/dist/components/Heading.doc.d.ts +0 -16
- package/dist/components/Heading.doc.js +0 -19
- package/dist/components/Heading.js +0 -46
- package/dist/components/IconButton.d.ts +0 -9
- package/dist/components/IconButton.doc.d.ts +0 -16
- package/dist/components/IconButton.doc.js +0 -22
- package/dist/components/IconButton.js +0 -11
- package/dist/components/MetricGrid.d.ts +0 -10
- package/dist/components/MetricGrid.doc.d.ts +0 -12
- package/dist/components/MetricGrid.doc.js +0 -13
- package/dist/components/MetricGrid.js +0 -37
- package/dist/components/Section.d.ts +0 -6
- package/dist/components/Section.doc.d.ts +0 -11
- package/dist/components/Section.doc.js +0 -12
- package/dist/components/Section.js +0 -49
- package/dist/components/SegmentedControl.d.ts +0 -31
- package/dist/components/SegmentedControl.doc.d.ts +0 -16
- package/dist/components/SegmentedControl.doc.js +0 -34
- package/dist/components/SegmentedControl.js +0 -108
- package/dist/components/Skeleton.d.ts +0 -5
- package/dist/components/Skeleton.doc.d.ts +0 -11
- package/dist/components/Skeleton.doc.js +0 -12
- package/dist/components/Skeleton.js +0 -20
- package/dist/components/Spinner.d.ts +0 -6
- package/dist/components/Spinner.doc.d.ts +0 -12
- package/dist/components/Spinner.doc.js +0 -13
- package/dist/components/Spinner.js +0 -25
- package/dist/components/Stack.d.ts +0 -7
- package/dist/components/Stack.doc.d.ts +0 -11
- package/dist/components/Stack.doc.js +0 -15
- package/dist/components/Stack.js +0 -77
- package/dist/components/StatusDot.d.ts +0 -8
- package/dist/components/StatusDot.doc.d.ts +0 -16
- package/dist/components/StatusDot.doc.js +0 -16
- package/dist/components/StatusDot.js +0 -46
- package/dist/components/Table.d.ts +0 -20
- package/dist/components/Table.doc.d.ts +0 -92
- package/dist/components/Table.doc.js +0 -94
- package/dist/components/Table.js +0 -205
- package/dist/components/Text.d.ts +0 -7
- package/dist/components/Text.doc.d.ts +0 -11
- package/dist/components/Text.doc.js +0 -15
- package/dist/components/Text.js +0 -50
- package/dist/components/TextArea.d.ts +0 -16
- package/dist/components/TextArea.doc.d.ts +0 -11
- package/dist/components/TextArea.doc.js +0 -30
- package/dist/components/TextArea.js +0 -47
- package/dist/components/TextInput.d.ts +0 -16
- package/dist/components/TextInput.doc.d.ts +0 -11
- package/dist/components/TextInput.doc.js +0 -30
- package/dist/components/TextInput.js +0 -49
- package/dist/components/Toggle.d.ts +0 -16
- package/dist/components/Toggle.doc.d.ts +0 -11
- package/dist/components/Toggle.doc.js +0 -21
- package/dist/components/Toggle.js +0 -64
- package/dist/components/VisuallyHidden.d.ts +0 -3
- package/dist/components/VisuallyHidden.doc.d.ts +0 -11
- package/dist/components/VisuallyHidden.doc.js +0 -12
- package/dist/components/VisuallyHidden.js +0 -15
- package/dist/components/index.d.ts +0 -27
- package/dist/components/index.js +0 -28
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export declare const segmentedControlDoc: {
|
|
2
|
-
name: string;
|
|
3
|
-
description: string;
|
|
4
|
-
props: ({
|
|
5
|
-
name: string;
|
|
6
|
-
description: string;
|
|
7
|
-
required?: undefined;
|
|
8
|
-
} | {
|
|
9
|
-
name: string;
|
|
10
|
-
description: string;
|
|
11
|
-
required: true;
|
|
12
|
-
})[];
|
|
13
|
-
inheritedProps: string[];
|
|
14
|
-
example: string;
|
|
15
|
-
storyId: string;
|
|
16
|
-
};
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import "../styles/stylex.css";
|
|
2
|
-
export const segmentedControlDoc = {
|
|
3
|
-
name: 'SegmentedControl',
|
|
4
|
-
description: 'Chooses one supplied option with roving radio-group keyboard behavior.',
|
|
5
|
-
props: [{
|
|
6
|
-
name: 'aria-label',
|
|
7
|
-
description: 'Directly names the radiogroup when no external label is used.'
|
|
8
|
-
}, {
|
|
9
|
-
name: 'aria-labelledby',
|
|
10
|
-
description: 'References the element that names the radiogroup.'
|
|
11
|
-
}, {
|
|
12
|
-
name: 'defaultValue',
|
|
13
|
-
description: 'Sets the initial value for uncontrolled selection while preserving roving focus.'
|
|
14
|
-
}, {
|
|
15
|
-
name: 'disabled',
|
|
16
|
-
description: 'Disables every option and removes the group from tab order.'
|
|
17
|
-
}, {
|
|
18
|
-
name: 'onValueChange',
|
|
19
|
-
description: 'Receives the next value selected by pointer or keyboard.'
|
|
20
|
-
}, {
|
|
21
|
-
name: 'options',
|
|
22
|
-
description: 'Supplies labels, values, and disabled states.',
|
|
23
|
-
required: true
|
|
24
|
-
}, {
|
|
25
|
-
name: 'orientation',
|
|
26
|
-
description: 'Selects horizontal or vertical arrow-key behavior.'
|
|
27
|
-
}, {
|
|
28
|
-
name: 'value',
|
|
29
|
-
description: 'Controls the current selected value; pointer and keyboard intent is reported through onValueChange.'
|
|
30
|
-
}],
|
|
31
|
-
inheritedProps: ['HTMLAttributes<HTMLDivElement> except aria-label, aria-labelledby, className, defaultValue, and onChange'],
|
|
32
|
-
example: '<SegmentedControl aria-label="Alignment" options={options} />',
|
|
33
|
-
storyId: 'core-segmented-control--default'
|
|
34
|
-
};
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import * as stylex from '@stylexjs/stylex';
|
|
2
|
-
import { useRef, useState } from 'react';
|
|
3
|
-
import { semanticTokens } from '../authoring.stylex.js';
|
|
4
|
-
import "../styles/stylex.css";
|
|
5
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
-
export function SegmentedControl({
|
|
7
|
-
'aria-label': ariaLabel,
|
|
8
|
-
'aria-labelledby': ariaLabelledBy,
|
|
9
|
-
defaultValue,
|
|
10
|
-
disabled = false,
|
|
11
|
-
onValueChange,
|
|
12
|
-
options,
|
|
13
|
-
orientation = 'horizontal',
|
|
14
|
-
value,
|
|
15
|
-
...props
|
|
16
|
-
}) {
|
|
17
|
-
if (!ariaLabel?.trim() && !ariaLabelledBy?.trim()) {
|
|
18
|
-
throw new Error('SegmentedControl requires an accessible name');
|
|
19
|
-
}
|
|
20
|
-
const firstEnabledValue = options.find(option => !option.disabled)?.value;
|
|
21
|
-
const [internalValue, setInternalValue] = useState(defaultValue ?? firstEnabledValue);
|
|
22
|
-
const requestedValue = value ?? internalValue;
|
|
23
|
-
const selectedValue = options.some(option => option.value === requestedValue && !option.disabled) ? requestedValue : firstEnabledValue;
|
|
24
|
-
const optionRefs = useRef(new Map());
|
|
25
|
-
const enabledOptions = options.filter(option => !disabled && !option.disabled);
|
|
26
|
-
function select(nextValue) {
|
|
27
|
-
if (value === undefined) {
|
|
28
|
-
setInternalValue(nextValue);
|
|
29
|
-
}
|
|
30
|
-
onValueChange?.(nextValue);
|
|
31
|
-
}
|
|
32
|
-
function moveSelection(currentValue, direction) {
|
|
33
|
-
if (enabledOptions.length === 0) {
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
const currentIndex = enabledOptions.findIndex(option => option.value === currentValue);
|
|
37
|
-
let nextIndex;
|
|
38
|
-
if (direction === 'first') {
|
|
39
|
-
nextIndex = 0;
|
|
40
|
-
} else if (direction === 'last') {
|
|
41
|
-
nextIndex = enabledOptions.length - 1;
|
|
42
|
-
} else if (direction === 'next') {
|
|
43
|
-
nextIndex = (currentIndex + 1 + enabledOptions.length) % enabledOptions.length;
|
|
44
|
-
} else {
|
|
45
|
-
nextIndex = (currentIndex - 1 + enabledOptions.length) % enabledOptions.length;
|
|
46
|
-
}
|
|
47
|
-
const nextOption = enabledOptions[nextIndex];
|
|
48
|
-
if (!nextOption) {
|
|
49
|
-
return;
|
|
50
|
-
}
|
|
51
|
-
select(nextOption.value);
|
|
52
|
-
optionRefs.current.get(nextOption.value)?.focus();
|
|
53
|
-
}
|
|
54
|
-
function handleKeyDown(event, currentValue) {
|
|
55
|
-
const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
|
|
56
|
-
const previousKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
|
|
57
|
-
const direction = event.key === nextKey ? 'next' : event.key === previousKey ? 'previous' : event.key === 'Home' ? 'first' : event.key === 'End' ? 'last' : undefined;
|
|
58
|
-
if (direction) {
|
|
59
|
-
event.preventDefault();
|
|
60
|
-
moveSelection(currentValue, direction);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
return /*#__PURE__*/_jsx("div", {
|
|
64
|
-
...props,
|
|
65
|
-
"aria-label": ariaLabel,
|
|
66
|
-
"aria-labelledby": ariaLabelledBy,
|
|
67
|
-
"aria-disabled": disabled || undefined,
|
|
68
|
-
"aria-orientation": orientation,
|
|
69
|
-
role: "radiogroup",
|
|
70
|
-
...{
|
|
71
|
-
0: {
|
|
72
|
-
className: "xavu78a x8kq9my x3nfvp2 x1iwn5ga x1tkv3ku"
|
|
73
|
-
},
|
|
74
|
-
1: {
|
|
75
|
-
className: "xavu78a x8kq9my x3nfvp2 x1iwn5ga x1tkv3ku xdt5ytf"
|
|
76
|
-
}
|
|
77
|
-
}[!!(orientation === 'vertical') << 0],
|
|
78
|
-
children: options.map(option => {
|
|
79
|
-
const isDisabled = disabled || Boolean(option.disabled);
|
|
80
|
-
const isSelected = option.value === selectedValue;
|
|
81
|
-
return /*#__PURE__*/_jsx("button", {
|
|
82
|
-
"aria-checked": isSelected,
|
|
83
|
-
disabled: isDisabled,
|
|
84
|
-
onClick: () => select(option.value),
|
|
85
|
-
onKeyDown: event => handleKeyDown(event, option.value),
|
|
86
|
-
ref: element => {
|
|
87
|
-
if (element) {
|
|
88
|
-
optionRefs.current.set(option.value, element);
|
|
89
|
-
} else {
|
|
90
|
-
optionRefs.current.delete(option.value);
|
|
91
|
-
}
|
|
92
|
-
},
|
|
93
|
-
role: "radio",
|
|
94
|
-
tabIndex: isSelected && !isDisabled ? 0 : -1,
|
|
95
|
-
...{
|
|
96
|
-
0: {
|
|
97
|
-
className: "xjbqb8w x1l6hjkl xng3xce x9f619 x1y4yzzg xj0sio9 x1ti3rys xmm8wyw x10y07nz x1qtbwip x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xbo0ryh x1ipqx2d"
|
|
98
|
-
},
|
|
99
|
-
1: {
|
|
100
|
-
className: "x1l6hjkl xng3xce x9f619 xj0sio9 x1ti3rys xmm8wyw x10y07nz x1qtbwip x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u x40o0ze x1elh21b x1y4yzzg"
|
|
101
|
-
}
|
|
102
|
-
}[!!isSelected << 0],
|
|
103
|
-
type: "button",
|
|
104
|
-
children: option.label
|
|
105
|
-
}, option.value);
|
|
106
|
-
})
|
|
107
|
-
});
|
|
108
|
-
}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react';
|
|
2
|
-
export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'children' | 'className' | 'role'> {
|
|
3
|
-
readonly label?: string;
|
|
4
|
-
}
|
|
5
|
-
export declare function Skeleton({ label, ...props }: SkeletonProps): import("react").JSX.Element;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import "../styles/stylex.css";
|
|
2
|
-
export const skeletonDoc = {
|
|
3
|
-
name: 'Skeleton',
|
|
4
|
-
description: 'Displays a decorative or explicitly labelled loading placeholder with a static reduced-motion fallback.',
|
|
5
|
-
props: [{
|
|
6
|
-
name: 'label',
|
|
7
|
-
description: 'Optionally announces what is loading.'
|
|
8
|
-
}],
|
|
9
|
-
inheritedProps: ['HTMLAttributes<HTMLDivElement> except aria-label, children, className, and role'],
|
|
10
|
-
example: '<Skeleton label="Loading summary" />',
|
|
11
|
-
storyId: 'core-skeleton--default'
|
|
12
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as stylex from '@stylexjs/stylex';
|
|
2
|
-
import { semanticTokens } from '../authoring.stylex.js';
|
|
3
|
-
import "../styles/stylex.css";
|
|
4
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
-
const pulse = "x1vfr86i-B";
|
|
6
|
-
export function Skeleton({
|
|
7
|
-
label,
|
|
8
|
-
...props
|
|
9
|
-
}) {
|
|
10
|
-
return /*#__PURE__*/_jsx("div", {
|
|
11
|
-
...props,
|
|
12
|
-
"aria-busy": label ? 'true' : undefined,
|
|
13
|
-
"aria-hidden": label ? undefined : 'true',
|
|
14
|
-
"aria-label": label,
|
|
15
|
-
role: label ? 'status' : undefined,
|
|
16
|
-
...{
|
|
17
|
-
className: "xpz12be xslpo9u xa4qsjk x125lowv x1aquc0h xsus3lq xavu78a x8kq9my xmm8wyw xh8yej3"
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react';
|
|
2
|
-
export interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label' | 'children' | 'className' | 'role'> {
|
|
3
|
-
readonly label: string;
|
|
4
|
-
}
|
|
5
|
-
export declare function Spinner({ label, ...props }: SpinnerProps): import("react").JSX.Element;
|
|
6
|
-
export declare function SpinnerVisual(): import("react").JSX.Element;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import "../styles/stylex.css";
|
|
2
|
-
export const spinnerDoc = {
|
|
3
|
-
name: 'Spinner',
|
|
4
|
-
description: 'Announces indeterminate progress with a required accessible label and a static reduced-motion fallback.',
|
|
5
|
-
props: [{
|
|
6
|
-
name: 'label',
|
|
7
|
-
description: 'Names the operation in progress.',
|
|
8
|
-
required: true
|
|
9
|
-
}],
|
|
10
|
-
inheritedProps: ['HTMLAttributes<HTMLSpanElement> except aria-label, children, className, and role'],
|
|
11
|
-
example: '<Spinner label="Loading items" />',
|
|
12
|
-
storyId: 'core-spinner--default'
|
|
13
|
-
};
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import * as stylex from '@stylexjs/stylex';
|
|
2
|
-
import { semanticTokens } from '../authoring.stylex.js';
|
|
3
|
-
import "../styles/stylex.css";
|
|
4
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
-
const spin = "x1fy8ia8-B";
|
|
6
|
-
export function Spinner({
|
|
7
|
-
label,
|
|
8
|
-
...props
|
|
9
|
-
}) {
|
|
10
|
-
return /*#__PURE__*/_jsx("span", {
|
|
11
|
-
...props,
|
|
12
|
-
"aria-busy": "true",
|
|
13
|
-
"aria-label": label,
|
|
14
|
-
role: "status",
|
|
15
|
-
children: /*#__PURE__*/_jsx(SpinnerVisual, {})
|
|
16
|
-
});
|
|
17
|
-
}
|
|
18
|
-
export function SpinnerVisual() {
|
|
19
|
-
return /*#__PURE__*/_jsx("span", {
|
|
20
|
-
"aria-hidden": "true",
|
|
21
|
-
...{
|
|
22
|
-
className: "xslpo9u xa4qsjk xpedhrg x1aquc0h xsus3lq x11a5md6 x2nywlj xnpwncj x1jnjmdy xpxnlqs x1rg5ohu x7s8d8b x1psh5v9"
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react';
|
|
2
|
-
export type Space = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
3
|
-
export interface StackProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
|
|
4
|
-
readonly gap?: Space;
|
|
5
|
-
readonly align?: 'stretch' | 'start' | 'center' | 'end';
|
|
6
|
-
}
|
|
7
|
-
export declare function Stack({ gap, align, children, ...props }: StackProps): import("react").JSX.Element;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import "../styles/stylex.css";
|
|
2
|
-
export const stackDoc = {
|
|
3
|
-
name: 'Stack',
|
|
4
|
-
description: 'Arranges children vertically with semantic spacing.',
|
|
5
|
-
props: [{
|
|
6
|
-
name: 'gap',
|
|
7
|
-
description: 'Optional semantic gap token.'
|
|
8
|
-
}, {
|
|
9
|
-
name: 'align',
|
|
10
|
-
description: 'Optional cross-axis alignment.'
|
|
11
|
-
}],
|
|
12
|
-
inheritedProps: ['HTMLAttributes<HTMLDivElement> except className'],
|
|
13
|
-
example: '<Stack gap="md"><Text>First</Text><Text>Second</Text></Stack>',
|
|
14
|
-
storyId: 'core-stack--default'
|
|
15
|
-
};
|
package/dist/components/Stack.js
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import * as stylex from '@stylexjs/stylex';
|
|
2
|
-
import { semanticTokens } from '../authoring.stylex.js';
|
|
3
|
-
import "../styles/stylex.css";
|
|
4
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
-
const styles = {
|
|
6
|
-
base: {
|
|
7
|
-
k1xSpc: "x78zum5",
|
|
8
|
-
kXwgrk: "xdt5ytf",
|
|
9
|
-
$$css: true
|
|
10
|
-
},
|
|
11
|
-
gapXs: {
|
|
12
|
-
kOIVth: "x1iwn5ga",
|
|
13
|
-
$$css: true
|
|
14
|
-
},
|
|
15
|
-
gapSm: {
|
|
16
|
-
kOIVth: "x1ap6kct",
|
|
17
|
-
$$css: true
|
|
18
|
-
},
|
|
19
|
-
gapMd: {
|
|
20
|
-
kOIVth: "xtl099x",
|
|
21
|
-
$$css: true
|
|
22
|
-
},
|
|
23
|
-
gapLg: {
|
|
24
|
-
kOIVth: "x4nws80",
|
|
25
|
-
$$css: true
|
|
26
|
-
},
|
|
27
|
-
gapXl: {
|
|
28
|
-
kOIVth: "x1ws3dqe",
|
|
29
|
-
$$css: true
|
|
30
|
-
},
|
|
31
|
-
gap2xl: {
|
|
32
|
-
kOIVth: "xl3vxp",
|
|
33
|
-
$$css: true
|
|
34
|
-
},
|
|
35
|
-
alignStretch: {
|
|
36
|
-
kGNEyG: "x1qjc9v5",
|
|
37
|
-
$$css: true
|
|
38
|
-
},
|
|
39
|
-
alignStart: {
|
|
40
|
-
kGNEyG: "x1cy8zhl",
|
|
41
|
-
$$css: true
|
|
42
|
-
},
|
|
43
|
-
alignCenter: {
|
|
44
|
-
kGNEyG: "x6s0dn4",
|
|
45
|
-
$$css: true
|
|
46
|
-
},
|
|
47
|
-
alignEnd: {
|
|
48
|
-
kGNEyG: "xuk3077",
|
|
49
|
-
$$css: true
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
const gaps = {
|
|
53
|
-
xs: styles.gapXs,
|
|
54
|
-
sm: styles.gapSm,
|
|
55
|
-
md: styles.gapMd,
|
|
56
|
-
lg: styles.gapLg,
|
|
57
|
-
xl: styles.gapXl,
|
|
58
|
-
'2xl': styles.gap2xl
|
|
59
|
-
};
|
|
60
|
-
const aligns = {
|
|
61
|
-
stretch: styles.alignStretch,
|
|
62
|
-
start: styles.alignStart,
|
|
63
|
-
center: styles.alignCenter,
|
|
64
|
-
end: styles.alignEnd
|
|
65
|
-
};
|
|
66
|
-
export function Stack({
|
|
67
|
-
gap = 'md',
|
|
68
|
-
align = 'stretch',
|
|
69
|
-
children,
|
|
70
|
-
...props
|
|
71
|
-
}) {
|
|
72
|
-
return /*#__PURE__*/_jsx("div", {
|
|
73
|
-
...props,
|
|
74
|
-
...stylex.props(styles.base, gaps[gap], aligns[align]),
|
|
75
|
-
children: children
|
|
76
|
-
});
|
|
77
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes } from 'react';
|
|
2
|
-
import type { StatusTone } from './Badge.js';
|
|
3
|
-
/** Props for a labelled live-status indicator using semantic status tones. */
|
|
4
|
-
export interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label' | 'children' | 'className' | 'role'> {
|
|
5
|
-
readonly 'aria-label': string;
|
|
6
|
-
readonly tone?: StatusTone;
|
|
7
|
-
}
|
|
8
|
-
export declare function StatusDot({ tone, ...props }: StatusDotProps): import("react").JSX.Element;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export declare const statusDotDoc: {
|
|
2
|
-
name: string;
|
|
3
|
-
description: string;
|
|
4
|
-
props: ({
|
|
5
|
-
name: string;
|
|
6
|
-
description: string;
|
|
7
|
-
required: true;
|
|
8
|
-
} | {
|
|
9
|
-
name: string;
|
|
10
|
-
description: string;
|
|
11
|
-
required?: undefined;
|
|
12
|
-
})[];
|
|
13
|
-
inheritedProps: string[];
|
|
14
|
-
example: string;
|
|
15
|
-
storyId: string;
|
|
16
|
-
};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import "../styles/stylex.css";
|
|
2
|
-
export const statusDotDoc = {
|
|
3
|
-
name: 'StatusDot',
|
|
4
|
-
description: 'Announces a compact live status indicator by its supplied label.',
|
|
5
|
-
props: [{
|
|
6
|
-
name: 'aria-label',
|
|
7
|
-
description: 'Names the represented status.',
|
|
8
|
-
required: true
|
|
9
|
-
}, {
|
|
10
|
-
name: 'tone',
|
|
11
|
-
description: 'Selects one of the four semantic status tones.'
|
|
12
|
-
}],
|
|
13
|
-
inheritedProps: ['HTMLAttributes<HTMLSpanElement> except aria-label, children, className, and role'],
|
|
14
|
-
example: '<StatusDot aria-label="Service available" tone="success" />',
|
|
15
|
-
storyId: 'core-status-dot--default'
|
|
16
|
-
};
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import * as stylex from '@stylexjs/stylex';
|
|
2
|
-
import { semanticTokens } from '../authoring.stylex.js';
|
|
3
|
-
import "../styles/stylex.css";
|
|
4
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
-
const styles = {
|
|
6
|
-
base: {
|
|
7
|
-
kaIpWk: "xnpwncj",
|
|
8
|
-
k1xSpc: "x1rg5ohu",
|
|
9
|
-
kZKoxP: "x1ieyhmn",
|
|
10
|
-
kzqmXN: "x1rcf1qu",
|
|
11
|
-
$$css: true
|
|
12
|
-
},
|
|
13
|
-
info: {
|
|
14
|
-
kWkggS: "x18i8t7",
|
|
15
|
-
$$css: true
|
|
16
|
-
},
|
|
17
|
-
success: {
|
|
18
|
-
kWkggS: "x1sm82us",
|
|
19
|
-
$$css: true
|
|
20
|
-
},
|
|
21
|
-
warning: {
|
|
22
|
-
kWkggS: "xe2mao8",
|
|
23
|
-
$$css: true
|
|
24
|
-
},
|
|
25
|
-
danger: {
|
|
26
|
-
kWkggS: "xpqgouk",
|
|
27
|
-
$$css: true
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
/** Props for a labelled live-status indicator using semantic status tones. */
|
|
32
|
-
|
|
33
|
-
export function StatusDot({
|
|
34
|
-
tone = 'info',
|
|
35
|
-
...props
|
|
36
|
-
}) {
|
|
37
|
-
return /*#__PURE__*/_jsx("span", {
|
|
38
|
-
...props,
|
|
39
|
-
"aria-live": "polite",
|
|
40
|
-
role: "status",
|
|
41
|
-
children: /*#__PURE__*/_jsx("span", {
|
|
42
|
-
"aria-hidden": "true",
|
|
43
|
-
...stylex.props(styles.base, styles[tone])
|
|
44
|
-
})
|
|
45
|
-
});
|
|
46
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import type { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
|
|
2
|
-
export type TableDensity = 'compact' | 'default' | 'spacious';
|
|
3
|
-
export type TableDividers = 'rows' | 'columns' | 'grid' | 'none';
|
|
4
|
-
export interface TableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, 'className'> {
|
|
5
|
-
readonly density?: TableDensity;
|
|
6
|
-
readonly dividers?: TableDividers;
|
|
7
|
-
}
|
|
8
|
-
export type TableCaptionProps = Omit<HTMLAttributes<HTMLTableCaptionElement>, 'className'>;
|
|
9
|
-
export type TableHeadProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'className'>;
|
|
10
|
-
export type TableBodyProps = TableHeadProps;
|
|
11
|
-
export type TableRowProps = Omit<HTMLAttributes<HTMLTableRowElement>, 'className'>;
|
|
12
|
-
export type TableHeaderCellProps = Omit<ThHTMLAttributes<HTMLTableCellElement>, 'className'>;
|
|
13
|
-
export type TableCellProps = Omit<TdHTMLAttributes<HTMLTableCellElement>, 'className'>;
|
|
14
|
-
export declare function Table({ children, density, dividers, ...props }: TableProps): import("react").JSX.Element;
|
|
15
|
-
export declare function TableCaption({ children, ...props }: TableCaptionProps): import("react").JSX.Element;
|
|
16
|
-
export declare function TableHead({ children, ...props }: TableHeadProps): import("react").JSX.Element;
|
|
17
|
-
export declare function TableBody({ children, ...props }: TableBodyProps): import("react").JSX.Element;
|
|
18
|
-
export declare function TableRow({ children, ...props }: TableRowProps): import("react").JSX.Element;
|
|
19
|
-
export declare function TableHeaderCell({ children, scope, ...props }: TableHeaderCellProps): import("react").JSX.Element;
|
|
20
|
-
export declare function TableCell({ children, ...props }: TableCellProps): import("react").JSX.Element;
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
export declare const tableDoc: {
|
|
2
|
-
name: string;
|
|
3
|
-
description: string;
|
|
4
|
-
props: ({
|
|
5
|
-
name: string;
|
|
6
|
-
description: string;
|
|
7
|
-
required: true;
|
|
8
|
-
} | {
|
|
9
|
-
name: string;
|
|
10
|
-
description: string;
|
|
11
|
-
required?: undefined;
|
|
12
|
-
})[];
|
|
13
|
-
inheritedProps: string[];
|
|
14
|
-
example: string;
|
|
15
|
-
storyId: string;
|
|
16
|
-
};
|
|
17
|
-
export declare const tableCaptionDoc: {
|
|
18
|
-
name: string;
|
|
19
|
-
description: string;
|
|
20
|
-
props: {
|
|
21
|
-
name: string;
|
|
22
|
-
description: string;
|
|
23
|
-
required: true;
|
|
24
|
-
}[];
|
|
25
|
-
inheritedProps: string[];
|
|
26
|
-
example: string;
|
|
27
|
-
storyId: string;
|
|
28
|
-
};
|
|
29
|
-
export declare const tableHeadDoc: {
|
|
30
|
-
name: string;
|
|
31
|
-
description: string;
|
|
32
|
-
props: {
|
|
33
|
-
name: string;
|
|
34
|
-
description: string;
|
|
35
|
-
required: true;
|
|
36
|
-
}[];
|
|
37
|
-
inheritedProps: string[];
|
|
38
|
-
example: string;
|
|
39
|
-
storyId: string;
|
|
40
|
-
};
|
|
41
|
-
export declare const tableBodyDoc: {
|
|
42
|
-
name: string;
|
|
43
|
-
description: string;
|
|
44
|
-
props: {
|
|
45
|
-
name: string;
|
|
46
|
-
description: string;
|
|
47
|
-
required: true;
|
|
48
|
-
}[];
|
|
49
|
-
inheritedProps: string[];
|
|
50
|
-
example: string;
|
|
51
|
-
storyId: string;
|
|
52
|
-
};
|
|
53
|
-
export declare const tableRowDoc: {
|
|
54
|
-
name: string;
|
|
55
|
-
description: string;
|
|
56
|
-
props: {
|
|
57
|
-
name: string;
|
|
58
|
-
description: string;
|
|
59
|
-
required: true;
|
|
60
|
-
}[];
|
|
61
|
-
inheritedProps: string[];
|
|
62
|
-
example: string;
|
|
63
|
-
storyId: string;
|
|
64
|
-
};
|
|
65
|
-
export declare const tableHeaderCellDoc: {
|
|
66
|
-
name: string;
|
|
67
|
-
description: string;
|
|
68
|
-
props: ({
|
|
69
|
-
name: string;
|
|
70
|
-
description: string;
|
|
71
|
-
required: true;
|
|
72
|
-
} | {
|
|
73
|
-
name: string;
|
|
74
|
-
description: string;
|
|
75
|
-
required?: undefined;
|
|
76
|
-
})[];
|
|
77
|
-
inheritedProps: string[];
|
|
78
|
-
example: string;
|
|
79
|
-
storyId: string;
|
|
80
|
-
};
|
|
81
|
-
export declare const tableCellDoc: {
|
|
82
|
-
name: string;
|
|
83
|
-
description: string;
|
|
84
|
-
props: {
|
|
85
|
-
name: string;
|
|
86
|
-
description: string;
|
|
87
|
-
required: true;
|
|
88
|
-
}[];
|
|
89
|
-
inheritedProps: string[];
|
|
90
|
-
example: string;
|
|
91
|
-
storyId: string;
|
|
92
|
-
};
|