@torch-ui/solid 0.1.3

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 (118) hide show
  1. package/README.md +166 -0
  2. package/package.json +67 -0
  3. package/src/components/actions/Button.tsx +612 -0
  4. package/src/components/actions/ButtonGroup.tsx +728 -0
  5. package/src/components/actions/Copy.tsx +98 -0
  6. package/src/components/actions/DarkModeToggle.tsx +80 -0
  7. package/src/components/actions/Link.tsx +37 -0
  8. package/src/components/actions/index.ts +19 -0
  9. package/src/components/actions/useCopyToClipboard.ts +90 -0
  10. package/src/components/charts/Chart.tsx +331 -0
  11. package/src/components/charts/Sparkline.tsx +156 -0
  12. package/src/components/charts/index.ts +13 -0
  13. package/src/components/data-display/Avatar.tsx +208 -0
  14. package/src/components/data-display/AvatarGroup.tsx +228 -0
  15. package/src/components/data-display/Badge.tsx +70 -0
  16. package/src/components/data-display/Carousel.tsx +214 -0
  17. package/src/components/data-display/ColorSwatch.tsx +56 -0
  18. package/src/components/data-display/DataTable.tsx +886 -0
  19. package/src/components/data-display/EmptyState.tsx +61 -0
  20. package/src/components/data-display/Image.tsx +277 -0
  21. package/src/components/data-display/Kbd.tsx +114 -0
  22. package/src/components/data-display/Persona.tsx +78 -0
  23. package/src/components/data-display/StatCard.tsx +338 -0
  24. package/src/components/data-display/Table.tsx +147 -0
  25. package/src/components/data-display/Tag.tsx +91 -0
  26. package/src/components/data-display/Timeline.tsx +200 -0
  27. package/src/components/data-display/TreeView.tsx +172 -0
  28. package/src/components/data-display/Video.tsx +95 -0
  29. package/src/components/data-display/avatar-utils.ts +32 -0
  30. package/src/components/data-display/index.ts +81 -0
  31. package/src/components/feedback/Loading.tsx +159 -0
  32. package/src/components/feedback/Progress.tsx +321 -0
  33. package/src/components/feedback/Skeleton.tsx +62 -0
  34. package/src/components/feedback/SkeletonBlocks.tsx +222 -0
  35. package/src/components/feedback/Toast.tsx +648 -0
  36. package/src/components/feedback/index.ts +44 -0
  37. package/src/components/feedback/password/PasswordStrengthIndicator.tsx +232 -0
  38. package/src/components/feedback/password/password-strength.ts +115 -0
  39. package/src/components/feedback/password/password-validation-data.ts +66 -0
  40. package/src/components/feedback/password/password-validation.ts +93 -0
  41. package/src/components/forms/Autocomplete.tsx +268 -0
  42. package/src/components/forms/Checkbox.tsx +155 -0
  43. package/src/components/forms/CodeInput.tsx +237 -0
  44. package/src/components/forms/ColorPicker/ColorPicker.tsx +469 -0
  45. package/src/components/forms/ColorPicker/color-utils.ts +75 -0
  46. package/src/components/forms/ColorPicker/index.ts +2 -0
  47. package/src/components/forms/DatePicker.tsx +516 -0
  48. package/src/components/forms/DateRangePicker.tsx +464 -0
  49. package/src/components/forms/FieldPicker.tsx +64 -0
  50. package/src/components/forms/FileUpload.tsx +614 -0
  51. package/src/components/forms/FilterBuilder/FilterGroupBlock.ts +6 -0
  52. package/src/components/forms/FilterBuilder.tsx +16 -0
  53. package/src/components/forms/FilterRuleRow.tsx +68 -0
  54. package/src/components/forms/Input.tsx +200 -0
  55. package/src/components/forms/MultiSelect.tsx +361 -0
  56. package/src/components/forms/NumberField.tsx +145 -0
  57. package/src/components/forms/RadioGroup.tsx +135 -0
  58. package/src/components/forms/RelativeDateDefaultInput.tsx +62 -0
  59. package/src/components/forms/ReorderableList.tsx +163 -0
  60. package/src/components/forms/Select.tsx +268 -0
  61. package/src/components/forms/Slider.tsx +260 -0
  62. package/src/components/forms/Switch.tsx +135 -0
  63. package/src/components/forms/TextArea.tsx +202 -0
  64. package/src/components/forms/ViewCustomizer.tsx +44 -0
  65. package/src/components/forms/index.ts +43 -0
  66. package/src/components/layout/Accordion.tsx +110 -0
  67. package/src/components/layout/Alert.tsx +156 -0
  68. package/src/components/layout/BlockQuote.tsx +70 -0
  69. package/src/components/layout/Card.tsx +166 -0
  70. package/src/components/layout/CodeBlock/CodeBlock.tsx +477 -0
  71. package/src/components/layout/CodeBlock/code-block-tokens.css +104 -0
  72. package/src/components/layout/CodeBlock/prism.ts +81 -0
  73. package/src/components/layout/Collapsible.tsx +84 -0
  74. package/src/components/layout/Container.tsx +55 -0
  75. package/src/components/layout/Divider.tsx +64 -0
  76. package/src/components/layout/Form.tsx +39 -0
  77. package/src/components/layout/FormActions.tsx +50 -0
  78. package/src/components/layout/Grid.tsx +53 -0
  79. package/src/components/layout/PageHeading.tsx +46 -0
  80. package/src/components/layout/PromptWithAction.tsx +49 -0
  81. package/src/components/layout/Section.tsx +60 -0
  82. package/src/components/layout/TablePanel.tsx +24 -0
  83. package/src/components/layout/TableView/TableView.tsx +1018 -0
  84. package/src/components/layout/TableView/index.ts +3 -0
  85. package/src/components/layout/TableView/types.ts +51 -0
  86. package/src/components/layout/WizardStep.tsx +40 -0
  87. package/src/components/layout/WizardStepper.tsx +173 -0
  88. package/src/components/layout/index.ts +96 -0
  89. package/src/components/navigation/Breadcrumbs.tsx +66 -0
  90. package/src/components/navigation/DropdownMenu.tsx +86 -0
  91. package/src/components/navigation/MegaMenu.tsx +480 -0
  92. package/src/components/navigation/NavigationMenu.tsx +305 -0
  93. package/src/components/navigation/Pagination.tsx +298 -0
  94. package/src/components/navigation/Sidebar.tsx +280 -0
  95. package/src/components/navigation/Tabs.tsx +122 -0
  96. package/src/components/navigation/ViewSwitcher.tsx +314 -0
  97. package/src/components/navigation/index.ts +66 -0
  98. package/src/components/overlays/AlertDialog.tsx +174 -0
  99. package/src/components/overlays/ContextMenu.tsx +65 -0
  100. package/src/components/overlays/Dialog.tsx +279 -0
  101. package/src/components/overlays/Drawer.tsx +370 -0
  102. package/src/components/overlays/HoverCard.tsx +107 -0
  103. package/src/components/overlays/Popover.tsx +73 -0
  104. package/src/components/overlays/Tooltip.tsx +31 -0
  105. package/src/components/overlays/index.ts +71 -0
  106. package/src/components/typography/Code.tsx +72 -0
  107. package/src/components/typography/Icon.tsx +36 -0
  108. package/src/components/typography/index.ts +10 -0
  109. package/src/env.d.ts +9 -0
  110. package/src/index.ts +13 -0
  111. package/src/styles/theme.css +226 -0
  112. package/src/types/avatar-types.ts +11 -0
  113. package/src/types/filter-types.ts +35 -0
  114. package/src/utilities/classNames.ts +6 -0
  115. package/src/utilities/componentSize.ts +46 -0
  116. package/src/utilities/i18n.tsx +60 -0
  117. package/src/utilities/mergeRefs.ts +12 -0
  118. package/src/utilities/relativeDateDefault.ts +14 -0
