@dezkareid/components 0.0.0 → 1.0.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 (100) hide show
  1. package/.releaserc +18 -0
  2. package/.turbo/turbo-build.log +7 -0
  3. package/.turbo/turbo-test.log +17 -0
  4. package/AGENTS.md +174 -0
  5. package/CHANGELOG.md +12 -0
  6. package/README.md +213 -5
  7. package/dist/_virtual/_commonjsHelpers.js +6 -0
  8. package/dist/_virtual/_commonjsHelpers.js.map +1 -0
  9. package/dist/_virtual/index.js +8 -0
  10. package/dist/_virtual/index.js.map +1 -0
  11. package/dist/_virtual/index2.js +4 -0
  12. package/dist/_virtual/index2.js.map +1 -0
  13. package/dist/astro/index.d.ts +5 -0
  14. package/dist/astro/index.d.ts.map +1 -0
  15. package/dist/components.min.css +1 -0
  16. package/dist/css/button.module.css.js +4 -0
  17. package/dist/css/button.module.css.js.map +1 -0
  18. package/dist/css/card.module.css.js +4 -0
  19. package/dist/css/card.module.css.js.map +1 -0
  20. package/dist/css/index.d.ts +5 -0
  21. package/dist/css/index.d.ts.map +1 -0
  22. package/dist/css/tag.module.css.js +4 -0
  23. package/dist/css/tag.module.css.js.map +1 -0
  24. package/dist/css/theme-toggle.module.css.js +4 -0
  25. package/dist/css/theme-toggle.module.css.js.map +1 -0
  26. package/dist/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js +86 -0
  27. package/dist/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js.map +1 -0
  28. package/dist/react/Button/index.d.ts +6 -0
  29. package/dist/react/Button/index.d.ts.map +1 -0
  30. package/dist/react/Button/index.js +10 -0
  31. package/dist/react/Button/index.js.map +1 -0
  32. package/dist/react/Card/index.d.ts +6 -0
  33. package/dist/react/Card/index.d.ts.map +1 -0
  34. package/dist/react/Card/index.js +10 -0
  35. package/dist/react/Card/index.js.map +1 -0
  36. package/dist/react/Tag/index.d.ts +6 -0
  37. package/dist/react/Tag/index.d.ts.map +1 -0
  38. package/dist/react/Tag/index.js +10 -0
  39. package/dist/react/Tag/index.js.map +1 -0
  40. package/dist/react/ThemeToggle/index.d.ts +2 -0
  41. package/dist/react/ThemeToggle/index.d.ts.map +1 -0
  42. package/dist/react/ThemeToggle/index.js +25 -0
  43. package/dist/react/ThemeToggle/index.js.map +1 -0
  44. package/dist/react/index.d.ts +5 -0
  45. package/dist/react/index.d.ts.map +1 -0
  46. package/dist/react/index.js +5 -0
  47. package/dist/react/index.js.map +1 -0
  48. package/dist/shared/js/theme.d.ts +5 -0
  49. package/dist/shared/js/theme.d.ts.map +1 -0
  50. package/dist/shared/js/theme.js +22 -0
  51. package/dist/shared/js/theme.js.map +1 -0
  52. package/dist/shared/types/button.d.ts +8 -0
  53. package/dist/shared/types/button.d.ts.map +1 -0
  54. package/dist/shared/types/card.d.ts +5 -0
  55. package/dist/shared/types/card.d.ts.map +1 -0
  56. package/dist/shared/types/tag.d.ts +5 -0
  57. package/dist/shared/types/tag.d.ts.map +1 -0
  58. package/dist/shared/types/theme-toggle.d.ts +4 -0
  59. package/dist/shared/types/theme-toggle.d.ts.map +1 -0
  60. package/dist/vue/index.d.ts +5 -0
  61. package/dist/vue/index.d.ts.map +1 -0
  62. package/done/2026-03-03-design-system-components/osddt.plan.md +233 -0
  63. package/done/2026-03-03-design-system-components/osddt.spec.md +90 -0
  64. package/done/2026-03-03-design-system-components/osddt.tasks.md +100 -0
  65. package/package.json +76 -6
  66. package/rollup.config.mjs +32 -0
  67. package/setupTests.ts +1 -0
  68. package/src/astro/Button/index.astro +35 -0
  69. package/src/astro/Card/index.astro +23 -0
  70. package/src/astro/Tag/index.astro +23 -0
  71. package/src/astro/ThemeToggle/index.astro +63 -0
  72. package/src/astro/index.ts +4 -0
  73. package/src/css/button.module.css +90 -0
  74. package/src/css/card.module.css +30 -0
  75. package/src/css/index.ts +4 -0
  76. package/src/css/tag.module.css +33 -0
  77. package/src/css/theme-toggle.module.css +38 -0
  78. package/src/declarations.d.ts +19 -0
  79. package/src/react/Button/index.test.tsx +59 -0
  80. package/src/react/Button/index.tsx +31 -0
  81. package/src/react/Card/index.test.tsx +38 -0
  82. package/src/react/Card/index.tsx +14 -0
  83. package/src/react/Tag/index.test.tsx +35 -0
  84. package/src/react/Tag/index.tsx +14 -0
  85. package/src/react/ThemeToggle/index.test.tsx +84 -0
  86. package/src/react/ThemeToggle/index.tsx +36 -0
  87. package/src/react/index.ts +4 -0
  88. package/src/shared/js/theme.ts +22 -0
  89. package/src/shared/types/button.ts +8 -0
  90. package/src/shared/types/card.ts +5 -0
  91. package/src/shared/types/tag.ts +5 -0
  92. package/src/shared/types/theme-toggle.ts +5 -0
  93. package/src/vue/Button/index.vue +27 -0
  94. package/src/vue/Card/index.vue +18 -0
  95. package/src/vue/Tag/index.vue +18 -0
  96. package/src/vue/ThemeToggle/index.vue +39 -0
  97. package/src/vue/index.ts +4 -0
  98. package/tsconfig.json +19 -0
  99. package/vite.config.build.ts +34 -0
  100. package/vitest.config.ts +12 -0
