@ifloppy/maxcraftmc-ui-svelte 0.1.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 (495) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +11 -0
  4. package/README.md +122 -0
  5. package/css/_popover.scss +325 -0
  6. package/css/all.css +1 -0
  7. package/css/all.scss +81 -0
  8. package/css/g10.css +1 -0
  9. package/css/g10.scss +34 -0
  10. package/css/g100.css +1 -0
  11. package/css/g100.scss +33 -0
  12. package/css/g80.css +1 -0
  13. package/css/g80.scss +34 -0
  14. package/css/g90.css +1 -0
  15. package/css/g90.scss +33 -0
  16. package/css/maxcraft.css +3239 -0
  17. package/css/white.css +1 -0
  18. package/css/white.scss +33 -0
  19. package/docs/compatibility.md +53 -0
  20. package/docs/component-catalog.md +99 -0
  21. package/docs/consumer-checklist.md +42 -0
  22. package/docs/contributing.md +80 -0
  23. package/docs/hugo-integration.md +94 -0
  24. package/docs/installation.md +89 -0
  25. package/docs/publishing.md +74 -0
  26. package/docs/svelte-migration.md +123 -0
  27. package/docs/theme-tokens.md +60 -0
  28. package/examples/component-gallery/index.html +12 -0
  29. package/examples/component-gallery/src/App.svelte +474 -0
  30. package/examples/component-gallery/src/main.js +6 -0
  31. package/examples/component-gallery/vite.config.js +6 -0
  32. package/examples/hugo-head.html +25 -0
  33. package/examples/hugo-module-mounts.toml +34 -0
  34. package/examples/svelte-basic/+layout.svelte +11 -0
  35. package/examples/svelte-basic/+page.svelte +150 -0
  36. package/package.json +80 -0
  37. package/src/Accordion/Accordion.svelte +60 -0
  38. package/src/Accordion/AccordionItem.svelte +79 -0
  39. package/src/Accordion/AccordionSkeleton.svelte +63 -0
  40. package/src/Accordion/index.js +3 -0
  41. package/src/AspectRatio/AspectRatio.svelte +25 -0
  42. package/src/AspectRatio/index.js +1 -0
  43. package/src/Breadcrumb/Breadcrumb.svelte +40 -0
  44. package/src/Breadcrumb/BreadcrumbItem.svelte +46 -0
  45. package/src/Breadcrumb/BreadcrumbSkeleton.svelte +26 -0
  46. package/src/Breadcrumb/index.js +3 -0
  47. package/src/Breakpoint/Breakpoint.svelte +47 -0
  48. package/src/Breakpoint/breakpointObserver.d.ts +28 -0
  49. package/src/Breakpoint/breakpointObserver.js +82 -0
  50. package/src/Breakpoint/breakpoints.d.ts +11 -0
  51. package/src/Breakpoint/breakpoints.js +13 -0
  52. package/src/Breakpoint/index.d.ts +4 -0
  53. package/src/Breakpoint/index.js +3 -0
  54. package/src/Button/Button.svelte +212 -0
  55. package/src/Button/ButtonSet.svelte +12 -0
  56. package/src/Button/ButtonSkeleton.svelte +54 -0
  57. package/src/Button/index.js +3 -0
  58. package/src/Checkbox/Checkbox.svelte +130 -0
  59. package/src/Checkbox/CheckboxSkeleton.svelte +14 -0
  60. package/src/Checkbox/InlineCheckbox.svelte +41 -0
  61. package/src/Checkbox/index.js +3 -0
  62. package/src/CodeSnippet/CodeSnippet.svelte +280 -0
  63. package/src/CodeSnippet/CodeSnippetSkeleton.svelte +27 -0
  64. package/src/CodeSnippet/index.js +2 -0
  65. package/src/ComboBox/ComboBox.svelte +432 -0
  66. package/src/ComboBox/index.js +1 -0
  67. package/src/ComposedModal/ComposedModal.svelte +172 -0
  68. package/src/ComposedModal/ModalBody.svelte +22 -0
  69. package/src/ComposedModal/ModalFooter.svelte +90 -0
  70. package/src/ComposedModal/ModalHeader.svelte +65 -0
  71. package/src/ComposedModal/index.js +4 -0
  72. package/src/ContentSwitcher/ContentSwitcher.svelte +74 -0
  73. package/src/ContentSwitcher/Switch.svelte +72 -0
  74. package/src/ContentSwitcher/index.js +2 -0
  75. package/src/ContextMenu/ContextMenu.svelte +196 -0
  76. package/src/ContextMenu/ContextMenuDivider.svelte +1 -0
  77. package/src/ContextMenu/ContextMenuGroup.svelte +36 -0
  78. package/src/ContextMenu/ContextMenuOption.svelte +286 -0
  79. package/src/ContextMenu/ContextMenuRadioGroup.svelte +34 -0
  80. package/src/ContextMenu/index.js +5 -0
  81. package/src/CopyButton/CopyButton.svelte +82 -0
  82. package/src/CopyButton/index.js +1 -0
  83. package/src/DataTable/DataTable.svelte +609 -0
  84. package/src/DataTable/DataTableSkeleton.svelte +102 -0
  85. package/src/DataTable/DataTableTypes.d.ts +18 -0
  86. package/src/DataTable/Table.svelte +60 -0
  87. package/src/DataTable/TableBody.svelte +3 -0
  88. package/src/DataTable/TableCell.svelte +4 -0
  89. package/src/DataTable/TableContainer.svelte +28 -0
  90. package/src/DataTable/TableHead.svelte +5 -0
  91. package/src/DataTable/TableHeader.svelte +76 -0
  92. package/src/DataTable/TableRow.svelte +4 -0
  93. package/src/DataTable/Toolbar.svelte +34 -0
  94. package/src/DataTable/ToolbarBatchActions.svelte +99 -0
  95. package/src/DataTable/ToolbarContent.svelte +3 -0
  96. package/src/DataTable/ToolbarMenu.svelte +23 -0
  97. package/src/DataTable/ToolbarMenuItem.svelte +9 -0
  98. package/src/DataTable/ToolbarSearch.svelte +122 -0
  99. package/src/DataTable/index.js +15 -0
  100. package/src/DatePicker/DatePicker.svelte +271 -0
  101. package/src/DatePicker/DatePickerInput.svelte +173 -0
  102. package/src/DatePicker/DatePickerSkeleton.svelte +36 -0
  103. package/src/DatePicker/createCalendar.js +100 -0
  104. package/src/DatePicker/index.js +3 -0
  105. package/src/Dropdown/Dropdown.svelte +336 -0
  106. package/src/Dropdown/DropdownSkeleton.svelte +23 -0
  107. package/src/Dropdown/index.js +2 -0
  108. package/src/FileUploader/FileUploader.svelte +177 -0
  109. package/src/FileUploader/FileUploaderButton.svelte +125 -0
  110. package/src/FileUploader/FileUploaderDropContainer.svelte +129 -0
  111. package/src/FileUploader/FileUploaderItem.svelte +79 -0
  112. package/src/FileUploader/FileUploaderSkeleton.svelte +19 -0
  113. package/src/FileUploader/Filename.svelte +57 -0
  114. package/src/FileUploader/index.js +6 -0
  115. package/src/FluidForm/FluidForm.svelte +23 -0
  116. package/src/FluidForm/index.js +1 -0
  117. package/src/Form/Form.svelte +20 -0
  118. package/src/Form/index.js +1 -0
  119. package/src/FormGroup/FormGroup.svelte +44 -0
  120. package/src/FormGroup/index.js +1 -0
  121. package/src/FormItem/FormItem.svelte +12 -0
  122. package/src/FormItem/index.js +1 -0
  123. package/src/FormLabel/FormLabel.svelte +18 -0
  124. package/src/FormLabel/index.js +1 -0
  125. package/src/Grid/Column.svelte +119 -0
  126. package/src/Grid/Grid.svelte +58 -0
  127. package/src/Grid/Row.svelte +54 -0
  128. package/src/Grid/index.js +3 -0
  129. package/src/ImageLoader/ImageLoader.svelte +117 -0
  130. package/src/ImageLoader/index.js +1 -0
  131. package/src/InlineLoading/InlineLoading.svelte +82 -0
  132. package/src/InlineLoading/index.js +1 -0
  133. package/src/Link/Link.svelte +89 -0
  134. package/src/Link/OutboundLink.svelte +18 -0
  135. package/src/Link/index.js +2 -0
  136. package/src/ListBox/ListBox.svelte +64 -0
  137. package/src/ListBox/ListBoxField.svelte +67 -0
  138. package/src/ListBox/ListBoxMenu.svelte +18 -0
  139. package/src/ListBox/ListBoxMenuIcon.svelte +38 -0
  140. package/src/ListBox/ListBoxMenuItem.svelte +38 -0
  141. package/src/ListBox/ListBoxSelection.svelte +114 -0
  142. package/src/ListBox/index.js +6 -0
  143. package/src/ListItem/ListItem.svelte +12 -0
  144. package/src/ListItem/index.js +1 -0
  145. package/src/Loading/Loading.svelte +76 -0
  146. package/src/Loading/index.js +1 -0
  147. package/src/LocalStorage/LocalStorage.svelte +71 -0
  148. package/src/LocalStorage/index.js +1 -0
  149. package/src/Modal/Modal.svelte +304 -0
  150. package/src/Modal/index.js +1 -0
  151. package/src/Modal/modalStore.js +36 -0
  152. package/src/MultiSelect/MultiSelect.svelte +557 -0
  153. package/src/MultiSelect/index.js +1 -0
  154. package/src/Notification/InlineNotification.svelte +114 -0
  155. package/src/Notification/NotificationActionButton.svelte +18 -0
  156. package/src/Notification/NotificationButton.svelte +47 -0
  157. package/src/Notification/NotificationIcon.svelte +41 -0
  158. package/src/Notification/ToastNotification.svelte +131 -0
  159. package/src/Notification/index.js +5 -0
  160. package/src/NumberInput/NumberInput.svelte +279 -0
  161. package/src/NumberInput/NumberInputSkeleton.svelte +20 -0
  162. package/src/NumberInput/index.js +2 -0
  163. package/src/OrderedList/OrderedList.svelte +26 -0
  164. package/src/OrderedList/index.js +1 -0
  165. package/src/OverflowMenu/OverflowMenu.svelte +259 -0
  166. package/src/OverflowMenu/OverflowMenuItem.svelte +117 -0
  167. package/src/OverflowMenu/index.js +2 -0
  168. package/src/Pagination/Pagination.svelte +216 -0
  169. package/src/Pagination/PaginationSkeleton.svelte +24 -0
  170. package/src/Pagination/index.js +2 -0
  171. package/src/PaginationNav/PaginationItem.svelte +23 -0
  172. package/src/PaginationNav/PaginationNav.svelte +190 -0
  173. package/src/PaginationNav/PaginationOverflow.svelte +56 -0
  174. package/src/PaginationNav/index.js +1 -0
  175. package/src/Popover/Popover.svelte +73 -0
  176. package/src/Popover/index.js +1 -0
  177. package/src/ProgressBar/ProgressBar.svelte +110 -0
  178. package/src/ProgressBar/index.js +1 -0
  179. package/src/ProgressIndicator/ProgressIndicator.svelte +79 -0
  180. package/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte +38 -0
  181. package/src/ProgressIndicator/ProgressStep.svelte +107 -0
  182. package/src/ProgressIndicator/index.js +3 -0
  183. package/src/RadioButton/RadioButton.svelte +93 -0
  184. package/src/RadioButton/RadioButtonSkeleton.svelte +13 -0
  185. package/src/RadioButton/index.js +2 -0
  186. package/src/RadioButtonGroup/RadioButtonGroup.svelte +120 -0
  187. package/src/RadioButtonGroup/index.js +1 -0
  188. package/src/RecursiveList/RecursiveList.svelte +38 -0
  189. package/src/RecursiveList/RecursiveListItem.svelte +19 -0
  190. package/src/RecursiveList/index.js +1 -0
  191. package/src/Search/Search.svelte +173 -0
  192. package/src/Search/SearchSkeleton.svelte +24 -0
  193. package/src/Search/index.js +2 -0
  194. package/src/Select/Select.svelte +248 -0
  195. package/src/Select/SelectItem.svelte +63 -0
  196. package/src/Select/SelectItemGroup.svelte +11 -0
  197. package/src/Select/SelectSkeleton.svelte +22 -0
  198. package/src/Select/index.js +4 -0
  199. package/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte +10 -0
  200. package/src/SkeletonPlaceholder/index.js +1 -0
  201. package/src/SkeletonText/SkeletonText.svelte +50 -0
  202. package/src/SkeletonText/index.js +1 -0
  203. package/src/Slider/Slider.svelte +232 -0
  204. package/src/Slider/SliderSkeleton.svelte +28 -0
  205. package/src/Slider/index.js +2 -0
  206. package/src/StructuredList/StructuredList.svelte +53 -0
  207. package/src/StructuredList/StructuredListBody.svelte +13 -0
  208. package/src/StructuredList/StructuredListCell.svelte +22 -0
  209. package/src/StructuredList/StructuredListHead.svelte +13 -0
  210. package/src/StructuredList/StructuredListInput.svelte +45 -0
  211. package/src/StructuredList/StructuredListRow.svelte +44 -0
  212. package/src/StructuredList/StructuredListSkeleton.svelte +36 -0
  213. package/src/StructuredList/index.js +7 -0
  214. package/src/Tabs/Tab.svelte +74 -0
  215. package/src/Tabs/TabContent.svelte +26 -0
  216. package/src/Tabs/Tabs.svelte +168 -0
  217. package/src/Tabs/TabsSkeleton.svelte +34 -0
  218. package/src/Tabs/index.js +4 -0
  219. package/src/Tag/Tag.svelte +172 -0
  220. package/src/Tag/TagSkeleton.svelte +17 -0
  221. package/src/Tag/index.js +2 -0
  222. package/src/TextArea/TextArea.svelte +134 -0
  223. package/src/TextArea/TextAreaSkeleton.svelte +20 -0
  224. package/src/TextArea/index.js +2 -0
  225. package/src/TextInput/PasswordInput.svelte +265 -0
  226. package/src/TextInput/TextInput.svelte +249 -0
  227. package/src/TextInput/TextInputSkeleton.svelte +20 -0
  228. package/src/TextInput/index.js +3 -0
  229. package/src/Theme/Theme.svelte +120 -0
  230. package/src/Theme/index.js +1 -0
  231. package/src/Tile/ClickableTile.svelte +43 -0
  232. package/src/Tile/ExpandableTile.svelte +104 -0
  233. package/src/Tile/RadioTile.svelte +95 -0
  234. package/src/Tile/SelectableTile.svelte +95 -0
  235. package/src/Tile/Tile.svelte +18 -0
  236. package/src/Tile/TileGroup.svelte +66 -0
  237. package/src/Tile/index.js +6 -0
  238. package/src/TimePicker/TimePicker.svelte +115 -0
  239. package/src/TimePicker/TimePickerSelect.svelte +78 -0
  240. package/src/TimePicker/index.js +2 -0
  241. package/src/Toggle/Toggle.svelte +107 -0
  242. package/src/Toggle/ToggleSkeleton.svelte +51 -0
  243. package/src/Toggle/index.js +2 -0
  244. package/src/Tooltip/Tooltip.svelte +269 -0
  245. package/src/Tooltip/TooltipFooter.svelte +29 -0
  246. package/src/Tooltip/index.js +2 -0
  247. package/src/TooltipDefinition/TooltipDefinition.svelte +85 -0
  248. package/src/TooltipDefinition/index.js +1 -0
  249. package/src/TooltipIcon/TooltipIcon.svelte +83 -0
  250. package/src/TooltipIcon/index.js +1 -0
  251. package/src/TreeView/TreeView.svelte +266 -0
  252. package/src/TreeView/TreeViewNode.svelte +133 -0
  253. package/src/TreeView/TreeViewNodeList.svelte +179 -0
  254. package/src/TreeView/index.d.ts +1 -0
  255. package/src/TreeView/index.js +1 -0
  256. package/src/Truncate/Truncate.svelte +12 -0
  257. package/src/Truncate/index.js +2 -0
  258. package/src/Truncate/truncate.d.ts +12 -0
  259. package/src/Truncate/truncate.js +29 -0
  260. package/src/UIShell/Content.svelte +24 -0
  261. package/src/UIShell/HamburgerMenu.svelte +45 -0
  262. package/src/UIShell/Header.svelte +103 -0
  263. package/src/UIShell/HeaderAction.svelte +160 -0
  264. package/src/UIShell/HeaderActionLink.svelte +43 -0
  265. package/src/UIShell/HeaderGlobalAction.svelte +33 -0
  266. package/src/UIShell/HeaderNav.svelte +13 -0
  267. package/src/UIShell/HeaderNavItem.svelte +66 -0
  268. package/src/UIShell/HeaderNavMenu.svelte +106 -0
  269. package/src/UIShell/HeaderPanelDivider.svelte +22 -0
  270. package/src/UIShell/HeaderPanelLink.svelte +23 -0
  271. package/src/UIShell/HeaderPanelLinks.svelte +3 -0
  272. package/src/UIShell/HeaderSearch.svelte +338 -0
  273. package/src/UIShell/HeaderUtilities.svelte +3 -0
  274. package/src/UIShell/SideNav.svelte +84 -0
  275. package/src/UIShell/SideNavDivider.svelte +1 -0
  276. package/src/UIShell/SideNavItems.svelte +3 -0
  277. package/src/UIShell/SideNavLink.svelte +54 -0
  278. package/src/UIShell/SideNavMenu.svelte +59 -0
  279. package/src/UIShell/SideNavMenuItem.svelte +32 -0
  280. package/src/UIShell/SkipToContent.svelte +11 -0
  281. package/src/UIShell/index.js +20 -0
  282. package/src/UIShell/navStore.js +7 -0
  283. package/src/UnorderedList/UnorderedList.svelte +22 -0
  284. package/src/UnorderedList/index.js +1 -0
  285. package/src/icons/Add.svelte +28 -0
  286. package/src/icons/ArrowUp.svelte +28 -0
  287. package/src/icons/ArrowsVertical.svelte +28 -0
  288. package/src/icons/Calendar.svelte +28 -0
  289. package/src/icons/CaretDown.svelte +26 -0
  290. package/src/icons/CaretLeft.svelte +26 -0
  291. package/src/icons/CaretRight.svelte +26 -0
  292. package/src/icons/Checkmark.svelte +26 -0
  293. package/src/icons/CheckmarkFilled.svelte +32 -0
  294. package/src/icons/CheckmarkOutline.svelte +30 -0
  295. package/src/icons/ChevronDown.svelte +26 -0
  296. package/src/icons/ChevronRight.svelte +26 -0
  297. package/src/icons/CircleDash.svelte +28 -0
  298. package/src/icons/Close.svelte +28 -0
  299. package/src/icons/Copy.svelte +28 -0
  300. package/src/icons/EditOff.svelte +28 -0
  301. package/src/icons/ErrorFilled.svelte +33 -0
  302. package/src/icons/IconSearch.svelte +28 -0
  303. package/src/icons/Incomplete.svelte +28 -0
  304. package/src/icons/Information.svelte +30 -0
  305. package/src/icons/InformationFilled.svelte +32 -0
  306. package/src/icons/InformationSquareFilled.svelte +32 -0
  307. package/src/icons/Launch.svelte +30 -0
  308. package/src/icons/Menu.svelte +26 -0
  309. package/src/icons/OverflowMenuHorizontal.svelte +27 -0
  310. package/src/icons/OverflowMenuVertical.svelte +27 -0
  311. package/src/icons/Settings.svelte +30 -0
  312. package/src/icons/Subtract.svelte +26 -0
  313. package/src/icons/Switcher.svelte +28 -0
  314. package/src/icons/View.svelte +30 -0
  315. package/src/icons/ViewOff.svelte +30 -0
  316. package/src/icons/Warning.svelte +29 -0
  317. package/src/icons/WarningAltFilled.svelte +34 -0
  318. package/src/icons/WarningFilled.svelte +33 -0
  319. package/src/index.js +155 -0
  320. package/src/utils/toHierarchy.d.ts +21 -0
  321. package/src/utils/toHierarchy.js +49 -0
  322. package/tokens/maxcraft.css +84 -0
  323. package/types/Accordion/Accordion.svelte.d.ts +39 -0
  324. package/types/Accordion/AccordionItem.svelte.d.ts +48 -0
  325. package/types/Accordion/AccordionSkeleton.svelte.d.ts +45 -0
  326. package/types/AspectRatio/AspectRatio.svelte.d.ts +31 -0
  327. package/types/Breadcrumb/Breadcrumb.svelte.d.ts +27 -0
  328. package/types/Breadcrumb/BreadcrumbItem.svelte.d.ts +33 -0
  329. package/types/Breadcrumb/BreadcrumbSkeleton.svelte.d.ts +33 -0
  330. package/types/Breakpoint/Breakpoint.svelte.d.ts +30 -0
  331. package/types/Breakpoint/breakpointObserver.d.ts +28 -0
  332. package/types/Breakpoint/breakpoints.d.ts +11 -0
  333. package/types/Breakpoint/index.d.ts +4 -0
  334. package/types/Button/Button.svelte.d.ts +140 -0
  335. package/types/Button/ButtonSet.svelte.d.ts +22 -0
  336. package/types/Button/ButtonSkeleton.svelte.d.ts +35 -0
  337. package/types/Checkbox/Checkbox.svelte.d.ts +109 -0
  338. package/types/Checkbox/CheckboxSkeleton.svelte.d.ts +21 -0
  339. package/types/CodeSnippet/CodeSnippet.svelte.d.ts +140 -0
  340. package/types/CodeSnippet/CodeSnippetSkeleton.svelte.d.ts +27 -0
  341. package/types/ComboBox/ComboBox.svelte.d.ts +189 -0
  342. package/types/ComposedModal/ComposedModal.svelte.d.ts +69 -0
  343. package/types/ComposedModal/ModalBody.svelte.d.ts +28 -0
  344. package/types/ComposedModal/ModalFooter.svelte.d.ts +65 -0
  345. package/types/ComposedModal/ModalHeader.svelte.d.ts +58 -0
  346. package/types/ContentSwitcher/ContentSwitcher.svelte.d.ts +34 -0
  347. package/types/ContentSwitcher/Switch.svelte.d.ts +53 -0
  348. package/types/ContextMenu/ContextMenu.svelte.d.ts +53 -0
  349. package/types/ContextMenu/ContextMenuDivider.svelte.d.ts +9 -0
  350. package/types/ContextMenu/ContextMenuGroup.svelte.d.ts +20 -0
  351. package/types/ContextMenu/ContextMenuOption.svelte.d.ts +86 -0
  352. package/types/ContextMenu/ContextMenuRadioGroup.svelte.d.ts +21 -0
  353. package/types/CopyButton/CopyButton.svelte.d.ts +50 -0
  354. package/types/DataTable/DataTable.svelte.d.ts +238 -0
  355. package/types/DataTable/DataTableSkeleton.svelte.d.ts +67 -0
  356. package/types/DataTable/DataTableTypes.d.ts +18 -0
  357. package/types/DataTable/Table.svelte.d.ts +52 -0
  358. package/types/DataTable/TableBody.svelte.d.ts +16 -0
  359. package/types/DataTable/TableCell.svelte.d.ts +21 -0
  360. package/types/DataTable/TableContainer.svelte.d.ts +40 -0
  361. package/types/DataTable/TableHead.svelte.d.ts +21 -0
  362. package/types/DataTable/TableHeader.svelte.d.ts +57 -0
  363. package/types/DataTable/TableRow.svelte.d.ts +21 -0
  364. package/types/DataTable/Toolbar.svelte.d.ts +22 -0
  365. package/types/DataTable/ToolbarBatchActions.svelte.d.ts +28 -0
  366. package/types/DataTable/ToolbarContent.svelte.d.ts +9 -0
  367. package/types/DataTable/ToolbarMenu.svelte.d.ts +10 -0
  368. package/types/DataTable/ToolbarMenuItem.svelte.d.ts +10 -0
  369. package/types/DataTable/ToolbarSearch.svelte.d.ts +84 -0
  370. package/types/DatePicker/DatePicker.svelte.d.ts +105 -0
  371. package/types/DatePicker/DatePickerInput.svelte.d.ts +118 -0
  372. package/types/DatePicker/DatePickerSkeleton.svelte.d.ts +33 -0
  373. package/types/Dropdown/Dropdown.svelte.d.ts +160 -0
  374. package/types/Dropdown/DropdownSkeleton.svelte.d.ts +27 -0
  375. package/types/FileUploader/FileUploader.svelte.d.ts +104 -0
  376. package/types/FileUploader/FileUploaderButton.svelte.d.ts +98 -0
  377. package/types/FileUploader/FileUploaderDropContainer.svelte.d.ts +92 -0
  378. package/types/FileUploader/FileUploaderItem.svelte.d.ts +69 -0
  379. package/types/FileUploader/FileUploaderSkeleton.svelte.d.ts +21 -0
  380. package/types/FileUploader/Filename.svelte.d.ts +36 -0
  381. package/types/FluidForm/FluidForm.svelte.d.ts +23 -0
  382. package/types/Form/Form.svelte.d.ts +29 -0
  383. package/types/FormGroup/FormGroup.svelte.d.ts +57 -0
  384. package/types/FormItem/FormItem.svelte.d.ts +21 -0
  385. package/types/FormLabel/FormLabel.svelte.d.ts +27 -0
  386. package/types/Grid/Column.svelte.d.ts +92 -0
  387. package/types/Grid/Grid.svelte.d.ts +65 -0
  388. package/types/Grid/Row.svelte.d.ts +59 -0
  389. package/types/ImageLoader/ImageLoader.svelte.d.ts +64 -0
  390. package/types/InlineLoading/InlineLoading.svelte.d.ts +47 -0
  391. package/types/Link/Link.svelte.d.ts +64 -0
  392. package/types/Link/OutboundLink.svelte.d.ts +15 -0
  393. package/types/ListBox/ListBox.svelte.d.ts +70 -0
  394. package/types/ListBox/ListBoxField.svelte.d.ts +67 -0
  395. package/types/ListBox/ListBoxMenu.svelte.d.ts +28 -0
  396. package/types/ListBox/ListBoxMenuIcon.svelte.d.ts +35 -0
  397. package/types/ListBox/ListBoxMenuItem.svelte.d.ts +38 -0
  398. package/types/ListBox/ListBoxSelection.svelte.d.ts +47 -0
  399. package/types/ListItem/ListItem.svelte.d.ts +21 -0
  400. package/types/Loading/Loading.svelte.d.ts +40 -0
  401. package/types/LocalStorage/LocalStorage.svelte.d.ts +34 -0
  402. package/types/Modal/Modal.svelte.d.ts +156 -0
  403. package/types/MultiSelect/MultiSelect.svelte.d.ts +264 -0
  404. package/types/Notification/InlineNotification.svelte.d.ts +82 -0
  405. package/types/Notification/NotificationActionButton.svelte.d.ts +15 -0
  406. package/types/Notification/NotificationButton.svelte.d.ts +45 -0
  407. package/types/Notification/NotificationIcon.svelte.d.ts +33 -0
  408. package/types/Notification/ToastNotification.svelte.d.ts +95 -0
  409. package/types/NumberInput/NumberInput.svelte.d.ts +168 -0
  410. package/types/NumberInput/NumberInputSkeleton.svelte.d.ts +27 -0
  411. package/types/OrderedList/OrderedList.svelte.d.ts +39 -0
  412. package/types/OverflowMenu/OverflowMenu.svelte.d.ts +96 -0
  413. package/types/OverflowMenu/OverflowMenuItem.svelte.d.ts +71 -0
  414. package/types/Pagination/Pagination.svelte.d.ts +129 -0
  415. package/types/Pagination/PaginationSkeleton.svelte.d.ts +21 -0
  416. package/types/PaginationNav/PaginationNav.svelte.d.ts +63 -0
  417. package/types/Popover/Popover.svelte.d.ts +70 -0
  418. package/types/ProgressBar/ProgressBar.svelte.d.ts +70 -0
  419. package/types/ProgressIndicator/ProgressIndicator.svelte.d.ts +46 -0
  420. package/types/ProgressIndicator/ProgressIndicatorSkeleton.svelte.d.ts +34 -0
  421. package/types/ProgressIndicator/ProgressStep.svelte.d.ts +70 -0
  422. package/types/RadioButton/RadioButton.svelte.d.ts +80 -0
  423. package/types/RadioButton/RadioButtonSkeleton.svelte.d.ts +21 -0
  424. package/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts +76 -0
  425. package/types/RecursiveList/RecursiveList.svelte.d.ts +34 -0
  426. package/types/Search/Search.svelte.d.ts +128 -0
  427. package/types/Search/SearchSkeleton.svelte.d.ts +27 -0
  428. package/types/Select/Select.svelte.d.ts +124 -0
  429. package/types/Select/SelectItem.svelte.d.ts +46 -0
  430. package/types/Select/SelectItemGroup.svelte.d.ts +28 -0
  431. package/types/Select/SelectSkeleton.svelte.d.ts +27 -0
  432. package/types/SkeletonPlaceholder/SkeletonPlaceholder.svelte.d.ts +21 -0
  433. package/types/SkeletonText/SkeletonText.svelte.d.ts +45 -0
  434. package/types/Slider/Slider.svelte.d.ts +139 -0
  435. package/types/Slider/SliderSkeleton.svelte.d.ts +27 -0
  436. package/types/StructuredList/StructuredList.svelte.d.ts +46 -0
  437. package/types/StructuredList/StructuredListBody.svelte.d.ts +21 -0
  438. package/types/StructuredList/StructuredListCell.svelte.d.ts +33 -0
  439. package/types/StructuredList/StructuredListHead.svelte.d.ts +21 -0
  440. package/types/StructuredList/StructuredListInput.svelte.d.ts +52 -0
  441. package/types/StructuredList/StructuredListRow.svelte.d.ts +40 -0
  442. package/types/StructuredList/StructuredListSkeleton.svelte.d.ts +28 -0
  443. package/types/Tabs/Tab.svelte.d.ts +58 -0
  444. package/types/Tabs/TabContent.svelte.d.ts +22 -0
  445. package/types/Tabs/Tabs.svelte.d.ts +50 -0
  446. package/types/Tabs/TabsSkeleton.svelte.d.ts +33 -0
  447. package/types/Tag/Tag.svelte.d.ts +87 -0
  448. package/types/Tag/TagSkeleton.svelte.d.ts +26 -0
  449. package/types/TextArea/TextArea.svelte.d.ts +124 -0
  450. package/types/TextArea/TextAreaSkeleton.svelte.d.ts +27 -0
  451. package/types/TextInput/PasswordInput.svelte.d.ts +154 -0
  452. package/types/TextInput/TextInput.svelte.d.ts +139 -0
  453. package/types/TextInput/TextInputSkeleton.svelte.d.ts +27 -0
  454. package/types/Theme/Theme.svelte.d.ts +58 -0
  455. package/types/Tile/ClickableTile.svelte.d.ts +46 -0
  456. package/types/Tile/ExpandableTile.svelte.d.ts +88 -0
  457. package/types/Tile/RadioTile.svelte.d.ts +77 -0
  458. package/types/Tile/SelectableTile.svelte.d.ts +84 -0
  459. package/types/Tile/Tile.svelte.d.ts +27 -0
  460. package/types/Tile/TileGroup.svelte.d.ts +46 -0
  461. package/types/TimePicker/TimePicker.svelte.d.ts +112 -0
  462. package/types/TimePicker/TimePickerSelect.svelte.d.ts +63 -0
  463. package/types/Toggle/Toggle.svelte.d.ts +80 -0
  464. package/types/Toggle/ToggleSkeleton.svelte.d.ts +39 -0
  465. package/types/Tooltip/Tooltip.svelte.d.ts +106 -0
  466. package/types/Tooltip/TooltipFooter.svelte.d.ts +15 -0
  467. package/types/TooltipDefinition/TooltipDefinition.svelte.d.ts +60 -0
  468. package/types/TooltipIcon/TooltipIcon.svelte.d.ts +65 -0
  469. package/types/TreeView/TreeView.svelte.d.ts +114 -0
  470. package/types/TreeView/index.d.ts +1 -0
  471. package/types/Truncate/Truncate.svelte.d.ts +21 -0
  472. package/types/Truncate/truncate.d.ts +12 -0
  473. package/types/UIShell/Content.svelte.d.ts +22 -0
  474. package/types/UIShell/Header.svelte.d.ts +93 -0
  475. package/types/UIShell/HeaderAction.svelte.d.ts +80 -0
  476. package/types/UIShell/HeaderActionLink.svelte.d.ts +40 -0
  477. package/types/UIShell/HeaderGlobalAction.svelte.d.ts +28 -0
  478. package/types/UIShell/HeaderNav.svelte.d.ts +16 -0
  479. package/types/UIShell/HeaderNavItem.svelte.d.ts +49 -0
  480. package/types/UIShell/HeaderNavMenu.svelte.d.ts +49 -0
  481. package/types/UIShell/HeaderPanelDivider.svelte.d.ts +9 -0
  482. package/types/UIShell/HeaderPanelLink.svelte.d.ts +28 -0
  483. package/types/UIShell/HeaderPanelLinks.svelte.d.ts +9 -0
  484. package/types/UIShell/HeaderSearch.svelte.d.ts +67 -0
  485. package/types/UIShell/HeaderUtilities.svelte.d.ts +9 -0
  486. package/types/UIShell/SideNav.svelte.d.ts +56 -0
  487. package/types/UIShell/SideNavDivider.svelte.d.ts +16 -0
  488. package/types/UIShell/SideNavItems.svelte.d.ts +9 -0
  489. package/types/UIShell/SideNavLink.svelte.d.ts +46 -0
  490. package/types/UIShell/SideNavMenu.svelte.d.ts +40 -0
  491. package/types/UIShell/SideNavMenuItem.svelte.d.ts +40 -0
  492. package/types/UIShell/SkipToContent.svelte.d.ts +28 -0
  493. package/types/UnorderedList/UnorderedList.svelte.d.ts +33 -0
  494. package/types/index.d.ts +169 -0
  495. package/types/utils/toHierarchy.d.ts +21 -0
