@bysages/react 0.2.1 → 0.2.3
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/ai-response-jZy-0Tvv.mjs +127 -0
- package/dist/chevron-BeHvt46K.mjs +17 -0
- package/dist/components/accordion/index.d.mts +7 -0
- package/dist/components/accordion/index.mjs +10 -0
- package/dist/components/affix/index.d.mts +20 -0
- package/dist/components/affix/index.mjs +18 -0
- package/dist/components/ai/index.d.mts +2 -0
- package/dist/components/ai/index.mjs +65 -0
- package/dist/components/ai-action/index.d.mts +14 -0
- package/dist/components/ai-action/index.mjs +18 -0
- package/dist/components/ai-attachments/index.d.mts +19 -0
- package/dist/components/ai-attachments/index.mjs +106 -0
- package/dist/components/ai-message/index.d.mts +11 -0
- package/dist/components/ai-message/index.mjs +15 -0
- package/dist/components/ai-prompt-input/index.d.mts +47 -0
- package/dist/components/ai-prompt-input/index.mjs +135 -0
- package/dist/components/ai-reasoning/index.d.mts +13 -0
- package/dist/components/ai-reasoning/index.mjs +19 -0
- package/dist/components/ai-response/index.d.mts +22 -0
- package/dist/components/ai-response/index.mjs +2 -0
- package/dist/components/ai-source/index.d.mts +17 -0
- package/dist/components/ai-source/index.mjs +27 -0
- package/dist/components/ai-suggestion/index.d.mts +13 -0
- package/dist/components/ai-suggestion/index.mjs +16 -0
- package/dist/components/ai-tool/index.d.mts +21 -0
- package/dist/components/ai-tool/index.mjs +36 -0
- package/dist/components/alert/index.d.mts +23 -0
- package/dist/components/alert/index.mjs +80 -0
- package/dist/components/angle-slider/index.d.mts +16 -0
- package/dist/components/angle-slider/index.mjs +21 -0
- package/dist/components/aspect-ratio/index.d.mts +10 -0
- package/dist/components/aspect-ratio/index.mjs +17 -0
- package/dist/components/autocomplete/index.d.mts +21 -0
- package/dist/components/autocomplete/index.mjs +35 -0
- package/dist/components/avatar/index.d.mts +20 -0
- package/dist/components/avatar/index.mjs +14 -0
- package/dist/components/avatar-group/index.d.mts +11 -0
- package/dist/components/avatar-group/index.mjs +15 -0
- package/dist/components/back-top/index.d.mts +29 -0
- package/dist/components/back-top/index.mjs +82 -0
- package/dist/components/badge/index.d.mts +10 -0
- package/dist/components/badge/index.mjs +15 -0
- package/dist/components/banner/index.d.mts +31 -0
- package/dist/components/banner/index.mjs +63 -0
- package/dist/components/breadcrumb/index.d.mts +32 -0
- package/dist/components/breadcrumb/index.mjs +35 -0
- package/dist/components/button/index.d.mts +19 -0
- package/dist/components/button/index.mjs +29 -0
- package/dist/components/button-group/index.d.mts +24 -0
- package/dist/components/button-group/index.mjs +25 -0
- package/dist/components/calendar/index.d.mts +17 -0
- package/dist/components/calendar/index.mjs +96 -0
- package/dist/components/card/index.d.mts +46 -0
- package/dist/components/card/index.mjs +44 -0
- package/dist/components/carousel/index.d.mts +9 -0
- package/dist/components/carousel/index.mjs +12 -0
- package/dist/components/cascade-select/index.d.mts +31 -0
- package/dist/components/cascade-select/index.mjs +223 -0
- package/dist/components/checkbox/index.d.mts +16 -0
- package/dist/components/checkbox/index.mjs +21 -0
- package/dist/components/checkbox-group/index.d.mts +28 -0
- package/dist/components/checkbox-group/index.mjs +65 -0
- package/dist/components/chip/index.d.mts +12 -0
- package/dist/components/chip/index.mjs +17 -0
- package/dist/components/client-only/index.d.mts +2 -0
- package/dist/components/client-only/index.mjs +2 -0
- package/dist/components/clipboard/index.d.mts +17 -0
- package/dist/components/clipboard/index.mjs +17 -0
- package/dist/components/collapsible/index.d.mts +7 -0
- package/dist/components/collapsible/index.mjs +10 -0
- package/dist/components/collection/index.d.mts +2 -0
- package/dist/components/collection/index.mjs +2 -0
- package/dist/components/color-picker/index.d.mts +20 -0
- package/dist/components/color-picker/index.mjs +25 -0
- package/dist/components/combobox/index.d.mts +17 -0
- package/dist/components/combobox/index.mjs +18 -0
- package/dist/components/command/index.d.mts +43 -0
- package/dist/components/command/index.mjs +137 -0
- package/dist/components/comment/index.d.mts +17 -0
- package/dist/components/comment/index.mjs +47 -0
- package/dist/components/config-provider/index.d.mts +46 -0
- package/dist/components/config-provider/index.mjs +41 -0
- package/dist/components/container/index.d.mts +13 -0
- package/dist/components/container/index.mjs +15 -0
- package/dist/components/date-input/index.d.mts +17 -0
- package/dist/components/date-input/index.mjs +21 -0
- package/dist/components/date-picker/index.d.mts +19 -0
- package/dist/components/date-picker/index.mjs +23 -0
- package/dist/components/descriptions/index.d.mts +25 -0
- package/dist/components/descriptions/index.mjs +32 -0
- package/dist/components/dialog/index.d.mts +9 -0
- package/dist/components/dialog/index.mjs +11 -0
- package/dist/components/download-trigger/index.d.mts +2 -0
- package/dist/components/download-trigger/index.mjs +2 -0
- package/dist/components/drawer/index.d.mts +9 -0
- package/dist/components/drawer/index.mjs +12 -0
- package/dist/components/dynamic-input/index.d.mts +28 -0
- package/dist/components/dynamic-input/index.mjs +83 -0
- package/dist/components/editable/index.d.mts +16 -0
- package/dist/components/editable/index.mjs +17 -0
- package/dist/components/ellipsis/index.d.mts +10 -0
- package/dist/components/ellipsis/index.mjs +19 -0
- package/dist/components/empty/index.d.mts +28 -0
- package/dist/components/empty/index.mjs +32 -0
- package/dist/components/field/index.d.mts +8 -0
- package/dist/components/field/index.mjs +11 -0
- package/dist/components/fieldset/index.d.mts +7 -0
- package/dist/components/fieldset/index.mjs +10 -0
- package/dist/components/file-upload/index.d.mts +18 -0
- package/dist/components/file-upload/index.mjs +23 -0
- package/dist/components/float-button/index.d.mts +59 -0
- package/dist/components/float-button/index.mjs +90 -0
- package/dist/components/floating-panel/index.d.mts +9 -0
- package/dist/components/floating-panel/index.mjs +12 -0
- package/dist/components/focus-trap/index.d.mts +2 -0
- package/dist/components/focus-trap/index.mjs +2 -0
- package/dist/components/form/index.d.mts +2 -0
- package/dist/components/form/index.mjs +67 -0
- package/dist/components/format/index.d.mts +9 -0
- package/dist/components/format/index.mjs +10 -0
- package/dist/components/frame/index.d.mts +10 -0
- package/dist/components/frame/index.mjs +12 -0
- package/dist/components/grid/index.d.mts +13 -0
- package/dist/components/grid/index.mjs +31 -0
- package/dist/components/highlight/index.d.mts +7 -0
- package/dist/components/highlight/index.mjs +11 -0
- package/dist/components/hover-card/index.d.mts +7 -0
- package/dist/components/hover-card/index.mjs +10 -0
- package/dist/components/icon/index.d.mts +19 -0
- package/dist/components/icon/index.mjs +26 -0
- package/dist/components/image/index.d.mts +17 -0
- package/dist/components/image/index.mjs +57 -0
- package/dist/components/image-cropper/index.d.mts +8 -0
- package/dist/components/image-cropper/index.mjs +11 -0
- package/dist/components/image-viewer/index.d.mts +18 -0
- package/dist/components/image-viewer/index.mjs +110 -0
- package/dist/components/input/index.d.mts +16 -0
- package/dist/components/input/index.mjs +21 -0
- package/dist/components/input-group/index.d.mts +17 -0
- package/dist/components/input-group/index.mjs +31 -0
- package/dist/components/json-tree-view/index.d.mts +7 -0
- package/dist/components/json-tree-view/index.mjs +10 -0
- package/dist/components/kbd/index.d.mts +6 -0
- package/dist/components/kbd/index.mjs +14 -0
- package/dist/components/layout/index.d.mts +63 -0
- package/dist/components/layout/index.mjs +133 -0
- package/dist/components/link/index.d.mts +10 -0
- package/dist/components/link/index.mjs +18 -0
- package/dist/components/list/index.d.mts +39 -0
- package/dist/components/list/index.mjs +66 -0
- package/dist/components/listbox/index.d.mts +18 -0
- package/dist/components/listbox/index.mjs +18 -0
- package/dist/components/marquee/index.d.mts +7 -0
- package/dist/components/marquee/index.mjs +10 -0
- package/dist/components/masonry/index.d.mts +11 -0
- package/dist/components/masonry/index.mjs +29 -0
- package/dist/components/mentions/index.d.mts +2 -0
- package/dist/components/mentions/index.mjs +2 -0
- package/dist/components/menu/index.d.mts +20 -0
- package/dist/components/menu/index.mjs +37 -0
- package/dist/components/menubar/index.d.mts +32 -0
- package/dist/components/menubar/index.mjs +35 -0
- package/dist/components/meter/index.d.mts +26 -0
- package/dist/components/meter/index.mjs +59 -0
- package/dist/components/navigation-menu/index.d.mts +8 -0
- package/dist/components/navigation-menu/index.mjs +11 -0
- package/dist/components/number-input/index.d.mts +16 -0
- package/dist/components/number-input/index.mjs +21 -0
- package/dist/components/page-header/index.d.mts +32 -0
- package/dist/components/page-header/index.mjs +34 -0
- package/dist/components/pagination/index.d.mts +18 -0
- package/dist/components/pagination/index.mjs +23 -0
- package/dist/components/password-input/index.d.mts +16 -0
- package/dist/components/password-input/index.mjs +21 -0
- package/dist/components/pin-input/index.d.mts +15 -0
- package/dist/components/pin-input/index.mjs +20 -0
- package/dist/components/popconfirm/index.d.mts +20 -0
- package/dist/components/popconfirm/index.mjs +44 -0
- package/dist/components/popover/index.d.mts +8 -0
- package/dist/components/popover/index.mjs +11 -0
- package/dist/components/presence/index.d.mts +2 -0
- package/dist/components/presence/index.mjs +2 -0
- package/dist/components/progress/index.d.mts +16 -0
- package/dist/components/progress/index.mjs +21 -0
- package/dist/components/progress-group/index.d.mts +22 -0
- package/dist/components/progress-group/index.mjs +56 -0
- package/dist/components/qr-code/index.d.mts +8 -0
- package/dist/components/qr-code/index.mjs +11 -0
- package/dist/components/radio-group/index.d.mts +16 -0
- package/dist/components/radio-group/index.mjs +21 -0
- package/dist/components/rating-group/index.d.mts +16 -0
- package/dist/components/rating-group/index.mjs +21 -0
- package/dist/components/scroll-area/index.d.mts +7 -0
- package/dist/components/scroll-area/index.mjs +10 -0
- package/dist/components/segment-group/index.d.mts +18 -0
- package/dist/components/segment-group/index.mjs +20 -0
- package/dist/components/select/index.d.mts +17 -0
- package/dist/components/select/index.mjs +18 -0
- package/dist/components/separator/index.d.mts +11 -0
- package/dist/components/separator/index.mjs +16 -0
- package/dist/components/signature-pad/index.d.mts +8 -0
- package/dist/components/signature-pad/index.mjs +11 -0
- package/dist/components/skeleton/index.d.mts +7 -0
- package/dist/components/skeleton/index.mjs +13 -0
- package/dist/components/slider/index.d.mts +16 -0
- package/dist/components/slider/index.mjs +21 -0
- package/dist/components/spinner/index.d.mts +9 -0
- package/dist/components/spinner/index.mjs +36 -0
- package/dist/components/split-button/index.d.mts +36 -0
- package/dist/components/split-button/index.mjs +71 -0
- package/dist/components/splitter/index.d.mts +7 -0
- package/dist/components/splitter/index.mjs +10 -0
- package/dist/components/stack/index.d.mts +11 -0
- package/dist/components/stack/index.mjs +32 -0
- package/dist/components/stat/index.d.mts +29 -0
- package/dist/components/stat/index.mjs +37 -0
- package/dist/components/steps/index.d.mts +19 -0
- package/dist/components/steps/index.mjs +24 -0
- package/dist/components/swap/index.d.mts +8 -0
- package/dist/components/swap/index.mjs +11 -0
- package/dist/components/switch/index.d.mts +16 -0
- package/dist/components/switch/index.mjs +21 -0
- package/dist/components/table/index.d.mts +79 -0
- package/dist/components/table/index.mjs +688 -0
- package/dist/components/tabs/index.d.mts +18 -0
- package/dist/components/tabs/index.mjs +23 -0
- package/dist/components/tags-input/index.d.mts +17 -0
- package/dist/components/tags-input/index.mjs +22 -0
- package/dist/components/textarea/index.d.mts +14 -0
- package/dist/components/textarea/index.mjs +20 -0
- package/dist/components/timeline/index.d.mts +24 -0
- package/dist/components/timeline/index.mjs +30 -0
- package/dist/components/timer/index.d.mts +8 -0
- package/dist/components/timer/index.mjs +11 -0
- package/dist/components/toast/index.d.mts +11 -0
- package/dist/components/toast/index.mjs +13 -0
- package/dist/components/toc/index.d.mts +7 -0
- package/dist/components/toc/index.mjs +10 -0
- package/dist/components/toggle/index.d.mts +7 -0
- package/dist/components/toggle/index.mjs +10 -0
- package/dist/components/toggle-group/index.d.mts +15 -0
- package/dist/components/toggle-group/index.mjs +20 -0
- package/dist/components/tooltip/index.d.mts +7 -0
- package/dist/components/tooltip/index.mjs +10 -0
- package/dist/components/tour/index.d.mts +11 -0
- package/dist/components/tour/index.mjs +13 -0
- package/dist/components/transfer/index.d.mts +23 -0
- package/dist/components/transfer/index.mjs +154 -0
- package/dist/components/tree-select/index.d.mts +28 -0
- package/dist/components/tree-select/index.mjs +157 -0
- package/dist/components/tree-view/index.d.mts +19 -0
- package/dist/components/tree-view/index.mjs +18 -0
- package/dist/components/typography/index.d.mts +32 -0
- package/dist/components/typography/index.mjs +34 -0
- package/dist/components/watermark/index.d.mts +16 -0
- package/dist/components/watermark/index.mjs +80 -0
- package/dist/index-DaAbbSz9.d.mts +13416 -0
- package/dist/index-Uefyw7Im.d.mts +108 -0
- package/dist/index-uPyYiWaL.d.mts +1813 -0
- package/dist/index.d.mts +128 -15218
- package/dist/index.mjs +128 -4556
- package/dist/mentions-DMIBCBOd.mjs +181 -0
- package/package.json +77 -3
package/dist/index.mjs
CHANGED
|
@@ -1,4557 +1,129 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import {
|
|
43
|
-
import {
|
|
44
|
-
import {
|
|
45
|
-
import {
|
|
46
|
-
import {
|
|
47
|
-
import {
|
|
48
|
-
import {
|
|
49
|
-
import {
|
|
50
|
-
import {
|
|
51
|
-
import {
|
|
52
|
-
import {
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import {
|
|
60
|
-
import {
|
|
61
|
-
import {
|
|
62
|
-
import {
|
|
63
|
-
import {
|
|
64
|
-
import {
|
|
65
|
-
import {
|
|
66
|
-
import {
|
|
67
|
-
import {
|
|
68
|
-
import {
|
|
69
|
-
import {
|
|
70
|
-
import {
|
|
71
|
-
import {
|
|
72
|
-
import {
|
|
1
|
+
import { Accordion } from "./components/accordion/index.mjs";
|
|
2
|
+
import { Affix } from "./components/affix/index.mjs";
|
|
3
|
+
import { Button } from "./components/button/index.mjs";
|
|
4
|
+
import { Action } from "./components/ai-action/index.mjs";
|
|
5
|
+
import { AiMessage as Message } from "./components/ai-message/index.mjs";
|
|
6
|
+
import { Field } from "./components/field/index.mjs";
|
|
7
|
+
import { n as MentionsVessel, r as useMentions, t as Mentions } from "./mentions-DMIBCBOd.mjs";
|
|
8
|
+
import { AiPromptInput as PromptInput } from "./components/ai-prompt-input/index.mjs";
|
|
9
|
+
import { Collapsible } from "./components/collapsible/index.mjs";
|
|
10
|
+
import { AiReasoning as Reasoning } from "./components/ai-reasoning/index.mjs";
|
|
11
|
+
import { t as Response } from "./ai-response-jZy-0Tvv.mjs";
|
|
12
|
+
import { AiSource as Source, AiSources as Sources } from "./components/ai-source/index.mjs";
|
|
13
|
+
import { AiSuggestion as Suggestion } from "./components/ai-suggestion/index.mjs";
|
|
14
|
+
import { AiTool as Tool } from "./components/ai-tool/index.mjs";
|
|
15
|
+
import { Ai } from "./components/ai/index.mjs";
|
|
16
|
+
import { AiAttachment as Attachment, AiAttachments as Attachments } from "./components/ai-attachments/index.mjs";
|
|
17
|
+
import { Alert } from "./components/alert/index.mjs";
|
|
18
|
+
import { AngleSlider } from "./components/angle-slider/index.mjs";
|
|
19
|
+
import { AspectRatio } from "./components/aspect-ratio/index.mjs";
|
|
20
|
+
import { AutoComplete } from "./components/autocomplete/index.mjs";
|
|
21
|
+
import { Avatar } from "./components/avatar/index.mjs";
|
|
22
|
+
import { AvatarGroup } from "./components/avatar-group/index.mjs";
|
|
23
|
+
import { BackTop } from "./components/back-top/index.mjs";
|
|
24
|
+
import { Badge } from "./components/badge/index.mjs";
|
|
25
|
+
import { Breadcrumb } from "./components/breadcrumb/index.mjs";
|
|
26
|
+
import { ButtonGroup } from "./components/button-group/index.mjs";
|
|
27
|
+
import { Banner } from "./components/banner/index.mjs";
|
|
28
|
+
import { Calendar } from "./components/calendar/index.mjs";
|
|
29
|
+
import { Card } from "./components/card/index.mjs";
|
|
30
|
+
import { Input } from "./components/input/index.mjs";
|
|
31
|
+
import { CascadeSelect } from "./components/cascade-select/index.mjs";
|
|
32
|
+
import { Carousel } from "./components/carousel/index.mjs";
|
|
33
|
+
import { Checkbox } from "./components/checkbox/index.mjs";
|
|
34
|
+
import { CheckboxGroup } from "./components/checkbox-group/index.mjs";
|
|
35
|
+
import { Chip } from "./components/chip/index.mjs";
|
|
36
|
+
import { Clipboard } from "./components/clipboard/index.mjs";
|
|
37
|
+
import { ClientOnly } from "./components/client-only/index.mjs";
|
|
38
|
+
import { ColorPicker } from "./components/color-picker/index.mjs";
|
|
39
|
+
import { createFileTreeCollection, createGridCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection } from "./components/collection/index.mjs";
|
|
40
|
+
import { Combobox } from "./components/combobox/index.mjs";
|
|
41
|
+
import { Command } from "./components/command/index.mjs";
|
|
42
|
+
import { Comment } from "./components/comment/index.mjs";
|
|
43
|
+
import { ConfigProvider, useConfig } from "./components/config-provider/index.mjs";
|
|
44
|
+
import { Container } from "./components/container/index.mjs";
|
|
45
|
+
import { DateInput } from "./components/date-input/index.mjs";
|
|
46
|
+
import { DatePicker } from "./components/date-picker/index.mjs";
|
|
47
|
+
import { Descriptions, DescriptionsRoot } from "./components/descriptions/index.mjs";
|
|
48
|
+
import { Dialog } from "./components/dialog/index.mjs";
|
|
49
|
+
import { DownloadTrigger, useDownload } from "./components/download-trigger/index.mjs";
|
|
50
|
+
import { Drawer } from "./components/drawer/index.mjs";
|
|
51
|
+
import { DynamicInput } from "./components/dynamic-input/index.mjs";
|
|
52
|
+
import { Editable } from "./components/editable/index.mjs";
|
|
53
|
+
import { Ellipsis } from "./components/ellipsis/index.mjs";
|
|
54
|
+
import { Empty } from "./components/empty/index.mjs";
|
|
55
|
+
import { Fieldset } from "./components/fieldset/index.mjs";
|
|
56
|
+
import { FileUpload } from "./components/file-upload/index.mjs";
|
|
57
|
+
import { FLOAT_BUTTON_CONTEXT, FloatButton } from "./components/float-button/index.mjs";
|
|
58
|
+
import { FloatingPanel } from "./components/floating-panel/index.mjs";
|
|
59
|
+
import { FocusTrap } from "./components/focus-trap/index.mjs";
|
|
60
|
+
import { Form, FormField, useField, useForm } from "./components/form/index.mjs";
|
|
61
|
+
import { Format } from "./components/format/index.mjs";
|
|
62
|
+
import { Frame } from "./components/frame/index.mjs";
|
|
63
|
+
import { Grid } from "./components/grid/index.mjs";
|
|
64
|
+
import { Highlight } from "./components/highlight/index.mjs";
|
|
65
|
+
import { HoverCard } from "./components/hover-card/index.mjs";
|
|
66
|
+
import { Icon } from "./components/icon/index.mjs";
|
|
67
|
+
import { Image } from "./components/image/index.mjs";
|
|
68
|
+
import { ImageCropper } from "./components/image-cropper/index.mjs";
|
|
69
|
+
import { ImageViewer } from "./components/image-viewer/index.mjs";
|
|
70
|
+
import { InputGroup } from "./components/input-group/index.mjs";
|
|
71
|
+
import { JsonTreeView } from "./components/json-tree-view/index.mjs";
|
|
72
|
+
import { Kbd } from "./components/kbd/index.mjs";
|
|
73
|
+
import { Layout } from "./components/layout/index.mjs";
|
|
74
|
+
import { Link } from "./components/link/index.mjs";
|
|
75
|
+
import { List } from "./components/list/index.mjs";
|
|
76
|
+
import { Listbox } from "./components/listbox/index.mjs";
|
|
77
|
+
import { Marquee } from "./components/marquee/index.mjs";
|
|
78
|
+
import { Masonry } from "./components/masonry/index.mjs";
|
|
79
|
+
import { Menu } from "./components/menu/index.mjs";
|
|
80
|
+
import { Menubar } from "./components/menubar/index.mjs";
|
|
81
|
+
import { Meter } from "./components/meter/index.mjs";
|
|
82
|
+
import { NavigationMenu } from "./components/navigation-menu/index.mjs";
|
|
83
|
+
import { NumberInput } from "./components/number-input/index.mjs";
|
|
84
|
+
import { Pagination } from "./components/pagination/index.mjs";
|
|
85
|
+
import { PasswordInput } from "./components/password-input/index.mjs";
|
|
86
|
+
import { PinInput } from "./components/pin-input/index.mjs";
|
|
87
|
+
import { Popconfirm } from "./components/popconfirm/index.mjs";
|
|
88
|
+
import { Popover } from "./components/popover/index.mjs";
|
|
89
|
+
import { Presence, PresenceProvider, usePresence, usePresenceContext } from "./components/presence/index.mjs";
|
|
90
|
+
import { Progress } from "./components/progress/index.mjs";
|
|
91
|
+
import { ProgressGroup } from "./components/progress-group/index.mjs";
|
|
92
|
+
import { QrCode } from "./components/qr-code/index.mjs";
|
|
93
|
+
import { RadioGroup } from "./components/radio-group/index.mjs";
|
|
94
|
+
import { RatingGroup } from "./components/rating-group/index.mjs";
|
|
95
|
+
import { ScrollArea } from "./components/scroll-area/index.mjs";
|
|
96
|
+
import { SegmentGroup } from "./components/segment-group/index.mjs";
|
|
97
|
+
import { Select } from "./components/select/index.mjs";
|
|
98
|
+
import { Separator } from "./components/separator/index.mjs";
|
|
99
|
+
import { SignaturePad } from "./components/signature-pad/index.mjs";
|
|
100
|
+
import { Skeleton } from "./components/skeleton/index.mjs";
|
|
101
|
+
import { Slider } from "./components/slider/index.mjs";
|
|
102
|
+
import { SplitButton } from "./components/split-button/index.mjs";
|
|
103
|
+
import { Splitter } from "./components/splitter/index.mjs";
|
|
104
|
+
import { Stack } from "./components/stack/index.mjs";
|
|
105
|
+
import { PageHeader } from "./components/page-header/index.mjs";
|
|
106
|
+
import { Spinner } from "./components/spinner/index.mjs";
|
|
107
|
+
import { Stat } from "./components/stat/index.mjs";
|
|
108
|
+
import { Steps } from "./components/steps/index.mjs";
|
|
109
|
+
import { Swap } from "./components/swap/index.mjs";
|
|
110
|
+
import { Switch } from "./components/switch/index.mjs";
|
|
111
|
+
import { Tabs } from "./components/tabs/index.mjs";
|
|
112
|
+
import { TagsInput } from "./components/tags-input/index.mjs";
|
|
113
|
+
import { DataTable, FlexRender, createColumnHelper } from "./components/table/index.mjs";
|
|
114
|
+
import { Textarea } from "./components/textarea/index.mjs";
|
|
115
|
+
import { Timeline } from "./components/timeline/index.mjs";
|
|
116
|
+
import { Timer } from "./components/timer/index.mjs";
|
|
117
|
+
import { Toast, Toaster, createToaster } from "./components/toast/index.mjs";
|
|
118
|
+
import { Toc } from "./components/toc/index.mjs";
|
|
119
|
+
import { Toggle } from "./components/toggle/index.mjs";
|
|
120
|
+
import { Typography } from "./components/typography/index.mjs";
|
|
121
|
+
import { ToggleGroup } from "./components/toggle-group/index.mjs";
|
|
122
|
+
import { Tooltip } from "./components/tooltip/index.mjs";
|
|
123
|
+
import { Tour, useTour } from "./components/tour/index.mjs";
|
|
124
|
+
import { Transfer } from "./components/transfer/index.mjs";
|
|
125
|
+
import { TreeSelect } from "./components/tree-select/index.mjs";
|
|
126
|
+
import { TreeView } from "./components/tree-view/index.mjs";
|
|
127
|
+
import { Watermark } from "./components/watermark/index.mjs";
|
|
73
128
|
export * from "@bysages/core";
|
|
74
|
-
|
|
75
|
-
/** Ark's Accordion, dressed in the paper-and-ink system: a ruled sheet
|
|
76
|
-
* folded by quiet rows, unfolding with a spring-chevoned dissolve. The
|
|
77
|
-
* API is Ark's own — Root, Item, ItemTrigger, ItemContent, ItemIndicator. */
|
|
78
|
-
const Accordion = Accordion$1;
|
|
79
|
-
injectComponentStyle("accordion");
|
|
80
|
-
//#endregion
|
|
81
|
-
//#region src/components/affix/index.tsx
|
|
82
|
-
function Affix({ offsetTop = "0px", offsetBottom = "0px", ...rest }) {
|
|
83
|
-
return /* @__PURE__ */ jsx("div", {
|
|
84
|
-
...rest,
|
|
85
|
-
style: {
|
|
86
|
-
...rest.style,
|
|
87
|
-
top: offsetTop,
|
|
88
|
-
bottom: offsetBottom
|
|
89
|
-
},
|
|
90
|
-
"data-scope": "affix",
|
|
91
|
-
"data-part": "root"
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
injectComponentStyle("affix");
|
|
95
|
-
//#endregion
|
|
96
|
-
//#region src/components/button/index.tsx
|
|
97
|
-
function Button({ variant = "solid", tone = "ink", size = "md", square = false, asChild = false, disabled = false, type = "button", children, ...rest }) {
|
|
98
|
-
const partProps = {
|
|
99
|
-
...rest,
|
|
100
|
-
"data-scope": "button",
|
|
101
|
-
"data-part": "root",
|
|
102
|
-
"data-variant": variant,
|
|
103
|
-
"data-tone": tone,
|
|
104
|
-
"data-size": size,
|
|
105
|
-
"data-square": square ? "true" : void 0,
|
|
106
|
-
"data-motion": "ink-ripple lit"
|
|
107
|
-
};
|
|
108
|
-
if (asChild) {
|
|
109
|
-
const child = Children.only(children);
|
|
110
|
-
return isValidElement(child) ? cloneElement(child, partProps) : null;
|
|
111
|
-
}
|
|
112
|
-
return /* @__PURE__ */ jsx("button", {
|
|
113
|
-
type,
|
|
114
|
-
disabled,
|
|
115
|
-
...partProps,
|
|
116
|
-
children
|
|
117
|
-
});
|
|
118
|
-
}
|
|
119
|
-
injectComponentStyle("button");
|
|
120
|
-
//#endregion
|
|
121
|
-
//#region src/components/ai-action/index.tsx
|
|
122
|
-
function Action({ label, children, ...rest }) {
|
|
123
|
-
return /* @__PURE__ */ jsx(Button, {
|
|
124
|
-
variant: "ghost",
|
|
125
|
-
size: "sm",
|
|
126
|
-
square: true,
|
|
127
|
-
"aria-label": label,
|
|
128
|
-
title: label,
|
|
129
|
-
...rest,
|
|
130
|
-
children
|
|
131
|
-
});
|
|
132
|
-
}
|
|
133
|
-
injectComponentStyle("ai");
|
|
134
|
-
//#endregion
|
|
135
|
-
//#region src/components/ai-message/index.tsx
|
|
136
|
-
function Message({ role = "assistant", children, ...rest }) {
|
|
137
|
-
return /* @__PURE__ */ jsx("article", {
|
|
138
|
-
...rest,
|
|
139
|
-
"data-scope": "ai",
|
|
140
|
-
"data-part": "message",
|
|
141
|
-
"data-role": role,
|
|
142
|
-
children
|
|
143
|
-
});
|
|
144
|
-
}
|
|
145
|
-
injectComponentStyle("ai");
|
|
146
|
-
//#endregion
|
|
147
|
-
//#region src/components/field/index.tsx
|
|
148
|
-
/** Ark's Field, dressed in the paper-and-ink system: a tracked label, a
|
|
149
|
-
* border-and-halo control, and quiet help text. The API is Ark's own —
|
|
150
|
-
* Root, Label, Input, Textarea, Select, HelperText, ErrorText,
|
|
151
|
-
* RequiredIndicator. */
|
|
152
|
-
const Field = Field$1;
|
|
153
|
-
injectComponentStyle("field");
|
|
154
|
-
//#endregion
|
|
155
|
-
//#region src/components/mentions/use-mentions.ts
|
|
156
|
-
/** The @-detection machinery behind a mention field: watch the caret,
|
|
157
|
-
* offer the matching candidates, and answer for the keys that drive
|
|
158
|
-
* them. The field element arrives as a getter because hosts wrap it
|
|
159
|
-
* differently (a bare textarea, a field part's ref).
|
|
160
|
-
*
|
|
161
|
-
* `onKeydown` answers whether the vessel consumed the key, so a host
|
|
162
|
-
* with its own Enter semantics — a composer that sends — can yield to
|
|
163
|
-
* the candidates first and act only when the vessel stands down. */
|
|
164
|
-
function useMentions(options, textarea, handlers) {
|
|
165
|
-
const [popupOpen, setPopupOpen] = useState(false);
|
|
166
|
-
const [matches, setMatches] = useState([]);
|
|
167
|
-
const [active, setActive] = useState(0);
|
|
168
|
-
const anchorIndex = useRef(0);
|
|
169
|
-
const caretIndex = useRef(0);
|
|
170
|
-
const resolve = () => typeof options === "function" ? options() : options;
|
|
171
|
-
const closePopup = () => {
|
|
172
|
-
setPopupOpen(false);
|
|
173
|
-
setMatches([]);
|
|
174
|
-
};
|
|
175
|
-
const detect = () => {
|
|
176
|
-
const text = handlers.getText();
|
|
177
|
-
const caret = textarea()?.selectionStart ?? text.length;
|
|
178
|
-
caretIndex.current = caret;
|
|
179
|
-
const head = text.slice(0, caret);
|
|
180
|
-
const char = resolve().trigger ?? "@";
|
|
181
|
-
const anchor = head.lastIndexOf(char);
|
|
182
|
-
const token = anchor === -1 ? "" : head.slice(anchor + char.length);
|
|
183
|
-
if (anchor === -1 || /\s/.test(token)) {
|
|
184
|
-
closePopup();
|
|
185
|
-
return;
|
|
186
|
-
}
|
|
187
|
-
const found = resolve().items.filter((entry) => entry.label.toLowerCase().startsWith(token.toLowerCase()));
|
|
188
|
-
setMatches(found);
|
|
189
|
-
setActive(0);
|
|
190
|
-
anchorIndex.current = anchor;
|
|
191
|
-
setPopupOpen(found.length > 0);
|
|
192
|
-
};
|
|
193
|
-
const insert = (entry) => {
|
|
194
|
-
const text = handlers.getText();
|
|
195
|
-
const char = resolve().trigger ?? "@";
|
|
196
|
-
const next = text.slice(0, anchorIndex.current) + char + entry.label + " " + text.slice(caretIndex.current);
|
|
197
|
-
handlers.setText(next);
|
|
198
|
-
closePopup();
|
|
199
|
-
setTimeout(() => {
|
|
200
|
-
const el = textarea();
|
|
201
|
-
if (!el) return;
|
|
202
|
-
const caret = anchorIndex.current + char.length + entry.label.length + 1;
|
|
203
|
-
el.focus();
|
|
204
|
-
el.setSelectionRange(caret, caret);
|
|
205
|
-
}, 0);
|
|
206
|
-
};
|
|
207
|
-
/** Feed the field's input events through here — the vessel watches
|
|
208
|
-
* the text as it lands, from the element itself. */
|
|
209
|
-
const onInput = () => detect();
|
|
210
|
-
/** Arrows move, Enter inserts, Escape dismisses. Answers `true` when
|
|
211
|
-
* the vessel consumed the key. */
|
|
212
|
-
const onKeydown = (event) => {
|
|
213
|
-
if (!popupOpen || matches.length === 0) return false;
|
|
214
|
-
if (event.key === "ArrowDown") {
|
|
215
|
-
event.preventDefault();
|
|
216
|
-
setActive((current) => (current + 1) % matches.length);
|
|
217
|
-
} else if (event.key === "ArrowUp") {
|
|
218
|
-
event.preventDefault();
|
|
219
|
-
setActive((current) => (current - 1 + matches.length) % matches.length);
|
|
220
|
-
} else if (event.key === "Enter") {
|
|
221
|
-
event.preventDefault();
|
|
222
|
-
insert(matches[active]);
|
|
223
|
-
} else if (event.key === "Escape") closePopup();
|
|
224
|
-
else return false;
|
|
225
|
-
return true;
|
|
226
|
-
};
|
|
227
|
-
return {
|
|
228
|
-
open: popupOpen,
|
|
229
|
-
matches,
|
|
230
|
-
active,
|
|
231
|
-
setActive,
|
|
232
|
-
insert,
|
|
233
|
-
close: closePopup,
|
|
234
|
-
onInput,
|
|
235
|
-
onKeydown
|
|
236
|
-
};
|
|
237
|
-
}
|
|
238
|
-
//#endregion
|
|
239
|
-
//#region src/components/mentions/index.tsx
|
|
240
|
-
/** The vessel: the candidates themselves as a floating card. The anchor
|
|
241
|
-
* is virtual — a live rectangle off the host's field — so a host keeps
|
|
242
|
-
* its own anatomy (the textarea rides where the host puts it) and the
|
|
243
|
-
* vessel still points at the right place. Shares the detection state
|
|
244
|
-
* with the host through `useMentions`. */
|
|
245
|
-
function MentionsVessel({ open = false, matches = [], active = 0, anchor = null, onInsert, onActiveChange, onOpenChange }) {
|
|
246
|
-
return /* @__PURE__ */ jsx(Popover$1.Root, {
|
|
247
|
-
open,
|
|
248
|
-
onOpenChange: (details) => onOpenChange?.(details.open),
|
|
249
|
-
positioning: {
|
|
250
|
-
placement: "bottom-start",
|
|
251
|
-
getAnchorRect: () => anchor?.getBoundingClientRect() ?? null
|
|
252
|
-
},
|
|
253
|
-
children: /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsx(Popover$1.Content, {
|
|
254
|
-
asChild: true,
|
|
255
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
256
|
-
"data-scope": "mentions",
|
|
257
|
-
"data-part": "popup",
|
|
258
|
-
children: matches.map((entry, index) => /* @__PURE__ */ jsx("div", {
|
|
259
|
-
"data-scope": "mentions",
|
|
260
|
-
"data-part": "option",
|
|
261
|
-
"data-active": index === active ? "" : void 0,
|
|
262
|
-
onMouseEnter: () => onActiveChange?.(index),
|
|
263
|
-
onMouseDown: (event) => event.preventDefault(),
|
|
264
|
-
onClick: () => onInsert?.(entry),
|
|
265
|
-
children: entry.label
|
|
266
|
-
}, entry.value))
|
|
267
|
-
})
|
|
268
|
-
}) }) })
|
|
269
|
-
});
|
|
270
|
-
}
|
|
271
|
-
function Mentions({ items = [], value, trigger = "@", placeholder, autoresize = false, invalid = false, onValueChange, children, ...rest }) {
|
|
272
|
-
const [internal, setInternal] = useState("");
|
|
273
|
-
const fieldRef = useRef(null);
|
|
274
|
-
const el = () => fieldRef.current;
|
|
275
|
-
const current = value ?? internal;
|
|
276
|
-
const mentions = useMentions({
|
|
277
|
-
items,
|
|
278
|
-
trigger
|
|
279
|
-
}, el, {
|
|
280
|
-
getText: () => el()?.value ?? current,
|
|
281
|
-
setText: (next) => {
|
|
282
|
-
setInternal(next);
|
|
283
|
-
onValueChange?.(next);
|
|
284
|
-
}
|
|
285
|
-
});
|
|
286
|
-
const handleChange = (event) => {
|
|
287
|
-
const node = event.currentTarget;
|
|
288
|
-
setInternal(node.value);
|
|
289
|
-
onValueChange?.(node.value);
|
|
290
|
-
mentions.onInput();
|
|
291
|
-
};
|
|
292
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
293
|
-
...rest,
|
|
294
|
-
"data-scope": "mentions",
|
|
295
|
-
"data-part": "root",
|
|
296
|
-
children: [
|
|
297
|
-
/* @__PURE__ */ jsx(Field.Textarea, {
|
|
298
|
-
ref: fieldRef,
|
|
299
|
-
autoresize,
|
|
300
|
-
rows: 3,
|
|
301
|
-
placeholder,
|
|
302
|
-
value: current,
|
|
303
|
-
onChange: handleChange,
|
|
304
|
-
onKeyDown: (event) => mentions.onKeydown(event),
|
|
305
|
-
"data-invalid": invalid || void 0,
|
|
306
|
-
"data-scope": "mentions",
|
|
307
|
-
"data-part": "textarea"
|
|
308
|
-
}),
|
|
309
|
-
/* @__PURE__ */ jsx(MentionsVessel, {
|
|
310
|
-
open: mentions.open,
|
|
311
|
-
matches: mentions.matches,
|
|
312
|
-
active: mentions.active,
|
|
313
|
-
anchor: el(),
|
|
314
|
-
onInsert: mentions.insert,
|
|
315
|
-
onActiveChange: mentions.setActive,
|
|
316
|
-
onOpenChange: (open) => {
|
|
317
|
-
if (!open) mentions.close();
|
|
318
|
-
}
|
|
319
|
-
}),
|
|
320
|
-
children
|
|
321
|
-
]
|
|
322
|
-
});
|
|
323
|
-
}
|
|
324
|
-
injectComponentStyle("mentions");
|
|
325
|
-
//#endregion
|
|
326
|
-
//#region src/components/ai-prompt-input/index.tsx
|
|
327
|
-
const arrowUpGlyph = /* @__PURE__ */ jsx("svg", {
|
|
328
|
-
viewBox: "0 0 16 16",
|
|
329
|
-
width: 14,
|
|
330
|
-
height: 14,
|
|
331
|
-
"aria-hidden": "true",
|
|
332
|
-
fill: "none",
|
|
333
|
-
stroke: "currentColor",
|
|
334
|
-
strokeWidth: 1.5,
|
|
335
|
-
strokeLinecap: "square",
|
|
336
|
-
children: /* @__PURE__ */ jsx("path", { d: "M8 13V3M3.5 7.5 8 3l4.5 4.5" })
|
|
337
|
-
});
|
|
338
|
-
const stopGlyph = /* @__PURE__ */ jsx("svg", {
|
|
339
|
-
viewBox: "0 0 16 16",
|
|
340
|
-
width: 14,
|
|
341
|
-
height: 14,
|
|
342
|
-
"aria-hidden": "true",
|
|
343
|
-
children: /* @__PURE__ */ jsx("rect", {
|
|
344
|
-
x: 4.5,
|
|
345
|
-
y: 4.5,
|
|
346
|
-
width: 7,
|
|
347
|
-
height: 7,
|
|
348
|
-
fill: "currentColor"
|
|
349
|
-
})
|
|
350
|
-
});
|
|
351
|
-
/** An empty slot leaves no part in the anatomy — the bare vessel keeps
|
|
352
|
-
* its single-line posture. */
|
|
353
|
-
function row(part, content) {
|
|
354
|
-
if (content == null || Array.isArray(content) && content.length === 0) return null;
|
|
355
|
-
return /* @__PURE__ */ jsx("div", {
|
|
356
|
-
"data-scope": "ai",
|
|
357
|
-
"data-part": part,
|
|
358
|
-
children: content
|
|
359
|
-
});
|
|
360
|
-
}
|
|
361
|
-
function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder = "Send a message", disabled = false, busy = false, mentions, header, leading, trailing, footer, footerEnd, ...rest }) {
|
|
362
|
-
const fieldRef = useRef(null);
|
|
363
|
-
const mentionState = useMentions(() => ({
|
|
364
|
-
items: mentions?.items ?? [],
|
|
365
|
-
trigger: mentions?.trigger
|
|
366
|
-
}), () => fieldRef.current, {
|
|
367
|
-
getText: () => fieldRef.current?.value ?? value,
|
|
368
|
-
setText: (next) => onValueChange?.(next)
|
|
369
|
-
});
|
|
370
|
-
const mentionsActive = mentions != null;
|
|
371
|
-
const submit = () => {
|
|
372
|
-
const text = value.trim();
|
|
373
|
-
if (!text || disabled || busy) return;
|
|
374
|
-
onSubmit?.(text);
|
|
375
|
-
onValueChange?.("");
|
|
376
|
-
};
|
|
377
|
-
const seal = busy ? /* @__PURE__ */ jsx(Button, {
|
|
378
|
-
variant: "solid",
|
|
379
|
-
size: "sm",
|
|
380
|
-
square: true,
|
|
381
|
-
type: "button",
|
|
382
|
-
"aria-label": "Stop",
|
|
383
|
-
disabled,
|
|
384
|
-
onClick: () => onStop?.(),
|
|
385
|
-
children: stopGlyph
|
|
386
|
-
}) : /* @__PURE__ */ jsx(Button, {
|
|
387
|
-
variant: "solid",
|
|
388
|
-
size: "sm",
|
|
389
|
-
square: true,
|
|
390
|
-
type: "submit",
|
|
391
|
-
"aria-label": "Send",
|
|
392
|
-
disabled: disabled || !value.trim(),
|
|
393
|
-
children: arrowUpGlyph
|
|
394
|
-
});
|
|
395
|
-
const hasFooter = footer != null && (!Array.isArray(footer) || footer.length > 0);
|
|
396
|
-
return /* @__PURE__ */ jsxs("form", {
|
|
397
|
-
...rest,
|
|
398
|
-
"data-scope": "ai",
|
|
399
|
-
"data-part": "prompt",
|
|
400
|
-
onSubmit: (event) => {
|
|
401
|
-
event.preventDefault();
|
|
402
|
-
submit();
|
|
403
|
-
},
|
|
404
|
-
children: [
|
|
405
|
-
row("prompt-header", header),
|
|
406
|
-
/* @__PURE__ */ jsxs("div", {
|
|
407
|
-
"data-scope": "ai",
|
|
408
|
-
"data-part": "prompt-main",
|
|
409
|
-
children: [
|
|
410
|
-
row("prompt-leading", leading),
|
|
411
|
-
/* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsx(Field.Textarea, {
|
|
412
|
-
ref: fieldRef,
|
|
413
|
-
autoresize: true,
|
|
414
|
-
rows: 1,
|
|
415
|
-
value,
|
|
416
|
-
placeholder,
|
|
417
|
-
disabled,
|
|
418
|
-
onChange: (event) => {
|
|
419
|
-
onValueChange?.(event.target.value);
|
|
420
|
-
mentionState.onInput();
|
|
421
|
-
},
|
|
422
|
-
onKeyDown: (event) => {
|
|
423
|
-
if (mentionState.onKeydown(event)) return;
|
|
424
|
-
if (event.key === "Enter" && !event.shiftKey) {
|
|
425
|
-
event.preventDefault();
|
|
426
|
-
submit();
|
|
427
|
-
}
|
|
428
|
-
}
|
|
429
|
-
}) }),
|
|
430
|
-
mentionsActive ? /* @__PURE__ */ jsx(MentionsVessel, {
|
|
431
|
-
open: mentionState.open,
|
|
432
|
-
matches: mentionState.matches,
|
|
433
|
-
active: mentionState.active,
|
|
434
|
-
anchor: fieldRef.current,
|
|
435
|
-
onInsert: mentionState.insert,
|
|
436
|
-
onActiveChange: mentionState.setActive,
|
|
437
|
-
onOpenChange: (open) => {
|
|
438
|
-
if (!open) mentionState.close();
|
|
439
|
-
}
|
|
440
|
-
}) : null,
|
|
441
|
-
row("prompt-trailing", hasFooter ? trailing : trailing ?? seal)
|
|
442
|
-
]
|
|
443
|
-
}),
|
|
444
|
-
hasFooter ? /* @__PURE__ */ jsxs("div", {
|
|
445
|
-
"data-scope": "ai",
|
|
446
|
-
"data-part": "prompt-footer",
|
|
447
|
-
children: [footer, row("prompt-end", footerEnd == null ? seal : /* @__PURE__ */ jsxs(Fragment, { children: [footerEnd, seal] }))]
|
|
448
|
-
}) : null
|
|
449
|
-
]
|
|
450
|
-
});
|
|
451
|
-
}
|
|
452
|
-
injectComponentStyle("ai");
|
|
453
|
-
//#endregion
|
|
454
|
-
//#region src/components/ai/chevron.tsx
|
|
455
|
-
/** The folding chevron the shared indicator turns. */
|
|
456
|
-
const chevron$2 = /* @__PURE__ */ jsx("svg", {
|
|
457
|
-
viewBox: "0 0 16 16",
|
|
458
|
-
fill: "none",
|
|
459
|
-
"aria-hidden": "true",
|
|
460
|
-
children: /* @__PURE__ */ jsx("path", {
|
|
461
|
-
d: "M6 4l4 4-4 4",
|
|
462
|
-
stroke: "currentColor",
|
|
463
|
-
strokeWidth: 1.5,
|
|
464
|
-
strokeLinecap: "round",
|
|
465
|
-
strokeLinejoin: "round"
|
|
466
|
-
})
|
|
467
|
-
});
|
|
468
|
-
//#endregion
|
|
469
|
-
//#region src/components/collapsible/index.tsx
|
|
470
|
-
/** Ark's Collapsible, dressed in the paper-and-ink system: one control on
|
|
471
|
-
* the paper, its panel dissolving open to the machine's measured height.
|
|
472
|
-
* The API is Ark's own — Root, Trigger, Content, Indicator. */
|
|
473
|
-
const Collapsible = Collapsible$1;
|
|
474
|
-
injectComponentStyle("collapsible");
|
|
475
|
-
//#endregion
|
|
476
|
-
//#region src/components/ai-reasoning/index.tsx
|
|
477
|
-
function Reasoning({ label = "Thinking", children, ...rest }) {
|
|
478
|
-
return /* @__PURE__ */ jsxs(Collapsible.Root, {
|
|
479
|
-
...rest,
|
|
480
|
-
"data-ai": "reasoning",
|
|
481
|
-
children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, { children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx(Collapsible.Indicator, { children: chevron$2 })] }), /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx("div", {
|
|
482
|
-
"data-scope": "ai",
|
|
483
|
-
"data-part": "reasoning-content",
|
|
484
|
-
children
|
|
485
|
-
}) })]
|
|
486
|
-
});
|
|
487
|
-
}
|
|
488
|
-
injectComponentStyle("ai");
|
|
489
|
-
//#endregion
|
|
490
|
-
//#region src/components/ai-response/code-copy.ts
|
|
491
|
-
/** The two glyphs a copy affordance needs: the stamp and its
|
|
492
|
-
* confirmation. Inline SVG keeps the enhancement framework-agnostic —
|
|
493
|
-
* it lives beside the renderer's generated code HTML. */
|
|
494
|
-
const COPY_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
|
|
495
|
-
const COPIED_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
|
|
496
|
-
/** How long the confirmation stays before the stamp returns. */
|
|
497
|
-
const REVERT_MS = 1500;
|
|
498
|
-
/** Make sure every fenced block under `host` carries its copy stamp.
|
|
499
|
-
* The stamp anchors to a wrapper outside the scrolling `pre` — inside,
|
|
500
|
-
* it would fix to the overflow area and travel out of view with the
|
|
501
|
-
* code. The renderer rebuilds the markdown as one HTML string on every
|
|
502
|
-
* stream tick, so this stays idempotent and cheap enough to re-run
|
|
503
|
-
* after each patch. */
|
|
504
|
-
function decorateCodeCopy(host, copyLabel) {
|
|
505
|
-
for (const pre of host.querySelectorAll("pre")) {
|
|
506
|
-
let body = pre.parentElement;
|
|
507
|
-
if (!body || body.getAttribute("data-part") !== "code-body") {
|
|
508
|
-
body = document.createElement("div");
|
|
509
|
-
body.setAttribute("data-scope", "ai");
|
|
510
|
-
body.setAttribute("data-part", "code-body");
|
|
511
|
-
pre.replaceWith(body);
|
|
512
|
-
body.appendChild(pre);
|
|
513
|
-
}
|
|
514
|
-
let button = body.querySelector("[data-part=\"code-copy\"]");
|
|
515
|
-
if (!button) {
|
|
516
|
-
button = document.createElement("button");
|
|
517
|
-
button.type = "button";
|
|
518
|
-
button.setAttribute("data-scope", "ai");
|
|
519
|
-
button.setAttribute("data-part", "code-copy");
|
|
520
|
-
button.innerHTML = COPY_CODE_ICON;
|
|
521
|
-
body.appendChild(button);
|
|
522
|
-
}
|
|
523
|
-
button.title = copyLabel;
|
|
524
|
-
button.setAttribute("aria-label", copyLabel);
|
|
525
|
-
}
|
|
526
|
-
}
|
|
527
|
-
/** The one delegated click for the whole response: copy the block's
|
|
528
|
-
* text and confirm in place, then return the stamp after a beat. */
|
|
529
|
-
async function clickCodeCopy(event, copyLabel, copiedLabel) {
|
|
530
|
-
const button = event.target?.closest("[data-part=\"code-copy\"]");
|
|
531
|
-
const pre = button?.closest("[data-part=\"code-body\"]")?.querySelector("pre");
|
|
532
|
-
if (!button || !pre) return;
|
|
533
|
-
await navigator.clipboard.writeText(pre.textContent ?? "");
|
|
534
|
-
button.innerHTML = COPIED_CODE_ICON;
|
|
535
|
-
button.setAttribute("data-state", "copied");
|
|
536
|
-
button.title = copiedLabel;
|
|
537
|
-
button.setAttribute("aria-label", copiedLabel);
|
|
538
|
-
setTimeout(() => {
|
|
539
|
-
if (!button.isConnected) return;
|
|
540
|
-
button.innerHTML = COPY_CODE_ICON;
|
|
541
|
-
button.removeAttribute("data-state");
|
|
542
|
-
button.title = copyLabel;
|
|
543
|
-
button.setAttribute("aria-label", copyLabel);
|
|
544
|
-
}, REVERT_MS);
|
|
545
|
-
}
|
|
546
|
-
//#endregion
|
|
547
|
-
//#region src/components/ai-response/index.tsx
|
|
548
|
-
function Response({ content, highlighter, copyLabel = "Copy code", copiedLabel = "Copied", ...rest }) {
|
|
549
|
-
const root = useRef(null);
|
|
550
|
-
useEffect(() => {
|
|
551
|
-
const host = root.current;
|
|
552
|
-
if (host) decorateCodeCopy(host, copyLabel);
|
|
553
|
-
}, [
|
|
554
|
-
content,
|
|
555
|
-
highlighter,
|
|
556
|
-
copyLabel
|
|
557
|
-
]);
|
|
558
|
-
const onClick = (event) => {
|
|
559
|
-
clickCodeCopy(event.nativeEvent, copyLabel, copiedLabel);
|
|
560
|
-
};
|
|
561
|
-
return /* @__PURE__ */ jsx("div", {
|
|
562
|
-
...rest,
|
|
563
|
-
ref: root,
|
|
564
|
-
"data-scope": "ai",
|
|
565
|
-
"data-part": "response",
|
|
566
|
-
onClick,
|
|
567
|
-
dangerouslySetInnerHTML: { __html: renderHtml(content, highlighter ? { highlighter } : void 0) }
|
|
568
|
-
});
|
|
569
|
-
}
|
|
570
|
-
injectComponentStyle("ai");
|
|
571
|
-
//#endregion
|
|
572
|
-
//#region src/components/ai-source/index.tsx
|
|
573
|
-
function Source({ href, children, ...rest }) {
|
|
574
|
-
return /* @__PURE__ */ jsx("li", {
|
|
575
|
-
"data-scope": "ai",
|
|
576
|
-
"data-part": "source",
|
|
577
|
-
children: /* @__PURE__ */ jsx("a", {
|
|
578
|
-
...rest,
|
|
579
|
-
href,
|
|
580
|
-
target: "_blank",
|
|
581
|
-
rel: "noreferrer",
|
|
582
|
-
children: children ?? href
|
|
583
|
-
})
|
|
584
|
-
});
|
|
585
|
-
}
|
|
586
|
-
function Sources({ children, ...rest }) {
|
|
587
|
-
return /* @__PURE__ */ jsx("ol", {
|
|
588
|
-
...rest,
|
|
589
|
-
"data-scope": "ai",
|
|
590
|
-
"data-part": "sources",
|
|
591
|
-
children
|
|
592
|
-
});
|
|
593
|
-
}
|
|
594
|
-
injectComponentStyle("ai");
|
|
595
|
-
//#endregion
|
|
596
|
-
//#region src/components/ai-suggestion/index.tsx
|
|
597
|
-
function Suggestion({ prompt, onSelect, ...rest }) {
|
|
598
|
-
return /* @__PURE__ */ jsx(Button, {
|
|
599
|
-
variant: "outline",
|
|
600
|
-
size: "sm",
|
|
601
|
-
...rest,
|
|
602
|
-
onClick: () => onSelect?.(prompt),
|
|
603
|
-
children: prompt
|
|
604
|
-
});
|
|
605
|
-
}
|
|
606
|
-
injectComponentStyle("ai");
|
|
607
|
-
//#endregion
|
|
608
|
-
//#region src/components/ai-tool/index.tsx
|
|
609
|
-
function Tool({ name, label, status, input, output, ...rest }) {
|
|
610
|
-
return /* @__PURE__ */ jsxs(Collapsible.Root, {
|
|
611
|
-
...rest,
|
|
612
|
-
"data-ai": "tool",
|
|
613
|
-
"data-status": status,
|
|
614
|
-
children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, { children: [
|
|
615
|
-
/* @__PURE__ */ jsx("span", { children: label ?? name }),
|
|
616
|
-
status ? /* @__PURE__ */ jsx("span", {
|
|
617
|
-
"data-scope": "ai",
|
|
618
|
-
"data-part": "tool-status",
|
|
619
|
-
children: status.charAt(0).toUpperCase() + status.slice(1)
|
|
620
|
-
}) : null,
|
|
621
|
-
/* @__PURE__ */ jsx(Collapsible.Indicator, { children: chevron$2 })
|
|
622
|
-
] }), /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsxs("div", {
|
|
623
|
-
"data-scope": "ai",
|
|
624
|
-
"data-part": "tool-body",
|
|
625
|
-
children: [input ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
626
|
-
"data-scope": "ai",
|
|
627
|
-
"data-part": "tool-label",
|
|
628
|
-
children: "Input"
|
|
629
|
-
}), /* @__PURE__ */ jsx("pre", { children: input })] }) : null, output ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
630
|
-
"data-scope": "ai",
|
|
631
|
-
"data-part": "tool-label",
|
|
632
|
-
children: "Output"
|
|
633
|
-
}), /* @__PURE__ */ jsx("pre", { children: output })] }) : null]
|
|
634
|
-
}) })]
|
|
635
|
-
});
|
|
636
|
-
}
|
|
637
|
-
injectComponentStyle("ai");
|
|
638
|
-
//#endregion
|
|
639
|
-
//#region src/components/ai/index.tsx
|
|
640
|
-
/** A conversation column: Root is the log, Message carries a role, and
|
|
641
|
-
* the speaking parts — Response, Reasoning, Tool, Sources — part the
|
|
642
|
-
* stream. The interactive folds are the shared Collapsible wearing a
|
|
643
|
-
* `data-ai` marker, so the machine work is never ours. Parts stay
|
|
644
|
-
* agnostic of any client; consumers map their message format (e.g. the
|
|
645
|
-
* `UIMessage` parts re-exported here) onto these primitives. */
|
|
646
|
-
function part$12(name, tag, extra = {}) {
|
|
647
|
-
const Tag = tag;
|
|
648
|
-
const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
|
|
649
|
-
...extra,
|
|
650
|
-
...rest,
|
|
651
|
-
"data-scope": "ai",
|
|
652
|
-
"data-part": name.toLowerCase(),
|
|
653
|
-
children
|
|
654
|
-
});
|
|
655
|
-
Component.displayName = "Ai" + name;
|
|
656
|
-
return Component;
|
|
657
|
-
}
|
|
658
|
-
/** The log itself: the column every stroke lands in, a landmark to
|
|
659
|
-
* screen readers. */
|
|
660
|
-
const Conversation = part$12("Conversation", "div", {
|
|
661
|
-
role: "log",
|
|
662
|
-
"aria-label": "Conversation"
|
|
663
|
-
});
|
|
664
|
-
/** The bubble's inner measure — content that belongs to neither side
|
|
665
|
-
* specifically. */
|
|
666
|
-
const MessageContent = part$12("Content", "div");
|
|
667
|
-
/** The quiet row under a message — copy, retry, feedback. */
|
|
668
|
-
const Actions$4 = part$12("Actions", "div");
|
|
669
|
-
/** The while-it-works whisper for the in-flight turns. */
|
|
670
|
-
const Loader = part$12("Loader", "span", {
|
|
671
|
-
role: "status",
|
|
672
|
-
"aria-label": "Loading"
|
|
673
|
-
});
|
|
674
|
-
/** The whole family under one handle — `Ai.Conversation`,
|
|
675
|
-
* `Ai.Message`, and the rest, exactly as before the split. */
|
|
676
|
-
const Ai = Object.assign(Conversation, {
|
|
677
|
-
Conversation,
|
|
678
|
-
MessageContent,
|
|
679
|
-
Actions: Actions$4,
|
|
680
|
-
Loader,
|
|
681
|
-
Message,
|
|
682
|
-
Response,
|
|
683
|
-
Reasoning,
|
|
684
|
-
Tool,
|
|
685
|
-
Sources,
|
|
686
|
-
Source,
|
|
687
|
-
Action,
|
|
688
|
-
Suggestion,
|
|
689
|
-
PromptInput
|
|
690
|
-
});
|
|
691
|
-
injectComponentStyle("ai");
|
|
692
|
-
//#endregion
|
|
693
|
-
//#region src/components/ai-attachments/index.tsx
|
|
694
|
-
const imageGlyph = /* @__PURE__ */ jsxs("svg", {
|
|
695
|
-
viewBox: "0 0 16 16",
|
|
696
|
-
"aria-hidden": "true",
|
|
697
|
-
fill: "none",
|
|
698
|
-
stroke: "currentColor",
|
|
699
|
-
strokeWidth: 1.5,
|
|
700
|
-
strokeLinecap: "square",
|
|
701
|
-
children: [
|
|
702
|
-
/* @__PURE__ */ jsx("rect", {
|
|
703
|
-
x: 2.5,
|
|
704
|
-
y: 3.5,
|
|
705
|
-
width: 11,
|
|
706
|
-
height: 9
|
|
707
|
-
}),
|
|
708
|
-
/* @__PURE__ */ jsx("path", { d: "M2.5 10.5 6 7l3 3 2-1.5 2.5 2" }),
|
|
709
|
-
/* @__PURE__ */ jsx("circle", {
|
|
710
|
-
cx: 6,
|
|
711
|
-
cy: 6,
|
|
712
|
-
r: .75,
|
|
713
|
-
fill: "currentColor",
|
|
714
|
-
stroke: "none"
|
|
715
|
-
})
|
|
716
|
-
]
|
|
717
|
-
});
|
|
718
|
-
const fileGlyph = /* @__PURE__ */ jsxs("svg", {
|
|
719
|
-
viewBox: "0 0 16 16",
|
|
720
|
-
"aria-hidden": "true",
|
|
721
|
-
fill: "none",
|
|
722
|
-
stroke: "currentColor",
|
|
723
|
-
strokeWidth: 1.5,
|
|
724
|
-
strokeLinecap: "square",
|
|
725
|
-
children: [/* @__PURE__ */ jsx("path", { d: "M4 2.5h5l3 3V13.5H4z" }), /* @__PURE__ */ jsx("path", { d: "M9 2.5v3h3" })]
|
|
726
|
-
});
|
|
727
|
-
const removeGlyph = /* @__PURE__ */ jsx("svg", {
|
|
728
|
-
viewBox: "0 0 16 16",
|
|
729
|
-
width: 12,
|
|
730
|
-
height: 12,
|
|
731
|
-
"aria-hidden": "true",
|
|
732
|
-
fill: "none",
|
|
733
|
-
stroke: "currentColor",
|
|
734
|
-
strokeWidth: 1.5,
|
|
735
|
-
strokeLinecap: "square",
|
|
736
|
-
children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
|
|
737
|
-
});
|
|
738
|
-
const IMAGE_EXTS = [
|
|
739
|
-
"png",
|
|
740
|
-
"jpg",
|
|
741
|
-
"jpeg",
|
|
742
|
-
"gif",
|
|
743
|
-
"webp",
|
|
744
|
-
"svg",
|
|
745
|
-
"avif",
|
|
746
|
-
"bmp",
|
|
747
|
-
"ico"
|
|
748
|
-
];
|
|
749
|
-
const isImage = (name) => IMAGE_EXTS.includes(name.split(".").pop()?.toLowerCase() ?? "");
|
|
750
|
-
const humanSize = (bytes) => {
|
|
751
|
-
if (bytes < 1024) return `${bytes} B`;
|
|
752
|
-
const units = [
|
|
753
|
-
"KB",
|
|
754
|
-
"MB",
|
|
755
|
-
"GB"
|
|
756
|
-
];
|
|
757
|
-
let value = bytes;
|
|
758
|
-
let unit = -1;
|
|
759
|
-
do {
|
|
760
|
-
value /= 1024;
|
|
761
|
-
unit += 1;
|
|
762
|
-
} while (value >= 1024 && unit < units.length - 1);
|
|
763
|
-
return `${value.toFixed(1)} ${units[unit]}`;
|
|
764
|
-
};
|
|
765
|
-
function Attachment({ name, size, status = "ready", onRemove, ...rest }) {
|
|
766
|
-
return /* @__PURE__ */ jsxs("span", {
|
|
767
|
-
...rest,
|
|
768
|
-
"data-scope": "ai",
|
|
769
|
-
"data-part": "attachment",
|
|
770
|
-
"data-status": status,
|
|
771
|
-
children: [
|
|
772
|
-
isImage(name) ? imageGlyph : fileGlyph,
|
|
773
|
-
/* @__PURE__ */ jsx("span", { children: name }),
|
|
774
|
-
size !== void 0 ? /* @__PURE__ */ jsx("span", { children: humanSize(size) }) : null,
|
|
775
|
-
/* @__PURE__ */ jsx("button", {
|
|
776
|
-
type: "button",
|
|
777
|
-
"data-remove": "",
|
|
778
|
-
"aria-label": `Remove ${name}`,
|
|
779
|
-
onClick: () => onRemove?.(),
|
|
780
|
-
children: removeGlyph
|
|
781
|
-
})
|
|
782
|
-
]
|
|
783
|
-
});
|
|
784
|
-
}
|
|
785
|
-
/** The row the files ride in — a wrapping line of chips. */
|
|
786
|
-
function Attachments({ children, ...rest }) {
|
|
787
|
-
return /* @__PURE__ */ jsx("span", {
|
|
788
|
-
...rest,
|
|
789
|
-
"data-scope": "ai",
|
|
790
|
-
"data-part": "attachments",
|
|
791
|
-
children
|
|
792
|
-
});
|
|
793
|
-
}
|
|
794
|
-
injectComponentStyle("ai");
|
|
795
|
-
//#endregion
|
|
796
|
-
//#region src/components/alert/index.tsx
|
|
797
|
-
const StatusContext = createContext("ink");
|
|
798
|
-
function glyph(status) {
|
|
799
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
800
|
-
width: 16,
|
|
801
|
-
height: 16,
|
|
802
|
-
viewBox: "0 0 24 24",
|
|
803
|
-
fill: "none",
|
|
804
|
-
stroke: "currentColor",
|
|
805
|
-
strokeWidth: 1.75,
|
|
806
|
-
strokeLinecap: "round",
|
|
807
|
-
strokeLinejoin: "round",
|
|
808
|
-
"aria-hidden": "true",
|
|
809
|
-
children: /* @__PURE__ */ jsx("path", { d: {
|
|
810
|
-
info: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
|
|
811
|
-
success: "m4 12.5 5 5L20 6.5",
|
|
812
|
-
warning: "M12 4 2.5 20h19L12 4Zm0 6v4m0 3v.01",
|
|
813
|
-
danger: "M6 6l12 12M18 6 6 18",
|
|
814
|
-
ink: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"
|
|
815
|
-
}[status] })
|
|
816
|
-
});
|
|
817
|
-
}
|
|
818
|
-
function AlertRoot({ status = "ink", children, ...rest }) {
|
|
819
|
-
return /* @__PURE__ */ jsx(StatusContext.Provider, {
|
|
820
|
-
value: status,
|
|
821
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
822
|
-
...rest,
|
|
823
|
-
role: status === "ink" || status === "info" ? "status" : "alert",
|
|
824
|
-
"data-scope": "alert",
|
|
825
|
-
"data-part": "root",
|
|
826
|
-
"data-status": status,
|
|
827
|
-
children
|
|
828
|
-
})
|
|
829
|
-
});
|
|
830
|
-
}
|
|
831
|
-
function Icon$2() {
|
|
832
|
-
const status = useContext(StatusContext);
|
|
833
|
-
return /* @__PURE__ */ jsx("span", {
|
|
834
|
-
"data-scope": "alert",
|
|
835
|
-
"data-part": "icon",
|
|
836
|
-
children: glyph(status)
|
|
837
|
-
});
|
|
838
|
-
}
|
|
839
|
-
function Body$2({ children, ...rest }) {
|
|
840
|
-
return /* @__PURE__ */ jsx("div", {
|
|
841
|
-
...rest,
|
|
842
|
-
"data-scope": "alert",
|
|
843
|
-
"data-part": "body",
|
|
844
|
-
children
|
|
845
|
-
});
|
|
846
|
-
}
|
|
847
|
-
function Title$4({ children, ...rest }) {
|
|
848
|
-
return /* @__PURE__ */ jsx("p", {
|
|
849
|
-
...rest,
|
|
850
|
-
"data-scope": "alert",
|
|
851
|
-
"data-part": "title",
|
|
852
|
-
children
|
|
853
|
-
});
|
|
854
|
-
}
|
|
855
|
-
function Description$5({ children, ...rest }) {
|
|
856
|
-
return /* @__PURE__ */ jsx("p", {
|
|
857
|
-
...rest,
|
|
858
|
-
"data-scope": "alert",
|
|
859
|
-
"data-part": "description",
|
|
860
|
-
children
|
|
861
|
-
});
|
|
862
|
-
}
|
|
863
|
-
const Alert = Object.assign(AlertRoot, {
|
|
864
|
-
Root: AlertRoot,
|
|
865
|
-
Icon: Icon$2,
|
|
866
|
-
Body: Body$2,
|
|
867
|
-
Title: Title$4,
|
|
868
|
-
Description: Description$5
|
|
869
|
-
});
|
|
870
|
-
injectComponentStyle("alert");
|
|
871
|
-
//#endregion
|
|
872
|
-
//#region src/components/angle-slider/index.tsx
|
|
873
|
-
/** Ark's AngleSlider, dressed in the paper-and-ink system: a flat paper dial
|
|
874
|
-
* the thumb sweeps as a pigment needle over hairline degree ticks. The API
|
|
875
|
-
* is Ark's own — Root, Label, ValueText, Control, Thumb, MarkerGroup,
|
|
876
|
-
* Marker, HiddenInput. */
|
|
877
|
-
const AngleSlider = AngleSlider$1;
|
|
878
|
-
injectComponentStyle("angle-slider");
|
|
879
|
-
//#endregion
|
|
880
|
-
//#region src/components/aspect-ratio/index.tsx
|
|
881
|
-
function AspectRatio({ ratio = "1 / 1", ...rest }) {
|
|
882
|
-
return /* @__PURE__ */ jsx("div", {
|
|
883
|
-
...rest,
|
|
884
|
-
style: {
|
|
885
|
-
...rest.style,
|
|
886
|
-
"--bs-aspect-ratio": ratio
|
|
887
|
-
},
|
|
888
|
-
"data-scope": "aspect-ratio",
|
|
889
|
-
"data-part": "root"
|
|
890
|
-
});
|
|
891
|
-
}
|
|
892
|
-
injectComponentStyle("aspect-ratio");
|
|
893
|
-
//#endregion
|
|
894
|
-
//#region src/components/autocomplete/index.tsx
|
|
895
|
-
function AutoComplete({ value = "", items = [], placeholder, filter, onValueChange, ...rest }) {
|
|
896
|
-
const { collection, filter: filterItems } = useListCollection$1({
|
|
897
|
-
initialItems: items,
|
|
898
|
-
filter: (item, input) => filter ? filter(item, input) : item.toLowerCase().includes(input.toLowerCase())
|
|
899
|
-
});
|
|
900
|
-
return /* @__PURE__ */ jsxs(Combobox$1.Root, {
|
|
901
|
-
...rest,
|
|
902
|
-
collection,
|
|
903
|
-
inputValue: value,
|
|
904
|
-
allowCustomValue: true,
|
|
905
|
-
onValueChange: (details) => {
|
|
906
|
-
const [first] = details.value;
|
|
907
|
-
if (first != null) onValueChange?.(first);
|
|
908
|
-
},
|
|
909
|
-
onInputValueChange: (details) => {
|
|
910
|
-
filterItems(details.inputValue);
|
|
911
|
-
onValueChange?.(details.inputValue);
|
|
912
|
-
},
|
|
913
|
-
positioning: { sameWidth: true },
|
|
914
|
-
children: [/* @__PURE__ */ jsx(Combobox$1.Control, { children: /* @__PURE__ */ jsx(Combobox$1.Input, { placeholder }) }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, { children: /* @__PURE__ */ jsxs(Combobox$1.Content, { children: [/* @__PURE__ */ jsx(Combobox$1.Empty, { children: "No matches" }), collection.items.map((item) => /* @__PURE__ */ jsx(Combobox$1.Item, {
|
|
915
|
-
item,
|
|
916
|
-
children: /* @__PURE__ */ jsx(Combobox$1.ItemText, { children: item })
|
|
917
|
-
}, item))] }) }) })]
|
|
918
|
-
});
|
|
919
|
-
}
|
|
920
|
-
injectComponentStyle("combobox");
|
|
921
|
-
//#endregion
|
|
922
|
-
//#region src/components/avatar/index.tsx
|
|
923
|
-
function AvatarRoot({ size, ...rest }) {
|
|
924
|
-
return /* @__PURE__ */ jsx(Avatar$1.Root, {
|
|
925
|
-
...rest,
|
|
926
|
-
"data-size": size
|
|
927
|
-
});
|
|
928
|
-
}
|
|
929
|
-
const Avatar = Object.assign({}, Avatar$1, { Root: AvatarRoot });
|
|
930
|
-
injectComponentStyle("avatar");
|
|
931
|
-
//#endregion
|
|
932
|
-
//#region src/components/avatar-group/index.tsx
|
|
933
|
-
function AvatarGroup({ children, ...rest }) {
|
|
934
|
-
return /* @__PURE__ */ jsx("div", {
|
|
935
|
-
...rest,
|
|
936
|
-
"data-scope": "avatar-group",
|
|
937
|
-
"data-part": "root",
|
|
938
|
-
children
|
|
939
|
-
});
|
|
940
|
-
}
|
|
941
|
-
injectComponentStyle("avatar-group");
|
|
942
|
-
//#endregion
|
|
943
|
-
//#region src/components/back-top/index.tsx
|
|
944
|
-
/** The single glyph a way-home control needs: one stroke pointing up. */
|
|
945
|
-
function chevronUp() {
|
|
946
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
947
|
-
width: 16,
|
|
948
|
-
height: 16,
|
|
949
|
-
viewBox: "0 0 24 24",
|
|
950
|
-
fill: "none",
|
|
951
|
-
stroke: "currentColor",
|
|
952
|
-
strokeWidth: 1.75,
|
|
953
|
-
strokeLinecap: "round",
|
|
954
|
-
strokeLinejoin: "round",
|
|
955
|
-
"aria-hidden": "true",
|
|
956
|
-
children: /* @__PURE__ */ jsx("path", { d: "m6 14 6-6 6 6" })
|
|
957
|
-
});
|
|
958
|
-
}
|
|
959
|
-
/**
|
|
960
|
-
* A way home: after the page has scrolled past `threshold`, a small
|
|
961
|
-
* floating control rises at the page's corner and returns the reader to
|
|
962
|
-
* the top. The scroll itself stays native — `window.scrollTo` defers to
|
|
963
|
-
* the stylesheet's `scroll-behavior: smooth`, which reduced motion turns
|
|
964
|
-
* back into an instant jump (a moored control asks the media query
|
|
965
|
-
* directly, since a scroller of its own has no stylesheet to defer to).
|
|
966
|
-
* The button stays mounted either way so the entrance is a transition,
|
|
967
|
-
* never a pop.
|
|
968
|
-
*
|
|
969
|
-
* The control itself is the shared `Button` (outline, square) — the
|
|
970
|
-
* paper, hairline and halo are its; this family owns only the floating
|
|
971
|
-
* and the entrance.
|
|
972
|
-
*/
|
|
973
|
-
function BackTop({ threshold = 400, label = "Back to top", scrollEl, ...rest }) {
|
|
974
|
-
const [visible, setVisible] = useState(false);
|
|
975
|
-
useEffect(() => {
|
|
976
|
-
if (typeof window === "undefined") return;
|
|
977
|
-
const el = scrollEl?.() ?? null;
|
|
978
|
-
const onScroll = () => setVisible((el ? el.scrollTop : window.scrollY) > threshold);
|
|
979
|
-
onScroll();
|
|
980
|
-
if (el) el.addEventListener("scroll", onScroll, { passive: true });
|
|
981
|
-
else window.addEventListener("scroll", onScroll, { passive: true });
|
|
982
|
-
return () => {
|
|
983
|
-
if (el) el.removeEventListener("scroll", onScroll);
|
|
984
|
-
else window.removeEventListener("scroll", onScroll);
|
|
985
|
-
};
|
|
986
|
-
}, [threshold, scrollEl]);
|
|
987
|
-
const toTop = () => {
|
|
988
|
-
const el = scrollEl?.();
|
|
989
|
-
if (!el) {
|
|
990
|
-
window.scrollTo({ top: 0 });
|
|
991
|
-
return;
|
|
992
|
-
}
|
|
993
|
-
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
994
|
-
el.scrollTo({
|
|
995
|
-
top: 0,
|
|
996
|
-
behavior: reduce ? "auto" : "smooth"
|
|
997
|
-
});
|
|
998
|
-
};
|
|
999
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1000
|
-
"data-scope": "back-top",
|
|
1001
|
-
"data-part": "root",
|
|
1002
|
-
"data-state": visible ? "shown" : "hidden",
|
|
1003
|
-
...scrollEl ? { "data-container": "" } : {},
|
|
1004
|
-
children: /* @__PURE__ */ jsx(Button, {
|
|
1005
|
-
...rest,
|
|
1006
|
-
variant: "outline",
|
|
1007
|
-
square: true,
|
|
1008
|
-
size: "lg",
|
|
1009
|
-
type: "button",
|
|
1010
|
-
"aria-label": label,
|
|
1011
|
-
"aria-hidden": visible ? void 0 : "true",
|
|
1012
|
-
tabIndex: visible ? 0 : -1,
|
|
1013
|
-
onClick: toTop,
|
|
1014
|
-
children: rest.children ?? chevronUp()
|
|
1015
|
-
})
|
|
1016
|
-
});
|
|
1017
|
-
}
|
|
1018
|
-
injectComponentStyle("back-top");
|
|
1019
|
-
//#endregion
|
|
1020
|
-
//#region src/components/badge/index.tsx
|
|
1021
|
-
function Badge({ tone = "ink", variant = "solid", ...rest }) {
|
|
1022
|
-
return /* @__PURE__ */ jsx("span", {
|
|
1023
|
-
...rest,
|
|
1024
|
-
"data-scope": "badge",
|
|
1025
|
-
"data-part": "root",
|
|
1026
|
-
"data-tone": tone,
|
|
1027
|
-
"data-variant": variant
|
|
1028
|
-
});
|
|
1029
|
-
}
|
|
1030
|
-
injectComponentStyle("badge");
|
|
1031
|
-
//#endregion
|
|
1032
|
-
//#region src/components/breadcrumb/index.tsx
|
|
1033
|
-
/** A trail of waymarks: Root wraps the nav, List the ordered trail, and
|
|
1034
|
-
* each Item carries a Link — or the Current page — parted by a quiet
|
|
1035
|
-
* Separator. Links take href and the rest through attributes. */
|
|
1036
|
-
function part$11(name, tag, extra = {}, fallback) {
|
|
1037
|
-
const Tag = tag;
|
|
1038
|
-
const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
|
|
1039
|
-
...extra,
|
|
1040
|
-
...rest,
|
|
1041
|
-
"data-scope": "breadcrumb",
|
|
1042
|
-
"data-part": name.toLowerCase(),
|
|
1043
|
-
children: children ?? fallback
|
|
1044
|
-
});
|
|
1045
|
-
Component.displayName = "Breadcrumb" + name;
|
|
1046
|
-
return Component;
|
|
1047
|
-
}
|
|
1048
|
-
const Root$12 = part$11("Root", "nav", { "aria-label": "Breadcrumb" });
|
|
1049
|
-
const List$1 = part$11("List", "ol");
|
|
1050
|
-
const Item$4 = part$11("Item", "li");
|
|
1051
|
-
const Link$1 = part$11("Link", "a");
|
|
1052
|
-
const Current = part$11("Current", "span", { "aria-current": "page" });
|
|
1053
|
-
const Separator$1 = part$11("Separator", "span", { "aria-hidden": "true" }, "/");
|
|
1054
|
-
const Breadcrumb = Object.assign(Root$12, {
|
|
1055
|
-
Root: Root$12,
|
|
1056
|
-
List: List$1,
|
|
1057
|
-
Item: Item$4,
|
|
1058
|
-
Link: Link$1,
|
|
1059
|
-
Current,
|
|
1060
|
-
Separator: Separator$1
|
|
1061
|
-
});
|
|
1062
|
-
injectComponentStyle("breadcrumb");
|
|
1063
|
-
//#endregion
|
|
1064
|
-
//#region src/components/button-group/index.tsx
|
|
1065
|
-
/**
|
|
1066
|
-
* Buttons fused into one control: the group owns only the joinery, so
|
|
1067
|
-
* members keep every variant they were given — a solid action can sit
|
|
1068
|
-
* beside an outline one and the seam still reads. Selection belongs to
|
|
1069
|
-
* the toggle group; this is layout alone.
|
|
1070
|
-
*/
|
|
1071
|
-
function Root$11({ orientation = "horizontal", size, radius, children, ...rest }) {
|
|
1072
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1073
|
-
...rest,
|
|
1074
|
-
role: "group",
|
|
1075
|
-
"data-scope": "button-group",
|
|
1076
|
-
"data-part": "root",
|
|
1077
|
-
"data-orientation": orientation,
|
|
1078
|
-
"data-size": size,
|
|
1079
|
-
"data-radius": radius,
|
|
1080
|
-
children
|
|
1081
|
-
});
|
|
1082
|
-
}
|
|
1083
|
-
const ButtonGroup = Object.assign(Root$11, { Root: Root$11 });
|
|
1084
|
-
injectComponentStyle("button-group");
|
|
1085
|
-
//#endregion
|
|
1086
|
-
//#region src/components/banner/index.tsx
|
|
1087
|
-
/** A page-level notice, spoken across the full measure: a wash of the
|
|
1088
|
-
* status pigment, one heavier hairline on the leading edge, and room
|
|
1089
|
-
* for actions and a quiet close. Ink is the neutral register; the four
|
|
1090
|
-
* semantic pigments are fixed. */
|
|
1091
|
-
const Root$10 = ({ status = "ink", children, ...rest }) => /* @__PURE__ */ jsx("div", {
|
|
1092
|
-
...rest,
|
|
1093
|
-
role: status === "ink" ? void 0 : "status",
|
|
1094
|
-
"data-scope": "banner",
|
|
1095
|
-
"data-part": "root",
|
|
1096
|
-
"data-status": status,
|
|
1097
|
-
children
|
|
1098
|
-
});
|
|
1099
|
-
function part$10(name, tag) {
|
|
1100
|
-
const Tag = tag;
|
|
1101
|
-
const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
|
|
1102
|
-
...rest,
|
|
1103
|
-
"data-scope": "banner",
|
|
1104
|
-
"data-part": name.toLowerCase(),
|
|
1105
|
-
children
|
|
1106
|
-
});
|
|
1107
|
-
Component.displayName = "Banner" + name;
|
|
1108
|
-
return Component;
|
|
1109
|
-
}
|
|
1110
|
-
const Icon$1 = part$10("Icon", "span");
|
|
1111
|
-
const Body$1 = part$10("Body", "div");
|
|
1112
|
-
const Title$3 = part$10("Title", "p");
|
|
1113
|
-
const Description$4 = part$10("Description", "p");
|
|
1114
|
-
const Actions$3 = part$10("Actions", "div");
|
|
1115
|
-
/** The quiet close: a plain square-cut button; dismissal stays the
|
|
1116
|
-
* consumer's state. */
|
|
1117
|
-
const Close = (rest) => /* @__PURE__ */ jsx("button", {
|
|
1118
|
-
...rest,
|
|
1119
|
-
type: rest.type ?? "button",
|
|
1120
|
-
"aria-label": rest["aria-label"] ?? "Dismiss",
|
|
1121
|
-
"data-scope": "banner",
|
|
1122
|
-
"data-part": "close",
|
|
1123
|
-
children: /* @__PURE__ */ jsx("svg", {
|
|
1124
|
-
viewBox: "0 0 16 16",
|
|
1125
|
-
fill: "none",
|
|
1126
|
-
"aria-hidden": true,
|
|
1127
|
-
children: /* @__PURE__ */ jsx("path", {
|
|
1128
|
-
d: "M4 4l8 8M12 4l-8 8",
|
|
1129
|
-
stroke: "currentColor",
|
|
1130
|
-
strokeWidth: 1.5,
|
|
1131
|
-
strokeLinecap: "round"
|
|
1132
|
-
})
|
|
1133
|
-
})
|
|
1134
|
-
});
|
|
1135
|
-
const Banner = Object.assign(Root$10, {
|
|
1136
|
-
Root: Root$10,
|
|
1137
|
-
Icon: Icon$1,
|
|
1138
|
-
Body: Body$1,
|
|
1139
|
-
Title: Title$3,
|
|
1140
|
-
Description: Description$4,
|
|
1141
|
-
Actions: Actions$3,
|
|
1142
|
-
Close
|
|
1143
|
-
});
|
|
1144
|
-
injectComponentStyle("banner");
|
|
1145
|
-
//#endregion
|
|
1146
|
-
//#region src/components/calendar/index.tsx
|
|
1147
|
-
function chevron$1(dir) {
|
|
1148
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
1149
|
-
width: 16,
|
|
1150
|
-
height: 16,
|
|
1151
|
-
viewBox: "0 0 24 24",
|
|
1152
|
-
fill: "none",
|
|
1153
|
-
stroke: "currentColor",
|
|
1154
|
-
strokeWidth: 1.75,
|
|
1155
|
-
"aria-hidden": true,
|
|
1156
|
-
style: dir === "left" ? { transform: "rotate(180deg)" } : void 0,
|
|
1157
|
-
children: /* @__PURE__ */ jsx("path", { d: "m9 5 7 7-7 7" })
|
|
1158
|
-
});
|
|
1159
|
-
}
|
|
1160
|
-
/** The date-picker's month grid, standing on the page without its
|
|
1161
|
-
* popup: always open, the trigger gone, the vessel a quiet card. The
|
|
1162
|
-
* title zooms out through month and year grids; the grids themselves
|
|
1163
|
-
* are the shared machinery — value, range selection, and focus ride
|
|
1164
|
-
* Ark's own contract. */
|
|
1165
|
-
function Calendar({ value, min, max, onValueChange, children, ...rest }) {
|
|
1166
|
-
const title = (dp) => {
|
|
1167
|
-
const d = dp.focusedValue;
|
|
1168
|
-
if (!d) return "";
|
|
1169
|
-
if (dp.view === "day") return dp.format(d, {
|
|
1170
|
-
month: "long",
|
|
1171
|
-
year: "numeric"
|
|
1172
|
-
});
|
|
1173
|
-
if (dp.view === "month") return dp.format(d, { year: "numeric" });
|
|
1174
|
-
const decade = Math.floor(d.year / 10) * 10;
|
|
1175
|
-
return `${decade} - ${decade + 9}`;
|
|
1176
|
-
};
|
|
1177
|
-
const header = /* @__PURE__ */ jsx("div", {
|
|
1178
|
-
"data-scope": "calendar",
|
|
1179
|
-
"data-part": "header",
|
|
1180
|
-
children: /* @__PURE__ */ jsxs(DatePicker$1.ViewControl, { children: [
|
|
1181
|
-
/* @__PURE__ */ jsx(DatePicker$1.PrevTrigger, { children: chevron$1("left") }),
|
|
1182
|
-
/* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => /* @__PURE__ */ jsx(DatePicker$1.ViewTrigger, { children: title(dp) }) }),
|
|
1183
|
-
/* @__PURE__ */ jsx(DatePicker$1.NextTrigger, { children: chevron$1("right") })
|
|
1184
|
-
] })
|
|
1185
|
-
});
|
|
1186
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
1187
|
-
...rest,
|
|
1188
|
-
"data-scope": "calendar",
|
|
1189
|
-
"data-part": "root",
|
|
1190
|
-
children: [/* @__PURE__ */ jsxs(DatePicker$1.Root, {
|
|
1191
|
-
open: true,
|
|
1192
|
-
closeOnSelect: true,
|
|
1193
|
-
inline: true,
|
|
1194
|
-
...value !== void 0 ? { value } : {},
|
|
1195
|
-
...min !== void 0 ? { min } : {},
|
|
1196
|
-
...max !== void 0 ? { max } : {},
|
|
1197
|
-
onValueChange: (details) => onValueChange?.(details.value),
|
|
1198
|
-
children: [
|
|
1199
|
-
/* @__PURE__ */ jsxs(DatePicker$1.View, {
|
|
1200
|
-
view: "day",
|
|
1201
|
-
children: [header, /* @__PURE__ */ jsxs(DatePicker$1.Table, { children: [/* @__PURE__ */ jsx(DatePicker$1.TableHead, { children: /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: /* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => dp.weekDays.map((day, id) => /* @__PURE__ */ jsx(DatePicker$1.TableHeader, {
|
|
1202
|
-
"aria-label": day.long,
|
|
1203
|
-
children: day.narrow
|
|
1204
|
-
}, id)) }) }) }), /* @__PURE__ */ jsx(DatePicker$1.TableBody, { children: /* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => dp.weeks.map((week, id) => /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ jsx(DatePicker$1.TableCell, {
|
|
1205
|
-
value: day,
|
|
1206
|
-
children: /* @__PURE__ */ jsx(DatePicker$1.TableCellTrigger, { children: day.day })
|
|
1207
|
-
}, id2)) }, id)) }) })] })]
|
|
1208
|
-
}),
|
|
1209
|
-
/* @__PURE__ */ jsxs(DatePicker$1.View, {
|
|
1210
|
-
view: "month",
|
|
1211
|
-
children: [header, /* @__PURE__ */ jsx(DatePicker$1.Table, {
|
|
1212
|
-
columns: 3,
|
|
1213
|
-
children: /* @__PURE__ */ jsx(DatePicker$1.TableBody, { children: /* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => dp.getMonthsGrid({ columns: 3 }).map((months, id) => /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ jsx(DatePicker$1.TableCell, {
|
|
1214
|
-
value: month.value,
|
|
1215
|
-
columns: 3,
|
|
1216
|
-
children: /* @__PURE__ */ jsx(DatePicker$1.TableCellTrigger, { children: month.label })
|
|
1217
|
-
}, id2)) }, id)) }) })
|
|
1218
|
-
})]
|
|
1219
|
-
}),
|
|
1220
|
-
/* @__PURE__ */ jsxs(DatePicker$1.View, {
|
|
1221
|
-
view: "year",
|
|
1222
|
-
children: [header, /* @__PURE__ */ jsx(DatePicker$1.Table, {
|
|
1223
|
-
columns: 3,
|
|
1224
|
-
children: /* @__PURE__ */ jsx(DatePicker$1.TableBody, { children: /* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => dp.getYearsGrid({ columns: 3 }).map((years, id) => /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ jsx(DatePicker$1.TableCell, {
|
|
1225
|
-
value: year.value,
|
|
1226
|
-
columns: 3,
|
|
1227
|
-
children: /* @__PURE__ */ jsx(DatePicker$1.TableCellTrigger, { children: year.label })
|
|
1228
|
-
}, id2)) }, id)) }) })
|
|
1229
|
-
})]
|
|
1230
|
-
})
|
|
1231
|
-
]
|
|
1232
|
-
}), children]
|
|
1233
|
-
});
|
|
1234
|
-
}
|
|
1235
|
-
injectComponentStyle("calendar");
|
|
1236
|
-
injectComponentStyle("date-picker");
|
|
1237
|
-
//#endregion
|
|
1238
|
-
//#region src/components/card/index.tsx
|
|
1239
|
-
/** A vessel: round, resting at the first elevation, one hairline for its
|
|
1240
|
-
* edge. Root, Header, Title, Description, Content, Footer — sections
|
|
1241
|
-
* carry their own whitespace, so any subset composes. */
|
|
1242
|
-
function part$9(name, tag) {
|
|
1243
|
-
const Tag = tag;
|
|
1244
|
-
const Component = ({ asChild, children, ...rest }) => {
|
|
1245
|
-
const partProps = {
|
|
1246
|
-
...rest,
|
|
1247
|
-
"data-scope": "card",
|
|
1248
|
-
"data-part": name.toLowerCase()
|
|
1249
|
-
};
|
|
1250
|
-
if (asChild) {
|
|
1251
|
-
const child = Children.only(children);
|
|
1252
|
-
return isValidElement(child) ? cloneElement(child, partProps) : null;
|
|
1253
|
-
}
|
|
1254
|
-
return /* @__PURE__ */ jsx(Tag, {
|
|
1255
|
-
...partProps,
|
|
1256
|
-
children
|
|
1257
|
-
});
|
|
1258
|
-
};
|
|
1259
|
-
Component.displayName = "Card" + name;
|
|
1260
|
-
return Component;
|
|
1261
|
-
}
|
|
1262
|
-
const Root$9 = part$9("Root", "section");
|
|
1263
|
-
const Header$1 = part$9("Header", "header");
|
|
1264
|
-
const Title$2 = part$9("Title", "h3");
|
|
1265
|
-
const Description$3 = part$9("Description", "p");
|
|
1266
|
-
const Content$3 = part$9("Content", "div");
|
|
1267
|
-
const Footer$1 = part$9("Footer", "footer");
|
|
1268
|
-
const Card = Object.assign(Root$9, {
|
|
1269
|
-
Root: Root$9,
|
|
1270
|
-
Header: Header$1,
|
|
1271
|
-
Title: Title$2,
|
|
1272
|
-
Description: Description$3,
|
|
1273
|
-
Content: Content$3,
|
|
1274
|
-
Footer: Footer$1
|
|
1275
|
-
});
|
|
1276
|
-
injectComponentStyle("card");
|
|
1277
|
-
//#endregion
|
|
1278
|
-
//#region src/components/input/index.tsx
|
|
1279
|
-
function Input({ value, size = "md", invalid = false, onValueChange, ...rest }) {
|
|
1280
|
-
const field = useFieldContext();
|
|
1281
|
-
const fieldProps = field?.getInputProps() ?? {};
|
|
1282
|
-
return /* @__PURE__ */ jsx("input", {
|
|
1283
|
-
...fieldProps,
|
|
1284
|
-
...rest,
|
|
1285
|
-
...value !== void 0 ? { value } : {},
|
|
1286
|
-
"data-scope": "input",
|
|
1287
|
-
"data-part": "root",
|
|
1288
|
-
"data-size": size,
|
|
1289
|
-
"data-invalid": invalid || field?.invalid ? "" : void 0,
|
|
1290
|
-
onChange: (event) => onValueChange?.(event.target.value)
|
|
1291
|
-
});
|
|
1292
|
-
}
|
|
1293
|
-
injectComponentStyle("input");
|
|
1294
|
-
//#endregion
|
|
1295
|
-
//#region src/components/cascade-select/index.tsx
|
|
1296
|
-
const chevronDown$2 = /* @__PURE__ */ jsx("svg", {
|
|
1297
|
-
viewBox: "0 0 24 24",
|
|
1298
|
-
fill: "none",
|
|
1299
|
-
stroke: "currentColor",
|
|
1300
|
-
strokeWidth: 2,
|
|
1301
|
-
strokeLinecap: "round",
|
|
1302
|
-
strokeLinejoin: "round",
|
|
1303
|
-
"aria-hidden": "true",
|
|
1304
|
-
children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
|
|
1305
|
-
});
|
|
1306
|
-
const chevronRight = /* @__PURE__ */ jsx("svg", {
|
|
1307
|
-
viewBox: "0 0 24 24",
|
|
1308
|
-
fill: "none",
|
|
1309
|
-
stroke: "currentColor",
|
|
1310
|
-
strokeWidth: 2,
|
|
1311
|
-
strokeLinecap: "round",
|
|
1312
|
-
strokeLinejoin: "round",
|
|
1313
|
-
"aria-hidden": "true",
|
|
1314
|
-
children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
|
|
1315
|
-
});
|
|
1316
|
-
const checkGlyph$2 = /* @__PURE__ */ jsx("svg", {
|
|
1317
|
-
viewBox: "0 0 24 24",
|
|
1318
|
-
fill: "none",
|
|
1319
|
-
stroke: "currentColor",
|
|
1320
|
-
strokeWidth: 3,
|
|
1321
|
-
strokeLinecap: "round",
|
|
1322
|
-
strokeLinejoin: "round",
|
|
1323
|
-
"aria-hidden": "true",
|
|
1324
|
-
children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
|
|
1325
|
-
});
|
|
1326
|
-
function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigger, filterable = false, multiple = false, disabled = false, onValueChange, ...rest }) {
|
|
1327
|
-
const id = useId();
|
|
1328
|
-
const locale = useLocaleContext();
|
|
1329
|
-
const env = useEnvironmentContext();
|
|
1330
|
-
const collection = cascade.collection({
|
|
1331
|
-
nodeToValue: (node) => node.value,
|
|
1332
|
-
nodeToString: (node) => node.label,
|
|
1333
|
-
nodeToChildren: (node) => node.children ?? [],
|
|
1334
|
-
rootNode: {
|
|
1335
|
-
value: "ROOT",
|
|
1336
|
-
label: "",
|
|
1337
|
-
children: data
|
|
1338
|
-
}
|
|
1339
|
-
});
|
|
1340
|
-
const service = useMachine(cascade.machine, {
|
|
1341
|
-
id,
|
|
1342
|
-
collection,
|
|
1343
|
-
dir: locale.dir,
|
|
1344
|
-
getRootNode: env.getRootNode.bind(env),
|
|
1345
|
-
disabled: disabled || void 0,
|
|
1346
|
-
multiple: multiple || void 0,
|
|
1347
|
-
...value !== void 0 ? { value } : {},
|
|
1348
|
-
...highlightTrigger != null ? { highlightTrigger } : {},
|
|
1349
|
-
onValueChange(details) {
|
|
1350
|
-
onValueChange?.(details.value);
|
|
1351
|
-
}
|
|
1352
|
-
});
|
|
1353
|
-
const api = cascade.connect(service, normalizeProps);
|
|
1354
|
-
const [query, setQuery] = useState("");
|
|
1355
|
-
const filterFns = useFilter({ sensitivity: "base" });
|
|
1356
|
-
const filtering = filterable && query.trim().length > 0;
|
|
1357
|
-
/** The corridor's answer to a query: every leaf whose route matches —
|
|
1358
|
-
* the query may land on any hop, and the whole route still shows. */
|
|
1359
|
-
const matchPaths = useMemo(() => {
|
|
1360
|
-
if (!filtering) return [];
|
|
1361
|
-
const q = query.trim();
|
|
1362
|
-
const hits = [];
|
|
1363
|
-
const walk = (nodes, path, labels, matched) => {
|
|
1364
|
-
for (const node of nodes ?? []) {
|
|
1365
|
-
const hit = matched || filterFns.contains(node.label, q);
|
|
1366
|
-
const nextPath = [...path, node.value];
|
|
1367
|
-
const nextLabels = [...labels, node.label];
|
|
1368
|
-
if (node.children?.length) walk(node.children, nextPath, nextLabels, hit);
|
|
1369
|
-
else if (hit) hits.push({
|
|
1370
|
-
path: nextPath,
|
|
1371
|
-
labels: nextLabels
|
|
1372
|
-
});
|
|
1373
|
-
}
|
|
1374
|
-
};
|
|
1375
|
-
walk(data, [], [], false);
|
|
1376
|
-
return hits;
|
|
1377
|
-
}, [
|
|
1378
|
-
filtering,
|
|
1379
|
-
query,
|
|
1380
|
-
filterFns,
|
|
1381
|
-
data
|
|
1382
|
-
]);
|
|
1383
|
-
const isSelected = (path) => (value ?? []).some((p) => p.join("/") === path.join("/"));
|
|
1384
|
-
function pickMatch(path) {
|
|
1385
|
-
if (multiple) {
|
|
1386
|
-
const current = value ?? [];
|
|
1387
|
-
const key = path.join("/");
|
|
1388
|
-
const next = current.some((p) => p.join("/") === key) ? current.filter((p) => p.join("/") !== key) : [...current, path];
|
|
1389
|
-
api.setValue(next);
|
|
1390
|
-
} else {
|
|
1391
|
-
api.selectValue(path);
|
|
1392
|
-
api.setOpen(false);
|
|
1393
|
-
}
|
|
1394
|
-
}
|
|
1395
|
-
/** The machine's `valueAsString` only updates through its select
|
|
1396
|
-
* event, so an externally-set `value` would render the placeholder
|
|
1397
|
-
* forever — resolve the labels from the data instead. */
|
|
1398
|
-
function labelsFor(path) {
|
|
1399
|
-
const out = [];
|
|
1400
|
-
let nodes = data;
|
|
1401
|
-
for (const entry of path) {
|
|
1402
|
-
const node = nodes?.find((n) => n.value === entry);
|
|
1403
|
-
if (!node) return null;
|
|
1404
|
-
out.push(node.label);
|
|
1405
|
-
nodes = node.children;
|
|
1406
|
-
}
|
|
1407
|
-
return out;
|
|
1408
|
-
}
|
|
1409
|
-
const display = (value ?? []).map((path) => labelsFor(path)?.join(" / ")).filter((label) => label != null).join(", ");
|
|
1410
|
-
/** One column per walk of the highlighted path — the list binds to
|
|
1411
|
-
* the node, the next column hangs off its highlighted child. */
|
|
1412
|
-
function renderColumn(node, indexPath, valuePath) {
|
|
1413
|
-
const nodeProps = {
|
|
1414
|
-
item: node,
|
|
1415
|
-
indexPath,
|
|
1416
|
-
value: valuePath
|
|
1417
|
-
};
|
|
1418
|
-
const nodeState = api.getItemState(nodeProps);
|
|
1419
|
-
const children = collection.getNodeChildren(node);
|
|
1420
|
-
const list = /* @__PURE__ */ jsx("ul", {
|
|
1421
|
-
...api.getListProps(nodeProps),
|
|
1422
|
-
children: children.map((item, index) => {
|
|
1423
|
-
const itemValue = collection.getNodeValue(item);
|
|
1424
|
-
const itemProps = {
|
|
1425
|
-
item,
|
|
1426
|
-
indexPath: [...indexPath, index],
|
|
1427
|
-
value: [...valuePath, itemValue]
|
|
1428
|
-
};
|
|
1429
|
-
const itemState = api.getItemState(itemProps);
|
|
1430
|
-
return /* @__PURE__ */ jsxs("li", {
|
|
1431
|
-
...api.getItemProps(itemProps),
|
|
1432
|
-
children: [
|
|
1433
|
-
/* @__PURE__ */ jsx("span", {
|
|
1434
|
-
...api.getItemTextProps(itemProps),
|
|
1435
|
-
children: item.label
|
|
1436
|
-
}),
|
|
1437
|
-
itemState.hasChildren ? /* @__PURE__ */ jsx("span", {
|
|
1438
|
-
"data-part": "branch-indicator",
|
|
1439
|
-
"aria-hidden": "true",
|
|
1440
|
-
children: chevronRight
|
|
1441
|
-
}) : null,
|
|
1442
|
-
/* @__PURE__ */ jsx("span", {
|
|
1443
|
-
...api.getItemIndicatorProps(itemProps),
|
|
1444
|
-
children: checkGlyph$2
|
|
1445
|
-
})
|
|
1446
|
-
]
|
|
1447
|
-
}, itemValue);
|
|
1448
|
-
})
|
|
1449
|
-
});
|
|
1450
|
-
const next = nodeState.highlightedChild;
|
|
1451
|
-
return [list, next != null && collection.isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState.highlightedIndex], [...valuePath, collection.getNodeValue(next)]) : null];
|
|
1452
|
-
}
|
|
1453
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
1454
|
-
...rest,
|
|
1455
|
-
...api.getRootProps(),
|
|
1456
|
-
children: [/* @__PURE__ */ jsx("div", {
|
|
1457
|
-
...api.getControlProps(),
|
|
1458
|
-
children: /* @__PURE__ */ jsxs("button", {
|
|
1459
|
-
...api.getTriggerProps(),
|
|
1460
|
-
onClick: (event) => {
|
|
1461
|
-
api.getTriggerProps().onClick?.(event);
|
|
1462
|
-
setQuery("");
|
|
1463
|
-
},
|
|
1464
|
-
disabled: disabled || void 0,
|
|
1465
|
-
children: [/* @__PURE__ */ jsx("span", {
|
|
1466
|
-
...api.getValueTextProps(),
|
|
1467
|
-
children: display || placeholder
|
|
1468
|
-
}), /* @__PURE__ */ jsx("span", {
|
|
1469
|
-
...api.getIndicatorProps(),
|
|
1470
|
-
children: chevronDown$2
|
|
1471
|
-
})]
|
|
1472
|
-
})
|
|
1473
|
-
}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {
|
|
1474
|
-
...api.getPositionerProps(),
|
|
1475
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
1476
|
-
...api.getContentProps(),
|
|
1477
|
-
children: [filterable ? /* @__PURE__ */ jsx("div", {
|
|
1478
|
-
"data-part": "search",
|
|
1479
|
-
children: /* @__PURE__ */ jsx(Input, {
|
|
1480
|
-
size: "sm",
|
|
1481
|
-
value: query,
|
|
1482
|
-
onValueChange: setQuery,
|
|
1483
|
-
placeholder: "Filter…",
|
|
1484
|
-
"aria-label": "Filter options"
|
|
1485
|
-
})
|
|
1486
|
-
}) : null, filtering ? matchPaths.length === 0 ? /* @__PURE__ */ jsx("p", {
|
|
1487
|
-
"data-part": "empty",
|
|
1488
|
-
children: "Nothing matches"
|
|
1489
|
-
}) : matchPaths.map((hit) => /* @__PURE__ */ jsx("button", {
|
|
1490
|
-
type: "button",
|
|
1491
|
-
"data-part": "match",
|
|
1492
|
-
"data-selected": isSelected(hit.path) || void 0,
|
|
1493
|
-
onClick: () => pickMatch(hit.path),
|
|
1494
|
-
children: hit.labels.join(" / ")
|
|
1495
|
-
}, hit.path.join("/"))) : renderColumn(collection.rootNode, [], [])]
|
|
1496
|
-
})
|
|
1497
|
-
}) })]
|
|
1498
|
-
});
|
|
1499
|
-
}
|
|
1500
|
-
injectComponentStyle("cascade-select");
|
|
1501
|
-
//#endregion
|
|
1502
|
-
//#region src/components/carousel/index.tsx
|
|
1503
|
-
/** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
|
|
1504
|
-
* hairline-clipped lane, the triggers are quiet outline controls, and the
|
|
1505
|
-
* current indicator alone carries the ink. The API is Ark's own — Root,
|
|
1506
|
-
* Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup,
|
|
1507
|
-
* Indicator, AutoplayTrigger, ProgressText. */
|
|
1508
|
-
const Carousel = Carousel$1;
|
|
1509
|
-
injectComponentStyle("carousel");
|
|
1510
|
-
//#endregion
|
|
1511
|
-
//#region src/components/checkbox/index.tsx
|
|
1512
|
-
/** Ark's Checkbox, dressed in the paper-and-ink system: a square-cut seal
|
|
1513
|
-
* that fills flat with primary ink when ticked, the mark springing into
|
|
1514
|
-
* place. The API is Ark's own — Root, Label, Control, Indicator,
|
|
1515
|
-
* HiddenInput. */
|
|
1516
|
-
const Checkbox = Checkbox$1;
|
|
1517
|
-
injectComponentStyle("checkbox");
|
|
1518
|
-
//#endregion
|
|
1519
|
-
//#region src/components/checkbox-group/index.tsx
|
|
1520
|
-
const checkGlyph$1 = /* @__PURE__ */ jsx("svg", {
|
|
1521
|
-
viewBox: "0 0 24 24",
|
|
1522
|
-
fill: "none",
|
|
1523
|
-
stroke: "currentColor",
|
|
1524
|
-
strokeWidth: 3,
|
|
1525
|
-
strokeLinecap: "round",
|
|
1526
|
-
strokeLinejoin: "round",
|
|
1527
|
-
"aria-hidden": "true",
|
|
1528
|
-
children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
|
|
1529
|
-
});
|
|
1530
|
-
/**
|
|
1531
|
-
* One question, many answers: a labelled stack (or row) of the seal-cut
|
|
1532
|
-
* checkboxes bound to a single array. Toggling a box adds or removes its
|
|
1533
|
-
* value; the group itself is semantics (`role="group"`), the boxes stay
|
|
1534
|
-
* the machine-driven originals. Inside a `Field.Root` the group picks up
|
|
1535
|
-
* the field context, so the invalid and disabled states a Form routes to
|
|
1536
|
-
* its name dress every box at once.
|
|
1537
|
-
*/
|
|
1538
|
-
function CheckboxGroup({ value = [], options, layout = "vertical", invalid = false, disabled = false, onValueChange, ...rest }) {
|
|
1539
|
-
const field = useFieldContext();
|
|
1540
|
-
const selected = new Set(value);
|
|
1541
|
-
const isInvalid = invalid || field?.invalid === true;
|
|
1542
|
-
const isDisabled = disabled || field?.disabled === true;
|
|
1543
|
-
function toggle(option) {
|
|
1544
|
-
const next = new Set(selected);
|
|
1545
|
-
if (next.has(option)) next.delete(option);
|
|
1546
|
-
else next.add(option);
|
|
1547
|
-
onValueChange?.([...next]);
|
|
1548
|
-
}
|
|
1549
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1550
|
-
...rest,
|
|
1551
|
-
role: "group",
|
|
1552
|
-
"data-scope": "checkbox-group",
|
|
1553
|
-
"data-part": "root",
|
|
1554
|
-
"data-layout": layout,
|
|
1555
|
-
"data-invalid": isInvalid ? "" : void 0,
|
|
1556
|
-
children: options.map((option) => /* @__PURE__ */ jsxs(Checkbox$1.Root, {
|
|
1557
|
-
checked: selected.has(option.value),
|
|
1558
|
-
invalid: isInvalid,
|
|
1559
|
-
disabled: isDisabled || option.disabled === true,
|
|
1560
|
-
onCheckedChange: () => toggle(option.value),
|
|
1561
|
-
children: [
|
|
1562
|
-
/* @__PURE__ */ jsx(Checkbox$1.Control, { children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { children: checkGlyph$1 }) }),
|
|
1563
|
-
/* @__PURE__ */ jsx(Checkbox$1.Label, { children: option.label }),
|
|
1564
|
-
/* @__PURE__ */ jsx(Checkbox$1.HiddenInput, {})
|
|
1565
|
-
]
|
|
1566
|
-
}, option.value))
|
|
1567
|
-
});
|
|
1568
|
-
}
|
|
1569
|
-
injectComponentStyle("checkbox-group");
|
|
1570
|
-
injectComponentStyle("checkbox");
|
|
1571
|
-
//#endregion
|
|
1572
|
-
//#region src/components/chip/index.tsx
|
|
1573
|
-
function Chip({ value, max, tone = "ink", variant = "solid", ...rest }) {
|
|
1574
|
-
const text = max != null && value > max ? `${max}+` : String(value);
|
|
1575
|
-
return /* @__PURE__ */ jsx("span", {
|
|
1576
|
-
...rest,
|
|
1577
|
-
"data-scope": "chip",
|
|
1578
|
-
"data-part": "root",
|
|
1579
|
-
"data-tone": tone,
|
|
1580
|
-
"data-variant": variant,
|
|
1581
|
-
children: text
|
|
1582
|
-
});
|
|
1583
|
-
}
|
|
1584
|
-
injectComponentStyle("chip");
|
|
1585
|
-
//#endregion
|
|
1586
|
-
//#region src/components/clipboard/index.tsx
|
|
1587
|
-
/** Ark's Clipboard, dressed in the paper-and-ink system: a hairline value
|
|
1588
|
-
* field beside an icon-sized copy trigger whose ink turns bamboo while the
|
|
1589
|
-
* copy is confirmed. The API is Ark's own — Root, Label, Control, Input,
|
|
1590
|
-
* Trigger, Indicator, Context, HiddenInput. */
|
|
1591
|
-
const Clipboard = Clipboard$1;
|
|
1592
|
-
injectComponentStyle("clipboard");
|
|
1593
|
-
//#endregion
|
|
1594
|
-
//#region src/components/color-picker/index.tsx
|
|
1595
|
-
/** Ark's ColorPicker, dressed in the paper-and-ink system: a seal-sized swatch
|
|
1596
|
-
* on the paper, opening into an area and channel sliders where pigment is
|
|
1597
|
-
* picked. The API is Ark's own — Root, Label, Control, Trigger, Positioner,
|
|
1598
|
-
* Content, Area, AreaThumb, AreaBackground, ValueText, ValueSwatch,
|
|
1599
|
-
* ChannelSlider, ChannelSliderLabel, ChannelSliderTrack, ChannelSliderThumb,
|
|
1600
|
-
* ChannelSliderValueText, ChannelInput, TransparencyGrid, SwatchGroup,
|
|
1601
|
-
* SwatchTrigger, SwatchIndicator, Swatch, EyeDropperTrigger, FormatTrigger,
|
|
1602
|
-
* FormatSelect, HiddenInput, Context. */
|
|
1603
|
-
const ColorPicker = ColorPicker$1;
|
|
1604
|
-
injectComponentStyle("color-picker");
|
|
1605
|
-
//#endregion
|
|
1606
|
-
//#region src/components/combobox/index.tsx
|
|
1607
|
-
/** Ark's Combobox, dressed in the paper-and-ink system: the field carries
|
|
1608
|
-
* the control recipe and its matches dissolve open as a paper vessel, the
|
|
1609
|
-
* checked row taking the flat ink fill. The API is Ark's own — Root, Label,
|
|
1610
|
-
* Control, Input, Trigger, ClearTrigger, Positioner, Content, List, Empty,
|
|
1611
|
-
* Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
|
|
1612
|
-
const Combobox = Combobox$1;
|
|
1613
|
-
injectComponentStyle("combobox");
|
|
1614
|
-
//#endregion
|
|
1615
|
-
//#region src/components/command/index.tsx
|
|
1616
|
-
function Command({ items = [], placeholder, open, autoFilter = true, inputValue, emptyText = "No matching commands", onSelect, onOpenChange, onInputValueChange }) {
|
|
1617
|
-
const [internalOpen, setInternalOpen] = useState(false);
|
|
1618
|
-
const [listOpen, setListOpen] = useState(true);
|
|
1619
|
-
const [fieldText, setFieldText] = useState("");
|
|
1620
|
-
const { collection, set, filter } = useListCollection$1({
|
|
1621
|
-
initialItems: items.map((entry) => entry.value),
|
|
1622
|
-
filter: (value, input) => {
|
|
1623
|
-
const entry = items.find((candidate) => candidate.value === value);
|
|
1624
|
-
if (!entry) return false;
|
|
1625
|
-
const query = input.toLowerCase();
|
|
1626
|
-
return entry.label.toLowerCase().includes(query) || value.toLowerCase().includes(query);
|
|
1627
|
-
}
|
|
1628
|
-
});
|
|
1629
|
-
useEffect(() => {
|
|
1630
|
-
set(items.map((entry) => entry.value));
|
|
1631
|
-
if (autoFilter) filter(fieldText);
|
|
1632
|
-
}, [items]);
|
|
1633
|
-
const currentOpen = open ?? internalOpen;
|
|
1634
|
-
useEffect(() => {
|
|
1635
|
-
if (currentOpen) setListOpen(true);
|
|
1636
|
-
}, [currentOpen]);
|
|
1637
|
-
const setOpen = (value) => {
|
|
1638
|
-
if (open === void 0) setInternalOpen(value);
|
|
1639
|
-
onOpenChange?.(value);
|
|
1640
|
-
};
|
|
1641
|
-
const available = new Set(collection.items);
|
|
1642
|
-
const groups = /* @__PURE__ */ new Map();
|
|
1643
|
-
for (const entry of items) {
|
|
1644
|
-
if (!available.has(entry.value)) continue;
|
|
1645
|
-
const key = entry.group ?? "";
|
|
1646
|
-
if (!groups.has(key)) groups.set(key, []);
|
|
1647
|
-
groups.get(key).push(entry);
|
|
1648
|
-
}
|
|
1649
|
-
const row = (entry) => /* @__PURE__ */ jsx(Combobox$1.Item, {
|
|
1650
|
-
item: entry.value,
|
|
1651
|
-
asChild: true,
|
|
1652
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
1653
|
-
"data-scope": "command",
|
|
1654
|
-
"data-part": "item",
|
|
1655
|
-
children: [/* @__PURE__ */ jsx(Combobox$1.ItemText, {
|
|
1656
|
-
asChild: true,
|
|
1657
|
-
children: /* @__PURE__ */ jsx("span", {
|
|
1658
|
-
"data-scope": "command",
|
|
1659
|
-
"data-part": "item-label",
|
|
1660
|
-
children: entry.label
|
|
1661
|
-
})
|
|
1662
|
-
}), entry.hint ? /* @__PURE__ */ jsx("span", {
|
|
1663
|
-
"data-scope": "command",
|
|
1664
|
-
"data-part": "item-hint",
|
|
1665
|
-
children: entry.hint
|
|
1666
|
-
}) : void 0]
|
|
1667
|
-
})
|
|
1668
|
-
}, entry.value);
|
|
1669
|
-
return /* @__PURE__ */ jsx(Dialog$1.Root, {
|
|
1670
|
-
open: currentOpen,
|
|
1671
|
-
onOpenChange: (details) => setOpen(details.open),
|
|
1672
|
-
children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, {}), /* @__PURE__ */ jsx(Dialog$1.Positioner, {
|
|
1673
|
-
asChild: true,
|
|
1674
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
1675
|
-
"data-scope": "command",
|
|
1676
|
-
"data-part": "positioner",
|
|
1677
|
-
children: /* @__PURE__ */ jsx(Dialog$1.Content, {
|
|
1678
|
-
asChild: true,
|
|
1679
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
1680
|
-
"data-scope": "command",
|
|
1681
|
-
"data-part": "content",
|
|
1682
|
-
children: /* @__PURE__ */ jsxs(Combobox$1.Root, {
|
|
1683
|
-
collection,
|
|
1684
|
-
inputValue,
|
|
1685
|
-
open: listOpen,
|
|
1686
|
-
onOpenChange: (details) => setListOpen(details.open),
|
|
1687
|
-
inputBehavior: "autohighlight",
|
|
1688
|
-
loopFocus: true,
|
|
1689
|
-
onInputValueChange: (details) => {
|
|
1690
|
-
setFieldText(details.inputValue);
|
|
1691
|
-
if (autoFilter) filter(details.inputValue);
|
|
1692
|
-
onInputValueChange?.(details.inputValue);
|
|
1693
|
-
},
|
|
1694
|
-
onValueChange: (details) => {
|
|
1695
|
-
const [first] = details.value;
|
|
1696
|
-
if (first == null) return;
|
|
1697
|
-
onSelect?.(first);
|
|
1698
|
-
setOpen(false);
|
|
1699
|
-
},
|
|
1700
|
-
children: [/* @__PURE__ */ jsx(Combobox$1.Input, {
|
|
1701
|
-
asChild: true,
|
|
1702
|
-
children: /* @__PURE__ */ jsx("input", {
|
|
1703
|
-
type: "text",
|
|
1704
|
-
placeholder,
|
|
1705
|
-
"data-scope": "command",
|
|
1706
|
-
"data-part": "input"
|
|
1707
|
-
})
|
|
1708
|
-
}), /* @__PURE__ */ jsx(Combobox$1.Content, {
|
|
1709
|
-
asChild: true,
|
|
1710
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
1711
|
-
"data-scope": "command",
|
|
1712
|
-
"data-part": "list",
|
|
1713
|
-
children: [Array.from(groups, ([group, entries]) => group === "" ? entries.map(row) : /* @__PURE__ */ jsx(Combobox$1.ItemGroup, {
|
|
1714
|
-
asChild: true,
|
|
1715
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
1716
|
-
"data-scope": "command",
|
|
1717
|
-
"data-part": "group",
|
|
1718
|
-
children: [/* @__PURE__ */ jsx(Combobox$1.ItemGroupLabel, {
|
|
1719
|
-
asChild: true,
|
|
1720
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
1721
|
-
"data-scope": "command",
|
|
1722
|
-
"data-part": "group-label",
|
|
1723
|
-
children: group
|
|
1724
|
-
})
|
|
1725
|
-
}), entries.map(row)]
|
|
1726
|
-
})
|
|
1727
|
-
}, group)), groups.size === 0 ? /* @__PURE__ */ jsx("div", {
|
|
1728
|
-
"data-scope": "command",
|
|
1729
|
-
"data-part": "empty",
|
|
1730
|
-
children: emptyText
|
|
1731
|
-
}) : null]
|
|
1732
|
-
})
|
|
1733
|
-
})]
|
|
1734
|
-
})
|
|
1735
|
-
})
|
|
1736
|
-
})
|
|
1737
|
-
})
|
|
1738
|
-
})] })
|
|
1739
|
-
});
|
|
1740
|
-
}
|
|
1741
|
-
injectComponentStyle("command");
|
|
1742
|
-
injectComponentStyle("dialog");
|
|
1743
|
-
//#endregion
|
|
1744
|
-
//#region src/components/comment/index.tsx
|
|
1745
|
-
function Comment({ author, datetime, avatar, actions, children, ...rest }) {
|
|
1746
|
-
return /* @__PURE__ */ jsxs("article", {
|
|
1747
|
-
...rest,
|
|
1748
|
-
"data-scope": "comment",
|
|
1749
|
-
"data-part": "root",
|
|
1750
|
-
children: [avatar ? /* @__PURE__ */ jsx("div", {
|
|
1751
|
-
"data-scope": "comment",
|
|
1752
|
-
"data-part": "avatar",
|
|
1753
|
-
children: avatar
|
|
1754
|
-
}) : null, /* @__PURE__ */ jsxs("div", {
|
|
1755
|
-
"data-scope": "comment",
|
|
1756
|
-
"data-part": "body",
|
|
1757
|
-
children: [
|
|
1758
|
-
author || datetime ? /* @__PURE__ */ jsxs("header", {
|
|
1759
|
-
"data-scope": "comment",
|
|
1760
|
-
"data-part": "header",
|
|
1761
|
-
children: [author ? /* @__PURE__ */ jsx("span", {
|
|
1762
|
-
"data-scope": "comment",
|
|
1763
|
-
"data-part": "author",
|
|
1764
|
-
children: author
|
|
1765
|
-
}) : null, datetime ? /* @__PURE__ */ jsx("time", {
|
|
1766
|
-
"data-scope": "comment",
|
|
1767
|
-
"data-part": "datetime",
|
|
1768
|
-
dateTime: datetime,
|
|
1769
|
-
children: datetime
|
|
1770
|
-
}) : null]
|
|
1771
|
-
}) : null,
|
|
1772
|
-
/* @__PURE__ */ jsx("div", {
|
|
1773
|
-
"data-scope": "comment",
|
|
1774
|
-
"data-part": "content",
|
|
1775
|
-
children
|
|
1776
|
-
}),
|
|
1777
|
-
actions ? /* @__PURE__ */ jsx("div", {
|
|
1778
|
-
"data-scope": "comment",
|
|
1779
|
-
"data-part": "actions",
|
|
1780
|
-
children: actions
|
|
1781
|
-
}) : null
|
|
1782
|
-
]
|
|
1783
|
-
})]
|
|
1784
|
-
});
|
|
1785
|
-
}
|
|
1786
|
-
injectComponentStyle("comment");
|
|
1787
|
-
//#endregion
|
|
1788
|
-
//#region src/components/config-provider/index.tsx
|
|
1789
|
-
const ConfigContextImpl = createContext({});
|
|
1790
|
-
/** The nearest provider's snapshot, or an empty one when no provider
|
|
1791
|
-
* wraps the caller — the hook the date and format families will consume
|
|
1792
|
-
* to localize their output. */
|
|
1793
|
-
function useConfig() {
|
|
1794
|
-
return useContext(ConfigContextImpl);
|
|
1795
|
-
}
|
|
1796
|
-
/**
|
|
1797
|
-
* The declarative host for global configuration: one element that both
|
|
1798
|
-
* carries the token layer's attributes — `[data-density]` and
|
|
1799
|
-
* `[data-accent]` fire on any element — and provides the same values to
|
|
1800
|
-
* descendants through `useConfig`, so interactive behavior (formatting,
|
|
1801
|
-
* messages) and visual theming stay one decision.
|
|
1802
|
-
*/
|
|
1803
|
-
function ConfigProvider({ density, accent, dir, locale, children, ...rest }) {
|
|
1804
|
-
return /* @__PURE__ */ jsx(ConfigContextImpl.Provider, {
|
|
1805
|
-
value: {
|
|
1806
|
-
density,
|
|
1807
|
-
accent,
|
|
1808
|
-
dir,
|
|
1809
|
-
locale
|
|
1810
|
-
},
|
|
1811
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
1812
|
-
...rest,
|
|
1813
|
-
"data-scope": "config-provider",
|
|
1814
|
-
"data-part": "root",
|
|
1815
|
-
...density != null ? { "data-density": density } : {},
|
|
1816
|
-
...accent != null ? { "data-accent": accent } : {},
|
|
1817
|
-
...dir != null ? { dir } : {},
|
|
1818
|
-
...locale != null ? { lang: locale } : {},
|
|
1819
|
-
children
|
|
1820
|
-
})
|
|
1821
|
-
});
|
|
1822
|
-
}
|
|
1823
|
-
//#endregion
|
|
1824
|
-
//#region src/components/container/index.tsx
|
|
1825
|
-
function Container({ size = "readable", padding = true, ...rest }) {
|
|
1826
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1827
|
-
...rest,
|
|
1828
|
-
"data-scope": "container",
|
|
1829
|
-
"data-part": "root",
|
|
1830
|
-
"data-size": size,
|
|
1831
|
-
"data-padding": padding ? "" : void 0
|
|
1832
|
-
});
|
|
1833
|
-
}
|
|
1834
|
-
injectComponentStyle("container");
|
|
1835
|
-
//#endregion
|
|
1836
|
-
//#region src/components/date-input/index.tsx
|
|
1837
|
-
/** Ark's DateInput, dressed in the paper-and-ink system: a segmented
|
|
1838
|
-
* field where the focused segment takes the flat ink fill. The API is
|
|
1839
|
-
* Ark's own — Root, Label, Control, SegmentGroup, Segment, SegmentContext,
|
|
1840
|
-
* HiddenInput. */
|
|
1841
|
-
const DateInput = DateInput$1;
|
|
1842
|
-
injectComponentStyle("date-input");
|
|
1843
|
-
//#endregion
|
|
1844
|
-
//#region src/components/date-picker/index.tsx
|
|
1845
|
-
/** Ark's DatePicker, dressed in the paper-and-ink system: the popup
|
|
1846
|
-
* dissolves in on elevation, selected days take the flat ink fill, and
|
|
1847
|
-
* range middles run subtle with cut corners. The API is Ark's own —
|
|
1848
|
-
* Root, Label, Control, Input, Trigger, ClearTrigger, Positioner,
|
|
1849
|
-
* Content, View, ViewControl, ViewTrigger, RangeText, PrevTrigger,
|
|
1850
|
-
* NextTrigger, Table*, MonthSelect, YearSelect, PresetTrigger. */
|
|
1851
|
-
const DatePicker = DatePicker$1;
|
|
1852
|
-
injectComponentStyle("date-picker");
|
|
1853
|
-
//#endregion
|
|
1854
|
-
//#region src/components/descriptions/index.tsx
|
|
1855
|
-
function DescriptionsRoot({ layout = "horizontal", children, ...rest }) {
|
|
1856
|
-
return /* @__PURE__ */ jsx("dl", {
|
|
1857
|
-
...rest,
|
|
1858
|
-
"data-scope": "descriptions",
|
|
1859
|
-
"data-part": "root",
|
|
1860
|
-
"data-layout": layout,
|
|
1861
|
-
children
|
|
1862
|
-
});
|
|
1863
|
-
}
|
|
1864
|
-
function part$8(name, tag) {
|
|
1865
|
-
const Tag = tag;
|
|
1866
|
-
const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
|
|
1867
|
-
...rest,
|
|
1868
|
-
"data-scope": "descriptions",
|
|
1869
|
-
"data-part": name.toLowerCase(),
|
|
1870
|
-
children
|
|
1871
|
-
});
|
|
1872
|
-
Component.displayName = "Descriptions" + name;
|
|
1873
|
-
return Component;
|
|
1874
|
-
}
|
|
1875
|
-
const Descriptions = {
|
|
1876
|
-
Root: DescriptionsRoot,
|
|
1877
|
-
Item: part$8("Item", "div"),
|
|
1878
|
-
Term: part$8("Term", "dt"),
|
|
1879
|
-
Detail: part$8("Detail", "dd")
|
|
1880
|
-
};
|
|
1881
|
-
injectComponentStyle("descriptions");
|
|
1882
|
-
//#endregion
|
|
1883
|
-
//#region src/components/dialog/index.tsx
|
|
1884
|
-
/** Ark's Dialog, dressed in the paper-and-ink system: the sheet dissolves
|
|
1885
|
-
* in on elevation, the backdrop fades, and nested overlays stack through
|
|
1886
|
-
* the shared z-index ladder. The API is Ark's own — Root, Trigger,
|
|
1887
|
-
* Backdrop, Positioner, Content, Title, Description, CloseTrigger. */
|
|
1888
|
-
const Dialog = Dialog$1;
|
|
1889
|
-
injectComponentStyle("dialog");
|
|
1890
|
-
//#endregion
|
|
1891
|
-
//#region src/components/drawer/index.tsx
|
|
1892
|
-
/** Ark's Drawer, dressed in the paper-and-ink system: a full-height sheet
|
|
1893
|
-
* cut flush to the edge it rises from, sliding on the machine's translate
|
|
1894
|
-
* under the grabber's hand. The API is Ark's own — Root, Trigger,
|
|
1895
|
-
* Backdrop, Positioner, Content, Grabber, GrabberIndicator, Title,
|
|
1896
|
-
* Description, CloseTrigger, SwipeArea. */
|
|
1897
|
-
const Drawer = Drawer$1;
|
|
1898
|
-
injectComponentStyle("drawer");
|
|
1899
|
-
//#endregion
|
|
1900
|
-
//#region src/components/dynamic-input/index.tsx
|
|
1901
|
-
/**
|
|
1902
|
-
* A column of entry rows: one Input per line, each with a quiet remove
|
|
1903
|
-
* seal, and an add row at the tail. The list is controlled — every edit
|
|
1904
|
-
* reports a fresh array through `onValueChange` and the caller's array
|
|
1905
|
-
* stays the only truth. Deleting never drops below `min`, adding never
|
|
1906
|
-
* grows past `max`, and the group always keeps one row: an entry list
|
|
1907
|
-
* that emptied itself would leave the reader no place to type.
|
|
1908
|
-
*/
|
|
1909
|
-
function DynamicInput({ value, min = 0, max, placeholder, addLabel = "Add entry", disabled = false, invalid = false, onValueChange, children: _children, ...rest }) {
|
|
1910
|
-
const values = value ?? [""];
|
|
1911
|
-
const update = (index, next) => {
|
|
1912
|
-
const rows = values.slice();
|
|
1913
|
-
rows[index] = next;
|
|
1914
|
-
onValueChange?.(rows);
|
|
1915
|
-
};
|
|
1916
|
-
const remove = (index) => {
|
|
1917
|
-
const rows = values.filter((_, i) => i !== index);
|
|
1918
|
-
onValueChange?.(rows.length > 0 ? rows : [""]);
|
|
1919
|
-
};
|
|
1920
|
-
const add = () => {
|
|
1921
|
-
onValueChange?.([...values, ""]);
|
|
1922
|
-
};
|
|
1923
|
-
const canRemove = values.length > Math.max(min, 1);
|
|
1924
|
-
const canAdd = max === void 0 || values.length < max;
|
|
1925
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
1926
|
-
...rest,
|
|
1927
|
-
"data-scope": "dynamic-input",
|
|
1928
|
-
"data-part": "root",
|
|
1929
|
-
children: [values.map((value, index) => /* @__PURE__ */ jsxs("div", {
|
|
1930
|
-
"data-scope": "dynamic-input",
|
|
1931
|
-
"data-part": "row",
|
|
1932
|
-
children: [/* @__PURE__ */ jsx(Input, {
|
|
1933
|
-
value,
|
|
1934
|
-
placeholder,
|
|
1935
|
-
disabled,
|
|
1936
|
-
invalid,
|
|
1937
|
-
onValueChange: (next) => update(index, next)
|
|
1938
|
-
}), /* @__PURE__ */ jsx(Button, {
|
|
1939
|
-
variant: "ghost",
|
|
1940
|
-
square: true,
|
|
1941
|
-
disabled: disabled || !canRemove,
|
|
1942
|
-
"aria-label": `Remove entry ${index + 1}`,
|
|
1943
|
-
onClick: () => remove(index),
|
|
1944
|
-
children: crossIcon()
|
|
1945
|
-
})]
|
|
1946
|
-
}, index)), /* @__PURE__ */ jsx("div", {
|
|
1947
|
-
"data-scope": "dynamic-input",
|
|
1948
|
-
"data-part": "add",
|
|
1949
|
-
children: /* @__PURE__ */ jsxs(Button, {
|
|
1950
|
-
variant: "ghost",
|
|
1951
|
-
disabled: disabled || !canAdd,
|
|
1952
|
-
onClick: () => add(),
|
|
1953
|
-
children: ["+", addLabel]
|
|
1954
|
-
})
|
|
1955
|
-
})]
|
|
1956
|
-
});
|
|
1957
|
-
}
|
|
1958
|
-
/** The one glyph a remove seal needs: a single crossing stroke. */
|
|
1959
|
-
function crossIcon() {
|
|
1960
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
1961
|
-
width: 16,
|
|
1962
|
-
height: 16,
|
|
1963
|
-
viewBox: "0 0 24 24",
|
|
1964
|
-
fill: "none",
|
|
1965
|
-
stroke: "currentColor",
|
|
1966
|
-
strokeWidth: 1.75,
|
|
1967
|
-
strokeLinecap: "round",
|
|
1968
|
-
strokeLinejoin: "round",
|
|
1969
|
-
"aria-hidden": "true",
|
|
1970
|
-
children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
|
|
1971
|
-
});
|
|
1972
|
-
}
|
|
1973
|
-
injectComponentStyle("dynamic-input");
|
|
1974
|
-
//#endregion
|
|
1975
|
-
//#region src/components/editable/index.tsx
|
|
1976
|
-
/** Ark's Editable, dressed in the paper-and-ink system: bare ink while
|
|
1977
|
-
* reading, the full field recipe while editing. The API is Ark's own —
|
|
1978
|
-
* Root, Area, Label, Preview, Input, EditTrigger, SubmitTrigger,
|
|
1979
|
-
* CancelTrigger, Control. */
|
|
1980
|
-
const Editable = Editable$1;
|
|
1981
|
-
injectComponentStyle("editable");
|
|
1982
|
-
//#endregion
|
|
1983
|
-
//#region src/components/ellipsis/index.tsx
|
|
1984
|
-
function Ellipsis({ lines = 1, ...rest }) {
|
|
1985
|
-
const multiline = lines > 1;
|
|
1986
|
-
return /* @__PURE__ */ jsx("span", {
|
|
1987
|
-
...rest,
|
|
1988
|
-
style: multiline ? {
|
|
1989
|
-
...rest.style,
|
|
1990
|
-
"--bs-ellipsis-lines": String(lines)
|
|
1991
|
-
} : rest.style,
|
|
1992
|
-
"data-scope": "ellipsis",
|
|
1993
|
-
"data-part": "root",
|
|
1994
|
-
"data-multiline": multiline ? "" : void 0
|
|
1995
|
-
});
|
|
1996
|
-
}
|
|
1997
|
-
injectComponentStyle("ellipsis");
|
|
1998
|
-
//#endregion
|
|
1999
|
-
//#region src/components/empty/index.tsx
|
|
2000
|
-
/** An empty state: the page holds its breath. Root centers the column,
|
|
2001
|
-
* Visual carries the mark, Title and Description carry the ink, Actions
|
|
2002
|
-
* the way out. Any subset composes. */
|
|
2003
|
-
function part$7(name, tag) {
|
|
2004
|
-
const Tag = tag;
|
|
2005
|
-
const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
|
|
2006
|
-
...rest,
|
|
2007
|
-
"data-scope": "empty",
|
|
2008
|
-
"data-part": name.toLowerCase(),
|
|
2009
|
-
children
|
|
2010
|
-
});
|
|
2011
|
-
Component.displayName = "Empty" + name;
|
|
2012
|
-
return Component;
|
|
2013
|
-
}
|
|
2014
|
-
const Root$8 = part$7("Root", "div");
|
|
2015
|
-
const Visual = part$7("Visual", "div");
|
|
2016
|
-
const Title$1 = part$7("Title", "h3");
|
|
2017
|
-
const Description$2 = part$7("Description", "p");
|
|
2018
|
-
const Actions$2 = part$7("Actions", "div");
|
|
2019
|
-
const Empty = Object.assign(Root$8, {
|
|
2020
|
-
Root: Root$8,
|
|
2021
|
-
Visual,
|
|
2022
|
-
Title: Title$1,
|
|
2023
|
-
Description: Description$2,
|
|
2024
|
-
Actions: Actions$2
|
|
2025
|
-
});
|
|
2026
|
-
injectComponentStyle("empty");
|
|
2027
|
-
//#endregion
|
|
2028
|
-
//#region src/components/fieldset/index.tsx
|
|
2029
|
-
/** Ark's Fieldset, dressed in the paper-and-ink system: a song-serif
|
|
2030
|
-
* legend heading a column of fields. The API is Ark's own — Root, Legend,
|
|
2031
|
-
* HelperText, ErrorText. */
|
|
2032
|
-
const Fieldset = Fieldset$1;
|
|
2033
|
-
injectComponentStyle("fieldset");
|
|
2034
|
-
//#endregion
|
|
2035
|
-
//#region src/components/file-upload/index.tsx
|
|
2036
|
-
/** Ark's FileUpload, dressed in the paper-and-ink system: a dashed
|
|
2037
|
-
* dropzone that floods with subtle light on drag-over, and accepted files
|
|
2038
|
-
* as loose hairline slips. The API is Ark's own — Root, Label, Trigger,
|
|
2039
|
-
* Dropzone, HiddenInput, ItemGroup, Item, ItemName, ItemSizeText,
|
|
2040
|
-
* ItemPreview, ItemPreviewImage, ItemDeleteTrigger, ClearTrigger,
|
|
2041
|
-
* Context. */
|
|
2042
|
-
const FileUpload = FileUpload$1;
|
|
2043
|
-
injectComponentStyle("file-upload");
|
|
2044
|
-
//#endregion
|
|
2045
|
-
//#region src/components/float-button/index.tsx
|
|
2046
|
-
/** Context for {@link FloatButtonContextValue}, exported so a custom
|
|
2047
|
-
* part can read the group's state. */
|
|
2048
|
-
const FLOAT_BUTTON_CONTEXT = createContext(null);
|
|
2049
|
-
/**
|
|
2050
|
-
* A floating action and its fanned-out alternatives — FAB and speed
|
|
2051
|
-
* dial in one family. The Root moors the group at a page corner and
|
|
2052
|
-
* holds the openness (mirrored from `open` when controlled); the
|
|
2053
|
-
* Trigger flips it; each Item is a round action with its name surfacing
|
|
2054
|
-
* beside it while the group is open. The buttons are the shared recipe
|
|
2055
|
-
* (vessels here: round); this family owns only the mooring, the fan
|
|
2056
|
-
* and the fold.
|
|
2057
|
-
*/
|
|
2058
|
-
function Root$7({ open: openProp, placement = "bottom-end", onOpenChange, children, ...rest }) {
|
|
2059
|
-
const [inner, setInner] = useState(false);
|
|
2060
|
-
const open = openProp !== void 0 ? openProp : inner;
|
|
2061
|
-
const setOpen = (value) => {
|
|
2062
|
-
setInner(value);
|
|
2063
|
-
onOpenChange?.(value);
|
|
2064
|
-
};
|
|
2065
|
-
return /* @__PURE__ */ jsx(FLOAT_BUTTON_CONTEXT.Provider, {
|
|
2066
|
-
value: {
|
|
2067
|
-
open,
|
|
2068
|
-
toggle: () => setOpen(!open),
|
|
2069
|
-
close: () => setOpen(false)
|
|
2070
|
-
},
|
|
2071
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
2072
|
-
...rest,
|
|
2073
|
-
"data-scope": "float-button",
|
|
2074
|
-
"data-part": "root",
|
|
2075
|
-
"data-placement": placement,
|
|
2076
|
-
"data-state": open ? "open" : "closed",
|
|
2077
|
-
children
|
|
2078
|
-
})
|
|
2079
|
-
});
|
|
2080
|
-
}
|
|
2081
|
-
function Trigger({ label, children }) {
|
|
2082
|
-
const context = useContext(FLOAT_BUTTON_CONTEXT);
|
|
2083
|
-
return /* @__PURE__ */ jsx(Button, {
|
|
2084
|
-
variant: "solid",
|
|
2085
|
-
square: true,
|
|
2086
|
-
size: "lg",
|
|
2087
|
-
onClick: () => context?.toggle(),
|
|
2088
|
-
"aria-label": label || "Actions",
|
|
2089
|
-
"aria-expanded": context ? context.open : false,
|
|
2090
|
-
children
|
|
2091
|
-
});
|
|
2092
|
-
}
|
|
2093
|
-
function Item$2({ label, disabled = false, onClick, children }) {
|
|
2094
|
-
const context = useContext(FLOAT_BUTTON_CONTEXT);
|
|
2095
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
2096
|
-
"data-scope": "float-button",
|
|
2097
|
-
"data-part": "item",
|
|
2098
|
-
children: [/* @__PURE__ */ jsx(Button, {
|
|
2099
|
-
variant: "outline",
|
|
2100
|
-
square: true,
|
|
2101
|
-
size: "md",
|
|
2102
|
-
disabled,
|
|
2103
|
-
"aria-label": label,
|
|
2104
|
-
onClick: () => {
|
|
2105
|
-
onClick?.();
|
|
2106
|
-
context?.close();
|
|
2107
|
-
},
|
|
2108
|
-
children
|
|
2109
|
-
}), /* @__PURE__ */ jsx("span", {
|
|
2110
|
-
"data-scope": "float-button",
|
|
2111
|
-
"data-part": "item-label",
|
|
2112
|
-
"aria-hidden": "true",
|
|
2113
|
-
children: label
|
|
2114
|
-
})]
|
|
2115
|
-
});
|
|
2116
|
-
}
|
|
2117
|
-
const FloatButton = Object.assign(Root$7, {
|
|
2118
|
-
Root: Root$7,
|
|
2119
|
-
Trigger,
|
|
2120
|
-
Item: Item$2
|
|
2121
|
-
});
|
|
2122
|
-
injectComponentStyle("float-button");
|
|
2123
|
-
//#endregion
|
|
2124
|
-
//#region src/components/floating-panel/index.tsx
|
|
2125
|
-
/** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
|
|
2126
|
-
* popup vessel let loose — a draggable, resizable sheet whose header is the
|
|
2127
|
-
* handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
|
|
2128
|
-
* Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
|
|
2129
|
-
* Body. */
|
|
2130
|
-
const FloatingPanel = FloatingPanel$1;
|
|
2131
|
-
injectComponentStyle("floating-panel");
|
|
2132
|
-
//#endregion
|
|
2133
|
-
//#region src/components/form/index.tsx
|
|
2134
|
-
const FormContext = createContext(null);
|
|
2135
|
-
/** Walk a Standard Schema issue's path back to the dotted name the
|
|
2136
|
-
* matching FormField declared. */
|
|
2137
|
-
function issueName(issue) {
|
|
2138
|
-
return (issue.path ?? []).map((segment) => typeof segment === "object" ? segment.key : segment).join(".");
|
|
2139
|
-
}
|
|
2140
|
-
/**
|
|
2141
|
-
* The validation scheduler: one error map, a submit that validates
|
|
2142
|
-
* before it fires, live re-validation on the events the `validateOn`
|
|
2143
|
-
* prop names, and the imperative handle. The schema is any Standard
|
|
2144
|
-
* Schema (valibot, zod, arktype, …) — none are bundled; a `validate`
|
|
2145
|
-
* function composes with it for the cases schemas can't express. Errors
|
|
2146
|
-
* reach their field by name, through FormField.
|
|
2147
|
-
*/
|
|
2148
|
-
function Form({ state, schema, validate, validateOn = [
|
|
2149
|
-
"input",
|
|
2150
|
-
"change",
|
|
2151
|
-
"blur"
|
|
2152
|
-
], disabled = false, onSubmit, onError, ref, children, ...rest }) {
|
|
2153
|
-
const [errors, setErrors] = useState(() => /* @__PURE__ */ new Map());
|
|
2154
|
-
const run = useRef(0);
|
|
2155
|
-
async function runValidate() {
|
|
2156
|
-
const seq = ++run.current;
|
|
2157
|
-
const next = /* @__PURE__ */ new Map();
|
|
2158
|
-
if (validate) for (const error of await validate(state)) next.set(error.name, error.message);
|
|
2159
|
-
if (schema) {
|
|
2160
|
-
const result = await schema["~standard"].validate(state);
|
|
2161
|
-
for (const issue of result.issues ?? []) {
|
|
2162
|
-
const name = issueName(issue);
|
|
2163
|
-
if (!next.has(name)) next.set(name, issue.message);
|
|
2164
|
-
}
|
|
2165
|
-
}
|
|
2166
|
-
if (seq === run.current) setErrors(next);
|
|
2167
|
-
return next;
|
|
2168
|
-
}
|
|
2169
|
-
function clear(name) {
|
|
2170
|
-
if (!name) {
|
|
2171
|
-
setErrors(/* @__PURE__ */ new Map());
|
|
2172
|
-
return;
|
|
2173
|
-
}
|
|
2174
|
-
setErrors((prev) => {
|
|
2175
|
-
const next = new Map(prev);
|
|
2176
|
-
for (const key of next.keys()) if (typeof name === "string" ? key === name : name.test(key)) next.delete(key);
|
|
2177
|
-
return next;
|
|
2178
|
-
});
|
|
2179
|
-
}
|
|
2180
|
-
function setErrorsFrom(list) {
|
|
2181
|
-
setErrors(new Map(list.map((error) => [error.name, error.message])));
|
|
2182
|
-
}
|
|
2183
|
-
function getErrors(name) {
|
|
2184
|
-
const all = [...errors].map(([entry, message]) => ({
|
|
2185
|
-
name: entry,
|
|
2186
|
-
message
|
|
2187
|
-
}));
|
|
2188
|
-
if (!name) return all;
|
|
2189
|
-
return all.filter((error) => typeof name === "string" ? error.name === name : name.test(error.name));
|
|
2190
|
-
}
|
|
2191
|
-
useImperativeHandle(ref, () => ({
|
|
2192
|
-
validate: runValidate,
|
|
2193
|
-
clear,
|
|
2194
|
-
setErrors: setErrorsFrom,
|
|
2195
|
-
getErrors,
|
|
2196
|
-
errors
|
|
2197
|
-
}));
|
|
2198
|
-
function handleSubmit(event) {
|
|
2199
|
-
event.preventDefault();
|
|
2200
|
-
runValidate().then((map) => {
|
|
2201
|
-
if (map.size === 0) {
|
|
2202
|
-
onSubmit?.(state);
|
|
2203
|
-
return;
|
|
2204
|
-
}
|
|
2205
|
-
onError?.([...map].map(([name, message]) => ({
|
|
2206
|
-
name,
|
|
2207
|
-
message
|
|
2208
|
-
})));
|
|
2209
|
-
});
|
|
2210
|
-
}
|
|
2211
|
-
const timer = useRef(void 0);
|
|
2212
|
-
function onDelegated(kind, event) {
|
|
2213
|
-
if (!validateOn.includes(kind)) return;
|
|
2214
|
-
const target = event.target;
|
|
2215
|
-
if (!target || !("value" in target)) return;
|
|
2216
|
-
clearTimeout(timer.current);
|
|
2217
|
-
timer.current = setTimeout(() => void runValidate(), kind === "blur" ? 0 : 300);
|
|
2218
|
-
}
|
|
2219
|
-
return /* @__PURE__ */ jsx(FormContext.Provider, {
|
|
2220
|
-
value: {
|
|
2221
|
-
errors,
|
|
2222
|
-
disabled
|
|
2223
|
-
},
|
|
2224
|
-
children: /* @__PURE__ */ jsx("form", {
|
|
2225
|
-
...rest,
|
|
2226
|
-
"data-scope": "form",
|
|
2227
|
-
"data-part": "root",
|
|
2228
|
-
noValidate: true,
|
|
2229
|
-
onSubmit: handleSubmit,
|
|
2230
|
-
onInput: (event) => onDelegated("input", event),
|
|
2231
|
-
onChange: (event) => onDelegated("change", event),
|
|
2232
|
-
onBlurCapture: (event) => onDelegated("blur", event),
|
|
2233
|
-
children
|
|
2234
|
-
})
|
|
2235
|
-
});
|
|
2236
|
-
}
|
|
2237
|
-
function FormField({ name, label, hint, required = false, invalid = false, disabled = false, children, ...rest }) {
|
|
2238
|
-
const form = useContext(FormContext);
|
|
2239
|
-
const formError = name ? form?.errors.get(name) : void 0;
|
|
2240
|
-
const isInvalid = invalid || formError != null;
|
|
2241
|
-
const isDisabled = disabled || (form?.disabled ?? false);
|
|
2242
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2243
|
-
...rest,
|
|
2244
|
-
"data-form-field": name,
|
|
2245
|
-
children: /* @__PURE__ */ jsxs(Field$1.Root, {
|
|
2246
|
-
invalid: isInvalid,
|
|
2247
|
-
required,
|
|
2248
|
-
disabled: isDisabled,
|
|
2249
|
-
children: [
|
|
2250
|
-
label ? /* @__PURE__ */ jsx(Field$1.Label, { children: label }) : null,
|
|
2251
|
-
children,
|
|
2252
|
-
hint && formError == null ? /* @__PURE__ */ jsx(Field$1.HelperText, { children: hint }) : null,
|
|
2253
|
-
formError != null ? /* @__PURE__ */ jsx(Field$1.ErrorText, { children: formError }) : null
|
|
2254
|
-
]
|
|
2255
|
-
})
|
|
2256
|
-
});
|
|
2257
|
-
}
|
|
2258
|
-
injectComponentStyle("form");
|
|
2259
|
-
injectComponentStyle("field");
|
|
2260
|
-
//#endregion
|
|
2261
|
-
//#region src/components/format/index.tsx
|
|
2262
|
-
/** Ark's Format, dressed in the paper-and-ink system: Intl formatting for
|
|
2263
|
-
* numbers, currency, bytes and relative time. The components render bare
|
|
2264
|
-
* text with no DOM of their own — typography flows from the token layer,
|
|
2265
|
-
* so there is no component stylesheet. The API is Ark's own — Number,
|
|
2266
|
-
* Byte, Time, RelativeTime. */
|
|
2267
|
-
const Format = Format$1;
|
|
2268
|
-
//#endregion
|
|
2269
|
-
//#region src/components/frame/index.tsx
|
|
2270
|
-
/** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
|
|
2271
|
-
* iframe whose body teleports the children and whose `head` prop
|
|
2272
|
-
* carries extra <head> nodes — styles the child renders must travel
|
|
2273
|
-
* through that prop. The frame measures its content and grows to
|
|
2274
|
-
* fit; the vessel's border and paper belong to the consumer, since
|
|
2275
|
-
* an iframe carries no anatomy attributes for the core stylesheet
|
|
2276
|
-
* to hook. The API is Ark's own. */
|
|
2277
|
-
const Frame = Frame$1;
|
|
2278
|
-
//#endregion
|
|
2279
|
-
//#region src/components/grid/index.tsx
|
|
2280
|
-
/** The same named steps of the space ramp the stack uses — one
|
|
2281
|
-
* vocabulary of distance across the layout primitives. */
|
|
2282
|
-
const gapVars$2 = {
|
|
2283
|
-
none: "0",
|
|
2284
|
-
xs: "var(--bs-gap-xs)",
|
|
2285
|
-
sm: "var(--bs-gap-sm)",
|
|
2286
|
-
md: "var(--bs-gap-md)",
|
|
2287
|
-
lg: "var(--bs-gap-lg)",
|
|
2288
|
-
xl: "var(--bs-gap-xl)"
|
|
2289
|
-
};
|
|
2290
|
-
function Grid({ columns = 12, gap = "md", minChildWidth, ...rest }) {
|
|
2291
|
-
const style = {
|
|
2292
|
-
...rest.style,
|
|
2293
|
-
"--bs-grid-columns": String(columns),
|
|
2294
|
-
"--bs-grid-gap": gapVars$2[gap] ?? gapVars$2.md,
|
|
2295
|
-
...minChildWidth != null ? { "--bs-grid-min-child-width": minChildWidth } : {}
|
|
2296
|
-
};
|
|
2297
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2298
|
-
...rest,
|
|
2299
|
-
style,
|
|
2300
|
-
"data-scope": "grid",
|
|
2301
|
-
"data-part": "root",
|
|
2302
|
-
"data-autofill": minChildWidth != null ? "" : void 0
|
|
2303
|
-
});
|
|
2304
|
-
}
|
|
2305
|
-
injectComponentStyle("grid");
|
|
2306
|
-
//#endregion
|
|
2307
|
-
//#region src/components/highlight/index.tsx
|
|
2308
|
-
/** Ark's Highlight, dressed in the paper-and-ink system: query hits are
|
|
2309
|
-
* strokes of pigment on the page — a quiet tint of the accent behind the
|
|
2310
|
-
* ink, never neon. The component renders bare <mark> elements, so the
|
|
2311
|
-
* document-wide mark default carries the look. The API is Ark's own. */
|
|
2312
|
-
const Highlight = Highlight$1;
|
|
2313
|
-
injectComponentStyle("highlight");
|
|
2314
|
-
//#endregion
|
|
2315
|
-
//#region src/components/hover-card/index.tsx
|
|
2316
|
-
/** Ark's HoverCard, dressed in the paper-and-ink system: a preview card
|
|
2317
|
-
* that dissolves in over a quiet inline link, never stealing focus. The
|
|
2318
|
-
* API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
|
|
2319
|
-
const HoverCard = HoverCard$1;
|
|
2320
|
-
injectComponentStyle("hover-card");
|
|
2321
|
-
//#endregion
|
|
2322
|
-
//#region src/components/icon/index.tsx
|
|
2323
|
-
function Icon({ size = "inherit", label, children, ...rest }) {
|
|
2324
|
-
return /* @__PURE__ */ jsx("span", {
|
|
2325
|
-
...rest,
|
|
2326
|
-
role: label != null ? "img" : void 0,
|
|
2327
|
-
"aria-label": label,
|
|
2328
|
-
"aria-hidden": label != null ? void 0 : "true",
|
|
2329
|
-
"data-scope": "icon",
|
|
2330
|
-
"data-part": "root",
|
|
2331
|
-
"data-size": size,
|
|
2332
|
-
children
|
|
2333
|
-
});
|
|
2334
|
-
}
|
|
2335
|
-
injectComponentStyle("icon");
|
|
2336
|
-
//#endregion
|
|
2337
|
-
//#region src/components/image/index.tsx
|
|
2338
|
-
/** The mark for a source that never arrived: a quiet mountain-and-sun,
|
|
2339
|
-
* drawn in the stylesheet's stroke and hidden from the reader. */
|
|
2340
|
-
function placeholderGlyph() {
|
|
2341
|
-
return /* @__PURE__ */ jsxs("svg", {
|
|
2342
|
-
viewBox: "0 0 24 24",
|
|
2343
|
-
fill: "none",
|
|
2344
|
-
stroke: "currentColor",
|
|
2345
|
-
"aria-hidden": "true",
|
|
2346
|
-
children: [
|
|
2347
|
-
/* @__PURE__ */ jsx("rect", {
|
|
2348
|
-
x: 3,
|
|
2349
|
-
y: 4,
|
|
2350
|
-
width: 18,
|
|
2351
|
-
height: 16,
|
|
2352
|
-
rx: 1.5
|
|
2353
|
-
}),
|
|
2354
|
-
/* @__PURE__ */ jsx("circle", {
|
|
2355
|
-
cx: 9,
|
|
2356
|
-
cy: 10,
|
|
2357
|
-
r: 1.5
|
|
2358
|
-
}),
|
|
2359
|
-
/* @__PURE__ */ jsx("path", { d: "m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5" })
|
|
2360
|
-
]
|
|
2361
|
-
});
|
|
2362
|
-
}
|
|
2363
|
-
function Image({ src, alt = "", fit = "cover", loading = "lazy", fallback, ...rest }) {
|
|
2364
|
-
const [state, setState] = useState("loading");
|
|
2365
|
-
useEffect(() => setState("loading"), [src]);
|
|
2366
|
-
return /* @__PURE__ */ jsxs("figure", {
|
|
2367
|
-
...rest,
|
|
2368
|
-
"data-scope": "image",
|
|
2369
|
-
"data-part": "root",
|
|
2370
|
-
"data-state": state,
|
|
2371
|
-
"data-fit": fit,
|
|
2372
|
-
children: [/* @__PURE__ */ jsx("img", {
|
|
2373
|
-
"data-scope": "image",
|
|
2374
|
-
"data-part": "img",
|
|
2375
|
-
src,
|
|
2376
|
-
alt,
|
|
2377
|
-
loading,
|
|
2378
|
-
decoding: "async",
|
|
2379
|
-
onLoad: () => setState("loaded"),
|
|
2380
|
-
onError: () => setState("error")
|
|
2381
|
-
}), state === "error" ? /* @__PURE__ */ jsx("div", {
|
|
2382
|
-
"data-scope": "image",
|
|
2383
|
-
"data-part": "fallback",
|
|
2384
|
-
children: fallback ?? placeholderGlyph()
|
|
2385
|
-
}) : null]
|
|
2386
|
-
});
|
|
2387
|
-
}
|
|
2388
|
-
injectComponentStyle("image");
|
|
2389
|
-
//#endregion
|
|
2390
|
-
//#region src/components/image-cropper/index.tsx
|
|
2391
|
-
/** Ark's ImageCropper, dressed in the paper-and-ink system: a rounded vessel
|
|
2392
|
-
* holding the photograph, one lit selection window framed by light hairlines.
|
|
2393
|
-
* The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
|
|
2394
|
-
* Context. */
|
|
2395
|
-
const ImageCropper = ImageCropper$1;
|
|
2396
|
-
injectComponentStyle("image-cropper");
|
|
2397
|
-
//#endregion
|
|
2398
|
-
//#region src/components/image-viewer/index.tsx
|
|
2399
|
-
const MIN_SCALE = .5;
|
|
2400
|
-
const MAX_SCALE = 3;
|
|
2401
|
-
const SCALE_STEP = .25;
|
|
2402
|
-
/** The toolbar's line-drawn glyphs, fresh per render. */
|
|
2403
|
-
const TOOL_GLYPHS = {
|
|
2404
|
-
zoomIn: () => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2405
|
-
/* @__PURE__ */ jsx("circle", {
|
|
2406
|
-
cx: 11,
|
|
2407
|
-
cy: 11,
|
|
2408
|
-
r: 7
|
|
2409
|
-
}),
|
|
2410
|
-
/* @__PURE__ */ jsx("path", { d: "m16.2 16.2 4.8 4.8" }),
|
|
2411
|
-
/* @__PURE__ */ jsx("path", { d: "M8 11h6" }),
|
|
2412
|
-
/* @__PURE__ */ jsx("path", { d: "M11 8v6" })
|
|
2413
|
-
] }),
|
|
2414
|
-
zoomOut: () => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2415
|
-
/* @__PURE__ */ jsx("circle", {
|
|
2416
|
-
cx: 11,
|
|
2417
|
-
cy: 11,
|
|
2418
|
-
r: 7
|
|
2419
|
-
}),
|
|
2420
|
-
/* @__PURE__ */ jsx("path", { d: "m16.2 16.2 4.8 4.8" }),
|
|
2421
|
-
/* @__PURE__ */ jsx("path", { d: "M8 11h6" })
|
|
2422
|
-
] }),
|
|
2423
|
-
rotate: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M20.49 12A8.5 8.5 0 1 1 18 6.06" }), /* @__PURE__ */ jsx("path", { d: "M20.5 3.5v4h-4" })] }),
|
|
2424
|
-
close: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "m6 6 12 12" }), /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" })] })
|
|
2425
|
-
};
|
|
2426
|
-
function ImageViewer({ src, alt = "", open, zoomable = true, onOpenChange }) {
|
|
2427
|
-
const [localOpen, setLocalOpen] = useState(false);
|
|
2428
|
-
const [scale, setScale] = useState(1);
|
|
2429
|
-
const [rotation, setRotation] = useState(0);
|
|
2430
|
-
const isOpen = open ?? localOpen;
|
|
2431
|
-
const setOpen = (value) => {
|
|
2432
|
-
if (open === void 0) setLocalOpen(value);
|
|
2433
|
-
onOpenChange?.(value);
|
|
2434
|
-
};
|
|
2435
|
-
useEffect(() => {
|
|
2436
|
-
if (isOpen) {
|
|
2437
|
-
setScale(1);
|
|
2438
|
-
setRotation(0);
|
|
2439
|
-
}
|
|
2440
|
-
}, [isOpen]);
|
|
2441
|
-
function zoom(step) {
|
|
2442
|
-
setScale((current) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, current + step)));
|
|
2443
|
-
}
|
|
2444
|
-
function rotate() {
|
|
2445
|
-
setRotation((current) => (current + 90) % 360);
|
|
2446
|
-
}
|
|
2447
|
-
function toolButton(label, glyph, onClick) {
|
|
2448
|
-
return /* @__PURE__ */ jsx(Button, {
|
|
2449
|
-
variant: "ghost",
|
|
2450
|
-
square: true,
|
|
2451
|
-
size: "lg",
|
|
2452
|
-
"aria-label": label,
|
|
2453
|
-
onClick,
|
|
2454
|
-
children: /* @__PURE__ */ jsx("svg", {
|
|
2455
|
-
viewBox: "0 0 24 24",
|
|
2456
|
-
fill: "none",
|
|
2457
|
-
stroke: "currentColor",
|
|
2458
|
-
strokeWidth: 1.5,
|
|
2459
|
-
strokeLinecap: "round",
|
|
2460
|
-
strokeLinejoin: "round",
|
|
2461
|
-
"aria-hidden": "true",
|
|
2462
|
-
children: glyph()
|
|
2463
|
-
})
|
|
2464
|
-
});
|
|
2465
|
-
}
|
|
2466
|
-
return /* @__PURE__ */ jsx(Dialog$1.Root, {
|
|
2467
|
-
open: isOpen,
|
|
2468
|
-
onOpenChange: (details) => setOpen(details.open),
|
|
2469
|
-
lazyMount: true,
|
|
2470
|
-
unmountOnExit: true,
|
|
2471
|
-
children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: "bs-image-viewer-backdrop" }), /* @__PURE__ */ jsx(Dialog$1.Positioner, {
|
|
2472
|
-
className: "bs-image-viewer-positioner",
|
|
2473
|
-
children: /* @__PURE__ */ jsxs(Dialog$1.Content, {
|
|
2474
|
-
className: "bs-image-viewer-content",
|
|
2475
|
-
"aria-label": alt || "Image preview",
|
|
2476
|
-
onClick: (event) => {
|
|
2477
|
-
if (event.target === event.currentTarget) setOpen(false);
|
|
2478
|
-
},
|
|
2479
|
-
children: [/* @__PURE__ */ jsx("img", {
|
|
2480
|
-
"data-scope": "image-viewer",
|
|
2481
|
-
"data-part": "viewport",
|
|
2482
|
-
src,
|
|
2483
|
-
alt,
|
|
2484
|
-
style: { transform: `scale(${scale}) rotate(${rotation}deg)` }
|
|
2485
|
-
}), /* @__PURE__ */ jsx("div", {
|
|
2486
|
-
"data-scope": "image-viewer",
|
|
2487
|
-
"data-part": "toolbar",
|
|
2488
|
-
children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
|
|
2489
|
-
zoomable ? [toolButton("Zoom in", TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP)), toolButton("Zoom out", TOOL_GLYPHS.zoomOut, () => zoom(-.25))] : null,
|
|
2490
|
-
toolButton("Rotate 90 degrees", TOOL_GLYPHS.rotate, rotate),
|
|
2491
|
-
toolButton("Close", TOOL_GLYPHS.close, () => setOpen(false))
|
|
2492
|
-
] })
|
|
2493
|
-
})]
|
|
2494
|
-
})
|
|
2495
|
-
})] })
|
|
2496
|
-
});
|
|
2497
|
-
}
|
|
2498
|
-
injectComponentStyle("image-viewer");
|
|
2499
|
-
//#endregion
|
|
2500
|
-
//#region src/components/input-group/index.tsx
|
|
2501
|
-
function part$6(name) {
|
|
2502
|
-
const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx("div", {
|
|
2503
|
-
...rest,
|
|
2504
|
-
"data-scope": "input-group",
|
|
2505
|
-
"data-part": name.toLowerCase(),
|
|
2506
|
-
children
|
|
2507
|
-
});
|
|
2508
|
-
Component.displayName = "InputGroup" + name;
|
|
2509
|
-
return Component;
|
|
2510
|
-
}
|
|
2511
|
-
/**
|
|
2512
|
-
* Merged controls: attachments and the entry fused into one seal. The
|
|
2513
|
-
* Root draws the single hairline and carries the group's focus halo;
|
|
2514
|
-
* the Addon is a recessed cell for the reader's fixed words — a scheme,
|
|
2515
|
-
* a unit, a quiet button — placed before or after the entry. Put our
|
|
2516
|
-
* Input (or Textarea) inside and its own border and halo step aside in
|
|
2517
|
-
* favor of the group's; the stylesheet does the merging, the wrapper
|
|
2518
|
-
* adds no visuals of its own.
|
|
2519
|
-
*/
|
|
2520
|
-
const Root$6 = part$6("Root");
|
|
2521
|
-
const Addon = part$6("Addon");
|
|
2522
|
-
const InputGroup = Object.assign(Root$6, {
|
|
2523
|
-
Root: Root$6,
|
|
2524
|
-
Addon
|
|
2525
|
-
});
|
|
2526
|
-
injectComponentStyle("input-group");
|
|
2527
|
-
//#endregion
|
|
2528
|
-
//#region src/components/json-tree-view/index.tsx
|
|
2529
|
-
/** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
|
|
2530
|
-
* recipes re-scoped, with value nodes reading as tabular data. The API is
|
|
2531
|
-
* Ark's own — Root, Tree, plus createJsonTreeCollection. */
|
|
2532
|
-
const JsonTreeView = JsonTreeView$1;
|
|
2533
|
-
injectComponentStyle("json-tree-view");
|
|
2534
|
-
//#endregion
|
|
2535
|
-
//#region src/components/kbd/index.tsx
|
|
2536
|
-
function Kbd({ children, ...rest }) {
|
|
2537
|
-
return /* @__PURE__ */ jsx("kbd", {
|
|
2538
|
-
...rest,
|
|
2539
|
-
"data-scope": "kbd",
|
|
2540
|
-
"data-part": "root",
|
|
2541
|
-
children
|
|
2542
|
-
});
|
|
2543
|
-
}
|
|
2544
|
-
injectComponentStyle("kbd");
|
|
2545
|
-
//#endregion
|
|
2546
|
-
//#region src/components/layout/index.tsx
|
|
2547
|
-
const LAYOUT_CONTEXT = createContext(null);
|
|
2548
|
-
/**
|
|
2549
|
-
* The application skeleton: Root, Header, Sider, Content, Footer —
|
|
2550
|
-
* the admin arrangement dressed in the paper-and-ink surfaces. The
|
|
2551
|
-
* root is a full-height grid; a declared `sider` turns the columns
|
|
2552
|
-
* around to meet whichever edge the rail stands on.
|
|
2553
|
-
*/
|
|
2554
|
-
function Root$5({ sider, children, ...rest }) {
|
|
2555
|
-
return /* @__PURE__ */ jsx(LAYOUT_CONTEXT.Provider, {
|
|
2556
|
-
value: { siderPlacement: () => sider },
|
|
2557
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
2558
|
-
...rest,
|
|
2559
|
-
"data-scope": "layout",
|
|
2560
|
-
"data-part": "root",
|
|
2561
|
-
"data-sider": sider,
|
|
2562
|
-
children
|
|
2563
|
-
})
|
|
2564
|
-
});
|
|
2565
|
-
}
|
|
2566
|
-
/** A semantic block of the skeleton — header, footer, and the flow's
|
|
2567
|
-
* main content each land on their native element and their grid area. */
|
|
2568
|
-
function region(name, tag) {
|
|
2569
|
-
const Tag = tag;
|
|
2570
|
-
const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
|
|
2571
|
-
...rest,
|
|
2572
|
-
"data-scope": "layout",
|
|
2573
|
-
"data-part": name.toLowerCase(),
|
|
2574
|
-
children
|
|
2575
|
-
});
|
|
2576
|
-
Component.displayName = "Layout" + name;
|
|
2577
|
-
return Component;
|
|
2578
|
-
}
|
|
2579
|
-
const Header = region("Header", "header");
|
|
2580
|
-
const Content$2 = region("Content", "main");
|
|
2581
|
-
const Footer = region("Footer", "footer");
|
|
2582
|
-
/** One step of the arrow-key resize, in px. */
|
|
2583
|
-
const RESIZE_STEP = 16;
|
|
2584
|
-
function Sider({ collapsed = false, width: widthProp, collapsedWidth = "3.5rem", resizable = false, minWidth = "12rem", maxWidth = "24rem", style, onCollapsedChange, onWidthChange, children, ...rest }) {
|
|
2585
|
-
const layout = useContext(LAYOUT_CONTEXT);
|
|
2586
|
-
const rail = useRef(null);
|
|
2587
|
-
const [dragging, setDragging] = useState(false);
|
|
2588
|
-
const [innerWidth, setInnerWidth] = useState(widthProp ?? "16rem");
|
|
2589
|
-
const width = widthProp !== void 0 ? widthProp : innerWidth;
|
|
2590
|
-
const prevCollapsed = useRef(collapsed);
|
|
2591
|
-
useEffect(() => {
|
|
2592
|
-
if (prevCollapsed.current === collapsed) return;
|
|
2593
|
-
prevCollapsed.current = collapsed;
|
|
2594
|
-
onCollapsedChange?.(collapsed);
|
|
2595
|
-
}, [collapsed, onCollapsedChange]);
|
|
2596
|
-
const innerWidthRef = useRef(innerWidth);
|
|
2597
|
-
innerWidthRef.current = innerWidth;
|
|
2598
|
-
useEffect(() => {
|
|
2599
|
-
if (widthProp === void 0 || widthProp === innerWidthRef.current) return;
|
|
2600
|
-
setInnerWidth(widthProp);
|
|
2601
|
-
onWidthChange?.(widthProp);
|
|
2602
|
-
}, [widthProp, onWidthChange]);
|
|
2603
|
-
const applyWidth = (next) => {
|
|
2604
|
-
setInnerWidth(next);
|
|
2605
|
-
onWidthChange?.(next);
|
|
2606
|
-
};
|
|
2607
|
-
const dragStart = useRef({
|
|
2608
|
-
x: 0,
|
|
2609
|
-
width: 0
|
|
2610
|
-
});
|
|
2611
|
-
const onPointerDown = (event) => {
|
|
2612
|
-
setDragging(true);
|
|
2613
|
-
dragStart.current = {
|
|
2614
|
-
x: event.clientX,
|
|
2615
|
-
width: rail.current ? rail.current.getBoundingClientRect().width : 0
|
|
2616
|
-
};
|
|
2617
|
-
event.currentTarget.setPointerCapture(event.pointerId);
|
|
2618
|
-
};
|
|
2619
|
-
const onPointerMove = (event) => {
|
|
2620
|
-
if (!dragging) return;
|
|
2621
|
-
const towardFlow = (layout?.siderPlacement() ?? "start") === "end" ? -1 : 1;
|
|
2622
|
-
applyWidth(`${Math.round(dragStart.current.width + towardFlow * (event.clientX - dragStart.current.x))}px`);
|
|
2623
|
-
};
|
|
2624
|
-
const onPointerUp = (event) => {
|
|
2625
|
-
setDragging(false);
|
|
2626
|
-
event.currentTarget.releasePointerCapture(event.pointerId);
|
|
2627
|
-
};
|
|
2628
|
-
const onKeyDown = (event) => {
|
|
2629
|
-
if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
|
|
2630
|
-
event.preventDefault();
|
|
2631
|
-
const widen = (layout?.siderPlacement() ?? "start") === "end" ? event.key === "ArrowLeft" : event.key === "ArrowRight";
|
|
2632
|
-
const current = rail.current ? rail.current.getBoundingClientRect().width : 0;
|
|
2633
|
-
applyWidth(`${Math.round(current + (widen ? RESIZE_STEP : -16))}px`);
|
|
2634
|
-
};
|
|
2635
|
-
const handle = resizable && !collapsed ? /* @__PURE__ */ jsx("div", {
|
|
2636
|
-
"data-scope": "layout",
|
|
2637
|
-
"data-part": "sider-resize",
|
|
2638
|
-
"data-dragging": dragging ? "" : void 0,
|
|
2639
|
-
role: "separator",
|
|
2640
|
-
"aria-orientation": "vertical",
|
|
2641
|
-
tabIndex: 0,
|
|
2642
|
-
"aria-label": "Resize sidebar",
|
|
2643
|
-
"aria-valuenow": Math.round(rail.current ? rail.current.getBoundingClientRect().width : 0),
|
|
2644
|
-
onPointerDown,
|
|
2645
|
-
onPointerMove,
|
|
2646
|
-
onPointerUp,
|
|
2647
|
-
onKeyDown
|
|
2648
|
-
}) : null;
|
|
2649
|
-
return /* @__PURE__ */ jsxs("aside", {
|
|
2650
|
-
...rest,
|
|
2651
|
-
ref: rail,
|
|
2652
|
-
style: {
|
|
2653
|
-
...style,
|
|
2654
|
-
"--bs-layout-sider-width": collapsed ? collapsedWidth : width,
|
|
2655
|
-
"--bs-layout-sider-min": collapsed ? collapsedWidth : minWidth,
|
|
2656
|
-
"--bs-layout-sider-max": collapsed ? collapsedWidth : maxWidth
|
|
2657
|
-
},
|
|
2658
|
-
"data-scope": "layout",
|
|
2659
|
-
"data-part": "sider",
|
|
2660
|
-
"data-collapsed": collapsed ? "" : void 0,
|
|
2661
|
-
"data-dragging": dragging ? "" : void 0,
|
|
2662
|
-
"data-resizable": resizable ? "" : void 0,
|
|
2663
|
-
children: [typeof children === "function" ? children({ collapsed }) : children, handle]
|
|
2664
|
-
});
|
|
2665
|
-
}
|
|
2666
|
-
const Layout = Object.assign(Root$5, {
|
|
2667
|
-
Root: Root$5,
|
|
2668
|
-
Header,
|
|
2669
|
-
Sider,
|
|
2670
|
-
Content: Content$2,
|
|
2671
|
-
Footer
|
|
2672
|
-
});
|
|
2673
|
-
injectComponentStyle("layout");
|
|
2674
|
-
//#endregion
|
|
2675
|
-
//#region src/components/link/index.tsx
|
|
2676
|
-
/** A link is ink in the accent's voice: quiet at rest, deepening under
|
|
2677
|
-
* the hand, the halo at focus. The underline follows the prose —
|
|
2678
|
-
* always, on hover, or never. */
|
|
2679
|
-
function Link({ underline = "hover", children, ...rest }) {
|
|
2680
|
-
return /* @__PURE__ */ jsx("a", {
|
|
2681
|
-
...rest,
|
|
2682
|
-
"data-scope": "link",
|
|
2683
|
-
"data-part": "root",
|
|
2684
|
-
"data-underline": underline,
|
|
2685
|
-
children
|
|
2686
|
-
});
|
|
2687
|
-
}
|
|
2688
|
-
injectComponentStyle("link");
|
|
2689
|
-
//#endregion
|
|
2690
|
-
//#region src/components/list/index.tsx
|
|
2691
|
-
/** A ledger of rows: Root is the list, Item one row, Leading the mark
|
|
2692
|
-
* before the words, Content the title and its quiet echo, Actions the
|
|
2693
|
-
* way out. The bordered variant draws the hairlines; the hoverable
|
|
2694
|
-
* variant gives every row the wash — and any row the caller makes
|
|
2695
|
-
* clickable (role="button") answers the pointer on its own. */
|
|
2696
|
-
function part$5(name, tag) {
|
|
2697
|
-
const Tag = tag;
|
|
2698
|
-
function Component({ children, ...rest }) {
|
|
2699
|
-
return /* @__PURE__ */ jsx(Tag, {
|
|
2700
|
-
...rest,
|
|
2701
|
-
"data-scope": "list",
|
|
2702
|
-
"data-part": name.toLowerCase(),
|
|
2703
|
-
children
|
|
2704
|
-
});
|
|
2705
|
-
}
|
|
2706
|
-
Component.displayName = "List" + name;
|
|
2707
|
-
return Component;
|
|
2708
|
-
}
|
|
2709
|
-
function Root$4({ bordered = false, hoverable = false, children, ...rest }) {
|
|
2710
|
-
return /* @__PURE__ */ jsx("ul", {
|
|
2711
|
-
...rest,
|
|
2712
|
-
"data-scope": "list",
|
|
2713
|
-
"data-part": "root",
|
|
2714
|
-
"data-bordered": bordered || void 0,
|
|
2715
|
-
"data-hoverable": hoverable || void 0,
|
|
2716
|
-
children
|
|
2717
|
-
});
|
|
2718
|
-
}
|
|
2719
|
-
Root$4.displayName = "ListRoot";
|
|
2720
|
-
const Item$1 = part$5("Item", "li");
|
|
2721
|
-
const Leading = part$5("Leading", "div");
|
|
2722
|
-
const Actions$1 = part$5("Actions", "div");
|
|
2723
|
-
function Content$1({ title, description, children, ...rest }) {
|
|
2724
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
2725
|
-
...rest,
|
|
2726
|
-
"data-scope": "list",
|
|
2727
|
-
"data-part": "content",
|
|
2728
|
-
children: [
|
|
2729
|
-
title ? /* @__PURE__ */ jsx("div", {
|
|
2730
|
-
"data-scope": "list",
|
|
2731
|
-
"data-part": "title",
|
|
2732
|
-
children: title
|
|
2733
|
-
}) : null,
|
|
2734
|
-
description ? /* @__PURE__ */ jsx("div", {
|
|
2735
|
-
"data-scope": "list",
|
|
2736
|
-
"data-part": "description",
|
|
2737
|
-
children: description
|
|
2738
|
-
}) : null,
|
|
2739
|
-
children
|
|
2740
|
-
]
|
|
2741
|
-
});
|
|
2742
|
-
}
|
|
2743
|
-
Content$1.displayName = "ListContent";
|
|
2744
|
-
const List = Object.assign(Root$4, {
|
|
2745
|
-
Root: Root$4,
|
|
2746
|
-
Item: Item$1,
|
|
2747
|
-
Leading,
|
|
2748
|
-
Content: Content$1,
|
|
2749
|
-
Actions: Actions$1
|
|
2750
|
-
});
|
|
2751
|
-
injectComponentStyle("list");
|
|
2752
|
-
//#endregion
|
|
2753
|
-
//#region src/components/listbox/index.tsx
|
|
2754
|
-
/** Ark's Listbox, dressed in the paper-and-ink system: quiet rows of ink
|
|
2755
|
-
* where the checked row alone takes the flat primary fill. The API is
|
|
2756
|
-
* Ark's own — Root, Label, Input, Content, Empty, Item, ItemText,
|
|
2757
|
-
* ItemIndicator, ItemGroup, ItemGroupLabel, ValueText, plus
|
|
2758
|
-
* createListCollection. */
|
|
2759
|
-
const Listbox = Listbox$1;
|
|
2760
|
-
injectComponentStyle("listbox");
|
|
2761
|
-
//#endregion
|
|
2762
|
-
//#region src/components/marquee/index.tsx
|
|
2763
|
-
/** Ark's Marquee, dressed in the paper-and-ink system: a linear ribbon of
|
|
2764
|
-
* seal-cut chips that dissolves into the paper at its edges rather than
|
|
2765
|
-
* cutting off. The API is Ark's own — Root, Viewport, Content, Edge, Item. */
|
|
2766
|
-
const Marquee = Marquee$1;
|
|
2767
|
-
injectComponentStyle("marquee");
|
|
2768
|
-
//#endregion
|
|
2769
|
-
//#region src/components/masonry/index.tsx
|
|
2770
|
-
/** The same named steps of the space ramp the stack uses — one
|
|
2771
|
-
* vocabulary of distance across the layout primitives. */
|
|
2772
|
-
const gapVars$1 = {
|
|
2773
|
-
none: "0",
|
|
2774
|
-
xs: "var(--bs-gap-xs)",
|
|
2775
|
-
sm: "var(--bs-gap-sm)",
|
|
2776
|
-
md: "var(--bs-gap-md)",
|
|
2777
|
-
lg: "var(--bs-gap-lg)",
|
|
2778
|
-
xl: "var(--bs-gap-xl)"
|
|
2779
|
-
};
|
|
2780
|
-
function Masonry({ columns = 3, gap = "md", ...rest }) {
|
|
2781
|
-
const style = {
|
|
2782
|
-
...rest.style,
|
|
2783
|
-
"--bs-masonry-columns": String(columns),
|
|
2784
|
-
"--bs-masonry-gap": gapVars$1[gap] ?? gapVars$1.md
|
|
2785
|
-
};
|
|
2786
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2787
|
-
...rest,
|
|
2788
|
-
style,
|
|
2789
|
-
"data-scope": "masonry",
|
|
2790
|
-
"data-part": "root"
|
|
2791
|
-
});
|
|
2792
|
-
}
|
|
2793
|
-
injectComponentStyle("masonry");
|
|
2794
|
-
//#endregion
|
|
2795
|
-
//#region src/components/menu/index.tsx
|
|
2796
|
-
/** Ark's Menu, dressed in the paper-and-ink system: a quiet paper vessel on
|
|
2797
|
-
* elevation, hover as light on the row, checked items as the flat ink fill.
|
|
2798
|
-
* The API is Ark's own — Root, Trigger, ContextTrigger, Indicator, Positioner,
|
|
2799
|
-
* Content, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel,
|
|
2800
|
-
* TriggerItem, Separator, Arrow, ArrowTip. */
|
|
2801
|
-
const Menu = Menu$1;
|
|
2802
|
-
injectComponentStyle("menu");
|
|
2803
|
-
//#endregion
|
|
2804
|
-
//#region src/components/menubar/index.tsx
|
|
2805
|
-
function Menubar({ items, onSelect, children, ...rest }) {
|
|
2806
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
2807
|
-
...rest,
|
|
2808
|
-
"data-scope": "menubar",
|
|
2809
|
-
"data-part": "root",
|
|
2810
|
-
role: "menubar",
|
|
2811
|
-
children: [items.map((group) => /* @__PURE__ */ jsxs(Menu$1.Root, {
|
|
2812
|
-
positioning: { placement: "bottom-start" },
|
|
2813
|
-
children: [/* @__PURE__ */ jsx(Menu$1.Trigger, {
|
|
2814
|
-
asChild: true,
|
|
2815
|
-
children: /* @__PURE__ */ jsx("button", {
|
|
2816
|
-
type: "button",
|
|
2817
|
-
"data-scope": "menubar",
|
|
2818
|
-
"data-part": "trigger",
|
|
2819
|
-
children: group.label
|
|
2820
|
-
})
|
|
2821
|
-
}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { children: /* @__PURE__ */ jsx(Menu$1.Content, { children: group.items.map((entry) => /* @__PURE__ */ jsx(Menu$1.Item, {
|
|
2822
|
-
value: entry.value,
|
|
2823
|
-
disabled: entry.disabled,
|
|
2824
|
-
"data-danger": entry.danger ? "" : void 0,
|
|
2825
|
-
onSelect: () => onSelect?.(entry.value),
|
|
2826
|
-
children: /* @__PURE__ */ jsx(Menu$1.ItemText, { children: entry.label })
|
|
2827
|
-
}, entry.value)) }) }) })]
|
|
2828
|
-
}, group.label)), children]
|
|
2829
|
-
});
|
|
2830
|
-
}
|
|
2831
|
-
injectComponentStyle("menubar");
|
|
2832
|
-
injectComponentStyle("menu");
|
|
2833
|
-
//#endregion
|
|
2834
|
-
//#region src/components/meter/index.tsx
|
|
2835
|
-
function part$4(name, tag) {
|
|
2836
|
-
const Tag = tag;
|
|
2837
|
-
const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
|
|
2838
|
-
...rest,
|
|
2839
|
-
"data-scope": "meter",
|
|
2840
|
-
"data-part": name.toLowerCase(),
|
|
2841
|
-
children
|
|
2842
|
-
});
|
|
2843
|
-
Component.displayName = "Meter" + name;
|
|
2844
|
-
return Component;
|
|
2845
|
-
}
|
|
2846
|
-
const Label$2 = part$4("Label", "span");
|
|
2847
|
-
const ValueText = part$4("ValueText", "span");
|
|
2848
|
-
const Track = ({ ...rest }) => /* @__PURE__ */ jsx("span", {
|
|
2849
|
-
...rest,
|
|
2850
|
-
"data-scope": "meter",
|
|
2851
|
-
"data-part": "track",
|
|
2852
|
-
children: /* @__PURE__ */ jsx("span", {
|
|
2853
|
-
"data-scope": "meter",
|
|
2854
|
-
"data-part": "range"
|
|
2855
|
-
})
|
|
2856
|
-
});
|
|
2857
|
-
const Root$3 = ({ value, min = 0, max = 100, level = "normal", label, children, ...rest }) => {
|
|
2858
|
-
const span = max - min;
|
|
2859
|
-
const ratio = span > 0 ? Math.min(Math.max((value - min) / span, 0), 1) : 0;
|
|
2860
|
-
return /* @__PURE__ */ jsx("div", {
|
|
2861
|
-
...rest,
|
|
2862
|
-
role: "meter",
|
|
2863
|
-
"aria-valuemin": min,
|
|
2864
|
-
"aria-valuemax": max,
|
|
2865
|
-
"aria-valuenow": value,
|
|
2866
|
-
"aria-label": label ?? rest["aria-label"],
|
|
2867
|
-
"data-scope": "meter",
|
|
2868
|
-
"data-part": "root",
|
|
2869
|
-
"data-level": level !== "normal" ? level : void 0,
|
|
2870
|
-
style: {
|
|
2871
|
-
...rest.style,
|
|
2872
|
-
"--_percent": `${ratio * 100}%`
|
|
2873
|
-
},
|
|
2874
|
-
children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2875
|
-
/* @__PURE__ */ jsx(Label$2, { children: label }),
|
|
2876
|
-
/* @__PURE__ */ jsx(ValueText, { children: `${Math.round(ratio * 100)}%` }),
|
|
2877
|
-
/* @__PURE__ */ jsx(Track, {})
|
|
2878
|
-
] })
|
|
2879
|
-
});
|
|
2880
|
-
};
|
|
2881
|
-
const Meter = Object.assign(Root$3, {
|
|
2882
|
-
Root: Root$3,
|
|
2883
|
-
Label: Label$2,
|
|
2884
|
-
ValueText,
|
|
2885
|
-
Track
|
|
2886
|
-
});
|
|
2887
|
-
injectComponentStyle("meter");
|
|
2888
|
-
//#endregion
|
|
2889
|
-
//#region src/components/navigation-menu/index.tsx
|
|
2890
|
-
/** Ark's NavigationMenu, dressed in the paper-and-ink system: a menubar of
|
|
2891
|
-
* ghost triggers with one sliding stroke of primary ink, opening the shared
|
|
2892
|
-
* popup vessel. The API is Ark's own — Root, List, Item, Trigger, Link,
|
|
2893
|
-
* Content, ViewportPositioner, Viewport, Indicator, ItemIndicator, Arrow. */
|
|
2894
|
-
const NavigationMenu = NavigationMenu$1;
|
|
2895
|
-
injectComponentStyle("navigation-menu");
|
|
2896
|
-
//#endregion
|
|
2897
|
-
//#region src/components/number-input/index.tsx
|
|
2898
|
-
/** Ark's NumberInput, dressed in the paper-and-ink system: the stepper
|
|
2899
|
-
* rides inside the field as one seal split by a hairline, numbers set in
|
|
2900
|
-
* tabular figures. The API is Ark's own — Root, Label, Control, Input,
|
|
2901
|
-
* ValueText, IncrementTrigger, DecrementTrigger, Scrubber. */
|
|
2902
|
-
const NumberInput = NumberInput$1;
|
|
2903
|
-
injectComponentStyle("number-input");
|
|
2904
|
-
//#endregion
|
|
2905
|
-
//#region src/components/pagination/index.tsx
|
|
2906
|
-
/**
|
|
2907
|
-
* Pagination — paged navigation.
|
|
2908
|
-
*
|
|
2909
|
-
* Parts: Root, Item (page seals), Ellipsis, PrevTrigger, NextTrigger,
|
|
2910
|
-
* FirstTrigger, LastTrigger. Items carry data-selected.
|
|
2911
|
-
*/
|
|
2912
|
-
const Pagination = Pagination$1;
|
|
2913
|
-
injectComponentStyle("pagination");
|
|
2914
|
-
//#endregion
|
|
2915
|
-
//#region src/components/password-input/index.tsx
|
|
2916
|
-
/** Ark's PasswordInput, dressed in the paper-and-ink system: the reveal
|
|
2917
|
-
* eye sits quiet at the field's edge and swaps in place — no shift, no
|
|
2918
|
-
* noise. The API is Ark's own — Root, Label, Control, Input, Indicator,
|
|
2919
|
-
* VisibilityTrigger. */
|
|
2920
|
-
const PasswordInput = PasswordInput$1;
|
|
2921
|
-
injectComponentStyle("password-input");
|
|
2922
|
-
//#endregion
|
|
2923
|
-
//#region src/components/pin-input/index.tsx
|
|
2924
|
-
/** Ark's PinInput, dressed in the paper-and-ink system: one character per
|
|
2925
|
-
* square-cut seal, centered ink in tabular figures. The API is Ark's own —
|
|
2926
|
-
* Root, Label, Control, Input, HiddenInput. */
|
|
2927
|
-
const PinInput = PinInput$1;
|
|
2928
|
-
injectComponentStyle("pin-input");
|
|
2929
|
-
//#endregion
|
|
2930
|
-
//#region src/components/popconfirm/index.tsx
|
|
2931
|
-
function Popconfirm({ message, confirmText = "Confirm", cancelText = "Cancel", children, onConfirm, onCancel }) {
|
|
2932
|
-
const [open, setOpen] = useState(false);
|
|
2933
|
-
function settle(confirmed) {
|
|
2934
|
-
setOpen(false);
|
|
2935
|
-
(confirmed ? onConfirm : onCancel)?.();
|
|
2936
|
-
}
|
|
2937
|
-
return /* @__PURE__ */ jsxs(Popover$1.Root, {
|
|
2938
|
-
open,
|
|
2939
|
-
onOpenChange: (details) => setOpen(details.open),
|
|
2940
|
-
positioning: { placement: "top" },
|
|
2941
|
-
children: [/* @__PURE__ */ jsx(Popover$1.Trigger, {
|
|
2942
|
-
asChild: true,
|
|
2943
|
-
children
|
|
2944
|
-
}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsxs(Popover$1.Content, {
|
|
2945
|
-
className: "bs-popconfirm",
|
|
2946
|
-
children: [/* @__PURE__ */ jsx("p", {
|
|
2947
|
-
"data-part": "message",
|
|
2948
|
-
children: message
|
|
2949
|
-
}), /* @__PURE__ */ jsxs("div", {
|
|
2950
|
-
"data-part": "actions",
|
|
2951
|
-
children: [/* @__PURE__ */ jsx(Button, {
|
|
2952
|
-
variant: "ghost",
|
|
2953
|
-
size: "sm",
|
|
2954
|
-
onClick: () => settle(false),
|
|
2955
|
-
children: cancelText
|
|
2956
|
-
}), /* @__PURE__ */ jsx(Button, {
|
|
2957
|
-
size: "sm",
|
|
2958
|
-
onClick: () => settle(true),
|
|
2959
|
-
children: confirmText
|
|
2960
|
-
})]
|
|
2961
|
-
})]
|
|
2962
|
-
}) }) })]
|
|
2963
|
-
});
|
|
2964
|
-
}
|
|
2965
|
-
injectComponentStyle("popconfirm");
|
|
2966
|
-
//#endregion
|
|
2967
|
-
//#region src/components/popover/index.tsx
|
|
2968
|
-
/** Ark's Popover, dressed in the paper-and-ink system: a paper vessel that
|
|
2969
|
-
* dissolves in on elevation, anchored to its trigger by a whisker arrow. The
|
|
2970
|
-
* API is Ark's own — Root, Trigger, Anchor, Indicator, Positioner, Content,
|
|
2971
|
-
* Title, Description, CloseTrigger, Arrow, ArrowTip. */
|
|
2972
|
-
const Popover = Popover$1;
|
|
2973
|
-
injectComponentStyle("popover");
|
|
2974
|
-
//#endregion
|
|
2975
|
-
//#region src/components/progress/index.tsx
|
|
2976
|
-
/** Ark's Progress, dressed in the paper-and-ink system: a quiet hairline
|
|
2977
|
-
* groove that the primary ink fills at the machine's pace. The API is
|
|
2978
|
-
* Ark's own — Root, Label, ValueText, Track, Range, View, Circle,
|
|
2979
|
-
* CircleTrack, CircleRange. */
|
|
2980
|
-
const Progress = Progress$1;
|
|
2981
|
-
injectComponentStyle("progress");
|
|
2982
|
-
//#endregion
|
|
2983
|
-
//#region src/components/progress-group/index.tsx
|
|
2984
|
-
function ProgressGroup({ segments, max, showLegend = true, ...rest }) {
|
|
2985
|
-
const total = max ?? segments.reduce((sum, segment) => sum + segment.value, 0);
|
|
2986
|
-
const share = (value) => total > 0 ? `${value / total * 100}%` : "0%";
|
|
2987
|
-
const nameOf = (segment, index) => segment.label ?? segment.pigment ?? `Segment ${index + 1}`;
|
|
2988
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
2989
|
-
...rest,
|
|
2990
|
-
"data-scope": "progress-group",
|
|
2991
|
-
"data-part": "root",
|
|
2992
|
-
children: [/* @__PURE__ */ jsx("div", {
|
|
2993
|
-
"data-scope": "progress-group",
|
|
2994
|
-
"data-part": "track",
|
|
2995
|
-
children: segments.map((segment, index) => /* @__PURE__ */ jsx("div", {
|
|
2996
|
-
"data-scope": "progress-group",
|
|
2997
|
-
"data-part": "segment",
|
|
2998
|
-
"data-pigment": segment.pigment,
|
|
2999
|
-
role: "progressbar",
|
|
3000
|
-
"aria-valuenow": segment.value,
|
|
3001
|
-
"aria-valuemin": 0,
|
|
3002
|
-
"aria-valuemax": total,
|
|
3003
|
-
"aria-label": nameOf(segment, index),
|
|
3004
|
-
style: { inlineSize: share(segment.value) }
|
|
3005
|
-
}, index))
|
|
3006
|
-
}), showLegend ? /* @__PURE__ */ jsx("div", {
|
|
3007
|
-
"data-scope": "progress-group",
|
|
3008
|
-
"data-part": "legend",
|
|
3009
|
-
children: segments.map((segment, index) => /* @__PURE__ */ jsxs("div", {
|
|
3010
|
-
"data-scope": "progress-group",
|
|
3011
|
-
"data-part": "legend-item",
|
|
3012
|
-
"data-pigment": segment.pigment,
|
|
3013
|
-
children: [
|
|
3014
|
-
/* @__PURE__ */ jsx("span", {
|
|
3015
|
-
"data-scope": "progress-group",
|
|
3016
|
-
"data-part": "swatch",
|
|
3017
|
-
"aria-hidden": "true"
|
|
3018
|
-
}),
|
|
3019
|
-
/* @__PURE__ */ jsx("span", {
|
|
3020
|
-
"data-scope": "progress-group",
|
|
3021
|
-
"data-part": "legend-label",
|
|
3022
|
-
children: nameOf(segment, index)
|
|
3023
|
-
}),
|
|
3024
|
-
/* @__PURE__ */ jsx("span", {
|
|
3025
|
-
"data-scope": "progress-group",
|
|
3026
|
-
"data-part": "legend-value",
|
|
3027
|
-
children: String(segment.value)
|
|
3028
|
-
})
|
|
3029
|
-
]
|
|
3030
|
-
}, index))
|
|
3031
|
-
}) : null]
|
|
3032
|
-
});
|
|
3033
|
-
}
|
|
3034
|
-
injectComponentStyle("progress-group");
|
|
3035
|
-
//#endregion
|
|
3036
|
-
//#region src/components/qr-code/index.tsx
|
|
3037
|
-
/** Ark's QrCode, dressed in the paper-and-ink system: the pattern prints in
|
|
3038
|
-
* ink on the page, with an optional paper badge and a seal-cut download
|
|
3039
|
-
* control. The API is Ark's own — Root, Frame, Pattern, Overlay,
|
|
3040
|
-
* DownloadTrigger. */
|
|
3041
|
-
const QrCode = QrCode$1;
|
|
3042
|
-
injectComponentStyle("qr-code");
|
|
3043
|
-
//#endregion
|
|
3044
|
-
//#region src/components/radio-group/index.tsx
|
|
3045
|
-
/** Ark's RadioGroup, dressed in the paper-and-ink system: a column of
|
|
3046
|
-
* full-circle seals that fill flat with primary ink when chosen, the dot
|
|
3047
|
-
* punched through as paper. The API is Ark's own — Root, Label, Item,
|
|
3048
|
-
* ItemText, ItemControl, Indicator, ItemHiddenInput. */
|
|
3049
|
-
const RadioGroup = RadioGroup$1;
|
|
3050
|
-
injectComponentStyle("radio-group");
|
|
3051
|
-
//#endregion
|
|
3052
|
-
//#region src/components/rating-group/index.tsx
|
|
3053
|
-
/** Ark's RatingGroup, dressed in the paper-and-ink system: a row of quiet
|
|
3054
|
-
* seals whose glyphs take the primary pigment as they light up. The API is
|
|
3055
|
-
* Ark's own — Root, Label, Control, Item, HiddenInput (plus the Context and
|
|
3056
|
-
* ItemContext render helpers). */
|
|
3057
|
-
const RatingGroup = RatingGroup$1;
|
|
3058
|
-
injectComponentStyle("rating-group");
|
|
3059
|
-
//#endregion
|
|
3060
|
-
//#region src/components/scroll-area/index.tsx
|
|
3061
|
-
/** Ark's ScrollArea, dressed in the paper-and-ink system: native bars
|
|
3062
|
-
* give way to quiet ink lanes that surface on hover and scroll. The API
|
|
3063
|
-
* is Ark's own — Root, Viewport, Content, Scrollbar, Thumb, Corner. */
|
|
3064
|
-
const ScrollArea = ScrollArea$1;
|
|
3065
|
-
injectComponentStyle("scroll-area");
|
|
3066
|
-
//#endregion
|
|
3067
|
-
//#region src/components/segment-group/index.tsx
|
|
3068
|
-
/** Ark's SegmentGroup, dressed in the paper-and-ink system: a hairline tray
|
|
3069
|
-
* where one flat ink plate travels beneath the checked seal. The API is
|
|
3070
|
-
* Ark's own — Root, Label, Indicator, Item, ItemText, ItemControl,
|
|
3071
|
-
* ItemHiddenInput. */
|
|
3072
|
-
const SegmentGroup = SegmentGroup$1;
|
|
3073
|
-
injectComponentStyle("segment-group");
|
|
3074
|
-
//#endregion
|
|
3075
|
-
//#region src/components/select/index.tsx
|
|
3076
|
-
/** Ark's Select, dressed in the paper-and-ink system: the trigger is the
|
|
3077
|
-
* whole control and its list dissolves open as a paper vessel, the checked
|
|
3078
|
-
* row taking the flat ink fill. The API is Ark's own — Root, Label, Control,
|
|
3079
|
-
* Trigger, ValueText, Indicator, ClearTrigger, HiddenSelect, Positioner,
|
|
3080
|
-
* Content, List, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
|
|
3081
|
-
const Select = Select$1;
|
|
3082
|
-
injectComponentStyle("select");
|
|
3083
|
-
//#endregion
|
|
3084
|
-
//#region src/components/separator/index.tsx
|
|
3085
|
-
function Separator({ orientation = "horizontal", decorative = false, ...rest }) {
|
|
3086
|
-
return /* @__PURE__ */ jsx("div", {
|
|
3087
|
-
...rest,
|
|
3088
|
-
role: decorative ? "none" : "separator",
|
|
3089
|
-
"data-scope": "separator",
|
|
3090
|
-
"data-part": "root",
|
|
3091
|
-
"data-orientation": orientation,
|
|
3092
|
-
"aria-orientation": decorative ? void 0 : orientation
|
|
3093
|
-
});
|
|
3094
|
-
}
|
|
3095
|
-
injectComponentStyle("separator");
|
|
3096
|
-
//#endregion
|
|
3097
|
-
//#region src/components/signature-pad/index.tsx
|
|
3098
|
-
/** Ark's SignaturePad, dressed in the paper-and-ink system: a quiet paper
|
|
3099
|
-
* field with a guide hairline where ink — real ink strokes — is laid down.
|
|
3100
|
-
* The API is Ark's own — Root, Label, Control, Segment, SegmentPath, Guide,
|
|
3101
|
-
* ClearTrigger, HiddenInput, Context. */
|
|
3102
|
-
const SignaturePad = SignaturePad$1;
|
|
3103
|
-
injectComponentStyle("signature-pad");
|
|
3104
|
-
//#endregion
|
|
3105
|
-
//#region src/components/skeleton/index.tsx
|
|
3106
|
-
function Skeleton({ ...rest }) {
|
|
3107
|
-
return /* @__PURE__ */ jsx("div", {
|
|
3108
|
-
...rest,
|
|
3109
|
-
"data-scope": "skeleton",
|
|
3110
|
-
"data-part": "root"
|
|
3111
|
-
});
|
|
3112
|
-
}
|
|
3113
|
-
injectComponentStyle("skeleton");
|
|
3114
|
-
//#endregion
|
|
3115
|
-
//#region src/components/slider/index.tsx
|
|
3116
|
-
/** Ark's Slider, dressed in the paper-and-ink system: a recessed track the
|
|
3117
|
-
* primary ink runs along, a paper-seal thumb, and hairline tick markers.
|
|
3118
|
-
* The API is Ark's own — Root, Label, ValueText, Control, Track, Range,
|
|
3119
|
-
* Thumb, MarkerGroup, Marker, DraggingIndicator, HiddenInput. */
|
|
3120
|
-
const Slider = Slider$1;
|
|
3121
|
-
injectComponentStyle("slider");
|
|
3122
|
-
//#endregion
|
|
3123
|
-
//#region src/components/split-button/index.tsx
|
|
3124
|
-
/**
|
|
3125
|
-
* A primary action with its alternatives one seam away: the main button
|
|
3126
|
-
* fires `onClick`, the fitted arrow opens a paper vessel of the same
|
|
3127
|
-
* register whose entries report `onSelect` with their value. The arrow
|
|
3128
|
-
* is the menu machine's trigger grafting the button recipe — the
|
|
3129
|
-
* machine keeps the element (positioning, focus, `data-state`), the
|
|
3130
|
-
* button stylesheet's trigger register dresses it. The popup keeps the
|
|
3131
|
-
* menu parts untouched.
|
|
3132
|
-
*/
|
|
3133
|
-
function SplitButton({ label, items = [], variant = "solid", tone = "ink", size = "md", disabled = false, onClick, onSelect, ...rest }) {
|
|
3134
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
3135
|
-
...rest,
|
|
3136
|
-
"data-scope": "split-button",
|
|
3137
|
-
"data-part": "root",
|
|
3138
|
-
children: [/* @__PURE__ */ jsx(Button, {
|
|
3139
|
-
variant,
|
|
3140
|
-
tone,
|
|
3141
|
-
size,
|
|
3142
|
-
disabled,
|
|
3143
|
-
onClick,
|
|
3144
|
-
children: label
|
|
3145
|
-
}), /* @__PURE__ */ jsxs(Menu$1.Root, {
|
|
3146
|
-
positioning: { placement: "bottom-end" },
|
|
3147
|
-
children: [/* @__PURE__ */ jsx(Menu$1.Trigger, {
|
|
3148
|
-
asChild: true,
|
|
3149
|
-
children: /* @__PURE__ */ jsx("button", {
|
|
3150
|
-
type: "button",
|
|
3151
|
-
disabled,
|
|
3152
|
-
"data-variant": variant,
|
|
3153
|
-
"data-tone": tone,
|
|
3154
|
-
"data-size": size,
|
|
3155
|
-
"data-square": "true",
|
|
3156
|
-
"data-motion": "ink-ripple lit",
|
|
3157
|
-
"aria-label": "More actions",
|
|
3158
|
-
children: chevronDown$1()
|
|
3159
|
-
})
|
|
3160
|
-
}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { children: /* @__PURE__ */ jsx(Menu$1.Content, { children: items.map((entry) => /* @__PURE__ */ jsx(Menu$1.Item, {
|
|
3161
|
-
value: entry.value,
|
|
3162
|
-
disabled: entry.disabled,
|
|
3163
|
-
"data-danger": entry.danger ? "" : void 0,
|
|
3164
|
-
onSelect: () => onSelect?.(entry.value),
|
|
3165
|
-
children: /* @__PURE__ */ jsx(Menu$1.ItemText, { children: entry.label })
|
|
3166
|
-
}, entry.value)) }) }) })]
|
|
3167
|
-
})]
|
|
3168
|
-
});
|
|
3169
|
-
}
|
|
3170
|
-
/** One stroke pointing down: all a fitted dropdown arrow needs. */
|
|
3171
|
-
function chevronDown$1() {
|
|
3172
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
3173
|
-
width: 16,
|
|
3174
|
-
height: 16,
|
|
3175
|
-
viewBox: "0 0 24 24",
|
|
3176
|
-
fill: "none",
|
|
3177
|
-
stroke: "currentColor",
|
|
3178
|
-
strokeWidth: 1.75,
|
|
3179
|
-
strokeLinecap: "round",
|
|
3180
|
-
strokeLinejoin: "round",
|
|
3181
|
-
"aria-hidden": "true",
|
|
3182
|
-
children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
|
|
3183
|
-
});
|
|
3184
|
-
}
|
|
3185
|
-
injectComponentStyle("split-button");
|
|
3186
|
-
injectComponentStyle("menu");
|
|
3187
|
-
//#endregion
|
|
3188
|
-
//#region src/components/splitter/index.tsx
|
|
3189
|
-
/** Ark's Splitter, dressed in the paper-and-ink system: panels divide on
|
|
3190
|
-
* a hairline and a small paper-seal thumb answers the hand. The API is
|
|
3191
|
-
* Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
|
|
3192
|
-
const Splitter = Splitter$1;
|
|
3193
|
-
injectComponentStyle("splitter");
|
|
3194
|
-
//#endregion
|
|
3195
|
-
//#region src/components/stack/index.tsx
|
|
3196
|
-
/** Whitespace chosen by name: the named steps point at the space ramp so
|
|
3197
|
-
* siblings are held apart by one token, never by ad-hoc margins. */
|
|
3198
|
-
const gapVars = {
|
|
3199
|
-
none: "0",
|
|
3200
|
-
xs: "var(--bs-gap-xs)",
|
|
3201
|
-
sm: "var(--bs-gap-sm)",
|
|
3202
|
-
md: "var(--bs-gap-md)",
|
|
3203
|
-
lg: "var(--bs-gap-lg)",
|
|
3204
|
-
xl: "var(--bs-gap-xl)"
|
|
3205
|
-
};
|
|
3206
|
-
function Stack({ direction = "column", gap = "md", wrap = false, align, justify, ...rest }) {
|
|
3207
|
-
const style = {
|
|
3208
|
-
...rest.style,
|
|
3209
|
-
"--bs-stack-gap": gapVars[gap] ?? gapVars.md,
|
|
3210
|
-
alignItems: align,
|
|
3211
|
-
justifyContent: justify,
|
|
3212
|
-
flexWrap: wrap ? "wrap" : void 0
|
|
3213
|
-
};
|
|
3214
|
-
return /* @__PURE__ */ jsx("div", {
|
|
3215
|
-
...rest,
|
|
3216
|
-
style,
|
|
3217
|
-
"data-scope": "stack",
|
|
3218
|
-
"data-part": "root",
|
|
3219
|
-
"data-direction": direction
|
|
3220
|
-
});
|
|
3221
|
-
}
|
|
3222
|
-
injectComponentStyle("stack");
|
|
3223
|
-
//#endregion
|
|
3224
|
-
//#region src/components/page-header/index.tsx
|
|
3225
|
-
/** The page's face: an eyebrow whisper, a serif title, one line of
|
|
3226
|
-
* description, and the actions resting beside the title on the same
|
|
3227
|
-
* baseline. Heading groups title and actions; the rest compose below. */
|
|
3228
|
-
function part$3(name, tag) {
|
|
3229
|
-
const Tag = tag;
|
|
3230
|
-
const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
|
|
3231
|
-
...rest,
|
|
3232
|
-
"data-scope": "page-header",
|
|
3233
|
-
"data-part": name.toLowerCase(),
|
|
3234
|
-
children
|
|
3235
|
-
});
|
|
3236
|
-
Component.displayName = "PageHeader" + name;
|
|
3237
|
-
return Component;
|
|
3238
|
-
}
|
|
3239
|
-
const Root$2 = part$3("Root", "header");
|
|
3240
|
-
const Heading$1 = part$3("Heading", "div");
|
|
3241
|
-
const Eyebrow = part$3("Eyebrow", "p");
|
|
3242
|
-
const Title = part$3("Title", "h1");
|
|
3243
|
-
const Description$1 = part$3("Description", "p");
|
|
3244
|
-
const Actions = part$3("Actions", "div");
|
|
3245
|
-
const PageHeader = Object.assign(Root$2, {
|
|
3246
|
-
Root: Root$2,
|
|
3247
|
-
Heading: Heading$1,
|
|
3248
|
-
Eyebrow,
|
|
3249
|
-
Title,
|
|
3250
|
-
Description: Description$1,
|
|
3251
|
-
Actions
|
|
3252
|
-
});
|
|
3253
|
-
injectComponentStyle("page-header");
|
|
3254
|
-
//#endregion
|
|
3255
|
-
//#region src/components/spinner/index.tsx
|
|
3256
|
-
/** A wheel of waiting: one arc of ink turning about its center. Quiet by
|
|
3257
|
-
* default — it reports progress without claiming attention. */
|
|
3258
|
-
function Spinner({ size = "md", children, ...rest }) {
|
|
3259
|
-
return /* @__PURE__ */ jsxs("span", {
|
|
3260
|
-
...rest,
|
|
3261
|
-
role: "status",
|
|
3262
|
-
"aria-label": rest["aria-label"] ?? "Loading",
|
|
3263
|
-
"data-scope": "spinner",
|
|
3264
|
-
"data-part": "root",
|
|
3265
|
-
"data-size": size,
|
|
3266
|
-
children: [/* @__PURE__ */ jsxs("svg", {
|
|
3267
|
-
viewBox: "0 0 24 24",
|
|
3268
|
-
fill: "none",
|
|
3269
|
-
"aria-hidden": true,
|
|
3270
|
-
children: [/* @__PURE__ */ jsx("circle", {
|
|
3271
|
-
cx: 12,
|
|
3272
|
-
cy: 12,
|
|
3273
|
-
r: 9,
|
|
3274
|
-
stroke: "currentColor",
|
|
3275
|
-
strokeOpacity: .2,
|
|
3276
|
-
strokeWidth: 2.5
|
|
3277
|
-
}), /* @__PURE__ */ jsx("path", {
|
|
3278
|
-
d: "M21 12a9 9 0 0 0-9-9",
|
|
3279
|
-
stroke: "currentColor",
|
|
3280
|
-
strokeWidth: 2.5,
|
|
3281
|
-
strokeLinecap: "round"
|
|
3282
|
-
})]
|
|
3283
|
-
}), children]
|
|
3284
|
-
});
|
|
3285
|
-
}
|
|
3286
|
-
injectComponentStyle("spinner");
|
|
3287
|
-
//#endregion
|
|
3288
|
-
//#region src/components/stat/index.tsx
|
|
3289
|
-
function part$2(name, tag) {
|
|
3290
|
-
const Tag = tag;
|
|
3291
|
-
const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
|
|
3292
|
-
...rest,
|
|
3293
|
-
"data-scope": "stat",
|
|
3294
|
-
"data-part": name.toLowerCase(),
|
|
3295
|
-
children
|
|
3296
|
-
});
|
|
3297
|
-
Component.displayName = "Stat" + name;
|
|
3298
|
-
return Component;
|
|
3299
|
-
}
|
|
3300
|
-
const Root$1 = part$2("Root", "div");
|
|
3301
|
-
const Label$1 = part$2("Label", "p");
|
|
3302
|
-
const Value = part$2("Value", "div");
|
|
3303
|
-
const Description = part$2("Description", "p");
|
|
3304
|
-
/** The delta reads the direction in the fixed semantic pigments; an
|
|
3305
|
-
* explicit `data-direction` attribute on the consumer side still wins. */
|
|
3306
|
-
const Delta = ({ direction = "flat", children, ...rest }) => /* @__PURE__ */ jsx("span", {
|
|
3307
|
-
...rest,
|
|
3308
|
-
"data-scope": "stat",
|
|
3309
|
-
"data-part": "delta",
|
|
3310
|
-
"data-direction": rest["data-direction"] ?? direction,
|
|
3311
|
-
children
|
|
3312
|
-
});
|
|
3313
|
-
const Stat = Object.assign(Root$1, {
|
|
3314
|
-
Root: Root$1,
|
|
3315
|
-
Label: Label$1,
|
|
3316
|
-
Value,
|
|
3317
|
-
Delta,
|
|
3318
|
-
Description
|
|
3319
|
-
});
|
|
3320
|
-
injectComponentStyle("stat");
|
|
3321
|
-
//#endregion
|
|
3322
|
-
//#region src/components/steps/index.tsx
|
|
3323
|
-
/**
|
|
3324
|
-
* Steps — linear progress through a sequence.
|
|
3325
|
-
*
|
|
3326
|
-
* Parts: Root, List, Item, Trigger, Indicator, Separator, Content,
|
|
3327
|
-
* PrevTrigger, NextTrigger, Progress. Indicator and Separator carry
|
|
3328
|
-
* data-complete / data-current / data-incomplete.
|
|
3329
|
-
*/
|
|
3330
|
-
const Steps = Steps$1;
|
|
3331
|
-
injectComponentStyle("steps");
|
|
3332
|
-
//#endregion
|
|
3333
|
-
//#region src/components/swap/index.tsx
|
|
3334
|
-
/** Ark's Swap, dressed in the paper-and-ink system: two impressions
|
|
3335
|
-
* occupying one seal, the arriving one growing into place on the spring
|
|
3336
|
-
* while the departing one shrinks away. The API is Ark's own — Root,
|
|
3337
|
-
* Indicator (type="on" | "off"), RootProvider. */
|
|
3338
|
-
const Swap = Swap$1;
|
|
3339
|
-
injectComponentStyle("swap");
|
|
3340
|
-
//#endregion
|
|
3341
|
-
//#region src/components/switch/index.tsx
|
|
3342
|
-
/** Ark's Switch, dressed in the paper-and-ink system: a track that rests
|
|
3343
|
-
* in the inset shade of the paper and fills flat with primary ink when on,
|
|
3344
|
-
* the thumb sliding on the spring. The API is Ark's own — Root, Label,
|
|
3345
|
-
* Control, Thumb, HiddenInput. */
|
|
3346
|
-
const Switch = Switch$1;
|
|
3347
|
-
injectComponentStyle("switch");
|
|
3348
|
-
//#endregion
|
|
3349
|
-
//#region src/components/tabs/index.tsx
|
|
3350
|
-
/**
|
|
3351
|
-
* Tabs — tabbed navigation.
|
|
3352
|
-
*
|
|
3353
|
-
* Parts: Root, List, Trigger, Content, Indicator (machine-positioned ink
|
|
3354
|
-
* bar on the list rule).
|
|
3355
|
-
*/
|
|
3356
|
-
const Tabs = Tabs$1;
|
|
3357
|
-
injectComponentStyle("tabs");
|
|
3358
|
-
//#endregion
|
|
3359
|
-
//#region src/components/tags-input/index.tsx
|
|
3360
|
-
/** Ark's TagsInput, dressed in the paper-and-ink system: one field vessel
|
|
3361
|
-
* whose chips rest as quiet ink and lift only a tone when edited. The API
|
|
3362
|
-
* is Ark's own — Root, Label, Control, Input, ClearTrigger, Item,
|
|
3363
|
-
* ItemPreview, ItemText, ItemInput, ItemDeleteTrigger, HiddenInput,
|
|
3364
|
-
* Context. */
|
|
3365
|
-
const TagsInput = TagsInput$1;
|
|
3366
|
-
injectComponentStyle("tags-input");
|
|
3367
|
-
//#endregion
|
|
3368
|
-
//#region src/components/table/index.tsx
|
|
3369
|
-
/** The pagination bar's arrows — thin chevrons for the row of seals. */
|
|
3370
|
-
function pageGlyph(direction) {
|
|
3371
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
3372
|
-
viewBox: "0 0 24 24",
|
|
3373
|
-
width: 14,
|
|
3374
|
-
height: 14,
|
|
3375
|
-
fill: "none",
|
|
3376
|
-
stroke: "currentColor",
|
|
3377
|
-
strokeWidth: 2,
|
|
3378
|
-
strokeLinecap: "round",
|
|
3379
|
-
strokeLinejoin: "round",
|
|
3380
|
-
"aria-hidden": "true",
|
|
3381
|
-
children: /* @__PURE__ */ jsx("path", { d: direction === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
|
|
3382
|
-
});
|
|
3383
|
-
}
|
|
3384
|
-
/** The page-size select's pointing chevron. */
|
|
3385
|
-
function chevronDownGlyph() {
|
|
3386
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
3387
|
-
viewBox: "0 0 24 24",
|
|
3388
|
-
width: 14,
|
|
3389
|
-
height: 14,
|
|
3390
|
-
fill: "none",
|
|
3391
|
-
stroke: "currentColor",
|
|
3392
|
-
strokeWidth: 2.5,
|
|
3393
|
-
strokeLinecap: "round",
|
|
3394
|
-
strokeLinejoin: "round",
|
|
3395
|
-
"aria-hidden": "true",
|
|
3396
|
-
children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
|
|
3397
|
-
});
|
|
3398
|
-
}
|
|
3399
|
-
const SELECT_COL_ID = "__select";
|
|
3400
|
-
const SELECT_COL_WIDTH = 48;
|
|
3401
|
-
/** The list holding `id` and the index inside it, or null when absent. */
|
|
3402
|
-
function findNode(rows, id) {
|
|
3403
|
-
for (let index = 0; index < rows.length; index++) {
|
|
3404
|
-
const row = rows[index];
|
|
3405
|
-
if (String(row.id) === id) return {
|
|
3406
|
-
list: rows,
|
|
3407
|
-
index
|
|
3408
|
-
};
|
|
3409
|
-
if (row.subRows) {
|
|
3410
|
-
const hit = findNode(row.subRows, id);
|
|
3411
|
-
if (hit) return hit;
|
|
3412
|
-
}
|
|
3413
|
-
}
|
|
3414
|
-
return null;
|
|
3415
|
-
}
|
|
3416
|
-
/** True when `id` sits anywhere in the node's subtree — dropping a node
|
|
3417
|
-
* into its own descendants would orphan it. */
|
|
3418
|
-
function containsNode(node, id) {
|
|
3419
|
-
return !!node.subRows?.some((child) => String(child.id) === id || containsNode(child, id));
|
|
3420
|
-
}
|
|
3421
|
-
/** Rebuild every array along the path to `id`, leaving sibling branches
|
|
3422
|
-
* untouched by reference (TanStack's memoization keeps their rows). */
|
|
3423
|
-
function removeById(rows, id) {
|
|
3424
|
-
const next = [];
|
|
3425
|
-
for (const row of rows) {
|
|
3426
|
-
if (String(row.id) === id) continue;
|
|
3427
|
-
next.push(row.subRows ? {
|
|
3428
|
-
...row,
|
|
3429
|
-
subRows: removeById(row.subRows, id)
|
|
3430
|
-
} : row);
|
|
3431
|
-
}
|
|
3432
|
-
return next;
|
|
3433
|
-
}
|
|
3434
|
-
/** Rebuild the path to `id` and swap the node for `patch(node)`. */
|
|
3435
|
-
function replaceById(rows, id, patch) {
|
|
3436
|
-
return rows.map((row) => {
|
|
3437
|
-
if (String(row.id) === id) return patch(row);
|
|
3438
|
-
return row.subRows ? {
|
|
3439
|
-
...row,
|
|
3440
|
-
subRows: replaceById(row.subRows, id, patch)
|
|
3441
|
-
} : row;
|
|
3442
|
-
});
|
|
3443
|
-
}
|
|
3444
|
-
/** Toggle one drop-indicator attribute without rewriting it every event. */
|
|
3445
|
-
function mark(el, attr, on) {
|
|
3446
|
-
if (on) el.setAttribute(attr, "");
|
|
3447
|
-
else el.removeAttribute(attr);
|
|
3448
|
-
}
|
|
3449
|
-
function ChevronGlyph() {
|
|
3450
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
3451
|
-
viewBox: "0 0 24 24",
|
|
3452
|
-
fill: "none",
|
|
3453
|
-
stroke: "currentColor",
|
|
3454
|
-
strokeWidth: 2.5,
|
|
3455
|
-
strokeLinecap: "round",
|
|
3456
|
-
strokeLinejoin: "round",
|
|
3457
|
-
"aria-hidden": true,
|
|
3458
|
-
children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
|
|
3459
|
-
});
|
|
3460
|
-
}
|
|
3461
|
-
/** React keeps `indeterminate` off the JSX types; the DOM property is the
|
|
3462
|
-
* only channel, so the checkbox owns its ref. */
|
|
3463
|
-
function SelectBox(props) {
|
|
3464
|
-
const box = useRef(null);
|
|
3465
|
-
useLayoutEffect(() => {
|
|
3466
|
-
if (box.current) box.current.indeterminate = props.indeterminate;
|
|
3467
|
-
});
|
|
3468
|
-
return /* @__PURE__ */ jsx("input", {
|
|
3469
|
-
ref: box,
|
|
3470
|
-
type: "checkbox",
|
|
3471
|
-
checked: props.checked,
|
|
3472
|
-
"aria-label": props.label,
|
|
3473
|
-
onChange: props.onToggle
|
|
3474
|
-
});
|
|
3475
|
-
}
|
|
3476
|
-
function DataTable(rawProps) {
|
|
3477
|
-
const props = rawProps;
|
|
3478
|
-
const { selectable = false, sortable = true, filterable = false, showToolbar = true, tree = false, virtual: virtualProp = false, rowHeight = 40, paginated = false, pageSize = 10, pageSizeOptions = [
|
|
3479
|
-
10,
|
|
3480
|
-
20,
|
|
3481
|
-
50
|
|
3482
|
-
], globalFilterPlaceholder = "Filter rows", emptyText = "No rows", reorderable = false } = props;
|
|
3483
|
-
const merge = props.merge;
|
|
3484
|
-
const virtual = virtualProp && !merge;
|
|
3485
|
-
const mergeMode = !virtualProp && !!merge;
|
|
3486
|
-
/** Features follow the construction-time switches: sorting, selection,
|
|
3487
|
-
* expansion, pinning, and spanning are always part of the one-stop
|
|
3488
|
-
* shape; filtering and pagination ride their own render paths. Memoized
|
|
3489
|
-
* so the feature registry stays stable across renders. */
|
|
3490
|
-
const features = useMemo(() => tableFeatures({
|
|
3491
|
-
rowSortingFeature,
|
|
3492
|
-
sortedRowModel: createSortedRowModel(),
|
|
3493
|
-
sortFns: {
|
|
3494
|
-
alphanumeric: sortFn_alphanumeric,
|
|
3495
|
-
alphanumericCaseSensitive: sortFn_alphanumericCaseSensitive,
|
|
3496
|
-
basic: sortFn_basic,
|
|
3497
|
-
datetime: sortFn_datetime,
|
|
3498
|
-
text: sortFn_text,
|
|
3499
|
-
textCaseSensitive: sortFn_textCaseSensitive
|
|
3500
|
-
},
|
|
3501
|
-
rowSelectionFeature,
|
|
3502
|
-
rowExpandingFeature,
|
|
3503
|
-
expandedRowModel: createExpandedRowModel(),
|
|
3504
|
-
columnPinningFeature,
|
|
3505
|
-
columnOrderingFeature,
|
|
3506
|
-
columnSizingFeature,
|
|
3507
|
-
columnVisibilityFeature,
|
|
3508
|
-
cellSpanningFeature,
|
|
3509
|
-
...filterable ? {
|
|
3510
|
-
columnFilteringFeature,
|
|
3511
|
-
globalFilteringFeature,
|
|
3512
|
-
filteredRowModel: createFilteredRowModel(),
|
|
3513
|
-
filterFns: {
|
|
3514
|
-
arrIncludes: filterFn_arrIncludes,
|
|
3515
|
-
equals: filterFn_equals,
|
|
3516
|
-
includesString: filterFn_includesString,
|
|
3517
|
-
inDateRange: filterFn_inDateRange,
|
|
3518
|
-
inNumberRange: filterFn_inNumberRange,
|
|
3519
|
-
weakEquals: filterFn_weakEquals
|
|
3520
|
-
}
|
|
3521
|
-
} : {},
|
|
3522
|
-
...paginated ? {
|
|
3523
|
-
rowPaginationFeature,
|
|
3524
|
-
paginatedRowModel: createPaginatedRowModel()
|
|
3525
|
-
} : {}
|
|
3526
|
-
}), [filterable, paginated]);
|
|
3527
|
-
const columns = useMemo(() => {
|
|
3528
|
-
if (virtualProp && merge) console.warn("[DataTable] `virtual` and `merge` are mutually exclusive; merge wins.");
|
|
3529
|
-
const mergeIds = new Set(merge ?? []);
|
|
3530
|
-
const defId = (def) => def.id ?? ("accessorKey" in def ? String(def.accessorKey) : "");
|
|
3531
|
-
const narrowed = props.columns.map((def) => mergeIds.has(defId(def)) ? {
|
|
3532
|
-
...def,
|
|
3533
|
-
spanRows: true
|
|
3534
|
-
} : def);
|
|
3535
|
-
if (selectable) narrowed.unshift({
|
|
3536
|
-
id: SELECT_COL_ID,
|
|
3537
|
-
size: SELECT_COL_WIDTH,
|
|
3538
|
-
enableSorting: false,
|
|
3539
|
-
header: () => "",
|
|
3540
|
-
cell: () => ""
|
|
3541
|
-
});
|
|
3542
|
-
return narrowed;
|
|
3543
|
-
}, [
|
|
3544
|
-
props.columns,
|
|
3545
|
-
merge,
|
|
3546
|
-
selectable,
|
|
3547
|
-
features
|
|
3548
|
-
]);
|
|
3549
|
-
const table = useTable({
|
|
3550
|
-
features,
|
|
3551
|
-
columns,
|
|
3552
|
-
data: props.data,
|
|
3553
|
-
enableSorting: sortable,
|
|
3554
|
-
getRowId: (row) => String(row.id),
|
|
3555
|
-
getSubRows: (row) => row.subRows,
|
|
3556
|
-
autoResetExpanded: false,
|
|
3557
|
-
initialState: {
|
|
3558
|
-
...props.initialSorting ? { sorting: props.initialSorting } : {},
|
|
3559
|
-
...paginated ? { pagination: {
|
|
3560
|
-
pageIndex: 0,
|
|
3561
|
-
pageSize
|
|
3562
|
-
} } : {},
|
|
3563
|
-
...props.pinStart || props.pinEnd ? { columnPinning: {
|
|
3564
|
-
start: props.pinStart ?? [],
|
|
3565
|
-
end: props.pinEnd ?? []
|
|
3566
|
-
} } : {}
|
|
3567
|
-
}
|
|
3568
|
-
});
|
|
3569
|
-
const viewport = useRef(null);
|
|
3570
|
-
const rows = table.getRowModel().rows;
|
|
3571
|
-
/** The declared row height is the density-scale baseline; the live
|
|
3572
|
-
* scale comes off the document so the virtual window matches what CSS
|
|
3573
|
-
* actually renders. It is read once and re-read only when the density
|
|
3574
|
-
* or scene attribute moves — estimateSize runs on every scroll frame. */
|
|
3575
|
-
let densityScale = 1;
|
|
3576
|
-
const readDensityScale = () => {
|
|
3577
|
-
const value = Number(getComputedStyle(document.documentElement).getPropertyValue("--bs-density-scale"));
|
|
3578
|
-
densityScale = Number.isFinite(value) && value > 0 ? value : 1;
|
|
3579
|
-
};
|
|
3580
|
-
const virtualizer = useVirtualizer({
|
|
3581
|
-
count: rows.length,
|
|
3582
|
-
getScrollElement: () => viewport.current,
|
|
3583
|
-
estimateSize: () => rowHeight * densityScale,
|
|
3584
|
-
getItemKey: (index) => rows[index]?.id ?? index,
|
|
3585
|
-
overscan: 8
|
|
3586
|
-
});
|
|
3587
|
-
const [, rerender] = useReducer((count) => count + 1, 0);
|
|
3588
|
-
useEffect(() => {
|
|
3589
|
-
if (!virtual) return;
|
|
3590
|
-
readDensityScale();
|
|
3591
|
-
const observer = new MutationObserver(rerender);
|
|
3592
|
-
observer.observe(document.documentElement, {
|
|
3593
|
-
attributes: true,
|
|
3594
|
-
attributeFilter: ["data-density", "data-scene"]
|
|
3595
|
-
});
|
|
3596
|
-
return () => observer.disconnect();
|
|
3597
|
-
}, [virtual]);
|
|
3598
|
-
const virtualRows = virtualizer.getVirtualItems();
|
|
3599
|
-
const totalSize = virtualizer.getTotalSize();
|
|
3600
|
-
/** Column ids of the visible leaves, for pin-seam bookkeeping. */
|
|
3601
|
-
const leafIds = table.getAllLeafColumns().map((c) => c.id);
|
|
3602
|
-
const expandHostId = tree ? leafIds.find((id) => id !== SELECT_COL_ID) : void 0;
|
|
3603
|
-
/** Track list for every grid in the table; explicit sizes pin to px,
|
|
3604
|
-
* everything else flexes. */
|
|
3605
|
-
const colsTemplate = table.getAllLeafColumns().map((column) => {
|
|
3606
|
-
if (column.id === SELECT_COL_ID) return `${SELECT_COL_WIDTH}px`;
|
|
3607
|
-
const def = props.columns.find((d) => d.id === column.id || "accessorKey" in d && String(d.accessorKey) === column.id);
|
|
3608
|
-
return def?.size != null ? `${def.size}px` : def?.minSize != null ? `minmax(${def.minSize}px, 1fr)` : "1fr";
|
|
3609
|
-
}).join(" ");
|
|
3610
|
-
function pinAttrs(column) {
|
|
3611
|
-
const pinned = column.getIsPinned();
|
|
3612
|
-
const attrs = { "data-pinned": pinned || void 0 };
|
|
3613
|
-
if (!pinned) return attrs;
|
|
3614
|
-
const offset = pinned === "start" ? column.getStart("start") : column.getAfter("end");
|
|
3615
|
-
const index = leafIds.indexOf(column.id);
|
|
3616
|
-
const prev = index > 0 ? table.getColumn(leafIds[index - 1]) : void 0;
|
|
3617
|
-
const next = index < leafIds.length - 1 ? table.getColumn(leafIds[index + 1]) : void 0;
|
|
3618
|
-
attrs["data-last-pinned"] = pinned === "start" && next?.getIsPinned() !== "start" ? "" : void 0;
|
|
3619
|
-
attrs["data-first-pinned"] = pinned === "end" && prev?.getIsPinned() !== "end" ? "" : void 0;
|
|
3620
|
-
attrs.style = { "--pin-offset": `${offset}px` };
|
|
3621
|
-
return attrs;
|
|
3622
|
-
}
|
|
3623
|
-
const drag = useRef({
|
|
3624
|
-
col: null,
|
|
3625
|
-
row: null,
|
|
3626
|
-
lastColDrop: null,
|
|
3627
|
-
lastRowDrop: null
|
|
3628
|
-
});
|
|
3629
|
-
function clearColDrop() {
|
|
3630
|
-
const el = drag.current.lastColDrop;
|
|
3631
|
-
if (el) {
|
|
3632
|
-
el.removeAttribute("data-drop-before-col");
|
|
3633
|
-
el.removeAttribute("data-drop-after-col");
|
|
3634
|
-
drag.current.lastColDrop = null;
|
|
3635
|
-
}
|
|
3636
|
-
}
|
|
3637
|
-
function clearRowDrop() {
|
|
3638
|
-
const el = drag.current.lastRowDrop;
|
|
3639
|
-
if (el) {
|
|
3640
|
-
el.removeAttribute("data-drop-before");
|
|
3641
|
-
el.removeAttribute("data-drop-inside");
|
|
3642
|
-
el.removeAttribute("data-drop-after");
|
|
3643
|
-
el.style.removeProperty("--bs-drop-indent");
|
|
3644
|
-
drag.current.lastRowDrop = null;
|
|
3645
|
-
}
|
|
3646
|
-
}
|
|
3647
|
-
function onColDragStart(e) {
|
|
3648
|
-
drag.current.col = e.currentTarget.dataset.id;
|
|
3649
|
-
e.dataTransfer.effectAllowed = "move";
|
|
3650
|
-
e.dataTransfer.setData("text/plain", drag.current.col);
|
|
3651
|
-
e.currentTarget.setAttribute("data-dragging", "");
|
|
3652
|
-
}
|
|
3653
|
-
/** Header cells answer drops on either side of their midpoint; pinned
|
|
3654
|
-
* columns and the drag source themselves never light up. */
|
|
3655
|
-
function onColDragOver(column, e) {
|
|
3656
|
-
if (!drag.current.col || drag.current.col === column.id || column.getIsPinned()) return;
|
|
3657
|
-
e.preventDefault();
|
|
3658
|
-
e.dataTransfer.dropEffect = "move";
|
|
3659
|
-
const el = e.currentTarget;
|
|
3660
|
-
if (drag.current.lastColDrop !== el) clearColDrop();
|
|
3661
|
-
const box = el.getBoundingClientRect();
|
|
3662
|
-
const before = e.clientX < box.left + box.width / 2;
|
|
3663
|
-
mark(el, "data-drop-before-col", before);
|
|
3664
|
-
mark(el, "data-drop-after-col", !before);
|
|
3665
|
-
drag.current.lastColDrop = el;
|
|
3666
|
-
}
|
|
3667
|
-
function onColDragLeave(e) {
|
|
3668
|
-
if (e.currentTarget === drag.current.lastColDrop) clearColDrop();
|
|
3669
|
-
}
|
|
3670
|
-
function onColDrop(column, e) {
|
|
3671
|
-
e.preventDefault();
|
|
3672
|
-
if (!drag.current.col || drag.current.col === column.id) return;
|
|
3673
|
-
const box = e.currentTarget.getBoundingClientRect();
|
|
3674
|
-
const before = e.clientX < box.left + box.width / 2;
|
|
3675
|
-
const moved = drag.current.col;
|
|
3676
|
-
const state = table.atoms.columnOrder.get();
|
|
3677
|
-
const order = (state.length ? [...state] : table.getAllLeafColumns().map((c) => c.id)).filter((id) => id !== moved);
|
|
3678
|
-
const at = order.indexOf(column.id);
|
|
3679
|
-
order.splice(before ? at : at + 1, 0, moved);
|
|
3680
|
-
const selectAt = order.indexOf(SELECT_COL_ID);
|
|
3681
|
-
if (selectAt > 0) {
|
|
3682
|
-
order.splice(selectAt, 1);
|
|
3683
|
-
order.unshift(SELECT_COL_ID);
|
|
3684
|
-
}
|
|
3685
|
-
table.setColumnOrder(order);
|
|
3686
|
-
props.onColumnReorder?.(order);
|
|
3687
|
-
clearColDrop();
|
|
3688
|
-
}
|
|
3689
|
-
function onColDragEnd(e) {
|
|
3690
|
-
drag.current.col = null;
|
|
3691
|
-
e.currentTarget.removeAttribute("data-dragging");
|
|
3692
|
-
clearColDrop();
|
|
3693
|
-
}
|
|
3694
|
-
/** Row dragging rests while any view (sorting, filtering, pagination
|
|
3695
|
-
* past the first page) stands between the display order and the data
|
|
3696
|
-
* order — a drop there would lie about what it reordered. */
|
|
3697
|
-
const rowDraggable = reorderable && !mergeMode && table.atoms.sorting.get().length === 0 && !(filterable && (table.atoms.columnFilters.get().length || table.atoms.globalFilter.get())) && !(paginated && table.atoms.pagination.get().pageIndex !== 0);
|
|
3698
|
-
function onRowDragStart(row, e) {
|
|
3699
|
-
drag.current.row = String(row.id);
|
|
3700
|
-
e.dataTransfer.effectAllowed = "move";
|
|
3701
|
-
e.dataTransfer.setData("text/plain", drag.current.row);
|
|
3702
|
-
e.currentTarget.setAttribute("data-dragging", "");
|
|
3703
|
-
}
|
|
3704
|
-
/** Where a tree drop lands: the outer bands of the target row read as
|
|
3705
|
-
* sibling slots (40% each, so the insertion line answers the hand
|
|
3706
|
-
* everywhere and indents to the reference row's own depth — cross a
|
|
3707
|
-
* boundary and the level flips from the row above's to the row
|
|
3708
|
-
* below's); the narrow middle band reads as "make child". A node
|
|
3709
|
-
* never drops into its own subtree. */
|
|
3710
|
-
function rowZone(row, e) {
|
|
3711
|
-
const box = e.currentTarget.getBoundingClientRect();
|
|
3712
|
-
const pos = (e.clientY - box.top) / box.height;
|
|
3713
|
-
return pos < .4 ? "before" : pos > .6 ? "after" : "inside";
|
|
3714
|
-
}
|
|
3715
|
-
function onRowDragOver(row, e) {
|
|
3716
|
-
if (!drag.current.row || drag.current.row === String(row.id)) return;
|
|
3717
|
-
const el = e.currentTarget;
|
|
3718
|
-
let zone;
|
|
3719
|
-
if (tree) {
|
|
3720
|
-
const hit = findNode(props.data, drag.current.row);
|
|
3721
|
-
const dragged = hit?.list[hit.index];
|
|
3722
|
-
if (!dragged || containsNode(dragged, String(row.id))) return;
|
|
3723
|
-
zone = rowZone(row, e);
|
|
3724
|
-
} else {
|
|
3725
|
-
const box = el.getBoundingClientRect();
|
|
3726
|
-
zone = e.clientY - box.top < box.height / 2 ? "before" : "after";
|
|
3727
|
-
}
|
|
3728
|
-
e.preventDefault();
|
|
3729
|
-
e.dataTransfer.dropEffect = "move";
|
|
3730
|
-
if (drag.current.lastRowDrop !== el) clearRowDrop();
|
|
3731
|
-
mark(el, "data-drop-before", zone === "before");
|
|
3732
|
-
mark(el, "data-drop-inside", zone === "inside");
|
|
3733
|
-
mark(el, "data-drop-after", zone === "after");
|
|
3734
|
-
el.style.setProperty("--bs-drop-indent", String(tree ? row.depth : 0));
|
|
3735
|
-
drag.current.lastRowDrop = el;
|
|
3736
|
-
}
|
|
3737
|
-
function onRowDragLeave(e) {
|
|
3738
|
-
if (e.currentTarget === drag.current.lastRowDrop) clearRowDrop();
|
|
3739
|
-
}
|
|
3740
|
-
function onRowDrop(row, e) {
|
|
3741
|
-
e.preventDefault();
|
|
3742
|
-
if (!drag.current.row || drag.current.row === String(row.id)) return;
|
|
3743
|
-
const box = e.currentTarget.getBoundingClientRect();
|
|
3744
|
-
const targetId = String(row.id);
|
|
3745
|
-
const movedId = drag.current.row;
|
|
3746
|
-
if (tree) {
|
|
3747
|
-
const zone = rowZone(row, e);
|
|
3748
|
-
const hit = findNode(props.data, movedId);
|
|
3749
|
-
const dragged = hit?.list[hit.index];
|
|
3750
|
-
if (!dragged || containsNode(dragged, targetId)) return;
|
|
3751
|
-
let next = removeById(props.data, movedId);
|
|
3752
|
-
if (zone === "inside") next = replaceById(next, targetId, (node) => ({
|
|
3753
|
-
...node,
|
|
3754
|
-
subRows: [...node.subRows ?? [], dragged]
|
|
3755
|
-
}));
|
|
3756
|
-
else {
|
|
3757
|
-
const slot = findNode(next, targetId);
|
|
3758
|
-
if (!slot) return;
|
|
3759
|
-
slot.list.splice(slot.index + (zone === "after" ? 1 : 0), 0, dragged);
|
|
3760
|
-
}
|
|
3761
|
-
props.onRowReorder?.(next);
|
|
3762
|
-
} else {
|
|
3763
|
-
const pos = (e.clientY - box.top) / box.height;
|
|
3764
|
-
const data = props.data;
|
|
3765
|
-
const from = data.findIndex((r) => String(r.id) === movedId);
|
|
3766
|
-
const to = data.findIndex((r) => String(r.id) === targetId);
|
|
3767
|
-
if (from < 0 || to < 0) return;
|
|
3768
|
-
const next = [...data];
|
|
3769
|
-
const [movedRow] = next.splice(from, 1);
|
|
3770
|
-
const slot = to > from ? to - 1 : to;
|
|
3771
|
-
next.splice(pos < .5 ? slot : slot + 1, 0, movedRow);
|
|
3772
|
-
props.onRowReorder?.(next);
|
|
3773
|
-
}
|
|
3774
|
-
clearRowDrop();
|
|
3775
|
-
}
|
|
3776
|
-
function onRowDragEnd(e) {
|
|
3777
|
-
drag.current.row = null;
|
|
3778
|
-
e.currentTarget.removeAttribute("data-dragging");
|
|
3779
|
-
clearRowDrop();
|
|
3780
|
-
}
|
|
3781
|
-
function renderCell(cell, row) {
|
|
3782
|
-
const column = cell.column;
|
|
3783
|
-
if (cell.getIsCovered()) return null;
|
|
3784
|
-
const isExpandHost = column.id === expandHostId;
|
|
3785
|
-
const pin = pinAttrs(column);
|
|
3786
|
-
const style = { ...pin.style };
|
|
3787
|
-
delete pin.style;
|
|
3788
|
-
const rowSpan = cell.getRowSpan();
|
|
3789
|
-
if (rowSpan > 1) style.gridRow = `span ${rowSpan}`;
|
|
3790
|
-
const spanned = rowSpan > 1 ? { "data-spanned": "" } : {};
|
|
3791
|
-
let content;
|
|
3792
|
-
if (column.id === SELECT_COL_ID) content = /* @__PURE__ */ jsx(SelectBox, {
|
|
3793
|
-
checked: row.getIsSelected(),
|
|
3794
|
-
indeterminate: false,
|
|
3795
|
-
onToggle: () => row.toggleSelected(!row.getIsSelected()),
|
|
3796
|
-
label: "Select row"
|
|
3797
|
-
});
|
|
3798
|
-
else if (isExpandHost) content = /* @__PURE__ */ jsxs("div", {
|
|
3799
|
-
"data-scope": "table",
|
|
3800
|
-
"data-part": "cell-main",
|
|
3801
|
-
style: { "--bs-table-depth": String(row.depth) },
|
|
3802
|
-
children: [/* @__PURE__ */ jsx("button", {
|
|
3803
|
-
type: "button",
|
|
3804
|
-
"data-scope": "table",
|
|
3805
|
-
"data-part": "expander",
|
|
3806
|
-
"data-expanded": row.getIsExpanded() || void 0,
|
|
3807
|
-
"data-leaf": !row.getCanExpand() || void 0,
|
|
3808
|
-
"aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
|
|
3809
|
-
onClick: () => row.toggleExpanded(),
|
|
3810
|
-
children: /* @__PURE__ */ jsx(ChevronGlyph, {})
|
|
3811
|
-
}), /* @__PURE__ */ jsx(FlexRender, { cell })]
|
|
3812
|
-
});
|
|
3813
|
-
else content = /* @__PURE__ */ jsx(FlexRender, { cell });
|
|
3814
|
-
return /* @__PURE__ */ jsx("div", {
|
|
3815
|
-
role: "cell",
|
|
3816
|
-
"data-scope": "table",
|
|
3817
|
-
"data-part": "cell",
|
|
3818
|
-
"data-numeric": column.columnDef.meta?.numeric ? "" : void 0,
|
|
3819
|
-
...spanned,
|
|
3820
|
-
...pin,
|
|
3821
|
-
style,
|
|
3822
|
-
children: content
|
|
3823
|
-
}, column.id);
|
|
3824
|
-
}
|
|
3825
|
-
function renderHeaderCell(header) {
|
|
3826
|
-
const column = header.column;
|
|
3827
|
-
const sorted = column.getIsSorted();
|
|
3828
|
-
const canSort = column.getCanSort();
|
|
3829
|
-
const canFilter = filterable && column.getCanFilter();
|
|
3830
|
-
const canDrag = !!reorderable && column.id !== SELECT_COL_ID && !column.getIsPinned();
|
|
3831
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
3832
|
-
role: "columnheader",
|
|
3833
|
-
"data-scope": "table",
|
|
3834
|
-
"data-part": "header-cell",
|
|
3835
|
-
"data-sortable": canSort || void 0,
|
|
3836
|
-
"data-sort": sorted || void 0,
|
|
3837
|
-
"data-numeric": column.columnDef.meta?.numeric ? "" : void 0,
|
|
3838
|
-
"data-draggable": canDrag || void 0,
|
|
3839
|
-
"data-id": column.id,
|
|
3840
|
-
draggable: canDrag || void 0,
|
|
3841
|
-
"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
|
|
3842
|
-
...pinAttrs(column),
|
|
3843
|
-
onClick: canSort ? () => column.toggleSorting() : void 0,
|
|
3844
|
-
onDragStart: canDrag ? onColDragStart : void 0,
|
|
3845
|
-
onDragOver: canDrag ? (e) => onColDragOver(column, e) : void 0,
|
|
3846
|
-
onDragLeave: canDrag ? onColDragLeave : void 0,
|
|
3847
|
-
onDrop: canDrag ? (e) => onColDrop(column, e) : void 0,
|
|
3848
|
-
onDragEnd: canDrag ? onColDragEnd : void 0,
|
|
3849
|
-
children: [header.isPlaceholder || header.column.columnDef.header === "" ? null : /* @__PURE__ */ jsx(FlexRender, { header }), canFilter ? /* @__PURE__ */ jsx("input", {
|
|
3850
|
-
type: "text",
|
|
3851
|
-
"data-scope": "table",
|
|
3852
|
-
"data-part": "header-filter",
|
|
3853
|
-
"aria-label": `Filter ${column.id}`,
|
|
3854
|
-
value: column.getFilterValue() ?? "",
|
|
3855
|
-
placeholder: "Filter",
|
|
3856
|
-
draggable: false,
|
|
3857
|
-
onClick: (e) => e.stopPropagation(),
|
|
3858
|
-
onDragStart: (e) => e.stopPropagation(),
|
|
3859
|
-
onInput: (e) => column.setFilterValue(e.target.value)
|
|
3860
|
-
}) : null]
|
|
3861
|
-
}, column.id);
|
|
3862
|
-
}
|
|
3863
|
-
function renderRow(row, virtualIndex) {
|
|
3864
|
-
const style = {};
|
|
3865
|
-
if (virtual) {
|
|
3866
|
-
const item = virtualRows[virtualIndex];
|
|
3867
|
-
style.position = "absolute";
|
|
3868
|
-
style.insetInlineStart = "0";
|
|
3869
|
-
style.inlineSize = "100%";
|
|
3870
|
-
style.transform = `translateY(${item.start}px)`;
|
|
3871
|
-
style.blockSize = `${item.size}px`;
|
|
3872
|
-
}
|
|
3873
|
-
return /* @__PURE__ */ jsx("div", {
|
|
3874
|
-
role: "row",
|
|
3875
|
-
"data-scope": "table",
|
|
3876
|
-
"data-part": "row",
|
|
3877
|
-
"data-selected": row.getIsSelected() || void 0,
|
|
3878
|
-
draggable: rowDraggable || void 0,
|
|
3879
|
-
onDragStart: rowDraggable ? (e) => onRowDragStart(row, e) : void 0,
|
|
3880
|
-
onDragOver: rowDraggable ? (e) => onRowDragOver(row, e) : void 0,
|
|
3881
|
-
onDragLeave: rowDraggable ? onRowDragLeave : void 0,
|
|
3882
|
-
onDrop: rowDraggable ? (e) => onRowDrop(row, e) : void 0,
|
|
3883
|
-
onDragEnd: rowDraggable ? onRowDragEnd : void 0,
|
|
3884
|
-
style,
|
|
3885
|
-
children: row.getVisibleCells().map((cell) => renderCell(cell, row))
|
|
3886
|
-
}, row.id);
|
|
3887
|
-
}
|
|
3888
|
-
const header = /* @__PURE__ */ jsx("div", {
|
|
3889
|
-
role: "rowgroup",
|
|
3890
|
-
"data-scope": "table",
|
|
3891
|
-
"data-part": "header",
|
|
3892
|
-
children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx("div", {
|
|
3893
|
-
role: "row",
|
|
3894
|
-
"data-scope": "table",
|
|
3895
|
-
"data-part": "row",
|
|
3896
|
-
children: group.headers.map((header) => {
|
|
3897
|
-
const column = header.column;
|
|
3898
|
-
if (column.id === SELECT_COL_ID) {
|
|
3899
|
-
const all = table.getIsAllRowsSelected();
|
|
3900
|
-
return /* @__PURE__ */ jsx("div", {
|
|
3901
|
-
role: "columnheader",
|
|
3902
|
-
"data-scope": "table",
|
|
3903
|
-
"data-part": "header-cell",
|
|
3904
|
-
...pinAttrs(column),
|
|
3905
|
-
children: /* @__PURE__ */ jsx(SelectBox, {
|
|
3906
|
-
checked: all,
|
|
3907
|
-
indeterminate: table.getIsSomeRowsSelected() && !all,
|
|
3908
|
-
onToggle: () => table.toggleAllRowsSelected(!all),
|
|
3909
|
-
label: "Select all rows"
|
|
3910
|
-
})
|
|
3911
|
-
}, column.id);
|
|
3912
|
-
}
|
|
3913
|
-
return renderHeaderCell(header);
|
|
3914
|
-
})
|
|
3915
|
-
}, group.id))
|
|
3916
|
-
});
|
|
3917
|
-
const body = /* @__PURE__ */ jsxs("div", {
|
|
3918
|
-
role: "rowgroup",
|
|
3919
|
-
"data-scope": "table",
|
|
3920
|
-
"data-part": "body",
|
|
3921
|
-
"data-merge": mergeMode || void 0,
|
|
3922
|
-
style: virtual ? {
|
|
3923
|
-
position: "relative",
|
|
3924
|
-
blockSize: `${totalSize}px`
|
|
3925
|
-
} : void 0,
|
|
3926
|
-
children: [virtual ? virtualRows.map((_, index) => renderRow(rows[index], index)) : rows.map((row) => renderRow(row, -1)), rows.length === 0 ? /* @__PURE__ */ jsx("div", {
|
|
3927
|
-
"data-scope": "table",
|
|
3928
|
-
"data-part": "empty",
|
|
3929
|
-
children: emptyText
|
|
3930
|
-
}) : null]
|
|
3931
|
-
});
|
|
3932
|
-
const hasFooters = table.getFooterGroups().some((group) => group.headers.some((header) => header.column.columnDef.footer));
|
|
3933
|
-
const footer = props.stickyFooter && hasFooters ? /* @__PURE__ */ jsx("div", {
|
|
3934
|
-
role: "rowgroup",
|
|
3935
|
-
"data-scope": "table",
|
|
3936
|
-
"data-part": "footer",
|
|
3937
|
-
children: table.getFooterGroups().map((group) => /* @__PURE__ */ jsx("div", {
|
|
3938
|
-
role: "row",
|
|
3939
|
-
"data-scope": "table",
|
|
3940
|
-
"data-part": "row",
|
|
3941
|
-
children: group.headers.map((header) => /* @__PURE__ */ jsx("div", {
|
|
3942
|
-
role: "columnheader",
|
|
3943
|
-
"data-scope": "table",
|
|
3944
|
-
"data-part": "footer-cell",
|
|
3945
|
-
"data-numeric": header.column.columnDef.meta?.numeric ? "" : void 0,
|
|
3946
|
-
...pinAttrs(header.column),
|
|
3947
|
-
children: header.isPlaceholder ? null : /* @__PURE__ */ jsx(FlexRender, { footer: header })
|
|
3948
|
-
}, header.column.id))
|
|
3949
|
-
}, group.id))
|
|
3950
|
-
}) : null;
|
|
3951
|
-
/** The bar only exists when the pagination feature is registered; its
|
|
3952
|
-
* state reads stay inside this branch. */
|
|
3953
|
-
const paginationBar = paginated ? (() => {
|
|
3954
|
-
const pagination = table.atoms.pagination.get();
|
|
3955
|
-
const rowCount = table.getRowCount();
|
|
3956
|
-
const sizeItems = createListCollection({ items: pageSizeOptions.map((size) => ({
|
|
3957
|
-
label: `${size} / page`,
|
|
3958
|
-
value: String(size)
|
|
3959
|
-
})) });
|
|
3960
|
-
const pageSize = /* @__PURE__ */ jsxs(Select.Root, {
|
|
3961
|
-
collection: sizeItems,
|
|
3962
|
-
value: [String(pagination.pageSize)],
|
|
3963
|
-
onValueChange: (details) => table.setPageSize(Number(details.value[0])),
|
|
3964
|
-
positioning: { placement: "top-start" },
|
|
3965
|
-
children: [/* @__PURE__ */ jsx(Select.Control, { children: /* @__PURE__ */ jsxs(Select.Trigger, {
|
|
3966
|
-
"aria-label": "Rows per page",
|
|
3967
|
-
children: [/* @__PURE__ */ jsx(Select.ValueText, {}), /* @__PURE__ */ jsx(Select.Indicator, { children: chevronDownGlyph() })]
|
|
3968
|
-
}) }), /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Content, { children: sizeItems.items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {
|
|
3969
|
-
item,
|
|
3970
|
-
children: [/* @__PURE__ */ jsx(Select.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select.ItemIndicator, { children: "✓" })]
|
|
3971
|
-
}, item.value)) }) })]
|
|
3972
|
-
});
|
|
3973
|
-
const pager = /* @__PURE__ */ jsxs(Pagination.Root, {
|
|
3974
|
-
count: rowCount,
|
|
3975
|
-
pageSize: pagination.pageSize,
|
|
3976
|
-
page: pagination.pageIndex + 1,
|
|
3977
|
-
onPageChange: (details) => table.setPageIndex(details.page - 1),
|
|
3978
|
-
children: [
|
|
3979
|
-
/* @__PURE__ */ jsx(Pagination.PrevTrigger, { children: pageGlyph("start") }),
|
|
3980
|
-
/* @__PURE__ */ jsx(Pagination.Context, { children: (scope) => scope.pages.map((page, index) => page.type === "ellipsis" ? /* @__PURE__ */ jsx(Pagination.Ellipsis, { index }, `e${index}`) : /* @__PURE__ */ jsx(Pagination.Item, {
|
|
3981
|
-
type: "page",
|
|
3982
|
-
value: page.value,
|
|
3983
|
-
children: String(page.value)
|
|
3984
|
-
}, page.value)) }),
|
|
3985
|
-
/* @__PURE__ */ jsx(Pagination.NextTrigger, { children: pageGlyph("end") })
|
|
3986
|
-
]
|
|
3987
|
-
});
|
|
3988
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
3989
|
-
"data-scope": "table",
|
|
3990
|
-
"data-part": "pagination",
|
|
3991
|
-
children: [/* @__PURE__ */ jsxs("span", {
|
|
3992
|
-
"data-scope": "table",
|
|
3993
|
-
"data-part": "page-status",
|
|
3994
|
-
children: [rowCount, " rows"]
|
|
3995
|
-
}), /* @__PURE__ */ jsxs("div", {
|
|
3996
|
-
"data-scope": "table",
|
|
3997
|
-
"data-part": "page-nav",
|
|
3998
|
-
children: [pageSize, pager]
|
|
3999
|
-
})]
|
|
4000
|
-
});
|
|
4001
|
-
})() : null;
|
|
4002
|
-
const toolbar = filterable && showToolbar ? /* @__PURE__ */ jsx("div", {
|
|
4003
|
-
"data-scope": "table",
|
|
4004
|
-
"data-part": "toolbar",
|
|
4005
|
-
children: /* @__PURE__ */ jsx("input", {
|
|
4006
|
-
type: "search",
|
|
4007
|
-
"data-scope": "table",
|
|
4008
|
-
"data-part": "global-filter",
|
|
4009
|
-
"aria-label": "Filter all columns",
|
|
4010
|
-
placeholder: globalFilterPlaceholder,
|
|
4011
|
-
value: table.atoms.globalFilter.get() ?? "",
|
|
4012
|
-
onInput: (e) => table.setGlobalFilter(e.target.value)
|
|
4013
|
-
})
|
|
4014
|
-
}) : null;
|
|
4015
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
4016
|
-
"data-scope": "table",
|
|
4017
|
-
"data-part": "root",
|
|
4018
|
-
"data-reorderable": reorderable || void 0,
|
|
4019
|
-
style: {
|
|
4020
|
-
"--bs-table-row-height": `calc(${rowHeight}px * var(--bs-density-scale, 1))`,
|
|
4021
|
-
...props.style
|
|
4022
|
-
},
|
|
4023
|
-
children: [
|
|
4024
|
-
toolbar,
|
|
4025
|
-
/* @__PURE__ */ jsx("div", {
|
|
4026
|
-
"data-scope": "table",
|
|
4027
|
-
"data-part": "viewport",
|
|
4028
|
-
ref: viewport,
|
|
4029
|
-
children: /* @__PURE__ */ jsxs("div", {
|
|
4030
|
-
role: "table",
|
|
4031
|
-
"data-scope": "table",
|
|
4032
|
-
"data-part": "table",
|
|
4033
|
-
style: { "--bs-table-cols": colsTemplate },
|
|
4034
|
-
children: [
|
|
4035
|
-
header,
|
|
4036
|
-
body,
|
|
4037
|
-
footer
|
|
4038
|
-
]
|
|
4039
|
-
})
|
|
4040
|
-
}),
|
|
4041
|
-
paginationBar
|
|
4042
|
-
]
|
|
4043
|
-
});
|
|
4044
|
-
}
|
|
4045
|
-
injectComponentStyle("table");
|
|
4046
|
-
//#endregion
|
|
4047
|
-
//#region src/components/textarea/index.tsx
|
|
4048
|
-
function Textarea({ value, invalid = false, onValueChange, ...rest }) {
|
|
4049
|
-
const field = useFieldContext();
|
|
4050
|
-
const fieldProps = field?.getTextareaProps() ?? {};
|
|
4051
|
-
return /* @__PURE__ */ jsx("textarea", {
|
|
4052
|
-
...fieldProps,
|
|
4053
|
-
...rest,
|
|
4054
|
-
...value !== void 0 ? { value } : {},
|
|
4055
|
-
"data-scope": "textarea",
|
|
4056
|
-
"data-part": "root",
|
|
4057
|
-
"data-invalid": invalid || field?.invalid ? "" : void 0,
|
|
4058
|
-
onChange: (event) => onValueChange?.(event.target.value)
|
|
4059
|
-
});
|
|
4060
|
-
}
|
|
4061
|
-
injectComponentStyle("textarea");
|
|
4062
|
-
//#endregion
|
|
4063
|
-
//#region src/components/timeline/index.tsx
|
|
4064
|
-
/** A line of moments: Root is the ordered thread, Item one moment on it,
|
|
4065
|
-
* Marker the point where the thread passes, Content what the moment
|
|
4066
|
-
* holds. The hairline between markers is drawn by the stylesheet. */
|
|
4067
|
-
function part$1(name, tag) {
|
|
4068
|
-
const Tag = tag;
|
|
4069
|
-
const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
|
|
4070
|
-
...rest,
|
|
4071
|
-
"data-scope": "timeline",
|
|
4072
|
-
"data-part": name.toLowerCase(),
|
|
4073
|
-
children
|
|
4074
|
-
});
|
|
4075
|
-
Component.displayName = "Timeline" + name;
|
|
4076
|
-
return Component;
|
|
4077
|
-
}
|
|
4078
|
-
const Root = part$1("Root", "ol");
|
|
4079
|
-
const Item = part$1("Item", "li");
|
|
4080
|
-
const Marker = part$1("Marker", "span");
|
|
4081
|
-
const Content = part$1("Content", "div");
|
|
4082
|
-
const Timeline = Object.assign(Root, {
|
|
4083
|
-
Root,
|
|
4084
|
-
Item,
|
|
4085
|
-
Marker,
|
|
4086
|
-
Content
|
|
4087
|
-
});
|
|
4088
|
-
injectComponentStyle("timeline");
|
|
4089
|
-
//#endregion
|
|
4090
|
-
//#region src/components/timer/index.tsx
|
|
4091
|
-
/** Ark's Timer, dressed in the paper-and-ink system: monospaced digits
|
|
4092
|
-
* that never jitter, quiet action triggers on the control recipe. The API
|
|
4093
|
-
* is Ark's own — Root, Area, Control, Item, Separator, ActionTrigger,
|
|
4094
|
-
* Context. Unit labels are plain content, not a machine part. */
|
|
4095
|
-
const Timer = Timer$1;
|
|
4096
|
-
injectComponentStyle("timer");
|
|
4097
|
-
//#endregion
|
|
4098
|
-
//#region src/components/toast/index.tsx
|
|
4099
|
-
/** Ark's Toast, dressed in the paper-and-ink system: each notice rides the
|
|
4100
|
-
* popup vessel while a pigment accents the title by type, and the machine's
|
|
4101
|
-
* translate variables carry the slide. The API is Ark's own — Toaster,
|
|
4102
|
-
* Root, Title, Description, ActionTrigger, CloseTrigger, plus
|
|
4103
|
-
* createToaster. */
|
|
4104
|
-
const Toast = Toast$1;
|
|
4105
|
-
const Toaster = Toaster$1;
|
|
4106
|
-
injectComponentStyle("toast");
|
|
4107
|
-
//#endregion
|
|
4108
|
-
//#region src/components/toc/index.tsx
|
|
4109
|
-
/** Ark's Toc, dressed in the paper-and-ink system: a quiet rail of links
|
|
4110
|
-
* beside the scroll, one stroke of primary ink marking where the reader
|
|
4111
|
-
* stands. The API is Ark's own — Root, Title, List, Item, Link, Indicator. */
|
|
4112
|
-
const Toc = Toc$1;
|
|
4113
|
-
injectComponentStyle("toc");
|
|
4114
|
-
//#endregion
|
|
4115
|
-
//#region src/components/toggle/index.tsx
|
|
4116
|
-
/** Ark's Toggle, dressed in the paper-and-ink system: a standalone seal that
|
|
4117
|
-
* settles into the flat ink fill while pressed on. The API is Ark's own —
|
|
4118
|
-
* Root, Indicator. */
|
|
4119
|
-
const Toggle = Toggle$1;
|
|
4120
|
-
injectComponentStyle("toggle");
|
|
4121
|
-
//#endregion
|
|
4122
|
-
//#region src/components/typography/index.tsx
|
|
4123
|
-
/** The typographic voices, named so prose can ask for one: display and
|
|
4124
|
-
* heading ride the song-serif, the rest ride the hei. Nothing here is
|
|
4125
|
-
* decorative — hierarchy is size, weight, and space. */
|
|
4126
|
-
function part(name, tag) {
|
|
4127
|
-
const Tag = tag;
|
|
4128
|
-
const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
|
|
4129
|
-
...rest,
|
|
4130
|
-
"data-scope": "typography",
|
|
4131
|
-
"data-part": name.toLowerCase(),
|
|
4132
|
-
children
|
|
4133
|
-
});
|
|
4134
|
-
Component.displayName = "Typography" + name;
|
|
4135
|
-
return Component;
|
|
4136
|
-
}
|
|
4137
|
-
const Display = part("Display", "p");
|
|
4138
|
-
const Heading = part("Heading", "p");
|
|
4139
|
-
const Lead = part("Lead", "p");
|
|
4140
|
-
const Body = part("Body", "p");
|
|
4141
|
-
const Muted = part("Muted", "p");
|
|
4142
|
-
const Label = part("Label", "p");
|
|
4143
|
-
const Typography = Object.assign(Display, {
|
|
4144
|
-
Display,
|
|
4145
|
-
Heading,
|
|
4146
|
-
Lead,
|
|
4147
|
-
Body,
|
|
4148
|
-
Muted,
|
|
4149
|
-
Label
|
|
4150
|
-
});
|
|
4151
|
-
injectComponentStyle("typography");
|
|
4152
|
-
//#endregion
|
|
4153
|
-
//#region src/components/toggle-group/index.tsx
|
|
4154
|
-
/** Ark's ToggleGroup, dressed in the paper-and-ink system: a hairline tray
|
|
4155
|
-
* of quiet seals where the pressed item takes the flat ink fill. The API is
|
|
4156
|
-
* Ark's own — Root, Item. */
|
|
4157
|
-
const ToggleGroup = ToggleGroup$1;
|
|
4158
|
-
injectComponentStyle("toggle-group");
|
|
4159
|
-
//#endregion
|
|
4160
|
-
//#region src/components/tooltip/index.tsx
|
|
4161
|
-
/** Ark's Tooltip, dressed in the paper-and-ink system: the smallest
|
|
4162
|
-
* vessel — a tight chip of ink that dissolves in over its anchor. The
|
|
4163
|
-
* API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
|
|
4164
|
-
const Tooltip = Tooltip$1;
|
|
4165
|
-
injectComponentStyle("tooltip");
|
|
4166
|
-
//#endregion
|
|
4167
|
-
//#region src/components/tour/index.tsx
|
|
4168
|
-
/** Ark's Tour, dressed in the paper-and-ink system: a dimmed page where
|
|
4169
|
-
* the spotlight alone keeps the focus halo, and the anchored card rides
|
|
4170
|
-
* the shared popup vessel. The API is Ark's own — Root, Backdrop,
|
|
4171
|
-
* Spotlight, Positioner, Content, Arrow, ArrowTip, Title, Description,
|
|
4172
|
-
* ProgressText, Control, Actions, ActionTrigger, CloseTrigger, plus
|
|
4173
|
-
* useTour. */
|
|
4174
|
-
const Tour = Tour$1;
|
|
4175
|
-
injectComponentStyle("tour");
|
|
4176
|
-
//#endregion
|
|
4177
|
-
//#region src/components/transfer/index.tsx
|
|
4178
|
-
const checkGlyph = /* @__PURE__ */ jsx("svg", {
|
|
4179
|
-
viewBox: "0 0 24 24",
|
|
4180
|
-
fill: "none",
|
|
4181
|
-
stroke: "currentColor",
|
|
4182
|
-
strokeWidth: 3,
|
|
4183
|
-
strokeLinecap: "round",
|
|
4184
|
-
strokeLinejoin: "round",
|
|
4185
|
-
"aria-hidden": "true",
|
|
4186
|
-
children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
|
|
4187
|
-
});
|
|
4188
|
-
function arrowGlyph(direction) {
|
|
4189
|
-
return /* @__PURE__ */ jsx("svg", {
|
|
4190
|
-
viewBox: "0 0 24 24",
|
|
4191
|
-
fill: "none",
|
|
4192
|
-
stroke: "currentColor",
|
|
4193
|
-
strokeWidth: 1.75,
|
|
4194
|
-
strokeLinecap: "round",
|
|
4195
|
-
strokeLinejoin: "round",
|
|
4196
|
-
"aria-hidden": "true",
|
|
4197
|
-
children: /* @__PURE__ */ jsx("path", { d: direction === "right" ? "M5 12h14m-6-6 6 6-6 6" : "M19 12H5m6-6-6 6 6 6" })
|
|
4198
|
-
});
|
|
4199
|
-
}
|
|
4200
|
-
/**
|
|
4201
|
-
* Two ledgers and a crossing: items sit in the source column until the
|
|
4202
|
-
* reader checks them and walks them across — and back, the same way.
|
|
4203
|
-
* `value` is the target column's value list; everything else in `data`
|
|
4204
|
-
* stays on the left. `searchable` adds a filter line to each panel.
|
|
4205
|
-
*/
|
|
4206
|
-
function Transfer({ value = [], data, titles = ["Source", "Target"], searchable = false, disabled = false, onValueChange, ...rest }) {
|
|
4207
|
-
const [checkedSource, setCheckedSource] = useState(() => /* @__PURE__ */ new Set());
|
|
4208
|
-
const [checkedTarget, setCheckedTarget] = useState(() => /* @__PURE__ */ new Set());
|
|
4209
|
-
const [sourceQuery, setSourceQuery] = useState("");
|
|
4210
|
-
const [targetQuery, setTargetQuery] = useState("");
|
|
4211
|
-
const target = new Set(value);
|
|
4212
|
-
function panelItems(values, inTarget, query) {
|
|
4213
|
-
return values.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()) && target.has(item.value) === inTarget);
|
|
4214
|
-
}
|
|
4215
|
-
function toggle(side, option) {
|
|
4216
|
-
(side === "source" ? setCheckedSource : setCheckedTarget)((prev) => {
|
|
4217
|
-
const next = new Set(prev);
|
|
4218
|
-
if (next.has(option)) next.delete(option);
|
|
4219
|
-
else next.add(option);
|
|
4220
|
-
return next;
|
|
4221
|
-
});
|
|
4222
|
-
}
|
|
4223
|
-
function move(toTarget) {
|
|
4224
|
-
const moving = toTarget ? checkedSource : checkedTarget;
|
|
4225
|
-
if (moving.size === 0) return;
|
|
4226
|
-
const next = toTarget ? [...value, ...moving].filter((entry, index, all) => all.indexOf(entry) === index) : value.filter((entry) => !moving.has(entry));
|
|
4227
|
-
if (toTarget) setCheckedSource(/* @__PURE__ */ new Set());
|
|
4228
|
-
else setCheckedTarget(/* @__PURE__ */ new Set());
|
|
4229
|
-
onValueChange?.(next);
|
|
4230
|
-
}
|
|
4231
|
-
function panel(side, title, query, onQuery, checked, items) {
|
|
4232
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
4233
|
-
"data-scope": "transfer",
|
|
4234
|
-
"data-part": "panel",
|
|
4235
|
-
"data-side": side,
|
|
4236
|
-
children: [
|
|
4237
|
-
/* @__PURE__ */ jsxs("div", {
|
|
4238
|
-
"data-scope": "transfer",
|
|
4239
|
-
"data-part": "head",
|
|
4240
|
-
children: [/* @__PURE__ */ jsx("span", {
|
|
4241
|
-
"data-scope": "transfer",
|
|
4242
|
-
"data-part": "title",
|
|
4243
|
-
children: title
|
|
4244
|
-
}), /* @__PURE__ */ jsx("span", {
|
|
4245
|
-
"data-scope": "transfer",
|
|
4246
|
-
"data-part": "count",
|
|
4247
|
-
children: items.length
|
|
4248
|
-
})]
|
|
4249
|
-
}),
|
|
4250
|
-
searchable ? /* @__PURE__ */ jsx("div", {
|
|
4251
|
-
"data-scope": "transfer",
|
|
4252
|
-
"data-part": "search",
|
|
4253
|
-
children: /* @__PURE__ */ jsx(Input, {
|
|
4254
|
-
size: "sm",
|
|
4255
|
-
value: query,
|
|
4256
|
-
onValueChange: onQuery,
|
|
4257
|
-
placeholder: "Filter…",
|
|
4258
|
-
"aria-label": `Filter ${title}`
|
|
4259
|
-
})
|
|
4260
|
-
}) : null,
|
|
4261
|
-
/* @__PURE__ */ jsx("div", {
|
|
4262
|
-
"data-scope": "transfer",
|
|
4263
|
-
"data-part": "list",
|
|
4264
|
-
children: items.length === 0 ? /* @__PURE__ */ jsx("p", {
|
|
4265
|
-
"data-scope": "transfer",
|
|
4266
|
-
"data-part": "empty",
|
|
4267
|
-
children: "Nothing here"
|
|
4268
|
-
}) : items.map((item) => {
|
|
4269
|
-
const locked = disabled || item.disabled === true;
|
|
4270
|
-
return /* @__PURE__ */ jsxs(Checkbox$1.Root, {
|
|
4271
|
-
checked: checked.has(item.value),
|
|
4272
|
-
disabled: locked,
|
|
4273
|
-
onCheckedChange: () => toggle(side, item.value),
|
|
4274
|
-
children: [
|
|
4275
|
-
/* @__PURE__ */ jsx(Checkbox$1.Control, { children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { children: checkGlyph }) }),
|
|
4276
|
-
/* @__PURE__ */ jsx(Checkbox$1.Label, {
|
|
4277
|
-
"data-part": "label",
|
|
4278
|
-
children: item.label
|
|
4279
|
-
}),
|
|
4280
|
-
/* @__PURE__ */ jsx(Checkbox$1.HiddenInput, {})
|
|
4281
|
-
]
|
|
4282
|
-
}, item.value);
|
|
4283
|
-
})
|
|
4284
|
-
})
|
|
4285
|
-
]
|
|
4286
|
-
});
|
|
4287
|
-
}
|
|
4288
|
-
const items = panelItems(data, false, sourceQuery);
|
|
4289
|
-
const targetItems = panelItems(data, true, targetQuery);
|
|
4290
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
4291
|
-
...rest,
|
|
4292
|
-
"data-scope": "transfer",
|
|
4293
|
-
"data-part": "root",
|
|
4294
|
-
children: [
|
|
4295
|
-
panel("source", titles[0], sourceQuery, setSourceQuery, checkedSource, items),
|
|
4296
|
-
/* @__PURE__ */ jsxs("div", {
|
|
4297
|
-
"data-scope": "transfer",
|
|
4298
|
-
"data-part": "operations",
|
|
4299
|
-
children: [/* @__PURE__ */ jsx(Button, {
|
|
4300
|
-
variant: "outline",
|
|
4301
|
-
size: "sm",
|
|
4302
|
-
square: true,
|
|
4303
|
-
disabled: checkedSource.size === 0 || disabled,
|
|
4304
|
-
"aria-label": "Move right",
|
|
4305
|
-
onClick: () => move(true),
|
|
4306
|
-
children: arrowGlyph("right")
|
|
4307
|
-
}), /* @__PURE__ */ jsx(Button, {
|
|
4308
|
-
variant: "outline",
|
|
4309
|
-
size: "sm",
|
|
4310
|
-
square: true,
|
|
4311
|
-
disabled: checkedTarget.size === 0 || disabled,
|
|
4312
|
-
"aria-label": "Move left",
|
|
4313
|
-
onClick: () => move(false),
|
|
4314
|
-
children: arrowGlyph("left")
|
|
4315
|
-
})]
|
|
4316
|
-
}),
|
|
4317
|
-
panel("target", titles[1], targetQuery, setTargetQuery, checkedTarget, targetItems)
|
|
4318
|
-
]
|
|
4319
|
-
});
|
|
4320
|
-
}
|
|
4321
|
-
injectComponentStyle("transfer");
|
|
4322
|
-
injectComponentStyle("checkbox");
|
|
4323
|
-
//#endregion
|
|
4324
|
-
//#region src/components/tree-select/index.tsx
|
|
4325
|
-
const chevron = /* @__PURE__ */ jsx("svg", {
|
|
4326
|
-
viewBox: "0 0 24 24",
|
|
4327
|
-
fill: "none",
|
|
4328
|
-
stroke: "currentColor",
|
|
4329
|
-
strokeWidth: 2,
|
|
4330
|
-
strokeLinecap: "round",
|
|
4331
|
-
strokeLinejoin: "round",
|
|
4332
|
-
"aria-hidden": "true",
|
|
4333
|
-
children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
|
|
4334
|
-
});
|
|
4335
|
-
const chevronDown = /* @__PURE__ */ jsx("span", {
|
|
4336
|
-
"data-part": "chevron",
|
|
4337
|
-
"aria-hidden": "true",
|
|
4338
|
-
children: chevron
|
|
4339
|
-
});
|
|
4340
|
-
function TreeSelectRow({ node, indexPath }) {
|
|
4341
|
-
return /* @__PURE__ */ jsx(TreeView$1.NodeProvider, {
|
|
4342
|
-
node,
|
|
4343
|
-
indexPath,
|
|
4344
|
-
children: node.children ? /* @__PURE__ */ jsxs(TreeView$1.Branch, { children: [/* @__PURE__ */ jsxs(TreeView$1.BranchControl, { children: [/* @__PURE__ */ jsx(TreeView$1.BranchIndicator, { children: chevron }), /* @__PURE__ */ jsx(TreeView$1.BranchText, { children: node.label })] }), /* @__PURE__ */ jsxs(TreeView$1.BranchContent, { children: [/* @__PURE__ */ jsx(TreeView$1.BranchIndentGuide, {}), node.children.map((child, index) => /* @__PURE__ */ jsx(TreeSelectRow, {
|
|
4345
|
-
node: child,
|
|
4346
|
-
indexPath: [...indexPath, index]
|
|
4347
|
-
}, child.value))] })] }) : /* @__PURE__ */ jsx(TreeView$1.Item, {
|
|
4348
|
-
asChild: true,
|
|
4349
|
-
children: /* @__PURE__ */ jsx("span", {
|
|
4350
|
-
style: {
|
|
4351
|
-
display: "flex",
|
|
4352
|
-
inlineSize: "100%"
|
|
4353
|
-
},
|
|
4354
|
-
children: /* @__PURE__ */ jsx(TreeView$1.ItemText, { children: node.label })
|
|
4355
|
-
})
|
|
4356
|
-
})
|
|
4357
|
-
});
|
|
4358
|
-
}
|
|
4359
|
-
function TreeSelect({ value, data, placeholder = "Select…", filterable = false, disabled = false, onValueChange, ...rest }) {
|
|
4360
|
-
const [open, setOpen] = useState(false);
|
|
4361
|
-
const [query, setQuery] = useState("");
|
|
4362
|
-
const filterFns = useFilter({ sensitivity: "base" });
|
|
4363
|
-
const collection = useMemo(() => createTreeCollection$1({
|
|
4364
|
-
nodeToValue: (node) => node.value,
|
|
4365
|
-
nodeToString: (node) => node.label,
|
|
4366
|
-
rootNode: {
|
|
4367
|
-
value: "ROOT",
|
|
4368
|
-
label: "",
|
|
4369
|
-
children: data
|
|
4370
|
-
}
|
|
4371
|
-
}), [data]);
|
|
4372
|
-
const filtering = filterable && query.trim().length > 0;
|
|
4373
|
-
/** The collection pruned to the matches — each hit keeping its
|
|
4374
|
-
* ancestors, so a deep match still reads inside its hierarchy. */
|
|
4375
|
-
const visibleCollection = useMemo(() => filtering ? collection.filter((node) => filterFns.contains(node.label, query.trim())) : collection, [
|
|
4376
|
-
filtering,
|
|
4377
|
-
collection,
|
|
4378
|
-
filterFns,
|
|
4379
|
-
query
|
|
4380
|
-
]);
|
|
4381
|
-
const firstLevel = data.map((node) => node.value);
|
|
4382
|
-
const expandedWhileFiltering = useMemo(() => {
|
|
4383
|
-
if (!filtering) return void 0;
|
|
4384
|
-
const values = [];
|
|
4385
|
-
const walk = (nodes) => {
|
|
4386
|
-
for (const node of nodes) if (node.children?.length) {
|
|
4387
|
-
values.push(node.value);
|
|
4388
|
-
walk(node.children);
|
|
4389
|
-
}
|
|
4390
|
-
};
|
|
4391
|
-
walk(visibleCollection.rootNode.children ?? []);
|
|
4392
|
-
return values;
|
|
4393
|
-
}, [filtering, visibleCollection]);
|
|
4394
|
-
let found;
|
|
4395
|
-
const walk = (nodes) => {
|
|
4396
|
-
for (const node of nodes ?? []) {
|
|
4397
|
-
if (node.value === value) found = node.label;
|
|
4398
|
-
walk(node.children);
|
|
4399
|
-
}
|
|
4400
|
-
};
|
|
4401
|
-
walk(data);
|
|
4402
|
-
const label = found;
|
|
4403
|
-
function pick(details) {
|
|
4404
|
-
const [selected] = details.selectedValue;
|
|
4405
|
-
if (selected == null) return;
|
|
4406
|
-
onValueChange?.(selected);
|
|
4407
|
-
setOpen(false);
|
|
4408
|
-
}
|
|
4409
|
-
return /* @__PURE__ */ jsxs(Popover$1.Root, {
|
|
4410
|
-
...rest,
|
|
4411
|
-
open,
|
|
4412
|
-
onOpenChange: (details) => {
|
|
4413
|
-
setOpen(details.open);
|
|
4414
|
-
if (!details.open) setQuery("");
|
|
4415
|
-
},
|
|
4416
|
-
positioning: {
|
|
4417
|
-
sameWidth: true,
|
|
4418
|
-
placement: "bottom-start"
|
|
4419
|
-
},
|
|
4420
|
-
children: [/* @__PURE__ */ jsx(Popover$1.Trigger, {
|
|
4421
|
-
asChild: true,
|
|
4422
|
-
disabled,
|
|
4423
|
-
children: /* @__PURE__ */ jsxs("button", {
|
|
4424
|
-
type: "button",
|
|
4425
|
-
"data-scope": "tree-select",
|
|
4426
|
-
"data-part": "control",
|
|
4427
|
-
"data-open": open ? "" : void 0,
|
|
4428
|
-
"data-placeholder": label == null ? "" : void 0,
|
|
4429
|
-
disabled,
|
|
4430
|
-
children: [label ?? placeholder, chevronDown]
|
|
4431
|
-
})
|
|
4432
|
-
}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsxs(Popover$1.Content, {
|
|
4433
|
-
"data-scope": "tree-select",
|
|
4434
|
-
"data-part": "content",
|
|
4435
|
-
children: [filterable ? /* @__PURE__ */ jsx("div", {
|
|
4436
|
-
"data-scope": "tree-select",
|
|
4437
|
-
"data-part": "search",
|
|
4438
|
-
children: /* @__PURE__ */ jsx(Input, {
|
|
4439
|
-
size: "sm",
|
|
4440
|
-
value: query,
|
|
4441
|
-
onValueChange: setQuery,
|
|
4442
|
-
placeholder: "Filter…",
|
|
4443
|
-
"aria-label": "Filter options"
|
|
4444
|
-
})
|
|
4445
|
-
}) : null, /* @__PURE__ */ jsx("div", {
|
|
4446
|
-
"data-scope": "tree-select",
|
|
4447
|
-
"data-part": "body",
|
|
4448
|
-
children: (visibleCollection.rootNode.children ?? []).length === 0 ? /* @__PURE__ */ jsx("p", {
|
|
4449
|
-
"data-scope": "tree-select",
|
|
4450
|
-
"data-part": "empty",
|
|
4451
|
-
children: "Nothing matches"
|
|
4452
|
-
}) : /* @__PURE__ */ jsx(TreeView$1.Root, {
|
|
4453
|
-
collection: visibleCollection,
|
|
4454
|
-
selectionMode: "single",
|
|
4455
|
-
selectedValue: value ? [value] : [],
|
|
4456
|
-
...filtering ? { expandedValue: expandedWhileFiltering } : { defaultExpandedValue: firstLevel },
|
|
4457
|
-
onSelectionChange: pick,
|
|
4458
|
-
children: /* @__PURE__ */ jsx(TreeView$1.Tree, { children: visibleCollection.rootNode.children?.map((node, index) => /* @__PURE__ */ jsx(TreeSelectRow, {
|
|
4459
|
-
node,
|
|
4460
|
-
indexPath: [index]
|
|
4461
|
-
}, node.value)) })
|
|
4462
|
-
})
|
|
4463
|
-
})]
|
|
4464
|
-
}) }) })]
|
|
4465
|
-
});
|
|
4466
|
-
}
|
|
4467
|
-
injectComponentStyle("tree-select");
|
|
4468
|
-
injectComponentStyle("tree-view");
|
|
4469
|
-
//#endregion
|
|
4470
|
-
//#region src/components/tree-view/index.tsx
|
|
4471
|
-
/** Ark's TreeView, dressed in the paper-and-ink system: quiet rows where
|
|
4472
|
-
* selection is pure light on the paper, one hairline plumb line per depth,
|
|
4473
|
-
* and branches that swing open on the spring. The API is Ark's own —
|
|
4474
|
-
* Root, Label, Tree, NodeProvider, NodeContext, Branch, BranchControl,
|
|
4475
|
-
* BranchTrigger, BranchIndicator, BranchText, BranchContent,
|
|
4476
|
-
* BranchIndentGuide, Item, ItemText, ItemIndicator, NodeCheckbox,
|
|
4477
|
-
* NodeRenameInput, plus createTreeCollection. */
|
|
4478
|
-
const TreeView = TreeView$1;
|
|
4479
|
-
injectComponentStyle("tree-view");
|
|
4480
|
-
//#endregion
|
|
4481
|
-
//#region src/components/watermark/index.tsx
|
|
4482
|
-
/** Font-relative measures ride the root's own measure; absolute units
|
|
4483
|
-
* pass through untouched — the canvas needs a number, the prop may
|
|
4484
|
-
* speak in CSS. */
|
|
4485
|
-
function toPx(size) {
|
|
4486
|
-
const root = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
|
|
4487
|
-
const value = Number.parseFloat(size) || 0;
|
|
4488
|
-
if (size.includes("em")) return value * root;
|
|
4489
|
-
return value;
|
|
4490
|
-
}
|
|
4491
|
-
/**
|
|
4492
|
-
* The paper bears its seal beneath the content: a canvas draws the
|
|
4493
|
-
* text once into a tile (rotated, faint, crisp at the screen's pixel
|
|
4494
|
-
* density) and the marks layer repeats it over the children. The seal
|
|
4495
|
-
* redraws itself when a prop turns — and it never takes a pointer.
|
|
4496
|
-
*/
|
|
4497
|
-
function Watermark({ content, opacity = .06, rotate = -20, fontSize = "0.875rem", children, ...rest }) {
|
|
4498
|
-
const [root, setRoot] = useState(null);
|
|
4499
|
-
const [tile, setTile] = useState("");
|
|
4500
|
-
useEffect(() => {
|
|
4501
|
-
if (!root) return;
|
|
4502
|
-
const canvas = document.createElement("canvas");
|
|
4503
|
-
const paint = canvas.getContext("2d");
|
|
4504
|
-
if (!paint) return;
|
|
4505
|
-
const styles = getComputedStyle(root);
|
|
4506
|
-
const fontSizePx = toPx(fontSize);
|
|
4507
|
-
const font = `${styles.fontWeight} ${fontSizePx}px ${styles.fontFamily}`;
|
|
4508
|
-
paint.font = font;
|
|
4509
|
-
const textWidth = paint.measureText(content).width;
|
|
4510
|
-
const margin = fontSizePx;
|
|
4511
|
-
const boxWidth = Math.ceil(textWidth + margin * 2);
|
|
4512
|
-
const boxHeight = Math.ceil(fontSizePx + margin * 2);
|
|
4513
|
-
const radian = rotate * Math.PI / 180;
|
|
4514
|
-
const cos = Math.cos(radian);
|
|
4515
|
-
const sin = Math.sin(radian);
|
|
4516
|
-
const width = Math.ceil(Math.abs(boxWidth * cos) + Math.abs(boxHeight * sin));
|
|
4517
|
-
const height = Math.ceil(Math.abs(boxWidth * sin) + Math.abs(boxHeight * cos));
|
|
4518
|
-
const dpr = window.devicePixelRatio || 1;
|
|
4519
|
-
canvas.width = width * dpr;
|
|
4520
|
-
canvas.height = height * dpr;
|
|
4521
|
-
paint.scale(dpr, dpr);
|
|
4522
|
-
paint.translate(width / 2, height / 2);
|
|
4523
|
-
paint.rotate(radian);
|
|
4524
|
-
paint.globalAlpha = opacity;
|
|
4525
|
-
paint.font = font;
|
|
4526
|
-
paint.textAlign = "center";
|
|
4527
|
-
paint.textBaseline = "middle";
|
|
4528
|
-
paint.fillStyle = styles.getPropertyValue("--bs-color-text-tertiary").trim() || styles.color;
|
|
4529
|
-
paint.fillText(content, 0, 0);
|
|
4530
|
-
setTile(`url(${canvas.toDataURL()})`);
|
|
4531
|
-
}, [
|
|
4532
|
-
root,
|
|
4533
|
-
content,
|
|
4534
|
-
opacity,
|
|
4535
|
-
rotate,
|
|
4536
|
-
fontSize
|
|
4537
|
-
]);
|
|
4538
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
4539
|
-
...rest,
|
|
4540
|
-
ref: setRoot,
|
|
4541
|
-
"data-scope": "watermark",
|
|
4542
|
-
"data-part": "root",
|
|
4543
|
-
children: [/* @__PURE__ */ jsx("div", {
|
|
4544
|
-
"data-scope": "watermark",
|
|
4545
|
-
"data-part": "content",
|
|
4546
|
-
children
|
|
4547
|
-
}), /* @__PURE__ */ jsx("div", {
|
|
4548
|
-
"data-scope": "watermark",
|
|
4549
|
-
"data-part": "marks",
|
|
4550
|
-
"aria-hidden": "true",
|
|
4551
|
-
style: { backgroundImage: tile }
|
|
4552
|
-
})]
|
|
4553
|
-
});
|
|
4554
|
-
}
|
|
4555
|
-
injectComponentStyle("watermark");
|
|
4556
|
-
//#endregion
|
|
4557
|
-
export { Accordion, Action, Action as AiAction, Affix, Ai, Attachment as AiAttachment, Attachment, Attachments as AiAttachments, Attachments, Message as AiMessage, Message, PromptInput as AiPromptInput, PromptInput, Reasoning as AiReasoning, Reasoning, Response as AiResponse, Response, Source as AiSource, Source, Sources as AiSources, Sources, Suggestion as AiSuggestion, Suggestion, Tool as AiTool, Tool, Alert, AngleSlider, AspectRatio, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, Banner, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, CascadeSelect, Checkbox, CheckboxGroup, Chip, ClientOnly, Clipboard, Collapsible, ColorPicker, Combobox, Command, Comment, ConfigProvider, Container, DataTable, DateInput, DatePicker, Descriptions, DescriptionsRoot, Dialog, DownloadTrigger, Drawer, DynamicInput, Editable, Ellipsis, Empty, FLOAT_BUTTON_CONTEXT, Field, Fieldset, FileUpload, FlexRender, FloatButton, FloatingPanel, FocusTrap, Form, FormField, Format, Frame, Grid, Highlight, HoverCard, Icon, Image, ImageCropper, ImageViewer, Input, InputGroup, JsonTreeView, Kbd, Layout, Link, List, Listbox, Marquee, Masonry, Mentions, MentionsVessel, Menu, Menubar, Meter, NavigationMenu, NumberInput, PageHeader, Pagination, PasswordInput, PinInput, Popconfirm, Popover, Presence, PresenceProvider, Progress, ProgressGroup, QrCode, RadioGroup, RatingGroup, ScrollArea, SegmentGroup, Select, Separator, SignaturePad, Skeleton, Slider, Spinner, SplitButton, Splitter, Stack, Stat, Steps, Swap, Switch, Tabs, TagsInput, Textarea, Timeline, Timer, Toast, Toaster, Toc, Toggle, ToggleGroup, Tooltip, Tour, Transfer, TreeSelect, TreeView, Typography, Watermark, createColumnHelper, createFileTreeCollection, createGridCollection, createToaster, createTreeCollection, useAsyncList, useConfig, useDownload, useListCollection, useListSelection, useMentions, usePresence, usePresenceContext, useTour };
|
|
129
|
+
export { Accordion, Action, Action as AiAction, Affix, Ai, Attachment as AiAttachment, Attachment, Attachments as AiAttachments, Attachments, Message as AiMessage, Message, PromptInput as AiPromptInput, PromptInput, Reasoning as AiReasoning, Reasoning, Response as AiResponse, Response, Source as AiSource, Source, Sources as AiSources, Sources, Suggestion as AiSuggestion, Suggestion, Tool as AiTool, Tool, Alert, AngleSlider, AspectRatio, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, Banner, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, CascadeSelect, Checkbox, CheckboxGroup, Chip, ClientOnly, Clipboard, Collapsible, ColorPicker, Combobox, Command, Comment, ConfigProvider, Container, DataTable, DateInput, DatePicker, Descriptions, DescriptionsRoot, Dialog, DownloadTrigger, Drawer, DynamicInput, Editable, Ellipsis, Empty, FLOAT_BUTTON_CONTEXT, Field, Fieldset, FileUpload, FlexRender, FloatButton, FloatingPanel, FocusTrap, Form, FormField, Format, Frame, Grid, Highlight, HoverCard, Icon, Image, ImageCropper, ImageViewer, Input, InputGroup, JsonTreeView, Kbd, Layout, Link, List, Listbox, Marquee, Masonry, Mentions, MentionsVessel, Menu, Menubar, Meter, NavigationMenu, NumberInput, PageHeader, Pagination, PasswordInput, PinInput, Popconfirm, Popover, Presence, PresenceProvider, Progress, ProgressGroup, QrCode, RadioGroup, RatingGroup, ScrollArea, SegmentGroup, Select, Separator, SignaturePad, Skeleton, Slider, Spinner, SplitButton, Splitter, Stack, Stat, Steps, Swap, Switch, Tabs, TagsInput, Textarea, Timeline, Timer, Toast, Toaster, Toc, Toggle, ToggleGroup, Tooltip, Tour, Transfer, TreeSelect, TreeView, Typography, Watermark, createColumnHelper, createFileTreeCollection, createGridCollection, createToaster, createTreeCollection, useAsyncList, useConfig, useDownload, useField, useForm, useListCollection, useListSelection, useMentions, usePresence, usePresenceContext, useTour };
|