package/README.md ADDED
@@ -0,0 +1,166 @@
1
+ # @torchui/solid
2
+
3
+ A SolidJS component library built on [Kobalte](https://kobalte.dev) primitives and [Tailwind CSS](https://tailwindcss.com).
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ # npm
9
+ npm install @torchui/solid
10
+
11
+ # pnpm
12
+ pnpm add @torchui/solid
13
+
14
+ # yarn
15
+ yarn add @torchui/solid
16
+
17
+ # bun
18
+ bun add @torchui/solid
19
+ ```
20
+
21
+ ## Setup
22
+
23
+ After installing, add a `@source` directive to your main CSS file so Tailwind scans TorchUI's classes:
24
+
25
+ ```css
26
+ @import "tailwindcss";
27
+ @import "@torchui/solid/styles/theme.css";
28
+
29
+ @source "../node_modules/@torchui/solid/src/**/*.{ts,tsx}";
30
+ ```
31
+
32
+ For class-based dark mode (e.g. `<body class="dark">`), add the custom variant before `@source`:
33
+
34
+ ```css
35
+ @import "tailwindcss";
36
+ @import "@torchui/solid/styles/theme.css";
37
+
38
+ @custom-variant dark (&:where(.dark, .dark *));
39
+
40
+ @source "../node_modules/@torchui/solid/src/**/*.{ts,tsx}";
41
+ ```
42
+
43
+ > **Note:** Adjust the `@source` path if your CSS file is not at `src/app.css` (e.g. in a monorepo the path may be `../../../packages/ui/src/**/*.{ts,tsx}`).
44
+
45
+ ## Usage
46
+
47
+ ```tsx
48
+ import { Button } from '@torchui/solid/actions';
49
+ import { Input } from '@torchui/solid/forms';
50
+ import { Card } from '@torchui/solid/layout';
51
+
52
+ function App() {
53
+ return (
54
+ <Card>
55
+ <Input label="Name" placeholder="Enter your name" />
56
+ <Button variant="primary">Submit</Button>
57
+ </Card>
58
+ );
59
+ }
60
+ ```
61
+
62
+ ## Components
63
+
64
+ ### Actions
65
+ - Button, ButtonGroup, Link, Copy, DarkModeToggle
66
+
67
+ ### Forms
68
+ - Input, TextArea, Select, Checkbox, Switch, RadioGroup
69
+ - NumberField, Slider, DatePicker, DateRangePicker, ColorPicker, FileUpload
70
+ - Autocomplete, MultiSelect, CodeInput
71
+
72
+ ### Layout
73
+ - Card, Grid, Container, Section, Divider
74
+ - Accordion, Collapsible, Form, FormActions
75
+
76
+ ### Overlays
77
+ - Dialog, Drawer, Popover, Tooltip, AlertDialog, ContextMenu, HoverCard
78
+
79
+ ### Navigation
80
+ - Tabs, Breadcrumbs, DropdownMenu, Pagination, ViewSwitcher
81
+ - NavigationMenu, MegaMenu, Sidebar
82
+
83
+ ### Data Display
84
+ - Table, DataTable, Image, Avatar, AvatarGroup, Badge, Tag
85
+ - Persona, StatCard, EmptyState, Carousel, ColorSwatch
86
+ - Timeline, TreeView, Video
87
+
88
+ ### Feedback
89
+ - Loading, Progress, Skeleton, Toast, PasswordStrengthIndicator
90
+
91
+ ### Typography
92
+ - Code, Icon
93
+
94
+ ### Charts
95
+ - Chart, Sparkline
96
+
97
+ ## Theming
98
+
99
+ TorchUI uses a semantic color system built on three concepts:
100
+
101
+ - **Surface** - the canvas (backgrounds, containers)
102
+ - **Ink** - the content (text, borders, icons)
103
+ - **Primary** - the accent (brand colors, active states)
104
+
105
+ ### CSS Variables
106
+
107
+ TorchUI generates full color palettes from base colors. Override just the `500` variants to customize an entire scale:
108
+
109
+ ```css
110
+ :root {
111
+ --surface-base: #f5f5f5;
112
+ --surface-raised: #ffffff;
113
+ --ink-500: #374151;
114
+ --primary-500: #6366f1;
115
+ }
116
+ ```
117
+
118
+ The lighter (`50-400`) and darker (`600-950`) variants are generated automatically using `color-mix()`. You can still override any individual token if needed.
119
+
120
+ ### Dark Mode
121
+
122
+ Dark mode is class-based. Add `.dark` to your root element:
123
+
124
+ ```js
125
+ document.documentElement.classList.toggle('dark')
126
+ ```
127
+
128
+ Or use the built-in `<DarkModeToggle />` component.
129
+
130
+ ### Available Tokens
131
+
132
+ | Group | Tokens | Usage |
133
+ |---|---|---|
134
+ | `surface-*` | `base`, `raised`, `dim`, `overlay`, `border` | Backgrounds, containers |
135
+ | `ink-*` | `50` – `950` | Text, icons, borders |
136
+ | `primary-*` | `50` – `950` | Brand, accents, focus rings |
137
+ | `danger-*` | `50` – `950` | Errors, destructive actions |
138
+ | `success-*` | `50` – `950` | Confirmations, positive states |
139
+ | `warning-*` | `50` – `950` | Cautions |
140
+
141
+ ## Documentation
142
+
143
+ For full documentation and examples, visit: https://torch-ui.dev
144
+
145
+ ## Requirements
146
+
147
+ ### Peer Dependencies
148
+
149
+ | Package | Version |
150
+ |---|---|
151
+ | [solid-js](https://www.solidjs.com) | ^1.9.0 |
152
+ | [tailwindcss](https://tailwindcss.com) | ^4.0.0 |
153
+
154
+ ### Bundled
155
+
156
+ | Package | Used for |
157
+ |---|---|
158
+ | [@kobalte/core](https://kobalte.dev) | Accessible primitives (ARIA, keyboard nav) |
159
+ | [lucide-solid](https://lucide.dev) | Icons |
160
+ | [chart.js](https://www.chartjs.org) | Chart and Sparkline components |
161
+ | [@thisbeyond/solid-dnd](https://github.com/thisbeyond/solid-dnd) | Drag-and-drop (MultiSelect, ReorderableList) |
162
+ | [prismjs](https://prismjs.com) | Syntax highlighting (CodeBlock) |
163
+
164
+ ## License
165
+
166
+ MIT © Sean Dowd
package/package.json ADDED
@@ -0,0 +1,67 @@
1
+ {
2
+ "name": "@torch-ui/solid",
3
+ "version": "0.1.3",
4
+ "description": "A modern, accessible SolidJS component library built with Tailwind CSS and Kobalte",
5
+ "type": "module",
6
+ "files": [
7
+ "src"
8
+ ],
9
+ "main": "./src/index.ts",
10
+ "exports": {
11
+ ".": "./src/index.ts",
12
+ "./actions": "./src/components/actions/index.ts",
13
+ "./typography": "./src/components/typography/index.ts",
14
+ "./forms": "./src/components/forms/index.ts",
15
+ "./feedback": "./src/components/feedback/index.ts",
16
+ "./layout": "./src/components/layout/index.ts",
17
+ "./overlays": "./src/components/overlays/index.ts",
18
+ "./navigation": "./src/components/navigation/index.ts",
19
+ "./data-display": "./src/components/data-display/index.ts",
20
+ "./charts": "./src/components/charts/index.ts",
21
+ "./styles/theme.css": "./src/styles/theme.css",
22
+ "./styles/code-block-tokens.css": "./src/components/styles/code-block-tokens.css"
23
+ },
24
+ "scripts": {
25
+ "typecheck": "tsc --noEmit"
26
+ },
27
+ "keywords": [
28
+ "solidjs",
29
+ "ui",
30
+ "components",
31
+ "tailwind",
32
+ "kobalte",
33
+ "accessibility",
34
+ "typescript"
35
+ ],
36
+ "repository": {
37
+ "type": "git",
38
+ "url": "https://github.com/sean-dowd-sr/torchui.git"
39
+ },
40
+ "homepage": "https://github.com/sean-dowd-sr/torchui#readme",
41
+ "bugs": {
42
+ "url": "https://github.com/sean-dowd-sr/torchui/issues"
43
+ },
44
+ "author": "Sean Dowd <sean.dowd.sr@gmail.com>",
45
+ "license": "MIT",
46
+ "dependencies": {
47
+ "@kobalte/core": ">=0.13.11",
48
+ "@thisbeyond/solid-dnd": "^0.7.5",
49
+ "chart.js": "^4.5.1",
50
+ "clsx": "^2.1.1",
51
+ "lucide-solid": "^0.563.0",
52
+ "prismjs": "^1.30.0",
53
+ "tailwind-merge": "^3.3.1"
54
+ },
55
+ "peerDependencies": {
56
+ "solid-js": "^1.9.0",
57
+ "tailwindcss": "^4.0.0"
58
+ },
59
+ "publishConfig": {
60
+ "access": "public"
61
+ },
62
+ "devDependencies": {
63
+ "@types/prismjs": "^1.26.6",
64
+ "solid-js": "^1.9.11",
65
+ "typescript": "^5.9.3"
66
+ }
67
+ }