@adaptive-ds/solid-ui 0.11.0 → 0.13.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.
- package/LICENSE +1 -1
- package/README.md +219 -0
- package/dist/demo_pages/LinkBlock.js +1 -1
- package/dist/demo_pages/generateDemoRoutes.js +3 -3
- package/dist/generate_demo_list/generateDemoList.js +1 -1
- package/dist/generate_demo_list/parts/formatGeneratedCodeFile.d.ts +1 -1
- package/dist/generate_demo_list/parts/formatGeneratedCodeFile.js +1 -1
- package/dist/input/check/CheckBoolean.js +1 -1
- package/dist/input/check/CheckBooleanSingle.js +1 -1
- package/dist/input/check/CheckMultiple.js +1 -1
- package/dist/input/check/CheckSingle.js +1 -1
- package/dist/input/check/Checkbox.js +1 -1
- package/dist/input/fieldset/Fieldset.js +1 -1
- package/dist/input/input/Input.js +1 -1
- package/dist/input/input/InputDatalist.js +2 -2
- package/dist/input/label/Label.js +1 -1
- package/dist/input/label/LabelAsterix.js +1 -1
- package/dist/input/label/LabelPseudo.js +1 -1
- package/dist/input/label/LabelWithInfo.js +1 -1
- package/dist/input/label/LabelWithSubtitle.js +1 -1
- package/dist/input/number/NumberInputS.js +2 -2
- package/dist/input/select/SelectMultiple.js +1 -1
- package/dist/input/select/SelectSingleNative.js +1 -1
- package/dist/input/switch/SwitchSingle.js +1 -1
- package/dist/input/textarea/Textarea.js +1 -1
- package/dist/interactive/button/Button.js +1 -1
- package/dist/interactive/button/ButtonIcon1.js +1 -1
- package/dist/interactive/button/ButtonIconOnly.js +1 -1
- package/dist/interactive/button/buttonCva.d.ts +13 -9
- package/dist/interactive/button/buttonCva.d.ts.map +1 -1
- package/dist/interactive/button/buttonCva.js +75 -43
- package/dist/interactive/button/buttonCva.js.map +1 -1
- package/dist/interactive/button/buttonIconCva.d.ts +1 -1
- package/dist/interactive/button/buttonIconCva.d.ts.map +1 -1
- package/dist/interactive/button/buttonIconCva.js +14 -15
- package/dist/interactive/button/buttonIconCva.js.map +1 -1
- package/dist/interactive/button/classesButtonDisabled.d.ts +2 -0
- package/dist/interactive/button/classesButtonDisabled.d.ts.map +1 -0
- package/dist/interactive/button/classesButtonDisabled.js +5 -0
- package/dist/interactive/button/classesButtonDisabled.js.map +1 -0
- package/dist/interactive/details/Details.js +1 -1
- package/dist/interactive/dialog/CorvuDialog.js +1 -1
- package/dist/interactive/dialog/CorvuDialogIcon.js +1 -1
- package/dist/interactive/layout/SidebarLayout.js +1 -1
- package/dist/interactive/link/LinkButton.js +1 -1
- package/dist/interactive/link/LinkButtonIconOnly.js +1 -1
- package/dist/interactive/link/LinkText.js +1 -1
- package/dist/interactive/list/BulletLinks.js +1 -1
- package/dist/interactive/tabs/TabsTop.js +1 -1
- package/dist/interactive/theme/ThemeButton.d.ts +1 -1
- package/dist/interactive/theme/ThemeButton.d.ts.map +1 -1
- package/dist/interactive/theme/ThemeButton.js +4 -4
- package/dist/interactive/theme/ThemeButton.js.map +1 -1
- package/dist/interactive/theme/themeSignal.d.ts.map +1 -1
- package/dist/interactive/theme/themeSignal.js +3 -1
- package/dist/interactive/theme/themeSignal.js.map +1 -1
- package/dist/interactive/toast/Toast.js +1 -1
- package/dist/interactive/toast/Toaster.js +1 -1
- package/dist/interactive/toggle/ToggleButtonIconOnly.js +1 -1
- package/dist/node_modules/@adaptive-ds/utils/dist/bun/runCmdAsync.js +45 -0
- package/dist/node_modules/@adaptive-ds/utils/dist/bun/runCmdAsync.js.map +1 -0
- package/dist/node_modules/@adaptive-ds/utils/dist/int/safeParseInt.js +10 -0
- package/dist/node_modules/@adaptive-ds/utils/dist/int/safeParseInt.js.map +1 -0
- package/dist/node_modules/@adaptive-ds/utils/dist/json/jsonStringifyPretty.js +7 -0
- package/dist/node_modules/@adaptive-ds/utils/dist/json/jsonStringifyPretty.js.map +1 -0
- package/dist/node_modules/@adaptive-ds/utils/dist/obj/objectEntries.js +5 -0
- package/dist/node_modules/@adaptive-ds/utils/dist/obj/objectEntries.js.map +1 -0
- package/dist/node_modules/@adaptive-ds/utils/dist/obj/objectKeys.js +5 -0
- package/dist/node_modules/@adaptive-ds/utils/dist/obj/objectKeys.js.map +1 -0
- package/dist/node_modules/@adaptive-ds/utils/dist/ran/generateId12.js +9 -0
- package/dist/node_modules/@adaptive-ds/utils/dist/ran/generateId12.js.map +1 -0
- package/dist/node_modules/@adaptive-ds/utils/dist/ran/generateReadableId.js +29 -0
- package/dist/node_modules/@adaptive-ds/utils/dist/ran/generateReadableId.js.map +1 -0
- package/dist/node_modules/@adaptive-ds/utils/dist/ran/urlAlphabet32.js +5 -0
- package/dist/node_modules/@adaptive-ds/utils/dist/ran/urlAlphabet32.js.map +1 -0
- package/dist/node_modules/@corvu/dialog/dist/index.js +537 -0
- package/dist/node_modules/@corvu/dialog/dist/index.js.map +1 -0
- package/dist/node_modules/@corvu/popover/dist/index.js +267 -0
- package/dist/node_modules/@corvu/popover/dist/index.js.map +1 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/chunk/74BWZKBI.js +7 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/chunk/74BWZKBI.js.map +1 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/chunk/NVYXOAAC.js +22 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/chunk/NVYXOAAC.js.map +1 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/chunk/U42ECMND.js +16 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/chunk/U42ECMND.js.map +1 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/chunk/UKBPAEF5.js +23 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/chunk/UKBPAEF5.js.map +1 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/chunk/WR7IK7QK.js +41 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/chunk/WR7IK7QK.js.map +1 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/components/FloatingArrow.js +72 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/components/FloatingArrow.js.map +1 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/create/floating.js +132 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/create/floating.js.map +1 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/create/keyedContext.js +20 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/create/keyedContext.js.map +1 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/create/once.js +18 -0
- package/dist/node_modules/@corvu/popover/node_modules/@corvu/utils/dist/create/once.js.map +1 -0
- package/dist/node_modules/@corvu/utils/dist/chunk/74BWZKBI.js +18 -0
- package/dist/node_modules/@corvu/utils/dist/chunk/74BWZKBI.js.map +1 -0
- package/dist/node_modules/@corvu/utils/dist/chunk/GZJAOTUE.js +45 -0
- package/dist/node_modules/@corvu/utils/dist/chunk/GZJAOTUE.js.map +1 -0
- package/dist/node_modules/@corvu/utils/dist/chunk/U42ECMND.js +20 -0
- package/dist/node_modules/@corvu/utils/dist/chunk/U42ECMND.js.map +1 -0
- package/dist/node_modules/@corvu/utils/dist/chunk/UKBPAEF5.js +52 -0
- package/dist/node_modules/@corvu/utils/dist/chunk/UKBPAEF5.js.map +1 -0
- package/dist/node_modules/@corvu/utils/dist/chunk/XJFCWSNS.js +11 -0
- package/dist/node_modules/@corvu/utils/dist/chunk/XJFCWSNS.js.map +1 -0
- package/dist/node_modules/@corvu/utils/dist/create/controllableSignal.js +29 -0
- package/dist/node_modules/@corvu/utils/dist/create/controllableSignal.js.map +1 -0
- package/dist/node_modules/@corvu/utils/dist/create/keyedContext.js +20 -0
- package/dist/node_modules/@corvu/utils/dist/create/keyedContext.js.map +1 -0
- package/dist/node_modules/@corvu/utils/dist/create/once.js +18 -0
- package/dist/node_modules/@corvu/utils/dist/create/once.js.map +1 -0
- package/dist/node_modules/@corvu/utils/dist/create/register.js +22 -0
- package/dist/node_modules/@corvu/utils/dist/create/register.js.map +1 -0
- package/dist/node_modules/@corvu/utils/dist/create/style.js +51 -0
- package/dist/node_modules/@corvu/utils/dist/create/style.js.map +1 -0
- package/dist/node_modules/@corvu/utils/dist/scroll/index.js +39 -0
- package/dist/node_modules/@corvu/utils/dist/scroll/index.js.map +1 -0
- package/dist/node_modules/@floating-ui/core/dist/floating-ui.core.js +879 -0
- package/dist/node_modules/@floating-ui/core/dist/floating-ui.core.js.map +1 -0
- package/dist/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +632 -0
- package/dist/node_modules/@floating-ui/dom/dist/floating-ui.dom.js.map +1 -0
- package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +177 -0
- package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js.map +1 -0
- package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +156 -0
- package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.js.map +1 -0
- package/dist/node_modules/image-size/dist/index.js +942 -0
- package/dist/node_modules/image-size/dist/index.js.map +1 -0
- package/dist/node_modules/solid-dismissible/dist/index.js +253 -0
- package/dist/node_modules/solid-dismissible/dist/index.js.map +1 -0
- package/dist/node_modules/solid-focus-trap/dist/index.js +164 -0
- package/dist/node_modules/solid-focus-trap/dist/index.js.map +1 -0
- package/dist/node_modules/solid-presence/dist/index.js +73 -0
- package/dist/node_modules/solid-presence/dist/index.js.map +1 -0
- package/dist/node_modules/solid-prevent-scroll/dist/index.js +160 -0
- package/dist/node_modules/solid-prevent-scroll/dist/index.js.map +1 -0
- package/dist/static/badge/Badge.js +1 -1
- package/dist/static/container/CardWrapper.js +1 -1
- package/dist/static/dev/TailwindIndicator.js +1 -1
- package/dist/static/grid/FeatureGridSection.js +1 -1
- package/dist/static/icon/Icon.js +1 -1
- package/dist/static/icon/IconGoogle.js +1 -1
- package/dist/static/icons/iconApple.d.ts +2 -0
- package/dist/static/icons/iconApple.d.ts.map +1 -0
- package/dist/static/icons/iconApple.js +5 -0
- package/dist/static/icons/iconApple.js.map +1 -0
- package/dist/static/icons/iconGooglePlay.d.ts +2 -0
- package/dist/static/icons/iconGooglePlay.d.ts.map +1 -0
- package/dist/static/icons/iconGooglePlay.js +5 -0
- package/dist/static/icons/iconGooglePlay.js.map +1 -0
- package/dist/static/img/Img.js +1 -1
- package/dist/static/lists/BlackBulletPoint.js +1 -1
- package/dist/static/lists/BlackBulletPoints.d.ts +8 -0
- package/dist/static/lists/BlackBulletPoints.d.ts.map +1 -0
- package/dist/static/lists/BlackBulletPoints.js +35 -0
- package/dist/static/lists/BlackBulletPoints.js.map +1 -0
- package/dist/static/lists/BlueBulletPoint.js +1 -1
- package/dist/static/lists/BlueBulletPoints.d.ts +3 -0
- package/dist/static/lists/BlueBulletPoints.d.ts.map +1 -0
- package/dist/static/lists/BlueBulletPoints.js +11 -0
- package/dist/static/lists/BlueBulletPoints.js.map +1 -0
- package/dist/static/lists/CheckPoints.d.ts +8 -0
- package/dist/static/lists/CheckPoints.d.ts.map +1 -0
- package/dist/static/lists/CheckPoints.js +35 -0
- package/dist/static/lists/CheckPoints.js.map +1 -0
- package/dist/static/lists/TextOrLink.d.ts +6 -0
- package/dist/static/lists/TextOrLink.d.ts.map +1 -0
- package/dist/static/lists/TextOrLink.js +35 -0
- package/dist/static/lists/TextOrLink.js.map +1 -0
- package/dist/static/loaders/LoaderShuffle4Dots.js +1 -1
- package/dist/static/loaders/LoaderShuffle9Squares.js +1 -1
- package/dist/static/loaders/LoaderSpin4Square.js +1 -1
- package/dist/static/loaders/LoadingPage.js +1 -1
- package/dist/static/logo/LogoImageText.js +1 -1
- package/dist/static/page/PageWrapper.js +1 -1
- package/dist/static/pages/ErrorPage.js +1 -1
- package/dist/static/pages/SuccessPage.js +1 -1
- package/dist/static/separator/SeparatorOr.js +1 -1
- package/dist/static/separator/SeparatorWithText.js +1 -1
- package/dist/static/styles/stylesBgDottedSparse.d.ts +6 -0
- package/dist/static/styles/stylesBgDottedSparse.d.ts.map +1 -0
- package/dist/static/styles/stylesBgDottedSparse.js +9 -0
- package/dist/static/styles/stylesBgDottedSparse.js.map +1 -0
- package/dist/static/timeline/Timeline.js +1 -1
- package/dist/table/Table.js +1 -1
- package/dist/table/table1/Table1D.js +1 -1
- package/dist/table/table1/Table1M.js +1 -1
- package/dist/table/table1/Table1MEntry.js +1 -1
- package/dist/table/table2/Table2D.js +1 -1
- package/dist/table/table2/Table2M.js +1 -1
- package/dist/table/table2/Table2MEntry.js +1 -1
- package/package.json +16 -18
package/LICENSE
CHANGED
package/README.md
ADDED
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
# Adaptive Solid UI
|
|
2
|
+
|
|
3
|
+
A library of reusable UI components for Solid.js projects. Built with TypeScript, Tailwind CSS, and Solid.js. Components are designed to be accessible, customizable, and easy to integrate.
|
|
4
|
+
|
|
5
|
+
[](https://badge.fury.io/js/%40adaptive-sm%2Fsolid-ui)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
[](https://www.solidjs.com/)
|
|
8
|
+
[](https://tailwindcss.com/)
|
|
9
|
+
|
|
10
|
+
Quick link
|
|
11
|
+
|
|
12
|
+
- code - https://github.com/david1gp/astro-ui
|
|
13
|
+
- npm - https://www.npmjs.com/package/@adaptive-ds/astro-ui
|
|
14
|
+
- component demo - https://adaptive-solid-ui.pages.dev/
|
|
15
|
+
|
|
16
|
+
## Features
|
|
17
|
+
|
|
18
|
+
- **Accessible Components**: Built with accessibility in mind, following ARIA standards.
|
|
19
|
+
- **TypeScript Support**: Fully typed for better developer experience.
|
|
20
|
+
- **Tailwind CSS Integration**: Styled with Tailwind for easy customization.
|
|
21
|
+
- **Solid.js Optimized**: Leverages Solid.js reactivity for performant UIs.
|
|
22
|
+
- **Modular Design**: Import only the components you need.
|
|
23
|
+
- **Dark Mode Ready**: Supports light and dark themes out of the box.
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
Install the package using Bun (recommended) or npm:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
bun add @adaptive-ds/solid-ui
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
or
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npm install @adaptive-ds/solid-ui
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Ensure you have the peer dependencies installed:
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
bun add solid-js clsx tailwind-merge valibot dayjs @solid-primitives/keyed @solid-primitives/scheduled @mdi/js
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Setup: Tailwind CSS Configuration
|
|
46
|
+
|
|
47
|
+
To ensure Tailwind scans the library's source files for classes (since components are published as source without a build step), add the following `@source` directive to your project's `src/layouts/tailwind.css` (or equivalent global stylesheet):
|
|
48
|
+
|
|
49
|
+
```css
|
|
50
|
+
@source '/node_modules/@adaptive-ds/solid-ui/export/**/*.{astro,html,md,mdx,ts,tsx}';
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
This tells Tailwind to include classes from the library's `.tsx`, `.ts`, and other relevant files in the purge process, preventing unused classes from being purged during the build. Without it, Tailwind might not detect classes used in imported components, leading to missing styles.
|
|
54
|
+
|
|
55
|
+
## Option Configuration: Import Aliases
|
|
56
|
+
|
|
57
|
+
### Typescript
|
|
58
|
+
|
|
59
|
+
In your `tsconfig.json`, set up the `~` alias to point to the library:
|
|
60
|
+
|
|
61
|
+
```json
|
|
62
|
+
{
|
|
63
|
+
"compilerOptions": {
|
|
64
|
+
"baseUrl": ".",
|
|
65
|
+
"paths": {
|
|
66
|
+
"@/*": ["src/*"],
|
|
67
|
+
"~ui/*": ["./node_modules/@adaptive-ds/solid-ui/lib/*"]
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Vite
|
|
74
|
+
|
|
75
|
+
In your `vite.config.ts`, set up the `~` alias to point to the library:
|
|
76
|
+
|
|
77
|
+
```js
|
|
78
|
+
import tailwindcss from "@tailwindcss/vite"
|
|
79
|
+
import { defineConfig } from "vite"
|
|
80
|
+
import solid from "vite-plugin-solid"
|
|
81
|
+
|
|
82
|
+
export default defineConfig({
|
|
83
|
+
resolve: {
|
|
84
|
+
alias: {
|
|
85
|
+
"@": new URL("./src", import.meta.url).pathname,
|
|
86
|
+
"~ui": new URL("./node_modules/@adaptive-ds/solid-ui/lib", import.meta.url).pathname,
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
plugins: [solid(), tailwindcss()],
|
|
90
|
+
})
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## Usage Example
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
import { Button } from "@adaptive-ds/solid-ui/interactive/button/Button.tsx"
|
|
97
|
+
import { buttonVariant } from "@adaptive-ds/solid-ui/interactive/button/buttonCva"
|
|
98
|
+
|
|
99
|
+
function MyComponent() {
|
|
100
|
+
return (
|
|
101
|
+
<Button variant={buttonVariant.link} onClick={() => alert("Clicked!")}>
|
|
102
|
+
Click Me
|
|
103
|
+
</Button>
|
|
104
|
+
)
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## Components
|
|
109
|
+
|
|
110
|
+
The library includes a variety of UI components organized by category:
|
|
111
|
+
|
|
112
|
+
### Interactive
|
|
113
|
+
|
|
114
|
+
- [Button](https://github.com/david1gp/solid-ui/tree/main/lib/interactive/button) - Standard and icon buttons.
|
|
115
|
+
- [Link](https://github.com/david1gp/solid-ui/tree/main/lib/interactive/link) - Styled links and buttons.
|
|
116
|
+
- [Toggle](https://github.com/david1gp/solid-ui/tree/main/lib/interactive/toggle) - Toggle switches.
|
|
117
|
+
- [Dialog](https://github.com/david1gp/solid-ui/tree/main/lib/interactive/dialog) - Native dialogs.
|
|
118
|
+
- [Toast](https://github.com/david1gp/solid-ui/tree/main/lib/interactive/toast) - Notification toasts.
|
|
119
|
+
- [Popover](https://github.com/david1gp/solid-ui/tree/main/lib/interactive/popover) - Simple popovers.
|
|
120
|
+
- [Tabs](https://github.com/david1gp/solid-ui/tree/main/lib/interactive/tabs) - Tab navigation.
|
|
121
|
+
|
|
122
|
+
### Input
|
|
123
|
+
|
|
124
|
+
- [Input](https://github.com/david1gp/solid-ui/tree/main/lib/input/input) - Text inputs.
|
|
125
|
+
- [Textarea](https://github.com/david1gp/solid-ui/tree/main/lib/input/textarea) - Multi-line textareas.
|
|
126
|
+
- [Select](https://github.com/david1gp/solid-ui/tree/main/lib/input/select) - Single and multi-selects.
|
|
127
|
+
- [Radio](https://github.com/david1gp/solid-ui/tree/main/lib/input/radio) - Radio switches.
|
|
128
|
+
- [Form](https://github.com/david1gp/solid-ui/tree/main/lib/input/form) - Form utilities.
|
|
129
|
+
|
|
130
|
+
### Table
|
|
131
|
+
|
|
132
|
+
- [Table](https://github.com/david1gp/solid-ui/tree/main/lib/table) - Data tables with sorting, pagination, and filtering.
|
|
133
|
+
- Table1: Basic table.
|
|
134
|
+
- Table2: Sortable table.
|
|
135
|
+
- Table3: Advanced table with search and pagination.
|
|
136
|
+
|
|
137
|
+
### Static
|
|
138
|
+
|
|
139
|
+
- [Container](https://github.com/david1gp/solid-ui/tree/main/lib/static/container) - Layout wrappers and page containers.
|
|
140
|
+
- [Loader](https://github.com/david1gp/solid-ui/tree/main/lib/static/loaders) - Loading animations.
|
|
141
|
+
- [Pages](https://github.com/david1gp/solid-ui/tree/main/lib/static/pages) - Error and success pages.
|
|
142
|
+
- [Img](https://github.com/david1gp/solid-ui/tree/main/lib/static/img) - Optimized image component.
|
|
143
|
+
- [Badge](https://github.com/david1gp/solid-ui/tree/main/lib/static/badge) - Badge component.
|
|
144
|
+
- [Timeline](https://github.com/david1gp/solid-ui/tree/main/lib/static/timeline) - Timeline layout.
|
|
145
|
+
|
|
146
|
+
### Utils
|
|
147
|
+
|
|
148
|
+
- [Class Utilities](https://github.com/david1gp/solid-ui/tree/main/lib/utils/ui) - `classMerge`, `classArr` for Tailwind class management.
|
|
149
|
+
- [i18n](https://github.com/david1gp/solid-ui/tree/main/lib/i18n) - Basic internationalization support.
|
|
150
|
+
- [Arrays & Objects](https://github.com/david1gp/solid-ui/tree/main/lib/utils/arr) - Utility functions for data manipulation.
|
|
151
|
+
|
|
152
|
+
For detailed API and props, see the [documentation](https://github.com/david1gp/solid-ui/tree/main/docs) or check the source in `/lib`.
|
|
153
|
+
|
|
154
|
+
## Development
|
|
155
|
+
|
|
156
|
+
### Setup
|
|
157
|
+
|
|
158
|
+
1. Clone the repository:
|
|
159
|
+
|
|
160
|
+
```bash
|
|
161
|
+
git clone https://github.com/david1gp/solid-ui.git
|
|
162
|
+
cd solid-ui
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
2. Install dependencies:
|
|
166
|
+
|
|
167
|
+
```bash
|
|
168
|
+
bun install
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
3. Run development server:
|
|
172
|
+
```bash
|
|
173
|
+
bun run dev
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### Scripts
|
|
177
|
+
|
|
178
|
+
- `bun run dev`: Start development server (Rsbuild).
|
|
179
|
+
- `bun run build`: Build for production.
|
|
180
|
+
- `bun run vite:dev`: Alternative dev server with Vite.
|
|
181
|
+
- `bun run generateDemoList`: Generate demo list for components.
|
|
182
|
+
- `bun run publish`: Publish to npm.
|
|
183
|
+
|
|
184
|
+
### Project Structure
|
|
185
|
+
|
|
186
|
+
```
|
|
187
|
+
.
|
|
188
|
+
├── lib/ # Source components
|
|
189
|
+
│ ├── interactive/ # Interactive elements (buttons, dialogs, etc.)
|
|
190
|
+
│ ├── input/ # Form inputs
|
|
191
|
+
│ ├── table/ # Data tables
|
|
192
|
+
│ ├── static/ # Static UI elements
|
|
193
|
+
│ ├── utils/ # Utility functions
|
|
194
|
+
│ └── types.d.ts # Global types
|
|
195
|
+
├── src/ # Demo app and examples
|
|
196
|
+
├── public/ # Static assets
|
|
197
|
+
├── package.json # Dependencies and scripts
|
|
198
|
+
└── README.md # This file
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
### Contributing
|
|
202
|
+
|
|
203
|
+
1. Fork the project.
|
|
204
|
+
2. Create a feature branch (`git checkout -b feature/AmazingFeature`).
|
|
205
|
+
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`).
|
|
206
|
+
4. Push to the branch (`git push origin feature/AmazingFeature`).
|
|
207
|
+
5. Open a Pull Request.
|
|
208
|
+
|
|
209
|
+
### License
|
|
210
|
+
|
|
211
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
212
|
+
|
|
213
|
+
## Acknowledgments
|
|
214
|
+
|
|
215
|
+
- Built on top of [Solid.js](https://www.solidjs.com/).
|
|
216
|
+
- Styled with [Tailwind CSS](https://tailwindcss.com/).
|
|
217
|
+
- Icons from [MDI](https://pictogrammers.com/library/mdi/).
|
|
218
|
+
|
|
219
|
+
For more information, visit the [GitHub repository](https://github.com/david1gp/solid-ui).
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { insert, createComponent, template } from "solid-js/web";
|
|
2
2
|
import { BulletLinks } from "../interactive/list/BulletLinks.js";
|
|
3
3
|
var _tmpl$ = /* @__PURE__ */ template(`<h2 class="text-xl font-semibold">`), _tmpl$2 = /* @__PURE__ */ template(`<div class="flex flex-col">`);
|
|
4
4
|
function LinkBlock(p) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createComponent,
|
|
1
|
+
import { createComponent, insert, effect, className, template } from "solid-js/web";
|
|
2
2
|
import { For } from "solid-js";
|
|
3
3
|
import { LinkBlock } from "./LinkBlock.js";
|
|
4
4
|
import { pathDemos } from "./pathDemos.js";
|
|
@@ -6,8 +6,8 @@ import { LinkButton } from "../interactive/link/LinkButton.js";
|
|
|
6
6
|
import { classesGridCols5xl } from "../static/container/classesGridCols.js";
|
|
7
7
|
import { LayoutWrapperDemo } from "../static/container/LayoutWrapperDemo.js";
|
|
8
8
|
import { classArr } from "../utils/classArr.js";
|
|
9
|
-
import { objectEntries } from "../node_modules/@adaptive-
|
|
10
|
-
import { objectKeys } from "../node_modules/@adaptive-
|
|
9
|
+
import { objectEntries } from "../node_modules/@adaptive-ds/utils/dist/obj/objectEntries.js";
|
|
10
|
+
import { objectKeys } from "../node_modules/@adaptive-ds/utils/dist/obj/objectKeys.js";
|
|
11
11
|
var _tmpl$ = /* @__PURE__ */ template(`<div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<div>`), _tmpl$3 = /* @__PURE__ */ template(`<h1 class="text-xl font-semibold">not found`);
|
|
12
12
|
function generateDemoRoutes(demoList, prefix = pathDemos, Nav) {
|
|
13
13
|
const all = [...getDemosL2(demoList, prefix, Nav), ...getDemosL1(demoList, prefix, Nav), ...getDemosL0(demoList, prefix, Nav), ...getDemos404(demoList, prefix, Nav)];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { readdir, writeFile } from "node:fs/promises";
|
|
2
2
|
import { join } from "node:path";
|
|
3
3
|
import { formatGeneratedCodeFile } from "./parts/formatGeneratedCodeFile.js";
|
|
4
|
-
import { objectKeys } from "../node_modules/@adaptive-
|
|
4
|
+
import { objectKeys } from "../node_modules/@adaptive-ds/utils/dist/obj/objectKeys.js";
|
|
5
5
|
import { findDemoFilesRecursive } from "./parts/findDemoFilesRecursive.js";
|
|
6
6
|
import { removeDemoObjectValueQuotes } from "./parts/removeDemoObjectValueQuotes.js";
|
|
7
7
|
import { serializeDemoComponentImport } from "./parts/serializeDemoComponentImport.js";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare function formatGeneratedCodeFile(outputPath: string): Promise<import('../../../node_modules/@adaptive-
|
|
1
|
+
export declare function formatGeneratedCodeFile(outputPath: string): Promise<import('../../../node_modules/@adaptive-ds/utils/dist/bun/BunCmd').BunCmd>;
|
|
2
2
|
//# sourceMappingURL=formatGeneratedCodeFile.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { runCmdAsync } from "../../node_modules/@adaptive-
|
|
1
|
+
import { runCmdAsync } from "../../node_modules/@adaptive-ds/utils/dist/bun/runCmdAsync.js";
|
|
2
2
|
async function formatGeneratedCodeFile(outputPath) {
|
|
3
3
|
const cmd = `bun run biome check --write ${outputPath}`.split(" ");
|
|
4
4
|
return runCmdAsync(cmd);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { insert, createComponent, memo, effect, setAttribute, className, template } from "solid-js/web";
|
|
2
2
|
import { mdiCheckboxMarkedCircle, mdiCheckboxBlankCircleOutline } from "@mdi/js";
|
|
3
3
|
import { buttonVariant } from "../../interactive/button/buttonCva.js";
|
|
4
4
|
import { ButtonIcon } from "../../interactive/button/ButtonIcon.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { insert, createComponent, effect, setAttribute, className, template } from "solid-js/web";
|
|
2
2
|
import { mdiCheckboxMarkedCircle, mdiCheckboxBlankCircleOutline } from "@mdi/js";
|
|
3
3
|
import { buttonVariant } from "../../interactive/button/buttonCva.js";
|
|
4
4
|
import { ButtonIcon } from "../../interactive/button/ButtonIcon.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { insert, createComponent, effect, setAttribute, className, template } from "solid-js/web";
|
|
2
2
|
import { mdiCheckboxMarkedCircle, mdiCheckboxBlankCircleOutline } from "@mdi/js";
|
|
3
3
|
import { For } from "solid-js";
|
|
4
4
|
import { buttonVariant } from "../../interactive/button/buttonCva.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { insert, createComponent, effect, setAttribute, className, template } from "solid-js/web";
|
|
2
2
|
import { mdiCheckboxMarkedCircle, mdiCheckboxBlankCircleOutline } from "@mdi/js";
|
|
3
3
|
import { For } from "solid-js";
|
|
4
4
|
import { buttonVariant } from "../../interactive/button/buttonCva.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { delegateEvents,
|
|
1
|
+
import { delegateEvents, spread, mergeProps, memo, insert, createComponent, effect, className, setAttribute, template } from "solid-js/web";
|
|
2
2
|
import { mdiCheckboxMarked, mdiCheckboxBlankOutline } from "@mdi/js";
|
|
3
3
|
import { splitProps } from "solid-js";
|
|
4
4
|
import { classesDisabledDirectly } from "../../classes/classesDisabledDirectly.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { spread, mergeProps, insert, effect, className, template } from "solid-js/web";
|
|
2
2
|
import { splitProps } from "solid-js";
|
|
3
3
|
import { classMerge } from "../../utils/classMerge.js";
|
|
4
4
|
import { classesFieldset } from "./classesFieldset.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { spread, mergeProps, template } from "solid-js/web";
|
|
2
2
|
import { splitProps } from "solid-js";
|
|
3
3
|
import { classesInput } from "./classesInput.js";
|
|
4
4
|
import { classMerge } from "../../utils/classMerge.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { createComponent, mergeProps,
|
|
1
|
+
import { createComponent, mergeProps, insert, memo, effect, setAttribute, template } from "solid-js/web";
|
|
2
2
|
import { splitProps } from "solid-js";
|
|
3
3
|
import { Input } from "./Input.js";
|
|
4
|
-
import { generateId12 } from "../../node_modules/@adaptive-
|
|
4
|
+
import { generateId12 } from "../../node_modules/@adaptive-ds/utils/dist/ran/generateId12.js";
|
|
5
5
|
import { Key } from "@solid-primitives/keyed";
|
|
6
6
|
var _tmpl$ = /* @__PURE__ */ template(`<datalist>`), _tmpl$2 = /* @__PURE__ */ template(`<option>`);
|
|
7
7
|
function InputDatalist(p) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { spread, mergeProps, template } from "solid-js/web";
|
|
2
2
|
import { splitProps } from "solid-js";
|
|
3
3
|
import { classesLabel } from "./classesLabel.js";
|
|
4
4
|
import { classMerge } from "../../utils/classMerge.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { effect, className, setAttribute, template } from "solid-js/web";
|
|
2
2
|
import { labelAsterixTextDefault } from "./LabelAsterixTexts.js";
|
|
3
3
|
import { classMerge } from "../../utils/classMerge.js";
|
|
4
4
|
var _tmpl$ = /* @__PURE__ */ template(`<span> *`);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { spread, mergeProps, template } from "solid-js/web";
|
|
2
2
|
import { splitProps } from "solid-js";
|
|
3
3
|
import { classesLabel } from "./classesLabel.js";
|
|
4
4
|
import { classMerge } from "../../utils/classMerge.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createComponent, memo, template
|
|
1
|
+
import { createComponent, insert, memo, template } from "solid-js/web";
|
|
2
2
|
import { Label } from "./Label.js";
|
|
3
3
|
import { LabelAsterix } from "./LabelAsterix.js";
|
|
4
4
|
import { classMerge } from "../../utils/classMerge.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createComponent, memo,
|
|
1
|
+
import { createComponent, memo, insert, template } from "solid-js/web";
|
|
2
2
|
import { Label } from "./Label.js";
|
|
3
3
|
import { LabelAsterix } from "./LabelAsterix.js";
|
|
4
4
|
import { classMerge } from "../../utils/classMerge.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { insert, memo, createComponent, mergeProps, effect, className, template } from "solid-js/web";
|
|
2
2
|
import { mdiMinusBox, mdiMinus, mdiPlus, mdiPlusBox } from "@mdi/js";
|
|
3
3
|
import { splitProps } from "solid-js";
|
|
4
4
|
import { Input } from "../input/Input.js";
|
|
@@ -6,7 +6,7 @@ import { numberInputTextDefault } from "./NumberInputTexts.js";
|
|
|
6
6
|
import { buttonVariant } from "../../interactive/button/buttonCva.js";
|
|
7
7
|
import { ButtonIconOnly } from "../../interactive/button/ButtonIconOnly.js";
|
|
8
8
|
import { classMerge } from "../../utils/classMerge.js";
|
|
9
|
-
import { safeParseInt } from "../../node_modules/@adaptive-
|
|
9
|
+
import { safeParseInt } from "../../node_modules/@adaptive-ds/utils/dist/int/safeParseInt.js";
|
|
10
10
|
var _tmpl$ = /* @__PURE__ */ template(`<div>`);
|
|
11
11
|
function NumberInputS(p) {
|
|
12
12
|
const [s, rest] = splitProps(p, ["valueSignal", "onValueChange", "min", "max", "incrDecrAmount", "incrDecrAmountMajor", "disabled", "class", "inputClass", "variant", "buttonClass", "id", "texts"]);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { insert, createComponent, mergeProps as mergeProps$1, effect, setAttribute, className, template } from "solid-js/web";
|
|
2
2
|
import { mdiPlus, mdiClose, mdiCheck } from "@mdi/js";
|
|
3
3
|
import { Key } from "@solid-primitives/keyed";
|
|
4
4
|
import { mergeProps, For } from "solid-js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { insert, createComponent, effect, setAttribute, className, template } from "solid-js/web";
|
|
2
2
|
import { Key } from "@solid-primitives/keyed";
|
|
3
3
|
import { classesDisabledDirectly } from "../../classes/classesDisabledDirectly.js";
|
|
4
4
|
import { selectSingleNativeTextDefault } from "./SelectSingleNativeTexts.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { delegateEvents,
|
|
1
|
+
import { delegateEvents, insert, createComponent, effect, setAttribute, className, template } from "solid-js/web";
|
|
2
2
|
import { Key } from "@solid-primitives/keyed";
|
|
3
3
|
import { ttt } from "../../i18n/ttt.js";
|
|
4
4
|
import { classArr } from "../../utils/classArr.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { spread, mergeProps, template } from "solid-js/web";
|
|
2
2
|
import { splitProps } from "solid-js";
|
|
3
3
|
import { classesDisabledModifier } from "../../classes/classesDisabledModifier.js";
|
|
4
4
|
import { classMerge } from "../../utils/classMerge.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { spread, mergeProps, template } from "solid-js/web";
|
|
2
2
|
import { splitProps } from "solid-js";
|
|
3
3
|
import { classesDisabledDirectly } from "../../classes/classesDisabledDirectly.js";
|
|
4
4
|
import { buttonCva2 } from "./buttonCva.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { delegateEvents,
|
|
1
|
+
import { delegateEvents, spread, mergeProps, insert, memo, createComponent, template } from "solid-js/web";
|
|
2
2
|
import { splitProps } from "solid-js";
|
|
3
3
|
import { classesDisabledDirectly } from "../../classes/classesDisabledDirectly.js";
|
|
4
4
|
import { buttonCva2 } from "./buttonCva.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { spread, mergeProps, insert, memo, createComponent, template } from "solid-js/web";
|
|
2
2
|
import { splitProps } from "solid-js";
|
|
3
3
|
import { classesDisabledDirectly } from "../../classes/classesDisabledDirectly.js";
|
|
4
4
|
import { buttonCvaIconOnly } from "./buttonCva.js";
|
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
export type ButtonVariant = keyof typeof buttonVariant;
|
|
2
2
|
export declare const buttonVariant: {
|
|
3
|
+
readonly none: "none";
|
|
3
4
|
readonly outline: "outline";
|
|
4
5
|
readonly ghost: "ghost";
|
|
5
6
|
readonly link: "link";
|
|
6
7
|
readonly filled: "filled";
|
|
7
8
|
readonly subtle: "subtle";
|
|
8
|
-
readonly
|
|
9
|
-
readonly
|
|
10
|
-
readonly
|
|
11
|
-
readonly
|
|
12
|
-
readonly
|
|
13
|
-
readonly
|
|
14
|
-
readonly
|
|
9
|
+
readonly contrast: "contrast";
|
|
10
|
+
readonly filledYellow: "filledYellow";
|
|
11
|
+
readonly filledAmber: "filledAmber";
|
|
12
|
+
readonly filledOrange: "filledOrange";
|
|
13
|
+
readonly filledRed: "filledRed";
|
|
14
|
+
readonly filledGreen: "filledGreen";
|
|
15
|
+
readonly filledSky: "filledSky";
|
|
16
|
+
readonly filledBlue: "filledBlue";
|
|
17
|
+
readonly filledIndigo: "filledIndigo";
|
|
18
|
+
readonly outlineRed: "outlineRed";
|
|
15
19
|
};
|
|
16
20
|
export type ButtonSize = keyof typeof buttonSize;
|
|
17
21
|
export declare const buttonSize: {
|
|
@@ -25,7 +29,7 @@ export type ButtonCvaProps = {
|
|
|
25
29
|
variant?: ButtonVariant;
|
|
26
30
|
size?: ButtonSize;
|
|
27
31
|
};
|
|
28
|
-
export declare function buttonCva1(variant
|
|
29
|
-
export declare function buttonCva2(variant?: ButtonVariant
|
|
32
|
+
export declare function buttonCva1(variant: ButtonVariant, ...customClasses: (string | boolean | undefined | null | 0)[]): string;
|
|
33
|
+
export declare function buttonCva2(variant?: ButtonVariant, size?: ButtonSize | null, ...customClasses: (string | boolean | undefined | null | 0)[]): string;
|
|
30
34
|
export declare function buttonCvaIconOnly(variant: ButtonVariant | undefined, isLoading: boolean | undefined, isDisabled: boolean | undefined, ...customClasses: (string | boolean | undefined | null | 0)[]): string;
|
|
31
35
|
//# sourceMappingURL=buttonCva.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonCva.d.ts","sourceRoot":"","sources":["../../../lib/interactive/button/buttonCva.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"buttonCva.d.ts","sourceRoot":"","sources":["../../../lib/interactive/button/buttonCva.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAA;AACtD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;CAqBhB,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,CAAA;AAChD,eAAO,MAAM,UAAU;;;;;;CAMb,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AA6HD,wBAAgB,UAAU,CAAC,OAAO,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,UAE/G;AAED,wBAAgB,UAAU,CACxB,OAAO,GAAE,aAAmC,EAC5C,IAAI,GAAE,UAAU,GAAG,IAAkB,EACrC,GAAG,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,UAK9D;AAWD,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,aAAa,YAAsB,EAC5C,SAAS,EAAE,OAAO,GAAG,SAAS,EAC9B,UAAU,EAAE,OAAO,GAAG,SAAS,EAC/B,GAAG,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,UAW9D"}
|