@glasshome/ui 1.6.0 → 2.0.0

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 (84) hide show
  1. package/README.md +3 -3
  2. package/SPEC.md +30 -0
  3. package/dist/index.d.ts +13 -5
  4. package/dist/index.js +2 -13
  5. package/dist/lib/alert-tones.d.ts +2 -1
  6. package/dist/lib/badge-tone.d.ts +3 -1
  7. package/dist/lib/button-variants.d.ts +2 -1
  8. package/dist/lib/card-classes.d.ts +8 -7
  9. package/dist/lib/glass-tone.d.ts +2 -0
  10. package/dist/lib/input-classes.d.ts +10 -1
  11. package/dist/lib/layers.d.ts +8 -0
  12. package/dist/lib/menu-classes.d.ts +5 -0
  13. package/dist/lib/motion-classes.d.ts +8 -0
  14. package/dist/lib/overlay-classes.d.ts +11 -4
  15. package/dist/lib/picker-classes.d.ts +3 -0
  16. package/dist/lib/pill-classes.d.ts +3 -0
  17. package/dist/lib/position-bar-classes.d.ts +2 -0
  18. package/dist/lib/section-tokens.d.ts +3 -2
  19. package/dist/lib/segment-classes.d.ts +1 -0
  20. package/dist/lib/thumb-classes.d.ts +5 -0
  21. package/dist/lib/use-is-mobile.d.ts +2 -1
  22. package/dist/solid/alert-dialog.d.ts +16 -17
  23. package/dist/solid/area-picker.d.ts +3 -0
  24. package/dist/solid/bottom-sheet/bottom-sheet.d.ts +9 -7
  25. package/dist/solid/bottom-sheet/constants.d.ts +0 -1
  26. package/dist/solid/bottom-sheet/index.d.ts +1 -1
  27. package/dist/solid/charts.d.ts +10 -5
  28. package/dist/solid/checkbox.d.ts +16 -1
  29. package/dist/solid/context-menu.d.ts +3 -1
  30. package/dist/solid/count-pill.d.ts +5 -3
  31. package/dist/solid/data-table.d.ts +4 -3
  32. package/dist/solid/dialog-parts.d.ts +55 -0
  33. package/dist/solid/dialog.d.ts +17 -14
  34. package/dist/solid/dropdown-menu.d.ts +19 -25
  35. package/dist/solid/empty.d.ts +5 -28
  36. package/dist/solid/entity-selector.d.ts +2 -0
  37. package/dist/solid/form.d.ts +27 -7
  38. package/dist/solid/hero-action.d.ts +0 -24
  39. package/dist/solid/icon-picker.d.ts +2 -0
  40. package/dist/solid/index.d.ts +15 -11
  41. package/dist/solid/index.js +7488 -6798
  42. package/dist/solid/input-group.d.ts +14 -2
  43. package/dist/solid/item.d.ts +6 -30
  44. package/dist/solid/menu-parts.d.ts +47 -0
  45. package/dist/solid/option-card.d.ts +20 -0
  46. package/dist/solid/ornament.d.ts +3 -0
  47. package/dist/solid/page-header.d.ts +11 -1
  48. package/dist/solid/picker-row.d.ts +14 -0
  49. package/dist/solid/picker-search.d.ts +15 -0
  50. package/dist/solid/popover.d.ts +9 -18
  51. package/dist/solid/progress.d.ts +1 -0
  52. package/dist/solid/responsive-dialog.d.ts +16 -6
  53. package/dist/solid/schema-form.d.ts +4 -0
  54. package/dist/solid/scroll-area.d.ts +1 -0
  55. package/dist/solid/section-card.d.ts +5 -6
  56. package/dist/solid/sheet.d.ts +22 -16
  57. package/dist/solid/step-indicator.d.ts +2 -2
  58. package/dist/solid/table.d.ts +3 -0
  59. package/dist/solid/tabs.d.ts +7 -5
  60. package/dist/solid/tooltip.d.ts +1 -1
  61. package/dist/solid/widget-identity.d.ts +4 -1
  62. package/dist/tokens/index.js +1 -1
  63. package/dist/{utils-8e8QCynI.js → utils-CiJUMt2j.js} +560 -523
  64. package/package.json +5 -3
  65. package/src/lib/alert-tones.ts +8 -3
  66. package/src/lib/badge-tone.ts +9 -2
  67. package/src/lib/button-variants.ts +8 -4
  68. package/src/lib/card-classes.ts +12 -7
  69. package/src/lib/carousel-classes.ts +2 -3
  70. package/src/lib/glass-tone.ts +8 -0
  71. package/src/lib/input-classes.ts +23 -1
  72. package/src/lib/layers.ts +12 -0
  73. package/src/lib/menu-classes.ts +21 -0
  74. package/src/lib/motion-classes.ts +40 -0
  75. package/src/lib/overlay-classes.ts +22 -5
  76. package/src/lib/picker-classes.ts +17 -0
  77. package/src/lib/pill-classes.ts +13 -0
  78. package/src/lib/position-bar-classes.ts +10 -0
  79. package/src/lib/section-tokens.ts +9 -4
  80. package/src/lib/segment-classes.ts +7 -0
  81. package/src/lib/thumb-classes.ts +21 -0
  82. package/src/lib/use-is-mobile.ts +10 -6
  83. package/src/styles/globals.css +90 -19
  84. package/src/styles/theme.css +67 -6
