torch-glare 2.5.5 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (359) hide show
  1. package/README.md +4 -3
  2. package/dist/bin/index.js +9 -24
  3. package/dist/bin/index.js.map +1 -1
  4. package/dist/src/commands/add.d.ts +2 -2
  5. package/dist/src/commands/add.d.ts.map +1 -1
  6. package/dist/src/commands/add.js +4 -70
  7. package/dist/src/commands/add.js.map +1 -1
  8. package/dist/src/commands/hook.d.ts +5 -4
  9. package/dist/src/commands/hook.d.ts.map +1 -1
  10. package/dist/src/commands/hook.js +7 -75
  11. package/dist/src/commands/hook.js.map +1 -1
  12. package/dist/src/commands/init.js +1 -1
  13. package/dist/src/commands/init.js.map +1 -1
  14. package/dist/src/commands/layout.d.ts +5 -4
  15. package/dist/src/commands/layout.d.ts.map +1 -1
  16. package/dist/src/commands/layout.js +7 -75
  17. package/dist/src/commands/layout.js.map +1 -1
  18. package/dist/src/commands/provider.d.ts +5 -4
  19. package/dist/src/commands/provider.d.ts.map +1 -1
  20. package/dist/src/commands/provider.js +7 -75
  21. package/dist/src/commands/provider.js.map +1 -1
  22. package/dist/src/commands/update.d.ts.map +1 -1
  23. package/dist/src/commands/update.js +78 -43
  24. package/dist/src/commands/update.js.map +1 -1
  25. package/dist/src/commands/utils.d.ts +5 -4
  26. package/dist/src/commands/utils.d.ts.map +1 -1
  27. package/dist/src/commands/utils.js +7 -80
  28. package/dist/src/commands/utils.js.map +1 -1
  29. package/dist/src/shared/addFromRegistry.d.ts +16 -0
  30. package/dist/src/shared/addFromRegistry.d.ts.map +1 -0
  31. package/dist/src/shared/addFromRegistry.js +88 -0
  32. package/dist/src/shared/addFromRegistry.js.map +1 -0
  33. package/dist/src/shared/getInstallCommand.d.ts.map +1 -1
  34. package/dist/src/shared/getInstallCommand.js +5 -0
  35. package/dist/src/shared/getInstallCommand.js.map +1 -1
  36. package/dist/src/shared/installDependencies.d.ts +0 -10
  37. package/dist/src/shared/installDependencies.d.ts.map +1 -1
  38. package/dist/src/shared/installDependencies.js +0 -17
  39. package/dist/src/shared/installDependencies.js.map +1 -1
  40. package/dist/src/shared/installFromPlan.d.ts +7 -5
  41. package/dist/src/shared/installFromPlan.d.ts.map +1 -1
  42. package/dist/src/shared/installFromPlan.js +103 -36
  43. package/dist/src/shared/installFromPlan.js.map +1 -1
  44. package/dist/src/shared/loadRegistry.d.ts +12 -3
  45. package/dist/src/shared/loadRegistry.d.ts.map +1 -1
  46. package/dist/src/shared/loadRegistry.js +19 -20
  47. package/dist/src/shared/loadRegistry.js.map +1 -1
  48. package/dist/src/shared/registryClient.d.ts +19 -0
  49. package/dist/src/shared/registryClient.d.ts.map +1 -0
  50. package/dist/src/shared/registryClient.js +128 -0
  51. package/dist/src/shared/registryClient.js.map +1 -0
  52. package/dist/src/shared/resolveEntry.d.ts +10 -7
  53. package/dist/src/shared/resolveEntry.d.ts.map +1 -1
  54. package/dist/src/shared/resolveEntry.js +18 -13
  55. package/dist/src/shared/resolveEntry.js.map +1 -1
  56. package/dist/src/shared/suggestOtherCommand.d.ts +7 -1
  57. package/dist/src/shared/suggestOtherCommand.d.ts.map +1 -1
  58. package/dist/src/shared/suggestOtherCommand.js +29 -23
  59. package/dist/src/shared/suggestOtherCommand.js.map +1 -1
  60. package/dist/src/types/main.d.ts +31 -2
  61. package/dist/src/types/main.d.ts.map +1 -1
  62. package/package.json +6 -11
  63. package/apps/lib/components/ActionButton.tsx +0 -93
  64. package/apps/lib/components/ActionsGroup.tsx +0 -27
  65. package/apps/lib/components/AlertDialog.tsx +0 -204
  66. package/apps/lib/components/Avatar.tsx +0 -46
  67. package/apps/lib/components/Badge.tsx +0 -250
  68. package/apps/lib/components/BadgeField.tsx +0 -338
  69. package/apps/lib/components/Breadcrumb.tsx +0 -280
  70. package/apps/lib/components/Button.tsx +0 -317
  71. package/apps/lib/components/ButtonGroup.tsx +0 -190
  72. package/apps/lib/components/Calendar.tsx +0 -115
  73. package/apps/lib/components/Card.tsx +0 -95
  74. package/apps/lib/components/Checkbox.tsx +0 -42
  75. package/apps/lib/components/ColorPicker.tsx +0 -441
  76. package/apps/lib/components/ConclusionHeader.tsx +0 -148
  77. package/apps/lib/components/ContextMenu.tsx +0 -571
  78. package/apps/lib/components/CountBadge.tsx +0 -52
  79. package/apps/lib/components/DataTable.tsx +0 -213
  80. package/apps/lib/components/DataViews/badge.ts +0 -49
  81. package/apps/lib/components/DataViews/cell.tsx +0 -324
  82. package/apps/lib/components/DataViews/context.ts +0 -144
  83. package/apps/lib/components/DataViews/data-views.tsx +0 -383
  84. package/apps/lib/components/DataViews/filters/children.tsx +0 -98
  85. package/apps/lib/components/DataViews/filters/custom.tsx +0 -34
  86. package/apps/lib/components/DataViews/filters/filters.tsx +0 -157
  87. package/apps/lib/components/DataViews/filters/index.ts +0 -4
  88. package/apps/lib/components/DataViews/filters/labelled.tsx +0 -20
  89. package/apps/lib/components/DataViews/filters/presets.tsx +0 -65
  90. package/apps/lib/components/DataViews/filters/sync.tsx +0 -35
  91. package/apps/lib/components/DataViews/filters/values.ts +0 -173
  92. package/apps/lib/components/DataViews/header.tsx +0 -220
  93. package/apps/lib/components/DataViews/hooks/index.ts +0 -5
  94. package/apps/lib/components/DataViews/hooks/useActiveRow.ts +0 -22
  95. package/apps/lib/components/DataViews/hooks/useControllable.ts +0 -52
  96. package/apps/lib/components/DataViews/index.ts +0 -84
  97. package/apps/lib/components/DataViews/panel/columns.tsx +0 -153
  98. package/apps/lib/components/DataViews/panel/controls.tsx +0 -106
  99. package/apps/lib/components/DataViews/panel/index.ts +0 -3
  100. package/apps/lib/components/DataViews/panel/panel.tsx +0 -164
  101. package/apps/lib/components/DataViews/panel/saved-views.tsx +0 -67
  102. package/apps/lib/components/DataViews/panel/section.tsx +0 -81
  103. package/apps/lib/components/DataViews/panel/sort.tsx +0 -42
  104. package/apps/lib/components/DataViews/panel/tab.tsx +0 -31
  105. package/apps/lib/components/DataViews/slots.ts +0 -63
  106. package/apps/lib/components/DataViews/states.tsx +0 -38
  107. package/apps/lib/components/DataViews/types.ts +0 -510
  108. package/apps/lib/components/DataViews/views/board-view.tsx +0 -381
  109. package/apps/lib/components/DataViews/views/card-rows.tsx +0 -36
  110. package/apps/lib/components/DataViews/views/inbox-view.tsx +0 -260
  111. package/apps/lib/components/DataViews/views/pane-views.tsx +0 -196
  112. package/apps/lib/components/DataViews/views/table-view.tsx +0 -493
  113. package/apps/lib/components/DataViews/views/tree-view.tsx +0 -367
  114. package/apps/lib/components/DatePicker.tsx +0 -232
  115. package/apps/lib/components/Dialog.tsx +0 -116
  116. package/apps/lib/components/Divider.tsx +0 -28
  117. package/apps/lib/components/Drawer.tsx +0 -420
  118. package/apps/lib/components/DropdownMenu.tsx +0 -540
  119. package/apps/lib/components/FieldHint.tsx +0 -69
  120. package/apps/lib/components/Form.tsx +0 -182
  121. package/apps/lib/components/FormBuilder/context.ts +0 -73
  122. package/apps/lib/components/FormBuilder/field-kind.ts +0 -28
  123. package/apps/lib/components/FormBuilder/fields/ChoiceFields.tsx +0 -60
  124. package/apps/lib/components/FormBuilder/fields/ColorField.tsx +0 -59
  125. package/apps/lib/components/FormBuilder/fields/CustomField.tsx +0 -11
  126. package/apps/lib/components/FormBuilder/fields/DateField.tsx +0 -32
  127. package/apps/lib/components/FormBuilder/fields/FieldArray.tsx +0 -74
  128. package/apps/lib/components/FormBuilder/fields/FieldShell.tsx +0 -163
  129. package/apps/lib/components/FormBuilder/fields/FileField.tsx +0 -39
  130. package/apps/lib/components/FormBuilder/fields/OptionListFields.tsx +0 -132
  131. package/apps/lib/components/FormBuilder/fields/OtpField.tsx +0 -31
  132. package/apps/lib/components/FormBuilder/fields/PhoneField.tsx +0 -109
  133. package/apps/lib/components/FormBuilder/fields/RichTextEditorField.tsx +0 -31
  134. package/apps/lib/components/FormBuilder/fields/SelectField.tsx +0 -91
  135. package/apps/lib/components/FormBuilder/fields/SignatureField.tsx +0 -157
  136. package/apps/lib/components/FormBuilder/fields/SliderField.tsx +0 -67
  137. package/apps/lib/components/FormBuilder/fields/SwitchBoxField.tsx +0 -41
  138. package/apps/lib/components/FormBuilder/fields/TableField.tsx +0 -336
  139. package/apps/lib/components/FormBuilder/fields/TextField.tsx +0 -213
  140. package/apps/lib/components/FormBuilder/fields/TreeSelectField.tsx +0 -43
  141. package/apps/lib/components/FormBuilder/fields/countries.ts +0 -303
  142. package/apps/lib/components/FormBuilder/fields/index.ts +0 -25
  143. package/apps/lib/components/FormBuilder/form-builder.tsx +0 -198
  144. package/apps/lib/components/FormBuilder/index.ts +0 -31
  145. package/apps/lib/components/FormBuilder/numberFormat.ts +0 -16
  146. package/apps/lib/components/FormBuilder/submit.tsx +0 -47
  147. package/apps/lib/components/FormBuilder/types.ts +0 -311
  148. package/apps/lib/components/FormRenderer/FormDrawer.tsx +0 -128
  149. package/apps/lib/components/FormRenderer/detail.tsx +0 -207
  150. package/apps/lib/components/FormRenderer/form-renderer.tsx +0 -297
  151. package/apps/lib/components/FormRenderer/header.tsx +0 -88
  152. package/apps/lib/components/FormRenderer/index.ts +0 -15
  153. package/apps/lib/components/FormRenderer/section.tsx +0 -39
  154. package/apps/lib/components/FormRenderer/stepper.tsx +0 -339
  155. package/apps/lib/components/FormRenderer/types.ts +0 -78
  156. package/apps/lib/components/FormSummary.tsx +0 -282
  157. package/apps/lib/components/HeaderBar.tsx +0 -117
  158. package/apps/lib/components/ImageAttachment.tsx +0 -209
  159. package/apps/lib/components/InnerLabelField.tsx +0 -154
  160. package/apps/lib/components/Input.tsx +0 -224
  161. package/apps/lib/components/InputField.tsx +0 -147
  162. package/apps/lib/components/InputOTP.tsx +0 -84
  163. package/apps/lib/components/Label.tsx +0 -129
  164. package/apps/lib/components/LabelField.tsx +0 -76
  165. package/apps/lib/components/LabeledCheckBox.tsx +0 -51
  166. package/apps/lib/components/LabeledRadio.tsx +0 -51
  167. package/apps/lib/components/LinkButton.tsx +0 -94
  168. package/apps/lib/components/LoginButton.tsx +0 -51
  169. package/apps/lib/components/PasswordLevel.tsx +0 -58
  170. package/apps/lib/components/Popover.tsx +0 -312
  171. package/apps/lib/components/ProfileMenu.tsx +0 -85
  172. package/apps/lib/components/Radio.tsx +0 -59
  173. package/apps/lib/components/RadioCard.tsx +0 -50
  174. package/apps/lib/components/ScrollArea.tsx +0 -54
  175. package/apps/lib/components/SearchField.tsx +0 -62
  176. package/apps/lib/components/SearchableSelect.tsx +0 -318
  177. package/apps/lib/components/SearchableTable.tsx +0 -344
  178. package/apps/lib/components/SearchableTree.tsx +0 -485
  179. package/apps/lib/components/SearchableTreeDialog.tsx +0 -502
  180. package/apps/lib/components/SectionBlock.tsx +0 -147
  181. package/apps/lib/components/Select.tsx +0 -347
  182. package/apps/lib/components/SimpleSelect.tsx +0 -225
  183. package/apps/lib/components/Skeleton.tsx +0 -12
  184. package/apps/lib/components/SlideDatePicker.tsx +0 -253
  185. package/apps/lib/components/SpinLoading.tsx +0 -174
  186. package/apps/lib/components/Stepper.tsx +0 -480
  187. package/apps/lib/components/Switch.tsx +0 -82
  188. package/apps/lib/components/TabFormItem.tsx +0 -153
  189. package/apps/lib/components/TabSwitch.tsx +0 -172
  190. package/apps/lib/components/Table.tsx +0 -610
  191. package/apps/lib/components/TextEditor/ChartBlockTool.ts +0 -676
  192. package/apps/lib/components/TextEditor/RichTextField.tsx +0 -46
  193. package/apps/lib/components/TextEditor/TableDnDWrapper.ts +0 -462
  194. package/apps/lib/components/TextEditor/TextEditor.tsx +0 -1164
  195. package/apps/lib/components/TextEditor/TextEditorToolbar.tsx +0 -429
  196. package/apps/lib/components/TextEditor/editor-tools/AlignmentTune.ts +0 -70
  197. package/apps/lib/components/TextEditor/editor-tools/ColorInlineTool.ts +0 -50
  198. package/apps/lib/components/TextEditor/editor-tools/StrikethroughInlineTool.ts +0 -48
  199. package/apps/lib/components/TextEditor/editor-tools/inlineFormat.ts +0 -98
  200. package/apps/lib/components/TextEditor/editorjs.d.ts +0 -60
  201. package/apps/lib/components/TextEditor/index.ts +0 -7
  202. package/apps/lib/components/TextEditor/markdownParser.ts +0 -346
  203. package/apps/lib/components/Textarea.tsx +0 -117
  204. package/apps/lib/components/Timeline.tsx +0 -263
  205. package/apps/lib/components/Toast.tsx +0 -87
  206. package/apps/lib/components/Toggle.tsx +0 -125
  207. package/apps/lib/components/ToggleButton.tsx +0 -140
  208. package/apps/lib/components/Tooltip.tsx +0 -116
  209. package/apps/lib/components/TransparentLabel.tsx +0 -71
  210. package/apps/lib/components/TreeDropDown.tsx +0 -115
  211. package/apps/lib/components/TreeFolder/TreeFolder.tsx +0 -380
  212. package/apps/lib/components/TreeFolder/TreeFolderBreadcrumb.tsx +0 -75
  213. package/apps/lib/components/TreeFolder/TreeFolderRow.tsx +0 -354
  214. package/apps/lib/components/TreeFolder/TreeFolderStyles.tsx +0 -60
  215. package/apps/lib/components/TreeFolder/icons.tsx +0 -60
  216. package/apps/lib/components/TreeFolder/index.ts +0 -24
  217. package/apps/lib/components/TreeFolder/treeFolderUtils.ts +0 -109
  218. package/apps/lib/components/TreeFolder/types.ts +0 -77
  219. package/apps/lib/components/TreeFolder/useTreeFolderDnD.ts +0 -118
  220. package/apps/lib/hooks/useActiveTreeItem.ts +0 -58
  221. package/apps/lib/hooks/useClickOutside.ts +0 -27
  222. package/apps/lib/hooks/useDragDrop.tsx +0 -365
  223. package/apps/lib/hooks/useInfiniteScroll.ts +0 -108
  224. package/apps/lib/hooks/useIsMobile.ts +0 -21
  225. package/apps/lib/hooks/useResize.ts +0 -67
  226. package/apps/lib/hooks/useTagSelection.ts +0 -214
  227. package/apps/lib/layouts/CNLayout.tsx +0 -372
  228. package/apps/lib/layouts/DataViewCard.tsx +0 -62
  229. package/apps/lib/layouts/FieldSection.tsx +0 -91
  230. package/apps/lib/layouts/TreeSubLayout.tsx +0 -173
  231. package/apps/lib/providers/ThemeProvider.tsx +0 -84
  232. package/apps/lib/registry.json +0 -1201
  233. package/apps/lib/tsconfig.json +0 -9
  234. package/apps/lib/tsconfig.tsbuildinfo +0 -1
  235. package/apps/lib/utils/cn.ts +0 -6
  236. package/apps/lib/utils/color.ts +0 -175
  237. package/apps/lib/utils/dataViews/path.ts +0 -67
  238. package/apps/lib/utils/dataViews/query.ts +0 -73
  239. package/apps/lib/utils/dataViews/types.ts +0 -187
  240. package/apps/lib/utils/dateFormat.ts +0 -108
  241. package/apps/lib/utils/resize.ts +0 -31
  242. package/apps/lib/utils/types.ts +0 -16
  243. package/docs/BLOCKS.md +0 -129
  244. package/docs/CHANGELOG-1.1.16.md +0 -108
  245. package/docs/Cover.png +0 -0
  246. package/docs/README.md +0 -215
  247. package/docs/components/action-button.md +0 -638
  248. package/docs/components/actions-group.md +0 -708
  249. package/docs/components/alert-dialog.md +0 -920
  250. package/docs/components/avatar.md +0 -709
  251. package/docs/components/badge-field.md +0 -712
  252. package/docs/components/badge.md +0 -301
  253. package/docs/components/breadcrumb.md +0 -930
  254. package/docs/components/button-group.md +0 -650
  255. package/docs/components/button.md +0 -639
  256. package/docs/components/calendar.md +0 -555
  257. package/docs/components/card.md +0 -622
  258. package/docs/components/chart-block-tool.md +0 -129
  259. package/docs/components/checkbox.md +0 -699
  260. package/docs/components/cn-layout.md +0 -854
  261. package/docs/components/color-picker.md +0 -101
  262. package/docs/components/conclusion-header.md +0 -80
  263. package/docs/components/context-menu.md +0 -483
  264. package/docs/components/count-badge.md +0 -560
  265. package/docs/components/data-table.md +0 -854
  266. package/docs/components/data-views/backend-response.md +0 -324
  267. package/docs/components/data-views/examples/a11y-rtl.md +0 -250
  268. package/docs/components/data-views/examples/api-orders-route.md +0 -130
  269. package/docs/components/data-views/examples/fields.md +0 -362
  270. package/docs/components/data-views/examples/filters.md +0 -307
  271. package/docs/components/data-views/examples/inbox-routing.md +0 -218
  272. package/docs/components/data-views/examples/index.md +0 -29
  273. package/docs/components/data-views/examples/overview.md +0 -244
  274. package/docs/components/data-views/examples/panel.md +0 -212
  275. package/docs/components/data-views/examples/scale.md +0 -231
  276. package/docs/components/data-views/examples/server-side.md +0 -210
  277. package/docs/components/data-views/examples/state.md +0 -250
  278. package/docs/components/data-views/examples/tree-custom.md +0 -388
  279. package/docs/components/data-views/examples/view-registry.md +0 -313
  280. package/docs/components/data-views/examples/views.md +0 -534
  281. package/docs/components/data-views/guide.md +0 -405
  282. package/docs/components/data-views/index.md +0 -1495
  283. package/docs/components/data-views/migration.md +0 -79
  284. package/docs/components/date-picker.md +0 -857
  285. package/docs/components/dialog.md +0 -929
  286. package/docs/components/divider.md +0 -766
  287. package/docs/components/drawer.md +0 -654
  288. package/docs/components/dropdown-menu.md +0 -668
  289. package/docs/components/field-hint.md +0 -898
  290. package/docs/components/field-section.md +0 -781
  291. package/docs/components/form-builder.md +0 -276
  292. package/docs/components/form-renderer.md +0 -326
  293. package/docs/components/form-summary.md +0 -138
  294. package/docs/components/form.md +0 -785
  295. package/docs/components/header-bar.md +0 -188
  296. package/docs/components/image-attachment.md +0 -906
  297. package/docs/components/inner-label-field.md +0 -819
  298. package/docs/components/input-field.md +0 -623
  299. package/docs/components/input-otp.md +0 -756
  300. package/docs/components/input.md +0 -634
  301. package/docs/components/label-field.md +0 -770
  302. package/docs/components/label.md +0 -761
  303. package/docs/components/labeled-check-box.md +0 -642
  304. package/docs/components/labeled-radio.md +0 -796
  305. package/docs/components/link-button.md +0 -685
  306. package/docs/components/login-button.md +0 -872
  307. package/docs/components/password-level.md +0 -803
  308. package/docs/components/popover.md +0 -649
  309. package/docs/components/profile-menu.md +0 -656
  310. package/docs/components/radio-card.md +0 -801
  311. package/docs/components/radio.md +0 -735
  312. package/docs/components/scroll-area.md +0 -691
  313. package/docs/components/search-field.md +0 -702
  314. package/docs/components/searchable-select.md +0 -368
  315. package/docs/components/searchable-table.md +0 -438
  316. package/docs/components/searchable-tree-dialog.md +0 -190
  317. package/docs/components/searchable-tree.md +0 -200
  318. package/docs/components/section-block.md +0 -477
  319. package/docs/components/select.md +0 -709
  320. package/docs/components/simple-select.md +0 -741
  321. package/docs/components/skeleton.md +0 -706
  322. package/docs/components/slide-date-picker.md +0 -837
  323. package/docs/components/spin-loading.md +0 -696
  324. package/docs/components/stepper.md +0 -316
  325. package/docs/components/switch.md +0 -770
  326. package/docs/components/tab-form-item.md +0 -773
  327. package/docs/components/tab-switch.md +0 -170
  328. package/docs/components/table-dnd-wrapper.md +0 -107
  329. package/docs/components/table.md +0 -1088
  330. package/docs/components/text-editor.md +0 -735
  331. package/docs/components/textarea.md +0 -681
  332. package/docs/components/timeline.md +0 -254
  333. package/docs/components/toast.md +0 -773
  334. package/docs/components/toggle-button.md +0 -643
  335. package/docs/components/toggle.md +0 -882
  336. package/docs/components/tooltip.md +0 -513
  337. package/docs/components/transparent-label.md +0 -721
  338. package/docs/components/tree-drop-down.md +0 -740
  339. package/docs/components/tree-folder.md +0 -110
  340. package/docs/components/tree-sub-layout.md +0 -707
  341. package/docs/explanation/architecture.md +0 -54
  342. package/docs/explanation/design-system.md +0 -52
  343. package/docs/how-to/form-and-list-recipes.md +0 -386
  344. package/docs/how-to/forms-with-form-builder.md +0 -472
  345. package/docs/how-to/guides.md +0 -1027
  346. package/docs/migration/changelog.md +0 -54
  347. package/docs/migration/form-builder-2.5.2.md +0 -113
  348. package/docs/reference/cli.md +0 -112
  349. package/docs/reference/components.md +0 -572
  350. package/docs/reference/hooks.md +0 -1500
  351. package/docs/reference/providers.md +0 -866
  352. package/docs/reference/tailwind-plugins.md +0 -942
  353. package/docs/reference/theme.md +0 -85
  354. package/docs/reference/types.md +0 -1016
  355. package/docs/reference/utilities.md +0 -704
  356. package/docs/tutorials/building-first-form.md +0 -846
  357. package/docs/tutorials/component-composition.md +0 -882
  358. package/docs/tutorials/getting-started.md +0 -302
  359. package/docs/tutorials/theming-basics.md +0 -785
