@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.
- package/.releaserc +18 -0
- package/.turbo/turbo-build.log +7 -0
- package/.turbo/turbo-test.log +17 -0
- package/AGENTS.md +174 -0
- package/CHANGELOG.md +12 -0
- package/README.md +213 -5
- package/dist/_virtual/_commonjsHelpers.js +6 -0
- package/dist/_virtual/_commonjsHelpers.js.map +1 -0
- package/dist/_virtual/index.js +8 -0
- package/dist/_virtual/index.js.map +1 -0
- package/dist/_virtual/index2.js +4 -0
- package/dist/_virtual/index2.js.map +1 -0
- package/dist/astro/index.d.ts +5 -0
- package/dist/astro/index.d.ts.map +1 -0
- package/dist/components.min.css +1 -0
- package/dist/css/button.module.css.js +4 -0
- package/dist/css/button.module.css.js.map +1 -0
- package/dist/css/card.module.css.js +4 -0
- package/dist/css/card.module.css.js.map +1 -0
- package/dist/css/index.d.ts +5 -0
- package/dist/css/index.d.ts.map +1 -0
- package/dist/css/tag.module.css.js +4 -0
- package/dist/css/tag.module.css.js.map +1 -0
- package/dist/css/theme-toggle.module.css.js +4 -0
- package/dist/css/theme-toggle.module.css.js.map +1 -0
- package/dist/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js +86 -0
- package/dist/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js.map +1 -0
- package/dist/react/Button/index.d.ts +6 -0
- package/dist/react/Button/index.d.ts.map +1 -0
- package/dist/react/Button/index.js +10 -0
- package/dist/react/Button/index.js.map +1 -0
- package/dist/react/Card/index.d.ts +6 -0
- package/dist/react/Card/index.d.ts.map +1 -0
- package/dist/react/Card/index.js +10 -0
- package/dist/react/Card/index.js.map +1 -0
- package/dist/react/Tag/index.d.ts +6 -0
- package/dist/react/Tag/index.d.ts.map +1 -0
- package/dist/react/Tag/index.js +10 -0
- package/dist/react/Tag/index.js.map +1 -0
- package/dist/react/ThemeToggle/index.d.ts +2 -0
- package/dist/react/ThemeToggle/index.d.ts.map +1 -0
- package/dist/react/ThemeToggle/index.js +25 -0
- package/dist/react/ThemeToggle/index.js.map +1 -0
- package/dist/react/index.d.ts +5 -0
- package/dist/react/index.d.ts.map +1 -0
- package/dist/react/index.js +5 -0
- package/dist/react/index.js.map +1 -0
- package/dist/shared/js/theme.d.ts +5 -0
- package/dist/shared/js/theme.d.ts.map +1 -0
- package/dist/shared/js/theme.js +22 -0
- package/dist/shared/js/theme.js.map +1 -0
- package/dist/shared/types/button.d.ts +8 -0
- package/dist/shared/types/button.d.ts.map +1 -0
- package/dist/shared/types/card.d.ts +5 -0
- package/dist/shared/types/card.d.ts.map +1 -0
- package/dist/shared/types/tag.d.ts +5 -0
- package/dist/shared/types/tag.d.ts.map +1 -0
- package/dist/shared/types/theme-toggle.d.ts +4 -0
- package/dist/shared/types/theme-toggle.d.ts.map +1 -0
- package/dist/vue/index.d.ts +5 -0
- package/dist/vue/index.d.ts.map +1 -0
- package/done/2026-03-03-design-system-components/osddt.plan.md +233 -0
- package/done/2026-03-03-design-system-components/osddt.spec.md +90 -0
- package/done/2026-03-03-design-system-components/osddt.tasks.md +100 -0
- package/package.json +76 -6
- package/rollup.config.mjs +32 -0
- package/setupTests.ts +1 -0
- package/src/astro/Button/index.astro +35 -0
- package/src/astro/Card/index.astro +23 -0
- package/src/astro/Tag/index.astro +23 -0
- package/src/astro/ThemeToggle/index.astro +63 -0
- package/src/astro/index.ts +4 -0
- package/src/css/button.module.css +90 -0
- package/src/css/card.module.css +30 -0
- package/src/css/index.ts +4 -0
- package/src/css/tag.module.css +33 -0
- package/src/css/theme-toggle.module.css +38 -0
- package/src/declarations.d.ts +19 -0
- package/src/react/Button/index.test.tsx +59 -0
- package/src/react/Button/index.tsx +31 -0
- package/src/react/Card/index.test.tsx +38 -0
- package/src/react/Card/index.tsx +14 -0
- package/src/react/Tag/index.test.tsx +35 -0
- package/src/react/Tag/index.tsx +14 -0
- package/src/react/ThemeToggle/index.test.tsx +84 -0
- package/src/react/ThemeToggle/index.tsx +36 -0
- package/src/react/index.ts +4 -0
- package/src/shared/js/theme.ts +22 -0
- package/src/shared/types/button.ts +8 -0
- package/src/shared/types/card.ts +5 -0
- package/src/shared/types/tag.ts +5 -0
- package/src/shared/types/theme-toggle.ts +5 -0
- package/src/vue/Button/index.vue +27 -0
- package/src/vue/Card/index.vue +18 -0
- package/src/vue/Tag/index.vue +18 -0
- package/src/vue/ThemeToggle/index.vue +39 -0
- package/src/vue/index.ts +4 -0
- package/tsconfig.json +19 -0
- package/vite.config.build.ts +34 -0
- 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,17 @@
|
|
|
1
|
+
|
|
2
|
+
> @dezkareid/components@1.0.0 test /home/runner/work/dezkareid/dezkareid/design-system/components
|
|
3
|
+
> vitest --run
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
[1m[46m RUN [49m[22m [36mv4.0.18 [39m[90m/home/runner/work/dezkareid/dezkareid/design-system/components[39m
|
|
7
|
+
|
|
8
|
+
[32m✓[39m src/react/Card/index.test.tsx [2m([22m[2m5 tests[22m[2m)[22m[32m 59[2mms[22m[39m
|
|
9
|
+
[32m✓[39m src/react/Button/index.test.tsx [2m([22m[2m9 tests[22m[2m)[22m[33m 411[2mms[22m[39m
|
|
10
|
+
[32m✓[39m src/react/ThemeToggle/index.test.tsx [2m([22m[2m9 tests[22m[2m)[22m[33m 436[2mms[22m[39m
|
|
11
|
+
[32m✓[39m src/react/Tag/index.test.tsx [2m([22m[2m6 tests[22m[2m)[22m[32m 40[2mms[22m[39m
|
|
12
|
+
|
|
13
|
+
[2m Test Files [22m [1m[32m4 passed[39m[22m[90m (4)[39m
|
|
14
|
+
[2m Tests [22m [1m[32m29 passed[39m[22m[90m (29)[39m
|
|
15
|
+
[2m Start at [22m 17:01:39
|
|
16
|
+
[2m Duration [22m 2.42s[2m (transform 223ms, setup 342ms, import 1.17s, tests 945ms, environment 2.76s)[22m
|
|
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
|
|
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
|
-
|
|
8
|
+
pnpm add @dezkareid/components @dezkareid/design-tokens
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Package Exports
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
1
|
+
{"version":3,"file":"card.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -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 @@
|
|
|
1
|
+
{"version":3,"file":"tag.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -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]}
|