@duyluonganduin/acl-web-components 0.0.3 → 0.0.5

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 (6) hide show
  1. package/README.md +74 -33
  2. package/dist/acl-web-components.cjs +346 -105
  3. package/dist/acl-web-components.d.ts +38 -0
  4. package/dist/acl-web-components.js +1076 -718
  5. package/dist/react.d.ts +31 -0
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -88,9 +88,9 @@ Once set up, you can use token values directly as Tailwind classes:
88
88
  Use components directly in HTML — they work in any framework since they are standard custom elements.
89
89
 
90
90
  ```html
91
- <acl-button appearance="filled" variant="primary">Save</acl-button>
92
- <acl-input placeholder="Search..." />
93
- <acl-spinner size="small"></acl-spinner>
91
+ <anduin-button appearance="filled" variant="primary">Save</anduin-button>
92
+ <anduin-input placeholder="Search..."></anduin-input>
93
+ <anduin-spinner size="small"></anduin-spinner>
94
94
  ```
95
95
 
96
96
  ### Framework integration
@@ -104,8 +104,8 @@ import '@duyluonganduin/acl-web-components/tokens.css'
104
104
  export default function App() {
105
105
  return (
106
106
  <div>
107
- <acl-button appearance="filled" variant="primary">Click me</acl-button>
108
- <acl-input placeholder="Enter text..." />
107
+ <anduin-button appearance="filled" variant="primary">Click me</anduin-button>
108
+ <anduin-input placeholder="Enter text..."></anduin-input>
109
109
  </div>
110
110
  )
111
111
  }
@@ -120,42 +120,82 @@ import '@duyluonganduin/acl-web-components/tokens.css'
120
120
  </script>
121
121
 
122
122
  <template>
123
- <acl-button appearance="filled" variant="primary">Click me</acl-button>
124
- <acl-input placeholder="Enter text..." />
123
+ <anduin-button appearance="filled" variant="primary">Click me</anduin-button>
124
+ <anduin-input placeholder="Enter text..."></anduin-input>
125
125
  </template>
