@cascivo/react 0.5.1 → 0.6.2
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 +1 -1
- package/dist/command-menu/command-menu.css +1 -1
- package/dist/command-menu/command-menu.js +284 -122
- package/dist/command-menu/command-menu.module.js +30 -15
- package/dist/form/form.js +17 -10
- package/dist/index.d.ts +230 -4
- package/dist/layouts/src/auto-grid/auto-grid.css +1 -0
- package/dist/layouts/src/auto-grid/auto-grid.js +19 -0
- package/dist/layouts/src/auto-grid/auto-grid.module.js +7 -0
- package/dist/layouts/src/center/center.css +1 -0
- package/dist/layouts/src/center/center.js +18 -0
- package/dist/layouts/src/center/center.module.js +6 -0
- package/dist/layouts/src/columns/columns.css +1 -0
- package/dist/layouts/src/columns/columns.js +19 -0
- package/dist/layouts/src/columns/columns.module.js +6 -0
- package/dist/layouts/src/flex/flex.css +1 -0
- package/dist/layouts/src/flex/flex.js +22 -0
- package/dist/layouts/src/flex/flex.module.js +6 -0
- package/dist/layouts/src/grid/grid.css +1 -0
- package/dist/layouts/src/grid/grid.js +54 -0
- package/dist/layouts/src/grid/grid.module.js +9 -0
- package/dist/layouts/src/spacer/spacer.css +1 -0
- package/dist/layouts/src/spacer/spacer.js +19 -0
- package/dist/layouts/src/spacer/spacer.module.js +6 -0
- package/dist/react/src/index.js +93 -86
- package/dist/react/src/theme.js +43 -0
- package/dist/storage/src/drivers.js +36 -0
- package/dist/storage/src/persisted-signal.js +43 -0
- package/dist/styles.css +31 -10
- package/package.json +2 -2
- package/readme.body.md +1 -1
package/dist/react/src/index.js
CHANGED
|
@@ -43,89 +43,96 @@ import { OverflowMenu as Q } from "../../overflow-menu/overflow-menu.js";
|
|
|
43
43
|
import { Search as $ } from "../../search/search.js";
|
|
44
44
|
import { NumberInput as ee } from "../../number-input/number-input.js";
|
|
45
45
|
import { DataTable as te } from "../../data-table/data-table.js";
|
|
46
|
-
import { CommandMenu as ne,
|
|
47
|
-
import { Form as
|
|
48
|
-
import { Combobox as
|
|
49
|
-
import { DatePicker as
|
|
50
|
-
import { FileUploader as
|
|
51
|
-
import { TimePicker as
|
|
52
|
-
import { Popover as
|
|
53
|
-
import { Menu as
|
|
54
|
-
import { AlertDialog as
|
|
55
|
-
import { Sheet as
|
|
56
|
-
import { BottomSheet as
|
|
57
|
-
import { ContextMenu as
|
|
58
|
-
import { Comparison as
|
|
59
|
-
import { HoverCard as
|
|
60
|
-
import { PasswordInput as
|
|
61
|
-
import { MultiSelect as
|
|
62
|
-
import { TagsInput as
|
|
63
|
-
import { OtpInput as
|
|
64
|
-
import { SegmentedControl as
|
|
65
|
-
import { InputGroup as
|
|
66
|
-
import { RatingGroup as
|
|
67
|
-
import { Editable as
|
|
68
|
-
import { RadioCard as
|
|
69
|
-
import { ShellHeader as
|
|
70
|
-
import { HeaderPanel as
|
|
71
|
-
import { Switcher as
|
|
72
|
-
import { CheckboxCard as
|
|
73
|
-
import { CopyButton as
|
|
74
|
-
import { Stat as
|
|
75
|
-
import { Status as
|
|
76
|
-
import { VisuallyHidden as
|
|
77
|
-
import { SkipNavLink as
|
|
78
|
-
import { Progress as
|
|
79
|
-
import { ProgressCircle as
|
|
80
|
-
import { Heading as
|
|
81
|
-
import { Text as
|
|
82
|
-
import { Code as
|
|
83
|
-
import { Blockquote as
|
|
84
|
-
import { List as
|
|
85
|
-
import { LogViewer as
|
|
86
|
-
import { Prose as
|
|
87
|
-
import { PullToRefresh as
|
|
88
|
-
import { QrCode as
|
|
89
|
-
import { RelativeTime as
|
|
90
|
-
import { Label as
|
|
91
|
-
import { Field as
|
|
92
|
-
import { Filter as
|
|
93
|
-
import { IconButton as
|
|
94
|
-
import { ButtonGroup as
|
|
95
|
-
import { ToggleGroup as
|
|
96
|
-
import { InlineLoading as
|
|
97
|
-
import { Notification as
|
|
98
|
-
import { ScrollArea as
|
|
99
|
-
import { Collapsible as
|
|
100
|
-
import { AspectRatio as
|
|
101
|
-
import { MenuButton as
|
|
102
|
-
import { Toggletip as
|
|
103
|
-
import { Menubar as
|
|
104
|
-
import { NavigationMenu as
|
|
105
|
-
import { TreeView as
|
|
106
|
-
import { StructuredList as
|
|
107
|
-
import { ContainedList as
|
|
108
|
-
import { DataList as
|
|
109
|
-
import { Timeline as
|
|
110
|
-
import { Item as
|
|
111
|
-
import { Calendar as
|
|
112
|
-
import { DateRangePicker as
|
|
113
|
-
import { ColorPicker as
|
|
114
|
-
import { Carousel as
|
|
115
|
-
import { Resizable as
|
|
116
|
-
import { Dock as
|
|
117
|
-
import { Drawer as
|
|
118
|
-
import { NativeSelect as
|
|
119
|
-
import { CodeSnippet as
|
|
120
|
-
import { Steps as
|
|
121
|
-
import { Tile as
|
|
122
|
-
import { Indicator as
|
|
123
|
-
import { Join as
|
|
124
|
-
import { Stack as
|
|
125
|
-
import { AppShell as
|
|
126
|
-
import { ChatBubble as
|
|
127
|
-
import { RadialProgress as
|
|
128
|
-
import { Swap as
|
|
129
|
-
import { SwipeItem as
|
|
130
|
-
import {
|
|
131
|
-
|
|
46
|
+
import { CommandMenu as ne, fuzzyMatch as re, fuzzyScore as ie } from "../../command-menu/command-menu.js";
|
|
47
|
+
import { Form as ae, createForm as oe, useForm as se } from "../../form/form.js";
|
|
48
|
+
import { Combobox as ce } from "../../combobox/combobox.js";
|
|
49
|
+
import { DatePicker as le } from "../../date-picker/date-picker.js";
|
|
50
|
+
import { FileUploader as ue } from "../../file-uploader/file-uploader.js";
|
|
51
|
+
import { TimePicker as de } from "../../time-picker/time-picker.js";
|
|
52
|
+
import { Popover as fe, PopoverContent as pe, PopoverTrigger as me } from "../../popover/popover.js";
|
|
53
|
+
import { Menu as he, MenuItem as ge, MenuSeparator as _e, MenuTrigger as ve } from "../../menu/menu.js";
|
|
54
|
+
import { AlertDialog as ye } from "../../alert-dialog/alert-dialog.js";
|
|
55
|
+
import { Sheet as be } from "../../sheet/sheet.js";
|
|
56
|
+
import { BottomSheet as xe } from "../../bottom-sheet/bottom-sheet.js";
|
|
57
|
+
import { ContextMenu as Se, ContextMenuItem as Ce } from "../../context-menu/context-menu.js";
|
|
58
|
+
import { Comparison as we } from "../../comparison/comparison.js";
|
|
59
|
+
import { HoverCard as Te, HoverCardContent as Ee, HoverCardTrigger as De } from "../../hover-card/hover-card.js";
|
|
60
|
+
import { PasswordInput as Oe } from "../../password-input/password-input.js";
|
|
61
|
+
import { MultiSelect as ke } from "../../multi-select/multi-select.js";
|
|
62
|
+
import { TagsInput as Ae } from "../../tags-input/tags-input.js";
|
|
63
|
+
import { OtpInput as je } from "../../otp-input/otp-input.js";
|
|
64
|
+
import { SegmentedControl as Me } from "../../segmented-control/segmented-control.js";
|
|
65
|
+
import { InputGroup as Ne, InputGroupAddon as Pe } from "../../input-group/input-group.js";
|
|
66
|
+
import { RatingGroup as Fe } from "../../rating-group/rating-group.js";
|
|
67
|
+
import { Editable as Ie } from "../../editable/editable.js";
|
|
68
|
+
import { RadioCard as Le, RadioCardGroup as Re } from "../../radio-card/radio-card.js";
|
|
69
|
+
import { ShellHeader as ze } from "../../shell-header/shell-header.js";
|
|
70
|
+
import { HeaderPanel as Be } from "../../header-panel/header-panel.js";
|
|
71
|
+
import { Switcher as Ve } from "../../switcher/switcher.js";
|
|
72
|
+
import { CheckboxCard as He } from "../../checkbox-card/checkbox-card.js";
|
|
73
|
+
import { CopyButton as Ue } from "../../copy-button/copy-button.js";
|
|
74
|
+
import { Stat as We } from "../../stat/stat.js";
|
|
75
|
+
import { Status as Ge } from "../../status/status.js";
|
|
76
|
+
import { VisuallyHidden as Ke } from "../../visually-hidden/visually-hidden.js";
|
|
77
|
+
import { SkipNavLink as qe, SkipNavTarget as Je } from "../../skip-nav/skip-nav.js";
|
|
78
|
+
import { Progress as Ye } from "../../progress/progress.js";
|
|
79
|
+
import { ProgressCircle as Xe } from "../../progress-circle/progress-circle.js";
|
|
80
|
+
import { Heading as Ze } from "../../heading/heading.js";
|
|
81
|
+
import { Text as Qe } from "../../text/text.js";
|
|
82
|
+
import { Code as $e } from "../../code/code.js";
|
|
83
|
+
import { Blockquote as et } from "../../blockquote/blockquote.js";
|
|
84
|
+
import { List as tt, ListItem as nt } from "../../list/list.js";
|
|
85
|
+
import { LogViewer as rt } from "../../log-viewer/log-viewer.js";
|
|
86
|
+
import { Prose as it } from "../../prose/prose.js";
|
|
87
|
+
import { PullToRefresh as at } from "../../pull-to-refresh/pull-to-refresh.js";
|
|
88
|
+
import { QrCode as ot } from "../../qr-code/qr-code.js";
|
|
89
|
+
import { RelativeTime as st } from "../../relative-time/relative-time.js";
|
|
90
|
+
import { Label as ct } from "../../label/label.js";
|
|
91
|
+
import { Field as lt } from "../../field/field.js";
|
|
92
|
+
import { Filter as ut } from "../../filter/filter.js";
|
|
93
|
+
import { IconButton as dt } from "../../icon-button/icon-button.js";
|
|
94
|
+
import { ButtonGroup as ft } from "../../button-group/button-group.js";
|
|
95
|
+
import { ToggleGroup as pt } from "../../toggle-group/toggle-group.js";
|
|
96
|
+
import { InlineLoading as mt } from "../../inline-loading/inline-loading.js";
|
|
97
|
+
import { Notification as ht } from "../../notification/notification.js";
|
|
98
|
+
import { ScrollArea as gt } from "../../scroll-area/scroll-area.js";
|
|
99
|
+
import { Collapsible as _t } from "../../collapsible/collapsible.js";
|
|
100
|
+
import { AspectRatio as vt } from "../../aspect-ratio/aspect-ratio.js";
|
|
101
|
+
import { MenuButton as yt } from "../../menu-button/menu-button.js";
|
|
102
|
+
import { Toggletip as bt } from "../../toggletip/toggletip.js";
|
|
103
|
+
import { Menubar as xt } from "../../menubar/menubar.js";
|
|
104
|
+
import { NavigationMenu as St } from "../../navigation-menu/navigation-menu.js";
|
|
105
|
+
import { TreeView as Ct, treeViewMessages as wt } from "../../tree-view/tree-view.js";
|
|
106
|
+
import { StructuredList as Tt } from "../../structured-list/structured-list.js";
|
|
107
|
+
import { ContainedList as Et, ContainedListItem as Dt } from "../../contained-list/contained-list.js";
|
|
108
|
+
import { DataList as Ot } from "../../data-list/data-list.js";
|
|
109
|
+
import { Timeline as kt } from "../../timeline/timeline.js";
|
|
110
|
+
import { Item as At, ItemActions as jt, ItemContent as Mt, ItemDescription as Nt, ItemMedia as Pt, ItemTitle as Ft } from "../../item/item.js";
|
|
111
|
+
import { Calendar as It } from "../../calendar/calendar.js";
|
|
112
|
+
import { DateRangePicker as Lt } from "../../date-range-picker/date-range-picker.js";
|
|
113
|
+
import { ColorPicker as Rt } from "../../color-picker/color-picker.js";
|
|
114
|
+
import { Carousel as zt } from "../../carousel/carousel.js";
|
|
115
|
+
import { Resizable as Bt } from "../../resizable/resizable.js";
|
|
116
|
+
import { Dock as Vt } from "../../dock/dock.js";
|
|
117
|
+
import { Drawer as Ht } from "../../drawer/drawer.js";
|
|
118
|
+
import { NativeSelect as Ut } from "../../native-select/native-select.js";
|
|
119
|
+
import { CodeSnippet as Wt } from "../../code-snippet/code-snippet.js";
|
|
120
|
+
import { Steps as Gt } from "../../steps/steps.js";
|
|
121
|
+
import { Tile as Kt } from "../../tile/tile.js";
|
|
122
|
+
import { Indicator as qt } from "../../indicator/indicator.js";
|
|
123
|
+
import { Join as Jt } from "../../join/join.js";
|
|
124
|
+
import { Stack as Yt } from "../../stack/stack.js";
|
|
125
|
+
import { AppShell as Xt } from "../../app-shell/app-shell.js";
|
|
126
|
+
import { ChatBubble as Zt } from "../../chat-bubble/chat-bubble.js";
|
|
127
|
+
import { RadialProgress as Qt } from "../../radial-progress/radial-progress.js";
|
|
128
|
+
import { Swap as $t } from "../../swap/swap.js";
|
|
129
|
+
import { SwipeItem as en } from "../../swipe-item/swipe-item.js";
|
|
130
|
+
import { Grid as tn, GridItem as nn } from "../../layouts/src/grid/grid.js";
|
|
131
|
+
import { Flex as rn } from "../../layouts/src/flex/flex.js";
|
|
132
|
+
import { Columns as an } from "../../layouts/src/columns/columns.js";
|
|
133
|
+
import { Center as on } from "../../layouts/src/center/center.js";
|
|
134
|
+
import { Spacer as sn } from "../../layouts/src/spacer/spacer.js";
|
|
135
|
+
import { AutoGrid as cn } from "../../layouts/src/auto-grid/auto-grid.js";
|
|
136
|
+
import { ThemeProvider as ln, setTheme as un, themePreloadScript as dn, useTheme as fn } from "./theme.js";
|
|
137
|
+
import { ErrorBoundary as pn, FocusScope as mn, Portal as hn, SuspenseBoundary as gn } from "@cascivo/core";
|
|
138
|
+
export { M as Accordion, N as AccordionContent, P as AccordionItem, F as AccordionTrigger, I as ActionSheet, d as Alert, ye as AlertDialog, Xt as AppShell, vt as AspectRatio, cn as AutoGrid, f as Avatar, p as AvatarGroup, c as Badge, et as Blockquote, xe as BottomSheet, z as Breadcrumb, t as Button, ft as ButtonGroup, It as Calendar, r as Card, i as CardContent, a as CardFooter, o as CardHeader, s as CardTitle, zt as Carousel, on as Center, Zt as ChatBubble, v as Checkbox, He as CheckboxCard, $e as Code, Wt as CodeSnippet, _t as Collapsible, Rt as ColorPicker, an as Columns, ce as Combobox, ne as CommandMenu, we as Comparison, Et as ContainedList, Dt as ContainedListItem, Se as ContextMenu, Ce as ContextMenuItem, Ue as CopyButton, Ot as DataList, te as DataTable, le as DatePicker, Lt as DateRangePicker, Vt as Dock, Ht as Drawer, w as Dropdown, Ie as Editable, X as EmptyState, pn as ErrorBoundary, Z as Fab, lt as Field, ue as FileUploader, ut as Filter, rn as Flex, mn as FocusScope, ae as Form, tn as Grid, nn as GridItem, H as Header, Be as HeaderPanel, Ze as Heading, Te as HoverCard, Ee as HoverCardContent, De as HoverCardTrigger, dt as IconButton, h as Image, qt as Indicator, mt as InlineLoading, n as Input, Ne as InputGroup, Pe as InputGroupAddon, At as Item, jt as ItemActions, Mt as ItemContent, Nt as ItemDescription, Pt as ItemMedia, Ft as ItemTitle, Jt as Join, L as Kbd, ct as Label, R as Link, tt as List, nt as ListItem, rt as LogViewer, he as Menu, yt as MenuButton, ge as MenuItem, _e as MenuSeparator, ve as MenuTrigger, xt as Menubar, l as Modal, ke as MultiSelect, Ut as NativeSelect, St as NavigationMenu, ht as Notification, ee as NumberInput, je as OtpInput, Q as OverflowMenu, G as Pagination, Oe as PasswordInput, fe as Popover, pe as PopoverContent, me as PopoverTrigger, hn as Portal, Ye as Progress, Y as ProgressBar, Xe as ProgressCircle, K as ProgressIndicator, it as Prose, at as PullToRefresh, ot as QrCode, Qt as RadialProgress, y as Radio, Le as RadioCard, Re as RadioCardGroup, b as RadioGroup, Fe as RatingGroup, st as RelativeTime, Bt as Resizable, gt as ScrollArea, $ as Search, Me as SegmentedControl, _ as Select, u as Separator, be as Sheet, ze as ShellHeader, W as SideNav, J as Skeleton, qe as SkipNavLink, Je as SkipNavTarget, S as Slider, sn as Spacer, e as Spinner, Yt as Stack, We as Stat, Ge as Status, Gt as Steps, Tt as StructuredList, gn as SuspenseBoundary, $t as Swap, en as SwipeItem, Ve as Switcher, O as Tabs, k as TabsContent, A as TabsList, j as TabsTrigger, q as Tag, Ae as TagsInput, Qe as Text, g as Textarea, ln as ThemeProvider, Kt as Tile, de as TimePicker, kt as Timeline, T as ToastProvider, B as Toc, x as Toggle, pt as ToggleGroup, bt as Toggletip, C as Tooltip, Ct as TreeView, m as User, Ke as VisuallyHidden, oe as createForm, E as dismissAllToasts, re as fuzzyMatch, ie as fuzzyScore, un as setTheme, dn as themePreloadScript, wt as treeViewMessages, se as useForm, U as usePopover, fn as useTheme, D as useToast, V as useTocFromRegion };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { persistedSignal as e } from "../../storage/src/persisted-signal.js";
|
|
4
|
+
import { useSignalEffect as t, useSignals as n } from "@cascivo/core";
|
|
5
|
+
import { Fragment as r, jsx as i } from "react/jsx-runtime";
|
|
6
|
+
import { useRef as a } from "react";
|
|
7
|
+
//#region src/theme.tsx
|
|
8
|
+
var o = "cascivo-theme", s = "data-theme", c = null, l = {
|
|
9
|
+
storageKey: o,
|
|
10
|
+
defaultTheme: "light"
|
|
11
|
+
};
|
|
12
|
+
function u(e) {
|
|
13
|
+
return typeof window > "u" || typeof window.matchMedia != "function" ? e : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : e;
|
|
14
|
+
}
|
|
15
|
+
function d() {
|
|
16
|
+
return c ??= e(l.storageKey, u(l.defaultTheme)), c;
|
|
17
|
+
}
|
|
18
|
+
function f(e) {
|
|
19
|
+
d().value = e;
|
|
20
|
+
}
|
|
21
|
+
function p() {
|
|
22
|
+
return n(), [d(), f];
|
|
23
|
+
}
|
|
24
|
+
function m({ defaultTheme: e, value: n, storageKey: u = o, attribute: f = s, target: p, onChange: m, children: h }) {
|
|
25
|
+
let g = a(!1);
|
|
26
|
+
g.current || (g.current = !0, (c === null || l.storageKey !== u) && (l = {
|
|
27
|
+
storageKey: u,
|
|
28
|
+
defaultTheme: e ?? "light"
|
|
29
|
+
}, c = null));
|
|
30
|
+
let _ = d();
|
|
31
|
+
n !== void 0 && (_.value = n);
|
|
32
|
+
let v = a(m);
|
|
33
|
+
return v.current = m, t(() => {
|
|
34
|
+
let e = _.value;
|
|
35
|
+
(p ? p.current : typeof document < "u" ? document.documentElement : null)?.setAttribute(f, e), v.current?.(e);
|
|
36
|
+
}), /* @__PURE__ */ i(r, { children: h });
|
|
37
|
+
}
|
|
38
|
+
function h(e = {}) {
|
|
39
|
+
let t = JSON.stringify(e.storageKey ?? o), n = JSON.stringify(e.attribute ?? s);
|
|
40
|
+
return `(function(){try{var v=${JSON.stringify(e.defaultTheme ?? "light")};if(typeof matchMedia==='function'){if(matchMedia('(prefers-color-scheme: dark)').matches)v='dark';else if(matchMedia('(prefers-color-scheme: light)').matches)v='light';}var raw=localStorage.getItem(${t});if(raw){v=raw;try{var e=JSON.parse(raw);if(e&&typeof e==='object'&&'value'in e)v=e.value;}catch(_){}}document.documentElement.setAttribute(${n},v);}catch(_){}})();`;
|
|
41
|
+
}
|
|
42
|
+
//#endregion
|
|
43
|
+
export { m as ThemeProvider, f as setTheme, h as themePreloadScript, p as useTheme };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
//#region ../storage/src/drivers.ts
|
|
4
|
+
function e() {
|
|
5
|
+
let e = /* @__PURE__ */ new Map();
|
|
6
|
+
return {
|
|
7
|
+
get: (t) => e.get(t) ?? null,
|
|
8
|
+
set: (t, n) => {
|
|
9
|
+
e.set(t, n);
|
|
10
|
+
},
|
|
11
|
+
remove: (t) => {
|
|
12
|
+
e.delete(t);
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
function t() {
|
|
17
|
+
return typeof window > "u" ? e() : {
|
|
18
|
+
get: (e) => window.localStorage.getItem(e),
|
|
19
|
+
set: (e, t) => {
|
|
20
|
+
try {
|
|
21
|
+
window.localStorage.setItem(e, t);
|
|
22
|
+
} catch {}
|
|
23
|
+
},
|
|
24
|
+
remove: (e) => {
|
|
25
|
+
window.localStorage.removeItem(e);
|
|
26
|
+
},
|
|
27
|
+
subscribe(e, t) {
|
|
28
|
+
let n = (n) => {
|
|
29
|
+
n.storageArea === window.localStorage && n.key === e && t(n.newValue);
|
|
30
|
+
};
|
|
31
|
+
return window.addEventListener("storage", n), () => window.removeEventListener("storage", n);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
//#endregion
|
|
36
|
+
export { t as localStorageDriver };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { localStorageDriver as e } from "./drivers.js";
|
|
4
|
+
import { effect as t, signal as n } from "@cascivo/core";
|
|
5
|
+
//#region ../storage/src/persisted-signal.ts
|
|
6
|
+
function r(r, i, a = {}) {
|
|
7
|
+
let o = a.driver ?? e(), s = a.version ?? 1, c = n(i), l = n(!1), u = !1;
|
|
8
|
+
function d(e) {
|
|
9
|
+
if (e !== null) try {
|
|
10
|
+
let t = JSON.parse(e);
|
|
11
|
+
if (typeof t != "object" || !t || typeof t.v != "number") return;
|
|
12
|
+
if (t.v !== s) {
|
|
13
|
+
if (!a.migrate) return;
|
|
14
|
+
let e = a.migrate(t.value, t.v);
|
|
15
|
+
return o.set(r, JSON.stringify({
|
|
16
|
+
v: s,
|
|
17
|
+
value: e
|
|
18
|
+
})), e;
|
|
19
|
+
}
|
|
20
|
+
return t.value;
|
|
21
|
+
} catch {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
function f(e) {
|
|
26
|
+
let t = d(e);
|
|
27
|
+
t !== void 0 && (u = !0, c.value = t, u = !1);
|
|
28
|
+
}
|
|
29
|
+
let p = o.get(r);
|
|
30
|
+
p instanceof Promise ? p.then((e) => {
|
|
31
|
+
f(e), l.value = !0;
|
|
32
|
+
}) : (f(p), l.value = !0), t(() => {
|
|
33
|
+
let e = c.value;
|
|
34
|
+
!l.value || u || o.set(r, JSON.stringify({
|
|
35
|
+
v: s,
|
|
36
|
+
value: e
|
|
37
|
+
}));
|
|
38
|
+
}), o.subscribe?.(r, f);
|
|
39
|
+
let m = c;
|
|
40
|
+
return m.ready = l, m;
|
|
41
|
+
}
|
|
42
|
+
//#endregion
|
|
43
|
+
export { r as persistedSignal };
|
package/dist/styles.css
CHANGED
|
@@ -11,22 +11,31 @@
|
|
|
11
11
|
*
|
|
12
12
|
* cascivo.reset consumer reset (box-sizing, margin/padding zeroing) — the floor
|
|
13
13
|
* cascivo.base minimal html font/color reset (@cascivo/themes/base.css)
|
|
14
|
-
* cascivo.tokens primitive design tokens (@cascivo/tokens)
|
|
14
|
+
* cascivo.tokens primitive design tokens + @function helpers (@cascivo/tokens)
|
|
15
15
|
* cascivo.component component + layout styles
|
|
16
16
|
* cascivo.theme semantic token values per [data-theme] (@cascivo/themes/*)
|
|
17
|
-
* cascivo.
|
|
17
|
+
* cascivo.blocks shipped composite blocks — each block gets its own
|
|
18
|
+
* cascivo.blocks.<name> sublayer (packages/components/src/blocks/*)
|
|
19
|
+
* cascivo.override consumer escape hatch — beats tokens, components, themes, and blocks
|
|
18
20
|
*
|
|
19
21
|
* theme > component matches the CLI scaffold and every example app: themes own
|
|
20
|
-
* the semantic tier, so a theme always wins over component defaults.
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
22
|
+
* the semantic tier, so a theme always wins over component defaults. Shipped blocks
|
|
23
|
+
* (registry copy-paste source under packages/components/src/blocks/) sit just above
|
|
24
|
+
* theme so a block can re-tune a component-tier token inside its own subtree; each
|
|
25
|
+
* declares a `@layer cascivo.blocks.<name> { … }` sublayer of the canonical
|
|
26
|
+
* cascivo.blocks slot. cascivo.override sits on top of everything: put brand/one-off
|
|
27
|
+
* overrides in `@layer cascivo.override { … }` and they beat everything cascivo ships,
|
|
28
|
+
* blocks included — with no `:root:not([data-theme])` specificity fight. App-local
|
|
29
|
+
* sublayers (cascivo.example) are not shipped by any package; insert them between
|
|
30
|
+
* cascivo.blocks and cascivo.override.
|
|
25
31
|
*
|
|
26
32
|
* Guard: scripts/checks/layer-order.test.ts asserts every shipped/scaffolded
|
|
27
|
-
* @layer statement is an ordered subsequence of this one
|
|
33
|
+
* @layer statement is an ordered subsequence of this one, and that every shipped
|
|
34
|
+
* `@layer cascivo.* { … }` block uses a canonical name or the cascivo.blocks.<name>
|
|
35
|
+
* pattern (depth ≤ 3) — no invented layer names.
|
|
28
36
|
*/
|
|
29
|
-
@layer cascivo.reset, cascivo.base, cascivo.tokens, cascivo.component, cascivo.theme, cascivo.
|
|
37
|
+
@layer cascivo.reset, cascivo.base, cascivo.tokens, cascivo.component, cascivo.theme, cascivo.blocks,
|
|
38
|
+
cascivo.override;
|
|
30
39
|
@layer cascivo.component{._accordion_9ch4s_2{border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-surface);flex-direction:column;display:flex;overflow:hidden}._item_9ch4s_10:not(:last-child){border-block-end:1px solid var(--cascivo-color-border)}._heading_9ch4s_16{font-size:inherit;font-weight:inherit;margin:0}._trigger_9ch4s_22{justify-content:space-between;align-items:center;gap:var(--cascivo-space-3);inline-size:100%;padding:var(--cascivo-space-4);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);text-align:start;color:var(--cascivo-color-text);cursor:pointer;background:0 0;border:none;display:flex}._trigger_9ch4s_22:hover{background-color:var(--cascivo-color-bg-subtle)}._trigger_9ch4s_22:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._indicator_9ch4s_48{block-size:.75rem;inline-size:.75rem;transition:rotate var(--cascivo-duration-200) var(--cascivo-ease-out);background-color:currentColor;flex-shrink:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat}._trigger_9ch4s_22[data-state=open] ._indicator_9ch4s_48{rotate:180deg}._content_9ch4s_62{visibility:hidden;color:var(--cascivo-color-text);transition:grid-template-rows var(--cascivo-duration-200) var(--cascivo-ease-out), visibility var(--cascivo-duration-200) var(--cascivo-ease-out);grid-template-rows:0fr;display:grid}._content_9ch4s_62[data-state=open]{visibility:visible;grid-template-rows:1fr}._contentInner_9ch4s_77{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-relaxed);overflow:hidden}._content_9ch4s_62[data-state=open] ._contentInner_9ch4s_77{padding-inline:var(--cascivo-space-4);padding-block-end:var(--cascivo-space-4)}}@media (forced-colors:active){._accordion_9ch4s_2{border:1px solid buttontext}._trigger_9ch4s_22:focus-visible{outline-offset:2px;outline:2px solid highlight}}
|
|
31
40
|
|
|
32
41
|
@layer cascivo.component{._overlay_17irl_2{z-index:var(--cascivo-z-overlay,50);padding:var(--cascivo-space-3);opacity:1;transition:opacity var(--cascivo-motion-enter);background-color:#0006;flex-direction:column;justify-content:flex-end;align-items:center;padding-block-end:calc(var(--cascivo-space-3) + env(safe-area-inset-bottom,0px));display:flex;position:fixed;inset:0}._overlay_17irl_2[data-state=closed]{opacity:0;transition:opacity var(--cascivo-motion-exit)}@starting-style{._overlay_17irl_2[data-state=open]{opacity:0}}._sheet_17irl_28{gap:var(--cascivo-space-2);inline-size:100%;max-inline-size:32rem;transition:translate var(--cascivo-motion-enter);flex-direction:column;display:flex;translate:0}._overlay_17irl_2[data-state=closed] ._sheet_17irl_28{transition:translate var(--cascivo-motion-exit);translate:0 100%}@starting-style{._overlay_17irl_2[data-state=open] ._sheet_17irl_28{translate:0 100%}}._group_17irl_50{background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);flex-direction:column;display:flex;overflow:hidden}._heading_17irl_60{padding:var(--cascivo-space-4) var(--cascivo-space-6);text-align:center;border-block-end:1px solid var(--cascivo-color-border)}._title_17irl_66{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);margin:0}._description_17irl_73{margin:var(--cascivo-space-1) 0 0;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle)}._item_17irl_79{min-block-size:3rem;inline-size:100%;padding:var(--cascivo-space-3) var(--cascivo-space-6);font-size:var(--cascivo-text-base);color:var(--cascivo-color-accent);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;justify-content:center;align-items:center;display:flex}._item_17irl_79+._item_17irl_79{border-block-start:1px solid var(--cascivo-color-border)}._item_17irl_79:hover{background-color:var(--cascivo-color-bg-subtle)}._item_17irl_79:focus-visible{box-shadow:var(--cascivo-focus-ring);z-index:1;outline:none;position:relative}._item_17irl_79[aria-disabled=true]{color:var(--cascivo-color-text-muted);cursor:not-allowed}._item_17irl_79[data-destructive]{color:var(--cascivo-color-destructive)}._cancel_17irl_119{font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text)}@media (prefers-reduced-motion:reduce){._sheet_17irl_28{transition:none}}}
|
|
@@ -77,7 +86,7 @@
|
|
|
77
86
|
/*$vite$:1*/
|
|
78
87
|
@layer cascivo.component{._wrapper_bi94t_2{gap:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);flex-direction:column;display:flex;position:relative}._label_bi94t_10{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text)}._field_bi94t_16{align-items:center;display:flex;position:relative}._trigger_bi94t_22{inline-size:100%;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-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), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none;justify-content:space-between;align-items:center;display:flex}._trigger_bi94t_22:hover:not(:disabled){border-color:var(--cascivo-color-border-strong)}._trigger_bi94t_22:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._trigger_bi94t_22:disabled{opacity:.5;cursor:not-allowed}._wrapper_bi94t_2[data-size=sm] ._trigger_bi94t_22{block-size:2rem}._wrapper_bi94t_2[data-size=md] ._trigger_bi94t_22{block-size:2.5rem}._wrapper_bi94t_2[data-size=lg] ._trigger_bi94t_22{block-size:3rem}._wrapper_bi94t_2[data-state=error] ._trigger_bi94t_22{border-color:var(--cascivo-color-danger)}._value_bi94t_70{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._placeholder_bi94t_76{color:var(--cascivo-color-text-subtle)}._chevron_bi94t_80{border-inline-end:2px solid var(--cascivo-color-text-muted);border-block-end:2px solid var(--cascivo-color-text-muted);block-size:.75rem;inline-size:.75rem;transition:transform var(--cascivo-duration-150) var(--cascivo-ease-out);flex-shrink:0;margin-inline-start:var(--cascivo-space-2);display:inline-block;transform:rotate(45deg)}._wrapper_bi94t_2[data-state=open] ._chevron_bi94t_80{transform:rotate(-135deg)}._clear_bi94t_96{cursor:pointer;min-block-size:1.5rem;min-inline-size:1.5rem;color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-xs);padding:var(--cascivo-space-1);border-radius:var(--cascivo-radius-control);background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-inline-end:var(--cascivo-space-8)}._clear_bi94t_96:hover{color:var(--cascivo-color-text)}._clear_bi94t_96:focus-visible{box-shadow:0 0 0 2px var(--cascivo-color-accent)}._listbox_bi94t_122{inline-size:100%;z-index:var(--cascivo-z-dropdown);background-color:var(--cascivo-color-surface-overlay);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);max-block-size:16rem;box-shadow:var(--cascivo-shadow-overlay);opacity:0;visibility:hidden;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), visibility var(--cascivo-motion-enter);position:absolute;inset-block-start:calc(100% + var(--cascivo-space-1));inset-inline-start:0;overflow-y:auto;translate:0 -.25rem}._listbox_bi94t_122[data-state=open]{opacity:1;visibility:visible;translate:0}@starting-style{._listbox_bi94t_122[data-state=open]{opacity:0;translate:0 -.25rem}}._searchWrapper_bi94t_156{padding:var(--cascivo-space-2);border-block-end:1px solid var(--cascivo-color-border)}._search_bi94t_156{inline-size:100%;padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-1);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_bi94t_156:focus-visible{border-color:var(--cascivo-color-accent)}._option_bi94t_178{padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);cursor:pointer;border-radius:var(--cascivo-radius-item)}._option_bi94t_178[data-state=active]{background-color:var(--cascivo-color-bg-subtle)}._option_bi94t_178[aria-selected=true]{background-color:color-mix(in srgb, var(--cascivo-color-accent) 12%, transparent);color:var(--cascivo-color-accent)}._option_bi94t_178[data-disabled]{opacity:.4;cursor:not-allowed}._empty_bi94t_201{padding:var(--cascivo-space-4);text-align:center;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted)}._error_bi94t_208{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-danger)}._hint_bi94t_213{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted)}}
|
|
79
88
|
/*$vite$:1*/
|
|
80
|
-
@layer cascivo.component{.
|
|
89
|
+
@layer cascivo.component{._dialog_1dfrg_2{border-radius:var(--cascivo-radius-overlay);inline-size:min(40rem, calc(100vw - var(--cascivo-space-8)));max-block-size:calc(85vh - 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;margin-block-start:15vh;margin-inline:auto;padding:0;overflow:visible;scale:.96}._dialog_1dfrg_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_1dfrg_2[open]{opacity:0;scale:.96}}._dialog_1dfrg_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_1dfrg_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_1dfrg_2[open]::backdrop{opacity:0}}._panel_1dfrg_62{background-color:var(--cascivo-color-surface-overlay);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);flex-direction:column;display:flex;overflow:hidden}._search_1dfrg_72{align-items:center;gap:var(--cascivo-space-3);padding-inline:var(--cascivo-space-4);border-block-end:1px solid var(--cascivo-color-border);display:flex}._searchIcon_1dfrg_80{color:var(--cascivo-color-text-muted);flex-shrink:0}._scopeChip_1dfrg_85{align-items:center;gap:var(--cascivo-space-1);padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-1);border:1px solid var(--cascivo-color-accent-subtle);border-radius:var(--cascivo-radius-item);background-color:var(--cascivo-color-accent-muted);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-accent-content);white-space:nowrap;flex-shrink:0;display:inline-flex}._scopeChip_1dfrg_85 ._scopeClear_1dfrg_101{color:inherit;cursor:pointer;opacity:.7;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}._scopeChip_1dfrg_85 ._scopeClear_1dfrg_101:hover{opacity:1}@media (pointer:coarse){._scopeChip_1dfrg_85 ._scopeClear_1dfrg_101{min-inline-size:var(--cascivo-space-6);min-block-size:var(--cascivo-space-6)}}._input_1dfrg_123{block-size:3rem;font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-base);color:var(--cascivo-color-text);background:0 0;border:none;flex:1;padding:0}._input_1dfrg_123:focus{outline:none}._input_1dfrg_123::placeholder{color:var(--cascivo-color-text-muted)}._scopes_1dfrg_142{align-items:center;gap:var(--cascivo-space-2);padding-inline:var(--cascivo-space-4);padding-block:var(--cascivo-space-2);border-block-end:1px solid var(--cascivo-color-border);background-color:var(--cascivo-color-bg-subtle);display:flex;overflow-x:auto}._scopesLabel_1dfrg_153{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--cascivo-color-text-subtle);flex-shrink:0}._scopePill_1dfrg_163{align-items:center;gap:var(--cascivo-space-1);padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-1);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-item);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted);cursor:pointer;background:0 0;flex-shrink:0;display:inline-flex}._scopePill_1dfrg_163:hover{color:var(--cascivo-color-text)}._scopePill_1dfrg_163[data-active]{border-color:var(--cascivo-color-accent-subtle);background-color:var(--cascivo-color-accent-muted);color:var(--cascivo-color-accent-content)}@media (pointer:coarse){._scopePill_1dfrg_163{min-block-size:var(--cascivo-target-min-coarse,2.75rem)}}._scopePrefix_1dfrg_193{font-family:var(--cascivo-font-mono);font-weight:var(--cascivo-font-medium);opacity:.85}._list_1dfrg_199{max-block-size:20rem;padding:var(--cascivo-space-2);overflow-y:auto}._group_1dfrg_205+._group_1dfrg_205{margin-block-start:var(--cascivo-space-2)}._heading_1dfrg_209{justify-content:space-between;align-items:baseline;gap:var(--cascivo-space-2);padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text-subtle);display:flex}._count_1dfrg_222{font-family:var(--cascivo-font-mono);font-weight:var(--cascivo-font-normal);color:var(--cascivo-color-text-muted)}._option_1dfrg_228{align-items:center;gap:var(--cascivo-space-3);padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-2);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;display:flex}._option_1dfrg_228[data-state=active]{background-color:var(--cascivo-color-accent-muted)}._option_1dfrg_228[data-disabled]{opacity:.5;cursor:not-allowed}._icon_1dfrg_253{color:var(--cascivo-color-text-muted);flex-shrink:0;align-items:center;display:inline-flex}._text_1dfrg_260{flex-direction:column;flex:1;gap:.125rem;min-inline-size:0;display:flex}._label_1dfrg_268{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._match_1dfrg_274{color:var(--cascivo-color-accent-content);font-weight:var(--cascivo-font-semibold);background:0 0}._description_1dfrg_280{text-overflow:ellipsis;white-space:nowrap;font-family:var(--cascivo-font-mono);font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted);overflow:hidden}._status_1dfrg_289{align-items:center;gap:var(--cascivo-space-1);padding-inline:var(--cascivo-space-2);border-radius:var(--cascivo-radius-pill,9999px);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-medium);flex-shrink:0;margin-inline-start:auto;padding-block:.125rem;display:inline-flex}._status_1dfrg_289[data-tone=healthy]{background-color:var(--cascivo-color-success-subtle);color:var(--cascivo-color-success-foreground)}._status_1dfrg_289[data-tone=degraded]{background-color:var(--cascivo-color-warning-subtle);color:var(--cascivo-color-warning-foreground)}._status_1dfrg_289[data-tone=neutral]{background-color:var(--cascivo-color-bg-subtle);color:var(--cascivo-color-text-muted)}._status_1dfrg_289 ._statusDot_1dfrg_316{background-color:currentColor;border-radius:9999px;block-size:.375rem;inline-size:.375rem}._actions_1dfrg_325{gap:var(--cascivo-space-1);opacity:0;pointer-events:none;transition:opacity var(--cascivo-motion-enter);flex-shrink:0;margin-inline-start:auto;display:inline-flex}._status_1dfrg_289+._actions_1dfrg_325{margin-inline-start:var(--cascivo-space-2)}._option_1dfrg_228[data-state=active] ._actions_1dfrg_325,._option_1dfrg_228:hover ._actions_1dfrg_325{opacity:1;pointer-events:auto}._action_1dfrg_325{align-items:center;gap:var(--cascivo-space-1);padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-1);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-item);background-color:var(--cascivo-color-surface-overlay);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text);cursor:pointer;display:inline-flex}._action_1dfrg_325:hover{border-color:var(--cascivo-color-accent-subtle)}@media (pointer:coarse){._action_1dfrg_325{min-block-size:var(--cascivo-target-min-coarse,2.75rem)}}._actionKeys_1dfrg_369{gap:var(--cascivo-space-1);display:inline-flex}._shortcut_1dfrg_374{gap:var(--cascivo-space-1);flex-shrink:0;margin-inline-start:auto;display:inline-flex}._actions_1dfrg_325~._shortcut_1dfrg_374{margin-inline-start:var(--cascivo-space-2)}@media (prefers-reduced-motion:reduce){._actions_1dfrg_325{transition:none}}._empty_1dfrg_392{padding-block:var(--cascivo-space-8);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted);text-align:center}._footer_1dfrg_400{gap:var(--cascivo-space-4);padding-inline:var(--cascivo-space-4);padding-block:var(--cascivo-space-2);border-block-start:1px solid var(--cascivo-color-border);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle);display:flex}._hint_1dfrg_411{align-items:center;gap:var(--cascivo-space-1);display:inline-flex}}
|
|
81
90
|
/*$vite$:1*/
|
|
82
91
|
@layer cascivo.component{._comparison_zo41p_2{border-radius:var(--cascivo-radius-md);touch-action:none;-webkit-user-select:none;user-select:none;inline-size:100%;position:relative;overflow:hidden}._item_zo41p_11,._before_zo41p_12{inline-size:100%;display:block}._item_zo41p_11 :where(img),._before_zo41p_12 :where(img){object-fit:cover;block-size:100%;inline-size:100%;display:block}._before_zo41p_12{clip-path:inset(0 calc(100% - var(--position)) 0 0);position:absolute;inset:0}._comparison_zo41p_2[data-orientation=vertical] ._before_zo41p_12{clip-path:inset(0 0 calc(100% - var(--position)) 0)}._divider_zo41p_36{background-color:var(--cascivo-color-surface);inline-size:2px;transition:none;position:absolute;inset-block:0;inset-inline-start:var(--position);transform:translate(-50%)}._comparison_zo41p_2[data-orientation=vertical] ._divider_zo41p_36{inset-block:auto;inset-inline:0;block-size:2px;inline-size:auto;inset-block-start:var(--position);transform:translateY(-50%)}._handle_zo41p_56{block-size:2rem;inline-size:2rem;min-inline-size:var(--cascivo-target-min-coarse,2.75rem);min-block-size:var(--cascivo-target-min-coarse,2.75rem);border-radius:var(--cascivo-radius-full);background-color:var(--cascivo-color-surface);border:2px solid var(--cascivo-color-border);box-shadow:var(--cascivo-shadow-sm);cursor:grab;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}._comparison_zo41p_2[data-orientation=vertical] ._handle_zo41p_56{cursor:row-resize}._handle_zo41p_56:focus-visible{outline:2px solid var(--cascivo-color-focus-ring);outline-offset:2px}._comparison_zo41p_2[data-dragging] ._handle_zo41p_56{cursor:grabbing}@media (pointer:coarse){._handle_zo41p_56{inline-size:var(--cascivo-target-min-coarse,2.75rem);block-size:var(--cascivo-target-min-coarse,2.75rem)}}}
|
|
83
92
|
/*$vite$:1*/
|
|
@@ -143,6 +152,18 @@
|
|
|
143
152
|
/*$vite$:1*/
|
|
144
153
|
@layer cascivo.component{._label_qztdi_2{align-items:center;gap:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);line-height:var(--cascivo-leading-snug);color:var(--cascivo-color-text);display:inline-flex}._label_qztdi_2[data-disabled]{opacity:.5;cursor:not-allowed}._marker_qztdi_18{color:var(--cascivo-color-destructive);line-height:var(--cascivo-leading-none)}._srOnly_qztdi_23{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}@media (forced-colors:active){._label_qztdi_2[data-disabled]{color:graytext}}
|
|
145
154
|
/*$vite$:1*/
|
|
155
|
+
@layer cascivo.component{._auto-grid_v8cqo_2{grid-template-columns:repeat(auto-fill, minmax(min(var(--_min,16rem), 100%), 1fr));gap:var(--_gap,var(--cascivo-space-4));display:grid}}
|
|
156
|
+
/*$vite$:1*/
|
|
157
|
+
@layer cascivo.component{._center_1euo8_2{max-inline-size:var(--_center-max,48rem);padding-inline:var(--cascivo-space-4);inline-size:100%;margin-inline:auto}}
|
|
158
|
+
/*$vite$:1*/
|
|
159
|
+
@layer cascivo.component{._columns_yqrkk_2{grid-template-columns:repeat(var(--_cols,2), minmax(0, 1fr));gap:var(--_gap,var(--cascivo-space-4));display:grid;container-type:inline-size}@container (width<=40rem){._columns_yqrkk_2{grid-template-columns:1fr}}}
|
|
160
|
+
/*$vite$:1*/
|
|
161
|
+
@layer cascivo.component{._flex_1cngp_2{gap:var(--_flex-gap,var(--cascivo-space-4));display:flex}._flex_1cngp_2[data-direction=vertical]{flex-direction:column}._flex_1cngp_2[data-direction=horizontal]{flex-direction:row}._flex_1cngp_2[data-wrap]{flex-wrap:wrap}}
|
|
162
|
+
/*$vite$:1*/
|
|
163
|
+
@layer cascivo.component{._grid_1awa2_2{grid-template-columns:repeat(var(--_grid-cols,12), minmax(0, 1fr));gap:var(--_grid-gap,var(--cascivo-space-4));align-items:var(--_grid-align,stretch);justify-items:var(--_grid-justify,stretch);display:grid;container-type:inline-size}@container (width<=40rem){._grid_1awa2_2:not([data-responsive]){grid-template-columns:1fr}}@container (width>=30rem){._grid_1awa2_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-sm,var(--_grid-cols,12)), minmax(0, 1fr))}}@container (width>=40rem){._grid_1awa2_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-md,var(--_grid-cols-sm,var(--_grid-cols,12))), minmax(0, 1fr))}}@container (width>=64rem){._grid_1awa2_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-lg,var(--_grid-cols-md,var(--_grid-cols-sm,var(--_grid-cols,12)))), minmax(0, 1fr))}}@container (width>=80rem){._grid_1awa2_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-xl,var(--_grid-cols-lg,var(--_grid-cols-md,var(--_grid-cols-sm,var(--_grid-cols,12))))), minmax(0, 1fr))}}._grid-item_1awa2_46{grid-column:span var(--_span,1)}@container (width>=30rem){._grid-item_1awa2_46[data-responsive]{grid-column:span var(--_span-sm,var(--_span,1))}}@container (width>=40rem){._grid-item_1awa2_46[data-responsive]{grid-column:span var(--_span-md,var(--_span-sm,var(--_span,1)))}}@container (width>=64rem){._grid-item_1awa2_46[data-responsive]{grid-column:span var(--_span-lg,var(--_span-md,var(--_span-sm,var(--_span,1))))}}@container (width>=80rem){._grid-item_1awa2_46[data-responsive]{grid-column:span var(--_span-xl,var(--_span-lg,var(--_span-md,var(--_span-sm,var(--_span,1)))))}}}
|
|
164
|
+
/*$vite$:1*/
|
|
165
|
+
@layer cascivo.component{._spacer_9ie78_2{block-size:var(--_spacer-size,var(--cascivo-space-4));flex-shrink:0}}
|
|
166
|
+
/*$vite$:1*/
|
|
146
167
|
@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}}
|
|
147
168
|
/*$vite$:1*/
|
|
148
169
|
@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)}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cascivo/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Prebuilt cascivo design system components — use without copying source",
|
|
6
6
|
"keywords": [
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@cascivo/core": "^0.3.1",
|
|
48
|
-
"@cascivo/i18n": "^0.2.
|
|
48
|
+
"@cascivo/i18n": "^0.2.6"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@testing-library/jest-dom": "^6.9.1",
|
package/readme.body.md
CHANGED
|
@@ -292,6 +292,7 @@ routing break after adding one of these, check that the import resolves to
|
|
|
292
292
|
- **Cta** — Call-to-action band — quiet hairline-bordered section with title, description, and centered actions. Replace demo content before shipping.
|
|
293
293
|
- **DashboardLayout** — Dashboard page layout with stats strip, main content area, and optional aside.
|
|
294
294
|
- **FeatureGrid** — Feature section — AutoGrid of items with optional title, description, and icon slots. Icons are optional; the grid works text-only. Replace demo content before shipping.
|
|
295
|
+
- **Flex** — Flex layout primitive for vertical or horizontal stacking with gap control.
|
|
295
296
|
- **Grid** — CSS grid layout primitive with responsive column collapsing.
|
|
296
297
|
- **Hero** — Page hero section — centered or split layout with eyebrow, title, description, actions and media slots. Replace demo content before shipping.
|
|
297
298
|
- **Indicator** — Positions an overlay element (badge, dot, count) at a corner of its child
|
|
@@ -307,7 +308,6 @@ routing break after adding one of these, check that the import resolves to
|
|
|
307
308
|
- **Spacer** — Fixed-height spacing block using design token steps.
|
|
308
309
|
- **SplitView** — Resizable two-pane split layout with keyboard and pointer drag support.
|
|
309
310
|
- **Stack** — Overlaps children in a CSS grid stack with a configurable offset to create a card-pile effect
|
|
310
|
-
- **Stack** — Flex layout primitive for vertical or horizontal stacking with gap control.
|
|
311
311
|
- **StatsBand** — KPI strip — horizontal band of stats with optional delta and inline sparkline trend. Wraps via AutoGrid on narrow containers. No visible heading; provide aria-label for accessibility.
|
|
312
312
|
|
|
313
313
|
### Feedback
|