@spfx-fast/sharepoint-ui 0.4.3 → 0.5.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 (282) hide show
  1. package/QUICKSTART.md +13 -128
  2. package/README.md +19 -26
  3. package/components.json +240 -5834
  4. package/dist/accordion.d.ts +11 -0
  5. package/dist/accordion.js +4 -0
  6. package/dist/alert.d.ts +3 -0
  7. package/dist/alert.js +4 -0
  8. package/dist/attachment-list.d.ts +15 -0
  9. package/dist/attachment-list.js +14 -0
  10. package/dist/avatar-group.d.ts +12 -0
  11. package/dist/avatar-group.js +7 -0
  12. package/dist/avatar.d.ts +6 -0
  13. package/dist/avatar.js +5 -0
  14. package/dist/badge.d.ts +3 -0
  15. package/dist/badge.js +4 -0
  16. package/dist/breadcrumb.d.ts +10 -0
  17. package/dist/breadcrumb.js +9 -0
  18. package/dist/button-group.d.ts +6 -0
  19. package/dist/button-group.js +4 -0
  20. package/dist/button.d.ts +3 -0
  21. package/dist/button.js +4 -0
  22. package/dist/card.d.ts +3 -0
  23. package/dist/card.js +4 -0
  24. package/dist/carousel.d.ts +11 -0
  25. package/dist/carousel.js +6 -0
  26. package/dist/checkbox.d.ts +3 -0
  27. package/dist/checkbox.js +4 -0
  28. package/dist/combobox.d.ts +9 -0
  29. package/dist/combobox.js +6 -0
  30. package/dist/command-bar.d.ts +6 -0
  31. package/dist/command-bar.js +4 -0
  32. package/dist/copy-button.d.ts +7 -0
  33. package/dist/copy-button.js +19 -0
  34. package/dist/data-grid.d.ts +25 -0
  35. package/dist/data-grid.js +39 -0
  36. package/dist/date-range-picker.d.ts +12 -0
  37. package/dist/date-range-picker.js +4 -0
  38. package/dist/dialog.d.ts +9 -0
  39. package/dist/dialog.js +21 -0
  40. package/dist/divider.d.ts +3 -0
  41. package/dist/divider.js +4 -0
  42. package/dist/drawer.d.ts +6 -0
  43. package/dist/drawer.js +5 -0
  44. package/dist/empty-state.d.ts +7 -0
  45. package/dist/empty-state.js +5 -0
  46. package/dist/field.d.ts +15 -0
  47. package/dist/field.js +11 -0
  48. package/dist/file-dropzone.d.ts +15 -0
  49. package/dist/file-dropzone.js +21 -0
  50. package/dist/filter-bar.d.ts +9 -0
  51. package/dist/filter-bar.js +9 -0
  52. package/dist/image.d.ts +5 -0
  53. package/dist/image.js +4 -0
  54. package/dist/index.d.ts +68 -78
  55. package/dist/index.js +60 -68
  56. package/dist/input.d.ts +3 -0
  57. package/dist/input.js +4 -0
  58. package/dist/label.d.ts +3 -0
  59. package/dist/label.js +4 -0
  60. package/dist/link.d.ts +3 -0
  61. package/dist/link.js +9 -0
  62. package/dist/list-view.d.ts +29 -0
  63. package/dist/list-view.js +14 -0
  64. package/dist/list.d.ts +6 -0
  65. package/dist/list.js +5 -0
  66. package/dist/lookup-picker.d.ts +12 -0
  67. package/dist/lookup-picker.js +4 -0
  68. package/dist/menu.d.ts +6 -0
  69. package/dist/menu.js +4 -0
  70. package/dist/nav.d.ts +12 -0
  71. package/dist/nav.js +4 -0
  72. package/dist/pagination.d.ts +11 -0
  73. package/dist/pagination.js +5 -0
  74. package/dist/person-picker.d.ts +13 -0
  75. package/dist/person-picker.js +4 -0
  76. package/dist/persona.d.ts +7 -0
  77. package/dist/persona.js +5 -0
  78. package/dist/popover.d.ts +6 -0
  79. package/dist/popover.js +4 -0
  80. package/dist/progress-bar.d.ts +5 -0
  81. package/dist/progress-bar.js +5 -0
  82. package/dist/radio-group.d.ts +6 -0
  83. package/dist/radio-group.js +4 -0
  84. package/dist/radio.d.ts +3 -0
  85. package/dist/radio.js +4 -0
  86. package/dist/rating.d.ts +8 -0
  87. package/dist/rating.js +5 -0
  88. package/dist/react.d.ts +1 -4715
  89. package/dist/react.js +1 -7097
  90. package/dist/select.d.ts +3 -0
  91. package/dist/select.js +4 -0
  92. package/dist/sharepoint-field.d.ts +18 -0
  93. package/dist/sharepoint-field.js +54 -0
  94. package/dist/skeleton.d.ts +6 -0
  95. package/dist/skeleton.js +9 -0
  96. package/dist/spinner.d.ts +5 -0
  97. package/dist/spinner.js +4 -0
  98. package/dist/swatch-picker.d.ts +17 -0
  99. package/dist/swatch-picker.js +11 -0
  100. package/dist/switch.d.ts +3 -0
  101. package/dist/switch.js +4 -0
  102. package/dist/table.d.ts +6 -0
  103. package/dist/table.js +4 -0
  104. package/dist/tabs.d.ts +14 -0
  105. package/dist/tabs.js +30 -0
  106. package/dist/tag-group.d.ts +6 -0
  107. package/dist/tag-group.js +4 -0
  108. package/dist/tag-picker.d.ts +12 -0
  109. package/dist/tag-picker.js +4 -0
  110. package/dist/tag.d.ts +7 -0
  111. package/dist/tag.js +5 -0
  112. package/dist/text.d.ts +5 -0
  113. package/dist/text.js +4 -0
  114. package/dist/textarea.d.ts +3 -0
  115. package/dist/textarea.js +4 -0
  116. package/dist/theme.d.ts +15 -175
  117. package/dist/theme.js +36 -239
  118. package/dist/toast.d.ts +9 -0
  119. package/dist/toast.js +12 -0
  120. package/dist/tree.d.ts +13 -0
  121. package/dist/tree.js +9 -0
  122. package/dist/view-card.d.ts +8 -0
  123. package/dist/view-card.js +4 -0
  124. package/dist/view-switcher.d.ts +13 -0
  125. package/dist/view-switcher.js +7 -0
  126. package/dist/virtual-list.d.ts +11 -0
  127. package/dist/virtual-list.js +25 -0
  128. package/measurements.json +365 -0
  129. package/package.json +14 -46
  130. package/src/theme.css +125 -0
  131. package/AGENTS.md +0 -231
  132. package/dist/appearance.d.ts +0 -6
  133. package/dist/appearance.js +0 -217
  134. package/dist/elements/accordion.d.ts +0 -9
  135. package/dist/elements/accordion.js +0 -338
  136. package/dist/elements/alert.d.ts +0 -2
  137. package/dist/elements/alert.js +0 -86
  138. package/dist/elements/avatar-group-primitives.d.ts +0 -3
  139. package/dist/elements/avatar-group-primitives.js +0 -189
  140. package/dist/elements/avatar-group.d.ts +0 -2
  141. package/dist/elements/avatar-group.js +0 -110
  142. package/dist/elements/avatar.d.ts +0 -4
  143. package/dist/elements/avatar.js +0 -251
  144. package/dist/elements/badge.d.ts +0 -8
  145. package/dist/elements/badge.js +0 -182
  146. package/dist/elements/breadcrumb.d.ts +0 -4
  147. package/dist/elements/breadcrumb.js +0 -233
  148. package/dist/elements/button-group.d.ts +0 -1
  149. package/dist/elements/button-group.js +0 -20
  150. package/dist/elements/button-variants.d.ts +0 -6
  151. package/dist/elements/button-variants.js +0 -339
  152. package/dist/elements/button.d.ts +0 -5
  153. package/dist/elements/button.js +0 -233
  154. package/dist/elements/card-primitives.d.ts +0 -3
  155. package/dist/elements/card-primitives.js +0 -83
  156. package/dist/elements/card.d.ts +0 -5
  157. package/dist/elements/card.js +0 -213
  158. package/dist/elements/carousel.d.ts +0 -92
  159. package/dist/elements/carousel.js +0 -1115
  160. package/dist/elements/color-picker.d.ts +0 -24
  161. package/dist/elements/color-picker.js +0 -1004
  162. package/dist/elements/combobox.d.ts +0 -1
  163. package/dist/elements/combobox.js +0 -1012
  164. package/dist/elements/data-grid-model.d.ts +0 -120
  165. package/dist/elements/data-grid-model.js +0 -294
  166. package/dist/elements/data-grid.d.ts +0 -30
  167. package/dist/elements/data-grid.js +0 -1576
  168. package/dist/elements/date-picker.d.ts +0 -1
  169. package/dist/elements/date-picker.js +0 -486
  170. package/dist/elements/dialog.d.ts +0 -23
  171. package/dist/elements/dialog.js +0 -409
  172. package/dist/elements/divider.d.ts +0 -2
  173. package/dist/elements/divider.js +0 -66
  174. package/dist/elements/drawer.d.ts +0 -3
  175. package/dist/elements/drawer.js +0 -308
  176. package/dist/elements/field-composition.d.ts +0 -26
  177. package/dist/elements/field-composition.js +0 -133
  178. package/dist/elements/field.d.ts +0 -1
  179. package/dist/elements/field.js +0 -67
  180. package/dist/elements/file-upload.d.ts +0 -6
  181. package/dist/elements/file-upload.js +0 -211
  182. package/dist/elements/floating-position.d.ts +0 -36
  183. package/dist/elements/floating-position.js +0 -92
  184. package/dist/elements/image.d.ts +0 -28
  185. package/dist/elements/image.js +0 -38
  186. package/dist/elements/info.d.ts +0 -9
  187. package/dist/elements/info.js +0 -102
  188. package/dist/elements/input.d.ts +0 -5
  189. package/dist/elements/input.js +0 -255
  190. package/dist/elements/label.d.ts +0 -15
  191. package/dist/elements/label.js +0 -56
  192. package/dist/elements/link.d.ts +0 -1
  193. package/dist/elements/link.js +0 -92
  194. package/dist/elements/list.d.ts +0 -19
  195. package/dist/elements/list.js +0 -297
  196. package/dist/elements/menu.d.ts +0 -33
  197. package/dist/elements/menu.js +0 -1103
  198. package/dist/elements/message-bar.d.ts +0 -10
  199. package/dist/elements/message-bar.js +0 -327
  200. package/dist/elements/nav.d.ts +0 -32
  201. package/dist/elements/nav.js +0 -794
  202. package/dist/elements/overflow.d.ts +0 -10
  203. package/dist/elements/overflow.js +0 -218
  204. package/dist/elements/persona.d.ts +0 -3
  205. package/dist/elements/persona.js +0 -125
  206. package/dist/elements/popover.d.ts +0 -77
  207. package/dist/elements/popover.js +0 -840
  208. package/dist/elements/progress-bar.d.ts +0 -4
  209. package/dist/elements/progress-bar.js +0 -82
  210. package/dist/elements/radio-group.d.ts +0 -1
  211. package/dist/elements/radio-group.js +0 -303
  212. package/dist/elements/rating-display.d.ts +0 -2
  213. package/dist/elements/rating-display.js +0 -125
  214. package/dist/elements/rating.d.ts +0 -2
  215. package/dist/elements/rating.js +0 -206
  216. package/dist/elements/rich-text-editor.d.ts +0 -32
  217. package/dist/elements/rich-text-editor.js +0 -1367
  218. package/dist/elements/search.d.ts +0 -3
  219. package/dist/elements/search.js +0 -200
  220. package/dist/elements/select.d.ts +0 -6
  221. package/dist/elements/select.js +0 -291
  222. package/dist/elements/shared.d.ts +0 -22
  223. package/dist/elements/shared.js +0 -409
  224. package/dist/elements/sharepoint-field-basic-controls.d.ts +0 -1
  225. package/dist/elements/sharepoint-field-basic-controls.js +0 -14
  226. package/dist/elements/sharepoint-fields.d.ts +0 -29
  227. package/dist/elements/sharepoint-fields.js +0 -460
  228. package/dist/elements/skeleton.d.ts +0 -6
  229. package/dist/elements/skeleton.js +0 -91
  230. package/dist/elements/slider.d.ts +0 -1
  231. package/dist/elements/slider.js +0 -248
  232. package/dist/elements/spin-button.d.ts +0 -7
  233. package/dist/elements/spin-button.js +0 -499
  234. package/dist/elements/spinner.d.ts +0 -4
  235. package/dist/elements/spinner.js +0 -124
  236. package/dist/elements/swatch-picker.d.ts +0 -5
  237. package/dist/elements/swatch-picker.js +0 -363
  238. package/dist/elements/table.d.ts +0 -21
  239. package/dist/elements/table.js +0 -261
  240. package/dist/elements/tabs.d.ts +0 -1
  241. package/dist/elements/tabs.js +0 -276
  242. package/dist/elements/tag-picker.d.ts +0 -29
  243. package/dist/elements/tag-picker.js +0 -715
  244. package/dist/elements/tags.d.ts +0 -21
  245. package/dist/elements/tags.js +0 -421
  246. package/dist/elements/teaching-popover.d.ts +0 -32
  247. package/dist/elements/teaching-popover.js +0 -412
  248. package/dist/elements/text.d.ts +0 -9
  249. package/dist/elements/text.js +0 -75
  250. package/dist/elements/textarea.d.ts +0 -1
  251. package/dist/elements/textarea.js +0 -182
  252. package/dist/elements/toast.d.ts +0 -25
  253. package/dist/elements/toast.js +0 -337
  254. package/dist/elements/toaster.d.ts +0 -6
  255. package/dist/elements/toaster.js +0 -357
  256. package/dist/elements/toggle.d.ts +0 -2
  257. package/dist/elements/toggle.js +0 -246
  258. package/dist/elements/toolbar.d.ts +0 -12
  259. package/dist/elements/toolbar.js +0 -381
  260. package/dist/elements/tooltip.d.ts +0 -76
  261. package/dist/elements/tooltip.js +0 -527
  262. package/dist/elements/tree-model.d.ts +0 -19
  263. package/dist/elements/tree-model.js +0 -34
  264. package/dist/elements/tree.d.ts +0 -5
  265. package/dist/elements/tree.js +0 -273
  266. package/dist/elements/view-card.d.ts +0 -2
  267. package/dist/elements/view-card.js +0 -78
  268. package/dist/elements/virtual-list.d.ts +0 -41
  269. package/dist/elements/virtual-list.js +0 -369
  270. package/dist/elements.d.ts +0 -73
  271. package/dist/elements.js +0 -210
  272. package/dist/sharepoint-fields.d.ts +0 -135
  273. package/dist/sharepoint-fields.js +0 -402
  274. package/dist/virtualizer-hooks.d.ts +0 -80
  275. package/dist/virtualizer-hooks.js +0 -253
  276. package/scripts/generate-token-index.mjs +0 -43
  277. package/scripts/sync-component-catalog-signatures.mjs +0 -55
  278. package/scripts/validate-component-catalog.mjs +0 -44
  279. package/skills/sharepoint-ui/SKILL.md +0 -12
  280. package/skills/sharepoint-ui/references/choosing-components.md +0 -20
  281. package/skills/sharepoint-ui/references/sharepoint-patterns.md +0 -17
  282. package/tokens.json +0 -3777
