@askrjs/themes 0.0.15 → 0.0.17

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 (177) hide show
  1. package/README.md +25 -0
  2. package/THEMING.md +6 -5
  3. package/dist/components/_internal/block-layout.d.ts +1 -0
  4. package/dist/components/_internal/block-layout.js +14 -11
  5. package/dist/components/_internal/block-layout.js.map +1 -1
  6. package/dist/components/_internal/classes.js +8 -1
  7. package/dist/components/_internal/classes.js.map +1 -1
  8. package/dist/components/_internal/jsx.js.map +1 -1
  9. package/dist/components/_internal/style.js +182 -32
  10. package/dist/components/_internal/style.js.map +1 -1
  11. package/dist/components/alert/alert.d.ts +1 -0
  12. package/dist/components/alert/alert.js.map +1 -1
  13. package/dist/components/alert/alert.types.d.ts +1 -0
  14. package/dist/components/aside/aside.d.ts +1 -0
  15. package/dist/components/aside/aside.js.map +1 -1
  16. package/dist/components/aspect-ratio/aspect-ratio.d.ts +1 -0
  17. package/dist/components/aspect-ratio/aspect-ratio.js.map +1 -1
  18. package/dist/components/aspect-ratio/aspect-ratio.types.d.ts +1 -0
  19. package/dist/components/badge/badge.d.ts +1 -0
  20. package/dist/components/badge/badge.js.map +1 -1
  21. package/dist/components/badge/badge.types.d.ts +1 -0
  22. package/dist/components/block/block.d.ts +1 -0
  23. package/dist/components/block/block.js +2 -2
  24. package/dist/components/block/block.js.map +1 -1
  25. package/dist/components/block/block.types.d.ts +1 -0
  26. package/dist/components/brand/brand.d.ts +1 -0
  27. package/dist/components/brand/brand.js +2 -2
  28. package/dist/components/brand/brand.js.map +1 -1
  29. package/dist/components/brand/brand.types.d.ts +1 -0
  30. package/dist/components/button-group/button-group.d.ts +1 -0
  31. package/dist/components/button-group/button-group.js.map +1 -1
  32. package/dist/components/button-group/button-group.types.d.ts +1 -0
  33. package/dist/components/card/card.d.ts +1 -0
  34. package/dist/components/card/card.js.map +1 -1
  35. package/dist/components/card/card.types.d.ts +1 -0
  36. package/dist/components/catalog.d.ts +1 -0
  37. package/dist/components/catalog.js +22 -13
  38. package/dist/components/catalog.js.map +1 -1
  39. package/dist/components/close/close.d.ts +1 -0
  40. package/dist/components/close/close.js.map +1 -1
  41. package/dist/components/container/container.d.ts +1 -0
  42. package/dist/components/container/container.js.map +1 -1
  43. package/dist/components/empty-state/empty-state.d.ts +1 -0
  44. package/dist/components/empty-state/empty-state.js.map +1 -1
  45. package/dist/components/field/field.d.ts +1 -0
  46. package/dist/components/field/field.js.map +1 -1
  47. package/dist/components/field/field.types.d.ts +1 -0
  48. package/dist/components/footer/footer.d.ts +1 -0
  49. package/dist/components/footer/footer.js.map +1 -1
  50. package/dist/components/footer/footer.types.d.ts +1 -0
  51. package/dist/components/grid/grid.d.ts +1 -0
  52. package/dist/components/grid/grid.js.map +1 -1
  53. package/dist/components/grid/grid.types.d.ts +1 -0
  54. package/dist/components/header/header.d.ts +1 -0
  55. package/dist/components/header/header.js.map +1 -1
  56. package/dist/components/input-group/input-group.d.ts +1 -0
  57. package/dist/components/input-group/input-group.js.map +1 -1
  58. package/dist/components/input-group/input-group.types.d.ts +1 -0
  59. package/dist/components/jsx-types.d.ts +12 -0
  60. package/dist/components/main/main.d.ts +1 -0
  61. package/dist/components/main/main.js.map +1 -1
  62. package/dist/components/nav/nav.d.ts +1 -0
  63. package/dist/components/nav/nav.js +6 -2
  64. package/dist/components/nav/nav.js.map +1 -1
  65. package/dist/components/nav/nav.types.d.ts +2 -0
  66. package/dist/components/navbar/navbar.d.ts +1 -0
  67. package/dist/components/navbar/navbar.js +15 -10
  68. package/dist/components/navbar/navbar.js.map +1 -1
  69. package/dist/components/overlays/dropdown-content.d.ts +1 -0
  70. package/dist/components/overlays/dropdown-content.js.map +1 -1
  71. package/dist/components/page/page.d.ts +1 -0
  72. package/dist/components/page/page.js.map +1 -1
  73. package/dist/components/page-header/page-header.d.ts +1 -0
  74. package/dist/components/page-header/page-header.js.map +1 -1
  75. package/dist/components/section/section.d.ts +1 -0
  76. package/dist/components/section/section.js.map +1 -1
  77. package/dist/components/separator/separator.d.ts +1 -0
  78. package/dist/components/separator/separator.js.map +1 -1
  79. package/dist/components/separator/separator.types.d.ts +1 -0
  80. package/dist/components/sidebar/index.d.ts +2 -2
  81. package/dist/components/sidebar/sidebar.d.ts +2 -1
  82. package/dist/components/sidebar/sidebar.js +39 -13
  83. package/dist/components/sidebar/sidebar.js.map +1 -1
  84. package/dist/components/sidebar/sidebar.types.d.ts +3 -1
  85. package/dist/components/skeleton/skeleton.d.ts +1 -0
  86. package/dist/components/skeleton/skeleton.js.map +1 -1
  87. package/dist/components/skeleton/skeleton.types.d.ts +1 -0
  88. package/dist/components/spinner/spinner.d.ts +1 -0
  89. package/dist/components/spinner/spinner.js.map +1 -1
  90. package/dist/components/stat/stat.d.ts +1 -0
  91. package/dist/components/stat/stat.js.map +1 -1
  92. package/dist/components/stat/stat.types.d.ts +1 -0
  93. package/dist/components/text/text.d.ts +1 -0
  94. package/dist/components/text/text.js.map +1 -1
  95. package/dist/components/text/text.types.d.ts +1 -0
  96. package/dist/components/theme/theme.d.ts +2 -0
  97. package/dist/components/theme/theme.js +32 -16
  98. package/dist/components/theme/theme.js.map +1 -1
  99. package/dist/components/toolbar/toolbar.d.ts +1 -0
  100. package/dist/components/toolbar/toolbar.js.map +1 -1
  101. package/dist/components.d.ts +6 -3
  102. package/dist/core.d.ts +2 -2
  103. package/dist/ssr.d.ts +18 -0
  104. package/dist/ssr.js +63 -0
  105. package/dist/ssr.js.map +1 -0
  106. package/dist/themes/default/index.css +36 -6
  107. package/package.json +7 -3
  108. package/src/components/_internal/block-layout.ts +27 -16
  109. package/src/components/_internal/classes.ts +15 -2
  110. package/src/components/_internal/jsx.ts +1 -1
  111. package/src/components/_internal/style.ts +241 -33
  112. package/src/components/alert/alert.tsx +1 -0
  113. package/src/components/alert/alert.types.ts +1 -0
  114. package/src/components/aside/aside.tsx +1 -0
  115. package/src/components/aspect-ratio/aspect-ratio.tsx +1 -0
  116. package/src/components/aspect-ratio/aspect-ratio.types.ts +1 -0
  117. package/src/components/badge/badge.tsx +1 -0
  118. package/src/components/badge/badge.types.ts +1 -0
  119. package/src/components/block/block.tsx +4 -1
  120. package/src/components/block/block.types.ts +1 -0
  121. package/src/components/brand/brand.tsx +6 -2
  122. package/src/components/brand/brand.types.ts +1 -0
  123. package/src/components/button-group/button-group.tsx +1 -0
  124. package/src/components/button-group/button-group.types.ts +1 -0
  125. package/src/components/card/card.tsx +1 -0
  126. package/src/components/card/card.types.ts +1 -0
  127. package/src/components/catalog.tsx +15 -4
  128. package/src/components/close/close.tsx +1 -0
  129. package/src/components/container/container.tsx +1 -0
  130. package/src/components/empty-state/empty-state.tsx +1 -0
  131. package/src/components/field/field.tsx +1 -0
  132. package/src/components/field/field.types.ts +1 -0
  133. package/src/components/footer/footer.tsx +1 -0
  134. package/src/components/footer/footer.types.ts +1 -0
  135. package/src/components/grid/grid.tsx +1 -0
  136. package/src/components/grid/grid.types.ts +1 -0
  137. package/src/components/header/header.tsx +1 -0
  138. package/src/components/input-group/input-group.tsx +1 -0
  139. package/src/components/input-group/input-group.types.ts +1 -0
  140. package/src/components/jsx-types.ts +16 -0
  141. package/src/components/main/main.tsx +1 -0
  142. package/src/components/nav/nav.tsx +16 -2
  143. package/src/components/nav/nav.types.ts +2 -0
  144. package/src/components/navbar/navbar.tsx +19 -8
  145. package/src/components/overlays/dropdown-content.tsx +1 -0
  146. package/src/components/page/page.tsx +1 -0
  147. package/src/components/page-header/page-header.tsx +1 -0
  148. package/src/components/section/section.tsx +1 -0
  149. package/src/components/separator/separator.tsx +1 -0
  150. package/src/components/separator/separator.types.ts +1 -0
  151. package/src/components/sidebar/index.ts +1 -0
  152. package/src/components/sidebar/sidebar.tsx +45 -20
  153. package/src/components/sidebar/sidebar.types.ts +3 -0
  154. package/src/components/skeleton/skeleton.tsx +1 -0
  155. package/src/components/skeleton/skeleton.types.ts +1 -0
  156. package/src/components/spinner/spinner.tsx +1 -0
  157. package/src/components/stat/stat.tsx +1 -0
  158. package/src/components/stat/stat.types.ts +1 -0
  159. package/src/components/text/text.tsx +1 -0
  160. package/src/components/text/text.types.ts +1 -0
  161. package/src/components/theme/theme.tsx +43 -12
  162. package/src/components/toolbar/toolbar.tsx +1 -0
  163. package/src/components.ts +9 -0
  164. package/src/ssr.ts +102 -0
  165. package/src/themes/default/styles/base/text.css +4 -4
  166. package/src/themes/default/styles/layout/layout.css +108 -0
  167. package/src/themes/default/styles/shell/navbar.css +4 -1
  168. package/src/themes/default/tokens.css +1 -1
  169. package/src/themes/presets/ginger.css +3 -3
  170. package/templates/theme/styles/base/text.css +4 -4
  171. package/templates/theme/styles/display/progress-circle.css +2 -0
  172. package/templates/theme/styles/forms/input-group.css +2 -1
  173. package/templates/theme/styles/layout/layout.css +108 -0
  174. package/templates/theme/styles/overlays/toast.css +11 -0
  175. package/templates/theme/styles/shell/navbar.css +4 -1
  176. package/templates/theme/styles/shell/sidebar.css +18 -1
  177. package/templates/theme/tokens.css +1 -1
package/README.md CHANGED
@@ -60,6 +60,30 @@ export function AppShell() {
60
60
  }