package/README.md CHANGED
@@ -48,7 +48,7 @@ function DeviceCard() {
48
48
  <Card>
49
49
  <CardHeader>
50
50
  <CardTitle>Living Room</CardTitle>
51
- <Badge tone="var(--success)" dot>Online</Badge>
51
+ <Badge tone="var(--success)">Online</Badge>
52
52
  </CardHeader>
53
53
  <CardContent>
54
54
  <Button onClick={() => console.log("toggled")}>Toggle Light</Button>
@@ -58,9 +58,9 @@ function DeviceCard() {
58
58
  }
59
59
  ```
60
60
 
61
- Component families: `Accordion` · `Alert` · `AlertDialog` · `AreaPicker` · `AspectRatio` · `Avatar` · `Badge` · `BottomSheet` · `Breadcrumb` · `Button` · `ButtonGroup` · `Calendar` · `Card` · `Carousel` · `Charts (AreaChart, BarList)` · `Checkbox` · `Collapsible` · `ColorSlider` · `ColorWheel` · `Command` · `ContextMenu` · `CopyButton` · `CountPill` · `DataTable` · `Dialog` · `Dock` · `DropdownMenu` · `Empty` · `EntitySelector` · `Field` · `Form` · `HoverCard` · `Input` · `InputGroup` · `InputOTP` · `Item` · `Kbd` · `Label` · `Logo` · `Menubar` · `NavigationMenu` · `NumberField` · `Overlay` · `PageHeader` · `Pagination` · `Popover` · `Progress` · `RadioGroup` · `Resizable` · `ResponsiveDialog` · `SchemaForm` · `ScopeIndicator` · `ScrollArea` · `SectionCard` · `Select` · `Separator` · `SettingsRow` · `Sheet` · `Sidebar` · `Skeleton` · `Slider` · `SlidingIndicator` · `Sonner (toast)` · `Spinner` · `Switch` · `Table` · `Tabs` · `Textarea` · `TierBadge` · `Toggle` · `ToggleGroup` · `Tooltip` · `WidgetCard` · `WidgetIdentity` · `WidgetTrustBadge`
61
+ Component families: `Accordion` · `Alert` · `AlertDialog` · `AreaPicker` · `AspectRatio` · `Avatar` · `Badge` · `BottomSheet` · `Breadcrumb` · `Button` · `ButtonGroup` · `Card` · `Carousel` · `Charts (AreaChart, BarList, StackedBar, RangeToggle)` · `Checkbox` · `Collapsible` · `ColorSlider` · `ColorWheel` · `ContextMenu` · `CopyButton` · `CountPill` · `DataTable (TableSearchInput, TableFilterSelect, TableSortHeader, TableSkeleton, TableEmpty, TableError, TableBulkBar)` · `Dialog` · `Dock` · `DropdownMenu` · `Empty` · `EntitySelector` · `Field` · `Form` · `HeroAction` · `HoverCard` · `IconPicker` · `ImagePicker` · `Input` · `InputGroup` · `InputOTP` · `Item` · `Kbd` · `Label` · `Logo` · `MediaTile` · `NumberField` · `OptionCard` · `Overlay` · `PageHeader` · `Pagination` · `PasswordInput` · `PickerSearch` · `Popover` · `Progress` · `RadioGroup` · `Resizable` · `ResponsiveDialog` · `SchemaForm` · `ScopeIndicator` · `ScrollArea` · `SectionCard` · `Select` · `Separator` · `SettingsRow (SwitchRow, LabeledField, LabeledInput, LabeledIconPicker, RowActions, SectionAddButton, SectionEmpty)` · `Sheet` · `Skeleton` · `Slider` · `SlidingIndicator` · `Sonner (toast)` · `Spinner` · `StepIndicator` · `Switch` · `Table` · `Tabs` · `Textarea` · `TierBadge` · `Toggle` · `ToggleGroup` · `Tooltip` · `WidgetCard` · `WidgetIdentity` · `WidgetTrustBadge`
62
62
 
63
- `Badge` is glass-only: `tone` takes any CSS color (`<Badge tone="var(--success)" dot>`); there are no solid variant badges.
63
+ `Badge` is glass-only: `tone` takes any CSS color (`<Badge tone="var(--success)">`); there are no solid variant badges.
64
64
 
65
65
  ### `@glasshome/ui/tokens` — design tokens as data
66
66
 
package/SPEC.md CHANGED
@@ -104,6 +104,9 @@ role clears 4.5:1 against `--background`/`--card`/`--popover`/`--muted` (3:1 for
104
104
  | a panel | `<Card>` (Solid or `astro/Card.astro`) | `border bg-card/NN backdrop-blur` |
105
105
  | a floating panel | `<Overlay>` / the overlay-wearing primitive | raw `bg-popover shadow` |
106
106
  | a modal | `<ResponsiveDialog>` (desktop dialog + mobile bottom sheet), `<Dialog>` for desktop-only | `<Sheet side="bottom">` as a modal |
107
+ | an avatar or icon beside a modal title | `<Header media={…}>` | a hand-rolled row inside the header |
108
+ | a tab row in a modal header | `<Tabs layout="split">` around the parts, `<Header wrap action={<TabsList class="w-auto">…}>` | `class="contents"` on `Tabs` and `flex-wrap` by hand |
109
+ | a form inside a modal | `<Body as="form" id="…">` + a footer button with `form="…"` | a `display: contents` form wrapper inside the Body |
107
110
  | a status chip | `<Badge tone="var(--success)">` | `rounded-full bg-green-500/10` |
108
111
  | a callout | `<Alert tone="warning">` | `border-amber-500/30 bg-amber-500/10` |
109
112
  | a titled group of form rows | `<FieldSet>` + `<FieldLegend>` (+ `<FieldDescription>`) | a tracked uppercase `SectionLabel` eyebrow |
@@ -118,6 +121,33 @@ In server-run `.astro` frontmatter you cannot import `@glasshome/ui/solid`
118
121
  (Solid `template()` throws at module load). Use the `@glasshome/ui/astro`
119
122
  components, or the pure recipes/tokens from the root `@glasshome/ui`.
120
123
 
124
+ ## Motion (the pillar)
125
+
126
+ Motion is one system, not per-component flair. Four rules, all held by
127
+ `lib/motion-classes.ts`, `.gh-stagger` and the `--glass-*` transition in
128
+ `globals.css`, on the theme tokens `--duration-*` / `--ease-*` (zeroed under
129
+ `prefers-reduced-motion`):
130
+
131
+ 1. **Colours never snap.** A tinted state change (checked, selected, hover, tone
132
+ swap) morphs on `--duration-state`. Every glass surface gets this from the
133
+ base rule; a surface that names its own transition says `transition-glass`,
134
+ never `transition-all` (Chromium's `all` skips registered custom properties).
135
+ 2. **Shapes morph, they do not appear.** A thing that opens grows out of what
136
+ opened it: a picker or menu panel unrolls out of its trigger's box
137
+ (`MORPH_MOTION`, `FIELD_MOTION`), a dialog rises into place (`MODAL_MOTION`),
138
+ a card with sub-options grows to reveal them (OptionCard's drawer), an
139
+ indicator slides and stretches (SlidingIndicator, position bars). Nothing is
140
+ swapped in below or beside its origin.
141
+ 3. **Children arrive one after another.** The rows behind a growing edge stagger
142
+ in (`STAGGER` = `.gh-stagger`, base 80ms, 60ms per row, capped), so a panel is
143
+ read top to bottom as it opens. Mount-only: live re-renders never re-stagger.
144
+ 4. **Leaving is the same path, faster.** Contract on `--ease-contract` at half
145
+ the arrival time. Pressables dip (`PRESS_DIP`).
146
+
147
+ A new component with an open, pick or reveal state uses these doors before it
148
+ gets any motion of its own; a motion need none of them covers is added to
149
+ `motion-classes.ts`, not written inline.
150
+
121
151
  ## Prop language
122
152
 
123
153
  - `tone` — a CSS **color** string on glass primitives (`Badge`, indicators).
package/dist/index.d.ts CHANGED
@@ -1,11 +1,19 @@
1
1
  export { ALERT_CLASS, ALERT_CONTENT_CLASS, ALERT_DESCRIPTION_CLASS, ALERT_ICON_BG_CLASS, ALERT_ICON_CLASS, ALERT_ICON_PATHS, ALERT_TITLE_CLASS, ALERT_TONES, type AlertTone, type AlertToneStyle, alertBorder, alertFill, alertIconBgStyle, alertIconFill, } from "./lib/alert-tones.js";
2
- export { BUTTON_DEFAULT_CLASS, BUTTON_OUTLINE_CLASS, buttonVariants, ICON_BUTTON_CLASS, } from "./lib/button-variants.js";
3
- export { CARD_BLUR, CARD_SURFACE, CARD_SURFACE_BASE, CARD_SURFACE_OPAQUE, TRACK_SURFACE, } from "./lib/card-classes.js";
2
+ export { BUTTON_DEFAULT_CLASS, BUTTON_OUTLINE_CLASS, buttonVariants, ICON_BUTTON_CLASS, OUTLINE_SURFACE, } from "./lib/button-variants.js";
3
+ export { CARD_BLUR, CARD_SURFACE, CARD_SURFACE_BASE, CARD_SURFACE_OPAQUE, SECTION_ROW_SURFACE, TRACK_SURFACE, } from "./lib/card-classes.js";
4
4
  export { CAROUSEL_DOTS, CAROUSEL_VIEWPORT, type CarouselTransition, carouselDot, carouselItem, carouselTrack, } from "./lib/carousel-classes.js";
5
5
  export { glassToneText, toneTextMix } from "./lib/glass-tone.js";
6
- export { FIELD_CHROME, INPUT_CLASS, INPUT_SURFACE } from "./lib/input-classes.js";
6
+ export { CONTROL_H, FIELD_CHROME, FIELD_CONTROL, FIELD_TEXT, FOCUS_RING, INPUT_CLASS, INPUT_SURFACE, INVALID_RING, } from "./lib/input-classes.js";
7
+ export { Z, Z_CLASS } from "./lib/layers.js";
7
8
  export { LOGO_DEFAULT_SIZE, LOGO_DEFAULT_SRC, LOGO_DEFAULT_SUB, LOGO_MARK_CLASS, LOGO_MARK_PX, LOGO_NAME_CLASS, LOGO_ROOT_CLASS, LOGO_SIZES, LOGO_STACK_CLASS, LOGO_SUB_CLASS, type LogoSize, } from "./lib/logo-lockup.js";
8
- export { OVERLAY_BLUR, OVERLAY_SURFACE, OVERLAY_SURFACE_BASE, OVERLAY_SURFACE_OPAQUE, SCRIM_CLASS, } from "./lib/overlay-classes.js";
9
+ export { MENU_ITEM, MENU_ITEM_BASE, MENU_ITEM_X, MENU_LABEL, MENU_SEPARATOR, } from "./lib/menu-classes.js";
10
+ export { FIELD_MOTION, MODAL_MOTION, MORPH_MOTION, OVERLAY_MOTION, PRESS_DIP, SCRIM_MOTION, SETTLE_MOTION, STAGGER, } from "./lib/motion-classes.js";
11
+ export { anchorToTriggerTop, FLOATING_PANEL, OVERLAY_BLUR, OVERLAY_SURFACE, OVERLAY_SURFACE_BASE, OVERLAY_SURFACE_OPAQUE, SCRIM_CLASS, } from "./lib/overlay-classes.js";
12
+ export { CONTROL_H_TOUCH, PICKER_LIST, PICKER_TRIGGER } from "./lib/picker-classes.js";
13
+ export { CHIP, ICON_PILL, ICON_PILL_TINT } from "./lib/pill-classes.js";
14
+ export { POSITION_BAR, POSITION_BAR_LIT } from "./lib/position-bar-classes.js";
9
15
  export { SECTION_INNER_RADIUS, SECTION_OUTER_RADIUS, SECTION_PADDING, SECTION_ROW_CLASS, } from "./lib/section-tokens.js";
10
- export { createIsMobile } from "./lib/use-is-mobile.js";
16
+ export { SEGMENT_ITEM } from "./lib/segment-classes.js";
17
+ export { THUMB_CLASS, THUMB_RAIL_BLEED, THUMB_RAIL_PAD, THUMB_SIZE, } from "./lib/thumb-classes.js";
18
+ export { createIsMobile, MOBILE_BREAKPOINT } from "./lib/use-is-mobile.js";
11
19
  export { cn } from "./lib/utils.js";
package/dist/index.js CHANGED
@@ -1,13 +1,2 @@
1
- import { $ as e, A as t, B as n, C as r, D as i, E as a, G as o, K as s, M as c, O as l, Q as u, S as d, T as f, U as p, V as m, W as h, X as g, Y as _, Z as v, _ as y, a as b, at as x, b as S, c as C, d as w, et as T, f as E, g as D, h as O, i as ee, it as k, k as A, l as j, m as M, n as N, nt as P, o as F, ot as I, p as L, q as R, r as z, rt as B, s as V, t as H, tt as U, u as W, v as G, w as K, x as q, y as J, z as Y } from "./utils-8e8QCynI.js";
2
- import { createSignal as X, onCleanup as Z, onMount as Q } from "solid-js";
3
- //#region src/lib/use-is-mobile.ts
4
- var $ = 768;
5
- function te() {
6
- let [e, t] = X(void 0);
7
- return Q(() => {
8
- let e = window.matchMedia(`(max-width: ${$ - 1}px)`), n = () => t(window.innerWidth < $);
9
- e.addEventListener("change", n), t(window.innerWidth < $), Z(() => e.removeEventListener("change", n));
10
- }), e;
11
- }
12
- //#endregion
13
- export { _ as ALERT_CLASS, g as ALERT_CONTENT_CLASS, v as ALERT_DESCRIPTION_CLASS, u as ALERT_ICON_BG_CLASS, e as ALERT_ICON_CLASS, T as ALERT_ICON_PATHS, U as ALERT_TITLE_CLASS, P as ALERT_TONES, h as BUTTON_DEFAULT_CLASS, o as BUTTON_OUTLINE_CLASS, c as CARD_BLUR, Y as CARD_SURFACE, n as CARD_SURFACE_BASE, m as CARD_SURFACE_OPAQUE, a as CAROUSEL_DOTS, i as CAROUSEL_VIEWPORT, q as FIELD_CHROME, s as ICON_BUTTON_CLASS, d as INPUT_CLASS, r as INPUT_SURFACE, w as LOGO_DEFAULT_SIZE, E as LOGO_DEFAULT_SRC, L as LOGO_DEFAULT_SUB, M as LOGO_MARK_CLASS, O as LOGO_MARK_PX, D as LOGO_NAME_CLASS, y as LOGO_ROOT_CLASS, G as LOGO_SIZES, J as LOGO_STACK_CLASS, S as LOGO_SUB_CLASS, F as OVERLAY_BLUR, V as OVERLAY_SURFACE, C as OVERLAY_SURFACE_BASE, j as OVERLAY_SURFACE_OPAQUE, W as SCRIM_CLASS, N as SECTION_INNER_RADIUS, z as SECTION_OUTER_RADIUS, ee as SECTION_PADDING, b as SECTION_ROW_CLASS, p as TRACK_SURFACE, B as alertBorder, k as alertFill, x as alertIconBgStyle, I as alertIconFill, R as buttonVariants, l as carouselDot, A as carouselItem, t as carouselTrack, H as cn, te as createIsMobile, K as glassToneText, f as toneTextMix };
1
+ import { $ as e, A as t, At as n, B as r, Bt as i, C as a, D as o, Dt as s, E as c, Et as l, F as u, Ft as d, G as f, Gt as p, H as m, Ht as h, I as g, J as _, Jt as v, K as y, Kt as b, L as x, Lt as S, M as C, Mt as w, N as T, Nt as E, O as D, P as O, Pt as k, R as A, Rt as j, S as M, T as N, Tt as P, U as F, Ut as I, V as L, Vt as R, W as z, Wt as B, X as V, Y as H, Z as U, _ as W, at as G, b as K, c as q, ct as J, d as Y, dt as X, f as Z, ft as Q, g as $, gt as ee, h as te, ht as ne, i as re, it as ie, j as ae, jt as oe, k as se, kt as ce, l as le, lt as ue, m as de, mt as fe, n as pe, nt as me, o as he, ot as ge, p as _e, pt as ve, q as ye, qt as be, r as xe, rt as Se, s as Ce, st as we, t as Te, tt as Ee, u as De, ut as Oe, v as ke, vt as Ae, w as je, x as Me, y as Ne, z as Pe, zt as Fe } from "./utils-CiJUMt2j.js";
2
+ export { S as ALERT_CLASS, j as ALERT_CONTENT_CLASS, Fe as ALERT_DESCRIPTION_CLASS, i as ALERT_ICON_BG_CLASS, R as ALERT_ICON_CLASS, h as ALERT_ICON_PATHS, I as ALERT_TITLE_CLASS, B as ALERT_TONES, oe as BUTTON_DEFAULT_CLASS, w as BUTTON_OUTLINE_CLASS, Ae as CARD_BLUR, P as CARD_SURFACE, l as CARD_SURFACE_BASE, s as CARD_SURFACE_OPAQUE, me as CAROUSEL_DOTS, Se as CAROUSEL_VIEWPORT, de as CHIP, ue as CONTROL_H, W as CONTROL_H_TOUCH, Oe as FIELD_CHROME, X as FIELD_CONTROL, o as FIELD_MOTION, Q as FIELD_TEXT, K as FLOATING_PANEL, ve as FOCUS_RING, E as ICON_BUTTON_CLASS, te as ICON_PILL, $ as ICON_PILL_TINT, fe as INPUT_CLASS, ne as INPUT_SURFACE, ee as INVALID_RING, r as LOGO_DEFAULT_SIZE, L as LOGO_DEFAULT_SRC, m as LOGO_DEFAULT_SUB, F as LOGO_MARK_CLASS, z as LOGO_MARK_PX, f as LOGO_NAME_CLASS, y as LOGO_ROOT_CLASS, ye as LOGO_SIZES, _ as LOGO_STACK_CLASS, H as LOGO_SUB_CLASS, u as MENU_ITEM, g as MENU_ITEM_BASE, x as MENU_ITEM_X, A as MENU_LABEL, Pe as MENU_SEPARATOR, pe as MOBILE_BREAKPOINT, D as MODAL_MOTION, se as MORPH_MOTION, k as OUTLINE_SURFACE, Me as OVERLAY_BLUR, t as OVERLAY_MOTION, M as OVERLAY_SURFACE, a as OVERLAY_SURFACE_BASE, je as OVERLAY_SURFACE_OPAQUE, ke as PICKER_LIST, Ne as PICKER_TRIGGER, we as POSITION_BAR, J as POSITION_BAR_LIT, ae as PRESS_DIP, N as SCRIM_CLASS, C as SCRIM_MOTION, De as SECTION_INNER_RADIUS, Y as SECTION_OUTER_RADIUS, Z as SECTION_PADDING, _e as SECTION_ROW_CLASS, ce as SECTION_ROW_SURFACE, le as SEGMENT_ITEM, T as SETTLE_MOTION, O as STAGGER, re as THUMB_CLASS, he as THUMB_RAIL_BLEED, Ce as THUMB_RAIL_PAD, q as THUMB_SIZE, n as TRACK_SURFACE, V as Z, U as Z_CLASS, p as alertBorder, b as alertFill, be as alertIconBgStyle, v as alertIconFill, c as anchorToTriggerTop, d as buttonVariants, ie as carouselDot, G as carouselItem, ge as carouselTrack, Te as cn, xe as createIsMobile, e as glassToneText, Ee as toneTextMix };
package/dist/lib/alert-tones.d.ts CHANGED
@@ -9,9 +9,10 @@ export declare const ALERT_ICON_PATHS: Record<AlertTone, string>;
9
9
  export declare const alertBorder: (c: string) => string;
10
10
  export declare const alertFill: (c: string) => string;
11
11
  export declare const alertIconFill: (c: string) => string;
12
- export declare const ALERT_CLASS = "relative overflow-hidden flex items-start gap-3 rounded-lg border p-3 backdrop-blur-sm";
12
+ export declare const ALERT_CLASS = "relative overflow-hidden flex items-start gap-3 rounded-lg p-3 backdrop-blur-sm";
13
13
  export declare const ALERT_ICON_CLASS = "gh-alert-icon flex size-8 shrink-0 items-center justify-center rounded-md";
14
14
  export declare const ALERT_ICON_BG_CLASS = "gh-alert-icon-bg pointer-events-none absolute -right-3 -bottom-4";
15
+ export declare function iconBgMaskStyle(color: string): Record<string, string>;
15
16
  export declare function alertIconBgStyle(color: string): Record<string, string>;
16
17
  export declare const ALERT_CONTENT_CLASS = "relative z-10 min-w-0 flex-1";
17
18
  export declare const ALERT_TITLE_CLASS = "font-semibold text-base leading-snug";
package/dist/lib/badge-tone.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  export declare const BADGE_DEFAULT_TONE = "var(--primary)";
2
- export declare const BADGE_TONE_CLASS = "inline-flex w-fit shrink-0 cursor-default select-none items-center gap-1.5 whitespace-nowrap rounded-full border px-2.5 py-0.5 font-medium text-xs";
2
+ /** @deprecated CHIP from lib/pill-classes.ts */
3
+ export declare const BADGE_TONE_CLASS = "glass glass-tint inline-flex w-fit shrink-0 select-none items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 py-0.5 font-medium text-xs";
4
+ export declare const BADGE_NEUTRAL_KNOBS = "[--glass-wash:12%] [--glass-light:0.08]";
package/dist/lib/button-variants.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export declare const OUTLINE_SURFACE = "glass [--glass-edge:var(--border)] hover:[--glass-base:var(--muted)] dark:[--glass-base:var(--input)] dark:hover:[--glass-base:var(--muted)]";
1
2
  export declare const buttonVariants: import("cva").CVAComponent<Omit<{
2
3
  base: string;
3
4
  variants: {
@@ -62,4 +63,4 @@ export declare const buttonVariants: import("cva").CVAComponent<Omit<{
62
63
  }>;
63
64
  export declare const BUTTON_DEFAULT_CLASS: string;
64
65
  export declare const BUTTON_OUTLINE_CLASS: string;
65
- export declare const ICON_BUTTON_CLASS = "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full transition-all duration-150 hover:bg-primary/10 active:scale-90";
66
+ export declare const ICON_BUTTON_CLASS = "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full transition-glass duration-150 hover:bg-primary/10 active:scale-[0.97]";
package/dist/lib/card-classes.d.ts CHANGED
@@ -2,18 +2,19 @@ export declare const CARD_SURFACE_BASE = "glass [--glass-wash:20%] [--glass-rim:
2
2
  export declare const CARD_BLUR = "backdrop-blur-[var(--glass-blur,24px)] backdrop-saturate-[1.8]";
3
3
  export declare const CARD_SURFACE = "glass [--glass-wash:20%] [--glass-rim:0.3] [--glass-lift:0.45] [--glass-shade:0.05] dark:[--glass-shade:0] [--glass-base:color-mix(in_srgb,var(--card)_60%,transparent)] backdrop-blur-[var(--glass-blur,24px)] backdrop-saturate-[1.8]";
4
4
  export declare const CARD_SURFACE_OPAQUE = "glass [--glass-wash:20%] [--glass-rim:0.3] [--glass-lift:0.45] [--glass-shade:0.05] dark:[--glass-shade:0]";
5
+ export declare const SECTION_ROW_SURFACE = "glass [--glass-rim:0.3] [--glass-base:color-mix(in_srgb,var(--card)_60%,transparent)]";
5
6
  export declare const TRACK_SURFACE = "border border-border/50 bg-card/40 backdrop-blur-sm";
6
7
  export declare const CARD_PADDING: {
7
- readonly slots: "flex flex-col gap-3 py-3 md:gap-4 md:py-4";
8
- readonly md: "p-4";
9
- readonly sm: "p-3";
8
+ readonly slots: "flex flex-col gap-3 p-3 md:gap-4 md:p-4";
9
+ readonly md: "flex flex-col gap-3 p-4";
10
+ readonly sm: "flex flex-col gap-2 p-3";
10
11
  readonly none: "";
11
12
  };
12
13
  export type CardPadding = keyof typeof CARD_PADDING;
13
- export declare const CARD_INTERACTIVE = "cursor-pointer transition-colors duration-200 hover:border-border hover:bg-foreground/[0.03] focus-within:border-border";
14
- export declare const CARD_HEADER_CLASS = "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] md:px-4";
14
+ export declare const CARD_INTERACTIVE = "cursor-pointer transition-glass hover:[--glass-light:0.09] focus-within:[--glass-edge:var(--border)]";
15
+ export declare const CARD_HEADER_CLASS = "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 has-data-[slot=card-action]:grid-cols-[1fr_auto]";
15
16
  export declare const CARD_TITLE_CLASS = "font-semibold leading-none";
16
17
  export declare const CARD_DESCRIPTION_CLASS = "text-muted-foreground text-sm";
17
18
  export declare const CARD_ACTION_CLASS = "col-start-2 row-span-2 row-start-1 self-start justify-self-end";
18
- export declare const CARD_CONTENT_CLASS = "px-3 md:px-4";
19
- export declare const CARD_FOOTER_CLASS = "flex items-center px-3 md:px-4 [.border-t]:pt-6";
19
+ export declare const CARD_CONTENT_CLASS = "min-w-0";
20
+ export declare const CARD_FOOTER_CLASS = "flex items-center";
package/dist/lib/glass-tone.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  export declare function toneTextMix(color: string): number;
2
2
  export declare function glassToneText(color: string): string;
3
+ export declare const NEUTRAL_KNOBS = "[--glass-wash:12%]";
4
+ export declare const isNeutralTone: (tone: string | undefined) => tone is "var(--muted-foreground)";
package/dist/lib/input-classes.d.ts CHANGED
@@ -1,3 +1,12 @@
1
1
  export declare const INPUT_SURFACE = "glass glass-sink [--glass-base:var(--field)] [--glass-edge:var(--field-edge)] [--glass-light:0.04]";
2
2
  export declare const FIELD_CHROME = "glass glass-sink [--glass-base:var(--input)] [--glass-light:0.04]";
3
- export declare const INPUT_CLASS = "flex h-9 w-full min-w-0 rounded-md glass glass-sink [--glass-base:var(--field)] [--glass-edge:var(--field-edge)] [--glass-light:0.04] px-3 py-1 text-base outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40";
3
+ export declare const FOCUS_RING = "outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:[--glass-edge:var(--ring)]";
4
+ export declare const INVALID_RING = "aria-invalid:[--glass-edge:var(--destructive)] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40";
5
+ export declare const CONTROL_H: {
6
+ readonly sm: "h-8";
7
+ readonly default: "h-9";
8
+ readonly lg: "h-10";
9
+ };
10
+ export declare const FIELD_TEXT = "text-base md:text-sm";
11
+ export declare const FIELD_CONTROL = "flex w-full min-w-0 rounded-md glass glass-sink [--glass-base:var(--field)] [--glass-edge:var(--field-edge)] [--glass-light:0.04] px-3 text-base md:text-sm transition-[color,box-shadow] placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:[--glass-edge:var(--ring)] aria-invalid:[--glass-edge:var(--destructive)] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40";
12
+ export declare const INPUT_CLASS: string;
package/dist/lib/layers.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ export declare const Z: {
2
+ readonly sheet: 40;
3
+ readonly overlay: 50;
4
+ };
5
+ export declare const Z_CLASS: {
6
+ readonly sheet: "z-40";
7
+ readonly overlay: "z-50";
8
+ };
package/dist/lib/menu-classes.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const MENU_ITEM_BASE = "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 text-sm outline-hidden transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&:not([data-tone])_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&>iconify-icon]:shrink-0 [&>iconify-icon]:text-[16px]";
2
+ export declare const MENU_ITEM_X = "px-2";
3
+ export declare const MENU_ITEM = "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 text-sm outline-hidden transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&:not([data-tone])_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&>iconify-icon]:shrink-0 [&>iconify-icon]:text-[16px] px-2";
4
+ export declare const MENU_LABEL = "px-2 py-1.5 font-medium text-muted-foreground text-xs";
5
+ export declare const MENU_SEPARATOR = "-mx-1 my-1 h-px bg-border";
package/dist/lib/motion-classes.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ export declare const OVERLAY_MOTION = "origin-(--kb-popper-content-transform-origin) data-[expanded]:animate-in data-[expanded]:duration-(--duration-expand) data-[expanded]:ease-(--ease-expand) data-[expanded]:fade-in-0 data-[expanded]:zoom-in-90 data-[closed]:animate-out data-[closed]:duration-(--duration-micro) data-[closed]:ease-(--ease-contract) data-[closed]:fade-out-0 data-[closed]:zoom-out-95";
2
+ export declare const FIELD_MOTION = "data-[closed]:animate-select-out data-[expanded]:animate-select-in";
3
+ export declare const MORPH_MOTION = "[--morph-w:var(--kb-popper-anchor-width)] min-w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-morph-in data-[closed]:animate-morph-out";
4
+ export declare const STAGGER = "gh-stagger";
5
+ export declare const MODAL_MOTION = "data-[expanded]:animate-in data-[expanded]:duration-(--duration-expand) data-[expanded]:ease-(--ease-expand) data-[expanded]:fade-in-0 data-[expanded]:zoom-in-[0.94] data-[expanded]:slide-in-from-bottom-2 data-[closed]:animate-out data-[closed]:duration-(--duration-micro) data-[closed]:ease-(--ease-contract) data-[closed]:fade-out-0 data-[closed]:zoom-out-[0.96]";
6
+ export declare const SCRIM_MOTION = "data-[expanded]:animate-in data-[expanded]:duration-(--duration-expand) data-[expanded]:ease-(--ease-expand) data-[expanded]:fade-in-0 data-[closed]:animate-out data-[closed]:duration-(--duration-micro) data-[closed]:ease-(--ease-contract) data-[closed]:fade-out-0";
7
+ export declare const SETTLE_MOTION = "animate-in fade-in-0 slide-in-from-bottom-1 duration-(--duration-state) ease-(--ease-expand)";
8
+ export declare const PRESS_DIP = "active:scale-[0.97]";
package/dist/lib/overlay-classes.d.ts CHANGED
@@ -1,5 +1,12 @@
1
- export declare const OVERLAY_BLUR = "backdrop-blur-[var(--glass-blur,20px)] backdrop-saturate-[1.6]";
2
- export declare const OVERLAY_SURFACE_BASE = "glass [--glass-rim:1] [--glass-lift:0.6] [--glass-light:0.05] [--glass-edge:color-mix(in_srgb,var(--border)_90%,transparent)] [--glass-base:color-mix(in_srgb,var(--popover)_75%,transparent)]";
3
- export declare const OVERLAY_SURFACE = "glass [--glass-rim:1] [--glass-lift:0.6] [--glass-light:0.05] [--glass-edge:color-mix(in_srgb,var(--border)_90%,transparent)] [--glass-base:color-mix(in_srgb,var(--popover)_75%,transparent)] backdrop-blur-[var(--glass-blur,20px)] backdrop-saturate-[1.6]";
4
- export declare const OVERLAY_SURFACE_OPAQUE = "glass [--glass-rim:1] [--glass-lift:0.6] [--glass-light:0.05] [--glass-edge:color-mix(in_srgb,var(--border)_90%,transparent)] [--glass-base:var(--popover)]";
1
+ export declare const OVERLAY_BLUR = "backdrop-blur-[var(--glass-blur,24px)] backdrop-saturate-[1.2]";
2
+ export declare const OVERLAY_SURFACE_BASE = "glass glass-frost [--glass-rim:0.5] [--glass-lift:0.6] [--glass-light:0] [--glass-edge:color-mix(in_srgb,var(--border)_90%,transparent)] [--glass-base:color-mix(in_srgb,var(--popover)_92%,transparent)]";
3
+ export declare const OVERLAY_SURFACE = "glass glass-frost [--glass-rim:0.5] [--glass-lift:0.6] [--glass-light:0] [--glass-edge:color-mix(in_srgb,var(--border)_90%,transparent)] [--glass-base:color-mix(in_srgb,var(--popover)_92%,transparent)] backdrop-blur-[var(--glass-blur,24px)] backdrop-saturate-[1.2]";
4
+ export declare const OVERLAY_SURFACE_OPAQUE = "glass glass-frost [--glass-rim:0.5] [--glass-lift:0.6] [--glass-light:0] [--glass-edge:color-mix(in_srgb,var(--border)_90%,transparent)] [--glass-base:var(--popover)]";
5
5
  export declare const SCRIM_CLASS = "bg-background/70 backdrop-blur-md";
6
+ export declare const FLOATING_PANEL: string;
7
+ export declare const anchorToTriggerTop: (anchor?: HTMLElement) => {
8
+ x: number;
9
+ y: number;
10
+ width: number;
11
+ height: number;
12
+ };
package/dist/lib/picker-classes.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export declare const PICKER_TRIGGER: string;
2
+ export declare const PICKER_LIST = "max-h-[min(70vh,400px)] overflow-y-auto gh-scroll";
3
+ export declare const CONTROL_H_TOUCH = "h-11";
package/dist/lib/pill-classes.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export declare const CHIP = "glass glass-tint inline-flex w-fit shrink-0 select-none items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 py-0.5 font-medium text-xs";
2
+ export declare const ICON_PILL = "glass flex shrink-0 items-center justify-center [--glass-rim:0.4] [--glass-light:0.08] [--glass-base:color-mix(in_srgb,var(--foreground)_10%,transparent)]";
3
+ export declare const ICON_PILL_TINT = "glass glass-tint flex shrink-0 items-center justify-center [--glass-rim:0.4] [--glass-wash:18%]";
package/dist/lib/position-bar-classes.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const POSITION_BAR = "glass glass-sink [--glass-base:var(--input)] [--glass-light:0.04] h-1.5 rounded-full transition-glass duration-(--duration-morph) ease-(--ease-morph)";
2
+ export declare const POSITION_BAR_LIT = "glass glass-tint [--glass-tone:var(--primary)] [--glass-wash:70%] [--glass-drop:0%]";
package/dist/lib/section-tokens.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export declare const SECTION_OUTER_RADIUS = "rounded-[var(--radius)]";
2
- export declare const SECTION_INNER_RADIUS = "rounded-[max(0px,calc(var(--radius)-0.75rem))]";
2
+ export declare const SECTION_INNER_RADIUS = "rounded-[max(0px,calc(var(--radius)-var(--spacing)*3))]";
3
3
  export declare const SECTION_PADDING = "p-3";
4
- export declare const SECTION_ROW_CLASS = "rounded-[max(0px,calc(var(--radius)-0.75rem))] border border-border/60 bg-card/60 p-3";
4
+ /** @deprecated Render `SectionRow`, or compose `SECTION_ROW_SURFACE` from card-classes. */
5
+ export declare const SECTION_ROW_CLASS = "rounded-[max(0px,calc(var(--radius)-var(--spacing)*3))] border border-border/60 bg-card/60 p-3";
package/dist/lib/segment-classes.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const SEGMENT_ITEM: string;
package/dist/lib/thumb-classes.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const THUMB_SIZE = 31;
2
+ export declare const THUMB_CLASS = "block size-7 shrink-0 rounded-xl shadow-[0_2px_5px_oklch(0_0_0/0.35),inset_0_1px_0_oklch(1_0_0/0.35),inset_0_-2px_3px_oklch(0_0_0/0.2)]";
3
+ export declare const THUMB_COLOR_RING = "border-2 border-white/90";
4
+ export declare const THUMB_RAIL_PAD = "px-3.5";
5
+ export declare const THUMB_RAIL_BLEED = "-mx-3.5";
package/dist/lib/use-is-mobile.d.ts CHANGED
@@ -1 +1,2 @@
1
- export declare function createIsMobile(): import("solid-js").Accessor<boolean | undefined>;
1
+ export declare const MOBILE_BREAKPOINT = 640;
2
+ export declare function createIsMobile(breakpoint?: number): import("solid-js").Accessor<boolean | undefined>;
package/dist/solid/alert-dialog.d.ts CHANGED
@@ -1,26 +1,25 @@
1
1
  import { AlertDialog as AlertDialogPrimitive } from "@kobalte/core/alert-dialog";
2
2
  import type { VariantProps } from "cva";
3
- import { type Component, type ComponentProps } from "solid-js";
4
- import { buttonVariants } from "./button.js";
5
- declare const AlertDialog: typeof import("@kobalte/core/alert-dialog").Root & {
6
- CloseButton: typeof import("@kobalte/core/alert-dialog").CloseButton;
7
- Content: typeof import("@kobalte/core/alert-dialog").Content;
8
- Description: typeof import("@kobalte/core/alert-dialog").Description;
9
- Overlay: typeof import("@kobalte/core/alert-dialog").Overlay;
10
- Portal: typeof import("@kobalte/core/alert-dialog").Portal;
11
- Title: typeof import("@kobalte/core/alert-dialog").Title;
12
- Trigger: typeof import("@kobalte/core/alert-dialog").Trigger;
13
- };
3
+ import { type Component, type ComponentProps, type ParentComponent } from "solid-js";
4
+ import { buttonVariants } from "../lib/button-variants.js";
5
+ import { type ModalDismissProps, type ModalSize } from "./dialog-parts.js";
6
+ declare const AlertDialog: ParentComponent<ComponentProps<typeof AlertDialogPrimitive>>;
14
7
  declare const AlertDialogTrigger: Component<ComponentProps<typeof AlertDialogPrimitive.Trigger>>;
15
- declare const AlertDialogContent: Component<ComponentProps<typeof AlertDialogPrimitive.Content>>;
16
- declare const AlertDialogHeader: Component<ComponentProps<"div">>;
17
- declare const AlertDialogFooter: Component<ComponentProps<"div">>;
8
+ type AlertDialogContentProps = ComponentProps<typeof AlertDialogPrimitive.Content> & {
9
+ size?: ModalSize;
10
+ /** Names a panel that has no `AlertDialogTitle`. A registered Title wins. */
11
+ ariaLabel?: string;
12
+ };
13
+ declare const AlertDialogContent: ParentComponent<AlertDialogContentProps>;
14
+ declare const AlertDialogHeader: Component<import("./dialog-parts.js").ModalHeaderProps>, AlertDialogBody: Component<import("./dialog-parts.js").ModalBodyProps>, AlertDialogFooter: Component<import("solid-js").JSX.HTMLAttributes<HTMLDivElement>>;
18
15
  declare const AlertDialogTitle: Component<ComponentProps<typeof AlertDialogPrimitive.Title>>;
19
16
  declare const AlertDialogDescription: Component<ComponentProps<typeof AlertDialogPrimitive.Description>>;
17
+ type AlertDialogButtonProps = ModalDismissProps & Partial<Pick<VariantProps<typeof buttonVariants>, "variant" | "size">>;
20
18
  /** Confirming action. Pass `variant` (e.g. "destructive"); layering a second
21
19
  * buttonVariants() call through `class` cannot work, because the variants
22
20
  * carry tone as arbitrary custom properties that tailwind-merge keeps side by
23
21
  * side, leaving the later stylesheet rule to win. */
24
- declare const AlertDialogAction: Component<ComponentProps<typeof AlertDialogPrimitive.CloseButton> & Partial<Pick<VariantProps<typeof buttonVariants>, "variant" | "size">>>;
25
- declare const AlertDialogCancel: Component<ComponentProps<typeof AlertDialogPrimitive.CloseButton>>;
26
- export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, };
22
+ declare const AlertDialogAction: ParentComponent<AlertDialogButtonProps>;
23
+ /** This family's Close: the outline button that dismisses without acting. */
24
+ declare const AlertDialogCancel: ParentComponent<AlertDialogButtonProps>;
25
+ export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, };
package/dist/solid/area-picker.d.ts CHANGED
@@ -1,8 +1,11 @@
1
1
  interface AreaPickerBaseProps {
2
2
  placeholder?: string;
3
3
  class?: string;
4
+ /** false: a re-tap on the picked area keeps it instead of clearing. */
4
5
  allowClear?: boolean;
5
6
  disabled?: boolean;
7
+ /** Id of the element naming the trigger, for forms that label it outside. */
8
+ "aria-labelledby"?: string;
6
9
  }
7
10
  interface AreaPickerSingleProps extends AreaPickerBaseProps {
8
11
  value: string;
package/dist/solid/bottom-sheet/bottom-sheet.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { type Component, type ComponentProps, type JSX, type ParentComponent } from "solid-js";
1
+ import { type Component, type ComponentProps, type JSX, type ParentComponent, type ValidComponent } from "solid-js";
2
2
  import { type InitialFocus } from "./focus-trap.js";
3
3
  interface BottomSheetRootProps {
4
4
  open?: boolean;
@@ -8,7 +8,10 @@ interface BottomSheetRootProps {
8
8
  children: JSX.Element;
9
9
  }
10
10
  declare const BottomSheet: ParentComponent<BottomSheetRootProps>;
11
- declare const BottomSheetTrigger: ParentComponent<ComponentProps<"button">>;
11
+ type SheetButtonProps = ComponentProps<"button"> & Partial<Pick<ComponentProps<"a">, "href" | "target" | "rel">> & {
12
+ as?: ValidComponent;
13
+ };
14
+ declare const BottomSheetTrigger: ParentComponent<SheetButtonProps>;
12
15
  interface BottomSheetPortalProps {
13
16
  children: JSX.Element;
14
17
  mount?: Node;
@@ -17,14 +20,13 @@ declare const BottomSheetPortal: Component<BottomSheetPortalProps>;
17
20
  declare const BottomSheetOverlay: Component<ComponentProps<"div">>;
18
21
  interface BottomSheetContentProps extends ComponentProps<"div"> {
19
22
  initialFocus?: InitialFocus;
23
+ /** Names a sheet that has no `BottomSheetTitle`. A registered Title wins. */
20
24
  ariaLabel?: string;
21
25
  }
22
26
  declare const BottomSheetContent: ParentComponent<BottomSheetContentProps>;
23
27
  declare const BottomSheetHandle: Component<ComponentProps<"div">>;
24
- declare const BottomSheetHeader: Component<ComponentProps<"div">>;
28
+ declare const BottomSheetBody: Component<import("../dialog-parts.js").ModalBodyProps>;
25
29
  declare const BottomSheetTitle: Component<ComponentProps<"h2">>;
26
30
  declare const BottomSheetDescription: Component<ComponentProps<"p">>;
27
- declare const BottomSheetBody: Component<ComponentProps<"div">>;
28
- declare const BottomSheetFooter: Component<ComponentProps<"div">>;
29
- declare const BottomSheetClose: ParentComponent<ComponentProps<"button">>;
30
- export { BottomSheet, BottomSheetBody, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetOverlay, BottomSheetPortal, BottomSheetTitle, BottomSheetTrigger, };
31
+ declare const BottomSheetClose: ParentComponent<SheetButtonProps>;
32
+ export { BottomSheet, BottomSheetBody, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetHandle, BottomSheetOverlay, BottomSheetPortal, BottomSheetTitle, BottomSheetTrigger, };
package/dist/solid/bottom-sheet/constants.d.ts CHANGED
@@ -5,4 +5,3 @@ export declare const CLOSE_DISTANCE_RATIO = 0.4;
5
5
  export declare const CLOSE_VELOCITY_PX_PER_MS = 0.5;
6
6
  export declare const VELOCITY_WINDOW_MS = 100;
7
7
  export declare const VELOCITY_PROJECTION_MS = 200;
8
- export declare const Z_BASE = 40;
package/dist/solid/bottom-sheet/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { BottomSheet, BottomSheetBody, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetOverlay, BottomSheetPortal, BottomSheetTitle, BottomSheetTrigger, } from "./bottom-sheet.js";
1
+ export { BottomSheet, BottomSheetBody, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetHandle, BottomSheetOverlay, BottomSheetPortal, BottomSheetTitle, BottomSheetTrigger, } from "./bottom-sheet.js";
package/dist/solid/charts.d.ts CHANGED
@@ -35,11 +35,16 @@ export declare function RangeToggle(props: {
35
35
  value: number;
36
36
  onChange: (days: number) => void;
37
37
  }): import("solid-js").JSX.Element;
38
+ type StackedBarSegment = {
39
+ label: string;
40
+ value: number;
41
+ /** CSS color driving the segment's own glass tint. */
42
+ tone?: string;
43
+ /** @deprecated pass `tone` instead */
44
+ class?: string;
45
+ };
38
46
  /** Segmented proportion bar (e.g. staleness fresh/aging/stale). */
39
47
  export declare function StackedBar(props: {
40
- segments: {
41
- label: string;
42
- value: number;
43
- class: string;
44
- }[];
48
+ segments: StackedBarSegment[];
45
49
  }): import("solid-js").JSX.Element;
50
+ export {};
package/dist/solid/checkbox.d.ts CHANGED
@@ -1,4 +1,19 @@
1
1
  import { Checkbox as CheckboxPrimitive } from "@kobalte/core/checkbox";
2
2
  import { type Component, type ComponentProps } from "solid-js";
3
- declare const Checkbox: Component<ComponentProps<typeof CheckboxPrimitive>>;
3
+ declare const CHECKBOX_SIZE: {
4
+ readonly sm: {
5
+ readonly box: "size-5";
6
+ readonly glyph: "size-3.5";
7
+ readonly px: 14;
8
+ };
9
+ readonly default: {
10
+ readonly box: "size-7";
11
+ readonly glyph: "size-5";
12
+ readonly px: 20;
13
+ };
14
+ };
15
+ type CheckboxSize = keyof typeof CHECKBOX_SIZE;
16
+ declare const Checkbox: Component<ComponentProps<typeof CheckboxPrimitive> & {
17
+ size?: CheckboxSize;
18
+ }>;
4
19
  export { Checkbox };
package/dist/solid/context-menu.d.ts CHANGED
@@ -20,10 +20,10 @@ declare const ContextMenu: typeof import("@kobalte/core/context-menu").Root & {
20
20
  SubTrigger: typeof import("@kobalte/core/context-menu").SubTrigger;
21
21
  Trigger: typeof import("@kobalte/core/context-menu").Trigger;
22
22
  };
23
- declare const ContextMenuTrigger: typeof import("@kobalte/core/context-menu").Trigger;
24
23
  declare const ContextMenuGroup: typeof import("@kobalte/core/context-menu").Group;
25
24
  declare const ContextMenuSub: typeof import("@kobalte/core/context-menu").Sub;
26
25
  declare const ContextMenuRadioGroup: typeof import("@kobalte/core/context-menu").RadioGroup;
26
+ declare const ContextMenuTrigger: Component<ComponentProps<typeof ContextMenuPrimitive.Trigger>>;
27
27
  declare const ContextMenuSubTrigger: ParentComponent<ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
28
28
  inset?: boolean;
29
29
  }>;
@@ -31,6 +31,8 @@ declare const ContextMenuSubContent: Component<ComponentProps<typeof ContextMenu
31
31
  declare const ContextMenuContent: Component<ComponentProps<typeof ContextMenuPrimitive.Content>>;
32
32
  declare const ContextMenuItem: Component<ComponentProps<typeof ContextMenuPrimitive.Item> & {
33
33
  inset?: boolean;
34
+ tone?: string;
35
+ /** @deprecated pass `tone="var(--destructive)"` instead */
34
36
  variant?: "default" | "destructive";
35
37
  }>;
36
38
  declare const ContextMenuCheckboxItem: ParentComponent<ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>>;
package/dist/solid/count-pill.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import type { JSX } from "solid-js";
2
2
  /**
3
- * Small neutral count chip (list size, item count) sitting next to a title.
4
- * The one source for `rounded-full bg-foreground/10 … tabular-nums`, previously
5
- * hand-inlined in SectionCard, PageHeader, and widget rows.
3
+ * Small neutral count chip (list size, item count) sitting next to a title:
4
+ * the Badge material with the muted tone, mono figures that do not jitter.
5
+ * Whole-pixel box, line-height equal to it and a 2px top pad: Geist Mono
6
+ * digits sit above the line centre, and fractional boxes drift a further
7
+ * pixel per DPR (measured 1/1.5/2/4).
6
8
  */
7
9
  export declare function CountPill(props: {
8
10
  children: JSX.Element;
package/dist/solid/data-table.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { type JSX } from "solid-js";
2
+ import { TABLE_HEAD_CELL_CLASS, TABLE_HEAD_LABEL_CLASS } from "./table.js";
2
3
  /**
3
4
  * Generic data-table vocabulary: sticky-less header, row height/padding, border
4
5
  * treatment, hover, numeric alignment, toolbar (search/filter/sort), bulk bar,
@@ -8,12 +9,12 @@ import { type JSX } from "solid-js";
8
9
  * Tables live inside a card; go edge-to-edge with `TABLE_BLEED` (cancels the
9
10
  * card's p-3) and re-add the inset via the cell padding tokens.
10
11
  */
11
- export declare const TABLE_BLEED = "-mx-3 border-border/50 border-t";
12
+ export { TABLE_HEAD_CELL_CLASS, TABLE_HEAD_LABEL_CLASS };
13
+ export declare const TABLE_BLEED: string;
12
14
  export declare const TABLE_CELL_X = "px-4";
13
15
  export declare const TABLE_ROW_CLASS = "flex items-center gap-4 border-border/50 border-b px-4 py-2.5 transition-colors last:border-b-0 hover:bg-foreground/[0.03]";
14
16
  export declare const TABLE_HEAD_CLASS = "flex items-center gap-4 border-border/50 border-b px-4 py-2";
15
- export declare const TABLE_HEAD_CELL_CLASS = "font-medium text-muted-foreground text-xs";
16
- export declare const TABLE_SCROLL_CLASS = "max-h-[600px] overflow-auto";
17
+ export declare const TABLE_SCROLL_CLASS = "max-h-[600px] overflow-auto gh-scroll";
17
18
  export declare const TABLE_NUM_CELL_CLASS = "text-right text-muted-foreground text-xs tabular-nums";
18
19
  export type SortDirection = "asc" | "desc";
19
20
  /** Toolbar filter dropdown, built on the Select. Leading filter icon, h-9. Pass
package/dist/solid/dialog-parts.d.ts ADDED
@@ -0,0 +1,55 @@
1
+ import { Button as KobalteButton } from "@kobalte/core/button";
2
+ import { type Accessor, type Component, type ComponentProps, type JSX, type ParentComponent, type ValidComponent } from "solid-js";
3
+ export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
4
+ export declare const MODAL_MAX_H = "[--modal-max-h:85dvh] max-h-[var(--modal-max-h)]";
5
+ export declare const MODAL_WIDTH: Record<ModalSize, string>;
6
+ export declare const MODAL_ANCHOR: Record<ModalSize, string>;
7
+ export declare const MODAL_PANEL: string;
8
+ export declare const MODAL_SCRIM: string;
9
+ export declare const MODAL_TITLE = "font-semibold text-foreground text-lg leading-none tracking-tight";
10
+ export declare const MODAL_DESCRIPTION = "text-muted-foreground text-sm";
11
+ export type ModalHeaderProps = ComponentProps<"div"> & {
12
+ /** Avatar or icon, rendered ahead of the title column. */
13
+ media?: JSX.Element;
14
+ action?: JSX.Element;
15
+ /** Lets a wide action (a tab row) drop below the title instead of squeezing
16
+ * it; a phone has no room for both on one line. */
17
+ wrap?: boolean;
18
+ };
19
+ /** `as="form"` makes the scroll container the form, so a footer submit button
20
+ * reaches it through `form="<id>"` with no wrapper in between. */
21
+ export type ModalBodyProps = ComponentProps<"div"> & {
22
+ as?: ValidComponent;
23
+ };
24
+ export interface ModalParts {
25
+ Header: Component<ModalHeaderProps>;
26
+ Body: Component<ModalBodyProps>;
27
+ Footer: Component<ComponentProps<"div">>;
28
+ }
29
+ export declare function createModalParts(slot: string): ModalParts;
30
+ /** Solid's handler prop is a union: a plain function, or the bound
31
+ * `[handler, data]` form that calls `handler(data, event)`. A wrapper that
32
+ * only checks for a function silently drops the bound one. */
33
+ export declare function callEventHandler<T, E extends Event>(event: E & {
34
+ currentTarget: T;
35
+ target: Element;
36
+ }, handler: JSX.EventHandlerUnion<T, E> | undefined): void;
37
+ export type ModalDismissProps = ComponentProps<typeof KobalteButton>;
38
+ export declare function createModalDismiss(slot: string): ParentComponent<ModalDismissProps>;
39
+ /** Renderless. Mounted inside a portal that exists only while the modal is
40
+ * open, so the refcounted page lock follows the modal's real lifetime. */
41
+ export declare const ModalScrollLock: Component;
42
+ export interface ModalLabels {
43
+ titleId: string;
44
+ descriptionId: string;
45
+ labelledBy: Accessor<string | undefined>;
46
+ describedBy: Accessor<string | undefined>;
47
+ registerTitle: (id: string | undefined) => void;
48
+ registerDescription: (id: string | undefined) => void;
49
+ }
50
+ /** Kobalte wires title/description ids for its own families; the hand-rolled
51
+ * surfaces (BottomSheet) wire them through this. The part registers the id it
52
+ * actually rendered, so a caller's own `id` still labels the panel. */
53
+ export declare function createModalLabels(): ModalLabels;
54
+ export declare const ModalLabelsProvider: import("solid-js").ContextProviderComponent<ModalLabels | undefined>;
55
+ export declare function useModalLabels(): ModalLabels | undefined;