126
126
  ```
127
127
 
128
+ ### TypeScript + React — JSX types
129
+
130
+ The package ships `dist/react.d.ts` which augments `React.JSX.IntrinsicElements` so TypeScript accepts all `anduin-*` elements in `.tsx` files without errors.
131
+
132
+ Enable it in one of two ways:
133
+
134
+ **Option A — `tsconfig.json`** (recommended, applies project-wide):
135
+
136
+ ```json
137
+ {
138
+ "compilerOptions": {
139
+ "types": ["@duyluonganduin/acl-web-components/react"]
140
+ }
141
+ }
142
+ ```
143
+
144
+ **Option B — reference directive** (per-file or in a global `.d.ts`):
145
+
146
+ ```ts
147
+ /// <reference types="@duyluonganduin/acl-web-components/react" />
148
+ ```
149
+
150
+ Once enabled, all component props are typed:
151
+
152
+ ```tsx
153
+ <anduin-button appearance="filled" variant="primary" disabled>
154
+ Save
155
+ </anduin-button>
156
+
157
+ <anduin-input value={query} placeholder="Search..." status="valid"></anduin-input>
158
+ ```
159
+
128
160
  ---
129
161
 
130
162
  ## Component Reference
131
163
 
132
164
  | Component | Tag | Key Attributes |
133
165
  |---|---|---|
134
- | Badge | `<acl-badge>` | `variant` |
135
- | Badge Count | `<acl-badge-count>` | `variant`, `count` |
136
- | Button | `<acl-button>` | `appearance`, `variant` (default: `gray0`), `size`, `disabled`, `loading`, `href`, `pill`, `full-width`, `start-icon`, `end-icon` |
137
- | Callout | `<acl-callout>` | `variant` |
138
- | Checkbox | `<acl-checkbox>` | `checked`, `disabled`, `indeterminate`, `readonly`, `inputid` |
139
- | Divider | `<acl-divider>` | `direction` |
140
- | Dot | `<acl-dot>` | `variant` |
141
- | Field | `<acl-field>` | `orientation` |
142
- | Field Label | `<acl-field-label>` | `htmlfor`, `required` |
143
- | Icon | `<acl-icon>` | `name`, `size` (12 small · **16 default** · 20 · 24 large) |
144
- | Input | `<acl-input>` | `value`, `size`, `disabled`, `readonly`, `placeholder`, `inputid`, `status` |
145
- | Loading State | `<acl-loading-state>` | `height` |
146
- | Progress | `<acl-progress>` | `percent`, `height` |
147
- | Skeleton | `<acl-skeleton>` | `effect`, `shape`, `height`, `width`, `duration`, `font-size` |
148
- | Spinner | `<acl-spinner>` | `size`, `percent` |
149
- | Tabs | `<acl-tabs>` | `default-value`, `value` |
150
- | Tab List | `<acl-tabs-list>` | `alignment` |
151
- | Tab Trigger | `<acl-tab-trigger>` | `value`, `start-icon`, `disabled` |
152
- | Tab Content | `<acl-tab-content>` | `value` |
153
- | Tag | `<acl-tag>` | `variant`, `icon`, `disabled` |
154
- | Textarea | `<acl-textarea>` | `value`, `disabled`, `readonly`, `placeholder`, `inputid`, `rows`, `status` |
155
- | Tooltip | `<acl-tooltip>` | `placement`, `disabled` |
156
- | Tooltip Trigger | `<acl-tooltip-trigger>` | — |
157
- | Tooltip Content | `<acl-tooltip-content>` | — |
158
- | Well | `<acl-well>` | `variant` |
166
+ | Badge | `<anduin-badge>` | `variant` |
167
+ | Badge Count | `<anduin-badge-count>` | `variant`, `count` |
168
+ | Button | `<anduin-button>` | `appearance`, `variant` (default: `gray0`), `size`, `disabled`, `loading`, `href`, `pill`, `full-width`, `start-icon`, `end-icon` |
169
+ | Callout | `<anduin-callout>` | `variant` |
170
+ | Checkbox | `<anduin-checkbox>` | `checked`, `disabled`, `indeterminate`, `readonly`, `inputid` |
171
+ | Divider | `<anduin-divider>` | `direction` |
172
+ | Dot | `<anduin-dot>` | `variant` |
173
+ | Field | `<anduin-field>` | `orientation` |
174
+ | Field Label | `<anduin-field-label>` | `htmlfor`, `required` |
175
+ | Field Description | `<anduin-field-description>` | — |
176
+ | Field Error | `<anduin-field-error>` | — |
177
+ | Field Group | `<anduin-field-group>` | — |
178
+ | Icon | `<anduin-icon>` | `name`, `size` (12 small · **16 default** · 20 · 24 large) |
179
+ | Input | `<anduin-input>` | `value`, `size`, `disabled`, `readonly`, `placeholder`, `inputid`, `status` |
180
+ | Loading State | `<anduin-loading-state>` | `height` |
181
+ | Progress | `<anduin-progress>` | `percent`, `height` |
182
+ | Skeleton | `<anduin-skeleton>` | `effect`, `shape`, `height`, `width`, `duration`, `font-size` |
183
+ | Spinner | `<anduin-spinner>` | `size`, `percent` |
184
+ | Menu | `<anduin-menu>` | `placement`, `open` |
185
+ | Menu Item | `<anduin-menu-item>` | `icon`, `variant`, `disabled` |
186
+ | Popover | `<anduin-popover>` | `placement`, `open` |
187
+ | Tabs | `<anduin-tabs>` | `default-value`, `value`, `fill` |
188
+ | Tab List | `<anduin-tabs-list>` | `alignment` |
189
+ | Tab Trigger | `<anduin-tab-trigger>` | `value`, `start-icon`, `disabled`, `show-badge`, `badge-count` |
190
+ | Tab Content | `<anduin-tab-content>` | `value` |
191
+ | Tag | `<anduin-tag>` | `variant`, `icon`, `disabled` |
192
+ | Tag Close | `<anduin-tag-close>` | — |
193
+ | Textarea | `<anduin-textarea>` | `value`, `disabled`, `readonly`, `placeholder`, `inputid`, `rows`, `status` |
194
+ | Tooltip | `<anduin-tooltip>` | `placement`, `disabled` |
195
+ | Tooltip Trigger | `<anduin-tooltip-trigger>` | — |
196
+ | Tooltip Content | `<anduin-tooltip-content>` | — |
197
+ | Well | `<anduin-well>` | `variant` |
198
+ | Well Close | `<anduin-well-close>` | — |
159
199
 
160
200
  ---
161
201
 
@@ -163,10 +203,11 @@ import '@duyluonganduin/acl-web-components/tokens.css'
163
203
 
164
204
  | Import path | Contents |
165
205
  |---|---|
166
- | `acl-web-components` | All component classes (auto-registers custom elements) |
206
+ | `@duyluonganduin/acl-web-components` | All component classes (auto-registers custom elements) |
167
207
  | `@duyluonganduin/acl-web-components/tokens.css` | CSS custom properties for all design tokens |
168
208
  | `@duyluonganduin/acl-web-components/tailwind-preset` | Tailwind **v3** preset |
169
209
  | `@duyluonganduin/acl-web-components/tailwind-theme.css` | Tailwind **v4** `@theme inline` bridge |
210
+ | `@duyluonganduin/acl-web-components/react` | React JSX types (`IntrinsicElements` for all `anduin-*` elements) |
170
211
 
171
212
  ---
172
213