@cascivo/react 0.3.3 → 0.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -9
- package/dist/accordion/accordion.css +1 -0
- package/dist/accordion/accordion.js +95 -0
- package/dist/accordion/accordion.module.js +14 -0
- package/dist/action-sheet/action-sheet.css +1 -0
- package/dist/action-sheet/action-sheet.js +91 -0
- package/dist/action-sheet/action-sheet.module.js +15 -0
- package/dist/alert/alert.css +1 -0
- package/dist/alert/alert.js +55 -0
- package/dist/alert/alert.module.js +14 -0
- package/dist/alert-dialog/alert-dialog.css +1 -0
- package/dist/alert-dialog/alert-dialog.js +68 -0
- package/dist/alert-dialog/alert-dialog.module.js +14 -0
- package/dist/app-shell/app-shell.css +1 -0
- package/dist/app-shell/app-shell.js +80 -0
- package/dist/app-shell/app-shell.module.js +15 -0
- package/dist/aspect-ratio/aspect-ratio.css +1 -0
- package/dist/aspect-ratio/aspect-ratio.js +22 -0
- package/dist/aspect-ratio/aspect-ratio.module.js +9 -0
- package/dist/avatar/avatar.css +1 -0
- package/dist/avatar/avatar.js +45 -0
- package/dist/avatar/avatar.module.js +11 -0
- package/dist/avatar-group/avatar-group.css +1 -0
- package/dist/avatar-group/avatar-group.js +26 -0
- package/dist/avatar-group/avatar-group.module.js +9 -0
- package/dist/badge/badge.css +1 -0
- package/dist/badge/badge.js +17 -0
- package/dist/badge/badge.module.js +6 -0
- package/dist/blockquote/blockquote.css +1 -0
- package/dist/blockquote/blockquote.js +18 -0
- package/dist/blockquote/blockquote.module.js +9 -0
- package/dist/bottom-sheet/bottom-sheet.css +1 -0
- package/dist/bottom-sheet/bottom-sheet.js +111 -0
- package/dist/bottom-sheet/bottom-sheet.module.js +17 -0
- package/dist/breadcrumb/breadcrumb.css +1 -0
- package/dist/breadcrumb/breadcrumb.js +28 -0
- package/dist/breadcrumb/breadcrumb.module.js +6 -0
- package/dist/button/button.css +1 -0
- package/dist/button/button.js +31 -0
- package/dist/button/button.module.js +6 -0
- package/dist/button-group/button-group.css +1 -0
- package/dist/button-group/button-group.js +39 -0
- package/dist/button-group/button-group.module.js +6 -0
- package/dist/calendar/calendar.css +1 -0
- package/dist/calendar/calendar.js +195 -0
- package/dist/calendar/calendar.module.js +17 -0
- package/dist/card/card.css +1 -0
- package/dist/card/card.js +45 -0
- package/dist/card/card.module.js +12 -0
- package/dist/carousel/carousel.css +1 -0
- package/dist/carousel/carousel.js +138 -0
- package/dist/carousel/carousel.module.js +16 -0
- package/dist/chat-bubble/chat-bubble.css +1 -0
- package/dist/chat-bubble/chat-bubble.js +33 -0
- package/dist/chat-bubble/chat-bubble.module.js +14 -0
- package/dist/checkbox/checkbox.css +1 -0
- package/dist/checkbox/checkbox.js +38 -0
- package/dist/checkbox/checkbox.module.js +11 -0
- package/dist/checkbox-card/checkbox-card.css +1 -0
- package/dist/checkbox-card/checkbox-card.js +48 -0
- package/dist/checkbox-card/checkbox-card.module.js +14 -0
- package/dist/code/code.css +1 -0
- package/dist/code/code.js +16 -0
- package/dist/code/code.module.js +6 -0
- package/dist/code-snippet/code-snippet.css +1 -0
- package/dist/code-snippet/code-snippet.js +116 -0
- package/dist/code-snippet/code-snippet.module.js +20 -0
- package/dist/code-snippet/highlight.js +69 -0
- package/dist/collapsible/collapsible.css +1 -0
- package/dist/collapsible/collapsible.js +42 -0
- package/dist/collapsible/collapsible.module.js +11 -0
- package/dist/color-picker/color-picker.css +1 -0
- package/dist/color-picker/color-picker.js +268 -0
- package/dist/color-picker/color-picker.module.js +21 -0
- package/dist/combobox/combobox.css +1 -0
- package/dist/combobox/combobox.js +164 -0
- package/dist/combobox/combobox.module.js +22 -0
- package/dist/command-menu/command-menu.css +1 -0
- package/dist/command-menu/command-menu.js +263 -0
- package/dist/command-menu/command-menu.module.js +22 -0
- package/dist/comparison/comparison.css +1 -0
- package/dist/comparison/comparison.js +69 -0
- package/dist/comparison/comparison.module.js +12 -0
- package/dist/contained-list/contained-list.css +1 -0
- package/dist/contained-list/contained-list.js +41 -0
- package/dist/contained-list/contained-list.module.js +14 -0
- package/dist/context-menu/context-menu.css +1 -0
- package/dist/context-menu/context-menu.js +60 -0
- package/dist/context-menu/context-menu.module.js +10 -0
- package/dist/copy-button/copy-button.css +1 -0
- package/dist/copy-button/copy-button.js +58 -0
- package/dist/copy-button/copy-button.module.js +9 -0
- package/dist/data-list/data-list.css +1 -0
- package/dist/data-list/data-list.js +27 -0
- package/dist/data-list/data-list.module.js +11 -0
- package/dist/data-table/data-table.css +1 -0
- package/dist/data-table/data-table.js +368 -0
- package/dist/data-table/data-table.module.js +36 -0
- package/dist/date-picker/date-picker.css +1 -0
- package/dist/date-picker/date-picker.js +218 -0
- package/dist/date-picker/date-picker.module.js +26 -0
- package/dist/date-range-picker/date-range-picker.css +1 -0
- package/dist/date-range-picker/date-range-picker.js +195 -0
- package/dist/date-range-picker/date-range-picker.module.js +21 -0
- package/dist/dock/dock.css +1 -0
- package/dist/dock/dock.js +32 -0
- package/dist/dock/dock.module.js +11 -0
- package/dist/drawer/drawer.css +1 -0
- package/dist/drawer/drawer.js +95 -0
- package/dist/drawer/drawer.module.js +16 -0
- package/dist/dropdown/dropdown.css +1 -0
- package/dist/dropdown/dropdown.js +109 -0
- package/dist/dropdown/dropdown.module.js +12 -0
- package/dist/editable/editable.css +1 -0
- package/dist/editable/editable.js +67 -0
- package/dist/editable/editable.module.js +14 -0
- package/dist/empty-state/empty-state.css +1 -0
- package/dist/empty-state/empty-state.js +34 -0
- package/dist/empty-state/empty-state.module.js +12 -0
- package/dist/fab/fab.css +1 -0
- package/dist/fab/fab.js +93 -0
- package/dist/fab/fab.module.js +15 -0
- package/dist/field/field.css +1 -0
- package/dist/field/field.js +39 -0
- package/dist/field/field.module.js +10 -0
- package/dist/file-uploader/file-uploader.css +1 -0
- package/dist/file-uploader/file-uploader.js +122 -0
- package/dist/file-uploader/file-uploader.module.js +21 -0
- package/dist/filter/filter.css +1 -0
- package/dist/filter/filter.js +34 -0
- package/dist/filter/filter.module.js +9 -0
- package/dist/form/form.css +1 -0
- package/dist/form/form.js +88 -0
- package/dist/form/form.module.js +6 -0
- package/dist/header/header.css +1 -0
- package/dist/header/header.js +44 -0
- package/dist/header/header.module.js +14 -0
- package/dist/header-panel/header-panel.css +1 -0
- package/dist/header-panel/header-panel.js +74 -0
- package/dist/header-panel/header-panel.module.js +12 -0
- package/dist/heading/heading.css +1 -0
- package/dist/heading/heading.js +24 -0
- package/dist/heading/heading.module.js +6 -0
- package/dist/hover-card/hover-card.css +1 -0
- package/dist/hover-card/hover-card.js +84 -0
- package/dist/hover-card/hover-card.module.js +9 -0
- package/dist/icon-button/icon-button.css +1 -0
- package/dist/icon-button/icon-button.js +21 -0
- package/dist/icon-button/icon-button.module.js +6 -0
- package/dist/image/image.css +1 -0
- package/dist/image/image.js +64 -0
- package/dist/image/image.module.js +12 -0
- package/dist/indicator/indicator.css +1 -0
- package/dist/indicator/indicator.js +18 -0
- package/dist/indicator/indicator.module.js +9 -0
- package/dist/inline-loading/inline-loading.css +1 -0
- package/dist/inline-loading/inline-loading.js +76 -0
- package/dist/inline-loading/inline-loading.module.js +12 -0
- package/dist/input/input.css +1 -0
- package/dist/input/input.js +54 -0
- package/dist/input/input.module.js +12 -0
- package/dist/input-group/input-group.css +1 -0
- package/dist/input-group/input-group.js +41 -0
- package/dist/input-group/input-group.module.js +12 -0
- package/dist/item/item.css +1 -0
- package/dist/item/item.js +52 -0
- package/dist/item/item.module.js +13 -0
- package/dist/join/join.css +1 -0
- package/dist/join/join.js +14 -0
- package/dist/join/join.module.js +6 -0
- package/dist/kbd/kbd.css +1 -0
- package/dist/kbd/kbd.js +16 -0
- package/dist/kbd/kbd.module.js +6 -0
- package/dist/label/label.css +1 -0
- package/dist/label/label.js +25 -0
- package/dist/label/label.module.js +10 -0
- package/dist/link/link.css +1 -0
- package/dist/link/link.js +22 -0
- package/dist/link/link.module.js +6 -0
- package/dist/list/list.css +1 -0
- package/dist/list/list.js +23 -0
- package/dist/list/list.module.js +9 -0
- package/dist/menu/menu.css +1 -0
- package/dist/menu/menu.js +96 -0
- package/dist/menu/menu.module.js +11 -0
- package/dist/menu-button/menu-button.css +1 -0
- package/dist/menu-button/menu-button.js +92 -0
- package/dist/menu-button/menu-button.module.js +11 -0
- package/dist/menubar/menubar.css +1 -0
- package/dist/menubar/menubar.js +103 -0
- package/dist/menubar/menubar.module.js +11 -0
- package/dist/modal/modal.css +1 -0
- package/dist/modal/modal.js +73 -0
- package/dist/modal/modal.module.js +14 -0
- package/dist/multi-select/multi-select.css +1 -0
- package/dist/multi-select/multi-select.js +105 -0
- package/dist/multi-select/multi-select.module.js +18 -0
- package/dist/native-select/native-select.css +1 -0
- package/dist/native-select/native-select.js +37 -0
- package/dist/native-select/native-select.module.js +10 -0
- package/dist/navigation-menu/navigation-menu.css +1 -0
- package/dist/navigation-menu/navigation-menu.js +95 -0
- package/dist/navigation-menu/navigation-menu.module.js +13 -0
- package/dist/notification/notification.css +1 -0
- package/dist/notification/notification.js +134 -0
- package/dist/notification/notification.module.js +14 -0
- package/dist/number-input/number-input.css +1 -0
- package/dist/number-input/number-input.js +145 -0
- package/dist/number-input/number-input.module.js +15 -0
- package/dist/otp-input/otp-input.css +1 -0
- package/dist/otp-input/otp-input.js +70 -0
- package/dist/otp-input/otp-input.module.js +9 -0
- package/dist/overflow-menu/overflow-menu.css +1 -0
- package/dist/overflow-menu/overflow-menu.js +65 -0
- package/dist/overflow-menu/overflow-menu.module.js +10 -0
- package/dist/pagination/pagination.css +1 -0
- package/dist/pagination/pagination.js +92 -0
- package/dist/pagination/pagination.module.js +14 -0
- package/dist/password-input/password-input.css +1 -0
- package/dist/password-input/password-input.js +76 -0
- package/dist/password-input/password-input.module.js +14 -0
- package/dist/popover/popover.css +1 -0
- package/dist/popover/popover.js +49 -0
- package/dist/popover/popover.module.js +9 -0
- package/dist/popover/use-popover.js +57 -0
- package/dist/progress/progress.css +1 -0
- package/dist/progress/progress.js +17 -0
- package/dist/progress/progress.module.js +9 -0
- package/dist/progress-bar/progress-bar.css +1 -0
- package/dist/progress-bar/progress-bar.js +44 -0
- package/dist/progress-bar/progress-bar.module.js +14 -0
- package/dist/progress-circle/progress-circle.css +1 -0
- package/dist/progress-circle/progress-circle.js +48 -0
- package/dist/progress-circle/progress-circle.module.js +12 -0
- package/dist/progress-indicator/progress-indicator.css +1 -0
- package/dist/progress-indicator/progress-indicator.js +36 -0
- package/dist/progress-indicator/progress-indicator.module.js +13 -0
- package/dist/prose/prose.css +1 -0
- package/dist/prose/prose.js +15 -0
- package/dist/prose/prose.module.js +6 -0
- package/dist/pull-to-refresh/pull-to-refresh.css +1 -0
- package/dist/pull-to-refresh/pull-to-refresh.js +82 -0
- package/dist/pull-to-refresh/pull-to-refresh.module.js +12 -0
- package/dist/qr-code/encode.js +585 -0
- package/dist/qr-code/qr-code.css +1 -0
- package/dist/qr-code/qr-code.js +41 -0
- package/dist/qr-code/qr-code.module.js +9 -0
- package/dist/radial-progress/radial-progress.css +1 -0
- package/dist/radial-progress/radial-progress.js +25 -0
- package/dist/radial-progress/radial-progress.module.js +9 -0
- package/dist/radio/radio.css +1 -0
- package/dist/radio/radio.js +49 -0
- package/dist/radio/radio.module.js +12 -0
- package/dist/radio-card/radio-card.css +1 -0
- package/dist/radio-card/radio-card.js +63 -0
- package/dist/radio-card/radio-card.module.js +14 -0
- package/dist/rating-group/rating-group.css +1 -0
- package/dist/rating-group/rating-group.js +37 -0
- package/dist/rating-group/rating-group.module.js +9 -0
- package/dist/react/src/index.js +130 -0
- package/dist/relative-time/relative-time.css +1 -0
- package/dist/relative-time/relative-time.js +65 -0
- package/dist/relative-time/relative-time.module.js +6 -0
- package/dist/resizable/resizable.css +1 -0
- package/dist/resizable/resizable.js +80 -0
- package/dist/resizable/resizable.module.js +11 -0
- package/dist/scroll-area/scroll-area.css +1 -0
- package/dist/scroll-area/scroll-area.js +38 -0
- package/dist/scroll-area/scroll-area.module.js +6 -0
- package/dist/search/search.css +1 -0
- package/dist/search/search.js +94 -0
- package/dist/search/search.module.js +12 -0
- package/dist/segmented-control/segmented-control.css +1 -0
- package/dist/segmented-control/segmented-control.js +43 -0
- package/dist/segmented-control/segmented-control.module.js +9 -0
- package/dist/select/select.css +1 -0
- package/dist/select/select.js +71 -0
- package/dist/select/select.module.js +14 -0
- package/dist/separator/separator.css +1 -0
- package/dist/separator/separator.js +21 -0
- package/dist/separator/separator.module.js +6 -0
- package/dist/sheet/sheet.css +1 -0
- package/dist/sheet/sheet.js +50 -0
- package/dist/sheet/sheet.module.js +12 -0
- package/dist/shell-header/shell-header.css +1 -0
- package/dist/shell-header/shell-header.js +165 -0
- package/dist/shell-header/shell-header.module.js +26 -0
- package/dist/side-nav/side-nav.css +1 -0
- package/dist/side-nav/side-nav.js +326 -0
- package/dist/side-nav/side-nav.module.js +34 -0
- package/dist/skeleton/skeleton.css +1 -0
- package/dist/skeleton/skeleton.js +25 -0
- package/dist/skeleton/skeleton.module.js +10 -0
- package/dist/skip-nav/skip-nav.css +1 -0
- package/dist/skip-nav/skip-nav.js +27 -0
- package/dist/skip-nav/skip-nav.module.js +6 -0
- package/dist/slider/slider.css +1 -0
- package/dist/slider/slider.js +29 -0
- package/dist/slider/slider.module.js +10 -0
- package/dist/spinner/spinner.css +1 -0
- package/dist/spinner/spinner.js +18 -0
- package/dist/spinner/spinner.module.js +9 -0
- package/dist/stack/stack.css +1 -0
- package/dist/stack/stack.js +19 -0
- package/dist/stack/stack.module.js +9 -0
- package/dist/stat/stat.css +1 -0
- package/dist/stat/stat.js +37 -0
- package/dist/stat/stat.module.js +13 -0
- package/dist/status/status.css +1 -0
- package/dist/status/status.js +20 -0
- package/dist/status/status.module.js +10 -0
- package/dist/steps/steps.css +1 -0
- package/dist/steps/steps.js +32 -0
- package/dist/steps/steps.module.js +11 -0
- package/dist/structured-list/structured-list.css +1 -0
- package/dist/structured-list/structured-list.js +101 -0
- package/dist/structured-list/structured-list.module.js +15 -0
- package/dist/styles.css +248 -0
- package/dist/swap/swap.css +1 -0
- package/dist/swap/swap.js +36 -0
- package/dist/swap/swap.module.js +10 -0
- package/dist/swipe-item/swipe-item.css +1 -0
- package/dist/swipe-item/swipe-item.js +62 -0
- package/dist/swipe-item/swipe-item.module.js +15 -0
- package/dist/switcher/switcher.css +1 -0
- package/dist/switcher/switcher.js +29 -0
- package/dist/switcher/switcher.module.js +11 -0
- package/dist/tabs/tabs.css +1 -0
- package/dist/tabs/tabs.js +95 -0
- package/dist/tabs/tabs.module.js +11 -0
- package/dist/tag/tag.css +1 -0
- package/dist/tag/tag.js +26 -0
- package/dist/tag/tag.module.js +9 -0
- package/dist/tags-input/tags-input.css +1 -0
- package/dist/tags-input/tags-input.js +63 -0
- package/dist/tags-input/tags-input.module.js +11 -0
- package/dist/text/text.css +1 -0
- package/dist/text/text.js +18 -0
- package/dist/text/text.module.js +6 -0
- package/dist/textarea/textarea.css +1 -0
- package/dist/textarea/textarea.js +56 -0
- package/dist/textarea/textarea.module.js +12 -0
- package/dist/tile/tile.css +1 -0
- package/dist/tile/tile.js +39 -0
- package/dist/tile/tile.module.js +10 -0
- package/dist/time-picker/time-picker.css +1 -0
- package/dist/time-picker/time-picker.js +62 -0
- package/dist/time-picker/time-picker.module.js +12 -0
- package/dist/timeline/timeline.css +1 -0
- package/dist/timeline/timeline.js +41 -0
- package/dist/timeline/timeline.module.js +14 -0
- package/dist/toast/toast.css +1 -0
- package/dist/toast/toast.js +85 -0
- package/dist/toast/toast.module.js +14 -0
- package/dist/toc/toc.css +1 -0
- package/dist/toc/toc.js +42 -0
- package/dist/toc/toc.module.js +6 -0
- package/dist/toc/use-toc-from-region.js +17 -0
- package/dist/toggle/toggle.css +1 -0
- package/dist/toggle/toggle.js +39 -0
- package/dist/toggle/toggle.module.js +11 -0
- package/dist/toggle-group/toggle-group.css +1 -0
- package/dist/toggle-group/toggle-group.js +55 -0
- package/dist/toggle-group/toggle-group.module.js +9 -0
- package/dist/toggletip/toggletip.css +1 -0
- package/dist/toggletip/toggletip.js +49 -0
- package/dist/toggletip/toggletip.module.js +10 -0
- package/dist/tooltip/tooltip.css +1 -0
- package/dist/tooltip/tooltip.js +58 -0
- package/dist/tooltip/tooltip.module.js +9 -0
- package/dist/tree-view/tree-view.css +1 -0
- package/dist/tree-view/tree-view.js +201 -0
- package/dist/tree-view/tree-view.module.js +16 -0
- package/dist/user/user.css +1 -0
- package/dist/user/user.js +33 -0
- package/dist/user/user.module.js +12 -0
- package/dist/visually-hidden/visually-hidden.css +1 -0
- package/dist/visually-hidden/visually-hidden.js +15 -0
- package/dist/visually-hidden/visually-hidden.module.js +6 -0
- package/package.json +6 -6
- package/readme.body.md +12 -9
- package/dist/cascivo.css +0 -2
- package/dist/index.js +0 -9174
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer cascivo.component{._link_6dwxn_2{color:var(--cascivo-link-color,var(--cascivo-color-accent));cursor:pointer;border-radius:var(--cascivo-radius-item);text-underline-offset:.2em;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out)}._link_6dwxn_2:hover{color:var(--cascivo-color-accent-hover)}._link_6dwxn_2:active{color:var(--cascivo-color-accent-active)}._link_6dwxn_2:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._link_6dwxn_2[data-variant=standalone]{font-family:var(--cascivo-font-sans);font-weight:var(--cascivo-font-medium);text-decoration:none}._link_6dwxn_2[data-variant=standalone]:hover{text-decoration:underline}._link_6dwxn_2[data-variant=standalone][data-size=sm]{font-size:var(--cascivo-text-sm)}._link_6dwxn_2[data-variant=standalone][data-size=md]{font-size:var(--cascivo-text-base)}._link_6dwxn_2[data-variant=standalone][data-size=lg]{font-size:var(--cascivo-text-lg)}._link_6dwxn_2[data-variant=inline]{font:inherit;text-decoration:underline}._link_6dwxn_2[data-external]:after{content:"↗" / "";margin-inline-start:var(--cascivo-space-1);font-size:.8em}}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import e from "./link.module.js";
|
|
4
|
+
import { cn as t } from "@cascivo/core";
|
|
5
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
6
|
+
//#region ../components/src/link/link.tsx
|
|
7
|
+
function r({ variant: r = "standalone", size: i = "md", external: a = !1, className: o, children: s, ...c }) {
|
|
8
|
+
return /* @__PURE__ */ n("a", {
|
|
9
|
+
"data-variant": r,
|
|
10
|
+
"data-size": i,
|
|
11
|
+
"data-external": a || void 0,
|
|
12
|
+
className: t(e.link, o),
|
|
13
|
+
...a ? {
|
|
14
|
+
target: "_blank",
|
|
15
|
+
rel: "noreferrer"
|
|
16
|
+
} : {},
|
|
17
|
+
...c,
|
|
18
|
+
children: s
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
//#endregion
|
|
22
|
+
export { r as Link };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer cascivo.component{._list_96m5o_2{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-base);line-height:var(--cascivo-leading-normal);color:var(--cascivo-color-text);margin:0;padding-inline-start:var(--cascivo-space-6)}._list_96m5o_2[data-marker=disc]{list-style-type:disc}._list_96m5o_2[data-marker=decimal]{list-style-type:decimal}._list_96m5o_2[data-marker=none]{padding-inline-start:0;list-style-type:none}._item_96m5o_24{margin-block:var(--cascivo-space-1)}}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import e from "./list.module.js";
|
|
4
|
+
import { cn as t } from "@cascivo/core";
|
|
5
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
6
|
+
//#region ../components/src/list/list.tsx
|
|
7
|
+
function r({ as: r = "ul", marker: i, className: a, children: o, ...s }) {
|
|
8
|
+
return /* @__PURE__ */ n(r, {
|
|
9
|
+
"data-marker": i ?? (r === "ol" ? "decimal" : "disc"),
|
|
10
|
+
className: t(e.list, a),
|
|
11
|
+
...s,
|
|
12
|
+
children: o
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
function i({ className: r, children: i, ...a }) {
|
|
16
|
+
return /* @__PURE__ */ n("li", {
|
|
17
|
+
className: t(e.item, r),
|
|
18
|
+
...a,
|
|
19
|
+
children: i
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
//#endregion
|
|
23
|
+
export { r as List, i as ListItem };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer cascivo.component{._trigger_1eutv_2{padding:var(--cascivo-space-1);border-radius:var(--cascivo-radius-control);color:inherit;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}._trigger_1eutv_2:hover{background:var(--cascivo-color-active-bg)}._trigger_1eutv_2:focus-visible{outline:var(--cascivo-focus-ring);outline-offset:2px}._panel_1eutv_23{padding:var(--cascivo-space-1);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);min-width:10rem;box-shadow:var(--cascivo-shadow-md);margin:0;position:fixed;inset:auto}@supports (anchor-name:--a){._panel_1eutv_23{position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;inset-block-start:anchor(end);inset-inline-start:anchor(start)}}._panel_1eutv_23{opacity:1;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;translate:0}@starting-style{._panel_1eutv_23{opacity:0;translate:0 calc(-1 * var(--cascivo-space-2))}}._panel_1eutv_23[data-state=closed]{opacity:0;translate:0 calc(-1 * var(--cascivo-space-2));transition:opacity var(--cascivo-motion-exit), translate var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete}._item_1eutv_67{align-items:center;gap:var(--cascivo-space-2);padding:var(--cascivo-space-2) var(--cascivo-space-3);border-radius:var(--cascivo-radius-item);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;display:flex}._item_1eutv_67:hover,._item_1eutv_67:focus-visible{background:var(--cascivo-color-bg-subtle)}._item_1eutv_67[aria-disabled=true]{opacity:.5;cursor:not-allowed}._separator_1eutv_90{height:1px;margin-block:var(--cascivo-space-1);background:var(--cascivo-color-border)}}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { usePopover as e } from "../popover/use-popover.js";
|
|
4
|
+
import t from "./menu.module.js";
|
|
5
|
+
import { useSignalEffect as n, useSignals as r } from "@cascivo/core";
|
|
6
|
+
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
7
|
+
import { createContext as o } from "react";
|
|
8
|
+
//#region ../components/src/menu/menu.tsx
|
|
9
|
+
var s = o(null);
|
|
10
|
+
function c({ ctx: e, children: a }) {
|
|
11
|
+
r();
|
|
12
|
+
let { popoverRef: o, anchorName: s, isOpen: c } = e;
|
|
13
|
+
return n(() => {
|
|
14
|
+
if (!c.value) return;
|
|
15
|
+
let e = o.current;
|
|
16
|
+
e && e.querySelector("[role=\"menuitem\"]:not([aria-disabled=\"true\"])")?.focus();
|
|
17
|
+
}), /* @__PURE__ */ i("div", {
|
|
18
|
+
ref: o,
|
|
19
|
+
popover: "auto",
|
|
20
|
+
role: "menu",
|
|
21
|
+
"data-state": c.value ? "open" : "closed",
|
|
22
|
+
style: { positionAnchor: s },
|
|
23
|
+
className: t.panel,
|
|
24
|
+
children: a
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
function l({ children: e }) {
|
|
28
|
+
return /* @__PURE__ */ i(s.Consumer, { children: (t) => {
|
|
29
|
+
if (!t) throw Error("MenuPanel must be inside <Menu>");
|
|
30
|
+
return /* @__PURE__ */ i(c, {
|
|
31
|
+
ctx: t,
|
|
32
|
+
children: e
|
|
33
|
+
});
|
|
34
|
+
} });
|
|
35
|
+
}
|
|
36
|
+
function u({ children: t }) {
|
|
37
|
+
let n = e(), [r, ...o] = Array.isArray(t) ? t : [t];
|
|
38
|
+
return /* @__PURE__ */ a(s.Provider, {
|
|
39
|
+
value: n,
|
|
40
|
+
children: [r, /* @__PURE__ */ i(l, { children: o })]
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
function d({ ctx: e, children: n, "aria-label": a }) {
|
|
44
|
+
r();
|
|
45
|
+
let { triggerRef: o, toggle: s, anchorName: c, isOpen: l } = e;
|
|
46
|
+
return /* @__PURE__ */ i("button", {
|
|
47
|
+
ref: o,
|
|
48
|
+
type: "button",
|
|
49
|
+
"aria-haspopup": "menu",
|
|
50
|
+
"aria-expanded": l.value,
|
|
51
|
+
"aria-label": a,
|
|
52
|
+
style: { anchorName: c },
|
|
53
|
+
onClick: s,
|
|
54
|
+
className: t.trigger,
|
|
55
|
+
children: n
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
function f({ children: e, "aria-label": t }) {
|
|
59
|
+
return /* @__PURE__ */ i(s.Consumer, { children: (n) => {
|
|
60
|
+
if (!n) throw Error("MenuTrigger must be inside <Menu>");
|
|
61
|
+
return /* @__PURE__ */ i(d, {
|
|
62
|
+
ctx: n,
|
|
63
|
+
...t !== void 0 && { "aria-label": t },
|
|
64
|
+
children: e
|
|
65
|
+
});
|
|
66
|
+
} });
|
|
67
|
+
}
|
|
68
|
+
function p({ children: e, onSelect: n, disabled: r }) {
|
|
69
|
+
return /* @__PURE__ */ i(s.Consumer, { children: (a) => {
|
|
70
|
+
if (!a) throw Error("MenuItem must be inside <Menu>");
|
|
71
|
+
let { close: o } = a;
|
|
72
|
+
function s() {
|
|
73
|
+
r || (n(), o());
|
|
74
|
+
}
|
|
75
|
+
function c(e) {
|
|
76
|
+
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), s()), e.key === "ArrowDown" && (e.preventDefault(), e.currentTarget.nextElementSibling?.focus()), e.key === "ArrowUp" && (e.preventDefault(), e.currentTarget.previousElementSibling?.focus());
|
|
77
|
+
}
|
|
78
|
+
return /* @__PURE__ */ i("div", {
|
|
79
|
+
role: "menuitem",
|
|
80
|
+
tabIndex: r ? -1 : 0,
|
|
81
|
+
"aria-disabled": r,
|
|
82
|
+
onClick: s,
|
|
83
|
+
onKeyDown: c,
|
|
84
|
+
className: t.item,
|
|
85
|
+
children: e
|
|
86
|
+
});
|
|
87
|
+
} });
|
|
88
|
+
}
|
|
89
|
+
function m() {
|
|
90
|
+
return /* @__PURE__ */ i("div", {
|
|
91
|
+
role: "separator",
|
|
92
|
+
className: t.separator
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
//#endregion
|
|
96
|
+
export { u as Menu, p as MenuItem, m as MenuSeparator, f as MenuTrigger };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer cascivo.component{._root_rzxsi_2{display:inline-block;position:relative}._trigger_rzxsi_7{justify-content:center;align-items:center;gap:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-weight:var(--cascivo-font-medium);line-height:var(--cascivo-leading-none);white-space:nowrap;cursor:pointer;border-radius:var(--cascivo-radius-control);transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);border:1px solid #0000;display:inline-flex}._trigger_rzxsi_7:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._trigger_rzxsi_7:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}._trigger_rzxsi_7[data-size=sm]{height:2rem;padding-inline:var(--cascivo-space-3);font-size:var(--cascivo-text-sm)}._trigger_rzxsi_7[data-size=md]{height:2.5rem;padding-inline:var(--cascivo-space-4);font-size:var(--cascivo-text-sm)}._trigger_rzxsi_7[data-size=lg]{height:3rem;padding-inline:var(--cascivo-space-6);font-size:var(--cascivo-text-base)}._trigger_rzxsi_7[data-variant=primary]{background-color:var(--cascivo-color-primary);color:var(--cascivo-color-primary-fg)}._trigger_rzxsi_7[data-variant=primary]:hover:not(:disabled){background-color:var(--cascivo-color-primary-hover)}._trigger_rzxsi_7[data-variant=secondary]{background-color:var(--cascivo-color-surface);color:var(--cascivo-color-text);border-color:var(--cascivo-color-border)}._trigger_rzxsi_7[data-variant=secondary]:hover:not(:disabled){background-color:var(--cascivo-color-bg-subtle)}._trigger_rzxsi_7[data-variant=ghost]{color:var(--cascivo-color-text);background-color:#0000}._trigger_rzxsi_7[data-variant=ghost]:hover:not(:disabled){background-color:var(--cascivo-color-bg-subtle)}._menu_rzxsi_82{z-index:var(--cascivo-z-dropdown);min-inline-size:12rem;padding:var(--cascivo-space-1);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-md);opacity:1;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter);margin-block-start:var(--cascivo-space-1);translate:0}@starting-style{._menu_rzxsi_82{opacity:0;translate:0 calc(-1 * var(--cascivo-space-2))}}._item_rzxsi_104{align-items:center;gap:var(--cascivo-space-2);padding:var(--cascivo-space-2) var(--cascivo-space-3);border-radius:var(--cascivo-radius-item);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;display:flex}._item_rzxsi_104:hover,._item_rzxsi_104:focus-visible{background:var(--cascivo-color-bg-subtle)}._item_rzxsi_104[aria-disabled=true]{opacity:.5;cursor:not-allowed}}@media (prefers-reduced-motion:reduce){._menu_rzxsi_82{transition:none}}@media (forced-colors:active){._trigger_rzxsi_7{border:1px solid buttontext}._trigger_rzxsi_7:focus-visible{outline-offset:2px;outline:2px solid highlight}._menu_rzxsi_82{border:1px solid canvastext}._item_rzxsi_104:focus-visible{outline:2px solid highlight}}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import e from "./menu-button.module.js";
|
|
4
|
+
import { DismissableLayer as t, cn as n, useAnchorPosition as r, useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
|
|
5
|
+
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
6
|
+
import { useId as l, useRef as u } from "react";
|
|
7
|
+
//#region ../components/src/menu-button/menu-button.tsx
|
|
8
|
+
function d(e, t) {
|
|
9
|
+
if (!e) return;
|
|
10
|
+
let n = e.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])");
|
|
11
|
+
n[t < 0 ? n.length - 1 : t % n.length]?.focus();
|
|
12
|
+
}
|
|
13
|
+
function f({ label: f, items: p, variant: m = "secondary", size: h = "md", disabled: g = !1, align: _ = "start", labels: v, className: y }) {
|
|
14
|
+
o();
|
|
15
|
+
let b = i(!1), x = u(null), S = u(null), C = l(), { anchorStyle: w, floatingStyle: T } = r({
|
|
16
|
+
anchorRef: x,
|
|
17
|
+
floatingRef: S,
|
|
18
|
+
placement: _ === "end" ? "bottom-end" : "bottom-start",
|
|
19
|
+
enabled: b
|
|
20
|
+
});
|
|
21
|
+
a(() => {
|
|
22
|
+
b.value && d(S.current, 0);
|
|
23
|
+
});
|
|
24
|
+
function E(e) {
|
|
25
|
+
g || (b.value = !0, queueMicrotask(() => d(S.current, e)));
|
|
26
|
+
}
|
|
27
|
+
function D(e) {
|
|
28
|
+
b.value = !1, e && x.current?.focus();
|
|
29
|
+
}
|
|
30
|
+
function O(e) {
|
|
31
|
+
e.key === "ArrowDown" || e.key === "Enter" || e.key === " " ? (e.preventDefault(), E(0)) : e.key === "ArrowUp" && (e.preventDefault(), E(-1));
|
|
32
|
+
}
|
|
33
|
+
function k(e) {
|
|
34
|
+
if (e.key === "ArrowDown") {
|
|
35
|
+
e.preventDefault();
|
|
36
|
+
let t = e.currentTarget.nextElementSibling;
|
|
37
|
+
t ? t.focus() : d(S.current, 0);
|
|
38
|
+
} else if (e.key === "ArrowUp") {
|
|
39
|
+
e.preventDefault();
|
|
40
|
+
let t = e.currentTarget.previousElementSibling;
|
|
41
|
+
t ? t.focus() : d(S.current, -1);
|
|
42
|
+
} else e.key === "Escape" ? (e.preventDefault(), D(!0)) : e.key === "Tab" && D(!1);
|
|
43
|
+
}
|
|
44
|
+
function A(e) {
|
|
45
|
+
e.disabled || (e.onSelect?.(), D(!0));
|
|
46
|
+
}
|
|
47
|
+
return /* @__PURE__ */ c("div", {
|
|
48
|
+
className: n(e.root, y),
|
|
49
|
+
children: [/* @__PURE__ */ s("button", {
|
|
50
|
+
ref: x,
|
|
51
|
+
type: "button",
|
|
52
|
+
className: e.trigger,
|
|
53
|
+
"data-variant": m,
|
|
54
|
+
"data-size": h,
|
|
55
|
+
disabled: g,
|
|
56
|
+
"aria-haspopup": "menu",
|
|
57
|
+
"aria-expanded": b.value,
|
|
58
|
+
"aria-controls": C,
|
|
59
|
+
...v?.open !== void 0 && { "aria-label": v.open },
|
|
60
|
+
style: w,
|
|
61
|
+
onClick: () => {
|
|
62
|
+
b.value ? D(!1) : E(0);
|
|
63
|
+
},
|
|
64
|
+
onKeyDown: O,
|
|
65
|
+
children: f
|
|
66
|
+
}), b.value ? /* @__PURE__ */ s(t, {
|
|
67
|
+
onDismiss: () => D(!0),
|
|
68
|
+
children: /* @__PURE__ */ s("div", {
|
|
69
|
+
ref: S,
|
|
70
|
+
id: C,
|
|
71
|
+
role: "menu",
|
|
72
|
+
"data-state": "open",
|
|
73
|
+
"data-align": _,
|
|
74
|
+
className: e.menu,
|
|
75
|
+
style: T,
|
|
76
|
+
children: p.map((t) => /* @__PURE__ */ s("div", {
|
|
77
|
+
role: "menuitem",
|
|
78
|
+
tabIndex: -1,
|
|
79
|
+
"aria-disabled": t.disabled,
|
|
80
|
+
className: e.item,
|
|
81
|
+
onClick: () => A(t),
|
|
82
|
+
onKeyDown: (e) => {
|
|
83
|
+
e.key === "Enter" || e.key === " " ? (e.preventDefault(), A(t)) : k(e);
|
|
84
|
+
},
|
|
85
|
+
children: t.label
|
|
86
|
+
}, t.id))
|
|
87
|
+
})
|
|
88
|
+
}) : null]
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
//#endregion
|
|
92
|
+
export { f as MenuButton };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer cascivo.component{._menubar_1fs00_2{align-items:center;gap:var(--cascivo-space-1);padding:var(--cascivo-space-1);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);display:flex}._trigger_1fs00_12{padding-block:var(--cascivo-space-1);padding-inline:var(--cascivo-space-3);border-radius:var(--cascivo-radius-item);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);cursor:pointer;background:0 0;border:none;align-items:center;display:inline-flex}._trigger_1fs00_12:hover,._trigger_1fs00_12[data-state=open]{background:var(--cascivo-color-bg-subtle)}._trigger_1fs00_12:focus-visible{outline:var(--cascivo-focus-ring);outline-offset:2px}._panel_1fs00_35{padding:var(--cascivo-space-1);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);min-width:10rem;box-shadow:var(--cascivo-shadow-md);opacity:1;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter);margin:0;position:fixed;inset:auto;translate:0}@starting-style{._panel_1fs00_35{opacity:0;translate:0 calc(-1 * var(--cascivo-space-2))}}._panel_1fs00_35[data-state=closed]{opacity:0;translate:0 calc(-1 * var(--cascivo-space-2));transition:opacity var(--cascivo-motion-exit), translate var(--cascivo-motion-exit)}._item_1fs00_66{align-items:center;gap:var(--cascivo-space-2);padding-block:var(--cascivo-space-2);padding-inline:var(--cascivo-space-3);border-radius:var(--cascivo-radius-item);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;display:flex}._item_1fs00_66:hover,._item_1fs00_66:focus-visible{background:var(--cascivo-color-bg-subtle)}._item_1fs00_66[aria-disabled=true]{opacity:.5;cursor:not-allowed}}@media (prefers-reduced-motion:reduce){._panel_1fs00_35{transition:none}}@media (forced-colors:active){._trigger_1fs00_12:focus-visible{outline:2px solid highlight}}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import e from "./menubar.module.js";
|
|
4
|
+
import { DismissableLayer as t, Presence as n, cn as r, useAnchorPosition as i, useRovingFocus as a, useSignal as o, useSignals as s } from "@cascivo/core";
|
|
5
|
+
import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
6
|
+
import { useId as d, useRef as f } from "react";
|
|
7
|
+
//#region ../components/src/menubar/menubar.tsx
|
|
8
|
+
function p({ menus: t, "aria-label": n, className: i }) {
|
|
9
|
+
s();
|
|
10
|
+
let c = d(), u = o(null), f = a({
|
|
11
|
+
orientation: "horizontal",
|
|
12
|
+
loop: !0
|
|
13
|
+
});
|
|
14
|
+
return /* @__PURE__ */ l("div", {
|
|
15
|
+
role: "menubar",
|
|
16
|
+
"aria-label": n,
|
|
17
|
+
className: r(e.menubar, i),
|
|
18
|
+
children: t.map((e, t) => /* @__PURE__ */ l(m, {
|
|
19
|
+
menu: e,
|
|
20
|
+
index: t,
|
|
21
|
+
baseId: c,
|
|
22
|
+
openId: u,
|
|
23
|
+
itemProps: f.getItemProps(t)
|
|
24
|
+
}, e.id))
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
function m({ menu: t, baseId: r, openId: a, itemProps: o }) {
|
|
28
|
+
s();
|
|
29
|
+
let d = f(null), p = f(null), m = a.value === t.id, g = `${r}-menu-${t.id}`, { anchorStyle: _, floatingStyle: v } = i({
|
|
30
|
+
anchorRef: d,
|
|
31
|
+
floatingRef: p,
|
|
32
|
+
placement: "bottom-start",
|
|
33
|
+
enabled: m
|
|
34
|
+
}), y = () => {
|
|
35
|
+
(p.current?.querySelector("[role=\"menuitem\"]:not([aria-disabled=\"true\"])"))?.focus();
|
|
36
|
+
}, b = (e) => {
|
|
37
|
+
o.onKeyDown(e), !e.defaultPrevented && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " " ? (e.preventDefault(), a.value = t.id, requestAnimationFrame(y)) : e.key === "Escape" && (a.value = null));
|
|
38
|
+
}, { ref: x, onKeyDown: S, ...C } = o;
|
|
39
|
+
return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("button", {
|
|
40
|
+
ref: (e) => {
|
|
41
|
+
d.current = e, x(e);
|
|
42
|
+
},
|
|
43
|
+
type: "button",
|
|
44
|
+
role: "menuitem",
|
|
45
|
+
"aria-haspopup": "menu",
|
|
46
|
+
"aria-expanded": m,
|
|
47
|
+
"aria-controls": g,
|
|
48
|
+
"data-state": m ? "open" : "closed",
|
|
49
|
+
className: e.trigger,
|
|
50
|
+
style: _,
|
|
51
|
+
onClick: () => {
|
|
52
|
+
a.value = m ? null : t.id;
|
|
53
|
+
},
|
|
54
|
+
onKeyDown: b,
|
|
55
|
+
...C,
|
|
56
|
+
children: t.label
|
|
57
|
+
}), /* @__PURE__ */ l(n, {
|
|
58
|
+
present: m,
|
|
59
|
+
children: /* @__PURE__ */ l(h, {
|
|
60
|
+
menu: t,
|
|
61
|
+
menuId: g,
|
|
62
|
+
floatingRef: p,
|
|
63
|
+
floatingStyle: v,
|
|
64
|
+
onClose: () => {
|
|
65
|
+
a.value = null, d.current?.focus();
|
|
66
|
+
}
|
|
67
|
+
})
|
|
68
|
+
})] });
|
|
69
|
+
}
|
|
70
|
+
function h({ menu: n, menuId: r, floatingRef: i, floatingStyle: a, onClose: o }) {
|
|
71
|
+
let s = (e) => {
|
|
72
|
+
let t = Array.from(i.current?.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])") ?? []);
|
|
73
|
+
if (t.length === 0) return;
|
|
74
|
+
let n = t.indexOf(e.currentTarget);
|
|
75
|
+
e.key === "ArrowDown" ? (e.preventDefault(), t[(n + 1) % t.length]?.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), t[(n - 1 + t.length) % t.length]?.focus()) : e.key === "Home" ? (e.preventDefault(), t[0]?.focus()) : e.key === "End" && (e.preventDefault(), t[t.length - 1]?.focus());
|
|
76
|
+
};
|
|
77
|
+
return /* @__PURE__ */ l(t, {
|
|
78
|
+
onDismiss: o,
|
|
79
|
+
children: /* @__PURE__ */ l("div", {
|
|
80
|
+
ref: i,
|
|
81
|
+
id: r,
|
|
82
|
+
role: "menu",
|
|
83
|
+
"aria-label": typeof n.label == "string" ? n.label : void 0,
|
|
84
|
+
className: e.panel,
|
|
85
|
+
style: a,
|
|
86
|
+
children: n.items.map((t) => /* @__PURE__ */ l("div", {
|
|
87
|
+
role: "menuitem",
|
|
88
|
+
tabIndex: -1,
|
|
89
|
+
"aria-disabled": t.disabled,
|
|
90
|
+
className: e.item,
|
|
91
|
+
onClick: () => {
|
|
92
|
+
t.disabled || (t.onSelect?.(), o());
|
|
93
|
+
},
|
|
94
|
+
onKeyDown: (e) => {
|
|
95
|
+
t.disabled || (e.key === "Enter" || e.key === " " ? (e.preventDefault(), t.onSelect?.(), o()) : s(e));
|
|
96
|
+
},
|
|
97
|
+
children: t.label
|
|
98
|
+
}, t.id))
|
|
99
|
+
})
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
//#endregion
|
|
103
|
+
export { p as Menubar };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer cascivo.component{._dialog_t1gwg_2{border-radius:var(--cascivo-radius-overlay);max-height:calc(100dvh - var(--cascivo-space-16));opacity:0;transition:opacity var(--cascivo-motion-exit), scale var(--cascivo-motion-exit), display var(--cascivo-duration-150) allow-discrete, overlay var(--cascivo-duration-150) allow-discrete;background:0 0;border:none;padding:0;overflow:visible;scale:.96}._dialog_t1gwg_2[open]{opacity:1;transition:opacity var(--cascivo-motion-enter), scale var(--cascivo-motion-enter), display var(--cascivo-duration-200) allow-discrete, overlay var(--cascivo-duration-200) allow-discrete;scale:1}@starting-style{._dialog_t1gwg_2[open]{opacity:0;scale:.96}}._dialog_t1gwg_2::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--cascivo-motion-exit), display var(--cascivo-duration-150) allow-discrete, overlay var(--cascivo-duration-150) allow-discrete;background-color:#00000080}._dialog_t1gwg_2[open]::backdrop{opacity:1;transition:opacity var(--cascivo-motion-enter), display var(--cascivo-duration-200) allow-discrete, overlay var(--cascivo-duration-200) allow-discrete}@starting-style{._dialog_t1gwg_2[open]::backdrop{opacity:0}}._dialog_t1gwg_2[data-size=sm]{--_modal-width:24rem}._dialog_t1gwg_2[data-size=md]{--_modal-width:32rem}._dialog_t1gwg_2[data-size=lg]{--_modal-width:48rem}._panel_t1gwg_69{width:var(--_modal-width,32rem);max-width:calc(100vw - var(--cascivo-space-8));background-color:var(--cascivo-color-surface-overlay);border-radius:var(--cascivo-radius-overlay);border:1px solid var(--cascivo-color-border);box-shadow:var(--cascivo-shadow-overlay);overflow:hidden}._header_t1gwg_79{padding:var(--cascivo-space-6);border-block-end:1px solid var(--cascivo-color-border);justify-content:space-between;align-items:center;padding-block-end:var(--cascivo-space-4);display:flex}._dialog_t1gwg_2[data-draggable]{translate:var(--modal-x,0) var(--modal-y,0)}._dialog_t1gwg_2[data-draggable] ._header_t1gwg_79{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}._dialog_t1gwg_2[data-draggable] ._header_t1gwg_79:active{cursor:grabbing}._title_t1gwg_101{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);margin:0}._close_t1gwg_110{width:2rem;height:2rem;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out), background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}._close_t1gwg_110:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._close_t1gwg_110:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._description_t1gwg_138{padding-inline:var(--cascivo-space-6);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-relaxed);margin:0;padding-block-start:var(--cascivo-space-4)}._body_t1gwg_148{padding:var(--cascivo-space-6)}@media (width<=40rem){._dialog_t1gwg_2{max-block-size:90dvh;margin:0}._panel_t1gwg_69{max-block-size:90dvh;inline-size:100%;max-inline-size:100%;border-start-start-radius:var(--cascivo-radius-overlay);border-start-end-radius:var(--cascivo-radius-overlay);border-end-end-radius:0;border-end-start-radius:0;padding-block-end:env(safe-area-inset-bottom,0);overflow-y:auto}}@media (prefers-reduced-motion:reduce){._dialog_t1gwg_2,._dialog_t1gwg_2[open]{transition:none}}}@media (forced-colors:active){._panel_t1gwg_69{border:1px solid buttontext}._close_t1gwg_110:focus-visible{outline-offset:2px;outline:2px solid highlight}}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import e from "./modal.module.js";
|
|
4
|
+
import { cn as t, useDraggable as n, useSignal as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
|
|
5
|
+
import { builtin as o, t as s } from "@cascivo/i18n";
|
|
6
|
+
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
7
|
+
import { useRef as u } from "react";
|
|
8
|
+
//#region ../components/src/modal/modal.tsx
|
|
9
|
+
function d({ open: d = !1, onClose: f, title: p, description: m, children: h, className: g, size: _ = "md", draggable: v = !1 }) {
|
|
10
|
+
a();
|
|
11
|
+
let y = u(null), b = u(f);
|
|
12
|
+
b.current = f;
|
|
13
|
+
let { handleRef: x, offset: S } = n({ isDisabled: !v }), C = v ? {
|
|
14
|
+
"--modal-x": `${S.value.x}px`,
|
|
15
|
+
"--modal-y": `${S.value.y}px`
|
|
16
|
+
} : void 0, w = r(d);
|
|
17
|
+
return w.value = d, i(() => {
|
|
18
|
+
let e = y.current;
|
|
19
|
+
e && (w.value ? e.open || e.showModal() : e.open && e.close());
|
|
20
|
+
}), i(() => {
|
|
21
|
+
let e = y.current;
|
|
22
|
+
if (!e) return;
|
|
23
|
+
let t = () => b.current?.();
|
|
24
|
+
return e.addEventListener("close", t), () => e.removeEventListener("close", t);
|
|
25
|
+
}), /* @__PURE__ */ c("dialog", {
|
|
26
|
+
ref: y,
|
|
27
|
+
"data-size": _,
|
|
28
|
+
"data-draggable": v || void 0,
|
|
29
|
+
className: t(e.dialog, g),
|
|
30
|
+
style: C,
|
|
31
|
+
onClick: (e) => {
|
|
32
|
+
e.target === y.current && y.current?.close();
|
|
33
|
+
},
|
|
34
|
+
onKeyDown: (e) => {
|
|
35
|
+
e.key === "Escape" && (e.preventDefault(), y.current?.close());
|
|
36
|
+
},
|
|
37
|
+
"aria-labelledby": p ? "cascade-modal-title" : void 0,
|
|
38
|
+
"aria-describedby": m ? "cascade-modal-desc" : void 0,
|
|
39
|
+
children: /* @__PURE__ */ l("div", {
|
|
40
|
+
className: e.panel,
|
|
41
|
+
children: [
|
|
42
|
+
(p || f) && /* @__PURE__ */ l("div", {
|
|
43
|
+
className: e.header,
|
|
44
|
+
ref: v ? (e) => {
|
|
45
|
+
x.current = e;
|
|
46
|
+
} : void 0,
|
|
47
|
+
children: [p && /* @__PURE__ */ c("h2", {
|
|
48
|
+
id: "cascade-modal-title",
|
|
49
|
+
className: e.title,
|
|
50
|
+
children: p
|
|
51
|
+
}), f && /* @__PURE__ */ c("button", {
|
|
52
|
+
type: "button",
|
|
53
|
+
className: e.close,
|
|
54
|
+
onClick: () => y.current?.close(),
|
|
55
|
+
"aria-label": s(o.modal.close),
|
|
56
|
+
children: "✕"
|
|
57
|
+
})]
|
|
58
|
+
}),
|
|
59
|
+
m && /* @__PURE__ */ c("p", {
|
|
60
|
+
id: "cascade-modal-desc",
|
|
61
|
+
className: e.description,
|
|
62
|
+
children: m
|
|
63
|
+
}),
|
|
64
|
+
/* @__PURE__ */ c("div", {
|
|
65
|
+
className: e.body,
|
|
66
|
+
children: h
|
|
67
|
+
})
|
|
68
|
+
]
|
|
69
|
+
})
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
//#endregion
|
|
73
|
+
export { d as Modal };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import './modal.css';
|
|
4
|
+
var e = {
|
|
5
|
+
dialog: "_dialog_t1gwg_2",
|
|
6
|
+
panel: "_panel_t1gwg_69",
|
|
7
|
+
header: "_header_t1gwg_79",
|
|
8
|
+
title: "_title_t1gwg_101",
|
|
9
|
+
close: "_close_t1gwg_110",
|
|
10
|
+
description: "_description_t1gwg_138",
|
|
11
|
+
body: "_body_t1gwg_148"
|
|
12
|
+
};
|
|
13
|
+
//#endregion
|
|
14
|
+
export { e as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer cascivo.component{._wrapper_nkk1l_2{width:100%;display:inline-block;position:relative}._trigger_nkk1l_8{width:100%;height:2.5rem;padding-inline:var(--cascivo-space-4);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);cursor:pointer;text-align:start;transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out);justify-content:space-between;align-items:center;display:flex}._trigger_nkk1l_8:hover:not(:disabled){border-color:var(--cascivo-color-border-strong)}._trigger_nkk1l_8:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:var(--cascivo-focus-ring);outline:none}._trigger_nkk1l_8:disabled{opacity:.5;cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._trigger_nkk1l_8[aria-expanded=true]{border-color:var(--cascivo-color-accent);box-shadow:var(--cascivo-focus-ring)}._trigger-label_nkk1l_47{text-overflow:ellipsis;white-space:nowrap;color:var(--cascivo-color-text-muted);overflow:hidden}._chevron_nkk1l_59{width:1rem;height:1rem;background-color:var(--cascivo-color-text-muted);transition:transform var(--cascivo-duration-150) var(--cascivo-ease-out);flex-shrink:0;margin-inline-start:var(--cascivo-space-2);display:block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}._trigger_nkk1l_8[aria-expanded=true] ._chevron_nkk1l_59{transform:rotate(180deg)}._panel_nkk1l_79{position-area:block-end span-inline-end;position-try-fallbacks:--bottom-start, block-start span-inline-end;padding:var(--cascivo-space-1);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);min-width:12rem;max-height:16rem;box-shadow:var(--cascivo-shadow-md);opacity:0;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;flex-direction:column;margin-block-start:var(--cascivo-space-1);display:flex;overflow:hidden;translate:0 -.25rem}._panel_nkk1l_79:popover-open{opacity:1;translate:0}@starting-style{._panel_nkk1l_79:popover-open{opacity:0;translate:0 -.25rem}}._search-row_nkk1l_117{padding-block-end:var(--cascivo-space-1)}._search_nkk1l_117{width:100%;height:2rem;padding-inline:var(--cascivo-space-3);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);outline:none}._search_nkk1l_117:focus{border-color:var(--cascivo-color-accent)}._options_nkk1l_138{flex:1;overflow-y:auto}._option_nkk1l_138{align-items:center;gap:var(--cascivo-space-2);padding-block:var(--cascivo-space-1-5);padding-inline:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);border-radius:var(--cascivo-radius-item);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}._option_nkk1l_138[data-active]{background-color:var(--cascivo-color-bg-subtle)}._option_nkk1l_138[data-disabled]{opacity:.5;cursor:not-allowed}._checkbox_nkk1l_166{border:1.5px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-indicator);background-color:var(--cascivo-color-surface);width:1rem;height:1rem;transition:background-color var(--cascivo-duration-100) var(--cascivo-ease-out);flex-shrink:0}._option_nkk1l_138[data-selected] ._checkbox_nkk1l_166{background-color:var(--cascivo-color-accent);border-color:var(--cascivo-color-accent)}._no-results_nkk1l_181{padding-block:var(--cascivo-space-3);padding-inline:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted);text-align:center}}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { usePopover as e } from "../popover/use-popover.js";
|
|
4
|
+
import t from "./multi-select.module.js";
|
|
5
|
+
import { cn as n, useComputed as r, useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
|
|
6
|
+
import { builtin as s, t as c } from "@cascivo/i18n";
|
|
7
|
+
import { jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
8
|
+
import { useRef as d } from "react";
|
|
9
|
+
//#region ../components/src/multi-select/multi-select.tsx
|
|
10
|
+
function f({ options: f, value: p, onValueChange: m, placeholder: h, disabled: g = !1, labels: _, className: v, ...y }) {
|
|
11
|
+
o();
|
|
12
|
+
let b = e({ placement: "bottom" }), x = i(""), S = i(-1), C = d(null), w = d(null), T = r(() => {
|
|
13
|
+
let e = x.value.toLowerCase();
|
|
14
|
+
return e ? f.filter((t) => t.label.toLowerCase().includes(e)) : f;
|
|
15
|
+
});
|
|
16
|
+
a(() => {
|
|
17
|
+
b.isOpen.value ? (S.value = -1, setTimeout(() => w.current?.focus(), 0)) : x.value = "";
|
|
18
|
+
}), a(() => {
|
|
19
|
+
let e = C.current;
|
|
20
|
+
if (!e || !b.isOpen.value) return;
|
|
21
|
+
let t = (e) => {
|
|
22
|
+
let t = T.value;
|
|
23
|
+
if (e.key === "ArrowDown") e.preventDefault(), S.value = Math.min(S.value + 1, t.length - 1);
|
|
24
|
+
else if (e.key === "ArrowUp") e.preventDefault(), S.value = Math.max(S.value - 1, -1);
|
|
25
|
+
else if (e.key === " " || e.key === "Enter") {
|
|
26
|
+
let n = t[S.value];
|
|
27
|
+
n && !n.disabled && (e.preventDefault(), E(n.value));
|
|
28
|
+
} else e.key === "Escape" && b.close();
|
|
29
|
+
};
|
|
30
|
+
return e.addEventListener("keydown", t), () => e.removeEventListener("keydown", t);
|
|
31
|
+
});
|
|
32
|
+
function E(e) {
|
|
33
|
+
p.includes(e) ? m(p.filter((t) => t !== e)) : m([...p, e]);
|
|
34
|
+
}
|
|
35
|
+
let D = p.length === 0 ? h ?? _?.placeholder ?? c(s.multiSelect.placeholder) : _?.selected ? _.selected(p.length) : c(s.multiSelect.selected, { count: String(p.length) }), O = _?.search ?? c(s.multiSelect.search), k = _?.noResults ?? c(s.multiSelect.noResults);
|
|
36
|
+
return /* @__PURE__ */ u("div", {
|
|
37
|
+
className: n(t.wrapper, v),
|
|
38
|
+
...y,
|
|
39
|
+
children: [/* @__PURE__ */ u("button", {
|
|
40
|
+
ref: b.triggerRef,
|
|
41
|
+
type: "button",
|
|
42
|
+
className: t.trigger,
|
|
43
|
+
"aria-haspopup": "listbox",
|
|
44
|
+
"aria-expanded": b.isOpen.value,
|
|
45
|
+
disabled: g,
|
|
46
|
+
style: { anchorName: b.anchorName },
|
|
47
|
+
onClick: () => b.toggle(),
|
|
48
|
+
children: [/* @__PURE__ */ l("span", {
|
|
49
|
+
className: t["trigger-label"],
|
|
50
|
+
children: D
|
|
51
|
+
}), /* @__PURE__ */ l("span", {
|
|
52
|
+
className: t.chevron,
|
|
53
|
+
"aria-hidden": "true"
|
|
54
|
+
})]
|
|
55
|
+
}), /* @__PURE__ */ u("div", {
|
|
56
|
+
ref: b.popoverRef,
|
|
57
|
+
popover: "auto",
|
|
58
|
+
role: "listbox",
|
|
59
|
+
"aria-multiselectable": "true",
|
|
60
|
+
className: t.panel,
|
|
61
|
+
style: { positionAnchor: b.anchorName },
|
|
62
|
+
tabIndex: -1,
|
|
63
|
+
children: [/* @__PURE__ */ l("div", {
|
|
64
|
+
className: t["search-row"],
|
|
65
|
+
children: /* @__PURE__ */ l("input", {
|
|
66
|
+
ref: w,
|
|
67
|
+
type: "search",
|
|
68
|
+
className: t.search,
|
|
69
|
+
placeholder: O,
|
|
70
|
+
value: x.value,
|
|
71
|
+
onChange: (e) => {
|
|
72
|
+
x.value = e.currentTarget.value, S.value = -1;
|
|
73
|
+
}
|
|
74
|
+
})
|
|
75
|
+
}), /* @__PURE__ */ l("div", {
|
|
76
|
+
ref: C,
|
|
77
|
+
className: t.options,
|
|
78
|
+
children: T.value.length === 0 ? /* @__PURE__ */ l("div", {
|
|
79
|
+
className: t["no-results"],
|
|
80
|
+
children: k
|
|
81
|
+
}) : T.value.map((e, n) => /* @__PURE__ */ u("div", {
|
|
82
|
+
role: "option",
|
|
83
|
+
"aria-selected": p.includes(e.value),
|
|
84
|
+
"aria-disabled": e.disabled,
|
|
85
|
+
"data-active": n === S.value ? "" : void 0,
|
|
86
|
+
"data-selected": p.includes(e.value) ? "" : void 0,
|
|
87
|
+
"data-disabled": e.disabled ? "" : void 0,
|
|
88
|
+
className: t.option,
|
|
89
|
+
onMouseDown: (t) => {
|
|
90
|
+
t.preventDefault(), e.disabled || E(e.value);
|
|
91
|
+
},
|
|
92
|
+
onMouseEnter: () => {
|
|
93
|
+
S.value = n;
|
|
94
|
+
},
|
|
95
|
+
children: [/* @__PURE__ */ l("span", {
|
|
96
|
+
className: t.checkbox,
|
|
97
|
+
"aria-hidden": "true"
|
|
98
|
+
}), e.label]
|
|
99
|
+
}, e.value))
|
|
100
|
+
})]
|
|
101
|
+
})]
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
//#endregion
|
|
105
|
+
export { f as MultiSelect };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import './multi-select.css';
|
|
4
|
+
var e = {
|
|
5
|
+
wrapper: "_wrapper_nkk1l_2",
|
|
6
|
+
trigger: "_trigger_nkk1l_8",
|
|
7
|
+
"trigger-label": "_trigger-label_nkk1l_47",
|
|
8
|
+
chevron: "_chevron_nkk1l_59",
|
|
9
|
+
panel: "_panel_nkk1l_79",
|
|
10
|
+
"search-row": "_search-row_nkk1l_117",
|
|
11
|
+
search: "_search_nkk1l_117",
|
|
12
|
+
options: "_options_nkk1l_138",
|
|
13
|
+
option: "_option_nkk1l_138",
|
|
14
|
+
checkbox: "_checkbox_nkk1l_166",
|
|
15
|
+
"no-results": "_no-results_nkk1l_181"
|
|
16
|
+
};
|
|
17
|
+
//#endregion
|
|
18
|
+
export { e as default };
|