package/.releaserc ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "plugins": [
3
+ "@semantic-release/commit-analyzer",
4
+ "@semantic-release/release-notes-generator",
5
+ "@semantic-release/changelog",
6
+ "@anolilab/semantic-release-pnpm",
7
+ [
8
+ "@semantic-release/git",
9
+ {
10
+ "assets": [
11
+ "CHANGELOG.md"
12
+ ]
13
+ }
14
+ ],
15
+ "@semantic-release/github"
16
+ ],
17
+ "extends": "semantic-release-monorepo"
18
+ }
@@ -0,0 +1,7 @@
1
+
2
+ > @dezkareid/components@0.0.0 build /home/runner/work/dezkareid/dezkareid/design-system/components
3
+ > rollup -c rollup.config.mjs
4
+
5
+ 
6
+ src/react/index.ts → dist...
7
+ created dist in 3.3s
@@ -0,0 +1,17 @@
1
+
2
+ > @dezkareid/components@1.0.0 test /home/runner/work/dezkareid/dezkareid/design-system/components
3
+ > vitest --run
4
+
5
+
6
+  RUN  v4.0.18 /home/runner/work/dezkareid/dezkareid/design-system/components
7
+
8
+ ✓ src/react/Card/index.test.tsx (5 tests) 59ms
9
+ ✓ src/react/Button/index.test.tsx (9 tests) 411ms
10
+ ✓ src/react/ThemeToggle/index.test.tsx (9 tests) 436ms
11
+ ✓ src/react/Tag/index.test.tsx (6 tests) 40ms
12
+
13
+  Test Files  4 passed (4)
14
+  Tests  29 passed (29)
15
+  Start at  17:01:39
16
+  Duration  2.42s (transform 223ms, setup 342ms, import 1.17s, tests 945ms, environment 2.76s)
17
+
package/AGENTS.md ADDED
@@ -0,0 +1,174 @@
1
+ # @dezkareid/components
2
+
3
+ A package to export UI components in formats like React, Astro, Vue, etc.
4
+
5
+ ## Overview
6
+
7
+ Always use Context7 MCP when I need external library/API documentation, code generation, setup or configuration steps without me having to explicitly ask.
8
+
9
+ The following paths are the entry points to the different packages:
10
+
11
+ - `src/react/`: React components (entry: `src/react/index.ts`)
12
+ - `src/astro/`: Astro components (entry: `src/astro/index.ts`)
13
+ - `src/vue/`: Vue components (entry: `src/vue/index.ts`)
14
+ - `src/css/`: Shared CSS Modules (one file per component, `src/css/index.ts` imports all for the CSS bundle)
15
+ - `src/shared/js/`: Framework-agnostic JS utilities
16
+ - `src/shared/types/`: Shared TypeScript interfaces for all components
17
+
18
+ ## Package Exports
19
+
20
+ | Export | Points to | Compiled? |
21
+ |---|---|---|
22
+ | `@dezkareid/components/react` | `dist/react.js` | Yes — pre-compiled ES module via Rollup + `@rollup/plugin-typescript` |
23
+ | `@dezkareid/components/astro` | `src/astro/index.ts` | No — compiled by the consuming Astro app |
24
+ | `@dezkareid/components/vue` | `src/vue/index.ts` | No — compiled by the consuming Vite/Vue app |
25
+ | `@dezkareid/components/css` | `dist/components.min.css` | Yes — CSS Modules processed and extracted via `rollup-plugin-postcss` |
26
+
27
+ ### Why Astro and Vue are not pre-compiled
28
+
29
+ - **Astro** `.astro` files require Astro's own compiler — they cannot be pre-compiled to generic JS
30
+ - **Vue** SFCs are best compiled by the consumer's Vite for correct SSR and template optimisation
31
+
32
+ ## Build
33
+
34
+ The build uses **Rollup** (`rollup.config.mjs`) — not Vite — because `rollup-plugin-postcss` handles CSS Modules extraction correctly in Rollup without conflicts.
35
+
36
+ The build produces:
37
+ - `dist/react.js` — ES module barrel entry
38
+ - `dist/react/**/*.js` — individual component chunks (tree-shakeable via `preserveModules`)
39
+ - `dist/react/**/*.d.ts` — TypeScript declarations
40
+ - `dist/components.min.css` — all CSS Modules processed, scoped, and bundled into one file
41
+
42
+ Key plugins:
43
+ - `rollup-plugin-postcss` with `autoModules: true, extract: 'components.min.css', minimize: true` — processes CSS Modules and extracts to a single file
44
+ - `@rollup/plugin-typescript` with `declaration: true` — compiles TSX and emits `.d.ts` files
45
+ - `@rollup/plugin-node-resolve` — resolves node_modules
46
+
47
+ ### CSS Modules in the build
48
+
49
+ CSS class names are scoped (hashed) by `postcss-modules`. The JS proxy files (e.g. `dist/css/button.module.css.js`) export the class name map so React components can reference the correct hashed names. The `dist/components.min.css` file contains the matching scoped styles.
50
+
51
+ Consumers **must** import `@dezkareid/components/css` once at their app root — styles are not auto-injected into JS.
52
+
53
+ ## Development
54
+
55
+ Each component lives in its own folder within each framework directory, e.g. `src/react/Button/index.tsx`.
56
+
57
+ A component set should include:
58
+
59
+ - `src/shared/types/<component>.ts` — shared TypeScript props interface
60
+ - `src/css/<component>.module.css` — BEM + OOCSS styles using design tokens only
61
+ - `src/react/<Component>/index.tsx` — React implementation
62
+ - `src/react/<Component>/index.test.tsx` — Vitest + RTL tests (React only)
63
+ - `src/astro/<Component>/index.astro` — Astro implementation
64
+ - `src/vue/<Component>/index.vue` — Vue SFC implementation
65
+
66
+ ### CSS conventions
67
+
68
+ - Use **BEM** for class naming: `.block`, `.block--modifier`, `.block__element`
69
+ - Use **OOCSS** to separate structure (layout/sizing/spacing) from skin (colour/border/shadow)
70
+ - All values must use CSS custom properties from `@dezkareid/design-tokens` — never hardcode hex, rgb, or px values
71
+ - Use semantic tokens (`--color-primary`, `--color-text-primary`, etc.) for automatic light/dark support
72
+ - When a needed token doesn't exist, use the closest base token and add a `TODO: Propose --token-name` comment
73
+
74
+ ### Available components
75
+
76
+ #### Button
77
+
78
+ File: `src/react/Button/index.tsx` | `src/astro/Button/index.astro` | `src/vue/Button/index.vue`
79
+ Types: `src/shared/types/button.ts` | CSS: `src/css/button.module.css`
80
+
81
+ Props:
82
+ - `variant?: 'primary' | 'secondary'` — default `'primary'`
83
+ - `size?: 'sm' | 'md' | 'lg'` — default `'md'`
84
+ - `disabled?: boolean` — default `false`
85
+ - Forwards all native `<button>` HTML attributes
86
+
87
+ BEM classes: `.button`, `.button--primary`, `.button--secondary`, `.button--sm`, `.button--md`, `.button--lg`, `.button--disabled`
88
+
89
+ #### Tag
90
+
91
+ File: `src/react/Tag/index.tsx` | `src/astro/Tag/index.astro` | `src/vue/Tag/index.vue`
92
+ Types: `src/shared/types/tag.ts` | CSS: `src/css/tag.module.css`
93
+
94
+ Props:
95
+ - `variant?: 'default' | 'success' | 'danger'` — default `'default'`
96
+ - Accepts arbitrary `children`/slot content (not limited to plain text)
97
+
98
+ BEM classes: `.tag`, `.tag--default`, `.tag--success`, `.tag--danger`
99
+
100
+ #### Card
101
+
102
+ File: `src/react/Card/index.tsx` | `src/astro/Card/index.astro` | `src/vue/Card/index.vue`
103
+ Types: `src/shared/types/card.ts` | CSS: `src/css/card.module.css`
104
+
105
+ Props:
106
+ - `elevation?: 'flat' | 'raised'` — default `'raised'`
107
+ - Accepts arbitrary `children`/slot content
108
+
109
+ BEM classes: `.card`, `.card--raised`, `.card--flat`
110
+
111
+ Note: `--shadow-raised` token is proposed but not yet in `@dezkareid/design-tokens`; currently uses a raw `box-shadow` value.
112
+
113
+ #### ThemeToggle
114
+
115
+ File: `src/react/ThemeToggle/index.tsx` | `src/astro/ThemeToggle/index.astro` | `src/vue/ThemeToggle/index.vue`
116
+ Types: `src/shared/types/theme-toggle.ts` | CSS: `src/css/theme-toggle.module.css`
117
+ Shared logic: `src/shared/js/theme.ts`
118
+
119
+ Props: none (self-contained stateful component)
120
+
121
+ Behaviour:
122
+ - On mount: reads `localStorage.getItem('color-scheme')`; falls back to `window.matchMedia('(prefers-color-scheme: dark)')`
123
+ - On toggle: flips theme, calls `applyTheme()` (sets `color-scheme` on `<html>`), calls `persistTheme()` (writes to `localStorage`)
124
+ - Astro version includes an inline `<script is:inline>` for FOUC prevention
125
+ - All `window`/`localStorage` access is SSR-safe (`typeof window !== 'undefined'` guards in `theme.ts`)
126
+
127
+ BEM classes: `.theme-toggle`, `.theme-toggle--dark`
128
+
129
+ And offer support for the next characteristics:
130
+
131
+ - Multi-theme support
132
+ - Mobile first
133
+ - Accessibility support
134
+ - Performance focused
135
+
136
+ To choose colors use the `design-tokens` skill (already have multi-theme support). When you need to use a color not defined in the design tokens you can propose a new color to be added to the design tokens using a commentary in the code.
137
+
138
+ ## Critical Dependency Versions
139
+
140
+ The following versions are established across the project's packages and should be respected when adding new dependencies or troubleshooting.
141
+
142
+ ### Core Languages & Runtimes
143
+ - **TypeScript**: `5.9.3`
144
+
145
+ ### Build & Bundling Tools
146
+ - **Rollup**: `4.56.0`
147
+ - **Vite**: `7.3.1` (via `@vitejs/plugin-react`)
148
+ - **@vitejs/plugin-react**: `5.1.4`
149
+
150
+ ### Testing Frameworks
151
+ - **Vitest**: `4.0.18`
152
+ - **React Testing Library**: `16.3.2`
153
+ - **jsdom**: `27.4.0`
154
+
155
+ ### Linting & Formatting
156
+ - **ESLint**: `9.39.2`
157
+ - **Prettier**: `3.8.1`
158
+
159
+ ### Type Definitions
160
+ - **@types/node**: `25.0.10`
161
+ - **@types/react**: `19.2.9`
162
+ - **@types/fs-extra**: `11.0.4`
163
+ - **@types/jest**: `30.0.0`
164
+
165
+ ### Key Libraries
166
+ - **React**: `19.2.4` (Peer dependency: `^18.0.0 || ^19.0.0`)
167
+ - **React DOM**: `19.2.4`
168
+
169
+ ## Documentation
170
+
171
+ - `README.md`: The source to use the package.
172
+ - `AGENTS.md`: The source to understand the package for ai-assisted tools.
173
+
174
+ When a component is created or modified, consider update those files with the new information.
package/CHANGELOG.md ADDED
@@ -0,0 +1,12 @@
1
+ # @dezkareid/components-v1.0.0 (2026-03-04)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * set right build scripts ([5418aa9](https://github.com/dezkareid/dezkareid/commit/5418aa97e19e1e0f52a25db21c509433dd16e452))
7
+
8
+
9
+ ### Features
10
+
11
+ * **components:** add tag, theme toggle, card and button ([036cf28](https://github.com/dezkareid/dezkareid/commit/036cf288de3958d0726f4c224190dd58cf3ba5c7))
12
+ * release components ([93e8372](https://github.com/dezkareid/dezkareid/commit/93e8372146e1549f8d58d7883254cebdff716bbf))
package/README.md CHANGED
@@ -1,19 +1,227 @@
1
1
  # @dezkareid/components
2
2
 
3
- A package to export UI components in formats like React, Astro, Vue, etc.
3
+ A package that exports UI components for React, Astro, and Vue. Built on the `@dezkareid/design-tokens` design system with full light/dark theme support via CSS semantic tokens.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
- npm install @dezkareid/components
8
+ pnpm add @dezkareid/components @dezkareid/design-tokens
9
9
  ```
10
10
 
11
- ## Usage
11
+ ## Package Exports
12
12
 
13
- ```javascript
14
- // Add usage examples here
13
+ | Export | Points to | Notes |
14
+ |---|---|---|
15
+ | `@dezkareid/components/react` | `dist/react.js` | Pre-compiled ES module, includes `.d.ts` types |
16
+ | `@dezkareid/components/astro` | `src/astro/index.ts` | Source — compiled by the consuming Astro app |
17
+ | `@dezkareid/components/vue` | `src/vue/index.ts` | Source — compiled by the consuming Vite/Vue app |
18
+ | `@dezkareid/components/css` | `dist/components.min.css` | Pre-compiled CSS Modules bundle |
19
+
20
+ ## Setup
21
+
22
+ ### 1. Import design tokens
23
+
24
+ Import the design tokens CSS once at the root of your app — this provides all the CSS custom properties (`--color-*`, `--spacing-*`, etc.) that components depend on:
25
+
26
+ ```js
27
+ import '@dezkareid/design-tokens/dist/css/variables.css';
28
+ ```
29
+
30
+ ### 2. Import component styles
31
+
32
+ Import the compiled component styles once at the root of your app:
33
+
34
+ ```js
35
+ import '@dezkareid/components/css';
36
+ ```
37
+
38
+ > **Note:** The component CSS uses CSS Modules scoped class names. The `@dezkareid/components/css` export is the processed bundle that matches the class names used by the compiled JS — do not import the raw source CSS files from `src/css/`.
39
+
40
+ Both imports must come before any component usage.
41
+
42
+ ---
43
+
44
+ ## Components
45
+
46
+ ### Button
47
+
48
+ A clickable element for triggering actions.
49
+
50
+ **Props**
51
+
52
+ | Prop | Type | Default | Description |
53
+ |---|---|---|---|
54
+ | `variant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'success'` | `'primary'` | Visual style |
55
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size variant |
56
+ | `disabled` | `boolean` | `false` | Disables interaction |
57
+
58
+ #### React
59
+
60
+ ```tsx
61
+ import { Button } from '@dezkareid/components/react';
62
+
63
+ <Button variant="primary" size="md" onClick={() => {}}>Click me</Button>
64
+ <Button variant="secondary" size="lg">Secondary</Button>
65
+ <Button disabled>Disabled</Button>
66
+ ```
67
+
68
+ #### Astro
69
+
70
+ ```astro
71
+ ---
72
+ import { Button } from '@dezkareid/components/astro';
73
+ ---
74
+ <Button variant="primary" size="md">Click me</Button>
75
+ ```
76
+
77
+ #### Vue
78
+
79
+ ```vue
80
+ <script setup>
81
+ import { Button } from '@dezkareid/components/vue';
82
+ </script>
83
+
84
+ <template>
85
+ <Button variant="secondary" size="sm">Click me</Button>
86
+ </template>
87
+ ```
88
+
89
+ ---
90
+
91
+ ### Tag
92
+
93
+ A small inline label for categorising or annotating content. Accepts arbitrary slot/children.
94
+
95
+ **Props**
96
+
97
+ | Prop | Type | Default | Description |
98
+ |---|---|---|---|
99
+ | `variant` | `'default' \| 'success' \| 'danger'` | `'default'` | Semantic colour |
100
+
101
+ #### React
102
+
103
+ ```tsx
104
+ import { Tag } from '@dezkareid/components/react';
105
+
106
+ <Tag variant="default">Draft</Tag>
107
+ <Tag variant="success">Published</Tag>
108
+ <Tag variant="danger">Error</Tag>
109
+ <Tag><strong>Bold label</strong></Tag>
110
+ ```
111
+
112
+ #### Astro
113
+
114
+ ```astro
115
+ ---
116
+ import { Tag } from '@dezkareid/components/astro';
117
+ ---
118
+ <Tag variant="success">Published</Tag>
15
119
  ```
16
120
 
121
+ #### Vue
122
+
123
+ ```vue
124
+ <script setup>
125
+ import { Tag } from '@dezkareid/components/vue';
126
+ </script>
127
+
128
+ <template>
129
+ <Tag variant="danger">Error</Tag>
130
+ </template>
131
+ ```
132
+
133
+ ---
134
+
135
+ ### Card
136
+
137
+ A contained surface that groups related content.
138
+
139
+ **Props**
140
+
141
+ | Prop | Type | Default | Description |
142
+ |---|---|---|---|
143
+ | `elevation` | `'flat' \| 'raised'` | `'raised'` | Shadow depth |
144
+
145
+ #### React
146
+
147
+ ```tsx
148
+ import { Card } from '@dezkareid/components/react';
149
+
150
+ <Card elevation="raised">
151
+ <h2>Title</h2>
152
+ <p>Body content</p>
153
+ </Card>
154
+
155
+ <Card elevation="flat">Flat card</Card>
156
+ ```
157
+
158
+ #### Astro
159
+
160
+ ```astro
161
+ ---
162
+ import { Card } from '@dezkareid/components/astro';
163
+ ---
164
+ <Card elevation="raised">
165
+ <h2>Title</h2>
166
+ <p>Body</p>
167
+ </Card>
168
+ ```
169
+
170
+ #### Vue
171
+
172
+ ```vue
173
+ <script setup>
174
+ import { Card } from '@dezkareid/components/vue';
175
+ </script>
176
+
177
+ <template>
178
+ <Card elevation="flat">
179
+ <p>Content</p>
180
+ </Card>
181
+ </template>
182
+ ```
183
+
184
+ ---
185
+
186
+ ### ThemeToggle
187
+
188
+ A self-contained toggle that switches between light and dark colour schemes. Reads from and persists to `localStorage` (key: `color-scheme`), falling back to the OS `prefers-color-scheme` preference. Applies the theme by setting `color-scheme` on `<html>`.
189
+
190
+ **Props**: none
191
+
192
+ #### React
193
+
194
+ ```tsx
195
+ import { ThemeToggle } from '@dezkareid/components/react';
196
+
197
+ <ThemeToggle />
198
+ ```
199
+
200
+ #### Astro
201
+
202
+ ```astro
203
+ ---
204
+ import { ThemeToggle } from '@dezkareid/components/astro';
205
+ ---
206
+ <ThemeToggle />
207
+ ```
208
+
209
+ > The Astro component includes an inline script that runs before first paint to prevent FOUC.
210
+
211
+ #### Vue
212
+
213
+ ```vue
214
+ <script setup>
215
+ import { ThemeToggle } from '@dezkareid/components/vue';
216
+ </script>
217
+
218
+ <template>
219
+ <ThemeToggle />
220
+ </template>
221
+ ```
222
+
223
+ ---
224
+
17
225
  ## License
18
226
 
19
227
  ISC
@@ -0,0 +1,6 @@
1
+ function getDefaultExportFromCjs (x) {
2
+ return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
3
+ }
4
+
5
+ export { getDefaultExportFromCjs };
6
+ //# sourceMappingURL=_commonjsHelpers.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,8 @@
1
+ import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
2
+ import { __require as requireClassnames } from '../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js';
3
+
4
+ var classnamesExports = requireClassnames();
5
+ var cx = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
6
+
7
+ export { cx as default };
8
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
@@ -0,0 +1,4 @@
1
+ var classnames = {exports: {}};
2
+
3
+ export { classnames as __module };
4
+ //# sourceMappingURL=index2.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1,5 @@
1
+ export { default as Button } from './Button/index.astro';
2
+ export { default as Tag } from './Tag/index.astro';
3
+ export { default as Card } from './Card/index.astro';
4
+ export { default as ThemeToggle } from './ThemeToggle/index.astro';
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/astro/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
@@ -0,0 +1 @@
1
+ .button-module_button__-i1WR{align-items:center;border:none;border-radius:var(--spacing-4);cursor:pointer;display:inline-flex;font-family:var(--font-family-base);font-weight:var(--font-weight-medium);justify-content:center;line-height:var(--font-line-height-none);text-decoration:none;transition:opacity .15s ease;white-space:nowrap}.button-module_button--sm__oyPIp,.button-module_button--small__seN6c{font-size:var(--font-size-200);padding:var(--spacing-4) var(--spacing-12)}.button-module_button--md__KsJg5,.button-module_button--medium__4vh1u{font-size:var(--font-size-300);padding:var(--spacing-8) var(--spacing-24)}.button-module_button--large__g15uD,.button-module_button--lg__kuuR5{font-size:var(--font-size-400);padding:var(--spacing-12) var(--spacing-32)}.button-module_button--primary__5NKaZ{background-color:var(--color-primary);border:1px solid transparent;color:var(--color-text-inverse)}.button-module_button--primary__5NKaZ:hover:not(.button-module_button--disabled__5X7It){opacity:.88}.button-module_button--outline__inPG2,.button-module_button--secondary__7CZqp{background-color:transparent;border:1px solid var(--color-primary);color:var(--color-primary)}.button-module_button--outline__inPG2:hover:not(.button-module_button--disabled__5X7It),.button-module_button--secondary__7CZqp:hover:not(.button-module_button--disabled__5X7It){background-color:var(--color-background-secondary)}.button-module_button--success__Y-GUS{background-color:var(--color-success);border:1px solid transparent;color:var(--color-text-inverse)}.button-module_button--success__Y-GUS:hover:not(.button-module_button--disabled__5X7It){opacity:.88}.button-module_button--ghost__7k3yA{background-color:transparent;border:1px solid transparent;color:var(--color-text-primary)}.button-module_button--ghost__7k3yA:hover:not(.button-module_button--disabled__5X7It){background-color:var(--color-background-secondary)}.button-module_button--disabled__5X7It{cursor:not-allowed;opacity:.4;pointer-events:none}.tag-module_tag__DqU0X{align-items:center;border-radius:var(--spacing-4);display:inline-flex;font-family:var(--font-family-base);font-size:var(--font-size-100);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-none);padding:var(--spacing-4) var(--spacing-8)}.tag-module_tag--default__s9pfU{background-color:var(--color-background-secondary);color:var(--color-text-primary)}.tag-module_tag--success__e8fMj{background-color:var(--color-success);color:var(--color-text-inverse)}.tag-module_tag--danger__9b-l4{background-color:var(--color-danger);color:var(--color-text-inverse)}.card-module_card__KEaH3{background-color:var(--color-background-secondary);border-radius:var(--spacing-8);color:var(--color-text-primary);display:block;padding:var(--spacing-24);width:100%}.card-module_card--raised__hBodH{box-shadow:0 2px 8px rgba(0,0,0,.12)}.card-module_card--flat__vLG1l{box-shadow:none}.theme-toggle-module_theme-toggle__pBmqG{align-items:center;background-color:transparent;border:none;border:1px solid var(--color-background-secondary);border-radius:var(--spacing-4);color:var(--color-text-primary);cursor:pointer;display:inline-flex;font-family:var(--font-family-base);font-size:var(--font-size-200);font-weight:var(--font-weight-medium);gap:var(--spacing-8);justify-content:center;line-height:var(--font-line-height-none);padding:var(--spacing-8) var(--spacing-12)}.theme-toggle-module_theme-toggle__pBmqG:hover{background-color:var(--color-background-secondary)}.theme-toggle-module_theme-toggle--dark__9yf3H{border-color:var(--color-primary);color:var(--color-primary)}
@@ -0,0 +1,4 @@
1
+ var styles = {"button":"button-module_button__-i1WR","button--sm":"button-module_button--sm__oyPIp","button--small":"button-module_button--small__seN6c","button--md":"button-module_button--md__KsJg5","button--medium":"button-module_button--medium__4vh1u","button--lg":"button-module_button--lg__kuuR5","button--large":"button-module_button--large__g15uD","button--primary":"button-module_button--primary__5NKaZ","button--disabled":"button-module_button--disabled__5X7It","button--secondary":"button-module_button--secondary__7CZqp","button--outline":"button-module_button--outline__inPG2","button--success":"button-module_button--success__Y-GUS","button--ghost":"button-module_button--ghost__7k3yA"};
2
+
3
+ export { styles as default };
4
+ //# sourceMappingURL=button.module.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1,4 @@
1
+ var styles = {"card":"card-module_card__KEaH3","card--raised":"card-module_card--raised__hBodH","card--flat":"card-module_card--flat__vLG1l"};
2
+
3
+ export { styles as default };
4
+ //# sourceMappingURL=card.module.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"card.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1,5 @@
1
+ import './button.module.css';
2
+ import './card.module.css';
3
+ import './tag.module.css';
4
+ import './theme-toggle.module.css';
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/css/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2BAA2B,CAAC"}
@@ -0,0 +1,4 @@
1
+ var styles = {"tag":"tag-module_tag__DqU0X","tag--default":"tag-module_tag--default__s9pfU","tag--success":"tag-module_tag--success__e8fMj","tag--danger":"tag-module_tag--danger__9b-l4"};
2
+
3
+ export { styles as default };
4
+ //# sourceMappingURL=tag.module.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tag.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1,4 @@
1
+ var styles = {"theme-toggle":"theme-toggle-module_theme-toggle__pBmqG","theme-toggle--dark":"theme-toggle-module_theme-toggle--dark__9yf3H"};
2
+
3
+ export { styles as default };
4
+ //# sourceMappingURL=theme-toggle.module.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-toggle.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -0,0 +1,86 @@
1
+ import { __module as classnames } from '../../../../../_virtual/index2.js';
2
+
3
+ /*!
4
+ Copyright (c) 2018 Jed Watson.
5
+ Licensed under the MIT License (MIT), see
6
+ http://jedwatson.github.io/classnames
7
+ */
8
+
9
+ var hasRequiredClassnames;
10
+
11
+ function requireClassnames () {
12
+ if (hasRequiredClassnames) return classnames.exports;
13
+ hasRequiredClassnames = 1;
14
+ (function (module) {
15
+ /* global define */
16
+
17
+ (function () {
18
+
19
+ var hasOwn = {}.hasOwnProperty;
20
+
21
+ function classNames () {
22
+ var classes = '';
23
+
24
+ for (var i = 0; i < arguments.length; i++) {
25
+ var arg = arguments[i];
26
+ if (arg) {
27
+ classes = appendClass(classes, parseValue(arg));
28
+ }
29
+ }
30
+
31
+ return classes;
32
+ }
33
+
34
+ function parseValue (arg) {
35
+ if (typeof arg === 'string' || typeof arg === 'number') {
36
+ return arg;
37
+ }
38
+
39
+ if (typeof arg !== 'object') {
40
+ return '';
41
+ }
42
+
43
+ if (Array.isArray(arg)) {
44
+ return classNames.apply(null, arg);
45
+ }
46
+
47
+ if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
48
+ return arg.toString();
49
+ }
50
+
51
+ var classes = '';
52
+
53
+ for (var key in arg) {
54
+ if (hasOwn.call(arg, key) && arg[key]) {
55
+ classes = appendClass(classes, key);
56
+ }
57
+ }
58
+
59
+ return classes;
60
+ }
61
+
62
+ function appendClass (value, newClass) {
63
+ if (!newClass) {
64
+ return value;
65
+ }
66
+
67
+ if (value) {
68
+ return value + ' ' + newClass;
69
+ }
70
+
71
+ return value + newClass;
72
+ }
73
+
74
+ if (module.exports) {
75
+ classNames.default = classNames;
76
+ module.exports = classNames;
77
+ } else {
78
+ window.classNames = classNames;
79
+ }
80
+ }());
81
+ } (classnames));
82
+ return classnames.exports;
83
+ }
84
+
85
+ export { requireClassnames as __require };
86
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../../../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAKA;;AAEA,EAAA,CAAC,YAAY;;AAGb,GAAC,IAAI,MAAM,GAAG,EAAE,CAAC,cAAc;;GAE9B,SAAS,UAAU,IAAI;IACtB,IAAI,OAAO,GAAG,EAAE;;AAElB,IAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC7C,KAAG,IAAI,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC;KACtB,IAAI,GAAG,EAAE;MACR,OAAO,GAAG,WAAW,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;AACnD,KAAA;AACA,IAAA;;AAEA,IAAE,OAAO,OAAO;AAChB,GAAA;;AAEA,GAAC,SAAS,UAAU,EAAE,GAAG,EAAE;IACzB,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AAC1D,KAAG,OAAO,GAAG;AACb,IAAA;;AAEA,IAAE,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AAC/B,KAAG,OAAO,EAAE;AACZ,IAAA;;AAEA,IAAE,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;KACvB,OAAO,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC;AACrC,IAAA;;IAEE,IAAI,GAAG,CAAC,QAAQ,KAAK,MAAM,CAAC,SAAS,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;AACxG,KAAG,OAAO,GAAG,CAAC,QAAQ,EAAE;AACxB,IAAA;;IAEE,IAAI,OAAO,GAAG,EAAE;;AAElB,IAAE,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE;AACvB,KAAG,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE;AAC1C,MAAI,OAAO,GAAG,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC;AACvC,KAAA;AACA,IAAA;;AAEA,IAAE,OAAO,OAAO;AAChB,GAAA;;AAEA,GAAC,SAAS,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE;IACtC,IAAI,CAAC,QAAQ,EAAE;AACjB,KAAG,OAAO,KAAK;AACf,IAAA;AACA;IACE,IAAI,KAAK,EAAE;AACb,KAAG,OAAO,KAAK,GAAG,GAAG,GAAG,QAAQ;AAChC,IAAA;AACA;IACE,OAAO,KAAK,GAAG,QAAQ;AACzB,GAAA;;GAEC,IAAqC,MAAM,CAAC,OAAO,EAAE;AACtD,IAAE,UAAU,CAAC,OAAO,GAAG,UAAU;AACjC,IAAE,iBAAiB,UAAU;AAC7B,GAAA,CAAE,MAKM;AACR,IAAE,MAAM,CAAC,UAAU,GAAG,UAAU;AAChC,GAAA;AACA,EAAA,CAAC,EAAE,EAAA;;;;;;;","x_google_ignoreList":[0]}