package/docs/theme-tokens.md ADDED
@@ -0,0 +1,60 @@
1
+ # Theme Tokens
2
+
3
+ MaxCraft theme tokens live in:
4
+
5
+ - `tokens/maxcraft.css`: token source for package consumers and future tooling
6
+ - `css/maxcraft.css`: self-contained browser stylesheet for Svelte and Hugo
7
+
8
+ ## Core Tokens
9
+
10
+ | Token | Meaning |
11
+ | --- | --- |
12
+ | `--mc-bedrock` | dark neutral surface |
13
+ | `--mc-bedrock-dark` | deepest surface |
14
+ | `--mc-border` | hard pixel/block border |
15
+ | `--mc-grass` | primary action green |
16
+ | `--mc-grass-dark` | primary hover/active green |
17
+ | `--mc-dirt` | section separator and earthy accent |
18
+ | `--mc-stone` | neutral border/accent |
19
+ | `--mc-stone-light` | light neutral |
20
+ | `--mc-gold` | warning/accent |
21
+ | `--mc-diamond` | focus/accent |
22
+ | `--mc-redstone` | danger/progress/accent |
23
+ | `--mc-ink` | light-theme text |
24
+ | `--mc-paper` | light-theme page background |
25
+
26
+ ## Carbon Token Mapping
27
+
28
+ `css/maxcraft.css` maps common Carbon custom properties to MaxCraft values:
29
+
30
+ - `--cds-interactive-01`: primary action
31
+ - `--cds-interactive-02`: secondary action
32
+ - `--cds-interactive-04`: focus/accent action
33
+ - `--cds-background`: page background
34
+ - `--cds-ui-01` through `--cds-ui-05`: surfaces and high-contrast text/icon
35
+ - `--cds-text-01` through `--cds-text-04`: text roles
36
+ - `--cds-icon-01`, `--cds-icon-02`: icon roles
37
+ - `--cds-link-01`: links
38
+ - `--cds-focus`: focus ring
39
+ - `--cds-hover-ui`, `--cds-selected-ui`: interaction states
40
+
41
+ ## Theme Names
42
+
43
+ The package keeps Carbon theme names and maps them to MaxCraft light/dark modes:
44
+
45
+ | Carbon theme | MaxCraft mode |
46
+ | --- | --- |
47
+ | `white` | light |
48
+ | `g10` | light |
49
+ | `g80` | dark |
50
+ | `g90` | dark |
51
+ | `g100` | dark |
52
+
53
+ ## Styling Guidance
54
+
55
+ - Use square corners for shared controls.
56
+ - Use `--mc-border` and inset/block shadows for Minecraft-style affordance.
57
+ - Use `--mc-grass` for primary actions and `--mc-redstone` for destructive or
58
+ urgent states.
59
+ - Keep page-specific decorative effects in consumer apps, not in the shared
60
+ component library.
package/examples/component-gallery/index.html ADDED
@@ -0,0 +1,12 @@
1
+ <!doctype html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>MaxCraft UI Component Gallery</title>
7
+ </head>
8
+ <body>
9
+ <div id="app"></div>
10
+ <script type="module" src="/src/main.js"></script>
11
+ </body>
12
+ </html>
package/examples/component-gallery/src/App.svelte ADDED
@@ -0,0 +1,474 @@
1
+ <script>
2
+ import {
3
+ Accordion,
4
+ AccordionItem,
5
+ Breadcrumb,
6
+ BreadcrumbItem,
7
+ Button,
8
+ ButtonSet,
9
+ Checkbox,
10
+ ClickableTile,
11
+ CodeSnippet,
12
+ ContextMenu,
13
+ ContextMenuDivider,
14
+ ContextMenuGroup,
15
+ ContextMenuOption,
16
+ ContextMenuRadioGroup,
17
+ ComboBox,
18
+ Content,
19
+ ContentSwitcher,
20
+ CopyButton,
21
+ DataTable,
22
+ DatePicker,
23
+ DatePickerInput,
24
+ Dropdown,
25
+ ExpandableTile,
26
+ FileUploader,
27
+ Grid,
28
+ Header,
29
+ HeaderGlobalAction,
30
+ HeaderNav,
31
+ HeaderNavItem,
32
+ HeaderSearch,
33
+ HeaderUtilities,
34
+ InlineLoading,
35
+ InlineNotification,
36
+ Link,
37
+ Modal,
38
+ MultiSelect,
39
+ Loading,
40
+ NumberInput,
41
+ OrderedList,
42
+ OverflowMenu,
43
+ OverflowMenuItem,
44
+ Pagination,
45
+ PaginationNav,
46
+ PasswordInput,
47
+ Popover,
48
+ ProgressBar,
49
+ ProgressIndicator,
50
+ ProgressStep,
51
+ RadioButton,
52
+ RadioButtonGroup,
53
+ RadioTile,
54
+ Row,
55
+ Search,
56
+ SideNav,
57
+ SideNavItems,
58
+ SideNavLink,
59
+ SideNavMenu,
60
+ SideNavMenuItem,
61
+ Select,
62
+ SelectItem,
63
+ SelectableTile,
64
+ Slider,
65
+ SkeletonPlaceholder,
66
+ SkeletonText,
67
+ StructuredList,
68
+ StructuredListBody,
69
+ StructuredListCell,
70
+ StructuredListHead,
71
+ StructuredListInput,
72
+ StructuredListRow,
73
+ Switch,
74
+ Tab,
75
+ TabContent,
76
+ Tabs,
77
+ Tag,
78
+ TextArea,
79
+ TextInput,
80
+ Theme,
81
+ Tile,
82
+ TileGroup,
83
+ TimePicker,
84
+ TimePickerSelect,
85
+ ToastNotification,
86
+ Toggle,
87
+ Tooltip,
88
+ TooltipDefinition,
89
+ TooltipIcon,
90
+ TreeView,
91
+ Truncate,
92
+ UnorderedList,
93
+ } from "../../../src/index.js";
94
+ import "../../../css/all.css";
95
+ import "../../../css/maxcraft.css";
96
+
97
+ const theme = new URLSearchParams(location.search).get("theme") === "dark" ? "g100" : "white";
98
+ const dark = theme === "g100";
99
+ if (dark) document.documentElement.classList.add("dark");
100
+
101
+ const items = [
102
+ { id: "survival", text: "生存服" },
103
+ { id: "creative", text: "创造服" },
104
+ { id: "archive", text: "归档服", disabled: true },
105
+ ];
106
+ const headers = [
107
+ { key: "server", value: "服务器" },
108
+ { key: "status", value: "状态" },
109
+ { key: "players", value: "玩家" },
110
+ ];
111
+ const rows = [
112
+ { id: "survival", server: "Survival", status: "online", players: 42 },
113
+ { id: "creative", server: "Creative", status: "online", players: 12 },
114
+ { id: "event", server: "Event", status: "locked", players: 0 },
115
+ ];
116
+ const treeNodes = [
117
+ {
118
+ id: "root",
119
+ text: "MaxCraft",
120
+ nodes: [
121
+ { id: "rules", text: "服务器规则" },
122
+ { id: "systems", text: "系统", nodes: [{ id: "economy", text: "经济" }, { id: "whitelist", text: "白名单" }] },
123
+ ],
124
+ },
125
+ ];
126
+
127
+ let slots = 6;
128
+ let taxRate = 5;
129
+ let toggleOn = true;
130
+ let checked = true;
131
+ let mode = "survival";
132
+ let tile = "grass";
133
+ let tab = 0;
134
+ let page = 2;
135
+ let pageNav = 4;
136
+ let dropdownOpen = true;
137
+ let comboOpen = true;
138
+ let multiOpen = true;
139
+ let overflowOpen = true;
140
+ let contextOpen = true;
141
+ let modalOpen = false;
142
+ let search = "Steve";
143
+ let headerSearch = "wiki";
144
+ let selectValue = "survival";
145
+ let files = [{ name: "server-config.yml", lastModified: 1 }];
146
+ </script>
147
+
148
+ <svelte:window on:maxcraft-gallery-open-modal={() => (modalOpen = true)} />
149
+
150
+ <Theme {theme}>
151
+ <Header company="MaxCraftMC" platformName="UI Gallery" href="/">
152
+ <HeaderNav>
153
+ <HeaderNavItem href="#inputs" text="Inputs" />
154
+ <HeaderNavItem href="#data" text="Data" />
155
+ <HeaderNavItem href="#feedback" text="Feedback" />
156
+ </HeaderNav>
157
+ <HeaderUtilities>
158
+ <HeaderSearch
159
+ active
160
+ bind:value={headerSearch}
161
+ results={[
162
+ { href: "#inputs", text: "输入控件", description: "Inputs" },
163
+ { href: "#data", text: "数据组件", description: "Data" },
164
+ ]}
165
+ />
166
+ <HeaderGlobalAction iconDescription="状态" />
167
+ </HeaderUtilities>
168
+ </Header>
169
+
170
+ <Content>
171
+ <main class="gallery" data-theme={theme}>
172
+ <section class="hero">
173
+ <p class="eyebrow">MaxCraft UI</p>
174
+ <h1>Component Gallery</h1>
175
+ <p>Carbon-compatible Svelte components with MaxCraft visual states.</p>
176
+ <ButtonSet>
177
+ <Button>主操作</Button>
178
+ <Button kind="secondary">次操作</Button>
179
+ <Button kind="tertiary">三层操作</Button>
180
+ <Button kind="danger">危险操作</Button>
181
+ <Button disabled>禁用</Button>
182
+ </ButtonSet>
183
+ </section>
184
+
185
+ <section class="surface" id="inputs">
186
+ <h2>Inputs</h2>
187
+ <div class="grid">
188
+ <TextInput labelText="Minecraft ID" value="Steve" helperText="普通输入" />
189
+ <TextInput labelText="错误状态" value="bad id" invalid invalidText="此 ID 不可用" />
190
+ <TextInput labelText="警告状态" value="Alex" warn warnText="建议绑定 UUID" />
191
+ <TextInput labelText="禁用状态" value="Disabled" disabled />
192
+ <PasswordInput labelText="指令令牌" value="secret-token" />
193
+ <PasswordInput labelText="错误令牌" value="bad-token" invalid invalidText="令牌无效" />
194
+ <TextArea labelText="申请说明" value="希望加入服务器" />
195
+ <TextArea labelText="错误说明" value="字数不足" invalid invalidText="请补充申请原因" />
196
+ <Search labelText="搜索玩家" bind:value={search} />
197
+ <Select labelText="目标服务器" bind:selected={selectValue}>
198
+ <SelectItem value="survival" text="生存服" />
199
+ <SelectItem value="creative" text="创造服" />
200
+ </Select>
201
+ <NumberInput label="席位数量" min={1} max={12} bind:value={slots} />
202
+ <NumberInput label="税率" min={0} max={100} bind:value={taxRate} invalid invalidText="税率过高" />
203
+ <Slider labelText="音量" min={0} max={100} bind:value={taxRate} />
204
+ <DatePicker datePickerType="single" value="2026-06-05">
205
+ <DatePickerInput labelText="维护日期" placeholder="yyyy-mm-dd" />
206
+ </DatePicker>
207
+ <TimePicker labelText="重启时间" value="04:00">
208
+ <TimePickerSelect>
209
+ <SelectItem value="AM" text="AM" />
210
+ <SelectItem value="PM" text="PM" />
211
+ </TimePickerSelect>
212
+ </TimePicker>
213
+ </div>
214
+ </section>
215
+
216
+ <section class="surface">
217
+ <h2>Choices And Menus</h2>
218
+ <div class="grid">
219
+ <Dropdown titleText="Dropdown" label="选择服务器" {items} bind:open={dropdownOpen} selectedId="survival" />
220
+ <ComboBox titleText="ComboBox" placeholder="输入服务器" {items} bind:open={comboOpen} selectedId="creative" />
221
+ <MultiSelect titleText="MultiSelect" label="选择多个区域" {items} selectedIds={["survival"]} bind:open={multiOpen} />
222
+ <MultiSelect titleText="Filterable MultiSelect" label="筛选区域" {items} filterable selectedIds={["creative"]} />
223
+ <Toggle labelText="启用白名单" bind:toggled={toggleOn} />
224
+ <Toggle size="sm" labelText="小号开关" bind:toggled={toggleOn} />
225
+ <Checkbox labelText="记住设备" bind:checked />
226
+ <Checkbox labelText="禁用复选框" disabled checked />
227
+ <RadioButtonGroup legendText="模式" bind:selected={mode}>
228
+ <RadioButton value="survival" labelText="生存" />
229
+ <RadioButton value="creative" labelText="创造" />
230
+ <RadioButton value="spectator" labelText="旁观" disabled />
231
+ </RadioButtonGroup>
232
+ <OverflowMenu bind:open={overflowOpen} flipped>
233
+ <OverflowMenuItem text="编辑" />
234
+ <OverflowMenuItem text="禁用项" disabled />
235
+ <OverflowMenuItem text="删除" danger />
236
+ </OverflowMenu>
237
+ <div class="context-target">
238
+ <p>ContextMenu target</p>
239
+ <ContextMenu open={contextOpen} x={24} y={24}>
240
+ <ContextMenuOption labelText="刷新" shortcutText="R" selected selectable />
241
+ <ContextMenuGroup>
242
+ <ContextMenuOption id="copy" labelText="复制" selected />
243
+ <ContextMenuOption id="paste" labelText="粘贴" />
244
+ </ContextMenuGroup>
245
+ <ContextMenuRadioGroup>
246
+ <ContextMenuOption id="fast" labelText="快速" selected />
247
+ <ContextMenuOption id="safe" labelText="安全" />
248
+ </ContextMenuRadioGroup>
249
+ <ContextMenuDivider />
250
+ <ContextMenuOption labelText="危险操作" kind="danger" />
251
+ </ContextMenu>
252
+ </div>
253
+ </div>
254
+ </section>
255
+
256
+ <section class="surface">
257
+ <h2>Tiles And Navigation</h2>
258
+ <div class="tiles">
259
+ <Tile><h3>普通 Tile</h3><p>基础信息块。</p></Tile>
260
+ <ClickableTile href="#inputs"><h3>ClickableTile</h3><p>Hover 和 active 有方块按压反馈。</p></ClickableTile>
261
+ <SelectableTile value="diamond" selected><h3>SelectableTile</h3><p>选中态。</p></SelectableTile>
262
+ <ExpandableTile tileCollapsedIconText="展开" tileExpandedIconText="收起">
263
+ <h3 slot="above-the-fold">ExpandableTile</h3>
264
+ <p slot="below-the-fold">展开后的内容。</p>
265
+ </ExpandableTile>
266
+ </div>
267
+ <TileGroup legend="方块类型" bind:selected={tile}>
268
+ <RadioTile value="grass"><h3>草方块</h3></RadioTile>
269
+ <RadioTile value="diamond"><h3>钻石</h3></RadioTile>
270
+ </TileGroup>
271
+ <Breadcrumb>
272
+ <BreadcrumbItem href="/">首页</BreadcrumbItem>
273
+ <BreadcrumbItem href="/wiki">Wiki</BreadcrumbItem>
274
+ <BreadcrumbItem isCurrentPage>组件</BreadcrumbItem>
275
+ </Breadcrumb>
276
+ <Tabs bind:selected={tab}>
277
+ <Tab label="概览" />
278
+ <Tab label="禁用" disabled />
279
+ <Tab label="设置" />
280
+ <svelte:fragment slot="content">
281
+ <TabContent><p>Tab content one.</p></TabContent>
282
+ <TabContent><p>Tab content two.</p></TabContent>
283
+ <TabContent><p>Tab content three.</p></TabContent>
284
+ </svelte:fragment>
285
+ </Tabs>
286
+ <PaginationNav total={12} shown={7} bind:page={pageNav} />
287
+ <SideNav fixed isOpen ariaLabel="Gallery side nav">
288
+ <SideNavItems>
289
+ <SideNavLink href="#inputs" text="输入" />
290
+ <SideNavMenu title="管理">
291
+ <SideNavMenuItem href="#data" text="数据" />
292
+ <SideNavMenuItem href="#feedback" text="反馈" />
293
+ </SideNavMenu>
294
+ </SideNavItems>
295
+ </SideNav>
296
+ </section>
297
+
298
+ <section class="surface" id="data">
299
+ <h2>Data</h2>
300
+ <DataTable title="服务器状态" description="表格、复选框、排序和行状态" {headers} {rows} zebra sortable selectable selectedRowIds={["survival"]} />
301
+ <Pagination totalItems={128} pageSize={10} pageSizes={[10, 20, 50]} bind:page />
302
+ <StructuredList selection selected={["economy"]}>
303
+ <StructuredListHead>
304
+ <StructuredListRow head>
305
+ <StructuredListCell head>系统</StructuredListCell>
306
+ <StructuredListCell head>状态</StructuredListCell>
307
+ </StructuredListRow>
308
+ </StructuredListHead>
309
+ <StructuredListBody>
310
+ <StructuredListRow value="economy">
311
+ <StructuredListInput value="economy" />
312
+ <StructuredListCell>经济</StructuredListCell>
313
+ <StructuredListCell>开启</StructuredListCell>
314
+ </StructuredListRow>
315
+ <StructuredListRow value="whitelist">
316
+ <StructuredListInput value="whitelist" />
317
+ <StructuredListCell>白名单</StructuredListCell>
318
+ <StructuredListCell>待审核</StructuredListCell>
319
+ </StructuredListRow>
320
+ </StructuredListBody>
321
+ </StructuredList>
322
+ <TreeView labelText="Wiki 导航" {treeNodes} nodes={treeNodes} expandedIds={["root", "systems"]} selectedIds={["economy"]} />
323
+ </section>
324
+
325
+ <section class="surface" id="feedback">
326
+ <h2>Feedback</h2>
327
+ <div class="grid">
328
+ <InlineNotification kind="success" title="成功" subtitle="主题已应用。" hideCloseButton />
329
+ <InlineNotification kind="warning" title="警告" subtitle="需要检查配置。" hideCloseButton />
330
+ <ToastNotification kind="info" title="Toast" subtitle="固定宽度，不横向溢出。" hideCloseButton />
331
+ <Loading small withOverlay={false} description="加载中" />
332
+ <InlineLoading status="active" description="正在同步..." />
333
+ <ProgressBar labelText="构建进度" value={68} helperText="Vite build" />
334
+ <ProgressIndicator currentIndex={1}>
335
+ <ProgressStep label="创建" />
336
+ <ProgressStep label="构建" />
337
+ <ProgressStep label="验收" />
338
+ </ProgressIndicator>
339
+ <FileUploader labelTitle="上传配置" labelDescription="显示文件状态" buttonLabel="选择文件" bind:files status="complete" />
340
+ <CodeSnippet type="single">npm install @ifloppy/maxcraftmc-ui-svelte</CodeSnippet>
341
+ <CopyButton text="mc.maxcraft.org" />
342
+ <Popover open caret align="bottom-left" relative>
343
+ <Button size="small">Popover trigger</Button>
344
+ <div class="popover-body">方块风格弹出层</div>
345
+ </Popover>
346
+ <TooltipDefinition term="钻石色 focus">键盘焦点统一用 diamond token。</TooltipDefinition>
347
+ <TooltipIcon tooltipText="图标 tooltip" />
348
+ <Link href="#inputs">锚点链接</Link>
349
+ <Truncate>这是一段会被截断的 MaxCraft UI 文本，用来覆盖 Truncate 组件。</Truncate>
350
+ </div>
351
+ <div class="grid">
352
+ <SkeletonText paragraph lineCount={3} />
353
+ <SkeletonPlaceholder />
354
+ </div>
355
+ <Accordion>
356
+ <AccordionItem title="Accordion Item" open>折叠面板内容。</AccordionItem>
357
+ <AccordionItem title="Disabled Item" disabled>不可交互内容。</AccordionItem>
358
+ </Accordion>
359
+ <UnorderedList>
360
+ <li>方块边框</li>
361
+ <li>钻石焦点</li>
362
+ </UnorderedList>
363
+ <OrderedList>
364
+ <li>构建</li>
365
+ <li>审计</li>
366
+ </OrderedList>
367
+ <ContentSwitcher>
368
+ <Switch text="白天" />
369
+ <Switch text="夜晚" />
370
+ </ContentSwitcher>
371
+ </section>
372
+
373
+ <Modal
374
+ bind:open={modalOpen}
375
+ modalHeading="Modal"
376
+ modalLabel="Component state"
377
+ primaryButtonText="确认"
378
+ secondaryButtonText="取消"
379
+ hasForm
380
+ >
381
+ <TextInput labelText="弹窗输入" value="Steve" />
382
+ <TextArea labelText="弹窗错误说明" value="Too short" invalid invalidText="请补充说明" />
383
+ </Modal>
384
+ </main>
385
+ </Content>
386
+ </Theme>
387
+
388
+ <style>
389
+ :global(body) {
390
+ margin: 0;
391
+ }
392
+
393
+ .gallery {
394
+ display: grid;
395
+ max-width: 78rem;
396
+ gap: 1.25rem;
397
+ }
398
+
399
+ .hero,
400
+ .surface {
401
+ display: grid;
402
+ min-width: 0;
403
+ gap: 1rem;
404
+ }
405
+
406
+ .hero h1,
407
+ .hero p,
408
+ .surface h2,
409
+ .surface h3,
410
+ .surface p {
411
+ margin: 0;
412
+ }
413
+
414
+ .eyebrow {
415
+ color: var(--cds-text-02);
416
+ font-size: 0.875rem;
417
+ font-weight: 800;
418
+ }
419
+
420
+ .surface {
421
+ padding: 1rem;
422
+ border: 4px solid var(--mc-border);
423
+ background: var(--cds-layer);
424
+ box-shadow: var(--mc-shadow-block);
425
+ }
426
+
427
+ .grid,
428
+ .tiles {
429
+ display: grid;
430
+ min-width: 0;
431
+ gap: 1rem;
432
+ grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
433
+ align-items: start;
434
+ }
435
+
436
+ .tiles {
437
+ grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
438
+ }
439
+
440
+ .context-target {
441
+ position: relative;
442
+ min-height: 13rem;
443
+ padding: 1rem;
444
+ border: 3px dashed var(--mc-border);
445
+ }
446
+
447
+ .popover-body {
448
+ min-width: 12rem;
449
+ padding: 1rem;
450
+ font-weight: 800;
451
+ }
452
+
453
+ :global(.gallery .bx--side-nav) {
454
+ position: relative;
455
+ transform: none;
456
+ width: min(16rem, 100%);
457
+ height: auto;
458
+ min-height: 12rem;
459
+ }
460
+
461
+ :global(.gallery .bx--side-nav__navigation) {
462
+ position: relative;
463
+ }
464
+
465
+ :global(.bx--modal .bx--form-item + .bx--form-item) {
466
+ margin-top: 1rem;
467
+ }
468
+
469
+ @media (max-width: 48rem) {
470
+ .surface {
471
+ padding: 0.75rem;
472
+ }
473
+ }
474
+ </style>
package/examples/component-gallery/src/main.js ADDED
@@ -0,0 +1,6 @@
1
+ import App from "./App.svelte";
2
+ import { mount } from "svelte";
3
+
4
+ mount(App, {
5
+ target: document.getElementById("app"),
6
+ });
package/examples/component-gallery/vite.config.js ADDED
@@ -0,0 +1,6 @@
1
+ import { defineConfig } from "vite";
2
+ import { svelte } from "@sveltejs/vite-plugin-svelte";
3
+
4
+ export default defineConfig({
5
+ plugins: [svelte()],
6
+ });
package/examples/hugo-head.html ADDED
@@ -0,0 +1,25 @@
1
+ {{ $styles := resources.Get "css/style.css" }}
2
+ {{ if hugo.IsProduction }}
3
+ {{ $styles := $styles | minify | fingerprint }}
4
+ <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" />
5
+ {{ else }}
6
+ <link rel="stylesheet" href="{{ $styles.RelPermalink }}" />
7
+ {{ end }}
8
+
9
+ {{ with resources.Get "maxcraft-ui/maxcraft.css" }}
10
+ {{ if hugo.IsProduction }}
11
+ {{ $maxcraftUIStyles := . | minify | fingerprint }}
12
+ <link rel="stylesheet" href="{{ $maxcraftUIStyles.RelPermalink }}" integrity="{{ $maxcraftUIStyles.Data.Integrity }}" />
13
+ {{ else }}
14
+ <link rel="stylesheet" href="{{ .RelPermalink }}" />
15
+ {{ end }}
16
+ {{ end }}
17
+
18
+ {{ with resources.Get "css/site.css" }}
19
+ {{ if hugo.IsProduction }}
20
+ {{ $siteStyles := . | minify | fingerprint }}
21
+ <link rel="stylesheet" href="{{ $siteStyles.RelPermalink }}" integrity="{{ $siteStyles.Data.Integrity }}" />
22
+ {{ else }}
23
+ <link rel="stylesheet" href="{{ .RelPermalink }}" />
24
+ {{ end }}
25
+ {{ end }}
package/examples/hugo-module-mounts.toml ADDED
@@ -0,0 +1,34 @@
1
+ [[module.imports]]
2
+ path = "github.com/FloppyBetaStudio/maxcraft-ui"
3
+
4
+ [[module.imports.mounts]]
5
+ source = "css"
6
+ target = "assets/maxcraft-ui"
7
+
8
+ [[module.mounts]]
9
+ source = "archetypes"
10
+ target = "archetypes"
11
+
12
+ [[module.mounts]]
13
+ source = "assets"
14
+ target = "assets"
15
+
16
+ [[module.mounts]]
17
+ source = "content"
18
+ target = "content"
19
+
20
+ [[module.mounts]]
21
+ source = "data"
22
+ target = "data"
23
+
24
+ [[module.mounts]]
25
+ source = "i18n"
26
+ target = "i18n"
27
+
28
+ [[module.mounts]]
29
+ source = "layouts"
30
+ target = "layouts"
31
+
32
+ [[module.mounts]]
33
+ source = "static"
34
+ target = "static"
package/examples/svelte-basic/+layout.svelte ADDED
@@ -0,0 +1,11 @@
1
+ <script>
2
+ import { Theme } from "carbon-components-svelte";
3
+ import "carbon-components-svelte/css/all.css";
4
+ import "carbon-components-svelte/css/maxcraft.css";
5
+
6
+ export let data;
7
+ </script>
8
+
9
+ <Theme theme={data?.dark ? "g100" : "white"}>
10
+ <slot />
11
+ </Theme>