61
61
  ```
62
62
 
63
+ ### SSR and SSG
64
+
65
+ Layout props on `Block`, `Container`, `Grid`, `AspectRatio`, and `Skeleton`
66
+ produce CSP-compatible generated rules. Wrap the Askr document renderer so
67
+ those rules are serialized into the initial document and adopted during
68
+ hydration:
69
+
70
+ ```ts
71
+ import type { DocumentRenderArgs } from "@askrjs/askr/ssg";
72
+ import { withThemeStyles } from "@askrjs/themes/ssr";
73
+
74
+ function renderDocument({ appHtml }: DocumentRenderArgs) {
75
+ return `<!doctype html><html><head></head><body><div id="app">${appHtml}</div></body></html>`;
76
+ }
77
+
78
+ export const staticConfig = {
79
+ // ...
80
+ document: withThemeStyles(renderDocument),
81
+ };
82
+ ```
83
+
84
+ The wrapper also applies `context.cspNonce` to the emitted style registry.
85
+ Use the same wrapper for an SSR `document` callback.
86
+
63
87
  ## What To Import
64
88
 
65
89
  - `@askrjs/themes/components` for the styled component catalog.
@@ -68,6 +92,7 @@ export function AppShell() {
68
92
  `@askrjs/themes/dialog`.
69
93
  - `@askrjs/themes/theme` for `ThemeScope`, `ThemePicker`, `ThemeToggle`,
70
94
  and `theme`.
95
+ - `@askrjs/themes/ssr` for the SSR/SSG generated-style document wrapper.
71
96
  - `@askrjs/charts` for charts; chart components are intentionally not exported
72
97
  from `@askrjs/themes`.
73
98
 
package/THEMING.md CHANGED
@@ -118,11 +118,12 @@ Package boundaries:
118
118
  - `@askrjs/themes` owns visual-only components, Block-first structural
119
119
  presets, and default styling.
120
120
 
121
- Use the curated theme entrypoints such as `@askrjs/themes/controls`,
122
- `@askrjs/themes/core`, `@askrjs/themes/surfaces`, and `@askrjs/themes/navs`
123
- for styled components such as Button, ButtonGroup, Close, InputGroup, Block,
124
- Container, Header, Main, Sidebar, Navbar, NavBrand, NavDropdown, Alert, Badge,
125
- Tabs, Tab, Pills, Pill, Skeleton, Separator, and EmptyState.
121
+ Use `@askrjs/themes/components` for the aggregate styled catalog, or the
122
+ component subpaths such as `@askrjs/themes/button`,
123
+ `@askrjs/themes/card`, and `@askrjs/themes/dialog`. The aggregate catalog
124
+ contains styled components such as Button, ButtonGroup, Close, InputGroup,
125
+ Block, Container, Header, Main, Sidebar, Navbar, NavBrand, NavDropdown, Alert,
126
+ Badge, Tabs, Tab, Pills, Pill, Skeleton, Separator, and EmptyState.
126
127
 
127
128
  Theme state helpers also live there: `ThemeScope`, `ThemePicker`,
128
129
  `ThemeToggle`, and `theme`. `ThemeToggle` intentionally has no built-in
package/dist/components/_internal/block-layout.d.ts CHANGED
@@ -38,6 +38,7 @@ type BlockLayoutProps = {
38
38
  zIndex?: ResponsiveValue<BlockZIndex>;
39
39
  background?: ResponsiveValue<BlockBackground>;
40
40
  border?: ResponsiveValue<boolean>;
41
+ borderTop?: ResponsiveValue<boolean>;
41
42
  borderBottom?: ResponsiveValue<boolean>;
42
43
  borderRight?: ResponsiveValue<boolean>;
43
44
  radius?: ResponsiveValue<BlockRadius>;
package/dist/components/_internal/block-layout.js CHANGED
@@ -88,6 +88,7 @@ const BLOCK_LAYOUT_KEYS = /* @__PURE__ */ new Set([
88
88
  "zIndex",
89
89
  "background",
90
90
  "border",
91
+ "borderTop",
91
92
  "borderBottom",
92
93
  "borderRight",
93
94
  "radius",
@@ -110,7 +111,8 @@ function resolveTokenValue(value, tokens) {
110
111
  function resolveSpaceValue(value) {
111
112
  return resolveTokenValue(value, SPACE_TOKEN_MAP);
112
113
  }
113
- function resolveSizeValue(value) {
114
+ function resolveSizeValue(value, axis) {
115
+ if (value === "screen") return axis === "inline" ? "100dvw" : "100dvh";
114
116
  return String(resolveTokenValue(value, SIZE_TOKEN_MAP));
115
117
  }
116
118
  function resolveAlignValue(value) {
@@ -169,28 +171,29 @@ function applyBlockLayoutStyles(styles, props) {
169
171
  setResponsiveVar(styles, "m", props.margin, resolveSpaceValue);
170
172
  setResponsiveVar(styles, "mx", props.marginX, resolveSpaceValue);
171
173
  setResponsiveVar(styles, "my", props.marginY, resolveSpaceValue);
172
- setResponsiveVar(styles, "width", props.width, resolveSizeValue);
173
- setResponsiveVar(styles, "min-width", props.minWidth, resolveSizeValue);
174
- setResponsiveVar(styles, "max-width", props.maxWidth, resolveSizeValue);
175
- setResponsiveVar(styles, "height", props.height, resolveSizeValue);
176
- setResponsiveVar(styles, "min-height", props.minHeight, resolveSizeValue);
177
- setResponsiveVar(styles, "max-height", props.maxHeight, resolveSizeValue);
174
+ setResponsiveVar(styles, "width", props.width, (value) => resolveSizeValue(value, "inline"));
175
+ setResponsiveVar(styles, "min-width", props.minWidth, (value) => resolveSizeValue(value, "inline"));
176
+ setResponsiveVar(styles, "max-width", props.maxWidth, (value) => resolveSizeValue(value, "inline"));
177
+ setResponsiveVar(styles, "height", props.height, (value) => resolveSizeValue(value, "block"));
178
+ setResponsiveVar(styles, "min-height", props.minHeight, (value) => resolveSizeValue(value, "block"));
179
+ setResponsiveVar(styles, "max-height", props.maxHeight, (value) => resolveSizeValue(value, "block"));
178
180
  if (props.rowFrom !== void 0) styles[`--ak-flex-direction-${props.rowFrom}`] = "row";
181
+ if (props.center !== void 0) {
182
+ setResponsiveVar(styles, "align-items", props.center, (value) => value ? "center" : "stretch");
183
+ setResponsiveVar(styles, "justify-content", props.center, (value) => value ? "center" : "flex-start");
184
+ }
179
185
  setResponsiveVar(styles, "flex-direction", props.direction, (value) => value);
180
186
  setResponsiveVar(styles, "align-items", props.align, resolveAlignValue);
181
187
  setResponsiveVar(styles, "justify-content", props.justify, resolveJustifyValue);
182
188
  setResponsiveVar(styles, "gap", props.gap, resolveSpaceValue);
183
189
  setResponsiveVar(styles, "flex-grow", props.grow, resolveFlexFlag);
184
190
  setResponsiveVar(styles, "flex-shrink", props.shrink, resolveFlexFlag);
185
- if (props.center !== void 0) {
186
- setResponsiveVar(styles, "align-items", props.center, (value) => value ? "center" : void 0);
187
- setResponsiveVar(styles, "justify-content", props.center, (value) => value ? "center" : void 0);
188
- }
189
191
  if (props.sticky) styles["--ak-position-base"] = "sticky";
190
192
  setResponsiveVar(styles, "top", props.top, resolveSpaceValue);
191
193
  setResponsiveVar(styles, "z-index", props.zIndex, (value) => String(resolveTokenValue(value, Z_INDEX_TOKEN_MAP)));
192
194
  setResponsiveVar(styles, "background", props.background, (value) => String(resolveTokenValue(value, BACKGROUND_TOKEN_MAP)));
193
195
  setResponsiveVar(styles, "border", props.border, resolveBorderValue);
196
+ setResponsiveVar(styles, "border-top", props.borderTop, resolveBorderValue);
194
197
  setResponsiveVar(styles, "border-bottom", props.borderBottom, resolveBorderValue);
195
198
  setResponsiveVar(styles, "border-right", props.borderRight, resolveBorderValue);
196
199
  setResponsiveVar(styles, "border-radius", props.radius, resolveRadiusValue);
package/dist/components/_internal/block-layout.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"block-layout.js","names":[],"sources":["../../../src/components/_internal/block-layout.ts"],"sourcesContent":["import { serializeCssDeclarations } from \"./style\";\n\nexport type LayoutBreakpoint = \"base\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type ResponsiveValue<T> = T | Partial<Record<LayoutBreakpoint, T>>;\n\nexport type BlockSpace = \"0\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"page\";\nexport type BlockMargin = BlockSpace | \"auto\";\nexport type BlockSize =\n | \"auto\"\n | \"full\"\n | \"screen\"\n | \"content\"\n | \"sidebar\"\n | \"page\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"xl\";\nexport type BlockDirection = \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\";\nexport type BlockRowFrom = Exclude<LayoutBreakpoint, \"base\">;\nexport type BlockAlign = \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\nexport type BlockJustify = \"start\" | \"end\" | \"center\" | \"between\";\nexport type BlockBackground =\n | \"surface\"\n | \"muted\"\n | \"selected\"\n | \"canvas\"\n | \"raised\"\n | \"overlay\"\n | \"transparent\";\nexport type BlockRadius = true | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"round\";\nexport type BlockShadow = true | \"sm\" | \"md\" | \"lg\";\nexport type BlockZIndex =\n | \"header\"\n | \"sticky\"\n | \"fixed\"\n | \"dropdown\"\n | \"modal\"\n | \"popover\"\n | \"toast\"\n | \"tooltip\";\n\nexport type BlockLayoutProps = {\n padding?: ResponsiveValue<BlockSpace>;\n paddingX?: ResponsiveValue<BlockSpace>;\n paddingY?: ResponsiveValue<BlockSpace>;\n margin?: ResponsiveValue<BlockMargin>;\n marginX?: ResponsiveValue<BlockMargin>;\n marginY?: ResponsiveValue<BlockMargin>;\n width?: ResponsiveValue<BlockSize>;\n minWidth?: ResponsiveValue<BlockSize>;\n maxWidth?: ResponsiveValue<BlockSize>;\n height?: ResponsiveValue<BlockSize>;\n minHeight?: ResponsiveValue<BlockSize>;\n maxHeight?: ResponsiveValue<BlockSize>;\n rowFrom?: BlockRowFrom;\n direction?: ResponsiveValue<BlockDirection>;\n align?: ResponsiveValue<BlockAlign>;\n justify?: ResponsiveValue<BlockJustify>;\n gap?: ResponsiveValue<BlockSpace>;\n grow?: ResponsiveValue<boolean | number>;\n shrink?: ResponsiveValue<boolean | number>;\n center?: ResponsiveValue<boolean>;\n sticky?: boolean;\n top?: ResponsiveValue<BlockSpace>;\n zIndex?: ResponsiveValue<BlockZIndex>;\n background?: ResponsiveValue<BlockBackground>;\n border?: ResponsiveValue<boolean>;\n borderBottom?: ResponsiveValue<boolean>;\n borderRight?: ResponsiveValue<boolean>;\n radius?: ResponsiveValue<BlockRadius>;\n shadow?: ResponsiveValue<BlockShadow>;\n hide?: ResponsiveValue<boolean>;\n};\n\nconst BREAKPOINTS: readonly LayoutBreakpoint[] = [\"base\", \"sm\", \"md\", \"lg\", \"xl\"];\n\nconst SPACE_TOKEN_MAP: Record<string, string> = {\n \"0\": \"0\",\n xs: \"var(--ak-space-xs)\",\n sm: \"var(--ak-space-sm)\",\n md: \"var(--ak-space-md)\",\n lg: \"var(--ak-space-lg)\",\n xl: \"var(--ak-space-xl)\",\n \"2xl\": \"var(--ak-space-2xl)\",\n \"3xl\": \"var(--ak-space-3xl)\",\n page: \"var(--ak-layout-page-gutter)\",\n};\n\nconst SIZE_TOKEN_MAP: Record<string, string> = {\n auto: \"auto\",\n full: \"100%\",\n screen: \"100dvh\",\n content: \"min(60vh, 36rem)\",\n sidebar: \"var(--ak-layout-sidebar-width)\",\n page: \"var(--ak-layout-content-max-width)\",\n sm: \"var(--ak-container-1)\",\n md: \"var(--ak-container-2)\",\n lg: \"var(--ak-container-3)\",\n xl: \"var(--ak-container-4)\",\n};\n\nconst BACKGROUND_TOKEN_MAP: Record<string, string> = {\n canvas: \"var(--ak-color-bg)\",\n surface: \"var(--ak-color-surface)\",\n muted: \"var(--ak-color-surface-muted)\",\n raised: \"var(--ak-color-surface-raised)\",\n overlay: \"var(--ak-color-surface-overlay)\",\n selected: \"var(--ak-color-selected)\",\n transparent: \"transparent\",\n};\n\nconst RADIUS_TOKEN_MAP: Record<string, string> = {\n sm: \"var(--ak-radius-sm)\",\n md: \"var(--ak-radius-md)\",\n lg: \"var(--ak-radius-lg)\",\n xl: \"var(--ak-radius-xl)\",\n round: \"var(--ak-radius-round)\",\n};\n\nconst SHADOW_TOKEN_MAP: Record<string, string> = {\n sm: \"var(--ak-shadow-sm)\",\n md: \"var(--ak-shadow-md)\",\n lg: \"var(--ak-shadow-lg)\",\n};\n\nconst Z_INDEX_TOKEN_MAP: Record<string, string> = {\n header: \"var(--ak-z-sticky)\",\n sticky: \"var(--ak-z-sticky)\",\n fixed: \"var(--ak-z-fixed)\",\n dropdown: \"var(--ak-z-dropdown)\",\n modal: \"var(--ak-z-modal)\",\n popover: \"var(--ak-z-popover)\",\n toast: \"var(--ak-z-toast)\",\n tooltip: \"var(--ak-z-tooltip)\",\n};\n\nconst BORDER_VALUE = \"1px solid var(--ak-color-border-subtle)\";\n\nconst BLOCK_LAYOUT_KEYS = new Set<keyof BlockLayoutProps>([\n \"padding\",\n \"paddingX\",\n \"paddingY\",\n \"margin\",\n \"marginX\",\n \"marginY\",\n \"width\",\n \"minWidth\",\n \"maxWidth\",\n \"height\",\n \"minHeight\",\n \"maxHeight\",\n \"rowFrom\",\n \"direction\",\n \"align\",\n \"justify\",\n \"gap\",\n \"grow\",\n \"shrink\",\n \"center\",\n \"sticky\",\n \"top\",\n \"zIndex\",\n \"background\",\n \"border\",\n \"borderBottom\",\n \"borderRight\",\n \"radius\",\n \"shadow\",\n \"hide\",\n]);\n\nfunction isResponsiveValue<T>(\n value: ResponsiveValue<T> | undefined,\n): value is Partial<Record<LayoutBreakpoint, T>> {\n return Boolean(\n value &&\n typeof value === \"object\" &&\n !Array.isArray(value) &&\n BREAKPOINTS.some((breakpoint) => breakpoint in value),\n );\n}\n\nfunction normalizeResponsiveValue<T>(\n value: ResponsiveValue<T> | undefined,\n): Partial<Record<LayoutBreakpoint, T>> | undefined {\n if (value === undefined) return undefined;\n if (isResponsiveValue(value)) return value;\n return { base: value };\n}\n\nfunction resolveTokenValue(\n value: string | number,\n tokens: Record<string, string>,\n): string | number {\n if (typeof value === \"number\") return value;\n const trimmed = value.trim();\n return tokens[trimmed] ?? trimmed;\n}\n\nfunction resolveSpaceValue(value: string | number): string | number {\n return resolveTokenValue(value, SPACE_TOKEN_MAP);\n}\n\nfunction resolveSizeValue(value: string): string {\n return String(resolveTokenValue(value, SIZE_TOKEN_MAP));\n}\n\nfunction resolveAlignValue(value: BlockAlign): string {\n if (value === \"start\") return \"flex-start\";\n if (value === \"end\") return \"flex-end\";\n return value;\n}\n\nfunction resolveJustifyValue(value: BlockJustify): string {\n if (value === \"start\") return \"flex-start\";\n if (value === \"end\") return \"flex-end\";\n if (value === \"between\") return \"space-between\";\n return value;\n}\n\nfunction resolveFlexFlag(value: boolean | number): string | number {\n if (value === true) return 1;\n if (value === false) return 0;\n return value;\n}\n\nfunction resolveBorderValue(value: boolean): string | undefined {\n if (value === false) return \"0\";\n return BORDER_VALUE;\n}\n\nfunction resolveRadiusValue(value: BlockRadius): string | undefined {\n if (value === true) return RADIUS_TOKEN_MAP.md;\n return String(resolveTokenValue(value, RADIUS_TOKEN_MAP));\n}\n\nfunction resolveShadowValue(value: BlockShadow): string | undefined {\n if (value === true) return SHADOW_TOKEN_MAP.sm;\n return String(resolveTokenValue(value, SHADOW_TOKEN_MAP));\n}\n\nfunction setResponsiveVar<T>(\n styles: Record<string, string | number>,\n property: string,\n value: ResponsiveValue<T> | undefined,\n resolve: (value: T) => string | number | undefined,\n) {\n const normalized = normalizeResponsiveValue(value);\n if (!normalized) return;\n\n for (const breakpoint of BREAKPOINTS) {\n const breakpointValue = normalized[breakpoint];\n if (breakpointValue === undefined) continue;\n const resolved = resolve(breakpointValue);\n if (resolved === undefined || resolved === \"\") continue;\n styles[`--ak-${property}-${breakpoint}`] = resolved;\n }\n}\n\nexport function splitBlockLayoutProps<T extends Record<string, unknown>>(\n props: T,\n): {\n blockProps: Partial<BlockLayoutProps>;\n rest: Omit<T, keyof BlockLayoutProps>;\n} {\n const blockProps: Partial<BlockLayoutProps> = {};\n const rest: Record<string, unknown> = {};\n\n for (const [key, value] of Object.entries(props)) {\n if (BLOCK_LAYOUT_KEYS.has(key as keyof BlockLayoutProps)) {\n (blockProps as Record<string, unknown>)[key] = value;\n } else {\n rest[key] = value;\n }\n }\n\n return { blockProps, rest: rest as Omit<T, keyof BlockLayoutProps> };\n}\n\nexport function applyBlockLayoutStyles(\n styles: Record<string, string | number>,\n props: Partial<BlockLayoutProps>,\n) {\n setResponsiveVar(styles, \"p\", props.padding, resolveSpaceValue);\n setResponsiveVar(styles, \"px\", props.paddingX, resolveSpaceValue);\n setResponsiveVar(styles, \"py\", props.paddingY, resolveSpaceValue);\n setResponsiveVar(styles, \"m\", props.margin, resolveSpaceValue);\n setResponsiveVar(styles, \"mx\", props.marginX, resolveSpaceValue);\n setResponsiveVar(styles, \"my\", props.marginY, resolveSpaceValue);\n\n setResponsiveVar(styles, \"width\", props.width, resolveSizeValue);\n setResponsiveVar(styles, \"min-width\", props.minWidth, resolveSizeValue);\n setResponsiveVar(styles, \"max-width\", props.maxWidth, resolveSizeValue);\n setResponsiveVar(styles, \"height\", props.height, resolveSizeValue);\n setResponsiveVar(styles, \"min-height\", props.minHeight, resolveSizeValue);\n setResponsiveVar(styles, \"max-height\", props.maxHeight, resolveSizeValue);\n\n if (props.rowFrom !== undefined) {\n styles[`--ak-flex-direction-${props.rowFrom}`] = \"row\";\n }\n setResponsiveVar(styles, \"flex-direction\", props.direction, (value) => value);\n setResponsiveVar(styles, \"align-items\", props.align, resolveAlignValue);\n setResponsiveVar(styles, \"justify-content\", props.justify, resolveJustifyValue);\n setResponsiveVar(styles, \"gap\", props.gap, resolveSpaceValue);\n setResponsiveVar(styles, \"flex-grow\", props.grow, resolveFlexFlag);\n setResponsiveVar(styles, \"flex-shrink\", props.shrink, resolveFlexFlag);\n\n if (props.center !== undefined) {\n setResponsiveVar(styles, \"align-items\", props.center, (value) =>\n value ? \"center\" : undefined,\n );\n setResponsiveVar(styles, \"justify-content\", props.center, (value) =>\n value ? \"center\" : undefined,\n );\n }\n\n if (props.sticky) {\n styles[\"--ak-position-base\"] = \"sticky\";\n }\n setResponsiveVar(styles, \"top\", props.top, resolveSpaceValue);\n setResponsiveVar(styles, \"z-index\", props.zIndex, (value) =>\n String(resolveTokenValue(value, Z_INDEX_TOKEN_MAP)),\n );\n\n setResponsiveVar(styles, \"background\", props.background, (value) =>\n String(resolveTokenValue(value, BACKGROUND_TOKEN_MAP)),\n );\n setResponsiveVar(styles, \"border\", props.border, resolveBorderValue);\n setResponsiveVar(styles, \"border-bottom\", props.borderBottom, resolveBorderValue);\n setResponsiveVar(styles, \"border-right\", props.borderRight, resolveBorderValue);\n setResponsiveVar(styles, \"border-radius\", props.radius, resolveRadiusValue);\n setResponsiveVar(styles, \"box-shadow\", props.shadow, resolveShadowValue);\n setResponsiveVar(styles, \"display\", props.hide, (value) => (value ? \"none\" : \"flex\"));\n}\n\nexport function mergeLayoutStyles(\n layout: Record<string, string | number>,\n user: unknown,\n): string | undefined {\n const merged: Record<string, unknown> = { ...layout };\n\n if (user !== null && user !== undefined && typeof user === \"object\") {\n Object.assign(merged, user as Record<string, unknown>);\n }\n\n const mergedString = serializeCssDeclarations(merged);\n\n if (typeof user === \"string\" && user.trim()) {\n return mergedString ? `${mergedString};${user.trim()}` : user.trim();\n }\n\n return mergedString || undefined;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"block-layout.js","names":[],"sources":["../../../src/components/_internal/block-layout.ts"],"sourcesContent":["import { serializeCssDeclarations } from \"./style\";\n\nexport type LayoutBreakpoint = \"base\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type ResponsiveValue<T> = T | Partial<Record<LayoutBreakpoint, T>>;\n\nexport type BlockSpace = \"0\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"page\";\nexport type BlockMargin = BlockSpace | \"auto\";\nexport type BlockSize =\n | \"auto\"\n | \"full\"\n | \"screen\"\n | \"content\"\n | \"sidebar\"\n | \"page\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"xl\";\nexport type BlockDirection = \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\";\nexport type BlockRowFrom = Exclude<LayoutBreakpoint, \"base\">;\nexport type BlockAlign = \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\nexport type BlockJustify = \"start\" | \"end\" | \"center\" | \"between\";\nexport type BlockBackground =\n | \"surface\"\n | \"muted\"\n | \"selected\"\n | \"canvas\"\n | \"raised\"\n | \"overlay\"\n | \"transparent\";\nexport type BlockRadius = true | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"round\";\nexport type BlockShadow = true | \"sm\" | \"md\" | \"lg\";\nexport type BlockZIndex =\n | \"header\"\n | \"sticky\"\n | \"fixed\"\n | \"dropdown\"\n | \"modal\"\n | \"popover\"\n | \"toast\"\n | \"tooltip\";\n\nexport type BlockLayoutProps = {\n padding?: ResponsiveValue<BlockSpace>;\n paddingX?: ResponsiveValue<BlockSpace>;\n paddingY?: ResponsiveValue<BlockSpace>;\n margin?: ResponsiveValue<BlockMargin>;\n marginX?: ResponsiveValue<BlockMargin>;\n marginY?: ResponsiveValue<BlockMargin>;\n width?: ResponsiveValue<BlockSize>;\n minWidth?: ResponsiveValue<BlockSize>;\n maxWidth?: ResponsiveValue<BlockSize>;\n height?: ResponsiveValue<BlockSize>;\n minHeight?: ResponsiveValue<BlockSize>;\n maxHeight?: ResponsiveValue<BlockSize>;\n rowFrom?: BlockRowFrom;\n direction?: ResponsiveValue<BlockDirection>;\n align?: ResponsiveValue<BlockAlign>;\n justify?: ResponsiveValue<BlockJustify>;\n gap?: ResponsiveValue<BlockSpace>;\n grow?: ResponsiveValue<boolean | number>;\n shrink?: ResponsiveValue<boolean | number>;\n center?: ResponsiveValue<boolean>;\n sticky?: boolean;\n top?: ResponsiveValue<BlockSpace>;\n zIndex?: ResponsiveValue<BlockZIndex>;\n background?: ResponsiveValue<BlockBackground>;\n border?: ResponsiveValue<boolean>;\n borderTop?: ResponsiveValue<boolean>;\n borderBottom?: ResponsiveValue<boolean>;\n borderRight?: ResponsiveValue<boolean>;\n radius?: ResponsiveValue<BlockRadius>;\n shadow?: ResponsiveValue<BlockShadow>;\n hide?: ResponsiveValue<boolean>;\n};\n\nconst BREAKPOINTS: readonly LayoutBreakpoint[] = [\"base\", \"sm\", \"md\", \"lg\", \"xl\"];\n\nconst SPACE_TOKEN_MAP: Record<string, string> = {\n \"0\": \"0\",\n xs: \"var(--ak-space-xs)\",\n sm: \"var(--ak-space-sm)\",\n md: \"var(--ak-space-md)\",\n lg: \"var(--ak-space-lg)\",\n xl: \"var(--ak-space-xl)\",\n \"2xl\": \"var(--ak-space-2xl)\",\n \"3xl\": \"var(--ak-space-3xl)\",\n page: \"var(--ak-layout-page-gutter)\",\n};\n\nconst SIZE_TOKEN_MAP: Record<string, string> = {\n auto: \"auto\",\n full: \"100%\",\n screen: \"100dvh\",\n content: \"min(60vh, 36rem)\",\n sidebar: \"var(--ak-layout-sidebar-width)\",\n page: \"var(--ak-layout-content-max-width)\",\n sm: \"var(--ak-container-1)\",\n md: \"var(--ak-container-2)\",\n lg: \"var(--ak-container-3)\",\n xl: \"var(--ak-container-4)\",\n};\n\nconst BACKGROUND_TOKEN_MAP: Record<string, string> = {\n canvas: \"var(--ak-color-bg)\",\n surface: \"var(--ak-color-surface)\",\n muted: \"var(--ak-color-surface-muted)\",\n raised: \"var(--ak-color-surface-raised)\",\n overlay: \"var(--ak-color-surface-overlay)\",\n selected: \"var(--ak-color-selected)\",\n transparent: \"transparent\",\n};\n\nconst RADIUS_TOKEN_MAP: Record<string, string> = {\n sm: \"var(--ak-radius-sm)\",\n md: \"var(--ak-radius-md)\",\n lg: \"var(--ak-radius-lg)\",\n xl: \"var(--ak-radius-xl)\",\n round: \"var(--ak-radius-round)\",\n};\n\nconst SHADOW_TOKEN_MAP: Record<string, string> = {\n sm: \"var(--ak-shadow-sm)\",\n md: \"var(--ak-shadow-md)\",\n lg: \"var(--ak-shadow-lg)\",\n};\n\nconst Z_INDEX_TOKEN_MAP: Record<string, string> = {\n header: \"var(--ak-z-sticky)\",\n sticky: \"var(--ak-z-sticky)\",\n fixed: \"var(--ak-z-fixed)\",\n dropdown: \"var(--ak-z-dropdown)\",\n modal: \"var(--ak-z-modal)\",\n popover: \"var(--ak-z-popover)\",\n toast: \"var(--ak-z-toast)\",\n tooltip: \"var(--ak-z-tooltip)\",\n};\n\nconst BORDER_VALUE = \"1px solid var(--ak-color-border-subtle)\";\n\nconst BLOCK_LAYOUT_KEYS = new Set<keyof BlockLayoutProps>([\n \"padding\",\n \"paddingX\",\n \"paddingY\",\n \"margin\",\n \"marginX\",\n \"marginY\",\n \"width\",\n \"minWidth\",\n \"maxWidth\",\n \"height\",\n \"minHeight\",\n \"maxHeight\",\n \"rowFrom\",\n \"direction\",\n \"align\",\n \"justify\",\n \"gap\",\n \"grow\",\n \"shrink\",\n \"center\",\n \"sticky\",\n \"top\",\n \"zIndex\",\n \"background\",\n \"border\",\n \"borderTop\",\n \"borderBottom\",\n \"borderRight\",\n \"radius\",\n \"shadow\",\n \"hide\",\n]);\n\nfunction isResponsiveValue<T>(\n value: ResponsiveValue<T> | undefined,\n): value is Partial<Record<LayoutBreakpoint, T>> {\n return Boolean(\n value &&\n typeof value === \"object\" &&\n !Array.isArray(value) &&\n BREAKPOINTS.some((breakpoint) => breakpoint in value),\n );\n}\n\nfunction normalizeResponsiveValue<T>(\n value: ResponsiveValue<T> | undefined,\n): Partial<Record<LayoutBreakpoint, T>> | undefined {\n if (value === undefined) return undefined;\n if (isResponsiveValue(value)) return value;\n return { base: value };\n}\n\nfunction resolveTokenValue(\n value: string | number,\n tokens: Record<string, string>,\n): string | number {\n if (typeof value === \"number\") return value;\n const trimmed = value.trim();\n return tokens[trimmed] ?? trimmed;\n}\n\nfunction resolveSpaceValue(value: string | number): string | number {\n return resolveTokenValue(value, SPACE_TOKEN_MAP);\n}\n\nfunction resolveSizeValue(value: string, axis: \"inline\" | \"block\"): string {\n if (value === \"screen\") return axis === \"inline\" ? \"100dvw\" : \"100dvh\";\n return String(resolveTokenValue(value, SIZE_TOKEN_MAP));\n}\n\nfunction resolveAlignValue(value: BlockAlign): string {\n if (value === \"start\") return \"flex-start\";\n if (value === \"end\") return \"flex-end\";\n return value;\n}\n\nfunction resolveJustifyValue(value: BlockJustify): string {\n if (value === \"start\") return \"flex-start\";\n if (value === \"end\") return \"flex-end\";\n if (value === \"between\") return \"space-between\";\n return value;\n}\n\nfunction resolveFlexFlag(value: boolean | number): string | number {\n if (value === true) return 1;\n if (value === false) return 0;\n return value;\n}\n\nfunction resolveBorderValue(value: boolean): string | undefined {\n if (value === false) return \"0\";\n return BORDER_VALUE;\n}\n\nfunction resolveRadiusValue(value: BlockRadius): string | undefined {\n if (value === true) return RADIUS_TOKEN_MAP.md;\n return String(resolveTokenValue(value, RADIUS_TOKEN_MAP));\n}\n\nfunction resolveShadowValue(value: BlockShadow): string | undefined {\n if (value === true) return SHADOW_TOKEN_MAP.sm;\n return String(resolveTokenValue(value, SHADOW_TOKEN_MAP));\n}\n\nfunction setResponsiveVar<T>(\n styles: Record<string, string | number>,\n property: string,\n value: ResponsiveValue<T> | undefined,\n resolve: (value: T) => string | number | undefined,\n) {\n const normalized = normalizeResponsiveValue(value);\n if (!normalized) return;\n\n for (const breakpoint of BREAKPOINTS) {\n const breakpointValue = normalized[breakpoint];\n if (breakpointValue === undefined) continue;\n const resolved = resolve(breakpointValue);\n if (resolved === undefined || resolved === \"\") continue;\n styles[`--ak-${property}-${breakpoint}`] = resolved;\n }\n}\n\nexport function splitBlockLayoutProps<T extends Record<string, unknown>>(\n props: T,\n): {\n blockProps: Partial<BlockLayoutProps>;\n rest: Omit<T, keyof BlockLayoutProps>;\n} {\n const blockProps: Partial<BlockLayoutProps> = {};\n const rest: Record<string, unknown> = {};\n\n for (const [key, value] of Object.entries(props)) {\n if (BLOCK_LAYOUT_KEYS.has(key as keyof BlockLayoutProps)) {\n (blockProps as Record<string, unknown>)[key] = value;\n } else {\n rest[key] = value;\n }\n }\n\n return { blockProps, rest: rest as Omit<T, keyof BlockLayoutProps> };\n}\n\nexport function applyBlockLayoutStyles(\n styles: Record<string, string | number>,\n props: Partial<BlockLayoutProps>,\n) {\n setResponsiveVar(styles, \"p\", props.padding, resolveSpaceValue);\n setResponsiveVar(styles, \"px\", props.paddingX, resolveSpaceValue);\n setResponsiveVar(styles, \"py\", props.paddingY, resolveSpaceValue);\n setResponsiveVar(styles, \"m\", props.margin, resolveSpaceValue);\n setResponsiveVar(styles, \"mx\", props.marginX, resolveSpaceValue);\n setResponsiveVar(styles, \"my\", props.marginY, resolveSpaceValue);\n\n setResponsiveVar(styles, \"width\", props.width, (value) => resolveSizeValue(value, \"inline\"));\n setResponsiveVar(styles, \"min-width\", props.minWidth, (value) =>\n resolveSizeValue(value, \"inline\"),\n );\n setResponsiveVar(styles, \"max-width\", props.maxWidth, (value) =>\n resolveSizeValue(value, \"inline\"),\n );\n setResponsiveVar(styles, \"height\", props.height, (value) => resolveSizeValue(value, \"block\"));\n setResponsiveVar(styles, \"min-height\", props.minHeight, (value) =>\n resolveSizeValue(value, \"block\"),\n );\n setResponsiveVar(styles, \"max-height\", props.maxHeight, (value) =>\n resolveSizeValue(value, \"block\"),\n );\n\n if (props.rowFrom !== undefined) {\n styles[`--ak-flex-direction-${props.rowFrom}`] = \"row\";\n }\n if (props.center !== undefined) {\n setResponsiveVar(styles, \"align-items\", props.center, (value) =>\n value ? \"center\" : \"stretch\",\n );\n setResponsiveVar(styles, \"justify-content\", props.center, (value) =>\n value ? \"center\" : \"flex-start\",\n );\n }\n setResponsiveVar(styles, \"flex-direction\", props.direction, (value) => value);\n setResponsiveVar(styles, \"align-items\", props.align, resolveAlignValue);\n setResponsiveVar(styles, \"justify-content\", props.justify, resolveJustifyValue);\n setResponsiveVar(styles, \"gap\", props.gap, resolveSpaceValue);\n setResponsiveVar(styles, \"flex-grow\", props.grow, resolveFlexFlag);\n setResponsiveVar(styles, \"flex-shrink\", props.shrink, resolveFlexFlag);\n\n if (props.sticky) {\n styles[\"--ak-position-base\"] = \"sticky\";\n }\n setResponsiveVar(styles, \"top\", props.top, resolveSpaceValue);\n setResponsiveVar(styles, \"z-index\", props.zIndex, (value) =>\n String(resolveTokenValue(value, Z_INDEX_TOKEN_MAP)),\n );\n\n setResponsiveVar(styles, \"background\", props.background, (value) =>\n String(resolveTokenValue(value, BACKGROUND_TOKEN_MAP)),\n );\n setResponsiveVar(styles, \"border\", props.border, resolveBorderValue);\n setResponsiveVar(styles, \"border-top\", props.borderTop, resolveBorderValue);\n setResponsiveVar(styles, \"border-bottom\", props.borderBottom, resolveBorderValue);\n setResponsiveVar(styles, \"border-right\", props.borderRight, resolveBorderValue);\n setResponsiveVar(styles, \"border-radius\", props.radius, resolveRadiusValue);\n setResponsiveVar(styles, \"box-shadow\", props.shadow, resolveShadowValue);\n setResponsiveVar(styles, \"display\", props.hide, (value) => (value ? \"none\" : \"flex\"));\n}\n\nexport function mergeLayoutStyles(\n layout: Record<string, string | number>,\n user: unknown,\n): string | undefined {\n const merged: Record<string, unknown> = { ...layout };\n\n if (user !== null && user !== undefined && typeof user === \"object\") {\n Object.assign(merged, user as Record<string, unknown>);\n }\n\n const mergedString = serializeCssDeclarations(merged);\n\n if (typeof user === \"string\" && user.trim()) {\n return mergedString ? `${mergedString};${user.trim()}` : user.trim();\n }\n\n return mergedString || undefined;\n}\n"],"mappings":"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"}
package/dist/components/_internal/classes.js CHANGED
@@ -1,6 +1,13 @@
1
1
  //#region src/components/_internal/classes.ts
2
+ function readClassValue(value) {
3
+ const resolved = typeof value === "function" ? value() : value;
4
+ return typeof resolved === "string" && resolved.trim() ? resolved.trim() : void 0;
5
+ }
2
6
  function classes(...values) {
3
- return values.filter((item) => typeof item === "string" && item.trim()).join(" ") || void 0;
7
+ if (values.some((value) => typeof value === "function")) return () => {
8
+ return values.map(readClassValue).filter(Boolean).join(" ") || void 0;
9
+ };
10
+ return values.map(readClassValue).filter(Boolean).join(" ") || void 0;
4
11
  }
5
12
  //#endregion
6
13
  export { classes };
package/dist/components/_internal/classes.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"classes.js","names":[],"sources":["../../../src/components/_internal/classes.ts"],"sourcesContent":["export function classes(...values: Array<unknown>): string | undefined {\n const value = values.filter((item) => typeof item === \"string\" && item.trim()).join(\" \");\n\n return value || undefined;\n}\n"],"mappings":";AAAA,SAAgB,QAAQ,GAAG,QAA4C;CAGrE,OAFc,OAAO,QAAQ,SAAS,OAAO,SAAS,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,GAEzE,KAAK,KAAA;AAClB"}
1
+ {"version":3,"file":"classes.js","names":[],"sources":["../../../src/components/_internal/classes.ts"],"sourcesContent":["export type ClassAccessor = () => string | undefined;\n\nfunction readClassValue(value: unknown): string | undefined {\n const resolved = typeof value === \"function\" ? (value as () => unknown)() : value;\n return typeof resolved === \"string\" && resolved.trim() ? resolved.trim() : undefined;\n}\n\nexport function classes(...values: Array<unknown>): string | ClassAccessor | undefined {\n if (values.some((value) => typeof value === \"function\")) {\n return () => {\n const value = values.map(readClassValue).filter(Boolean).join(\" \");\n return value || undefined;\n };\n }\n\n const value = values.map(readClassValue).filter(Boolean).join(\" \");\n return value || undefined;\n}\n"],"mappings":";AAEA,SAAS,eAAe,OAAoC;CAC1D,MAAM,WAAW,OAAO,UAAU,aAAc,MAAwB,IAAI;CAC5E,OAAO,OAAO,aAAa,YAAY,SAAS,KAAK,IAAI,SAAS,KAAK,IAAI,KAAA;AAC7E;AAEA,SAAgB,QAAQ,GAAG,QAA4D;CACrF,IAAI,OAAO,MAAM,UAAU,OAAO,UAAU,UAAU,GACpD,aAAa;EAEX,OADc,OAAO,IAAI,cAAc,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GACnD,KAAK,KAAA;CAClB;CAIF,OADc,OAAO,IAAI,cAAc,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GACnD,KAAK,KAAA;AAClB"}
package/dist/components/_internal/jsx.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"jsx.js","names":[],"sources":["../../../src/components/_internal/jsx.ts"],"sourcesContent":["import type { JSXElement } from \"@askrjs/askr/foundations\";\nimport { jsx } from \"@askrjs/askr/jsx-runtime\";\n\nconst renderIntrinsicElement = jsx as (type: string, props: Record<string, unknown>) => JSX.Element;\n\nexport function intrinsicElement(\n type: string,\n props: Record<string, unknown>,\n children: unknown,\n): JSX.Element {\n return renderIntrinsicElement(type, { ...props, children });\n}\n\nexport function isJsxElement(value: unknown): value is JSXElement {\n return typeof value === \"object\" && value !== null && \"$$typeof\" in value && \"props\" in value;\n}\n\nexport function hasJsxIntrinsicType(value: unknown, expectedType: string): value is JSXElement {\n return isJsxElement(value) && value.type === expectedType;\n}\n\nexport function toChildArray(children: unknown): unknown[] {\n if (Array.isArray(children)) {\n return children;\n }\n\n return children === undefined || children === null ? [] : [children];\n}\n\nexport function mapJsxTree(children: unknown, mapper: (element: JSXElement) => unknown): unknown {\n if (Array.isArray(children)) {\n return children.map((child) => mapJsxTree(child, mapper));\n }\n\n if (!isJsxElement(children)) {\n return children;\n }\n\n const mapped = mapper(children);\n\n if (!isJsxElement(mapped)) {\n return mapped;\n }\n\n const currentChildren = mapped.props?.children;\n const nextChildren = mapJsxTree(currentChildren, mapper);\n\n if (nextChildren === currentChildren) {\n return mapped;\n }\n\n return {\n ...mapped,\n props: {\n ...mapped.props,\n children: nextChildren,\n },\n };\n}\n\nexport function collectJsxElements(\n children: unknown,\n predicate?: (element: JSXElement) => boolean,\n): JSXElement[] {\n const result: JSXElement[] = [];\n\n function visit(value: unknown): void {\n if (Array.isArray(value)) {\n for (let index = 0; index < value.length; index += 1) {\n visit(value[index]);\n }\n return;\n }\n\n if (!isJsxElement(value)) {\n return;\n }\n\n if (!predicate || predicate(value)) {\n result.push(value);\n }\n\n visit(value.props?.children);\n }\n\n visit(children);\n\n return result;\n}\n\nfunction isEventHandlerLikeKey(key: string): boolean {\n return key.length >= 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110;\n}\n\nfunction compareKeys(left: string, right: string): number {\n if (left < right) return -1;\n if (left > right) return 1;\n return 0;\n}\n\nfunction serializeArray(value: readonly unknown[]): string {\n if (value.length === 0) {\n return \"\";\n }\n\n if (value.length === 1) {\n return serializeForId(value[0]);\n }\n\n if (value.length === 2) {\n return `${serializeForId(value[0])}|${serializeForId(value[1])}`;\n }\n\n let result = serializeForId(value[0]);\n\n for (let index = 1; index < value.length; index += 1) {\n result += `|${serializeForId(value[index])}`;\n }\n\n return result;\n}\n\nfunction serializeSerializableProps(props: Record<string, unknown>): string {\n const keys: string[] = [];\n\n for (const key of Object.keys(props)) {\n if (key === \"children\" || key === \"ref\" || isEventHandlerLikeKey(key)) {\n continue;\n }\n\n const entryValue = props[key];\n\n if (\n typeof entryValue === \"string\" ||\n typeof entryValue === \"number\" ||\n typeof entryValue === \"boolean\"\n ) {\n keys.push(key);\n }\n }\n\n if (keys.length === 0) {\n return \"\";\n }\n\n if (keys.length === 1) {\n const key = keys[0];\n\n return `${key}:${String(props[key])}`;\n }\n\n if (keys.length === 2) {\n if (keys[1] < keys[0]) {\n [keys[0], keys[1]] = [keys[1], keys[0]];\n }\n\n return `${keys[0]}:${String(props[keys[0]])},${keys[1]}:${String(props[keys[1]])}`;\n }\n\n keys.sort(compareKeys);\n\n let result = `${keys[0]}:${String(props[keys[0]])}`;\n\n for (let index = 1; index < keys.length; index += 1) {\n const key = keys[index];\n result += `,${key}:${String(props[key])}`;\n }\n\n return result;\n}\n\nfunction hasEmptyJsxChildren(children: unknown): boolean {\n return (\n children === undefined ||\n children === null ||\n typeof children === \"boolean\" ||\n (Array.isArray(children) && children.length === 0)\n );\n}\n\nexport function extractTextContent(value: unknown): string {\n if (Array.isArray(value)) {\n return value.map((entry) => extractTextContent(entry)).join(\"\");\n }\n\n if (\n value === undefined ||\n value === null ||\n typeof value === \"boolean\" ||\n typeof value === \"function\"\n ) {\n return \"\";\n }\n\n if (typeof value === \"string\" || typeof value === \"number\") {\n return String(value);\n }\n\n if (isJsxElement(value)) {\n return extractTextContent(value.props?.children);\n }\n\n return \"\";\n}\n\nexport function serializeForId(value: unknown): string {\n if (Array.isArray(value)) {\n return serializeArray(value);\n }\n\n if (value === undefined || value === null || typeof value === \"boolean\") {\n return \"\";\n }\n\n if (typeof value === \"string\" || typeof value === \"number\") {\n return String(value);\n }\n\n if (isJsxElement(value)) {\n const typeName =\n typeof value.type === \"string\"\n ? value.type\n : typeof value.type === \"function\"\n ? value.type.name || \"component\"\n : \"component\";\n const props = (value.props ?? {}) as Record<string, unknown>;\n const propEntries = serializeSerializableProps(props);\n const children = props.children;\n const propsPrefix = propEntries === \"\" ? `${typeName}[]` : `${typeName}[${propEntries}]`;\n\n if (hasEmptyJsxChildren(children)) {\n return `${propsPrefix}()`;\n }\n\n return `${propsPrefix}(${serializeForId(children)})`;\n }\n\n return typeof value;\n}\n"],"mappings":";;AAGA,MAAM,yBAAyB;AAE/B,SAAgB,iBACd,MACA,OACA,UACa;CACb,OAAO,uBAAuB,MAAM;EAAE,GAAG;EAAO;CAAS,CAAC;AAC5D;AAEA,SAAgB,aAAa,OAAqC;CAChE,OAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,cAAc,SAAS,WAAW;AAC1F;AAMA,SAAgB,aAAa,UAA8B;CACzD,IAAI,MAAM,QAAQ,QAAQ,GACxB,OAAO;CAGT,OAAO,aAAa,KAAA,KAAa,aAAa,OAAO,CAAC,IAAI,CAAC,QAAQ;AACrE"}
1
+ {"version":3,"file":"jsx.js","names":[],"sources":["../../../src/components/_internal/jsx.ts"],"sourcesContent":["import type { JSXElement } from \"@askrjs/askr/foundations\";\nimport { jsx, type JSX } from \"@askrjs/askr/jsx-runtime\";\n\nconst renderIntrinsicElement = jsx as (type: string, props: Record<string, unknown>) => JSX.Element;\n\nexport function intrinsicElement(\n type: string,\n props: Record<string, unknown>,\n children: unknown,\n): JSX.Element {\n return renderIntrinsicElement(type, { ...props, children });\n}\n\nexport function isJsxElement(value: unknown): value is JSXElement {\n return typeof value === \"object\" && value !== null && \"$$typeof\" in value && \"props\" in value;\n}\n\nexport function hasJsxIntrinsicType(value: unknown, expectedType: string): value is JSXElement {\n return isJsxElement(value) && value.type === expectedType;\n}\n\nexport function toChildArray(children: unknown): unknown[] {\n if (Array.isArray(children)) {\n return children;\n }\n\n return children === undefined || children === null ? [] : [children];\n}\n\nexport function mapJsxTree(children: unknown, mapper: (element: JSXElement) => unknown): unknown {\n if (Array.isArray(children)) {\n return children.map((child) => mapJsxTree(child, mapper));\n }\n\n if (!isJsxElement(children)) {\n return children;\n }\n\n const mapped = mapper(children);\n\n if (!isJsxElement(mapped)) {\n return mapped;\n }\n\n const currentChildren = mapped.props?.children;\n const nextChildren = mapJsxTree(currentChildren, mapper);\n\n if (nextChildren === currentChildren) {\n return mapped;\n }\n\n return {\n ...mapped,\n props: {\n ...mapped.props,\n children: nextChildren,\n },\n };\n}\n\nexport function collectJsxElements(\n children: unknown,\n predicate?: (element: JSXElement) => boolean,\n): JSXElement[] {\n const result: JSXElement[] = [];\n\n function visit(value: unknown): void {\n if (Array.isArray(value)) {\n for (let index = 0; index < value.length; index += 1) {\n visit(value[index]);\n }\n return;\n }\n\n if (!isJsxElement(value)) {\n return;\n }\n\n if (!predicate || predicate(value)) {\n result.push(value);\n }\n\n visit(value.props?.children);\n }\n\n visit(children);\n\n return result;\n}\n\nfunction isEventHandlerLikeKey(key: string): boolean {\n return key.length >= 2 && key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110;\n}\n\nfunction compareKeys(left: string, right: string): number {\n if (left < right) return -1;\n if (left > right) return 1;\n return 0;\n}\n\nfunction serializeArray(value: readonly unknown[]): string {\n if (value.length === 0) {\n return \"\";\n }\n\n if (value.length === 1) {\n return serializeForId(value[0]);\n }\n\n if (value.length === 2) {\n return `${serializeForId(value[0])}|${serializeForId(value[1])}`;\n }\n\n let result = serializeForId(value[0]);\n\n for (let index = 1; index < value.length; index += 1) {\n result += `|${serializeForId(value[index])}`;\n }\n\n return result;\n}\n\nfunction serializeSerializableProps(props: Record<string, unknown>): string {\n const keys: string[] = [];\n\n for (const key of Object.keys(props)) {\n if (key === \"children\" || key === \"ref\" || isEventHandlerLikeKey(key)) {\n continue;\n }\n\n const entryValue = props[key];\n\n if (\n typeof entryValue === \"string\" ||\n typeof entryValue === \"number\" ||\n typeof entryValue === \"boolean\"\n ) {\n keys.push(key);\n }\n }\n\n if (keys.length === 0) {\n return \"\";\n }\n\n if (keys.length === 1) {\n const key = keys[0];\n\n return `${key}:${String(props[key])}`;\n }\n\n if (keys.length === 2) {\n if (keys[1] < keys[0]) {\n [keys[0], keys[1]] = [keys[1], keys[0]];\n }\n\n return `${keys[0]}:${String(props[keys[0]])},${keys[1]}:${String(props[keys[1]])}`;\n }\n\n keys.sort(compareKeys);\n\n let result = `${keys[0]}:${String(props[keys[0]])}`;\n\n for (let index = 1; index < keys.length; index += 1) {\n const key = keys[index];\n result += `,${key}:${String(props[key])}`;\n }\n\n return result;\n}\n\nfunction hasEmptyJsxChildren(children: unknown): boolean {\n return (\n children === undefined ||\n children === null ||\n typeof children === \"boolean\" ||\n (Array.isArray(children) && children.length === 0)\n );\n}\n\nexport function extractTextContent(value: unknown): string {\n if (Array.isArray(value)) {\n return value.map((entry) => extractTextContent(entry)).join(\"\");\n }\n\n if (\n value === undefined ||\n value === null ||\n typeof value === \"boolean\" ||\n typeof value === \"function\"\n ) {\n return \"\";\n }\n\n if (typeof value === \"string\" || typeof value === \"number\") {\n return String(value);\n }\n\n if (isJsxElement(value)) {\n return extractTextContent(value.props?.children);\n }\n\n return \"\";\n}\n\nexport function serializeForId(value: unknown): string {\n if (Array.isArray(value)) {\n return serializeArray(value);\n }\n\n if (value === undefined || value === null || typeof value === \"boolean\") {\n return \"\";\n }\n\n if (typeof value === \"string\" || typeof value === \"number\") {\n return String(value);\n }\n\n if (isJsxElement(value)) {\n const typeName =\n typeof value.type === \"string\"\n ? value.type\n : typeof value.type === \"function\"\n ? value.type.name || \"component\"\n : \"component\";\n const props = (value.props ?? {}) as Record<string, unknown>;\n const propEntries = serializeSerializableProps(props);\n const children = props.children;\n const propsPrefix = propEntries === \"\" ? `${typeName}[]` : `${typeName}[${propEntries}]`;\n\n if (hasEmptyJsxChildren(children)) {\n return `${propsPrefix}()`;\n }\n\n return `${propsPrefix}(${serializeForId(children)})`;\n }\n\n return typeof value;\n}\n"],"mappings":";;AAGA,MAAM,yBAAyB;AAE/B,SAAgB,iBACd,MACA,OACA,UACa;CACb,OAAO,uBAAuB,MAAM;EAAE,GAAG;EAAO;CAAS,CAAC;AAC5D;AAEA,SAAgB,aAAa,OAAqC;CAChE,OAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,cAAc,SAAS,WAAW;AAC1F;AAMA,SAAgB,aAAa,UAA8B;CACzD,IAAI,MAAM,QAAQ,QAAQ,GACxB,OAAO;CAGT,OAAO,aAAa,KAAA,KAAa,aAAa,OAAO,CAAC,IAAI,CAAC,QAAQ;AACrE"}
package/dist/components/_internal/style.js CHANGED
@@ -1,6 +1,97 @@
1
- import { cspNonce } from "@askrjs/askr";
1
+ import * as Askr from "@askrjs/askr";
2
2
  //#region src/components/_internal/style.ts
3
3
  const cssPropertyNameCache = /* @__PURE__ */ new Map();
4
+ const MAX_PROPERTY_CACHE = 256;
5
+ const CSS_UNSAFE_RE = /[{}<>\\]/;
6
+ const CSS_URI_SCHEME_RE = /(?:^|[\s(,])([a-z][a-z0-9+.-]*):/i;
7
+ const CSS_FUNCTION_NAME_RE = /([a-z-][a-z0-9-]*)\s*\(/gi;
8
+ const CSS_ALLOWED_FUNCTIONS = /* @__PURE__ */ new Set([
9
+ "var",
10
+ "calc",
11
+ "min",
12
+ "max",
13
+ "clamp",
14
+ "rgb",
15
+ "rgba",
16
+ "hsl",
17
+ "hsla",
18
+ "lab",
19
+ "lch",
20
+ "oklab",
21
+ "oklch",
22
+ "color",
23
+ "color-mix",
24
+ "translate",
25
+ "translatex",
26
+ "translatey",
27
+ "translatez",
28
+ "scale",
29
+ "scalex",
30
+ "scaley",
31
+ "scalez",
32
+ "rotate",
33
+ "rotatex",
34
+ "rotatey",
35
+ "rotatez",
36
+ "skew",
37
+ "skewx",
38
+ "skewy",
39
+ "matrix",
40
+ "matrix3d",
41
+ "linear-gradient",
42
+ "radial-gradient",
43
+ "conic-gradient",
44
+ "repeating-linear-gradient",
45
+ "repeating-radial-gradient",
46
+ "repeating-conic-gradient",
47
+ "cubic-bezier",
48
+ "steps"
49
+ ]);
50
+ function isSafeCssPropertyName(name) {
51
+ if (name.startsWith("--")) return /^--[a-zA-Z0-9_-]+$/.test(name);
52
+ return /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(name);
53
+ }
54
+ function isSafeCssValue(value) {
55
+ if (CSS_UNSAFE_RE.test(value) || CSS_URI_SCHEME_RE.test(value)) return false;
56
+ for (const match of value.matchAll(CSS_FUNCTION_NAME_RE)) if (!CSS_ALLOWED_FUNCTIONS.has(match[1].toLowerCase())) return false;
57
+ return true;
58
+ }
59
+ function splitCssDeclarations(value) {
60
+ const declarations = [];
61
+ let start = 0;
62
+ let depth = 0;
63
+ let quote;
64
+ for (let index = 0; index < value.length; index += 1) {
65
+ const char = value[index];
66
+ if (quote) {
67
+ if (char === quote && value[index - 1] !== "\\") quote = void 0;
68
+ continue;
69
+ }
70
+ if (char === "\"" || char === "'") {
71
+ quote = char;
72
+ continue;
73
+ }
74
+ if (char === "(") depth += 1;
75
+ if (char === ")" && depth > 0) depth -= 1;
76
+ if (char === ";" && depth === 0) {
77
+ declarations.push(value.slice(start, index));
78
+ start = index + 1;
79
+ }
80
+ }
81
+ declarations.push(value.slice(start));
82
+ return declarations;
83
+ }
84
+ function serializeCssString(value) {
85
+ const entries = [];
86
+ for (const candidate of splitCssDeclarations(value)) {
87
+ const separator = candidate.indexOf(":");
88
+ if (separator <= 0) continue;
89
+ const key = candidate.slice(0, separator).trim();
90
+ const cssValue = candidate.slice(separator + 1).trim();
91
+ if (key && cssValue) entries.push([key, cssValue]);
92
+ }
93
+ return serializeCssDeclarations(Object.fromEntries(entries));
94
+ }
4
95
  function cssPropertyName(name) {
5
96
  let cached = cssPropertyNameCache.get(name);
6
97
  if (cached !== void 0) return cached;
@@ -10,7 +101,7 @@ function cssPropertyName(name) {
10
101
  if (code >= 65 && code <= 90) result += `-${String.fromCharCode(code + 32)}`;
11
102
  else result += name[index];
12
103
  }
13
- cssPropertyNameCache.set(name, result);
104
+ if (cssPropertyNameCache.size < MAX_PROPERTY_CACHE) cssPropertyNameCache.set(name, result);
14
105
  return result;
15
106
  }
16
107
  function serializeCssDeclarations(styles) {
@@ -19,17 +110,66 @@ function serializeCssDeclarations(styles) {
19
110
  for (const key of keys) {
20
111
  const value = styles[key];
21
112
  if (value === void 0 || value === null) continue;
22
- const declaration = `${cssPropertyName(key)}:${String(value)}`;
113
+ const rawProperty = key.trim();
114
+ if (!isSafeCssPropertyName(rawProperty)) continue;
115
+ const property = cssPropertyName(rawProperty).trim();
116
+ const cssValue = String(value).trim();
117
+ if (!cssValue || !isSafeCssValue(cssValue)) continue;
118
+ const declaration = `${property}:${cssValue}`;
23
119
  result = result ? `${result};${declaration}` : declaration;
24
120
  }
25
121
  return result;
26
122
  }
27
123
  const STYLE_REGISTRY_ATTR = "data-askr-style-registry";
28
124
  const STYLE_CLASS_PREFIX = "ak-style-";
29
- const styleClassCache = /* @__PURE__ */ new Map();
30
- const registries = /* @__PURE__ */ new WeakMap();
31
125
  const MAX_STYLE_RULES = 512;
32
- let nextStyleClassId = 0;
126
+ const MAX_SSR_STYLE_CACHE = 4096;
127
+ const styleRulesByClass = /* @__PURE__ */ new Map();
128
+ const registries = /* @__PURE__ */ new WeakMap();
129
+ function countRegisteredRules(value) {
130
+ return value?.match(/\.ak-style-[a-z0-9]+\{/g)?.length ?? 0;
131
+ }
132
+ function styleClassName(declarations) {
133
+ let first = 3735928559 ^ declarations.length;
134
+ let second = 1103547991 ^ declarations.length;
135
+ for (let index = 0; index < declarations.length; index += 1) {
136
+ const code = declarations.charCodeAt(index);
137
+ first = Math.imul(first ^ code, 2654435761);
138
+ second = Math.imul(second ^ code, 1597334677);
139
+ }
140
+ first = Math.imul(first ^ first >>> 16, 2246822507) ^ Math.imul(second ^ second >>> 13, 3266489909);
141
+ second = Math.imul(second ^ second >>> 16, 2246822507) ^ Math.imul(first ^ first >>> 13, 3266489909);
142
+ return `${STYLE_CLASS_PREFIX}${(second >>> 0).toString(36)}${(first >>> 0).toString(36)}`;
143
+ }
144
+ function escapeStyleRawText(value) {
145
+ return value.replace(/<\//g, "<\\/");
146
+ }
147
+ function styleRuleFor(declarations) {
148
+ const className = styleClassName(declarations);
149
+ const existing = styleRulesByClass.get(className);
150
+ if (existing) {
151
+ if (existing.declarations !== declarations) throw new RangeError("Theme style class collision detected.");
152
+ return existing;
153
+ }
154
+ return {
155
+ className,
156
+ declarations,
157
+ rule: `.${className}{${escapeStyleRawText(declarations)}}`
158
+ };
159
+ }
160
+ function rememberStyleRule(entry) {
161
+ styleRulesByClass.delete(entry.className);
162
+ styleRulesByClass.set(entry.className, entry);
163
+ while (styleRulesByClass.size > MAX_SSR_STYLE_CACHE) {
164
+ const oldest = styleRulesByClass.keys().next().value;
165
+ if (oldest === void 0) break;
166
+ styleRulesByClass.delete(oldest);
167
+ }
168
+ }
169
+ function registerSSRStyle(entry) {
170
+ const register = Askr.registerSSRStyle;
171
+ register?.(entry.className, entry.rule);
172
+ }
33
173
  function ensureStyleRegistry(nonce) {
34
174
  if (typeof document === "undefined") return null;
35
175
  const key = nonce ?? "";
@@ -40,49 +180,59 @@ function ensureStyleRegistry(nonce) {
40
180
  }
41
181
  const current = documentRegistries.get(key);
42
182
  if (current?.element.isConnected) return current;
43
- const styleElement = document.createElement("style");
44
- styleElement.setAttribute(STYLE_REGISTRY_ATTR, "true");
45
- if (nonce !== void 0) styleElement.nonce = nonce;
46
- (document.head ?? document.documentElement).append(styleElement);
183
+ const styleElement = Array.from(document.querySelectorAll(`style[${STYLE_REGISTRY_ATTR}]`)).find((element) => (element.nonce || void 0) === nonce) ?? document.createElement("style");
184
+ if (!styleElement.isConnected) {
185
+ styleElement.setAttribute(STYLE_REGISTRY_ATTR, "true");
186
+ if (nonce !== void 0) styleElement.nonce = nonce;
187
+ (document.head ?? document.documentElement).append(styleElement);
188
+ }
47
189
  const registry = {
48
190
  element: styleElement,
191
+ ruleCount: countRegisteredRules(styleElement.textContent),
49
192
  rules: /* @__PURE__ */ new Map()
50
193
  };
51
194
  documentRegistries.set(key, registry);
52
195
  return registry;
53
196
  }
54
197
  function normalizeDeclarations(declarations) {
55
- return declarations.trim().replace(/;+\s*$/, "");
198
+ return serializeCssString(declarations);
56
199
  }
57
200
  function styleDeclarationsToClass(declarations) {
58
201
  if (typeof declarations !== "string") return void 0;
59
202
  const normalized = normalizeDeclarations(declarations);
60
203
  if (!normalized) return void 0;
61
- const registry = ensureStyleRegistry(cspNonce());
204
+ const entry = styleRuleFor(normalized);
205
+ const registry = ensureStyleRegistry(Askr.cspNonce());
62
206
  const registered = registry?.rules.get(normalized);
63
- if (registered) return registered.className;
64
- let className = styleClassCache.get(normalized);
65
- if (className === void 0) {
66
- className = `${STYLE_CLASS_PREFIX}${++nextStyleClassId}`;
67
- if (styleClassCache.size >= MAX_STYLE_RULES) {
68
- const oldest = styleClassCache.keys().next().value;
69
- if (oldest !== void 0) styleClassCache.delete(oldest);
70
- }
71
- styleClassCache.set(normalized, className);
207
+ if (registered) {
208
+ registerSSRStyle(registered);
209
+ return registered.className;
72
210
  }
73
211
  if (registry) {
74
- const styleElement = registry.element;
75
- if (styleElement) {
76
- if (registry.rules.size >= MAX_STYLE_RULES) throw new RangeError("Theme style registry capacity exceeded.");
77
- const rule = `.${className}{${normalized}}`;
78
- registry.rules.set(normalized, {
79
- className,
80
- rule
81
- });
82
- styleElement.textContent = Array.from(registry.rules.values(), (entry) => entry.rule).join("\n");
212
+ if (!registry.rules.has(normalized) && !registry.element.textContent?.includes(entry.rule)) {
213
+ if (registry.ruleCount >= MAX_STYLE_RULES) throw new RangeError("Theme style registry capacity exceeded.");
214
+ }
215
+ if (!registry.element.textContent?.includes(entry.rule)) {
216
+ registry.element.append(entry.rule, "\n");
217
+ registry.ruleCount += 1;
218
+ }
219
+ registry.rules.set(normalized, entry);
220
+ }
221
+ rememberStyleRule(entry);
222
+ registerSSRStyle(entry);
223
+ return entry.className;
224
+ }
225
+ function styleRulesForHtml(html) {
226
+ const rules = /* @__PURE__ */ new Map();
227
+ for (const attribute of html.matchAll(/\sclass=(?:"([^"]*)"|'([^']*)')/g)) {
228
+ const value = attribute[1] ?? attribute[2] ?? "";
229
+ for (const className of value.split(/\s+/)) {
230
+ const entry = styleRulesByClass.get(className);
231
+ if (entry) rules.set(className, entry.rule);
232
+ if (rules.size > MAX_STYLE_RULES) throw new RangeError("Theme style registry capacity exceeded.");
83
233
  }
84
234
  }
85
- return className;
235
+ return Array.from(rules.values());
86
236
  }
87
237
  //#endregion
88
- export { serializeCssDeclarations, styleDeclarationsToClass };
238
+ export { serializeCssDeclarations, styleDeclarationsToClass, styleRulesForHtml };
package/dist/components/_internal/style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/_internal/style.ts"],"sourcesContent":["import { cspNonce } from \"@askrjs/askr\";\n\nconst cssPropertyNameCache = new Map<string, string>();\n\nfunction cssPropertyName(name: string): string {\n let cached = cssPropertyNameCache.get(name);\n if (cached !== undefined) {\n return cached;\n }\n\n let result = \"\";\n\n for (let index = 0; index < name.length; index += 1) {\n const code = name.charCodeAt(index);\n\n if (code >= 65 && code <= 90) {\n result += `-${String.fromCharCode(code + 32)}`;\n } else {\n result += name[index];\n }\n }\n\n cssPropertyNameCache.set(name, result);\n return result;\n}\n\nexport function serializeCssDeclarations(styles: Record<string, unknown>): string {\n const keys = Object.keys(styles);\n let result = \"\";\n\n for (const key of keys) {\n const value = styles[key];\n if (value === undefined || value === null) {\n continue;\n }\n\n const declaration = `${cssPropertyName(key)}:${String(value)}`;\n result = result ? `${result};${declaration}` : declaration;\n }\n\n return result;\n}\n\nexport function mergeCssVar(style: unknown, name: string, value: string): string {\n const decl = `${name}:${value}`;\n\n if (typeof style === \"string\") {\n const trimmed = style.trim();\n return trimmed ? `${trimmed};${decl}` : decl;\n }\n\n if (style && typeof style === \"object\") {\n const entries = serializeCssDeclarations(style as Record<string, unknown>);\n return entries ? `${entries};${decl}` : decl;\n }\n\n return decl;\n}\n\nconst STYLE_REGISTRY_ATTR = \"data-askr-style-registry\";\nconst STYLE_CLASS_PREFIX = \"ak-style-\";\n\nconst styleClassCache = new Map<string, string>();\ntype StyleRegistry = {\n element: HTMLStyleElement;\n rules: Map<string, { className: string; rule: string }>;\n};\nconst registries = new WeakMap<Document, Map<string, StyleRegistry>>();\nconst MAX_STYLE_RULES = 512;\n\nlet nextStyleClassId = 0;\n\nfunction ensureStyleRegistry(nonce: string | undefined): StyleRegistry | null {\n if (typeof document === \"undefined\") return null;\n const key = nonce ?? \"\";\n let documentRegistries = registries.get(document);\n if (!documentRegistries) {\n documentRegistries = new Map();\n registries.set(document, documentRegistries);\n }\n const current = documentRegistries.get(key);\n if (current?.element.isConnected) return current;\n\n const styleElement = document.createElement(\"style\");\n styleElement.setAttribute(STYLE_REGISTRY_ATTR, \"true\");\n if (nonce !== undefined) styleElement.nonce = nonce;\n (document.head ?? document.documentElement).append(styleElement);\n const registry: StyleRegistry = { element: styleElement, rules: new Map() };\n documentRegistries.set(key, registry);\n return registry;\n}\n\nfunction normalizeDeclarations(declarations: string): string {\n return declarations.trim().replace(/;+\\s*$/, \"\");\n}\n\nexport function styleDeclarationsToClass(declarations: string | undefined): string | undefined {\n if (typeof declarations !== \"string\") return undefined;\n\n const normalized = normalizeDeclarations(declarations);\n if (!normalized) return undefined;\n\n const nonce = cspNonce();\n const registry = ensureStyleRegistry(nonce);\n const registered = registry?.rules.get(normalized);\n if (registered) return registered.className;\n\n let className = styleClassCache.get(normalized);\n if (className === undefined) {\n className = `${STYLE_CLASS_PREFIX}${++nextStyleClassId}`;\n if (styleClassCache.size >= MAX_STYLE_RULES) {\n const oldest = styleClassCache.keys().next().value as string | undefined;\n if (oldest !== undefined) styleClassCache.delete(oldest);\n }\n styleClassCache.set(normalized, className);\n }\n\n if (registry) {\n const styleElement = registry.element;\n if (styleElement) {\n if (registry.rules.size >= MAX_STYLE_RULES)\n throw new RangeError(\"Theme style registry capacity exceeded.\");\n const rule = `.${className}{${normalized}}`;\n registry.rules.set(normalized, { className, rule });\n styleElement.textContent = Array.from(registry.rules.values(), (entry) => entry.rule).join(\n \"\\n\",\n );\n }\n }\n\n return className;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/_internal/style.ts"],"sourcesContent":["import * as Askr from \"@askrjs/askr\";\n\nconst cssPropertyNameCache = new Map<string, string>();\nconst MAX_PROPERTY_CACHE = 256;\n\nconst CSS_UNSAFE_RE = /[{}<>\\\\]/;\nconst CSS_URI_SCHEME_RE = /(?:^|[\\s(,])([a-z][a-z0-9+.-]*):/i;\nconst CSS_FUNCTION_NAME_RE = /([a-z-][a-z0-9-]*)\\s*\\(/gi;\nconst CSS_ALLOWED_FUNCTIONS = new Set([\n \"var\",\n \"calc\",\n \"min\",\n \"max\",\n \"clamp\",\n \"rgb\",\n \"rgba\",\n \"hsl\",\n \"hsla\",\n \"lab\",\n \"lch\",\n \"oklab\",\n \"oklch\",\n \"color\",\n \"color-mix\",\n \"translate\",\n \"translatex\",\n \"translatey\",\n \"translatez\",\n \"scale\",\n \"scalex\",\n \"scaley\",\n \"scalez\",\n \"rotate\",\n \"rotatex\",\n \"rotatey\",\n \"rotatez\",\n \"skew\",\n \"skewx\",\n \"skewy\",\n \"matrix\",\n \"matrix3d\",\n \"linear-gradient\",\n \"radial-gradient\",\n \"conic-gradient\",\n \"repeating-linear-gradient\",\n \"repeating-radial-gradient\",\n \"repeating-conic-gradient\",\n \"cubic-bezier\",\n \"steps\",\n]);\n\nfunction isSafeCssPropertyName(name: string): boolean {\n if (name.startsWith(\"--\")) return /^--[a-zA-Z0-9_-]+$/.test(name);\n return /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(name);\n}\n\nfunction isSafeCssValue(value: string): boolean {\n if (CSS_UNSAFE_RE.test(value) || CSS_URI_SCHEME_RE.test(value)) return false;\n\n for (const match of value.matchAll(CSS_FUNCTION_NAME_RE)) {\n if (!CSS_ALLOWED_FUNCTIONS.has(match[1]!.toLowerCase())) return false;\n }\n\n return true;\n}\n\nfunction splitCssDeclarations(value: string): string[] {\n const declarations: string[] = [];\n let start = 0;\n let depth = 0;\n let quote: string | undefined;\n\n for (let index = 0; index < value.length; index += 1) {\n const char = value[index]!;\n if (quote) {\n if (char === quote && value[index - 1] !== \"\\\\\") quote = undefined;\n continue;\n }\n if (char === '\"' || char === \"'\") {\n quote = char;\n continue;\n }\n if (char === \"(\") depth += 1;\n if (char === \")\" && depth > 0) depth -= 1;\n if (char === \";\" && depth === 0) {\n declarations.push(value.slice(start, index));\n start = index + 1;\n }\n }\n\n declarations.push(value.slice(start));\n return declarations;\n}\n\nfunction serializeCssString(value: string): string {\n const entries: Array<[string, string]> = [];\n for (const candidate of splitCssDeclarations(value)) {\n const separator = candidate.indexOf(\":\");\n if (separator <= 0) continue;\n const key = candidate.slice(0, separator).trim();\n const cssValue = candidate.slice(separator + 1).trim();\n if (key && cssValue) entries.push([key, cssValue]);\n }\n return serializeCssDeclarations(Object.fromEntries(entries));\n}\n\nfunction cssPropertyName(name: string): string {\n let cached = cssPropertyNameCache.get(name);\n if (cached !== undefined) {\n return cached;\n }\n\n let result = \"\";\n\n for (let index = 0; index < name.length; index += 1) {\n const code = name.charCodeAt(index);\n\n if (code >= 65 && code <= 90) {\n result += `-${String.fromCharCode(code + 32)}`;\n } else {\n result += name[index];\n }\n }\n\n if (cssPropertyNameCache.size < MAX_PROPERTY_CACHE) {\n cssPropertyNameCache.set(name, result);\n }\n return result;\n}\n\nexport function serializeCssDeclarations(styles: Record<string, unknown>): string {\n const keys = Object.keys(styles);\n let result = \"\";\n\n for (const key of keys) {\n const value = styles[key];\n if (value === undefined || value === null) {\n continue;\n }\n\n const rawProperty = key.trim();\n if (!isSafeCssPropertyName(rawProperty)) {\n continue;\n }\n const property = cssPropertyName(rawProperty).trim();\n const cssValue = String(value).trim();\n if (!cssValue || !isSafeCssValue(cssValue)) {\n continue;\n }\n\n const declaration = `${property}:${cssValue}`;\n result = result ? `${result};${declaration}` : declaration;\n }\n\n return result;\n}\n\nexport function mergeCssVar(style: unknown, name: string, value: string): string {\n const decl = `${name}:${value}`;\n\n if (typeof style === \"string\") {\n const trimmed = style.trim();\n return trimmed ? `${trimmed};${decl}` : decl;\n }\n\n if (style && typeof style === \"object\") {\n const entries = serializeCssDeclarations(style as Record<string, unknown>);\n return entries ? `${entries};${decl}` : decl;\n }\n\n return decl;\n}\n\nconst STYLE_REGISTRY_ATTR = \"data-askr-style-registry\";\nconst STYLE_CLASS_PREFIX = \"ak-style-\";\nconst MAX_STYLE_RULES = 512;\nconst MAX_SSR_STYLE_CACHE = 4096;\n\ntype StyleRule = {\n className: string;\n declarations: string;\n rule: string;\n};\n\nconst styleRulesByClass = new Map<string, StyleRule>();\ntype StyleRegistry = {\n element: HTMLStyleElement;\n ruleCount: number;\n rules: Map<string, StyleRule>;\n};\nconst registries = new WeakMap<Document, Map<string, StyleRegistry>>();\nfunction countRegisteredRules(value: string | null): number {\n return value?.match(/\\.ak-style-[a-z0-9]+\\{/g)?.length ?? 0;\n}\n\nfunction styleClassName(declarations: string): string {\n let first = 0xdeadbeef ^ declarations.length;\n let second = 0x41c6ce57 ^ declarations.length;\n\n for (let index = 0; index < declarations.length; index += 1) {\n const code = declarations.charCodeAt(index);\n first = Math.imul(first ^ code, 2_654_435_761);\n second = Math.imul(second ^ code, 1_597_334_677);\n }\n\n first =\n Math.imul(first ^ (first >>> 16), 2_246_822_507) ^\n Math.imul(second ^ (second >>> 13), 3_266_489_909);\n second =\n Math.imul(second ^ (second >>> 16), 2_246_822_507) ^\n Math.imul(first ^ (first >>> 13), 3_266_489_909);\n\n return `${STYLE_CLASS_PREFIX}${(second >>> 0).toString(36)}${(first >>> 0).toString(36)}`;\n}\n\nfunction escapeStyleRawText(value: string): string {\n return value.replace(/<\\//g, \"<\\\\/\");\n}\n\nfunction styleRuleFor(declarations: string): StyleRule {\n const className = styleClassName(declarations);\n const existing = styleRulesByClass.get(className);\n if (existing) {\n if (existing.declarations !== declarations) {\n throw new RangeError(\"Theme style class collision detected.\");\n }\n return existing;\n }\n\n const entry = {\n className,\n declarations,\n rule: `.${className}{${escapeStyleRawText(declarations)}}`,\n };\n return entry;\n}\n\nfunction rememberStyleRule(entry: StyleRule): void {\n styleRulesByClass.delete(entry.className);\n styleRulesByClass.set(entry.className, entry);\n while (styleRulesByClass.size > MAX_SSR_STYLE_CACHE) {\n const oldest = styleRulesByClass.keys().next().value;\n if (oldest === undefined) break;\n styleRulesByClass.delete(oldest);\n }\n}\n\nfunction registerSSRStyle(entry: StyleRule): void {\n const register = (\n Askr as typeof Askr & {\n registerSSRStyle?: (id: string, cssText: string) => void;\n }\n ).registerSSRStyle;\n register?.(entry.className, entry.rule);\n}\n\nfunction ensureStyleRegistry(nonce: string | undefined): StyleRegistry | null {\n if (typeof document === \"undefined\") return null;\n const key = nonce ?? \"\";\n let documentRegistries = registries.get(document);\n if (!documentRegistries) {\n documentRegistries = new Map();\n registries.set(document, documentRegistries);\n }\n const current = documentRegistries.get(key);\n if (current?.element.isConnected) return current;\n\n const styleElement =\n Array.from(document.querySelectorAll<HTMLStyleElement>(`style[${STYLE_REGISTRY_ATTR}]`)).find(\n (element) => (element.nonce || undefined) === nonce,\n ) ?? document.createElement(\"style\");\n if (!styleElement.isConnected) {\n styleElement.setAttribute(STYLE_REGISTRY_ATTR, \"true\");\n if (nonce !== undefined) styleElement.nonce = nonce;\n (document.head ?? document.documentElement).append(styleElement);\n }\n const registry: StyleRegistry = {\n element: styleElement,\n ruleCount: countRegisteredRules(styleElement.textContent),\n rules: new Map(),\n };\n documentRegistries.set(key, registry);\n return registry;\n}\n\nfunction normalizeDeclarations(declarations: string): string {\n return serializeCssString(declarations);\n}\n\nexport function styleDeclarationsToClass(declarations: string | undefined): string | undefined {\n if (typeof declarations !== \"string\") return undefined;\n\n const normalized = normalizeDeclarations(declarations);\n if (!normalized) return undefined;\n\n const entry = styleRuleFor(normalized);\n const nonce = Askr.cspNonce();\n const registry = ensureStyleRegistry(nonce);\n const registered = registry?.rules.get(normalized);\n if (registered) {\n registerSSRStyle(registered);\n return registered.className;\n }\n\n if (registry) {\n if (!registry.rules.has(normalized) && !registry.element.textContent?.includes(entry.rule)) {\n if (registry.ruleCount >= MAX_STYLE_RULES) {\n throw new RangeError(\"Theme style registry capacity exceeded.\");\n }\n }\n if (!registry.element.textContent?.includes(entry.rule)) {\n registry.element.append(entry.rule, \"\\n\");\n registry.ruleCount += 1;\n }\n registry.rules.set(normalized, entry);\n }\n\n rememberStyleRule(entry);\n registerSSRStyle(entry);\n\n return entry.className;\n}\n\nexport function styleRulesForHtml(html: string): string[] {\n const rules = new Map<string, string>();\n const classAttributePattern = /\\sclass=(?:\"([^\"]*)\"|'([^']*)')/g;\n\n for (const attribute of html.matchAll(classAttributePattern)) {\n const value = attribute[1] ?? attribute[2] ?? \"\";\n for (const className of value.split(/\\s+/)) {\n const entry = styleRulesByClass.get(className);\n if (entry) rules.set(className, entry.rule);\n if (rules.size > MAX_STYLE_RULES) {\n throw new RangeError(\"Theme style registry capacity exceeded.\");\n }\n }\n }\n\n return Array.from(rules.values());\n}\n"],"mappings":"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"}
package/dist/components/alert/alert.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { AlertProps } from "./alert.types.js";
2
+ import { JSX } from "@askrjs/askr/jsx-runtime";
2
3
  //#region src/components/alert/alert.d.ts
3
4
  declare function Alert(props: AlertProps): JSX.Element;
4
5
  //#endregion
package/dist/components/alert/alert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import { classes } from \"../_internal/classes\";\nimport { Close } from \"../close\";\nimport type { AlertProps } from \"./alert.types\";\n\nfunction resolveAlertRole(variant: AlertProps[\"variant\"] | undefined): \"alert\" | \"status\" {\n if (variant === \"danger\" || variant === \"warning\") {\n return \"alert\";\n }\n\n return \"status\";\n}\n\nexport function Alert(props: AlertProps): JSX.Element {\n const {\n actions,\n children,\n class: className,\n description,\n dismissLabel = \"Dismiss alert\",\n icon,\n onDismiss,\n ref,\n title,\n titleAs: TitleTag = \"h3\",\n variant = \"default\",\n role,\n ...rest\n } = props;\n const shouldRenderDismiss = onDismiss !== undefined;\n const resolvedRole = role ?? resolveAlertRole(variant);\n const hasVariant = variant !== \"default\";\n\n return (\n <div\n {...rest}\n ref={ref}\n class={classes(\n \"alert\",\n hasVariant ? `alert-${variant}` : undefined,\n shouldRenderDismiss ? \"alert-dismissible\" : undefined,\n className,\n )}\n data-dismissible={shouldRenderDismiss ? \"true\" : undefined}\n data-slot=\"alert\"\n data-variant={hasVariant ? variant : undefined}\n role={resolvedRole as string}\n >\n {icon !== undefined ? (\n <div aria-hidden=\"true\" class=\"alert-icon\" data-slot=\"alert-icon\">\n {icon}\n </div>\n ) : null}\n\n <div class=\"alert-content\" data-slot=\"alert-content\">\n {title !== undefined ? (\n <TitleTag class=\"alert-title\" data-slot=\"alert-title\">\n {title}\n </TitleTag>\n ) : null}\n\n {description !== undefined ? (\n <p class=\"alert-description\" data-slot=\"alert-description\">\n {description}\n </p>\n ) : null}\n\n {children}\n\n {actions !== undefined ? (\n <div class=\"alert-actions\" data-slot=\"alert-actions\">\n {actions}\n </div>\n ) : null}\n </div>\n\n {shouldRenderDismiss ? (\n <div class=\"alert-close\" data-slot=\"alert-close\">\n <Close label={dismissLabel} onPress={onDismiss} />\n </div>\n ) : null}\n </div>\n );\n}\n"],"mappings":";;;;AAIA,SAAS,iBAAiB,SAAgE;CACxF,IAAI,YAAY,YAAY,YAAY,WACtC,OAAO;CAGT,OAAO;AACT;AAEA,SAAgB,MAAM,OAAgC;CACpD,MAAM,EACJ,SACA,UACA,OAAO,WACP,aACA,eAAe,iBACf,MACA,WACA,KACA,OACA,SAAS,WAAW,MACpB,UAAU,WACV,MACA,GAAG,SACD;CACJ,MAAM,sBAAsB,cAAc,KAAA;CAC1C,MAAM,eAAe,QAAQ,iBAAiB,OAAO;CACrD,MAAM,aAAa,YAAY;CAE/B,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,OAAO,QACL,SACA,aAAa,SAAS,YAAY,KAAA,GAClC,sBAAsB,sBAAsB,KAAA,GAC5C,SACF;EACA,oBAAkB,sBAAsB,SAAS,KAAA;EACjD,aAAU;EACV,gBAAc,aAAa,UAAU,KAAA;EACrC,MAAM;YAZR;GAcG,SAAS,KAAA,IACR,oBAAC,OAAD;IAAK,eAAY;IAAO,OAAM;IAAa,aAAU;cAClD;GACE,CAAA,IACH;GAEJ,qBAAC,OAAD;IAAK,OAAM;IAAgB,aAAU;cAArC;KACG,UAAU,KAAA,IACT,oBAAC,UAAD;MAAU,OAAM;MAAc,aAAU;gBACrC;KACO,CAAA,IACR;KAEH,gBAAgB,KAAA,IACf,oBAAC,KAAD;MAAG,OAAM;MAAoB,aAAU;gBACpC;KACA,CAAA,IACD;KAEH;KAEA,YAAY,KAAA,IACX,oBAAC,OAAD;MAAK,OAAM;MAAgB,aAAU;gBAClC;KACE,CAAA,IACH;IACD;;GAEJ,sBACC,oBAAC,OAAD;IAAK,OAAM;IAAc,aAAU;cACjC,oBAAC,OAAD;KAAO,OAAO;KAAc,SAAS;IAAY,CAAA;GAC9C,CAAA,IACH;EACD;;AAET"}
1
+ {"version":3,"file":"alert.js","names":[],"sources":["../../../src/components/alert/alert.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { classes } from \"../_internal/classes\";\nimport { Close } from \"../close\";\nimport type { AlertProps } from \"./alert.types\";\n\nfunction resolveAlertRole(variant: AlertProps[\"variant\"] | undefined): \"alert\" | \"status\" {\n if (variant === \"danger\" || variant === \"warning\") {\n return \"alert\";\n }\n\n return \"status\";\n}\n\nexport function Alert(props: AlertProps): JSX.Element {\n const {\n actions,\n children,\n class: className,\n description,\n dismissLabel = \"Dismiss alert\",\n icon,\n onDismiss,\n ref,\n title,\n titleAs: TitleTag = \"h3\",\n variant = \"default\",\n role,\n ...rest\n } = props;\n const shouldRenderDismiss = onDismiss !== undefined;\n const resolvedRole = role ?? resolveAlertRole(variant);\n const hasVariant = variant !== \"default\";\n\n return (\n <div\n {...rest}\n ref={ref}\n class={classes(\n \"alert\",\n hasVariant ? `alert-${variant}` : undefined,\n shouldRenderDismiss ? \"alert-dismissible\" : undefined,\n className,\n )}\n data-dismissible={shouldRenderDismiss ? \"true\" : undefined}\n data-slot=\"alert\"\n data-variant={hasVariant ? variant : undefined}\n role={resolvedRole as string}\n >\n {icon !== undefined ? (\n <div aria-hidden=\"true\" class=\"alert-icon\" data-slot=\"alert-icon\">\n {icon}\n </div>\n ) : null}\n\n <div class=\"alert-content\" data-slot=\"alert-content\">\n {title !== undefined ? (\n <TitleTag class=\"alert-title\" data-slot=\"alert-title\">\n {title}\n </TitleTag>\n ) : null}\n\n {description !== undefined ? (\n <p class=\"alert-description\" data-slot=\"alert-description\">\n {description}\n </p>\n ) : null}\n\n {children}\n\n {actions !== undefined ? (\n <div class=\"alert-actions\" data-slot=\"alert-actions\">\n {actions}\n </div>\n ) : null}\n </div>\n\n {shouldRenderDismiss ? (\n <div class=\"alert-close\" data-slot=\"alert-close\">\n <Close label={dismissLabel} onPress={onDismiss} />\n </div>\n ) : null}\n </div>\n );\n}\n"],"mappings":";;;;AAKA,SAAS,iBAAiB,SAAgE;CACxF,IAAI,YAAY,YAAY,YAAY,WACtC,OAAO;CAGT,OAAO;AACT;AAEA,SAAgB,MAAM,OAAgC;CACpD,MAAM,EACJ,SACA,UACA,OAAO,WACP,aACA,eAAe,iBACf,MACA,WACA,KACA,OACA,SAAS,WAAW,MACpB,UAAU,WACV,MACA,GAAG,SACD;CACJ,MAAM,sBAAsB,cAAc,KAAA;CAC1C,MAAM,eAAe,QAAQ,iBAAiB,OAAO;CACrD,MAAM,aAAa,YAAY;CAE/B,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,OAAO,QACL,SACA,aAAa,SAAS,YAAY,KAAA,GAClC,sBAAsB,sBAAsB,KAAA,GAC5C,SACF;EACA,oBAAkB,sBAAsB,SAAS,KAAA;EACjD,aAAU;EACV,gBAAc,aAAa,UAAU,KAAA;EACrC,MAAM;YAZR;GAcG,SAAS,KAAA,IACR,oBAAC,OAAD;IAAK,eAAY;IAAO,OAAM;IAAa,aAAU;cAClD;GACE,CAAA,IACH;GAEJ,qBAAC,OAAD;IAAK,OAAM;IAAgB,aAAU;cAArC;KACG,UAAU,KAAA,IACT,oBAAC,UAAD;MAAU,OAAM;MAAc,aAAU;gBACrC;KACO,CAAA,IACR;KAEH,gBAAgB,KAAA,IACf,oBAAC,KAAD;MAAG,OAAM;MAAoB,aAAU;gBACpC;KACA,CAAA,IACD;KAEH;KAEA,YAAY,KAAA,IACX,oBAAC,OAAD;MAAK,OAAM;MAAgB,aAAU;gBAClC;KACE,CAAA,IACH;IACD;;GAEJ,sBACC,oBAAC,OAAD;IAAK,OAAM;IAAc,aAAU;cACjC,oBAAC,OAAD;KAAO,OAAO;KAAc,SAAS;IAAY,CAAA;GAC9C,CAAA,IACH;EACD;;AAET"}
package/dist/components/alert/alert.types.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { JSX } from "@askrjs/askr/jsx-runtime";
1
2
  import { Ref } from "@askrjs/askr/foundations/utilities";
2
3
  //#region src/components/alert/alert.types.d.ts
3
4
  type AlertVariant = "default" | "info" | "success" | "warning" | "danger";