package/docs/tutorials/getting-started.md DELETED
@@ -1,302 +0,0 @@
1
- ---
2
- title: Getting Started with TORCH Glare
3
- description: Step-by-step guide to installing and using TORCH Glare Components Library in your project.
4
- category: Tutorial
5
- difficulty: Beginner
6
- duration: 15 minutes
7
- tags: [getting-started, installation, setup, first-component, cli, tailwind]
8
- related:
9
- - Building Your First Form
10
- - Theming Basics
11
- - Component Composition
12
- ---
13
-
14
- # Getting Started with TORCH Glare
15
-
16
- Welcome to TORCH Glare! This tutorial will guide you through installing the library, setting up your project, and creating your first component.
17
-
18
- ## What You'll Learn
19
-
20
- - Installing TORCH Glare using the CLI
21
- - Configuring Tailwind CSS with TORCH plugins
22
- - Adding components to your project
23
- - Creating your first components
24
-
25
- ## Prerequisites
26
-
27
- Before you begin, make sure you have:
28
-
29
- - Node.js 16+ installed
30
- - Basic knowledge of React and TypeScript
31
- - A React project with Tailwind CSS installed (Next.js, Vite, or Create React App)
32
-
33
- ---
34
-
35
- > **If you plan to build forms**, add the validation packages the guides use — no component
36
- > imports them, so the CLI does not install them for you:
37
- >
38
- > ```bash
39
- > npm install zod @hookform/resolvers
40
- > ```
41
-
42
- ## Step 1: Initialize TORCH Glare
43
-
44
- Run the following command to initialize your project:
45
-
46
- ```bash
47
- npx torch-glare@latest init
48
- ```
49
-
50
- This will install the required dependencies and generate a `glare.json` file, where you can customize the installation path for your components.
51
-
52
- ### Configure Component Path
53
-
54
- The generated `glare.json` file controls where components are installed:
55
-
56
- ```json
57
- {
58
- "path": "./src"
59
- }
60
- ```
61
-
62
- Adjust the `path` to match your project structure (e.g., `./src`, `./app`, `./components`).
63
-
64
- ---
65
-
66
- ## Step 2: Add Fonts and Icons
67
-
68
- Add Remix Icons CDN and SF-Pro font to your HTML `<head>` or metadata. SF-Pro is the standard font family for TORCH Glare Components.
69
-
70
- ```html
71
- <head>
72
- <link
73
- href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
74
- rel="stylesheet"
75
- />
76
- <link
77
- rel="stylesheet"
78
- href="https://cdn.statically.io/gh/TORCH-Corp/SF-PRO-FONT/main/font/fonts.css"
79
- />
80
- <link
81
- rel="preload"
82
- href="https://cdn.statically.io/gh/TORCH-Corp/SF-PRO-FONT/main/font/SF-Pro.woff2"
83
- as="font"
84
- type="font/woff2"
85
- />
86
- </head>
87
- ```
88
-
89
- ---
90
-
91
- ## Step 3: Configure Tailwind CSS
92
-
93
- ### For Tailwind CSS v4
94
-
95
- Add the following to your `global.css` file:
96
-
97
- ```css
98
- @import "tailwindcss";
99
- /* IMPORTANT: this @import MUST come before any @plugin or @source rule.
100
- CSS requires all @import statements to precede other at-rules, so if it
101
- is placed after the @plugin lines the bundler (Vite/Lightning CSS,
102
- PostCSS) silently drops it. That removes every --color-* registration
103
- this file provides and breaks ALL bg/text/border-*-presentation-* utilities
104
- (e.g. Badge renders with no background). Keep it directly under
105
- @import "tailwindcss". */
106
- @import "mapping-color-system-v4/tailwindVars.css";
107
- /* Required, and needs glare-torch-mode >= 1.4.0. The plugin only registers the colour
108
- variables; the radius scale, container sizes and breakpoints reach Tailwind through
109
- `theme.extend` in a JS config, which v4 does not have. Without this the
110
- `rounded-radius-*` classes are never generated (square corners on Button, Badge,
111
- Input, ActionButton, Select, TextArea) and `sm:` / `@md:` fall back to Tailwind's
112
- own values. Same @import-ordering rule as above applies. */
113
- @import "glare-torch-mode/theme.css";
114
- @plugin "glare-torch-mode";
115
- @plugin "tailwind-scrollbar-hide";
116
- @plugin "tailwindcss-animate";
117
- @plugin "glare-typography";
118
- @plugin "mapping-color-system-v4";
119
- ```
120
-
121
- Two version-4-only caveats:
122
-
123
- - Tailwind 4 shares the container scale with `max-w-*`, so `--container-md` also sets `max-w-md`
124
- to 650px.
125
- - The plugin sets `--radius-*` on `:root`, which is Tailwind 4's own border-radius namespace. The
126
- values match its defaults (2/4/6/8/12/16/24/32px) but are declared in `px` where Tailwind uses
127
- `rem`, so they diverge if you change the root font size.
128
-
129
- > ⚠️ **Common failure:** if your Badge (or any component using
130
- > `bg-background-presentation-*` colors) renders with no background, the
131
- > `tailwindVars.css` `@import` is almost certainly positioned **after** the
132
- > `@plugin` rules and is being dropped as an invalid `@import`. Move it up,
133
- > directly below `@import "tailwindcss"`, and rebuild. Look for the build
134
- > warning `@import must precede all other statements` — that confirms it.
135
-
136
- ### For Tailwind CSS v3
137
-
138
- First install the mapping color system:
139
-
140
- ```bash
141
- npm install mapping-color-system@latest
142
- ```
143
-
144
- Then configure your `tailwind.config.js`:
145
-
146
- ```js
147
- const { plugin, mappingVars } = require('mapping-color-system')
148
- // Design tokens plus the shared radius / container / screen scales.
149
- const torchMode = require('glare-torch-mode')
150
-
151
- module.exports = {
152
- content: [
153
- // put the path from your glare.json file, e.g.:
154
- "./src/**/*.{js,ts,jsx,tsx,mdx}",
155
- ],
156
- theme: {
157
- extend: {
158
- colors: mappingVars,
159
- borderRadius: torchMode.borderRadius,
160
- containers: torchMode.containers,
161
- },
162
- },
163
- // Top level, not inside extend — this replaces Tailwind's breakpoints.
164
- screens: torchMode.screens,
165
- plugins: [
166
- plugin,
167
- require('@tailwindcss/container-queries'),
168
- require('tailwindcss-animate'),
169
- require('tailwind-scrollbar-hide'),
170
- require('glare-typography'),
171
- torchMode,
172
- function ({ addVariant }) {
173
- addVariant("rtl", ['&[dir="rtl"]', '[dir="rtl"] &']);
174
- addVariant("ltr", ['&[dir="ltr"]', '[dir="ltr"] &']);
175
- },
176
- ],
177
- };
178
- ```
179
-
180
- Important:
181
- - Specify the component path in the `content` array matching your `glare.json` path
182
- - Add all plugins to the `plugins` array
183
- - Add `mappingVars` to the `extend.colors` object
184
- - Take `borderRadius`, `containers` and `screens` from `glare-torch-mode` rather than hardcoding
185
- them. `borderRadius` is what produces the `rounded-radius-*` classes the components are built on;
186
- without it Button, Badge, Input, ActionButton, Select and TextArea render with square corners.
187
- - Put `screens` at the **top level**, not inside `extend`, so Glare's breakpoints replace
188
- Tailwind's rather than being added alongside them (`sm` is 600px, not 640px).
189
- - Register `rtl` / `ltr` with **both** selectors. `&[dir="rtl"]` alone only matches an element that
190
- carries the attribute itself, so an `rtl:` class on a component nested inside an RTL wrapper never
191
- applies.
192
-
193
- ---
194
-
195
- ## Step 4: Add Components
196
-
197
- Run the following command to see a dropdown list of available components:
198
-
199
- ```bash
200
- npx torch-glare@latest add
201
- ```
202
-
203
- Or specify which component you want:
204
-
205
- ```bash
206
- npx torch-glare@latest add Button
207
- ```
208
-
209
- You can add multiple components at once:
210
-
211
- ```bash
212
- npx torch-glare@latest add Button Input Badge
213
- ```
214
-
215
- ---
216
-
217
- ## Step 5: Use Components
218
-
219
- Import and use the components from the path configured in `glare.json`:
220
-
221
- ```tsx
222
- import { Button } from "./components/Button";
223
-
224
- function App() {
225
- return (
226
- <Button variant="PrimeStyle" size="M">
227
- Click Me
228
- </Button>
229
- );
230
- }
231
- ```
232
-
233
- ### Button Variants
234
-
235
- ```tsx
236
- import { Button } from "./components/Button";
237
-
238
- export default function ButtonShowcase() {
239
- return (
240
- <div className="flex gap-2 flex-wrap">
241
- <Button variant="PrimeStyle">Primary</Button>
242
- <Button variant="PrimeContStyle">Contrast</Button>
243
- <Button variant="BluSecStyle">Secondary</Button>
244
- <Button variant="BorderStyle">Outline</Button>
245
- </div>
246
- );
247
- }
248
- ```
249
-
250
- ### Theming
251
-
252
- Most components accept a `theme` prop for per-component theming:
253
-
254
- ```tsx
255
- <Button theme="light" variant="PrimeStyle">Light Theme</Button>
256
- <Button theme="dark" variant="PrimeStyle">Dark Theme</Button>
257
- ```
258
-
259
- Or use the `ThemeProvider` for app-wide theming:
260
-
261
- ```tsx
262
- import { ThemeProvider } from "./providers/ThemeProvider";
263
-
264
- export default function RootLayout({ children }) {
265
- return (
266
- <ThemeProvider defaultTheme="light">
267
- {children}
268
- </ThemeProvider>
269
- );
270
- }
271
- ```
272
-
273
- ---
274
-
275
- ## Common Issues and Solutions
276
-
277
- ### Styles Not Applied
278
-
279
- Make sure you've:
280
- 1. Imported `globals.css` with Tailwind directives
281
- 2. Configured `tailwind.config` correctly with all plugins
282
- 3. Added the correct component path to the `content` array
283
-
284
- ### Theme Not Switching
285
-
286
- Ensure:
287
- 1. `ThemeProvider` wraps your app
288
- 2. Component is marked with `'use client'` (Next.js App Router)
289
- 3. Both `mapping-color-system` and `glare-torch-mode` plugins are installed
290
-
291
- ---
292
-
293
- ## Manual Installation
294
-
295
- If you have issues with the CLI, see the [manual installation guide](https://torch-glare.com/getting-started/manual) for step-by-step instructions.
296
-
297
- ## Next Steps
298
-
299
- 1. **[Building Your First Form](./building-first-form.md)** - Create a complete form with validation
300
- 2. **[Theming Basics](./theming-basics.md)** - Customize colors and themes
301
- 3. **[Component Composition](./component-composition.md)** - Build complex UIs
302
- 4. **[Component Documentation](../components/)** - Explore all available components