@vikram-hegde/skeletal 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -0
- package/dist/alert-dialog/index.d.ts +2 -0
- package/dist/alert-dialog/index.js +2 -0
- package/dist/alert-dialog-1hxVC_5N.js +71 -0
- package/dist/badge/index.d.ts +2 -0
- package/dist/badge/index.js +2 -0
- package/dist/badge-C3p1L0E7.css +53 -0
- package/dist/badge-C3p1L0E7.js +32 -0
- package/dist/button/index.d.ts +2 -0
- package/dist/button/index.js +2 -0
- package/dist/button-B48UNbaC.css +152 -0
- package/dist/button-B48UNbaC.js +46 -0
- package/dist/button-Dvd4n2U4.d.ts +56 -0
- package/dist/checkbox/index.d.ts +2 -0
- package/dist/checkbox/index.js +2 -0
- package/dist/checkbox-wh2BoiSj.css +76 -0
- package/dist/checkbox-wh2BoiSj.js +112 -0
- package/dist/cluster-BJ4m5uGN.css +9 -0
- package/dist/cluster-BJ4m5uGN.js +21 -0
- package/dist/combobox/index.d.ts +2 -0
- package/dist/combobox/index.js +2 -0
- package/dist/combobox-DWH7uSsx.css +389 -0
- package/dist/combobox-DWH7uSsx.js +327 -0
- package/dist/command-palette/index.d.ts +2 -0
- package/dist/command-palette/index.js +2 -0
- package/dist/command-palette-DF4XJ8qz.css +164 -0
- package/dist/command-palette-DF4XJ8qz.js +191 -0
- package/dist/dialog/index.d.ts +6 -0
- package/dist/dialog/index.js +2 -0
- package/dist/dialog-C4yqxII_.js +73 -0
- package/dist/dialog-footer-Br9KZP4v.js +29 -0
- package/dist/dialog-footer-bNVIVPbu.d.ts +56 -0
- package/dist/dialog-portal-B21WFYkQ.css +131 -0
- package/dist/dialog-portal-B21WFYkQ.js +26 -0
- package/dist/dialog-portal-BF89FBeX.d.ts +15 -0
- package/dist/dialog-title-DRYRIxCp.js +35 -0
- package/dist/dialog-title-jyf86Q8C.d.ts +36 -0
- package/dist/dialog-viewport-CaMWJrCJ.d.ts +42 -0
- package/dist/dialog-viewport-vpbsq7Ib.js +21 -0
- package/dist/drawer/index.d.ts +2 -0
- package/dist/drawer/index.js +2 -0
- package/dist/drawer-DQmz_uCP.css +214 -0
- package/dist/drawer-DQmz_uCP.js +180 -0
- package/dist/icon/index.d.ts +2 -0
- package/dist/icon/index.js +2 -0
- package/dist/icon-DBOdxNvH.css +6 -0
- package/dist/icon-DBOdxNvH.js +20 -0
- package/dist/index-A2QmU5r9.d.ts +37 -0
- package/dist/index-B0uNLS7z.d.ts +301 -0
- package/dist/index-B63PSP58.d.ts +94 -0
- package/dist/index-BBOkTl3h.d.ts +261 -0
- package/dist/index-BLFVnve3.d.ts +53 -0
- package/dist/index-BXPUT5u-.d.ts +72 -0
- package/dist/index-BngvATZx.d.ts +35 -0
- package/dist/index-Br2NrBW_.d.ts +444 -0
- package/dist/index-CUy-9csi.d.ts +135 -0
- package/dist/index-CbMW32E9.d.ts +82 -0
- package/dist/index-CyTcR6iv.d.ts +433 -0
- package/dist/index-CznsZ_1M.d.ts +85 -0
- package/dist/index-D-6gOciw.d.ts +350 -0
- package/dist/index-DdqDyczP.d.ts +209 -0
- package/dist/index-GOGpFujX.d.ts +144 -0
- package/dist/index-W3ozKcis.d.ts +245 -0
- package/dist/index-kpw3_4q_.d.ts +50 -0
- package/dist/index-rH7TJeJt.d.ts +334 -0
- package/dist/index-rQ7sRkqg.d.ts +122 -0
- package/dist/index.css +93 -0
- package/dist/index.d.ts +26 -0
- package/dist/index.js +26 -0
- package/dist/input/index.d.ts +2 -0
- package/dist/input/index.js +2 -0
- package/dist/input-CQ_ean8e.css +129 -0
- package/dist/input-CQ_ean8e.js +65 -0
- package/dist/layout/index.d.ts +2 -0
- package/dist/layout/index.js +4 -0
- package/dist/layout-qoyutnKU.css +181 -0
- package/dist/layout-qoyutnKU.js +169 -0
- package/dist/menu/index.d.ts +2 -0
- package/dist/menu/index.js +2 -0
- package/dist/menu-DRdGMI_-.css +236 -0
- package/dist/menu-DRdGMI_-.js +243 -0
- package/dist/merge-class-name-C4KJJGuK.js +15 -0
- package/dist/popover/index.d.ts +2 -0
- package/dist/popover/index.js +2 -0
- package/dist/popover-CenynT0Z.css +139 -0
- package/dist/popover-CenynT0Z.js +174 -0
- package/dist/radio/index.d.ts +2 -0
- package/dist/radio/index.js +2 -0
- package/dist/radio-BJrvdkga.css +80 -0
- package/dist/radio-BJrvdkga.js +75 -0
- package/dist/scroll-area/index.d.ts +2 -0
- package/dist/scroll-area/index.js +2 -0
- package/dist/scroll-area-DkORxJE9.css +175 -0
- package/dist/scroll-area-DkORxJE9.js +114 -0
- package/dist/select/index.d.ts +2 -0
- package/dist/select/index.js +2 -0
- package/dist/select-BaqBHUac.css +273 -0
- package/dist/select-BaqBHUac.js +254 -0
- package/dist/skeleton/index.d.ts +2 -0
- package/dist/skeleton/index.js +2 -0
- package/dist/skeleton-W6fwO5pf.css +88 -0
- package/dist/skeleton-W6fwO5pf.js +97 -0
- package/dist/spinner/index.d.ts +2 -0
- package/dist/spinner/index.js +2 -0
- package/dist/spinner-DB6ap8Si.css +43 -0
- package/dist/spinner-DB6ap8Si.js +27 -0
- package/dist/stack-BzFVrsmT.css +12 -0
- package/dist/stack-BzFVrsmT.js +52 -0
- package/dist/style-vars-ZSrCUzKx.js +13 -0
- package/dist/switch/index.d.ts +2 -0
- package/dist/switch/index.js +2 -0
- package/dist/switch-DizP31iF.css +76 -0
- package/dist/switch-DizP31iF.js +58 -0
- package/dist/tooltip/index.d.ts +2 -0
- package/dist/tooltip/index.js +2 -0
- package/dist/tooltip-CQk2WjUS.css +92 -0
- package/dist/tooltip-CQk2WjUS.js +138 -0
- package/package.json +68 -0
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
import './popover-CenynT0Z.css';
|
|
2
|
+
import { t as mergeClassName } from "./merge-class-name-C4KJJGuK.js";
|
|
3
|
+
import { t as Button } from "./button-B48UNbaC.js";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { Popover } from "@base-ui/react/popover";
|
|
6
|
+
//#region src/popover/popover.module.css
|
|
7
|
+
var popover_module_default = {
|
|
8
|
+
"popover__arrow": "K9_uLa_popover__arrow",
|
|
9
|
+
"popover__backdrop": "K9_uLa_popover__backdrop",
|
|
10
|
+
"popover__description": "K9_uLa_popover__description",
|
|
11
|
+
"popover__popup": "K9_uLa_popover__popup",
|
|
12
|
+
"popover__portal": "K9_uLa_popover__portal",
|
|
13
|
+
"popover__positioner": "K9_uLa_popover__positioner",
|
|
14
|
+
"popover__title": "K9_uLa_popover__title",
|
|
15
|
+
"popover__viewport": "K9_uLa_popover__viewport"
|
|
16
|
+
};
|
|
17
|
+
//#endregion
|
|
18
|
+
//#region src/popover/popover-arrow.tsx
|
|
19
|
+
function PopoverArrow({ className, ...props }) {
|
|
20
|
+
return /* @__PURE__ */ jsx(Popover.Arrow, {
|
|
21
|
+
className: mergeClassName(popover_module_default.popover__arrow, className),
|
|
22
|
+
...props
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
//#endregion
|
|
26
|
+
//#region src/popover/popover-backdrop.tsx
|
|
27
|
+
function PopoverBackdrop({ className, ...props }) {
|
|
28
|
+
return /* @__PURE__ */ jsx(Popover.Backdrop, {
|
|
29
|
+
className: mergeClassName(popover_module_default.popover__backdrop, className),
|
|
30
|
+
...props
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
//#endregion
|
|
34
|
+
//#region src/popover/popover-close.tsx
|
|
35
|
+
function PopoverClose({ className, style, variant = "ghost", size = "md", fullWidth = false, ...props }) {
|
|
36
|
+
return /* @__PURE__ */ jsx(Popover.Close, {
|
|
37
|
+
render: (buttonProps, _state) => /* @__PURE__ */ jsx(Button, {
|
|
38
|
+
...buttonProps,
|
|
39
|
+
variant,
|
|
40
|
+
size,
|
|
41
|
+
fullWidth,
|
|
42
|
+
className,
|
|
43
|
+
style
|
|
44
|
+
}),
|
|
45
|
+
...props
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
//#endregion
|
|
49
|
+
//#region src/popover/popover-description.tsx
|
|
50
|
+
function PopoverDescription({ className, ...props }) {
|
|
51
|
+
return /* @__PURE__ */ jsx(Popover.Description, {
|
|
52
|
+
className: mergeClassName(popover_module_default.popover__description, className),
|
|
53
|
+
...props
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
//#endregion
|
|
57
|
+
//#region src/popover/popover-portal.tsx
|
|
58
|
+
function PopoverPortal({ className, ...props }) {
|
|
59
|
+
return /* @__PURE__ */ jsx(Popover.Portal, {
|
|
60
|
+
className: mergeClassName(popover_module_default.popover__portal, className),
|
|
61
|
+
...props
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
//#endregion
|
|
65
|
+
//#region src/popover/popover-positioner.tsx
|
|
66
|
+
function PopoverPositioner({ className, sideOffset = 8, ...props }) {
|
|
67
|
+
return /* @__PURE__ */ jsx(Popover.Positioner, {
|
|
68
|
+
className: mergeClassName(popover_module_default.popover__positioner, className),
|
|
69
|
+
sideOffset,
|
|
70
|
+
...props
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
//#endregion
|
|
74
|
+
//#region src/popover/popover-popup.tsx
|
|
75
|
+
function PopoverPopup({ className, ...props }) {
|
|
76
|
+
return /* @__PURE__ */ jsx(Popover.Popup, {
|
|
77
|
+
className: mergeClassName(popover_module_default.popover__popup, className),
|
|
78
|
+
...props
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
//#endregion
|
|
82
|
+
//#region src/popover/popover-root.tsx
|
|
83
|
+
function PopoverRoot(props) {
|
|
84
|
+
return /* @__PURE__ */ jsx(Popover.Root, { ...props });
|
|
85
|
+
}
|
|
86
|
+
//#endregion
|
|
87
|
+
//#region src/popover/popover-title.tsx
|
|
88
|
+
function PopoverTitle({ className, ...props }) {
|
|
89
|
+
return /* @__PURE__ */ jsx(Popover.Title, {
|
|
90
|
+
className: mergeClassName(popover_module_default.popover__title, className),
|
|
91
|
+
...props
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
//#endregion
|
|
95
|
+
//#region src/popover/popover-trigger.tsx
|
|
96
|
+
function PopoverTrigger({ className, style, variant = "outline", size = "md", fullWidth = false, ...props }) {
|
|
97
|
+
return /* @__PURE__ */ jsx(Popover.Trigger, {
|
|
98
|
+
...props,
|
|
99
|
+
render: /* @__PURE__ */ jsx(Button, {
|
|
100
|
+
variant,
|
|
101
|
+
size,
|
|
102
|
+
fullWidth,
|
|
103
|
+
className,
|
|
104
|
+
style
|
|
105
|
+
})
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
//#endregion
|
|
109
|
+
//#region src/popover/popover-viewport.tsx
|
|
110
|
+
function PopoverViewport({ className, ...props }) {
|
|
111
|
+
return /* @__PURE__ */ jsx(Popover.Viewport, {
|
|
112
|
+
className: mergeClassName(popover_module_default.popover__viewport, className),
|
|
113
|
+
...props
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
//#endregion
|
|
117
|
+
//#region src/popover/index.ts
|
|
118
|
+
/**
|
|
119
|
+
* Compound component for popovers.
|
|
120
|
+
*
|
|
121
|
+
* Assemble the parts as properties of the object:
|
|
122
|
+
*
|
|
123
|
+
* ```tsx
|
|
124
|
+
* import { Popover } from '@vikram-hegde/skeletal'
|
|
125
|
+
*
|
|
126
|
+
* <Popover.Root>
|
|
127
|
+
* <Popover.Trigger>Open</Popover.Trigger>
|
|
128
|
+
* <Popover.Portal>
|
|
129
|
+
* <Popover.Positioner sideOffset={8}>
|
|
130
|
+
* <Popover.Popup>
|
|
131
|
+
* <Popover.Arrow />
|
|
132
|
+
* <Popover.Title>Notifications</Popover.Title>
|
|
133
|
+
* <Popover.Description>You are all caught up.</Popover.Description>
|
|
134
|
+
* <Popover.Close>Dismiss</Popover.Close>
|
|
135
|
+
* </Popover.Popup>
|
|
136
|
+
* </Popover.Positioner>
|
|
137
|
+
* </Popover.Portal>
|
|
138
|
+
* </Popover.Root>
|
|
139
|
+
* ```
|
|
140
|
+
*
|
|
141
|
+
* Composition follows the Base UI anatomy — `Popover.Positioner` floats the
|
|
142
|
+
* popup against the trigger and handles collision avoidance; `Popover.Portal`
|
|
143
|
+
* moves it to `<body>`. Use `Popover.Backdrop` with `modal` on the root to
|
|
144
|
+
* dim the page. `Popover.Viewport` provides a scroll container for
|
|
145
|
+
* overflowing content.
|
|
146
|
+
*
|
|
147
|
+
* All parts are thin styled wrappers over Base UI's `Popover`, so every Base UI
|
|
148
|
+
* prop, `render` override, and ref behaves the same. Part prop types are
|
|
149
|
+
* exported separately (`PopoverProps`, `PopoverPopupProps`, etc.).
|
|
150
|
+
*
|
|
151
|
+
* Detached triggers are supported via `Popover.createHandle()`:
|
|
152
|
+
*
|
|
153
|
+
* ```tsx
|
|
154
|
+
* const handle = Popover.createHandle();
|
|
155
|
+
* <Popover.Trigger handle={handle}>Open</Popover.Trigger>
|
|
156
|
+
* <Popover.Root handle={handle}>…</Popover.Root>
|
|
157
|
+
* ```
|
|
158
|
+
*/
|
|
159
|
+
const Popover$1 = {
|
|
160
|
+
Root: PopoverRoot,
|
|
161
|
+
Trigger: PopoverTrigger,
|
|
162
|
+
Portal: PopoverPortal,
|
|
163
|
+
Backdrop: PopoverBackdrop,
|
|
164
|
+
Positioner: PopoverPositioner,
|
|
165
|
+
Popup: PopoverPopup,
|
|
166
|
+
Arrow: PopoverArrow,
|
|
167
|
+
Title: PopoverTitle,
|
|
168
|
+
Description: PopoverDescription,
|
|
169
|
+
Close: PopoverClose,
|
|
170
|
+
Viewport: PopoverViewport,
|
|
171
|
+
createHandle: Popover.createHandle
|
|
172
|
+
};
|
|
173
|
+
//#endregion
|
|
174
|
+
export { Popover$1 as t };
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
@layer skeletal {
|
|
2
|
+
.rI8RAG_radio__group {
|
|
3
|
+
color: var(--sk-foreground);
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
align-items: start;
|
|
6
|
+
gap: .375rem;
|
|
7
|
+
display: flex;
|
|
8
|
+
|
|
9
|
+
&[data-disabled] {
|
|
10
|
+
color: var(--sk-muted-foreground);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.rI8RAG_radio__root {
|
|
15
|
+
border: 1px solid var(--sk-border);
|
|
16
|
+
background-color: var(--sk-background);
|
|
17
|
+
block-size: 1rem;
|
|
18
|
+
inline-size: 1rem;
|
|
19
|
+
color: var(--sk-primary-foreground);
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
border-radius: 100%;
|
|
22
|
+
flex-shrink: 0;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
align-items: center;
|
|
25
|
+
margin: 0;
|
|
26
|
+
padding: 0;
|
|
27
|
+
transition: background-color .1s ease-out, border-color .1s ease-out;
|
|
28
|
+
display: inline-flex;
|
|
29
|
+
|
|
30
|
+
&[data-unchecked]:hover:not([data-disabled]) {
|
|
31
|
+
border-color: var(--sk-ring);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&[data-checked] {
|
|
35
|
+
border-color: var(--sk-primary);
|
|
36
|
+
background-color: var(--sk-primary);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&[data-disabled] {
|
|
40
|
+
cursor: default;
|
|
41
|
+
opacity: .5;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&:focus-visible {
|
|
45
|
+
outline: 2px solid var(--sk-ring);
|
|
46
|
+
outline-offset: 2px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@media (prefers-reduced-motion: reduce) {
|
|
50
|
+
transition: none;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.rI8RAG_radio__indicator {
|
|
55
|
+
justify-content: center;
|
|
56
|
+
align-items: center;
|
|
57
|
+
display: flex;
|
|
58
|
+
|
|
59
|
+
&:before {
|
|
60
|
+
content: "";
|
|
61
|
+
background-color: currentColor;
|
|
62
|
+
border-radius: 100%;
|
|
63
|
+
block-size: .5rem;
|
|
64
|
+
inline-size: .5rem;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&[data-unchecked] {
|
|
68
|
+
display: none;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&[data-starting-style], &[data-ending-style] {
|
|
72
|
+
opacity: 0;
|
|
73
|
+
scale: .5;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@media (prefers-reduced-motion: reduce) {
|
|
77
|
+
transition: none;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import './radio-BJrvdkga.css';
|
|
2
|
+
import { t as mergeClassName } from "./merge-class-name-C4KJJGuK.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { RadioGroup } from "@base-ui/react/radio-group";
|
|
5
|
+
import { Radio } from "@base-ui/react/radio";
|
|
6
|
+
//#region src/radio/radio.module.css
|
|
7
|
+
var radio_module_default = {
|
|
8
|
+
"radio__group": "rI8RAG_radio__group",
|
|
9
|
+
"radio__indicator": "rI8RAG_radio__indicator",
|
|
10
|
+
"radio__root": "rI8RAG_radio__root"
|
|
11
|
+
};
|
|
12
|
+
//#endregion
|
|
13
|
+
//#region src/radio/radio-group.tsx
|
|
14
|
+
function RadioGroup$1({ className, ...props }) {
|
|
15
|
+
return /* @__PURE__ */ jsx(RadioGroup, {
|
|
16
|
+
className: mergeClassName(radio_module_default.radio__group, className),
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
//#endregion
|
|
21
|
+
//#region src/radio/radio-indicator.tsx
|
|
22
|
+
function RadioIndicator({ className, ...props }) {
|
|
23
|
+
return /* @__PURE__ */ jsx(Radio.Indicator, {
|
|
24
|
+
className: mergeClassName(radio_module_default.radio__indicator, className),
|
|
25
|
+
...props
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
//#endregion
|
|
29
|
+
//#region src/radio/radio-root.tsx
|
|
30
|
+
function RadioRoot({ className, children, ...props }) {
|
|
31
|
+
return /* @__PURE__ */ jsx(Radio.Root, {
|
|
32
|
+
className: mergeClassName(radio_module_default.radio__root, className),
|
|
33
|
+
...props,
|
|
34
|
+
children: children ?? /* @__PURE__ */ jsx(RadioIndicator, {})
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
//#endregion
|
|
38
|
+
//#region src/radio/index.ts
|
|
39
|
+
/**
|
|
40
|
+
* Compound component for picking exactly one option from a set.
|
|
41
|
+
*
|
|
42
|
+
* Assemble the parts as properties of the object:
|
|
43
|
+
*
|
|
44
|
+
* ```tsx
|
|
45
|
+
* import { Radio } from '@vikram-hegde/skeletal'
|
|
46
|
+
*
|
|
47
|
+
* <Radio.Group defaultValue="free" name="plan">
|
|
48
|
+
* <label>
|
|
49
|
+
* <Radio.Root value="free">
|
|
50
|
+
* <Radio.Indicator />
|
|
51
|
+
* </Radio.Root>
|
|
52
|
+
* Free
|
|
53
|
+
* </label>
|
|
54
|
+
* <label>
|
|
55
|
+
* <Radio.Root value="pro">
|
|
56
|
+
* <Radio.Indicator />
|
|
57
|
+
* </Radio.Root>
|
|
58
|
+
* Pro
|
|
59
|
+
* </label>
|
|
60
|
+
* </Radio.Group>
|
|
61
|
+
* ```
|
|
62
|
+
*
|
|
63
|
+
* The `Group` owns the value and renders the hidden form input — see its
|
|
64
|
+
* docs for react-hook-form / TanStack Form wiring. All parts are thin styled
|
|
65
|
+
* wrappers over Base UI's `Radio` / `RadioGroup`, so every Base UI prop,
|
|
66
|
+
* `render` override, and ref behaves the same. Part prop types are exported
|
|
67
|
+
* separately (`RadioProps`, `RadioGroupProps`, ...).
|
|
68
|
+
*/
|
|
69
|
+
const Radio$1 = {
|
|
70
|
+
Root: RadioRoot,
|
|
71
|
+
Group: RadioGroup$1,
|
|
72
|
+
Indicator: RadioIndicator
|
|
73
|
+
};
|
|
74
|
+
//#endregion
|
|
75
|
+
export { Radio$1 as t };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { a as ScrollAreaRootProps, i as ScrollAreaScrollbarProps, n as ScrollAreaViewportProps, o as ScrollAreaCornerProps, r as ScrollAreaThumbProps, s as ScrollAreaContentProps, t as ScrollArea } from "../index-GOGpFujX.js";
|
|
2
|
+
export { ScrollArea, type ScrollAreaContentProps, type ScrollAreaCornerProps, type ScrollAreaRootProps, type ScrollAreaScrollbarProps, type ScrollAreaThumbProps, type ScrollAreaViewportProps };
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
@layer skeletal {
|
|
2
|
+
.CMB_1a_scroll-area {
|
|
3
|
+
position: relative;
|
|
4
|
+
overflow: hidden;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.CMB_1a_scroll-area__viewport {
|
|
8
|
+
scrollbar-width: none;
|
|
9
|
+
outline: none;
|
|
10
|
+
block-size: 100%;
|
|
11
|
+
inline-size: 100%;
|
|
12
|
+
overflow: scroll;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.CMB_1a_scroll-area__viewport::-webkit-scrollbar {
|
|
16
|
+
display: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.CMB_1a_scroll-area__viewport:focus-visible {
|
|
20
|
+
outline: 2px solid var(--sk-ring);
|
|
21
|
+
outline-offset: -2px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.CMB_1a_scroll-area__viewport--fade {
|
|
25
|
+
--_scroll-area-fade-size: 2rem;
|
|
26
|
+
--_scroll-area-fade-scale: 1;
|
|
27
|
+
--_scroll-area-fade: calc(var(--_scroll-area-fade-size) * var(--_scroll-area-fade-scale));
|
|
28
|
+
mask-image: linear-gradient(to bottom,
|
|
29
|
+
transparent 0,
|
|
30
|
+
oklch(0% 0 0 / .45) calc(min(var(--_scroll-area-fade), var(--scroll-area-overflow-y-start)) * .4),
|
|
31
|
+
black min(var(--_scroll-area-fade), var(--scroll-area-overflow-y-start)),
|
|
32
|
+
black calc(100% - min(var(--_scroll-area-fade), var(--scroll-area-overflow-y-end, var(--_scroll-area-fade)))),
|
|
33
|
+
oklch(0% 0 0 / .45)
|
|
34
|
+
calc(100% - min(var(--_scroll-area-fade), var(--scroll-area-overflow-y-end, var(--_scroll-area-fade))) * .4),
|
|
35
|
+
transparent 100%);
|
|
36
|
+
mask-repeat: no-repeat;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.CMB_1a_scroll-area__viewport--fade-x {
|
|
40
|
+
--_scroll-area-fade-size: 2rem;
|
|
41
|
+
--_scroll-area-fade-scale: 1;
|
|
42
|
+
--_scroll-area-fade: calc(var(--_scroll-area-fade-size) * var(--_scroll-area-fade-scale));
|
|
43
|
+
mask-image: linear-gradient(to right,
|
|
44
|
+
transparent 0,
|
|
45
|
+
oklch(0% 0 0 / .45) calc(min(var(--_scroll-area-fade), var(--scroll-area-overflow-x-start)) * .4),
|
|
46
|
+
black min(var(--_scroll-area-fade), var(--scroll-area-overflow-x-start)),
|
|
47
|
+
black calc(100% - min(var(--_scroll-area-fade), var(--scroll-area-overflow-x-end, var(--_scroll-area-fade)))),
|
|
48
|
+
oklch(0% 0 0 / .45)
|
|
49
|
+
calc(100% - min(var(--_scroll-area-fade), var(--scroll-area-overflow-x-end, var(--_scroll-area-fade))) * .4),
|
|
50
|
+
transparent 100%);
|
|
51
|
+
mask-repeat: no-repeat;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.CMB_1a_scroll-area__viewport--fade-both {
|
|
55
|
+
--_scroll-area-fade-size: 2rem;
|
|
56
|
+
--_scroll-area-fade-scale: 1;
|
|
57
|
+
--_scroll-area-fade: calc(var(--_scroll-area-fade-size) * var(--_scroll-area-fade-scale));
|
|
58
|
+
mask-image: linear-gradient(to bottom,
|
|
59
|
+
transparent 0,
|
|
60
|
+
oklch(0% 0 0 / .45) calc(min(var(--_scroll-area-fade), var(--scroll-area-overflow-y-start)) * .4),
|
|
61
|
+
black min(var(--_scroll-area-fade), var(--scroll-area-overflow-y-start)),
|
|
62
|
+
black calc(100% - min(var(--_scroll-area-fade), var(--scroll-area-overflow-y-end, var(--_scroll-area-fade)))),
|
|
63
|
+
oklch(0% 0 0 / .45)
|
|
64
|
+
calc(100% - min(var(--_scroll-area-fade), var(--scroll-area-overflow-y-end, var(--_scroll-area-fade))) * .4),
|
|
65
|
+
transparent 100%),
|
|
66
|
+
linear-gradient(to right,
|
|
67
|
+
transparent 0,
|
|
68
|
+
oklch(0% 0 0 / .45) calc(min(var(--_scroll-area-fade), var(--scroll-area-overflow-x-start)) * .4),
|
|
69
|
+
black min(var(--_scroll-area-fade), var(--scroll-area-overflow-x-start)),
|
|
70
|
+
black calc(100% - min(var(--_scroll-area-fade), var(--scroll-area-overflow-x-end, var(--_scroll-area-fade)))),
|
|
71
|
+
oklch(0% 0 0 / .45)
|
|
72
|
+
calc(100% - min(var(--_scroll-area-fade), var(--scroll-area-overflow-x-end, var(--_scroll-area-fade))) * .4),
|
|
73
|
+
transparent 100%);
|
|
74
|
+
-webkit-mask-composite: source-in;
|
|
75
|
+
mask-repeat: no-repeat;
|
|
76
|
+
mask-composite: intersect;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@media (prefers-color-scheme: dark) {
|
|
80
|
+
.CMB_1a_scroll-area__viewport--fade, .CMB_1a_scroll-area__viewport--fade-x, .CMB_1a_scroll-area__viewport--fade-both {
|
|
81
|
+
--_scroll-area-fade-scale: 1.25;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
html.CMB_1a_dark .CMB_1a_scroll-area__viewport--fade, html.CMB_1a_dark .CMB_1a_scroll-area__viewport--fade-x, html.CMB_1a_dark .CMB_1a_scroll-area__viewport--fade-both {
|
|
86
|
+
--_scroll-area-fade-scale: 1.25;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
html.CMB_1a_light .CMB_1a_scroll-area__viewport--fade, html.CMB_1a_light .CMB_1a_scroll-area__viewport--fade-x, html.CMB_1a_light .CMB_1a_scroll-area__viewport--fade-both {
|
|
90
|
+
--_scroll-area-fade-scale: 1;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.CMB_1a_scroll-area__content {
|
|
94
|
+
min-inline-size: 100%;
|
|
95
|
+
display: block;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.CMB_1a_scroll-area__scrollbar {
|
|
99
|
+
opacity: 0;
|
|
100
|
+
pointer-events: none;
|
|
101
|
+
user-select: none;
|
|
102
|
+
touch-action: none;
|
|
103
|
+
background-color: #0000;
|
|
104
|
+
transition: opacity .15s ease-out;
|
|
105
|
+
display: flex;
|
|
106
|
+
position: absolute;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.CMB_1a_scroll-area__scrollbar[data-hovering], .CMB_1a_scroll-area__scrollbar[data-scrolling] {
|
|
110
|
+
opacity: 1;
|
|
111
|
+
pointer-events: auto;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.CMB_1a_scroll-area__scrollbar[data-hovering] {
|
|
115
|
+
transition-duration: .15s;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.CMB_1a_scroll-area__scrollbar[data-scrolling] {
|
|
119
|
+
transition-duration: 0s;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.CMB_1a_scroll-area__scrollbar[data-orientation="vertical"] {
|
|
123
|
+
justify-content: center;
|
|
124
|
+
inline-size: .625rem;
|
|
125
|
+
padding: 2px;
|
|
126
|
+
inset-block-start: 0;
|
|
127
|
+
inset-block-end: var(--scroll-area-corner-height, 0);
|
|
128
|
+
inset-inline-end: 0;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.CMB_1a_scroll-area__scrollbar[data-orientation="horizontal"] {
|
|
132
|
+
align-items: center;
|
|
133
|
+
block-size: .625rem;
|
|
134
|
+
padding: 2px;
|
|
135
|
+
inset-block-end: 0;
|
|
136
|
+
inset-inline-start: 0;
|
|
137
|
+
inset-inline-end: var(--scroll-area-corner-width, 0);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.CMB_1a_scroll-area__thumb {
|
|
141
|
+
background-color: var(--sk-scrollbar-thumb);
|
|
142
|
+
border-radius: 999px;
|
|
143
|
+
flex-shrink: 0;
|
|
144
|
+
position: relative;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.CMB_1a_scroll-area__thumb:hover {
|
|
148
|
+
background-color: var(--sk-scrollbar-thumb-hover);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.CMB_1a_scroll-area__thumb[data-orientation="vertical"] {
|
|
152
|
+
inline-size: 100%;
|
|
153
|
+
min-block-size: var(--scroll-area-thumb-height);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.CMB_1a_scroll-area__thumb[data-orientation="horizontal"] {
|
|
157
|
+
block-size: 100%;
|
|
158
|
+
min-inline-size: var(--scroll-area-thumb-width);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.CMB_1a_scroll-area__corner {
|
|
162
|
+
inline-size: var(--scroll-area-corner-width);
|
|
163
|
+
block-size: var(--scroll-area-corner-height);
|
|
164
|
+
background-color: #0000;
|
|
165
|
+
position: absolute;
|
|
166
|
+
inset-block-end: 0;
|
|
167
|
+
inset-inline-end: 0;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
@media (prefers-reduced-motion: reduce) {
|
|
171
|
+
.CMB_1a_scroll-area__scrollbar {
|
|
172
|
+
transition: none;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import './scroll-area-DkORxJE9.css';
|
|
2
|
+
import { t as mergeClassName } from "./merge-class-name-C4KJJGuK.js";
|
|
3
|
+
import { t as styleVars } from "./style-vars-ZSrCUzKx.js";
|
|
4
|
+
import { clsx } from "clsx";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import { ScrollArea } from "@base-ui/react/scroll-area";
|
|
7
|
+
//#region src/scroll-area/scroll-area.module.css
|
|
8
|
+
var scroll_area_module_default = {
|
|
9
|
+
"dark": "CMB_1a_dark",
|
|
10
|
+
"light": "CMB_1a_light",
|
|
11
|
+
"scroll-area": "CMB_1a_scroll-area",
|
|
12
|
+
"scroll-area__content": "CMB_1a_scroll-area__content",
|
|
13
|
+
"scroll-area__corner": "CMB_1a_scroll-area__corner",
|
|
14
|
+
"scroll-area__scrollbar": "CMB_1a_scroll-area__scrollbar",
|
|
15
|
+
"scroll-area__thumb": "CMB_1a_scroll-area__thumb",
|
|
16
|
+
"scroll-area__viewport": "CMB_1a_scroll-area__viewport",
|
|
17
|
+
"scroll-area__viewport--fade": "CMB_1a_scroll-area__viewport--fade",
|
|
18
|
+
"scroll-area__viewport--fade-both": "CMB_1a_scroll-area__viewport--fade-both",
|
|
19
|
+
"scroll-area__viewport--fade-x": "CMB_1a_scroll-area__viewport--fade-x"
|
|
20
|
+
};
|
|
21
|
+
//#endregion
|
|
22
|
+
//#region src/scroll-area/scroll-area-content.tsx
|
|
23
|
+
function ScrollAreaContent({ className, ...props }) {
|
|
24
|
+
return /* @__PURE__ */ jsx(ScrollArea.Content, {
|
|
25
|
+
className: mergeClassName(scroll_area_module_default["scroll-area__content"], className),
|
|
26
|
+
...props
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
//#endregion
|
|
30
|
+
//#region src/scroll-area/scroll-area-corner.tsx
|
|
31
|
+
function ScrollAreaCorner({ className, ...props }) {
|
|
32
|
+
return /* @__PURE__ */ jsx(ScrollArea.Corner, {
|
|
33
|
+
className: mergeClassName(scroll_area_module_default["scroll-area__corner"], className),
|
|
34
|
+
...props
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
//#endregion
|
|
38
|
+
//#region src/scroll-area/scroll-area-root.tsx
|
|
39
|
+
function ScrollAreaRoot({ className, ...props }) {
|
|
40
|
+
return /* @__PURE__ */ jsx(ScrollArea.Root, {
|
|
41
|
+
className: mergeClassName(scroll_area_module_default["scroll-area"], className),
|
|
42
|
+
...props
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
//#endregion
|
|
46
|
+
//#region src/scroll-area/scroll-area-scrollbar.tsx
|
|
47
|
+
function ScrollAreaScrollbar({ className, ...props }) {
|
|
48
|
+
return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
|
|
49
|
+
className: mergeClassName(scroll_area_module_default["scroll-area__scrollbar"], className),
|
|
50
|
+
...props
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
//#endregion
|
|
54
|
+
//#region src/scroll-area/scroll-area-thumb.tsx
|
|
55
|
+
function ScrollAreaThumb({ className, ...props }) {
|
|
56
|
+
return /* @__PURE__ */ jsx(ScrollArea.Thumb, {
|
|
57
|
+
className: mergeClassName(scroll_area_module_default["scroll-area__thumb"], className),
|
|
58
|
+
...props
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
//#endregion
|
|
62
|
+
//#region src/scroll-area/scroll-area-viewport.tsx
|
|
63
|
+
const FADE_CLASS = {
|
|
64
|
+
vertical: scroll_area_module_default["scroll-area__viewport--fade"],
|
|
65
|
+
horizontal: scroll_area_module_default["scroll-area__viewport--fade-x"],
|
|
66
|
+
both: scroll_area_module_default["scroll-area__viewport--fade-both"]
|
|
67
|
+
};
|
|
68
|
+
function ScrollAreaViewport({ className, style, fade = false, fadeSize, ...props }) {
|
|
69
|
+
const fadeKey = fade === true ? "vertical" : fade === false ? void 0 : fade;
|
|
70
|
+
const fadeClass = fadeKey ? FADE_CLASS[fadeKey] : void 0;
|
|
71
|
+
const mergedStyle = typeof style === "function" ? ((state) => styleVars({ "--_scroll-area-fade-size": fadeSize }, style(state))) : styleVars({ "--_scroll-area-fade-size": fadeSize }, style);
|
|
72
|
+
return /* @__PURE__ */ jsx(ScrollArea.Viewport, {
|
|
73
|
+
className: mergeClassName(clsx(scroll_area_module_default["scroll-area__viewport"], fadeClass), className),
|
|
74
|
+
style: mergedStyle,
|
|
75
|
+
...props
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
//#endregion
|
|
79
|
+
//#region src/scroll-area/index.ts
|
|
80
|
+
/**
|
|
81
|
+
* Compound component for a scrollable area with custom scrollbars and optional
|
|
82
|
+
* edge fades. Wraps Base UI's Scroll Area so every Base UI prop, `render`
|
|
83
|
+
* override, and ref works as documented.
|
|
84
|
+
*
|
|
85
|
+
* ```tsx
|
|
86
|
+
* import { ScrollArea } from '@project-backbone/skeletal'
|
|
87
|
+
*
|
|
88
|
+
* <ScrollArea.Root style={{ height: 200 }}>
|
|
89
|
+
* <ScrollArea.Viewport fade>
|
|
90
|
+
* <ScrollArea.Content>Long content…</ScrollArea.Content>
|
|
91
|
+
* </ScrollArea.Viewport>
|
|
92
|
+
* <ScrollArea.Scrollbar>
|
|
93
|
+
* <ScrollArea.Thumb />
|
|
94
|
+
* </ScrollArea.Scrollbar>
|
|
95
|
+
* <ScrollArea.Corner />
|
|
96
|
+
* </ScrollArea.Root>
|
|
97
|
+
* ```
|
|
98
|
+
*
|
|
99
|
+
* Enable `fade` on the `Viewport` for a soft mask at scroll edges — ideal for
|
|
100
|
+
* side navs and lists where the content should hint at overflow. Tune the
|
|
101
|
+
* distance with `fadeSize` (e.g. `1.5rem`). The mask tracks
|
|
102
|
+
* `--scroll-area-overflow-y-start/end` automatically; no shadow overlays or
|
|
103
|
+
* scroll listeners are needed.
|
|
104
|
+
*/
|
|
105
|
+
const ScrollArea$1 = {
|
|
106
|
+
Root: ScrollAreaRoot,
|
|
107
|
+
Viewport: ScrollAreaViewport,
|
|
108
|
+
Content: ScrollAreaContent,
|
|
109
|
+
Scrollbar: ScrollAreaScrollbar,
|
|
110
|
+
Thumb: ScrollAreaThumb,
|
|
111
|
+
Corner: ScrollAreaCorner
|
|
112
|
+
};
|
|
113
|
+
//#endregion
|
|
114
|
+
export { ScrollArea$1 as t };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { _ as SelectGroupProps, a as SelectScrollUpArrowProps, c as SelectPositionerProps, d as SelectListProps, f as SelectLabelProps, g as SelectGroupLabelProps, h as SelectItemProps, i as SelectSeparatorProps, l as SelectPortalProps, m as SelectItemIndicatorProps, n as SelectValueProps, o as SelectScrollDownArrowProps, p as SelectItemTextProps, r as SelectTriggerProps, s as SelectProps, t as Select, u as SelectPopupProps, v as SelectBackdropProps, y as SelectArrowProps } from "../index-rH7TJeJt.js";
|
|
2
|
+
export { Select, type SelectArrowProps, type SelectBackdropProps, type SelectGroupLabelProps, type SelectGroupProps, type SelectItemIndicatorProps, type SelectItemProps, type SelectItemTextProps, type SelectLabelProps, type SelectListProps, type SelectPopupProps, type SelectPortalProps, type SelectPositionerProps, type SelectProps, type SelectScrollDownArrowProps, type SelectScrollUpArrowProps, type SelectSeparatorProps, type SelectTriggerProps, type SelectValueProps };
|