@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.
Files changed (118) hide show
  1. package/README.md +35 -0
  2. package/dist/alert-dialog/index.d.ts +2 -0
  3. package/dist/alert-dialog/index.js +2 -0
  4. package/dist/alert-dialog-1hxVC_5N.js +71 -0
  5. package/dist/badge/index.d.ts +2 -0
  6. package/dist/badge/index.js +2 -0
  7. package/dist/badge-C3p1L0E7.css +53 -0
  8. package/dist/badge-C3p1L0E7.js +32 -0
  9. package/dist/button/index.d.ts +2 -0
  10. package/dist/button/index.js +2 -0
  11. package/dist/button-B48UNbaC.css +152 -0
  12. package/dist/button-B48UNbaC.js +46 -0
  13. package/dist/button-Dvd4n2U4.d.ts +56 -0
  14. package/dist/checkbox/index.d.ts +2 -0
  15. package/dist/checkbox/index.js +2 -0
  16. package/dist/checkbox-wh2BoiSj.css +76 -0
  17. package/dist/checkbox-wh2BoiSj.js +112 -0
  18. package/dist/cluster-BJ4m5uGN.css +9 -0
  19. package/dist/cluster-BJ4m5uGN.js +21 -0
  20. package/dist/combobox/index.d.ts +2 -0
  21. package/dist/combobox/index.js +2 -0
  22. package/dist/combobox-DWH7uSsx.css +389 -0
  23. package/dist/combobox-DWH7uSsx.js +327 -0
  24. package/dist/command-palette/index.d.ts +2 -0
  25. package/dist/command-palette/index.js +2 -0
  26. package/dist/command-palette-DF4XJ8qz.css +164 -0
  27. package/dist/command-palette-DF4XJ8qz.js +191 -0
  28. package/dist/dialog/index.d.ts +6 -0
  29. package/dist/dialog/index.js +2 -0
  30. package/dist/dialog-C4yqxII_.js +73 -0
  31. package/dist/dialog-footer-Br9KZP4v.js +29 -0
  32. package/dist/dialog-footer-bNVIVPbu.d.ts +56 -0
  33. package/dist/dialog-portal-B21WFYkQ.css +131 -0
  34. package/dist/dialog-portal-B21WFYkQ.js +26 -0
  35. package/dist/dialog-portal-BF89FBeX.d.ts +15 -0
  36. package/dist/dialog-title-DRYRIxCp.js +35 -0
  37. package/dist/dialog-title-jyf86Q8C.d.ts +36 -0
  38. package/dist/dialog-viewport-CaMWJrCJ.d.ts +42 -0
  39. package/dist/dialog-viewport-vpbsq7Ib.js +21 -0
  40. package/dist/drawer/index.d.ts +2 -0
  41. package/dist/drawer/index.js +2 -0
  42. package/dist/drawer-DQmz_uCP.css +214 -0
  43. package/dist/drawer-DQmz_uCP.js +180 -0
  44. package/dist/icon/index.d.ts +2 -0
  45. package/dist/icon/index.js +2 -0
  46. package/dist/icon-DBOdxNvH.css +6 -0
  47. package/dist/icon-DBOdxNvH.js +20 -0
  48. package/dist/index-A2QmU5r9.d.ts +37 -0
  49. package/dist/index-B0uNLS7z.d.ts +301 -0
  50. package/dist/index-B63PSP58.d.ts +94 -0
  51. package/dist/index-BBOkTl3h.d.ts +261 -0
  52. package/dist/index-BLFVnve3.d.ts +53 -0
  53. package/dist/index-BXPUT5u-.d.ts +72 -0
  54. package/dist/index-BngvATZx.d.ts +35 -0
  55. package/dist/index-Br2NrBW_.d.ts +444 -0
  56. package/dist/index-CUy-9csi.d.ts +135 -0
  57. package/dist/index-CbMW32E9.d.ts +82 -0
  58. package/dist/index-CyTcR6iv.d.ts +433 -0
  59. package/dist/index-CznsZ_1M.d.ts +85 -0
  60. package/dist/index-D-6gOciw.d.ts +350 -0
  61. package/dist/index-DdqDyczP.d.ts +209 -0
  62. package/dist/index-GOGpFujX.d.ts +144 -0
  63. package/dist/index-W3ozKcis.d.ts +245 -0
  64. package/dist/index-kpw3_4q_.d.ts +50 -0
  65. package/dist/index-rH7TJeJt.d.ts +334 -0
  66. package/dist/index-rQ7sRkqg.d.ts +122 -0
  67. package/dist/index.css +93 -0
  68. package/dist/index.d.ts +26 -0
  69. package/dist/index.js +26 -0
  70. package/dist/input/index.d.ts +2 -0
  71. package/dist/input/index.js +2 -0
  72. package/dist/input-CQ_ean8e.css +129 -0
  73. package/dist/input-CQ_ean8e.js +65 -0
  74. package/dist/layout/index.d.ts +2 -0
  75. package/dist/layout/index.js +4 -0
  76. package/dist/layout-qoyutnKU.css +181 -0
  77. package/dist/layout-qoyutnKU.js +169 -0
  78. package/dist/menu/index.d.ts +2 -0
  79. package/dist/menu/index.js +2 -0
  80. package/dist/menu-DRdGMI_-.css +236 -0
  81. package/dist/menu-DRdGMI_-.js +243 -0
  82. package/dist/merge-class-name-C4KJJGuK.js +15 -0
  83. package/dist/popover/index.d.ts +2 -0
  84. package/dist/popover/index.js +2 -0
  85. package/dist/popover-CenynT0Z.css +139 -0
  86. package/dist/popover-CenynT0Z.js +174 -0
  87. package/dist/radio/index.d.ts +2 -0
  88. package/dist/radio/index.js +2 -0
  89. package/dist/radio-BJrvdkga.css +80 -0
  90. package/dist/radio-BJrvdkga.js +75 -0
  91. package/dist/scroll-area/index.d.ts +2 -0
  92. package/dist/scroll-area/index.js +2 -0
  93. package/dist/scroll-area-DkORxJE9.css +175 -0
  94. package/dist/scroll-area-DkORxJE9.js +114 -0
  95. package/dist/select/index.d.ts +2 -0
  96. package/dist/select/index.js +2 -0
  97. package/dist/select-BaqBHUac.css +273 -0
  98. package/dist/select-BaqBHUac.js +254 -0
  99. package/dist/skeleton/index.d.ts +2 -0
  100. package/dist/skeleton/index.js +2 -0
  101. package/dist/skeleton-W6fwO5pf.css +88 -0
  102. package/dist/skeleton-W6fwO5pf.js +97 -0
  103. package/dist/spinner/index.d.ts +2 -0
  104. package/dist/spinner/index.js +2 -0
  105. package/dist/spinner-DB6ap8Si.css +43 -0
  106. package/dist/spinner-DB6ap8Si.js +27 -0
  107. package/dist/stack-BzFVrsmT.css +12 -0
  108. package/dist/stack-BzFVrsmT.js +52 -0
  109. package/dist/style-vars-ZSrCUzKx.js +13 -0
  110. package/dist/switch/index.d.ts +2 -0
  111. package/dist/switch/index.js +2 -0
  112. package/dist/switch-DizP31iF.css +76 -0
  113. package/dist/switch-DizP31iF.js +58 -0
  114. package/dist/tooltip/index.d.ts +2 -0
  115. package/dist/tooltip/index.js +2 -0
  116. package/dist/tooltip-CQk2WjUS.css +92 -0
  117. package/dist/tooltip-CQk2WjUS.js +138 -0
  118. 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,2 @@
1
+ import { i as RadioGroupProps, n as RadioProps, r as RadioIndicatorProps, t as Radio } from "../index-rQ7sRkqg.js";
2
+ export { Radio, type RadioGroupProps, type RadioIndicatorProps, type RadioProps };
@@ -0,0 +1,2 @@
1
+ import { t as Radio } from "../radio-BJrvdkga.js";
2
+ export { Radio };
@@ -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,2 @@
1
+ import { t as ScrollArea } from "../scroll-area-DkORxJE9.js";
2
+ export { ScrollArea };
@@ -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 };
@@ -0,0 +1,2 @@
1
+ import { t as Select } from "../select-BaqBHUac.js";
2
+ export { Select };