entasis 0.4.1 → 0.6.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 (180) hide show
  1. package/README.md +1 -0
  2. package/dist/attachments/spinnerOverlay.theme.d.ts +2 -36
  3. package/dist/components/AIAskUserQuestion/aiAskUserQuestion.theme.d.ts +2 -30
  4. package/dist/components/AIChat/aiChat.theme.d.ts +2 -14
  5. package/dist/components/AIComposer/aiComposer.theme.d.ts +2 -50
  6. package/dist/components/AIContext/aiContext.theme.d.ts +2 -37
  7. package/dist/components/AIConversation/aiConversation.theme.d.ts +2 -4
  8. package/dist/components/AIFilePreview/aiFilePreview.theme.d.ts +2 -17
  9. package/dist/components/AIMarker/aiMarker.theme.d.ts +2 -18
  10. package/dist/components/AIMessage/aiMessage.theme.d.ts +2 -72
  11. package/dist/components/AIMessageActions/aiMessageActions.theme.d.ts +2 -29
  12. package/dist/components/AIModelSelector/aiModelSelector.theme.d.ts +2 -25
  13. package/dist/components/AIReasoning/aiReasoning.theme.d.ts +2 -9
  14. package/dist/components/AISuggestion/aiSuggestion.theme.d.ts +2 -6
  15. package/dist/components/AIThread/aiThread.theme.d.ts +2 -35
  16. package/dist/components/AIThreadToc/aiThreadToc.theme.d.ts +2 -44
  17. package/dist/components/AITool/aiTool.mcp.d.ts +1 -1
  18. package/dist/components/AITool/aiTool.mcp.js +1 -1
  19. package/dist/components/AITool/aiTool.theme.d.ts +2 -170
  20. package/dist/components/AITool/aiTool.theme.js +14 -12
  21. package/dist/components/Accordion/accordion.theme.d.ts +2 -135
  22. package/dist/components/Alert/alert.theme.d.ts +2 -88
  23. package/dist/components/AppShell/appShell.theme.d.ts +2 -34
  24. package/dist/components/AspectRatio/aspectRatio.theme.d.ts +2 -5
  25. package/dist/components/AudioPlayer/audioPlayer.theme.d.ts +2 -179
  26. package/dist/components/Avatar/avatar.theme.d.ts +2 -38
  27. package/dist/components/Avatar/avatarGroup.theme.d.ts +2 -17
  28. package/dist/components/Breadcrumbs/breadcrumbs.theme.d.ts +2 -33
  29. package/dist/components/Button/Button.svelte +15 -13
  30. package/dist/components/Button/button.theme.d.ts +2 -55
  31. package/dist/components/ButtonGroup/buttonGroup.theme.d.ts +2 -4
  32. package/dist/components/Card/card.theme.d.ts +2 -119
  33. package/dist/components/Carousel/carousel.theme.d.ts +2 -73
  34. package/dist/components/Chart/chart.theme.d.ts +2 -24
  35. package/dist/components/Chip/chip.theme.d.ts +2 -56
  36. package/dist/components/Code/code.theme.d.ts +2 -9
  37. package/dist/components/Collapsible/collapsible.theme.d.ts +2 -44
  38. package/dist/components/Command/command.theme.d.ts +2 -103
  39. package/dist/components/Confirmation/confirmation.theme.d.ts +2 -10
  40. package/dist/components/ContextMenu/contextMenu.theme.d.ts +2 -10
  41. package/dist/components/DataTable/dataTable.theme.d.ts +2 -160
  42. package/dist/components/Dialog/Dialog.svelte +16 -0
  43. package/dist/components/Dialog/dialog.mcp.d.ts +1 -1
  44. package/dist/components/Dialog/dialog.mcp.js +2 -1
  45. package/dist/components/Dialog/dialog.props.d.ts +5 -0
  46. package/dist/components/Dialog/dialog.theme.d.ts +2 -137
  47. package/dist/components/Dialog/dialog.theme.js +12 -8
  48. package/dist/components/Diff/diff.theme.d.ts +2 -6
  49. package/dist/components/DocumentViewer/documentViewer.theme.d.ts +2 -87
  50. package/dist/components/Empty/empty.theme.d.ts +2 -71
  51. package/dist/components/EventCalendar/eventCalendar.theme.d.ts +2 -3171
  52. package/dist/components/FloatingWindow/floatingWindow.theme.d.ts +2 -96
  53. package/dist/components/Form/Calendar/CalendarPrimitive.svelte.d.ts +2 -63
  54. package/dist/components/Form/Calendar/calendar.theme.d.ts +2 -63
  55. package/dist/components/Form/CheckboxesInput/checkboxesInput.theme.d.ts +2 -100
  56. package/dist/components/Form/ColorInput/colorInput.theme.d.ts +2 -32
  57. package/dist/components/Form/ColorPicker/colorPicker.theme.d.ts +2 -127
  58. package/dist/components/Form/Combobox/combobox.theme.d.ts +2 -50
  59. package/dist/components/Form/DateInput/dateInput.theme.d.ts +2 -26
  60. package/dist/components/Form/DateSelector/dateSelector.theme.d.ts +2 -17
  61. package/dist/components/Form/Field/field.theme.d.ts +2 -146
  62. package/dist/components/Form/File/fileInput.theme.d.ts +2 -41
  63. package/dist/components/Form/Form/form.state.svelte.d.ts +4 -4
  64. package/dist/components/Form/Form/form.theme.d.ts +2 -129
  65. package/dist/components/Form/Form/visibility.d.ts +54 -54
  66. package/dist/components/Form/KeyValueInput/keyValueInput.theme.d.ts +2 -50
  67. package/dist/components/Form/MultiStepForm/multiStepForm.state.svelte.d.ts +4 -4
  68. package/dist/components/Form/MultiStepForm/multiStepForm.theme.d.ts +2 -25
  69. package/dist/components/Form/NumberInput/numberInput.theme.d.ts +2 -25
  70. package/dist/components/Form/PasswordInput/passwordInput.theme.d.ts +2 -25
  71. package/dist/components/Form/PhoneInput/phoneInput.theme.d.ts +2 -112
  72. package/dist/components/Form/PinInput/pinInput.theme.d.ts +2 -38
  73. package/dist/components/Form/RadioInput/radioInput.theme.d.ts +2 -94
  74. package/dist/components/Form/Select/select.theme.d.ts +2 -71
  75. package/dist/components/Form/Slider/slider.theme.d.ts +2 -266
  76. package/dist/components/Form/Switch/switch.theme.d.ts +2 -40
  77. package/dist/components/Form/TagGroup/tagGroup.theme.d.ts +2 -19
  78. package/dist/components/Form/TagsInput/tagsInput.theme.d.ts +2 -53
  79. package/dist/components/Form/TextArea/textArea.theme.d.ts +2 -25
  80. package/dist/components/Form/TextInput/textInput.theme.d.ts +2 -25
  81. package/dist/components/Form/TimeInput/timeInput.theme.d.ts +2 -47
  82. package/dist/components/Form/VoiceInput/voiceInput.theme.d.ts +2 -155
  83. package/dist/components/GanttChart/ganttChart.theme.d.ts +2 -2478
  84. package/dist/components/Globe/globe.theme.d.ts +2 -13
  85. package/dist/components/Grid/grid.theme.d.ts +2 -18
  86. package/dist/components/Grid/gridSpan.theme.d.ts +2 -4
  87. package/dist/components/Heading/heading.theme.d.ts +2 -41
  88. package/dist/components/Hitbox/hitbox.theme.d.ts +2 -10
  89. package/dist/components/HoverCard/hoverCard.theme.d.ts +11 -27
  90. package/dist/components/HoverCard/hoverCard.theme.js +9 -4
  91. package/dist/components/ImageGallery/imageGallery.theme.d.ts +2 -6
  92. package/dist/components/ImageZoom/imageZoom.theme.d.ts +2 -16
  93. package/dist/components/Kanban/kanban.theme.d.ts +2 -60
  94. package/dist/components/Kbd/kbd.theme.d.ts +2 -33
  95. package/dist/components/Layout/layoutSpacing.d.ts +1 -1
  96. package/dist/components/LinkPreview/linkPreview.theme.d.ts +2 -58
  97. package/dist/components/Map/map.theme.d.ts +2 -14
  98. package/dist/components/Markdown/markdown.theme.d.ts +2 -10
  99. package/dist/components/Marquee/marquee.theme.d.ts +2 -37
  100. package/dist/components/MediaVolume/mediaVolumeControl.theme.d.ts +2 -22
  101. package/dist/components/Menu/menu.theme.d.ts +2 -12
  102. package/dist/components/MenuBar/menuBar.theme.d.ts +2 -16
  103. package/dist/components/MenuOption/menuOption.theme.d.ts +2 -75
  104. package/dist/components/Mermaid/mermaid.theme.d.ts +2 -15
  105. package/dist/components/MetadataList/metadataList.theme.d.ts +2 -97
  106. package/dist/components/Meter/meter.theme.d.ts +2 -111
  107. package/dist/components/MiniCalendar/miniCalendar.theme.d.ts +2 -71
  108. package/dist/components/NetworkIndicator/networkIndicator.theme.d.ts +2 -41
  109. package/dist/components/Overlay/overlay.theme.d.ts +2 -92
  110. package/dist/components/PageShell/pageShell.theme.d.ts +2 -36
  111. package/dist/components/Pagination/pagination.theme.d.ts +2 -108
  112. package/dist/components/Popover/popover.theme.d.ts +2 -40
  113. package/dist/components/PopupMenu/popupMenu.theme.d.ts +2 -4
  114. package/dist/components/ProgressCircle/progressCircle.theme.d.ts +2 -22
  115. package/dist/components/QRCode/qrCode.theme.d.ts +2 -19
  116. package/dist/components/Rating/rating.theme.d.ts +2 -37
  117. package/dist/components/Resizable/resizable.theme.d.ts +2 -65
  118. package/dist/components/RichTextInput/richTextInput.theme.d.ts +2 -167
  119. package/dist/components/ScrollArea/scrollArea.theme.d.ts +2 -15
  120. package/dist/components/SegmentedControl/segmentedControl.theme.d.ts +2 -76
  121. package/dist/components/SelectionMenu/selectionMenu.theme.d.ts +2 -5
  122. package/dist/components/Separator/separator.theme.d.ts +2 -33
  123. package/dist/components/Sidebar/Sidebar.svelte +8 -2
  124. package/dist/components/Sidebar/SidebarAction.svelte +2 -2
  125. package/dist/components/Sidebar/SidebarActivityBar.svelte +3 -3
  126. package/dist/components/Sidebar/SidebarDesktopShell.svelte +3 -0
  127. package/dist/components/Sidebar/SidebarDesktopShell.svelte.d.ts +1 -0
  128. package/dist/components/Sidebar/SidebarGroup.svelte +6 -6
  129. package/dist/components/Sidebar/SidebarMenuButton.svelte +15 -18
  130. package/dist/components/Sidebar/SidebarMenuItem.svelte +15 -21
  131. package/dist/components/Sidebar/SidebarMenuSubItem.svelte +5 -6
  132. package/dist/components/Sidebar/SidebarMobileDrawer.svelte +3 -1
  133. package/dist/components/Sidebar/SidebarMobileDrawer.svelte.d.ts +1 -0
  134. package/dist/components/Sidebar/SidebarPanel.svelte +3 -6
  135. package/dist/components/Sidebar/SidebarTreeNode.svelte +2 -2
  136. package/dist/components/Sidebar/sidebar.mcp.d.ts +1 -1
  137. package/dist/components/Sidebar/sidebar.mcp.js +1 -0
  138. package/dist/components/Sidebar/sidebar.props.d.ts +2 -0
  139. package/dist/components/Sidebar/sidebar.theme.d.ts +116 -540
  140. package/dist/components/Sidebar/sidebar.theme.js +73 -67
  141. package/dist/components/Skeleton/skeleton.theme.d.ts +2 -14
  142. package/dist/components/SortableList/sortableList.theme.d.ts +2 -43
  143. package/dist/components/Spinner/spinner.theme.d.ts +2 -41
  144. package/dist/components/SpinnerText/spinnerText.theme.d.ts +2 -49
  145. package/dist/components/Stack/stack.theme.d.ts +2 -12
  146. package/dist/components/Stat/stat.theme.d.ts +2 -132
  147. package/dist/components/Stepper/stepper.theme.d.ts +2 -22
  148. package/dist/components/Tabbar/tabbar.theme.d.ts +2 -110
  149. package/dist/components/Table/table.theme.d.ts +2 -42
  150. package/dist/components/TableOfContents/tableOfContents.theme.d.ts +2 -28
  151. package/dist/components/Tabs/tabs.theme.d.ts +2 -20
  152. package/dist/components/Theme/Theme.svelte +4 -4
  153. package/dist/components/Theme/theme.designTokens.d.ts +10 -0
  154. package/dist/components/Theme/theme.designTokens.js +14 -1
  155. package/dist/components/Theme/theme.state.svelte.js +3 -3
  156. package/dist/components/Timeline/timeline.theme.d.ts +2 -226
  157. package/dist/components/Toast/toast.theme.d.ts +2 -236
  158. package/dist/components/ToggleButton/toggleButton.theme.d.ts +2 -57
  159. package/dist/components/ToggleButtonGroup/toggleButtonGroup.theme.d.ts +2 -9
  160. package/dist/components/ToggleMenu/toggleMenu.theme.d.ts +2 -7
  161. package/dist/components/Tooltip/tooltip.theme.d.ts +2 -25
  162. package/dist/components/Tree/tree.theme.d.ts +2 -7
  163. package/dist/components/VideoPlayer/videoPlayer.theme.d.ts +2 -145
  164. package/dist/generated/componentContract.d.ts +1 -1
  165. package/dist/generated/componentContract.js +2 -0
  166. package/dist/generated/componentMcpRegistry.d.ts +5 -5
  167. package/dist/tailwind/colors.js +7 -1
  168. package/dist/tailwind/global.js +4 -1
  169. package/dist/tailwind/spacing.d.ts +13 -0
  170. package/dist/tailwind/spacing.js +5 -2
  171. package/dist/tailwind/theme.mcp.d.ts +1 -1
  172. package/dist/tailwind/theme.mcp.js +1 -1
  173. package/dist/utils/cva/cva.mcp.d.ts +1 -1
  174. package/dist/utils/cva/cva.mcp.js +1 -1
  175. package/dist/utils/cva/index.d.ts +1 -1
  176. package/dist/utils/cva/merge.d.ts +108 -0
  177. package/dist/utils/cva/merge.js +6 -2
  178. package/dist/utils/cva/theme.d.ts +36 -1
  179. package/dist/utils/cva/theme.js +25 -2
  180. package/package.json +1 -1
