ionbase-ui 0.76.0 → 0.81.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Card.d.ts +61 -0
- package/dist/components/Card.d.ts.map +1 -0
- package/dist/components/Card.js +37 -0
- package/dist/components/Card.js.map +1 -0
- package/dist/components/CommandPalette.d.ts +76 -0
- package/dist/components/CommandPalette.d.ts.map +1 -0
- package/dist/components/CommandPalette.js +194 -0
- package/dist/components/CommandPalette.js.map +1 -0
- package/dist/components/DateField.d.ts +14 -0
- package/dist/components/DateField.d.ts.map +1 -1
- package/dist/components/DateField.js +1 -1
- package/dist/components/DateField.js.map +1 -1
- package/dist/components/DatePicker.d.ts +1 -1
- package/dist/components/DatePicker.d.ts.map +1 -1
- package/dist/components/DatePicker.js +14 -6
- package/dist/components/DatePicker.js.map +1 -1
- package/dist/components/DateRangePicker.d.ts +1 -1
- package/dist/components/DateRangePicker.d.ts.map +1 -1
- package/dist/components/DateRangePicker.js +14 -6
- package/dist/components/DateRangePicker.js.map +1 -1
- package/dist/components/Kbd.d.ts +45 -0
- package/dist/components/Kbd.d.ts.map +1 -0
- package/dist/components/Kbd.js +45 -0
- package/dist/components/Kbd.js.map +1 -0
- package/dist/components/Table.d.ts +18 -0
- package/dist/components/Table.d.ts.map +1 -1
- package/dist/components/Table.js +14 -3
- package/dist/components/Table.js.map +1 -1
- package/dist/components/TagGroup.d.ts +51 -0
- package/dist/components/TagGroup.d.ts.map +1 -0
- package/dist/components/TagGroup.js +84 -0
- package/dist/components/TagGroup.js.map +1 -0
- package/dist/components/TimeField.d.ts +72 -0
- package/dist/components/TimeField.d.ts.map +1 -0
- package/dist/components/TimeField.js +102 -0
- package/dist/components/TimeField.js.map +1 -0
- package/dist/components/index.d.ts +14 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +6 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/iso-time.d.ts +23 -0
- package/dist/components/iso-time.d.ts.map +1 -0
- package/dist/components/iso-time.js +34 -0
- package/dist/components/iso-time.js.map +1 -0
- package/dist/components/shortcut.d.ts +19 -0
- package/dist/components/shortcut.d.ts.map +1 -0
- package/dist/components/shortcut.js +122 -0
- package/dist/components/shortcut.js.map +1 -0
- package/dist/components/use-table-sort.d.ts +38 -0
- package/dist/components/use-table-sort.d.ts.map +1 -0
- package/dist/components/use-table-sort.js +33 -0
- package/dist/components/use-table-sort.js.map +1 -0
- package/dist/figma-descriptions.json +103 -68
- package/dist/figma-map.json +343 -2
- package/dist/meta/Card.json +153 -0
- package/dist/meta/Checkbox.json +2 -2
- package/dist/meta/CommandPalette.json +178 -0
- package/dist/meta/DatePicker.json +5 -4
- package/dist/meta/DateRangePicker.json +3 -2
- package/dist/meta/Kbd.json +97 -0
- package/dist/meta/Radio.json +2 -2
- package/dist/meta/RadioGroup.json +2 -2
- package/dist/meta/Table.json +4 -1
- package/dist/meta/TableBody.json +3 -0
- package/dist/meta/TableCell.json +49 -5
- package/dist/meta/TableHead.json +3 -0
- package/dist/meta/TableRow.json +3 -0
- package/dist/meta/Tag.json +54 -0
- package/dist/meta/TagGroup.json +211 -0
- package/dist/meta/TimeField.json +224 -0
- package/dist/meta/Toggle.json +2 -2
- package/dist/meta/components.json +1014 -38
- package/dist/meta/contrast.json +1133 -6
- package/dist/meta/index.json +86 -12
- package/dist/meta/patterns/DataTable.json +27 -3
- package/dist/meta/patterns/PageShell.json +15 -2
- package/dist/meta/patterns/index.json +7 -3
- package/dist/styles/agent-activity.css +4 -2
- package/dist/styles/approval-gate.css +4 -3
- package/dist/styles/card.css +75 -0
- package/dist/styles/citation.css +4 -2
- package/dist/styles/command-palette.css +250 -0
- package/dist/styles/confidence-indicator.css +2 -2
- package/dist/styles/index.css +5 -0
- package/dist/styles/kbd.css +47 -0
- package/dist/styles/streaming-text.css +3 -2
- package/dist/styles/table.css +51 -0
- package/dist/styles/tag-group.css +172 -0
- package/dist/styles/time-field.css +31 -0
- package/llms.txt +2 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../src/components/DateRangePicker.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../src/components/DateRangePicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type KbdPlatform = 'mac' | 'other';
|
|
3
|
+
/**
|
|
4
|
+
* Whether the reader is on an Apple platform.
|
|
5
|
+
*
|
|
6
|
+
* `false` on the server and during hydration, then the real answer — so a
|
|
7
|
+
* server-rendered "Ctrl" becomes "⌘" after hydration instead of producing a
|
|
8
|
+
* mismatch. Not exported from the package: `platform` is the public way to
|
|
9
|
+
* choose.
|
|
10
|
+
*/
|
|
11
|
+
export declare function useIsMac(): boolean;
|
|
12
|
+
export interface KbdProps {
|
|
13
|
+
/**
|
|
14
|
+
* A whole shortcut, `+`-joined: `mod+k`, `mod+shift+p`, `esc`. `mod` is ⌘
|
|
15
|
+
* on a Mac and Ctrl elsewhere, so write `mod` rather than guessing. Drawn as
|
|
16
|
+
* one key per part, in the platform's order.
|
|
17
|
+
*/
|
|
18
|
+
shortcut?: string;
|
|
19
|
+
/** One key, as printed: `K`, `Esc`, `/`. Use `shortcut` for a combination. */
|
|
20
|
+
children?: React.ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* Leave it out: the reader's platform is detected. Set it only to show a
|
|
23
|
+
* specific platform's keys — a docs page comparing the two.
|
|
24
|
+
*/
|
|
25
|
+
platform?: KbdPlatform;
|
|
26
|
+
className?: string;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Kbd — a key, or a keyboard shortcut, as printed on the keyboard.
|
|
30
|
+
*
|
|
31
|
+
* `<kbd>` is the element HTML has for this, and a combination is a `<kbd>` of
|
|
32
|
+
* `<kbd>`s — the spec's own shape for "press these together".
|
|
33
|
+
*
|
|
34
|
+
* WHAT A SCREEN READER HEARS
|
|
35
|
+
*
|
|
36
|
+
* The symbols do not survive being read aloud: VoiceOver says "⌘" as "place of
|
|
37
|
+
* interest sign" in some voices and "⇧" as "upwards white arrow". So a
|
|
38
|
+
* shortcut's drawn keys are hidden and a visually hidden copy spells them out
|
|
39
|
+
* — "Command K", "Control Shift P".
|
|
40
|
+
*/
|
|
41
|
+
export declare function Kbd({ shortcut, children, platform, className }: KbdProps): React.JSX.Element;
|
|
42
|
+
export declare namespace Kbd {
|
|
43
|
+
var displayName: string;
|
|
44
|
+
}
|
|
45
|
+
//# sourceMappingURL=Kbd.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/components/Kbd.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,CAAC;AAW1C;;;;;;;GAOG;AACH,wBAAgB,QAAQ,IAAI,OAAO,CAElC;AAED,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,QAAQ,qBAqBxE;yBArBe,GAAG"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useSyncExternalStore } from 'react';
|
|
4
|
+
import { shortcutKeys } from './shortcut.js';
|
|
5
|
+
const subscribe = () => () => { };
|
|
6
|
+
const detectMac = () => /mac|iphone|ipad|ipod/i.test(
|
|
7
|
+
// `userAgentData` is Chromium-only; `platform` is deprecated but universal.
|
|
8
|
+
// Case-insensitive: Chromium says "macOS", everything else "MacIntel".
|
|
9
|
+
navigator
|
|
10
|
+
.userAgentData?.platform || navigator.platform);
|
|
11
|
+
/**
|
|
12
|
+
* Whether the reader is on an Apple platform.
|
|
13
|
+
*
|
|
14
|
+
* `false` on the server and during hydration, then the real answer — so a
|
|
15
|
+
* server-rendered "Ctrl" becomes "⌘" after hydration instead of producing a
|
|
16
|
+
* mismatch. Not exported from the package: `platform` is the public way to
|
|
17
|
+
* choose.
|
|
18
|
+
*/
|
|
19
|
+
export function useIsMac() {
|
|
20
|
+
return useSyncExternalStore(subscribe, detectMac, () => false);
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Kbd — a key, or a keyboard shortcut, as printed on the keyboard.
|
|
24
|
+
*
|
|
25
|
+
* `<kbd>` is the element HTML has for this, and a combination is a `<kbd>` of
|
|
26
|
+
* `<kbd>`s — the spec's own shape for "press these together".
|
|
27
|
+
*
|
|
28
|
+
* WHAT A SCREEN READER HEARS
|
|
29
|
+
*
|
|
30
|
+
* The symbols do not survive being read aloud: VoiceOver says "⌘" as "place of
|
|
31
|
+
* interest sign" in some voices and "⇧" as "upwards white arrow". So a
|
|
32
|
+
* shortcut's drawn keys are hidden and a visually hidden copy spells them out
|
|
33
|
+
* — "Command K", "Control Shift P".
|
|
34
|
+
*/
|
|
35
|
+
export function Kbd({ shortcut, children, platform, className }) {
|
|
36
|
+
const detected = useIsMac();
|
|
37
|
+
const isMac = platform ? platform === 'mac' : detected;
|
|
38
|
+
const classes = (base) => [base, className || ''].filter(Boolean).join(' ');
|
|
39
|
+
if (!shortcut)
|
|
40
|
+
return _jsx("kbd", { className: classes('ion-kbd'), children: children });
|
|
41
|
+
const keys = shortcutKeys(shortcut, isMac);
|
|
42
|
+
return (_jsxs("kbd", { className: classes('ion-kbd-group'), children: [keys.map((k, i) => (_jsx("kbd", { className: "ion-kbd", "aria-hidden": "true", children: k.symbol }, i))), _jsx("span", { className: "ion-visually-hidden", children: keys.map((k) => k.name).join(' ') })] }));
|
|
43
|
+
}
|
|
44
|
+
Kbd.displayName = 'Kbd';
|
|
45
|
+
//# sourceMappingURL=Kbd.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Kbd.js","sourceRoot":"","sources":["../../src/components/Kbd.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAI7C,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;AACjC,MAAM,SAAS,GAAG,GAAG,EAAE,CACrB,uBAAuB,CAAC,IAAI;AAC1B,4EAA4E;AAC5E,uEAAuE;AACtE,SAAmE;KACjE,aAAa,EAAE,QAAQ,IAAI,SAAS,CAAC,QAAQ,CACjD,CAAC;AAEJ;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ;IACtB,OAAO,oBAAoB,CAAC,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;AACjE,CAAC;AAmBD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAY;IACvE,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;IAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvD,MAAM,OAAO,GAAG,CAAC,IAAY,EAAE,EAAE,CAC/B,CAAC,IAAI,EAAE,SAAS,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpD,IAAI,CAAC,QAAQ;QAAE,OAAO,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,YAAG,QAAQ,GAAO,CAAC;IAE3E,MAAM,IAAI,GAAG,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC3C,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,CAAC,eAAe,CAAC,aACrC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAClB,cAAa,SAAS,EAAC,SAAS,iBAAa,MAAM,YAChD,CAAC,CAAC,MAAM,IADD,CAAC,CAEL,CACP,CAAC,EACF,eAAM,SAAS,EAAC,qBAAqB,YAClC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAC7B,IACH,CACP,CAAC;AACJ,CAAC;AAED,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC"}
|
|
@@ -60,6 +60,11 @@ export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement>
|
|
|
60
60
|
*/
|
|
61
61
|
export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
|
|
62
62
|
export type TableCellAlign = 'leading' | 'trailing' | 'center';
|
|
63
|
+
/**
|
|
64
|
+
* A sortable column's state. `none` means sortable but not the current sort —
|
|
65
|
+
* the column shows the neutral indicator and no `aria-sort`.
|
|
66
|
+
*/
|
|
67
|
+
export type TableSortDirection = 'ascending' | 'descending' | 'none';
|
|
63
68
|
export type TableCellScope = 'col' | 'row' | 'colgroup' | 'rowgroup';
|
|
64
69
|
export interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
|
|
65
70
|
/** Renders `<th>` instead of `<td>` — Figma's header cell, `surface/page`
|
|
@@ -80,6 +85,19 @@ export interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCel
|
|
|
80
85
|
/** Figma's `Leading Icon` / `Trailing Icon` slots on `Cell Text`. */
|
|
81
86
|
icon?: React.ReactNode;
|
|
82
87
|
trailingIcon?: React.ReactNode;
|
|
88
|
+
/**
|
|
89
|
+
* Makes a header cell a sort control. Set it on every sortable column:
|
|
90
|
+
* `ascending` or `descending` on the one the rows are sorted by, `none` on
|
|
91
|
+
* the rest. Header cells only — ignored on a body cell. `useTableSort`
|
|
92
|
+
* returns this and `onSort` for each column.
|
|
93
|
+
*/
|
|
94
|
+
sortDirection?: TableSortDirection;
|
|
95
|
+
/**
|
|
96
|
+
* Called when the header is activated. The table does not reorder rows:
|
|
97
|
+
* sorting is the caller's, since only it knows whether the data is local
|
|
98
|
+
* or paged from a server.
|
|
99
|
+
*/
|
|
100
|
+
onSort?: () => void;
|
|
83
101
|
children?: React.ReactNode;
|
|
84
102
|
}
|
|
85
103
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgD,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAS7D,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7E,uEAAuE;IACvE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;wCACoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,qFAoCjB,CAAC;AAGF,eAAO,MAAM,SAAS,+HASpB,CAAC;AAGH,eAAO,MAAM,SAAS,+HASpB,CAAC;AAGH;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GACnE,CAAC;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC,CAAC;AAE7D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,2FA0BpB,CAAC;AAGF,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;AAC/D,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAC5C,OAAO,CACR;IACC;yBACqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;wDACoD;IACpD,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qEAAqE;IACrE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgD,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAS7D,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7E,uEAAuE;IACvE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;wCACoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,qFAoCjB,CAAC;AAGF,eAAO,MAAM,SAAS,+HASpB,CAAC;AAGH,eAAO,MAAM,SAAS,+HASpB,CAAC;AAGH;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GACnE,CAAC;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC,CAAC;AAE7D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,2FA0BpB,CAAC;AAGF,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;AAC/D;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,CAAC;AACrE,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAC5C,OAAO,CACR;IACC;yBACqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;wDACoD;IACpD,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qEAAqE;IACrE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAuBD;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,6FA4FrB,CAAC"}
|
package/dist/components/Table.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
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 { createContext, forwardRef, useContext } from 'react';
|
|
4
4
|
import { Checkbox } from './Checkbox.js';
|
|
5
5
|
/**
|
|
@@ -54,6 +54,7 @@ export const TableRow = forwardRef(({ isSelected, selection, className, children
|
|
|
54
54
|
(inHead ? (_jsx("th", { scope: "col", children: _jsx(Checkbox, { ...selection }) })) : (_jsx("td", { children: _jsx(Checkbox, { ...selection }) }))), children] }));
|
|
55
55
|
});
|
|
56
56
|
TableRow.displayName = 'TableRow';
|
|
57
|
+
const SortIcon = ({ direction }) => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: direction === 'ascending' ? (_jsx("path", { d: "m5 12 7-7 7 7M12 19V5" })) : direction === 'descending' ? (_jsx("path", { d: "M12 5v14m7-7-7 7-7-7" })) : (_jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" })) }));
|
|
57
58
|
/**
|
|
58
59
|
* One component covers Figma's `Table Cell` + `Cell Text`: the two are never
|
|
59
60
|
* used apart in the design (`Table Cell` always wraps exactly one `Cell
|
|
@@ -64,9 +65,10 @@ TableRow.displayName = 'TableRow';
|
|
|
64
65
|
* could disagree with where the cell actually sits — a `<th>` rendered inside
|
|
65
66
|
* `<tbody>` is still a header cell to the browser and to CSS either way.
|
|
66
67
|
*/
|
|
67
|
-
export const TableCell = forwardRef(({ header, scope: scopeProp, align = 'leading', variant = 'default', showDivider, icon, trailingIcon, className, children, ...rest }, ref) => {
|
|
68
|
+
export const TableCell = forwardRef(({ header, scope: scopeProp, align = 'leading', variant = 'default', showDivider, icon, trailingIcon, sortDirection, onSort, className, children, ...rest }, ref) => {
|
|
68
69
|
const section = useContext(TableSectionContext);
|
|
69
70
|
const Tag = header ? 'th' : 'td';
|
|
71
|
+
const isSortable = header && sortDirection !== undefined;
|
|
70
72
|
// `scope` is only valid on `<th>` — never put it on a `<td>`.
|
|
71
73
|
const scope = header
|
|
72
74
|
? (scopeProp ?? (section === 'body' ? 'row' : 'col'))
|
|
@@ -74,10 +76,19 @@ export const TableCell = forwardRef(({ header, scope: scopeProp, align = 'leadin
|
|
|
74
76
|
const contentClassNames = [
|
|
75
77
|
'ion-table__cell-content',
|
|
76
78
|
variant === 'link' ? 'ion-table__cell-content--link' : '',
|
|
79
|
+
isSortable ? 'ion-table__sort' : '',
|
|
80
|
+
isSortable && sortDirection !== 'none' ? 'ion-table__sort--active' : '',
|
|
77
81
|
]
|
|
78
82
|
.filter(Boolean)
|
|
79
83
|
.join(' ');
|
|
80
|
-
|
|
84
|
+
const content = (_jsxs(_Fragment, { children: [icon && (_jsx("span", { className: "ion-table__cell-icon", "aria-hidden": "true", children: icon })), children, isSortable ? (_jsx("span", { className: "ion-table__cell-icon ion-table__cell-icon--trailing ion-table__sort-icon", "aria-hidden": "true", children: _jsx(SortIcon, { direction: sortDirection }) })) : (trailingIcon && (_jsx("span", { className: "ion-table__cell-icon ion-table__cell-icon--trailing", "aria-hidden": "true", children: trailingIcon })))] }));
|
|
85
|
+
return (_jsx(Tag, { ...rest, ref: ref, ...(scope ? { scope } : {}), "aria-sort": isSortable && sortDirection !== 'none'
|
|
86
|
+
? sortDirection
|
|
87
|
+
: rest['aria-sort'], "data-align": align !== 'leading' ? align : undefined, "data-divider": showDivider || undefined, className: className, children: isSortable ? (
|
|
88
|
+
// A real button inside the <th>, not a clickable <th>: the header
|
|
89
|
+
// keeps its column-header role and the button gets focus, Enter
|
|
90
|
+
// and Space for free.
|
|
91
|
+
_jsx("button", { type: "button", className: contentClassNames, onClick: onSort, children: content })) : (_jsx("span", { className: contentClassNames, children: content })) }));
|
|
81
92
|
});
|
|
82
93
|
TableCell.displayName = 'TableCell';
|
|
83
94
|
//# sourceMappingURL=Table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAIzC;;;;GAIG;AACH,MAAM,mBAAmB,GAAG,aAAa,CAAyB,IAAI,CAAC,CAAC;AAUxE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,OAAO,GAAG,SAAS,EACnB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE,CAAC,CACH,cACE,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,gBACC,SAAS,qBACJ,cAAc,YAE/B,mBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,WAAW;YACX,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE;YACpD,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;YACrC,SAAS;SACV;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,YAEX,QAAQ,GACH,GACJ,CACP,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAGjC,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAC,MAAM,YACxC,mBAAW,IAAI,EAAE,GAAG,EAAE,GAAG,YACtB,QAAQ,GACH,GACqB,CAChC,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAGjC,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAC,MAAM,YACxC,mBAAW,IAAI,EAAE,GAAG,EAAE,GAAG,YACtB,QAAQ,GACH,GACqB,CAChC,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAsBpC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/D,MAAM,OAAO,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAChD,MAAM,MAAM,GAAG,OAAO,KAAK,MAAM,CAAC;IAElC,OAAO,CACL,iBACM,IAAI,EACR,GAAG,EAAE,GAAG,mBACO,UAAU,IAAI,SAAS,EACtC,SAAS,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAEjE,SAAS;gBACR,CAAC,MAAM,CAAC,CAAC,CAAC,CACR,aAAI,KAAK,EAAC,KAAK,YACb,KAAC,QAAQ,OAAK,SAAS,GAAI,GACxB,CACN,CAAC,CAAC,CAAC,CACF,uBACE,KAAC,QAAQ,OAAK,SAAS,GAAI,GACxB,CACN,CAAC,EACH,QAAQ,IACN,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type AriaTagGroupProps } from 'react-aria';
|
|
3
|
+
import { Item } from '@react-stately/collections';
|
|
4
|
+
import type { Key } from '@react-types/shared';
|
|
5
|
+
export type TagGroupSize = 'sm' | 'md';
|
|
6
|
+
export interface TagGroupProps<T extends object> extends Omit<AriaTagGroupProps<T>, 'selectionMode' | 'selectionBehavior' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'disallowEmptySelection' | 'shouldSelectOnPressUp' | 'escapeKeyBehavior' | 'onAction' | 'errorMessage'> {
|
|
7
|
+
/**
|
|
8
|
+
* Called with the keys of the tags to remove — from a tag's × button, or
|
|
9
|
+
* Delete / Backspace on a focused tag. Pass it and every tag shows a remove
|
|
10
|
+
* button; leave it out and the tags are read-only labels. The group does
|
|
11
|
+
* not remove anything itself: drop the keys from your own list.
|
|
12
|
+
*/
|
|
13
|
+
onRemove?: (keys: Set<Key>) => void;
|
|
14
|
+
/** Figma's `Size`. Set once here, so every tag in a group matches. */
|
|
15
|
+
size?: TagGroupSize;
|
|
16
|
+
/**
|
|
17
|
+
* Shown in place of the tags when there are none — "No filters applied".
|
|
18
|
+
* Without it an empty group renders nothing but its label.
|
|
19
|
+
*/
|
|
20
|
+
emptyLabel?: React.ReactNode;
|
|
21
|
+
className?: string;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* TagGroup — labels a person applied and can take away: active filters, the
|
|
25
|
+
* labels on a record, the recipients of a message.
|
|
26
|
+
*
|
|
27
|
+
* NOT A BADGE
|
|
28
|
+
*
|
|
29
|
+
* A Badge reports a state the system decided — Failing, Paid. A Tag is a
|
|
30
|
+
* choice someone made, which is why it is removable and why it is neutral:
|
|
31
|
+
* colouring tags by intent would make "Status: Failing" as a filter look like
|
|
32
|
+
* the agent is failing.
|
|
33
|
+
*
|
|
34
|
+
* WHAT REACT ARIA GIVES IT
|
|
35
|
+
*
|
|
36
|
+
* `useTagGroup` makes the group one tab stop with arrow keys between tags, a
|
|
37
|
+
* remove button per tag named "Remove <tag>", and Delete / Backspace to remove
|
|
38
|
+
* the focused one. When a tag goes, focus moves to its neighbour. The one case
|
|
39
|
+
* React Aria leaves open is the last tag: focus would fall to <body>, so the
|
|
40
|
+
* group takes it instead and reads out `emptyLabel`.
|
|
41
|
+
*
|
|
42
|
+
* No selection: a chip that toggles on and off is a SegmentedControl or a
|
|
43
|
+
* Checkbox, which already say "selected" the way a screen reader expects.
|
|
44
|
+
*/
|
|
45
|
+
export declare function TagGroup<T extends object>(props: TagGroupProps<T>): React.JSX.Element;
|
|
46
|
+
/**
|
|
47
|
+
* One tag. The children are its label; `key` is what `onRemove` hands back.
|
|
48
|
+
* Give it `textValue` when the children are not plain text.
|
|
49
|
+
*/
|
|
50
|
+
export { Item as Tag };
|
|
51
|
+
//# sourceMappingURL=TagGroup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../src/components/TagGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAOL,KAAK,iBAAiB,EACvB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,KAAK,EAAE,GAAG,EAAQ,MAAM,qBAAqB,CAAC;AAErD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvC,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAC3D,iBAAiB,CAAC,CAAC,CAAC,EAClB,eAAe,GACf,mBAAmB,GACnB,cAAc,GACd,qBAAqB,GACrB,mBAAmB,GACnB,wBAAwB,GACxB,uBAAuB,GACvB,mBAAmB,GACnB,UAAU,GACV,cAAc,CACjB;IACC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACpC,sEAAsE;IACtE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,qBAsEjE;AAED;;;GAGG;AACH,OAAO,EAAE,IAAI,IAAI,GAAG,EAAE,CAAC"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect, useRef } from 'react';
|
|
4
|
+
import { useButton, useFocusRing, useHover, useTag, useTagGroup, mergeProps, } from 'react-aria';
|
|
5
|
+
import { useListState } from 'react-stately';
|
|
6
|
+
import { Item } from '@react-stately/collections';
|
|
7
|
+
const RemoveIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }));
|
|
8
|
+
function RemoveButton(props) {
|
|
9
|
+
const ref = useRef(null);
|
|
10
|
+
const { buttonProps } = useButton(props, ref);
|
|
11
|
+
const { focusProps, isFocusVisible } = useFocusRing();
|
|
12
|
+
return (_jsx("button", { ...mergeProps(buttonProps, focusProps), ref: ref, className: "ion-tag__remove", "data-focus-visible": isFocusVisible || undefined, children: _jsx(RemoveIcon, {}) }));
|
|
13
|
+
}
|
|
14
|
+
function TagRow({ item, state }) {
|
|
15
|
+
const ref = useRef(null);
|
|
16
|
+
const { focusProps, isFocusVisible } = useFocusRing();
|
|
17
|
+
const { hoverProps, isHovered } = useHover({});
|
|
18
|
+
const { rowProps, gridCellProps, removeButtonProps, allowsRemoving, isDisabled, } = useTag({ item }, state, ref);
|
|
19
|
+
return (_jsx("div", { ...mergeProps(rowProps, focusProps, hoverProps), ref: ref, className: [
|
|
20
|
+
'ion-tag',
|
|
21
|
+
isDisabled ? 'ion-tag--disabled' : '',
|
|
22
|
+
allowsRemoving ? 'ion-tag--removable' : '',
|
|
23
|
+
]
|
|
24
|
+
.filter(Boolean)
|
|
25
|
+
.join(' '), "data-focus-visible": isFocusVisible || undefined, "data-hovered": isHovered || undefined, children: _jsxs("div", { ...gridCellProps, className: "ion-tag__cell", children: [_jsx("span", { className: "ion-tag__label", children: item.rendered }), allowsRemoving && _jsx(RemoveButton, { ...removeButtonProps })] }) }));
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* TagGroup — labels a person applied and can take away: active filters, the
|
|
29
|
+
* labels on a record, the recipients of a message.
|
|
30
|
+
*
|
|
31
|
+
* NOT A BADGE
|
|
32
|
+
*
|
|
33
|
+
* A Badge reports a state the system decided — Failing, Paid. A Tag is a
|
|
34
|
+
* choice someone made, which is why it is removable and why it is neutral:
|
|
35
|
+
* colouring tags by intent would make "Status: Failing" as a filter look like
|
|
36
|
+
* the agent is failing.
|
|
37
|
+
*
|
|
38
|
+
* WHAT REACT ARIA GIVES IT
|
|
39
|
+
*
|
|
40
|
+
* `useTagGroup` makes the group one tab stop with arrow keys between tags, a
|
|
41
|
+
* remove button per tag named "Remove <tag>", and Delete / Backspace to remove
|
|
42
|
+
* the focused one. When a tag goes, focus moves to its neighbour. The one case
|
|
43
|
+
* React Aria leaves open is the last tag: focus would fall to <body>, so the
|
|
44
|
+
* group takes it instead and reads out `emptyLabel`.
|
|
45
|
+
*
|
|
46
|
+
* No selection: a chip that toggles on and off is a SegmentedControl or a
|
|
47
|
+
* Checkbox, which already say "selected" the way a screen reader expects.
|
|
48
|
+
*/
|
|
49
|
+
export function TagGroup(props) {
|
|
50
|
+
const { size = 'sm', emptyLabel, className, label, description, onRemove, } = props;
|
|
51
|
+
const gridRef = useRef(null);
|
|
52
|
+
const refocusGroup = useRef(false);
|
|
53
|
+
// Wrapped so the group knows a removal it took focus from has happened.
|
|
54
|
+
const handleRemove = onRemove
|
|
55
|
+
? (keys) => {
|
|
56
|
+
refocusGroup.current = !!gridRef.current?.contains(document.activeElement);
|
|
57
|
+
onRemove(keys);
|
|
58
|
+
}
|
|
59
|
+
: undefined;
|
|
60
|
+
const ariaProps = { ...props, onRemove: handleRemove };
|
|
61
|
+
const state = useListState(ariaProps);
|
|
62
|
+
const { gridProps, labelProps, descriptionProps } = useTagGroup(ariaProps, state, gridRef);
|
|
63
|
+
const isEmpty = state.collection.size === 0;
|
|
64
|
+
useEffect(() => {
|
|
65
|
+
if (refocusGroup.current && isEmpty)
|
|
66
|
+
gridRef.current?.focus();
|
|
67
|
+
refocusGroup.current = false;
|
|
68
|
+
}, [isEmpty]);
|
|
69
|
+
return (_jsxs("div", { className: ['ion-tag-group', `ion-tag-group--${size}`, className]
|
|
70
|
+
.filter(Boolean)
|
|
71
|
+
.join(' '), children: [label && (_jsx("div", { ...labelProps, className: "ion-tag-group__label", children: label })), _jsx("div", { ...gridProps, ref: gridRef,
|
|
72
|
+
// Empty, React Aria drops the grid role — an empty grid is an error.
|
|
73
|
+
// It becomes a named group instead, focusable only then, so the last
|
|
74
|
+
// removal lands somewhere that says "Active filters, No filters applied".
|
|
75
|
+
role: isEmpty ? 'group' : gridProps.role, tabIndex: isEmpty ? -1 : gridProps.tabIndex, className: "ion-tag-group__list", children: isEmpty
|
|
76
|
+
? emptyLabel && _jsx("p", { className: "ion-tag-group__empty", children: emptyLabel })
|
|
77
|
+
: [...state.collection].map((item) => (_jsx(TagRow, { item: item, state: state }, item.key))) }), description && (_jsx("div", { ...descriptionProps, className: "ion-tag-group__description", children: description }))] }));
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* One tag. The children are its label; `key` is what `onRemove` hands back.
|
|
81
|
+
* Give it `textValue` when the children are not plain text.
|
|
82
|
+
*/
|
|
83
|
+
export { Item as Tag };
|
|
84
|
+
//# sourceMappingURL=TagGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TagGroup.js","sourceRoot":"","sources":["../../src/components/TagGroup.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type IsoTime } from './iso-time.js';
|
|
3
|
+
export type TimeFieldSize = 'sm' | 'md' | 'lg';
|
|
4
|
+
/** The smallest unit the field edits. */
|
|
5
|
+
export type TimeFieldGranularity = 'hour' | 'minute' | 'second';
|
|
6
|
+
export interface TimeFieldProps {
|
|
7
|
+
/** Field label. Required for a usable control — see `a11y.requires`. */
|
|
8
|
+
label?: React.ReactNode;
|
|
9
|
+
/** Names the field when there is no visible `label`. */
|
|
10
|
+
'aria-label'?: string;
|
|
11
|
+
/** Helper text below the field — "In the workspace's timezone". */
|
|
12
|
+
description?: React.ReactNode;
|
|
13
|
+
/** Replaces the helper text while the field is invalid — `isInvalid`, or its own bounds check. */
|
|
14
|
+
errorMessage?: React.ReactNode;
|
|
15
|
+
isInvalid?: boolean;
|
|
16
|
+
isDisabled?: boolean;
|
|
17
|
+
isReadOnly?: boolean;
|
|
18
|
+
isRequired?: boolean;
|
|
19
|
+
/** Matches Input's `Size` variant: Small, Medium, Large. */
|
|
20
|
+
size?: TimeFieldSize;
|
|
21
|
+
/**
|
|
22
|
+
* The time as `HH:MM` (or `HH:MM:SS`), 24-hour, whatever the reader sees.
|
|
23
|
+
* `null` means no time is chosen. A wall-clock reading — no date, no
|
|
24
|
+
* timezone. A malformed value throws rather than rendering an empty field.
|
|
25
|
+
*/
|
|
26
|
+
value?: IsoTime | null;
|
|
27
|
+
/** The initial time, for an uncontrolled field. */
|
|
28
|
+
defaultValue?: IsoTime;
|
|
29
|
+
/** Fires with `HH:MM` (`HH:MM:SS` at second granularity), or `null` when cleared. */
|
|
30
|
+
onChange?: (value: IsoTime | null) => void;
|
|
31
|
+
/** Earliest allowed time, `HH:MM`. Later is not wrapped past midnight. */
|
|
32
|
+
minValue?: IsoTime;
|
|
33
|
+
/** Latest allowed time, `HH:MM`. */
|
|
34
|
+
maxValue?: IsoTime;
|
|
35
|
+
/** Defaults to `minute`. `second` adds a seconds segment and value. */
|
|
36
|
+
granularity?: TimeFieldGranularity;
|
|
37
|
+
/**
|
|
38
|
+
* 12 or 24-hour display. Leave it out: the reader's locale already knows,
|
|
39
|
+
* and forcing 12-hour on a 24-hour reader is the misreading this field
|
|
40
|
+
* exists to prevent. The value is 24-hour either way.
|
|
41
|
+
*/
|
|
42
|
+
hourCycle?: 12 | 24;
|
|
43
|
+
/** Posts the value under this name, for an uncontrolled form. */
|
|
44
|
+
name?: string;
|
|
45
|
+
className?: string;
|
|
46
|
+
wrapperClassName?: string;
|
|
47
|
+
id?: string;
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* TimeField — a time of day, typed into segments.
|
|
51
|
+
*
|
|
52
|
+
* DatePicker's text half, for times: hour, minute and, where the locale uses
|
|
53
|
+
* one, AM/PM — each a spinbutton that takes digits or arrow keys. The order,
|
|
54
|
+
* the separator and the 12 or 24-hour clock come from the reader's locale, so
|
|
55
|
+
* "2:30 PM" and "14:30" are the same field and the same value.
|
|
56
|
+
*
|
|
57
|
+
* WHY NOT A TEXT INPUT OR `<input type="time">`
|
|
58
|
+
*
|
|
59
|
+
* Free text means guessing whether "2:30" is afternoon. The native control
|
|
60
|
+
* cannot be styled to match the other fields, and Safari's has no picker at
|
|
61
|
+
* all. Segments cannot hold a time that does not exist, and every browser
|
|
62
|
+
* draws them the same.
|
|
63
|
+
*
|
|
64
|
+
* No dropdown of times. A list of 96 quarter-hours is slower to scan than two
|
|
65
|
+
* digits are to type, and it makes 09:07 impossible. Where only a few times
|
|
66
|
+
* are allowed, that is a Select, not a TimeField.
|
|
67
|
+
*/
|
|
68
|
+
export declare function TimeField({ label, 'aria-label': ariaLabel, description, errorMessage, isInvalid, isDisabled, isReadOnly, isRequired, size, value, defaultValue, onChange, minValue, maxValue, granularity, hourCycle, name, className, wrapperClassName, id, }: TimeFieldProps): React.JSX.Element;
|
|
69
|
+
export declare namespace TimeField {
|
|
70
|
+
var displayName: string;
|
|
71
|
+
}
|
|
72
|
+
//# sourceMappingURL=TimeField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../src/components/TimeField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAKzD,OAAO,EAAqB,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAEhE,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/C,yCAAyC;AACzC,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhE,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,kGAAkG;IAClG,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,mDAAmD;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC;;;;OAIG;IACH,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;IACpB,iEAAiE;IACjE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAkBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,UAAU,EACV,UAAU,EACV,IAAW,EACX,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAsB,EACtB,SAAS,EACT,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,EAAE,GACH,EAAE,cAAc,qBA4HhB;yBAjJe,SAAS"}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo, useRef, useState } from 'react';
|
|
4
|
+
import { useLocale, useTimeField } from 'react-aria';
|
|
5
|
+
import { useTimeFieldState } from 'react-stately';
|
|
6
|
+
import { Segment } from './DateField.js';
|
|
7
|
+
import { toIsoTime, toTime } from './iso-time.js';
|
|
8
|
+
const ClockIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 6v6l4 2" })] }));
|
|
9
|
+
/**
|
|
10
|
+
* TimeField — a time of day, typed into segments.
|
|
11
|
+
*
|
|
12
|
+
* DatePicker's text half, for times: hour, minute and, where the locale uses
|
|
13
|
+
* one, AM/PM — each a spinbutton that takes digits or arrow keys. The order,
|
|
14
|
+
* the separator and the 12 or 24-hour clock come from the reader's locale, so
|
|
15
|
+
* "2:30 PM" and "14:30" are the same field and the same value.
|
|
16
|
+
*
|
|
17
|
+
* WHY NOT A TEXT INPUT OR `<input type="time">`
|
|
18
|
+
*
|
|
19
|
+
* Free text means guessing whether "2:30" is afternoon. The native control
|
|
20
|
+
* cannot be styled to match the other fields, and Safari's has no picker at
|
|
21
|
+
* all. Segments cannot hold a time that does not exist, and every browser
|
|
22
|
+
* draws them the same.
|
|
23
|
+
*
|
|
24
|
+
* No dropdown of times. A list of 96 quarter-hours is slower to scan than two
|
|
25
|
+
* digits are to type, and it makes 09:07 impossible. Where only a few times
|
|
26
|
+
* are allowed, that is a Select, not a TimeField.
|
|
27
|
+
*/
|
|
28
|
+
export function TimeField({ label, 'aria-label': ariaLabel, description, errorMessage, isInvalid, isDisabled, isReadOnly, isRequired, size = 'md', value, defaultValue, onChange, minValue, maxValue, granularity = 'minute', hourCycle, name, className, wrapperClassName, id, }) {
|
|
29
|
+
const withSeconds = granularity === 'second';
|
|
30
|
+
// As DatePicker: `undefined` stays uncontrolled, `null` is controlled-and-empty.
|
|
31
|
+
// Checked before any hook, so a malformed value throws its own message.
|
|
32
|
+
toTime(value ?? null, 'value');
|
|
33
|
+
toTime(minValue, 'minValue');
|
|
34
|
+
toTime(maxValue, 'maxValue');
|
|
35
|
+
/*
|
|
36
|
+
* One `Time` object per string, not per render. A controlled TimeField —
|
|
37
|
+
* the demo wizard holds its value in state — built a fresh `Time` every
|
|
38
|
+
* render and rendered forever (React error 301); keyed on the string, it
|
|
39
|
+
* does not. DatePicker rebuilds its CalendarDate the same way and does not
|
|
40
|
+
* loop, so the difference is inside react-stately's time-field state. Not
|
|
41
|
+
* traced further; the storybook story `ControlledDoesNotLoop` holds the line.
|
|
42
|
+
*/
|
|
43
|
+
const timeValue = useMemo(() => (value === undefined ? undefined : toTime(value, 'value')), [value]);
|
|
44
|
+
const min = useMemo(() => toTime(minValue, 'minValue'), [minValue]);
|
|
45
|
+
const max = useMemo(() => toTime(maxValue, 'maxValue'), [maxValue]);
|
|
46
|
+
const [initial] = useState(() => toTime(defaultValue, 'defaultValue'));
|
|
47
|
+
const ariaProps = {
|
|
48
|
+
id,
|
|
49
|
+
label,
|
|
50
|
+
'aria-label': ariaLabel,
|
|
51
|
+
value: timeValue,
|
|
52
|
+
defaultValue: initial,
|
|
53
|
+
minValue: min,
|
|
54
|
+
maxValue: max,
|
|
55
|
+
granularity,
|
|
56
|
+
hourCycle,
|
|
57
|
+
isDisabled,
|
|
58
|
+
isReadOnly,
|
|
59
|
+
isRequired,
|
|
60
|
+
isInvalid,
|
|
61
|
+
onChange: onChange
|
|
62
|
+
? (time) => onChange(time ? toIsoTime(time, withSeconds) : null)
|
|
63
|
+
: undefined,
|
|
64
|
+
};
|
|
65
|
+
const { locale } = useLocale();
|
|
66
|
+
const state = useTimeFieldState({ ...ariaProps, locale });
|
|
67
|
+
const ref = useRef(null);
|
|
68
|
+
const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useTimeField(ariaProps, state, ref);
|
|
69
|
+
/*
|
|
70
|
+
* Invalid is the prop OR the field's own bounds check. Left to the prop
|
|
71
|
+
* alone, 18:00 against a 17:00 maximum marked the segments aria-invalid and
|
|
72
|
+
* left the box looking valid. With no `errorMessage`, React Aria's own
|
|
73
|
+
* localized message says what the bound is.
|
|
74
|
+
*/
|
|
75
|
+
const { isInvalid: outOfBounds, validationErrors } = state.displayValidation;
|
|
76
|
+
const invalid = !!isInvalid || outOfBounds;
|
|
77
|
+
const error = errorMessage ??
|
|
78
|
+
(validationErrors.length ? validationErrors.join(' ') : null);
|
|
79
|
+
const helper = invalid && error ? error : description;
|
|
80
|
+
return (_jsxs("div", { className: [
|
|
81
|
+
'ion-field',
|
|
82
|
+
invalid ? 'ion-field--error' : '',
|
|
83
|
+
wrapperClassName || '',
|
|
84
|
+
]
|
|
85
|
+
.filter(Boolean)
|
|
86
|
+
.join(' '), children: [label && (
|
|
87
|
+
// A <span>, as in DatePicker: the segments are spinbuttons, so a
|
|
88
|
+
// <label htmlFor> has no one control to point at.
|
|
89
|
+
_jsx("span", { ...labelProps, className: "ion-field__label", children: label })), _jsxs("div", { className: [
|
|
90
|
+
'ion-input',
|
|
91
|
+
'ion-time-field',
|
|
92
|
+
size !== 'md' ? `ion-input--${size}` : '',
|
|
93
|
+
invalid ? 'ion-input--invalid' : '',
|
|
94
|
+
isDisabled ? 'ion-input--disabled' : '',
|
|
95
|
+
isReadOnly ? 'ion-input--readonly' : '',
|
|
96
|
+
className || '',
|
|
97
|
+
]
|
|
98
|
+
.filter(Boolean)
|
|
99
|
+
.join(' '), "data-invalid": invalid || undefined, "data-disabled": isDisabled || undefined, children: [_jsx("span", { className: "ion-input__icon-start", "aria-hidden": "true", children: _jsx(ClockIcon, {}) }), _jsx("div", { ...fieldProps, ref: ref, className: "ion-date-field", children: state.segments.map((segment, i) => (_jsx(Segment, { segment: segment, state: state }, i))) }), name && (_jsx("input", { type: "hidden", name: name, value: state.value ? toIsoTime(state.timeValue, withSeconds) : '' }))] }), helper && (_jsx("span", { ...(invalid && error ? errorMessageProps : descriptionProps), className: "ion-field__helper", children: helper }))] }));
|
|
100
|
+
}
|
|
101
|
+
TimeField.displayName = 'TimeField';
|
|
102
|
+
//# sourceMappingURL=TimeField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeField.js","sourceRoot":"","sources":["../../src/components/TimeField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAgB,MAAM,eAAe,CAAC;AAkDhE,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,eACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,iBACV,MAAM,EAClB,SAAS,EAAC,OAAO,aAEjB,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EACjC,eAAM,CAAC,EAAC,aAAa,GAAG,IACpB,CACP,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,UAAU,EACV,UAAU,EACV,IAAI,GAAG,IAAI,EACX,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,QAAQ,EACtB,SAAS,EACT,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,EAAE,GACa;IACf,MAAM,WAAW,GAAG,WAAW,KAAK,QAAQ,CAAC;IAE7C,iFAAiF;IACjF,wEAAwE;IACxE,MAAM,CAAC,KAAK,IAAI,IAAI,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAC7B,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAE7B;;;;;;;OAOG;IACH,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,EAChE,CAAC,KAAK,CAAC,CACR,CAAC;IACF,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACpE,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACpE,MAAM,CAAC,OAAO,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvE,MAAM,SAAS,GAAG;QAChB,EAAE;QACF,KAAK;QACL,YAAY,EAAE,SAAS;QACvB,KAAK,EAAE,SAAS;QAChB,YAAY,EAAE,OAAO;QACrB,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,GAAG;QACb,WAAW;QACX,SAAS;QACT,UAAU;QACV,UAAU;QACV,UAAU;QACV,SAAS;QACT,QAAQ,EAAE,QAAQ;YAChB,CAAC,CAAC,CAAC,IAAiB,EAAE,EAAE,CACpB,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YACxD,CAAC,CAAC,SAAS;KACd,CAAC;IAEF,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;IAC/B,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC;IAC1D,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,GACnE,YAAY,CAAC,SAAS,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IAEtC;;;;;OAKG;IACH,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC7E,MAAM,OAAO,GAAG,CAAC,CAAC,SAAS,IAAI,WAAW,CAAC;IAC3C,MAAM,KAAK,GACT,YAAY;QACZ,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAChE,MAAM,MAAM,GAAG,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC;IAEtD,OAAO,CACL,eACE,SAAS,EAAE;YACT,WAAW;YACX,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;YACjC,gBAAgB,IAAI,EAAE;SACvB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,aAEX,KAAK,IAAI;YACR,iEAAiE;YACjE,kDAAkD;YAClD,kBAAU,UAAU,EAAE,SAAS,EAAC,kBAAkB,YAC/C,KAAK,GACD,CACR,EAED,eACE,SAAS,EAAE;oBACT,WAAW;oBACX,gBAAgB;oBAChB,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;oBACzC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;oBACnC,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;oBACvC,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;oBACvC,SAAS,IAAI,EAAE;iBAChB;qBACE,MAAM,CAAC,OAAO,CAAC;qBACf,IAAI,CAAC,GAAG,CAAC,kBACE,OAAO,IAAI,SAAS,mBACnB,UAAU,IAAI,SAAS,aAEtC,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,YACxD,KAAC,SAAS,KAAG,GACR,EACP,iBAAS,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,gBAAgB,YACtD,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAClC,KAAC,OAAO,IAAS,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,IAAjC,CAAC,CAAoC,CACpD,CAAC,GACE,EACL,IAAI,IAAI,CACP,gBACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,GACjE,CACH,IACG,EAEL,MAAM,IAAI,CACT,kBACM,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAC7D,SAAS,EAAC,mBAAmB,YAE5B,MAAM,GACF,CACR,IACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}
|
|
@@ -47,9 +47,18 @@ export type { LinkProps, LinkVariant } from './Link.js';
|
|
|
47
47
|
export { NavItem } from './NavItem.js';
|
|
48
48
|
export type { NavItemProps } from './NavItem.js';
|
|
49
49
|
export { Table, TableHead, TableBody, TableRow, TableCell } from './Table.js';
|
|
50
|
-
export type { TableProps, TableDensity, TableRowProps, TableRowSelection, TableCellProps, TableCellAlign, TableCellScope, } from './Table.js';
|
|
50
|
+
export type { TableProps, TableDensity, TableRowProps, TableRowSelection, TableCellProps, TableCellAlign, TableCellScope, TableSortDirection, } from './Table.js';
|
|
51
|
+
export { useTableSort } from './use-table-sort.js';
|
|
52
|
+
export type { TableSort, TableSortProps, UseTableSortResult, } from './use-table-sort.js';
|
|
51
53
|
export { ScrollProgress } from './ScrollProgress.js';
|
|
52
54
|
export type { ScrollProgressProps, ScrollProgressSection, ScrollProgressPlacement, } from './ScrollProgress.js';
|
|
55
|
+
export { TimeField } from './TimeField.js';
|
|
56
|
+
export type { TimeFieldProps, TimeFieldSize, TimeFieldGranularity, } from './TimeField.js';
|
|
57
|
+
export type { IsoTime } from './iso-time.js';
|
|
58
|
+
export { TagGroup, Tag } from './TagGroup.js';
|
|
59
|
+
export type { TagGroupProps, TagGroupSize } from './TagGroup.js';
|
|
60
|
+
export { Card } from './Card.js';
|
|
61
|
+
export type { CardProps, CardHeadingLevel, CardIntent } from './Card.js';
|
|
53
62
|
export { FullCard } from './FullCard.js';
|
|
54
63
|
export type { FullCardProps, FullCardAlignment, FullCardHeadingLevel, } from './FullCard.js';
|
|
55
64
|
export { AgentStop } from './AgentStop.js';
|
|
@@ -109,4 +118,8 @@ export { agentRunFrom, agentRunHasEnded, agentRunLog, agentRunReducer, initialAg
|
|
|
109
118
|
export type { AgentRunApproval, AgentRunEvent, AgentRunPhase, AgentRunRecording, AgentRunState, AgentRunStep, AgentRunStepStatus, ReplayAgentRunOptions, } from './agent-run.js';
|
|
110
119
|
export { useAgentRun } from './use-agent-run.js';
|
|
111
120
|
export type { UseAgentRunOptions, UseAgentRunResult } from './use-agent-run.js';
|
|
121
|
+
export { Kbd } from './Kbd.js';
|
|
122
|
+
export type { KbdProps, KbdPlatform } from './Kbd.js';
|
|
123
|
+
export { CommandPalette } from './CommandPalette.js';
|
|
124
|
+
export type { CommandPaletteProps, CommandPaletteItem, } from './CommandPalette.js';
|
|
112
125
|
//# sourceMappingURL=index.d.ts.map
|