package/dist/index.d.ts CHANGED
@@ -1,78 +1,68 @@
1
- export { defineSharePointUIElements } from "./elements.js";
2
- export { defineButton } from "./elements/button.js";
3
- export { defineSharePointField, type SharePointFieldElement, type SharePointFieldOption, type SharePointFieldValueChangeDetail } from "./elements/sharepoint-fields.js";
4
- export { defineButtonGroup } from "./elements/button-group.js";
5
- export { defineCompoundButton, defineMenuButton, defineSplitButton, defineToggleButton } from "./elements/button-variants.js";
6
- export type { ButtonAppearance, ButtonShape, ButtonSize } from "./elements/button.js";
7
- export { defineInput, type InputAppearance, type InputSize, type InputType } from "./elements/input.js";
8
- export { defineFileUpload, type FileUploadError } from "./elements/file-upload.js";
9
- export { createImage, getImageStyle, type ImageOptions, type ImageFit, type ImageShape } from "./elements/image.js";
10
- export { defineText } from "./elements/text.js";
11
- export type { TextFont, TextSize, TextTag, TextWeight } from "./elements/text.js";
12
- export { defineToast, defineToastBody, defineToastFooter, defineToastTitle, type ToastAppearance, type ToastIntent, type ToastOptions, type ToastPoliteness } from "./elements/toast.js";
13
- export { defineToaster, type ToastAnnounce, type ToastAnnounceOptions, type ToastPosition } from "./elements/toaster.js";
14
- export { defineSearchBox, type SearchAppearance, type SearchSize } from "./elements/search.js";
15
- export { defineColorPicker, defineColorArea, defineColorSlider, defineAlphaSlider, type ColorPickerFormat, type ColorPickerHsvColor, type ColorPickerShape, type ColorPickerSize, type ColorSliderChannel, type ColorPickerState } from "./elements/color-picker.js";
16
- export { defineToolbar, defineToolbarGroup, defineToolbarSeparator, defineToolbarRadioGroup, defineToolbarRadioButton, type ToolbarCheckedValues, type ToolbarCheckedValueChange } from "./elements/toolbar.js";
17
- export { defineCarousel, defineCarouselCard, defineCarouselNav, defineCarouselNavButton, defineCarouselNavImageButton, defineCarouselButton, defineCarouselAutoplayButton, defineCarouselNavContainer, defineCarouselSlider, defineCarouselViewport } from "./elements/carousel.js";
18
- export type { CarouselIndexChangeData, CarouselIndexChangeSource } from "./elements/carousel.js";
19
- export type { CarouselAlign, CarouselAppearance, CarouselMotion, CarouselAnnouncerFunction, SharePointCarouselElement, SharePointCarouselCardElement, SharePointCarouselNavButtonElement, SharePointCarouselButtonElement, SharePointCarouselAutoplayButtonElement, SharePointCarouselSliderElement } from "./elements/carousel.js";
20
- export { defineOverflow, defineOverflowItem, defineOverflowDivider, type OverflowAxis, type OverflowDensity, type OverflowState } from "./elements/overflow.js";
21
- export { defineSwatchPicker, defineColorSwatch, defineImageSwatch, defineEmptySwatch, defineSwatchPickerRow } from "./elements/swatch-picker.js";
22
- export { createTableColumn, defineTable, defineTableHeader, defineTableBody, defineTableRow, defineTableHeaderCell, defineTableCell, defineTableCellLayout, defineTableCellActions, defineTableResizeHandle, defineTableSelectionCell, type CreateTableColumnOptions, type TableColumnDefinition, type TableColumnId } from "./elements/table.js";
23
- export { defineNav, defineNavItem, defineAppItem, defineAppItemStatic, defineHamburger, defineNavDrawer, defineNavDrawerBody, defineNavDrawerFooter, defineNavDrawerHeader, defineSplitNavItem, defineNavCategory, defineNavCategoryItem, defineNavSubItemGroup, defineNavSubItem, defineNavDivider, defineNavSectionHeader, type NavItemSelectData, type NavCategoryToggleData } from "./elements/nav.js";
24
- export { createLabel, getLabelStyle, type LabelOptions, type LabelSize, type LabelWeight } from "./elements/label.js";
25
- export { defineInfoButton, createInfoLabel, type InfoLabelOptions, type InfoPlacement } from "./elements/info.js";
26
- export { defineField } from "./elements/field.js";
27
- export { createFormField, type FieldOrientation, type FieldValidationState, type FormFieldOptions } from "./elements/field-composition.js";
28
- export { defineCard, type CardAppearance, type CardOrientation, type CardSize } from "./elements/card.js";
29
- export { defineCardFooter, defineCardHeader, defineCardPreview } from "./elements/card-primitives.js";
30
- export { defineBadge, defineCounterBadge, definePresenceBadge, type BadgeAppearance, type BadgeColor, type BadgeShape, type BadgeSize, type PresenceBadgeStatus } from "./elements/badge.js";
31
- export { defineCheckbox, defineSwitch } from "./elements/toggle.js";
32
- export { defineTextArea } from "./elements/textarea.js";
33
- export { defineSpinner } from "./elements/spinner.js";
34
- export { defineMessageBar, defineMessageBarActions, defineMessageBarBody, defineMessageBarGroup, defineMessageBarTitle, type MessageBarGroupAnimation, type MessageBarIntent, type MessageBarLayout, type MessageBarPoliteness, type MessageBarShape } from "./elements/message-bar.js";
35
- export { defineViewCard } from "./elements/view-card.js";
36
- export { defineDialog, defineDialogActions, defineDialogBody, defineDialogContent, defineDialogSurface, defineDialogTitle, defineDialogTrigger, type DialogOpenChangeData } from "./elements/dialog.js";
37
- export { defineDrawer, defineInlineDrawer } from "./elements/drawer.js";
38
- export { defineProgressBar, type ProgressBarColor, type ProgressBarShape, type ProgressBarThickness } from "./elements/progress-bar.js";
39
- export { defineSelect } from "./elements/select.js";
40
- export type { SelectAppearance, SelectSize, SelectChangeData } from "./elements/select.js";
41
- export { defineRadioGroup } from "./elements/radio-group.js";
42
- export { defineSpinButton } from "./elements/spin-button.js";
43
- export type { SpinButtonAppearance, SpinButtonSize, SpinButtonChangeData } from "./elements/spin-button.js";
44
- export { defineSlider } from "./elements/slider.js";
45
- export { defineDatePicker } from "./elements/date-picker.js";
46
- export { defineCombobox } from "./elements/combobox.js";
47
- export { defineRichTextEditor, getRichTextEditorFieldOptions, type SharePointMultiLineField, type SharePointRichTextEditorElement, type RichTextEditorImageUploadResult, type RichTextEditorImageUploader, type RichTextEditorLink, type RichTextEditorLinkPicker } from "./elements/rich-text-editor.js";
48
- export { defineAlert, type AlertAppearance } from "./elements/alert.js";
49
- export { defineSkeleton, defineSkeletonItem, type SkeletonAnimation, type SkeletonAppearance, type SkeletonItemSize, type SkeletonShape } from "./elements/skeleton.js";
50
- export { DEFAULT_ACCENT, getSharePointUIStyleTokens, type SharePointUIAppearance, type SharePointUIBaseAppearance, type SharePointUIDensity, type SharePointUIStyleTokens } from "./appearance.js";
51
- export { applySharePointTheme, composeSharePointUIDesignThemes, getSharePointUIDesignTokens, getSharePointThemeColorPresets, type SharePointThemeColorPreset, type SharePointTheme, type FluentThemeTokens, type SharePointUIDesignTheme, type SharePointUIThemeOptions } from "./theme.js";
52
- export { getSharePointFieldAdapter, getSharePointFieldMetadataUrl, getSharePointListItemUrl, getSharePointLookupOptionsUrl, getSharePointNextPageUrl, serializeSharePointLookupValue, serializeSharePointChoiceValue, serializeSharePointFieldValue, serializeSharePointFieldValues, type SharePointFieldAdapter, type SharePointFieldControl, type SharePointFieldMetadata, type SharePointLookupId, type SharePointLookupUpdate, type SharePointLookupValue, type SharePointChoiceValue, type SharePointChoiceUpdate, type SharePointFieldValue, type SharePointFieldValues, type SharePointFieldUpdate, type SharePointFieldUpdateValue, type SharePointUrlValue } from "./sharepoint-fields.js";
53
- export { defineLink } from "./elements/link.js";
54
- export { defineDivider, type DividerAppearance } from "./elements/divider.js";
55
- export { defineAccordion, defineAccordionHeader, defineAccordionPanel, type AccordionItemValue, type AccordionNavigation, type AccordionToggleData } from "./elements/accordion.js";
56
- export { defineAvatar, type AvatarColor, type AvatarNamedColor } from "./elements/avatar.js";
57
- export { defineAvatarGroup } from "./elements/avatar-group.js";
58
- export { defineAvatarGroupItem, defineAvatarGroupPopover } from "./elements/avatar-group-primitives.js";
59
- export { definePersona, type PersonaPresence, type PersonaSize } from "./elements/persona.js";
60
- export { defineVirtualList, type VirtualListDataSource, type VirtualListItemRenderer, type SharePointVirtualListElement } from "./elements/virtual-list.js";
61
- export { defineDataGrid, type DataGridCellRenderer, type DataGridCellsEditHandler, type DataGridRowHeightGetter, type DataGridSourceSelectionHandler, type SharePointDataGridElement } from "./elements/data-grid.js";
62
- export { clampDataGridRowHeight, fitDataGridColumnWidths, formatDataGridClipboard, getDataGridColumnSizing, getDataGridGroupKey, isDataGridRowSelected, parseDataGridClipboard, parseDataGridClipboardValue, setDataGridRowSelected, writeDataGridClipboardText, type DataGridCellEdit, type DataGridCellEditError, type DataGridClipboardColumn, type DataGridColumn, type DataGridColumnSizingOption, type DataGridColumnSizingOptions, type DataGridColumnWidths, type DataGridDataSource, type DataGridDataSourceRow, type DataGridSelectionModel, type DataGridEditValue, type DataGridFocusMode, type DataGridGroup, type DataGridSelectionAppearance, type DataGridSort, type DataGridSortDirection, type DataGridSortState } from "./elements/data-grid-model.js";
63
- export { defineTree, type TreeCheckedItem, type TreeItemRenderer } from "./elements/tree.js";
64
- export { type TreeNode, type VisibleTreeNode } from "./elements/tree-model.js";
65
- export { defineInteractionTag, defineInteractionTagPrimary, defineInteractionTagSecondary, defineTag, defineTagGroup, type InteractionTagSelectData, type SharePointTagGroupElement, type TagAppearance, type TagGroupSelectData, type TagShape, type TagSize } from "./elements/tags.js";
66
- export { defineTagPicker } from "./elements/tag-picker.js";
67
- export type { TagPickerOpenChangeType, TagPickerOnOpenChangeData, TagPickerOnOptionSelectData } from "./elements/tag-picker.js";
68
- export { defineRating } from "./elements/rating.js";
69
- export { defineRatingDisplay, defineRatingItem } from "./elements/rating-display.js";
70
- export { defineList, defineListItem, type ListItemActionData, type ListItemActionEvent, type ListItemValue, type ListNavigationMode, type ListSelectionChangeData, type ListSelectionMode } from "./elements/list.js";
71
- export { defineBreadcrumb, defineBreadcrumbButton, defineBreadcrumbDivider, defineBreadcrumbItem } from "./elements/breadcrumb.js";
72
- export { defineTabs } from "./elements/tabs.js";
73
- export { defineTooltip, type TooltipAppearance, type TooltipPosition, type TooltipPositioning, type TooltipPositioningBoundary, type TooltipPositioningEndData, type TooltipPositioningImperativeRef, type TooltipPositioningOffset, type TooltipPositioningOffsetParams, type TooltipPositioningOptions, type TooltipPositioningPlacement, type TooltipPositioningRect, type TooltipPositioningRef, type TooltipPositioningShorthand, type TooltipPositioningTarget, type TooltipPositioningTargetRect, type TooltipRelationship, type TooltipVisibleChangeData } from "./elements/tooltip.js";
74
- export { definePopover, definePopoverSurface, definePopoverTrigger } from "./elements/popover.js";
75
- export type { PopoverAlignment, PopoverAutoSize, PopoverBoundary, PopoverBoundaryPadding, PopoverBoundaryRect, PopoverOffset, PopoverOffsetParams, PopoverOpenChangeData, PopoverPosition, PopoverPositioning, PopoverPositioningEndData, PopoverPositioningImperativeRef, PopoverPositioningOptions, PopoverPositioningPlacement, PopoverPositioningRef, PopoverPositioningTargetRect, PopoverTarget } from "./elements/popover.js";
76
- export { defineTeachingPopover } from "./elements/teaching-popover.js";
77
- export type { SharePointTeachingPopoverCarouselElement, TeachingPopoverAnnouncementFunction, TeachingPopoverAnnouncementDetail, TeachingPopoverCarouselValueChangeType, TeachingPopoverCarouselValueChangeDetail, TeachingPopoverFinishDetail } from "./elements/teaching-popover.js";
78
- export { defineMenu, defineMenuItem, defineMenuItemLink, defineMenuDivider, defineMenuGroup, defineMenuGroupHeader, defineMenuList, defineMenuPopover, defineMenuSplitGroup, defineMenuTrigger, defineMenuBar, defineMenuBarItem, type MenuOpenChangeData, type MenuOpenChangeType } from "./elements/menu.js";
1
+ export { Button } from "./button.js";
2
+ export { Checkbox } from "./checkbox.js";
3
+ export { Field } from "./field.js";
4
+ export { FilterBar } from "./filter-bar.js";
5
+ export { FileDropzone } from "./file-dropzone.js";
6
+ export { AttachmentList } from "./attachment-list.js";
7
+ export type { AttachmentItem, AttachmentListProps } from "./attachment-list.js";
8
+ export { ListView } from "./list-view.js";
9
+ export type { ListViewPage, ListViewProps } from "./list-view.js";
10
+ export { ViewSwitcher } from "./view-switcher.js";
11
+ export type { ViewOption, ViewSwitcherProps } from "./view-switcher.js";
12
+ export { TextArea } from "./textarea.js";
13
+ export { Radio } from "./radio.js";
14
+ export { RadioGroup } from "./radio-group.js";
15
+ export { Switch } from "./switch.js";
16
+ export { Select } from "./select.js";
17
+ export { ComboBox } from "./combobox.js";
18
+ export { DateRangePicker } from "./date-range-picker.js";
19
+ export { PersonPicker } from "./person-picker.js";
20
+ export { LookupPicker } from "./lookup-picker.js";
21
+ export { Text } from "./text.js";
22
+ export { Label } from "./label.js";
23
+ export { ButtonGroup } from "./button-group.js";
24
+ export { CommandBar } from "./command-bar.js";
25
+ export { CopyButton } from "./copy-button.js";
26
+ export { Link } from "./link.js";
27
+ export { Menu } from "./menu.js";
28
+ export { Badge } from "./badge.js";
29
+ export { Tag } from "./tag.js";
30
+ export { TagGroup } from "./tag-group.js";
31
+ export { Image } from "./image.js";
32
+ export { Avatar } from "./avatar.js";
33
+ export { Persona } from "./persona.js";
34
+ export { AvatarGroup } from "./avatar-group.js";
35
+ export { ViewCard } from "./view-card.js";
36
+ export { EmptyState } from "./empty-state.js";
37
+ export { Divider } from "./divider.js";
38
+ export { List } from "./list.js";
39
+ export { Accordion } from "./accordion.js";
40
+ export { Tabs } from "./tabs.js";
41
+ export { Breadcrumb } from "./breadcrumb.js";
42
+ export { Pagination } from "./pagination.js";
43
+ export { Rating } from "./rating.js";
44
+ export { ProgressBar } from "./progress-bar.js";
45
+ export { Spinner } from "./spinner.js";
46
+ export { Skeleton } from "./skeleton.js";
47
+ export { Alert } from "./alert.js";
48
+ export { Toast } from "./toast.js";
49
+ export { Table } from "./table.js";
50
+ export { DataGrid } from "./data-grid.js";
51
+ export type { DataGridColumn, DataGridSort, DataGridProps } from "./data-grid.js";
52
+ export { Tree } from "./tree.js";
53
+ export type { TreeNode, TreeProps } from "./tree.js";
54
+ export { Nav } from "./nav.js";
55
+ export { Carousel } from "./carousel.js";
56
+ export { TagPicker } from "./tag-picker.js";
57
+ export { SwatchPicker } from "./swatch-picker.js";
58
+ export { SharePointField } from "./sharepoint-field.js";
59
+ export type { SharePointFieldType, SharePointFieldProps } from "./sharepoint-field.js";
60
+ export { VirtualList } from "./virtual-list.js";
61
+ export type { VirtualListProps } from "./virtual-list.js";
62
+ export { Dialog } from "./dialog.js";
63
+ export { Drawer } from "./drawer.js";
64
+ export { Popover } from "./popover.js";
65
+ export { Card } from "./card.js";
66
+ export { Input } from "./input.js";
67
+ export { SharePointThemeProvider, createSharePointTheme, useSharePointTheme } from "./theme.js";
68
+ export type { SharePointTheme } from "./theme.js";
package/dist/index.js CHANGED
@@ -1,68 +1,60 @@
1
- export { defineSharePointUIElements } from "./elements.js";
2
- export { defineButton } from "./elements/button.js";
3
- export { defineSharePointField } from "./elements/sharepoint-fields.js";
4
- export { defineButtonGroup } from "./elements/button-group.js";
5
- export { defineCompoundButton, defineMenuButton, defineSplitButton, defineToggleButton } from "./elements/button-variants.js";
6
- export { defineInput } from "./elements/input.js";
7
- export { defineFileUpload } from "./elements/file-upload.js";
8
- export { createImage, getImageStyle } from "./elements/image.js";
9
- export { defineText } from "./elements/text.js";
10
- export { defineToast, defineToastBody, defineToastFooter, defineToastTitle } from "./elements/toast.js";
11
- export { defineToaster } from "./elements/toaster.js";
12
- export { defineSearchBox } from "./elements/search.js";
13
- export { defineColorPicker, defineColorArea, defineColorSlider, defineAlphaSlider } from "./elements/color-picker.js";
14
- export { defineToolbar, defineToolbarGroup, defineToolbarSeparator, defineToolbarRadioGroup, defineToolbarRadioButton } from "./elements/toolbar.js";
15
- export { defineCarousel, defineCarouselCard, defineCarouselNav, defineCarouselNavButton, defineCarouselNavImageButton, defineCarouselButton, defineCarouselAutoplayButton, defineCarouselNavContainer, defineCarouselSlider, defineCarouselViewport } from "./elements/carousel.js";
16
- export { defineOverflow, defineOverflowItem, defineOverflowDivider } from "./elements/overflow.js";
17
- export { defineSwatchPicker, defineColorSwatch, defineImageSwatch, defineEmptySwatch, defineSwatchPickerRow } from "./elements/swatch-picker.js";
18
- export { createTableColumn, defineTable, defineTableHeader, defineTableBody, defineTableRow, defineTableHeaderCell, defineTableCell, defineTableCellLayout, defineTableCellActions, defineTableResizeHandle, defineTableSelectionCell } from "./elements/table.js";
19
- export { defineNav, defineNavItem, defineAppItem, defineAppItemStatic, defineHamburger, defineNavDrawer, defineNavDrawerBody, defineNavDrawerFooter, defineNavDrawerHeader, defineSplitNavItem, defineNavCategory, defineNavCategoryItem, defineNavSubItemGroup, defineNavSubItem, defineNavDivider, defineNavSectionHeader } from "./elements/nav.js";
20
- export { createLabel, getLabelStyle } from "./elements/label.js";
21
- export { defineInfoButton, createInfoLabel } from "./elements/info.js";
22
- export { defineField } from "./elements/field.js";
23
- export { createFormField } from "./elements/field-composition.js";
24
- export { defineCard } from "./elements/card.js";
25
- export { defineCardFooter, defineCardHeader, defineCardPreview } from "./elements/card-primitives.js";
26
- export { defineBadge, defineCounterBadge, definePresenceBadge } from "./elements/badge.js";
27
- export { defineCheckbox, defineSwitch } from "./elements/toggle.js";
28
- export { defineTextArea } from "./elements/textarea.js";
29
- export { defineSpinner } from "./elements/spinner.js";
30
- export { defineMessageBar, defineMessageBarActions, defineMessageBarBody, defineMessageBarGroup, defineMessageBarTitle } from "./elements/message-bar.js";
31
- export { defineViewCard } from "./elements/view-card.js";
32
- export { defineDialog, defineDialogActions, defineDialogBody, defineDialogContent, defineDialogSurface, defineDialogTitle, defineDialogTrigger } from "./elements/dialog.js";
33
- export { defineDrawer, defineInlineDrawer } from "./elements/drawer.js";
34
- export { defineProgressBar } from "./elements/progress-bar.js";
35
- export { defineSelect } from "./elements/select.js";
36
- export { defineRadioGroup } from "./elements/radio-group.js";
37
- export { defineSpinButton } from "./elements/spin-button.js";
38
- export { defineSlider } from "./elements/slider.js";
39
- export { defineDatePicker } from "./elements/date-picker.js";
40
- export { defineCombobox } from "./elements/combobox.js";
41
- export { defineRichTextEditor, getRichTextEditorFieldOptions } from "./elements/rich-text-editor.js";
42
- export { defineAlert } from "./elements/alert.js";
43
- export { defineSkeleton, defineSkeletonItem } from "./elements/skeleton.js";
44
- export { DEFAULT_ACCENT, getSharePointUIStyleTokens } from "./appearance.js";
45
- export { applySharePointTheme, composeSharePointUIDesignThemes, getSharePointUIDesignTokens, getSharePointThemeColorPresets } from "./theme.js";
46
- export { getSharePointFieldAdapter, getSharePointFieldMetadataUrl, getSharePointListItemUrl, getSharePointLookupOptionsUrl, getSharePointNextPageUrl, serializeSharePointLookupValue, serializeSharePointChoiceValue, serializeSharePointFieldValue, serializeSharePointFieldValues } from "./sharepoint-fields.js";
47
- export { defineLink } from "./elements/link.js";
48
- export { defineDivider } from "./elements/divider.js";
49
- export { defineAccordion, defineAccordionHeader, defineAccordionPanel } from "./elements/accordion.js";
50
- export { defineAvatar } from "./elements/avatar.js";
51
- export { defineAvatarGroup } from "./elements/avatar-group.js";
52
- export { defineAvatarGroupItem, defineAvatarGroupPopover } from "./elements/avatar-group-primitives.js";
53
- export { definePersona } from "./elements/persona.js";
54
- export { defineVirtualList } from "./elements/virtual-list.js";
55
- export { defineDataGrid } from "./elements/data-grid.js";
56
- export { clampDataGridRowHeight, fitDataGridColumnWidths, formatDataGridClipboard, getDataGridColumnSizing, getDataGridGroupKey, isDataGridRowSelected, parseDataGridClipboard, parseDataGridClipboardValue, setDataGridRowSelected, writeDataGridClipboardText } from "./elements/data-grid-model.js";
57
- export { defineTree } from "./elements/tree.js";
58
- export { defineInteractionTag, defineInteractionTagPrimary, defineInteractionTagSecondary, defineTag, defineTagGroup } from "./elements/tags.js";
59
- export { defineTagPicker } from "./elements/tag-picker.js";
60
- export { defineRating } from "./elements/rating.js";
61
- export { defineRatingDisplay, defineRatingItem } from "./elements/rating-display.js";
62
- export { defineList, defineListItem } from "./elements/list.js";
63
- export { defineBreadcrumb, defineBreadcrumbButton, defineBreadcrumbDivider, defineBreadcrumbItem } from "./elements/breadcrumb.js";
64
- export { defineTabs } from "./elements/tabs.js";
65
- export { defineTooltip } from "./elements/tooltip.js";
66
- export { definePopover, definePopoverSurface, definePopoverTrigger } from "./elements/popover.js";
67
- export { defineTeachingPopover } from "./elements/teaching-popover.js";
68
- export { defineMenu, defineMenuItem, defineMenuItemLink, defineMenuDivider, defineMenuGroup, defineMenuGroupHeader, defineMenuList, defineMenuPopover, defineMenuSplitGroup, defineMenuTrigger, defineMenuBar, defineMenuBarItem } from "./elements/menu.js";
1
+ export { Button } from "./button.js";
2
+ export { Checkbox } from "./checkbox.js";
3
+ export { Field } from "./field.js";
4
+ export { FilterBar } from "./filter-bar.js";
5
+ export { FileDropzone } from "./file-dropzone.js";
6
+ export { AttachmentList } from "./attachment-list.js";
7
+ export { ListView } from "./list-view.js";
8
+ export { ViewSwitcher } from "./view-switcher.js";
9
+ export { TextArea } from "./textarea.js";
10
+ export { Radio } from "./radio.js";
11
+ export { RadioGroup } from "./radio-group.js";
12
+ export { Switch } from "./switch.js";
13
+ export { Select } from "./select.js";
14
+ export { ComboBox } from "./combobox.js";
15
+ export { DateRangePicker } from "./date-range-picker.js";
16
+ export { PersonPicker } from "./person-picker.js";
17
+ export { LookupPicker } from "./lookup-picker.js";
18
+ export { Text } from "./text.js";
19
+ export { Label } from "./label.js";
20
+ export { ButtonGroup } from "./button-group.js";
21
+ export { CommandBar } from "./command-bar.js";
22
+ export { CopyButton } from "./copy-button.js";
23
+ export { Link } from "./link.js";
24
+ export { Menu } from "./menu.js";
25
+ export { Badge } from "./badge.js";
26
+ export { Tag } from "./tag.js";
27
+ export { TagGroup } from "./tag-group.js";
28
+ export { Image } from "./image.js";
29
+ export { Avatar } from "./avatar.js";
30
+ export { Persona } from "./persona.js";
31
+ export { AvatarGroup } from "./avatar-group.js";
32
+ export { ViewCard } from "./view-card.js";
33
+ export { EmptyState } from "./empty-state.js";
34
+ export { Divider } from "./divider.js";
35
+ export { List } from "./list.js";
36
+ export { Accordion } from "./accordion.js";
37
+ export { Tabs } from "./tabs.js";
38
+ export { Breadcrumb } from "./breadcrumb.js";
39
+ export { Pagination } from "./pagination.js";
40
+ export { Rating } from "./rating.js";
41
+ export { ProgressBar } from "./progress-bar.js";
42
+ export { Spinner } from "./spinner.js";
43
+ export { Skeleton } from "./skeleton.js";
44
+ export { Alert } from "./alert.js";
45
+ export { Toast } from "./toast.js";
46
+ export { Table } from "./table.js";
47
+ export { DataGrid } from "./data-grid.js";
48
+ export { Tree } from "./tree.js";
49
+ export { Nav } from "./nav.js";
50
+ export { Carousel } from "./carousel.js";
51
+ export { TagPicker } from "./tag-picker.js";
52
+ export { SwatchPicker } from "./swatch-picker.js";
53
+ export { SharePointField } from "./sharepoint-field.js";
54
+ export { VirtualList } from "./virtual-list.js";
55
+ export { Dialog } from "./dialog.js";
56
+ export { Drawer } from "./drawer.js";
57
+ export { Popover } from "./popover.js";
58
+ export { Card } from "./card.js";
59
+ export { Input } from "./input.js";
60
+ export { SharePointThemeProvider, createSharePointTheme, useSharePointTheme } from "./theme.js";
@@ -0,0 +1,3 @@
1
+ import { type InputHTMLAttributes, type ReactElement } from "react";
2
+ export type InputProps = InputHTMLAttributes<HTMLInputElement>;
3
+ export declare function Input({ className, ...props }: InputProps): ReactElement;
package/dist/input.js ADDED
@@ -0,0 +1,4 @@
1
+ import { createElement } from "react";
2
+ export function Input({ className = "", ...props }) {
3
+ return createElement("input", { ...props, className: `spui-input ${className}`.trim() });
4
+ }
@@ -0,0 +1,3 @@
1
+ import { type LabelHTMLAttributes, type ReactElement } from "react";
2
+ export type LabelProps = LabelHTMLAttributes<HTMLLabelElement>;
3
+ export declare function Label({ className, ...props }: LabelProps): ReactElement;
package/dist/label.js ADDED
@@ -0,0 +1,4 @@
1
+ import { createElement } from "react";
2
+ export function Label({ className = "", ...props }) {
3
+ return createElement("label", { ...props, className: `spui-label ${className}`.trim() });
4
+ }
package/dist/link.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { type AnchorHTMLAttributes, type ReactElement } from "react";
2
+ export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
3
+ export declare function Link({ className, target, rel, ...props }: LinkProps): ReactElement;
package/dist/link.js ADDED
@@ -0,0 +1,9 @@
1
+ import { createElement } from "react";
2
+ export function Link({ className = "", target, rel, ...props }) {
3
+ return createElement("a", {
4
+ ...props,
5
+ target,
6
+ rel: target === "_blank" ? [rel, "noopener", "noreferrer"].filter(Boolean).join(" ") : rel,
7
+ className: `spui-link ${className}`.trim(),
8
+ });
9
+ }
@@ -0,0 +1,29 @@
1
+ import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
2
+ import { type DataGridColumn, type DataGridSort } from "./data-grid.js";
3
+ export type ListViewPage = {
4
+ currentPage: number;
5
+ totalPages: number;
6
+ onPageChange: (page: number) => void;
7
+ };
8
+ export type ListViewProps<Row extends Record<string, unknown>> = Omit<HTMLAttributes<HTMLElement>, "children" | "aria-label"> & {
9
+ label: string;
10
+ rows: readonly Row[];
11
+ columns: readonly DataGridColumn<Row>[];
12
+ getRowId: (row: Row) => string;
13
+ rowLabel?: (row: Row) => string;
14
+ selectable?: boolean;
15
+ selectedIds?: readonly string[];
16
+ onSelectionChange?: (ids: string[]) => void;
17
+ initialSort?: DataGridSort<Row>;
18
+ onSortChange?: (sort: DataGridSort<Row>) => void;
19
+ caption?: ReactNode;
20
+ toolbar?: ReactNode;
21
+ filters?: ReactNode;
22
+ loading?: boolean;
23
+ loadingLabel?: string;
24
+ emptyTitle?: ReactNode;
25
+ emptyDescription?: ReactNode;
26
+ emptyAction?: ReactNode;
27
+ page?: ListViewPage;
28
+ };
29
+ export declare function ListView<Row extends Record<string, unknown>>({ label, rows, columns, getRowId, rowLabel, selectable, selectedIds, onSelectionChange, initialSort, onSortChange, caption, toolbar, filters, loading, loadingLabel, emptyTitle, emptyDescription, emptyAction, page, className, ...props }: ListViewProps<Row>): ReactElement;
@@ -0,0 +1,14 @@
1
+ import { createElement } from "react";
2
+ import { DataGrid } from "./data-grid.js";
3
+ import { EmptyState } from "./empty-state.js";
4
+ import { Pagination } from "./pagination.js";
5
+ import { Spinner } from "./spinner.js";
6
+ export function ListView({ label, rows, columns, getRowId, rowLabel, selectable, selectedIds, onSelectionChange, initialSort, onSortChange, caption, toolbar, filters, loading = false, loadingLabel = `Loading ${label}`, emptyTitle = "No items found", emptyDescription = "Try changing or clearing the filters.", emptyAction, page, className = "", ...props }) {
7
+ return createElement("section", { ...props, "aria-label": label, className: `spui-list-view ${className}`.trim() }, (toolbar || filters) && createElement("div", { className: "spui-list-view-tools" }, toolbar, filters), loading ? createElement(Spinner, { label: loadingLabel })
8
+ : rows.length ? createElement((DataGrid), {
9
+ label: `${label} results`, caption, rows, columns, getRowId, rowLabel, selectable,
10
+ selectedIds, onSelectionChange, initialSort, onSortChange,
11
+ }) : createElement(EmptyState, { title: emptyTitle, description: emptyDescription, children: emptyAction }), !loading && page && createElement(Pagination, {
12
+ label: `${label} pages`, ...page,
13
+ }));
14
+ }
package/dist/list.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { type HTMLAttributes, type ReactElement } from "react";
2
+ export type ListProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
3
+ ordered?: boolean;
4
+ children?: ReactElement | ReactElement[];
5
+ };
6
+ export declare function List({ ordered, className, children, ...props }: ListProps): ReactElement;
package/dist/list.js ADDED
@@ -0,0 +1,5 @@
1
+ import { createElement } from "react";
2
+ export function List({ ordered, className = "", children, ...props }) {
3
+ const tag = ordered ? "ol" : "ul";
4
+ return createElement(tag, { ...props, className: `spui-list ${className}`.trim() }, children);
5
+ }
@@ -0,0 +1,12 @@
1
+ import { type ReactElement, type SelectHTMLAttributes } from "react";
2
+ export type LookupOption = {
3
+ id: string;
4
+ label: string;
5
+ };
6
+ export type LookupPickerProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, "children" | "id"> & {
7
+ id: string;
8
+ label: string;
9
+ options: readonly LookupOption[];
10
+ placeholder?: string;
11
+ };
12
+ export declare function LookupPicker({ id, label, options, placeholder, className, ...props }: LookupPickerProps): ReactElement;
@@ -0,0 +1,4 @@
1
+ import { createElement } from "react";
2
+ export function LookupPicker({ id, label, options, placeholder = "Choose an item", className = "", ...props }) {
3
+ return createElement("div", { className: "spui-field" }, createElement("label", { htmlFor: id }, label), createElement("select", { ...props, id, className: `spui-select ${className}`.trim() }, createElement("option", { value: "" }, placeholder), options.map(item => createElement("option", { key: item.id, value: item.id }, item.label))));
4
+ }
package/dist/menu.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { type DetailsHTMLAttributes, type ReactElement, type ReactNode } from "react";
2
+ export type MenuProps = Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "children"> & {
3
+ label: string;
4
+ children?: ReactNode;
5
+ };
6
+ export declare function Menu({ label, className, children, ...props }: MenuProps): ReactElement;
package/dist/menu.js ADDED
@@ -0,0 +1,4 @@
1
+ import { createElement } from "react";
2
+ export function Menu({ label, className = "", children, ...props }) {
3
+ return createElement("details", { ...props, className: `spui-menu ${className}`.trim() }, createElement("summary", null, label), createElement("div", { role: "group", className: "spui-menu-items", "aria-label": `${label} actions` }, children));
4
+ }
package/dist/nav.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
2
+ export type NavItem = {
3
+ id: string;
4
+ label: ReactNode;
5
+ href: string;
6
+ current?: boolean;
7
+ };
8
+ export type NavProps = Omit<HTMLAttributes<HTMLElement>, "children" | "aria-label"> & {
9
+ label: string;
10
+ items: readonly NavItem[];
11
+ };
12
+ export declare function Nav({ label, items, className, ...props }: NavProps): ReactElement;
package/dist/nav.js ADDED
@@ -0,0 +1,4 @@
1
+ import { createElement } from "react";
2
+ export function Nav({ label, items, className = "", ...props }) {
3
+ return createElement("nav", { ...props, "aria-label": label, className: `spui-nav ${className}`.trim() }, createElement("ul", null, items.map(item => createElement("li", { key: item.id }, createElement("a", { href: item.href, "aria-current": item.current ? "page" : undefined }, item.label)))));
4
+ }
@@ -0,0 +1,11 @@
1
+ import { type HTMLAttributes, type ReactElement } from "react";
2
+ export type PaginationProps = Omit<HTMLAttributes<HTMLElement>, "children" | "aria-label"> & {
3
+ label?: string;
4
+ currentPage: number;
5
+ totalPages: number;
6
+ onPageChange: (page: number) => void;
7
+ previousLabel?: string;
8
+ nextLabel?: string;
9
+ pageLabel?: (page: number, total: number) => string;
10
+ };
11
+ export declare function Pagination({ label, currentPage, totalPages, onPageChange, previousLabel, nextLabel, pageLabel, className, ...props }: PaginationProps): ReactElement;
@@ -0,0 +1,5 @@
1
+ import { createElement } from "react";
2
+ export function Pagination({ label = "Pagination", currentPage, totalPages, onPageChange, previousLabel = "Previous page", nextLabel = "Next page", pageLabel = (page, total) => total > 0 ? `Page ${page} of ${total}` : "No pages", className = "", ...props }) {
3
+ const page = Math.min(Math.max(1, currentPage), Math.max(1, totalPages));
4
+ return createElement("nav", { ...props, "aria-label": label, className: `spui-pagination ${className}`.trim() }, createElement("button", { type: "button", disabled: page <= 1, onClick: () => onPageChange(page - 1) }, previousLabel), createElement("span", { "aria-live": "polite" }, pageLabel(page, totalPages)), createElement("button", { type: "button", disabled: page >= totalPages, onClick: () => onPageChange(page + 1) }, nextLabel));
5
+ }
@@ -0,0 +1,13 @@
1
+ import { type ReactElement, type SelectHTMLAttributes } from "react";
2
+ export type PersonOption = {
3
+ value: string;
4
+ name: string;
5
+ detail?: string;
6
+ };
7
+ export type PersonPickerProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, "children" | "id"> & {
8
+ id: string;
9
+ label: string;
10
+ options: readonly PersonOption[];
11
+ placeholder?: string;
12
+ };
13
+ export declare function PersonPicker({ id, label, options, placeholder, className, ...props }: PersonPickerProps): ReactElement;
@@ -0,0 +1,4 @@
1
+ import { createElement } from "react";
2
+ export function PersonPicker({ id, label, options, placeholder = "Choose a person", className = "", ...props }) {
3
+ return createElement("div", { className: "spui-field" }, createElement("label", { htmlFor: id }, label), createElement("select", { ...props, id, className: `spui-select ${className}`.trim() }, createElement("option", { value: "" }, placeholder), options.map(person => createElement("option", { key: person.value, value: person.value }, person.detail ? `${person.name} — ${person.detail}` : person.name))));
4
+ }
@@ -0,0 +1,7 @@
1
+ import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
2
+ export type PersonaProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
3
+ name: string;
4
+ description?: ReactNode;
5
+ src?: string;
6
+ };
7
+ export declare function Persona({ name, description, src, className, ...props }: PersonaProps): ReactElement;
@@ -0,0 +1,5 @@
1
+ import { createElement } from "react";
2
+ import { Avatar } from "./avatar.js";
3
+ export function Persona({ name, description, src, className = "", ...props }) {
4
+ return createElement("div", { ...props, className: `spui-persona ${className}`.trim() }, createElement(Avatar, { name, src }), createElement("span", { className: "spui-persona-copy" }, createElement("strong", null, name), description && createElement("span", null, description)));
5
+ }
@@ -0,0 +1,6 @@
1
+ import { type DetailsHTMLAttributes, type ReactElement, type ReactNode } from "react";
2
+ export type PopoverProps = Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "children"> & {
3
+ label: string;
4
+ children?: ReactNode;
5
+ };
6
+ export declare function Popover({ label, className, children, ...props }: PopoverProps): ReactElement;
@@ -0,0 +1,4 @@
1
+ import { createElement } from "react";
2
+ export function Popover({ label, className = "", children, ...props }) {
3
+ return createElement("details", { ...props, className: `spui-popover ${className}`.trim() }, createElement("summary", null, label), createElement("div", { role: "region", "aria-label": `${label} details` }, children));
4
+ }
@@ -0,0 +1,5 @@
1
+ import { type ProgressHTMLAttributes, type ReactElement } from "react";
2
+ export type ProgressBarProps = Omit<ProgressHTMLAttributes<HTMLProgressElement>, "children" | "aria-label"> & {
3
+ label: string;
4
+ };
5
+ export declare function ProgressBar({ label, className, ...props }: ProgressBarProps): ReactElement;
@@ -0,0 +1,5 @@
1
+ import { createElement, useId } from "react";
2
+ export function ProgressBar({ label, className = "", ...props }) {
3
+ const id = useId();
4
+ return createElement("div", { className: "spui-progress" }, createElement("label", { htmlFor: id }, label), createElement("progress", { ...props, id, className: `spui-progress-bar ${className}`.trim() }));
5
+ }
@@ -0,0 +1,6 @@
1
+ import { type FieldsetHTMLAttributes, type ReactElement, type ReactNode } from "react";
2
+ export type RadioGroupProps = Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "children"> & {
3
+ label: ReactNode;
4
+ children?: ReactNode;
5
+ };
6
+ export declare function RadioGroup({ label, className, children, ...props }: RadioGroupProps): ReactElement;
@@ -0,0 +1,4 @@
1
+ import { createElement } from "react";
2
+ export function RadioGroup({ label, className = "", children, ...props }) {
3
+ return createElement("fieldset", { ...props, className: `spui-radio-group ${className}`.trim() }, createElement("legend", null, label), children);
4
+ }
@@ -0,0 +1,3 @@
1
+ import { type InputHTMLAttributes, type ReactElement } from "react";
2
+ export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type">;
3
+ export declare function Radio({ className, ...props }: RadioProps): ReactElement;
package/dist/radio.js ADDED
@@ -0,0 +1,4 @@
1
+ import { createElement } from "react";
2
+ export function Radio({ className = "", ...props }) {
3
+ return createElement("input", { ...props, type: "radio", className: `spui-radio ${className}`.trim() });
4
+ }
@@ -0,0 +1,8 @@
1
+ import { type InputHTMLAttributes, type ReactElement } from "react";
2
+ export type RatingProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "min" | "max" | "step"> & {
3
+ label: string;
4
+ min?: number;
5
+ max?: number;
6
+ step?: number;
7
+ };
8
+ export declare function Rating({ label, min, max, step, className, ...props }: RatingProps): ReactElement;
package/dist/rating.js ADDED
@@ -0,0 +1,5 @@
1
+ import { createElement, useId } from "react";
2
+ export function Rating({ label, min = 0, max = 5, step = 1, className = "", ...props }) {
3
+ const id = useId();
4
+ return createElement("div", { className: "spui-field" }, createElement("label", { htmlFor: id }, label), createElement("input", { ...props, id, type: "number", min, max, step, className: `spui-input ${className}`.trim() }));
5
+ }