@@ -19,6 +19,8 @@ const activeVariants = {
19
19
  // The `--sidebar-*` properties are INTERNAL: one `size` step publishes the icon, media and
20
20
  // compact-media dimensions the rows read back, so every part scales together. A consumer
21
21
  // changes `size`, never one of these properties.
22
+ // Icon and leading-media sizes. `size` sets them by default; `iconSize`, declared after it on the
23
+ // panel parts, publishes the same variables and wins when a consumer sets it on its own.
22
24
  const sidebarSizeVariables = {
23
25
  small: '[--sidebar-icon-size:0.875rem] [--sidebar-media-size:1.75rem] [--sidebar-compact-media-size:1rem]',
24
26
  normal: '[--sidebar-icon-size:1rem] [--sidebar-media-size:2rem] [--sidebar-compact-media-size:1.25rem]',
@@ -63,6 +65,7 @@ const defaultPanel = cva({
63
65
  positioned: 'w-full'
64
66
  },
65
67
  size: sidebarSizeVariables,
68
+ iconSize: sidebarSizeVariables,
66
69
  density: sidebarDensityVariables
67
70
  },
68
71
  compoundVariants: [
@@ -126,7 +129,7 @@ const defaultGroupLabel = cva({
126
129
  true: 'state-layer hover:text-neutral focus-visible:ring-2 focus-visible:ring-focus/50',
127
130
  false: null
128
131
  },
129
- componentSize: {
132
+ size: {
130
133
  small: 'h-control-sm text-xs group-data-[collapsible=icon]:-mt-layout-md [&>svg]:size-icon-sm',
131
134
  normal: 'h-control-md text-sm group-data-[collapsible=icon]:-mt-layout-lg [&>svg]:size-icon-md',
132
135
  large: 'h-control-lg text-sm group-data-[collapsible=icon]:-mt-layout-lg [&>svg]:size-icon-lg'
@@ -139,7 +142,7 @@ const defaultGroupLabel = cva({
139
142
  },
140
143
  defaultVariants: {
141
144
  interactive: false,
142
- componentSize: 'normal',
145
+ size: 'normal',
143
146
  density: 'normal'
144
147
  }
145
148
  });
@@ -148,7 +151,7 @@ const defaultGroupLabel = cva({
148
151
  const defaultGroupAction = cva({
149
152
  base: 'absolute flex items-center gap-micro group-data-[collapsible=icon]:hidden',
150
153
  variants: {
151
- componentSize: {
154
+ size: {
152
155
  // Centred on the label row's own height token, then pulled up by half its box, so the
153
156
  // action stays on the label's midline whatever the spacing or control scale is.
154
157
  small: 'top-[calc(var(--sidebar-group-padding)+var(--control-height-sm)/2)] -translate-y-1/2',
@@ -171,7 +174,7 @@ const defaultGroupAction = cva({
171
174
  { density: 'comfortable', hasToggle: true, class: 'right-12' }
172
175
  ],
173
176
  defaultVariants: {
174
- componentSize: 'normal',
177
+ size: 'normal',
175
178
  density: 'normal',
176
179
  hasToggle: false
177
180
  }
@@ -197,7 +200,7 @@ const defaultMenuButton = cva({
197
200
  default: '',
198
201
  outline: 'border border-neutral-muted bg-surface'
199
202
  },
200
- componentSize: {
203
+ size: {
201
204
  small: 'text-xs leading-4 [&_svg]:size-icon-sm',
202
205
  normal: 'text-sm leading-5 [&_svg]:size-icon-md',
203
206
  large: 'text-base leading-6 [&_svg]:size-icon-lg'
@@ -207,29 +210,30 @@ const defaultMenuButton = cva({
207
210
  normal: 'gap-md px-md',
208
211
  comfortable: 'gap-md px-md'
209
212
  },
210
- size: {
211
- default: '',
212
- sm: 'text-xs',
213
- lg: ''
213
+ // itemSize is the row's own scale (a menu entry's `size`); `size` is the Sidebar's.
214
+ itemSize: {
215
+ small: 'text-xs',
216
+ normal: '',
217
+ large: ''
214
218
  }
215
219
  },
216
220
  compoundVariants: [
217
- { componentSize: 'small', size: 'sm', class: 'h-control-sm' },
218
- { componentSize: 'small', size: 'default', class: 'h-control-md' },
219
- { componentSize: 'small', size: 'lg', class: 'h-row-lg' },
220
- { componentSize: 'normal', size: 'sm', class: 'h-control-md' },
221
- { componentSize: 'normal', size: 'default', class: 'h-control-lg' },
222
- { componentSize: 'normal', size: 'lg', class: 'h-14' },
223
- { componentSize: 'large', size: 'sm', class: 'h-control-lg' },
224
- { componentSize: 'large', size: 'default', class: 'h-row-md' },
225
- { componentSize: 'large', size: 'lg', class: 'h-16' }
221
+ { size: 'small', itemSize: 'small', class: 'h-control-sm' },
222
+ { size: 'small', itemSize: 'normal', class: 'h-control-md' },
223
+ { size: 'small', itemSize: 'large', class: 'h-row-lg' },
224
+ { size: 'normal', itemSize: 'small', class: 'h-control-md' },
225
+ { size: 'normal', itemSize: 'normal', class: 'h-control-lg' },
226
+ { size: 'normal', itemSize: 'large', class: 'h-14' },
227
+ { size: 'large', itemSize: 'small', class: 'h-control-lg' },
228
+ { size: 'large', itemSize: 'normal', class: 'h-row-md' },
229
+ { size: 'large', itemSize: 'large', class: 'h-16' }
226
230
  ],
227
231
  defaultVariants: {
228
232
  activeVariant: 'soft',
229
233
  variant: 'default',
230
- componentSize: 'normal',
234
+ size: 'normal',
231
235
  density: 'normal',
232
- size: 'default'
236
+ itemSize: 'normal'
233
237
  }
234
238
  });
235
239
  const defaultMenuLabel = cva({
@@ -238,27 +242,27 @@ const defaultMenuLabel = cva({
238
242
  const defaultMenuSecondary = cva({
239
243
  base: 'truncate text-neutral/70',
240
244
  variants: {
241
- componentSize: {
245
+ size: {
242
246
  small: 'text-xs',
243
247
  normal: 'text-xs',
244
248
  large: 'text-sm'
245
249
  }
246
250
  },
247
251
  defaultVariants: {
248
- componentSize: 'normal'
252
+ size: 'normal'
249
253
  }
250
254
  });
251
255
  const defaultMenuTrailing = cva({
252
256
  base: 'ml-auto shrink-0 opacity-100 transition-[opacity,transform] duration-normal ease-standard group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:translate-x-1 group-data-[collapsible=icon]:opacity-0',
253
257
  variants: {
254
- componentSize: {
258
+ size: {
255
259
  small: '[&>svg]:size-icon-sm',
256
260
  normal: '[&>svg]:size-icon-md',
257
261
  large: '[&>svg]:size-icon-lg'
258
262
  }
259
263
  },
260
264
  defaultVariants: {
261
- componentSize: 'normal'
265
+ size: 'normal'
262
266
  }
263
267
  });
264
268
  const defaultSubMenu = cva({
@@ -291,7 +295,7 @@ const defaultSubButton = cva({
291
295
  base: 'state-layer text-neutral/70 hover:text-neutral flex min-w-0 -translate-x-px items-center overflow-hidden rounded-sm outline-none transition-[background,color,height,padding] duration-normal ease-linear focus-visible:ring-2 focus-visible:ring-focus/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0',
292
296
  variants: {
293
297
  activeVariant: activeVariants,
294
- componentSize: {
298
+ size: {
295
299
  small: 'h-6 text-xs leading-4 [&>svg]:size-icon-sm',
296
300
  normal: 'h-control-sm text-sm leading-5 [&>svg]:size-icon-md',
297
301
  large: 'h-control-md text-base leading-6 [&>svg]:size-icon-lg'
@@ -301,22 +305,23 @@ const defaultSubButton = cva({
301
305
  normal: 'gap-md px-lg',
302
306
  comfortable: 'gap-md px-lg'
303
307
  },
304
- size: {
305
- sm: 'text-xs',
306
- md: ''
308
+ itemSize: {
309
+ small: 'text-xs',
310
+ normal: '',
311
+ large: ''
307
312
  }
308
313
  },
309
314
  defaultVariants: {
310
315
  activeVariant: 'soft',
311
- componentSize: 'normal',
316
+ size: 'normal',
312
317
  density: 'normal',
313
- size: 'md'
318
+ itemSize: 'normal'
314
319
  }
315
320
  });
316
321
  const defaultMenuAction = cva({
317
322
  base: 'state-layer text-neutral hover:text-neutral peer-hover/menu-button:text-neutral absolute top-1/2 flex aspect-square -translate-y-1/2 items-center justify-center rounded-sm p-0 opacity-100 outline-none transition group-data-[collapsible=icon]:hidden focus-visible:ring-2 focus-visible:ring-focus/50 md:opacity-0 group-focus-within/menu-row:opacity-100 group-hover/menu-row:opacity-100 has-[[aria-expanded=true]]:opacity-100 [&>svg]:shrink-0',
318
323
  variants: {
319
- componentSize: {
324
+ size: {
320
325
  small: 'size-4.5 [&>svg]:size-icon-sm',
321
326
  normal: 'size-5 [&>svg]:size-icon-md',
322
327
  large: 'size-6 [&>svg]:size-icon-lg'
@@ -328,7 +333,7 @@ const defaultMenuAction = cva({
328
333
  }
329
334
  },
330
335
  defaultVariants: {
331
- componentSize: 'normal',
336
+ size: 'normal',
332
337
  density: 'normal'
333
338
  }
334
339
  });
@@ -337,14 +342,14 @@ const defaultMenuAction = cva({
337
342
  const defaultActionSlot = cva({
338
343
  base: 'state-layer text-neutral hover:text-neutral flex aspect-square shrink-0 items-center justify-center rounded-sm p-0 outline-none transition focus-visible:ring-2 focus-visible:ring-focus/50 [&>svg]:shrink-0',
339
344
  variants: {
340
- componentSize: {
345
+ size: {
341
346
  small: 'h-control-sm [&>svg]:size-icon-sm',
342
347
  normal: 'h-control-md [&>svg]:size-icon-md',
343
348
  large: 'h-control-lg [&>svg]:size-icon-lg'
344
349
  }
345
350
  },
346
351
  defaultVariants: {
347
- componentSize: 'normal'
352
+ size: 'normal'
348
353
  }
349
354
  });
350
355
  // The leading icon of a menu entry when it carries a role tint or a tile. The tint is the row's
@@ -356,20 +361,20 @@ const defaultMenuIcon = cva({
356
361
  bare: 'text-color',
357
362
  tile: 'bg-color-muted text-color-muted-readable rounded-sm'
358
363
  },
359
- componentSize: {
364
+ size: {
360
365
  small: '',
361
366
  normal: '',
362
367
  large: ''
363
368
  }
364
369
  },
365
370
  compoundVariants: [
366
- { variant: 'tile', componentSize: 'small', class: 'size-icon-lg [&_svg]:size-icon-xs' },
367
- { variant: 'tile', componentSize: 'normal', class: 'size-icon-xl [&_svg]:size-icon-sm' },
368
- { variant: 'tile', componentSize: 'large', class: 'size-icon-xl [&_svg]:size-icon-md' }
371
+ { variant: 'tile', size: 'small', class: 'size-icon-lg [&_svg]:size-icon-xs' },
372
+ { variant: 'tile', size: 'normal', class: 'size-icon-xl [&_svg]:size-icon-sm' },
373
+ { variant: 'tile', size: 'large', class: 'size-icon-xl [&_svg]:size-icon-md' }
369
374
  ],
370
375
  defaultVariants: {
371
376
  variant: 'bare',
372
- componentSize: 'normal'
377
+ size: 'normal'
373
378
  }
374
379
  });
375
380
  // A large menu row that carries its own trailing action: the row and the action are siblings, so
@@ -380,20 +385,20 @@ const defaultButtonRow = cva({
380
385
  const defaultActionTrigger = cva({
381
386
  base: 'flex size-full items-center justify-center rounded-sm bg-transparent outline-none [&>svg]:shrink-0',
382
387
  variants: {
383
- componentSize: {
388
+ size: {
384
389
  small: '[&>svg]:size-icon-sm',
385
390
  normal: '[&>svg]:size-icon-md',
386
391
  large: '[&>svg]:size-icon-lg'
387
392
  }
388
393
  },
389
394
  defaultVariants: {
390
- componentSize: 'normal'
395
+ size: 'normal'
391
396
  }
392
397
  });
393
398
  const defaultBadge = cva({
394
399
  base: 'text-neutral/70 peer-hover/menu-button:text-neutral peer-data-active/menu-button:text-neutral pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center rounded-sm px-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden',
395
400
  variants: {
396
- componentSize: {
401
+ size: {
397
402
  small: 'h-4 min-w-4 text-xs',
398
403
  normal: 'h-5 min-w-5 text-sm',
399
404
  large: 'h-6 min-w-6 text-sm'
@@ -405,14 +410,14 @@ const defaultBadge = cva({
405
410
  }
406
411
  },
407
412
  defaultVariants: {
408
- componentSize: 'normal',
413
+ size: 'normal',
409
414
  density: 'normal'
410
415
  }
411
416
  });
412
417
  const defaultSearchContainer = cva({
413
418
  base: 'relative w-full opacity-100 transition-[height,margin,opacity] duration-normal ease-linear',
414
419
  variants: {
415
- componentSize: {
420
+ size: {
416
421
  small: 'h-control-md',
417
422
  normal: 'h-control-lg',
418
423
  large: 'h-row-md'
@@ -423,7 +428,7 @@ const defaultSearchContainer = cva({
423
428
  }
424
429
  },
425
430
  defaultVariants: {
426
- componentSize: 'normal',
431
+ size: 'normal',
427
432
  collapsed: false
428
433
  }
429
434
  });
@@ -432,7 +437,7 @@ const defaultSearch = cva({
432
437
  variants: {
433
438
  // The left padding clears the absolutely positioned magnifier (its `left` offset plus its
434
439
  // box plus a gap) so the placeholder never starts on top of the icon.
435
- componentSize: {
440
+ size: {
436
441
  small: 'h-control-md pl-layout-md text-xs',
437
442
  normal: 'h-control-lg pl-layout-lg text-sm',
438
443
  large: 'h-row-md pl-layout-xl text-base'
@@ -444,14 +449,14 @@ const defaultSearch = cva({
444
449
  }
445
450
  },
446
451
  defaultVariants: {
447
- componentSize: 'normal',
452
+ size: 'normal',
448
453
  density: 'normal'
449
454
  }
450
455
  });
451
456
  const defaultSearchIcon = cva({
452
457
  base: 'pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center text-neutral/45 select-none [&_svg]:size-full',
453
458
  variants: {
454
- componentSize: {
459
+ size: {
455
460
  small: 'size-3.5',
456
461
  normal: 'size-4',
457
462
  large: 'size-5'
@@ -463,7 +468,7 @@ const defaultSearchIcon = cva({
463
468
  }
464
469
  },
465
470
  defaultVariants: {
466
- componentSize: 'normal',
471
+ size: 'normal',
467
472
  density: 'normal'
468
473
  }
469
474
  });
@@ -660,6 +665,7 @@ const defaultMobilePanel = cva({
660
665
  right: ''
661
666
  },
662
667
  size: sidebarSizeVariables,
668
+ iconSize: sidebarSizeVariables,
663
669
  density: sidebarDensityVariables
664
670
  },
665
671
  defaultVariants: {
@@ -671,40 +677,40 @@ const defaultMobilePanel = cva({
671
677
  const defaultMedia = cva({
672
678
  base: 'bg-neutral text-neutral-contrast flex aspect-square shrink-0 items-center justify-center rounded-sm',
673
679
  variants: {
674
- size: {
675
- default: '',
676
- compact: 'text-xs'
680
+ itemSize: {
681
+ normal: 'text-xs',
682
+ large: ''
677
683
  },
678
- componentSize: {
684
+ size: {
679
685
  small: '',
680
686
  normal: '',
681
687
  large: ''
682
688
  }
683
689
  },
684
690
  compoundVariants: [
685
- { size: 'default', componentSize: 'small', class: 'size-7 [&_svg]:size-icon-sm' },
686
- { size: 'default', componentSize: 'normal', class: 'size-8 [&_svg]:size-icon-md' },
687
- { size: 'default', componentSize: 'large', class: 'size-9 [&_svg]:size-icon-lg' },
688
- { size: 'compact', componentSize: 'small', class: 'size-4 [&_svg]:size-icon-xs' },
689
- { size: 'compact', componentSize: 'normal', class: 'size-5 [&_svg]:size-icon-xs' },
690
- { size: 'compact', componentSize: 'large', class: 'size-6 [&_svg]:size-icon-sm' }
691
+ { itemSize: 'large', size: 'small', class: 'size-7 [&_svg]:size-icon-sm' },
692
+ { itemSize: 'large', size: 'normal', class: 'size-8 [&_svg]:size-icon-md' },
693
+ { itemSize: 'large', size: 'large', class: 'size-9 [&_svg]:size-icon-lg' },
694
+ { itemSize: 'normal', size: 'small', class: 'size-4 [&_svg]:size-icon-xs' },
695
+ { itemSize: 'normal', size: 'normal', class: 'size-5 [&_svg]:size-icon-xs' },
696
+ { itemSize: 'normal', size: 'large', class: 'size-6 [&_svg]:size-icon-sm' }
691
697
  ],
692
698
  defaultVariants: {
693
- size: 'default',
694
- componentSize: 'normal'
699
+ itemSize: 'large',
700
+ size: 'normal'
695
701
  }
696
702
  });
697
703
  const defaultAvatar = cva({
698
704
  base: 'bg-neutral-muted text-neutral-muted-readable flex shrink-0 items-center justify-center overflow-hidden rounded-sm font-medium',
699
705
  variants: {
700
- componentSize: {
706
+ size: {
701
707
  small: 'size-7 text-xs',
702
708
  normal: 'size-8 text-sm',
703
709
  large: 'size-9 text-sm'
704
710
  }
705
711
  },
706
712
  defaultVariants: {
707
- componentSize: 'normal'
713
+ size: 'normal'
708
714
  }
709
715
  });
710
716
  const defaultActivityBar = cva({
@@ -746,7 +752,7 @@ const defaultActivityBarList = cva({
746
752
  const defaultActivityBarItem = cva({
747
753
  base: 'state-layer relative flex aspect-square shrink-0 items-center justify-center rounded-md outline-none transition-[background,color] duration-normal ease-linear focus-visible:ring-2 focus-visible:ring-focus/50 data-active:bg-selected-muted data-active:text-selected-muted-readable data-active:font-medium [&_svg]:shrink-0',
748
754
  variants: {
749
- componentSize: {
755
+ size: {
750
756
  small: 'h-control-sm [&_svg]:size-icon-sm',
751
757
  normal: 'h-control-md [&_svg]:size-icon-md',
752
758
  large: 'h-control-lg [&_svg]:size-icon-lg'
@@ -766,7 +772,7 @@ const defaultActivityBarItem = cva({
766
772
  }
767
773
  },
768
774
  defaultVariants: {
769
- componentSize: 'normal',
775
+ size: 'normal',
770
776
  density: 'normal',
771
777
  active: false,
772
778
  disabled: false
@@ -775,7 +781,7 @@ const defaultActivityBarItem = cva({
775
781
  const defaultActivityBarBadge = cva({
776
782
  base: 'bg-color text-color-readable pointer-events-none absolute flex items-center justify-center rounded-full px-xs font-medium tabular-nums select-none',
777
783
  variants: {
778
- componentSize: {
784
+ size: {
779
785
  small: 'top-0 end-0 h-3.5 min-w-3.5 text-xs',
780
786
  normal: 'top-0 end-0 h-4 min-w-4 text-xs',
781
787
  large: 'top-0 end-0 h-4.5 min-w-4.5 text-xs'
@@ -786,7 +792,7 @@ const defaultActivityBarBadge = cva({
786
792
  }
787
793
  },
788
794
  defaultVariants: {
789
- componentSize: 'normal',
795
+ size: 'normal',
790
796
  dot: false
791
797
  }
792
798
  });
@@ -27,7 +27,7 @@ export declare const setSkeletonTheme: (theme: InferComponentTheme<{
27
27
  };
28
28
  }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
29
29
  }>) => void;
30
- export declare const useSkeletonTheme: (theme?: InferComponentTheme<{
30
+ export declare const useSkeletonTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
31
31
  root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
32
32
  color: {
33
33
  primary: string;
@@ -39,16 +39,4 @@ export declare const useSkeletonTheme: (theme?: InferComponentTheme<{
39
39
  neutral: string;
40
40
  };
41
41
  }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
42
- }> | undefined) => {
43
- root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
44
- color: {
45
- primary: string;
46
- secondary: string;
47
- danger: string;
48
- success: string;
49
- warning: string;
50
- info: string;
51
- neutral: string;
52
- };
53
- }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
54
- };
42
+ }>;
@@ -87,7 +87,7 @@ export declare const setSortableListTheme: (theme: InferComponentTheme<{
87
87
  }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
88
88
  empty: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
89
89
  }>) => void;
90
- export declare const useSortableListTheme: (theme?: InferComponentTheme<{
90
+ export declare const useSortableListTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
91
91
  root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
92
92
  size: {
93
93
  small: string;
@@ -128,45 +128,4 @@ export declare const useSortableListTheme: (theme?: InferComponentTheme<{
128
128
  };
129
129
  }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
130
130
  empty: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
131
- }> | undefined) => {
132
- root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
133
- size: {
134
- small: string;
135
- normal: string;
136
- large: string;
137
- };
138
- orientation: {
139
- vertical: string;
140
- horizontal: string;
141
- grid: string;
142
- };
143
- }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
144
- item: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
145
- size: {
146
- small: string;
147
- normal: string;
148
- large: string;
149
- };
150
- handle: {
151
- true: string;
152
- false: string;
153
- };
154
- dragging: {
155
- true: string;
156
- false: string;
157
- };
158
- disabled: {
159
- true: string;
160
- false: string;
161
- };
162
- }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
163
- content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
164
- handle: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
165
- size: {
166
- small: string;
167
- normal: string;
168
- large: string;
169
- };
170
- }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
171
- empty: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
172
- };
131
+ }>;
@@ -81,7 +81,7 @@ export declare const setSpinnerTheme: (theme: InferComponentTheme<{
81
81
  };
82
82
  }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
83
83
  }>) => void;
84
- export declare const useSpinnerTheme: (theme?: InferComponentTheme<{
84
+ export declare const useSpinnerTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
85
85
  root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
86
86
  size: {
87
87
  small: string;
@@ -120,43 +120,4 @@ export declare const useSpinnerTheme: (theme?: InferComponentTheme<{
120
120
  large: string;
121
121
  };
122
122
  }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
123
- }> | undefined) => {
124
- root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
125
- size: {
126
- small: string;
127
- normal: string;
128
- large: string;
129
- };
130
- color: {
131
- primary: string;
132
- secondary: string;
133
- danger: string;
134
- success: string;
135
- warning: string;
136
- info: string;
137
- neutral: string;
138
- };
139
- }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
140
- indicator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
141
- size: {
142
- small: string;
143
- normal: string;
144
- large: string;
145
- };
146
- variant: {
147
- default: string;
148
- grid: string;
149
- pulse: string;
150
- puff: string;
151
- lines: string;
152
- circles: string;
153
- };
154
- }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
155
- label: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
156
- size: {
157
- small: string;
158
- normal: string;
159
- large: string;
160
- };
161
- }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
162
- };
123
+ }>;
@@ -105,7 +105,7 @@ export declare const setSpinnerTextTheme: (theme: InferComponentTheme<{
105
105
  };
106
106
  }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
107
107
  }>) => void;
108
- export declare const useSpinnerTextTheme: (theme?: InferComponentTheme<{
108
+ export declare const useSpinnerTextTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
109
109
  motion: import("../../utils/motion/index.js").MotionResolver<{
110
110
  readonly mode: {
111
111
  readonly vertical: {};
@@ -152,54 +152,7 @@ export declare const useSpinnerTextTheme: (theme?: InferComponentTheme<{
152
152
  false: null;
153
153
  };
154
154
  }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
155
- }> | undefined) => {
156
- motion: import("../../utils/motion/index.js").MotionResolver<{
157
- readonly mode: {
158
- readonly vertical: {};
159
- readonly reveal: {
160
- readonly duration: "slower";
161
- };
162
- };
163
- }>;
164
- root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
165
- size: {
166
- small: string;
167
- normal: string;
168
- large: string;
169
- };
170
- color: {
171
- primary: string;
172
- secondary: string;
173
- danger: string;
174
- success: string;
175
- warning: string;
176
- info: string;
177
- neutral: string;
178
- };
179
- }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
180
- spinner: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
181
- size: {
182
- small: string;
183
- normal: string;
184
- large: string;
185
- };
186
- }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
187
- viewport: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
188
- size: {
189
- small: string;
190
- normal: string;
191
- large: string;
192
- };
193
- }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
194
- sizer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
195
- sizerItem: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
196
- message: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
197
- shimmer: {
198
- true: string;
199
- false: null;
200
- };
201
- }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
202
- };
155
+ }>;
203
156
  export declare const useSpinnerTextMotion: () => import("../../utils/motion/index.js").ComponentMotion<{
204
157
  readonly mode: {
205
158
  readonly vertical: {};
@@ -23,7 +23,7 @@ export declare const setStackTheme: (theme: InferComponentTheme<{
23
23
  }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
24
24
  inner: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
25
25
  }>) => void;
26
- export declare const useStackTheme: (theme?: InferComponentTheme<{
26
+ export declare const useStackTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
27
27
  root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
28
28
  paddingInline: Record<import("../Layout/layoutSpacing.js").LayoutSpacing, "px-lg" | "px-xl" | "px-md" | "px-0" | "px-xs" | "px-sm">;
29
29
  paddingBlock: Record<import("../Layout/layoutSpacing.js").LayoutSpacing, "py-xs" | "py-sm" | "py-md" | "py-lg" | "py-0" | "py-xl">;
@@ -33,14 +33,4 @@ export declare const useStackTheme: (theme?: InferComponentTheme<{
33
33
  };
34
34
  }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
35
35
  inner: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
36
- }> | undefined) => {
37
- root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
38
- paddingInline: Record<import("../Layout/layoutSpacing.js").LayoutSpacing, "px-lg" | "px-xl" | "px-md" | "px-0" | "px-xs" | "px-sm">;
39
- paddingBlock: Record<import("../Layout/layoutSpacing.js").LayoutSpacing, "py-xs" | "py-sm" | "py-md" | "py-lg" | "py-0" | "py-xl">;
40
- scrollable: {
41
- true: string;
42
- false: null;
43
- };
44
- }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
45
- inner: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
46
- };
36
+ }>;