auxalia-ui-kit 1.0.0 → 1.0.1

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 (2) hide show
  1. package/README.md +77 -109
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
- # Auxalia UI — `auxalia-ui`
1
+ # Auxalia UI — `auxalia-ui-kit`
2
2
 
3
3
  A modern, accessible React component library built with **TypeScript**, **Radix UI**, and **Tailwind CSS v4**. Designed for seamless integration into large-scale projects.
4
4
 
5
- [![npm version](https://img.shields.io/npm/v/auxalia-ui)](https://www.npmjs.com/package/auxalia-ui)
5
+ [![npm version](https://img.shields.io/npm/v/auxalia-ui-kit)](https://www.npmjs.com/package/auxalia-ui-kit)
6
6
  [![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)
7
7
 
8
8
  ---
@@ -35,18 +35,18 @@ A modern, accessible React component library built with **TypeScript**, **Radix
35
35
 
36
36
  ## Requirements
37
37
 
38
- | Dependency | Version |
39
- | ----------- | ------- |
40
- | React | ^19.2.0 |
41
- | react-dom | ^19.2.0 |
42
- | tailwindcss | ^4.0.0 |
38
+ | Dependency | Version |
39
+ |-------------|----------|
40
+ | React | ^19.2.0 |
41
+ | react-dom | ^19.2.0 |
42
+ | tailwindcss | ^4.0.0 |
43
43
 
44
44
  ---
45
45
 
46
46
  ## Installation
47
47
 
48
48
  ```bash
49
- npm install auxalia-ui
49
+ npm install auxalia-ui-kit
50
50
  ```
51
51
 
52
52
  ---
@@ -58,13 +58,13 @@ npm install auxalia-ui
58
58
  In your app's entry CSS file:
59
59
 
60
60
  ```css
61
- @import 'auxalia-ui/styles.css';
61
+ @import 'auxalia-ui-kit/styles.css';
62
62
  ```
63
63
 
64
64
  Or import the design tokens separately:
65
65
 
66
66
  ```css
67
- @import 'auxalia-ui/tokens.css';
67
+ @import 'auxalia-ui-kit/tokens.css';
68
68
  ```
69
69
 
70
70
  ### 2. Configure Tailwind v4
@@ -73,13 +73,13 @@ In your CSS config file (e.g. `app.css`):
73
73
 
74
74
  ```css
75
75
  @import 'tailwindcss';
76
- @import 'auxalia-ui/tokens.css';
76
+ @import 'auxalia-ui-kit/tokens.css';
77
77
  ```
78
78
 
79
79
  Or use the Tailwind preset in your `tailwind.config.ts`:
80
80
 
81
81
  ```ts
82
- import auxaliaPreset from 'auxalia-ui/tailwind.preset';
82
+ import auxaliaPreset from 'auxalia-ui-kit/tailwind.preset';
83
83
 
84
84
  export default {
85
85
  presets: [auxaliaPreset],
@@ -89,14 +89,10 @@ export default {
89
89
  ### 3. Use components
90
90
 
91
91
  ```tsx
92
- import { Button } from 'auxalia-ui';
92
+ import { Button } from 'auxalia-ui-kit';
93
93
 
94
94
  export default function App() {
95
- return (
96
- <Button variant="default" color="primary">
97
- Click me
98
- </Button>
99
- );
95
+ return <Button variant="default" color="primary">Click me</Button>;
100
96
  }
101
97
  ```
102
98
 
@@ -107,34 +103,34 @@ export default function App() {
107
103
  ### Button
108
104
 
109
105
  ```tsx
110
- import { Button } from 'auxalia-ui';
106
+ import { Button } from 'auxalia-ui-kit';
111
107
 
112
108
  <Button variant="default" color="primary" size="default">Save</Button>
113
109
  <Button variant="outline" color="secondary">Cancel</Button>
114
110
  <Button variant="ghost" color="destructive" size="sm">Delete</Button>
115
111
  ```
116
112
 
117
- | Prop | Type | Default |
118
- | --------- | -------------------------------------------------------------------- | ----------- |
119
- | `variant` | `'default' \| 'outline' \| 'ghost' \| 'link'` | `'default'` |
113
+ | Prop | Type | Default |
114
+ |-----------|--------------------------------------------------------|-------------|
115
+ | `variant` | `'default' \| 'outline' \| 'ghost' \| 'link'` | `'default'` |
120
116
  | `color` | `'default' \| 'primary' \| 'secondary' \| 'accent' \| 'destructive'` | `'primary'` |
121
- | `size` | `'sm' \| 'default' \| 'lg' \| 'icon'` | `'default'` |
122
- | `asChild` | `boolean` | `false` |
117
+ | `size` | `'sm' \| 'default' \| 'lg' \| 'icon'` | `'default'` |
118
+ | `asChild` | `boolean` | `false` |
123
119
 
124
120
  ---
125
121
 
126
122
  ### Card
127
123
 
128
124
  ```tsx
129
- import { Card } from 'auxalia-ui';
125
+ import { Card } from 'auxalia-ui-kit';
130
126
 
131
127
  <Card variant="default">Content</Card>
132
128
  <Card variant="elevated">Elevated</Card>
133
129
  <Card variant="outlined">Outlined</Card>
134
130
  ```
135
131
 
136
- | Prop | Type | Default |
137
- | --------- | ------------------------------------------------------------------------------- | ----------- |
132
+ | Prop | Type | Default |
133
+ |-----------|----------------------------------------------------------------------------|-------------|
138
134
  | `variant` | `'default' \| 'outlined' \| 'elevated' \| 'success' \| 'accent' \| 'secondary'` | `'default'` |
139
135
 
140
136
  ---
@@ -142,16 +138,16 @@ import { Card } from 'auxalia-ui';
142
138
  ### Input
143
139
 
144
140
  ```tsx
145
- import { Input } from 'auxalia-ui';
141
+ import { Input } from 'auxalia-ui-kit';
146
142
 
147
143
  <Input placeholder="Enter text..." />
148
144
  <Input size="lg" variant="error" />
149
145
  ```
150
146
 
151
- | Prop | Type | Default |
152
- | --------- | ---------------------- | ----------- |
153
- | `variant` | `'default' \| 'error'` | `'default'` |
154
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |
147
+ | Prop | Type | Default |
148
+ |-----------|----------------------------|-------------|
149
+ | `variant` | `'default' \| 'error'` | `'default'` |
150
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |
155
151
 
156
152
  ---
157
153
 
@@ -159,12 +155,9 @@ import { Input } from 'auxalia-ui';
159
155
 
160
156
  ```tsx
161
157
  import {
162
- Select,
163
- SelectTrigger,
164
- SelectValue,
165
- SelectContent,
166
- SelectItem,
167
- } from 'auxalia-ui';
158
+ Select, SelectTrigger, SelectValue,
159
+ SelectContent, SelectItem
160
+ } from 'auxalia-ui-kit';
168
161
 
169
162
  <Select>
170
163
  <SelectTrigger variant="primary" size="md">
@@ -174,7 +167,7 @@ import {
174
167
  <SelectItem value="a">Option A</SelectItem>
175
168
  <SelectItem value="b">Option B</SelectItem>
176
169
  </SelectContent>
177
- </Select>;
170
+ </Select>
178
171
  ```
179
172
 
180
173
  **SelectTrigger variants:** `'default' | 'primary' | 'secondary' | 'accent' | 'destructive' | 'error'`
@@ -189,13 +182,9 @@ import {
189
182
 
190
183
  ```tsx
191
184
  import {
192
- DropdownMenu,
193
- DropdownMenuTrigger,
194
- DropdownMenuContent,
195
- DropdownMenuItem,
196
- DropdownMenuSeparator,
197
- DropdownMenuLabel,
198
- } from 'auxalia-ui';
185
+ DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
186
+ DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel
187
+ } from 'auxalia-ui-kit';
199
188
 
200
189
  <DropdownMenu>
201
190
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
@@ -205,7 +194,7 @@ import {
205
194
  <DropdownMenuItem variant="default">Edit</DropdownMenuItem>
206
195
  <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
207
196
  </DropdownMenuContent>
208
- </DropdownMenu>;
197
+ </DropdownMenu>
209
198
  ```
210
199
 
211
200
  **DropdownMenuItem variants:** `'default' | 'primary' | 'secondary' | 'accent' | 'destructive'`
@@ -219,7 +208,7 @@ Also exports: `DropdownMenuCheckboxItem`, `DropdownMenuRadioItem`, `DropdownMenu
219
208
  ### Tabs
220
209
 
221
210
  ```tsx
222
- import { Tabs, TabsList, TabsTrigger, TabsContent } from 'auxalia-ui';
211
+ import { Tabs, TabsList, TabsTrigger, TabsContent } from 'auxalia-ui-kit';
223
212
 
224
213
  const [tab, setTab] = useState('overview');
225
214
 
@@ -230,7 +219,7 @@ const [tab, setTab] = useState('overview');
230
219
  </TabsList>
231
220
  <TabsContent value="overview">Overview content</TabsContent>
232
221
  <TabsContent value="settings">Settings content</TabsContent>
233
- </Tabs>;
222
+ </Tabs>
234
223
  ```
235
224
 
236
225
  ---
@@ -238,31 +227,31 @@ const [tab, setTab] = useState('overview');
238
227
  ### Text
239
228
 
240
229
  ```tsx
241
- import { Text } from 'auxalia-ui';
230
+ import { Text } from 'auxalia-ui-kit';
242
231
 
243
- <Text size="xl" align="center">
244
- Hello World
245
- </Text>;
232
+ <Text size="xl" align="center">Hello World</Text>
246
233
  ```
247
234
 
248
- | Prop | Type | Default |
249
- | ------- | ------------------------------------------------ | -------- |
250
- | `size` | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'` | `'md'` |
251
- | `align` | `'left' \| 'center' \| 'right'` | `'left'` |
235
+ | Prop | Type | Default |
236
+ |---------|---------------------------------------------|----------|
237
+ | `size` | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'` | `'md'` |
238
+ | `align` | `'left' \| 'center' \| 'right'` | `'left'` |
252
239
 
253
240
  ---
254
241
 
255
242
  ### Field (Form Wrapper)
256
243
 
257
244
  ```tsx
258
- import { Field, FieldLabel, FieldDescription, FieldError } from 'auxalia-ui';
245
+ import {
246
+ Field, FieldLabel, FieldDescription, FieldError
247
+ } from 'auxalia-ui-kit';
259
248
 
260
249
  <Field orientation="vertical">
261
250
  <FieldLabel>Email</FieldLabel>
262
251
  <Input type="email" />
263
252
  <FieldDescription>We'll never share your email.</FieldDescription>
264
253
  <FieldError errors={['Email is required']} />
265
- </Field>;
254
+ </Field>
266
255
  ```
267
256
 
268
257
  **Orientation:** `'vertical'` (default) | `'horizontal'` | `'responsive'`
@@ -274,12 +263,12 @@ Also exports: `FieldContent`, `FieldGroup`, `FieldSet`, `FieldLegend`, `FieldSep
274
263
  ### Tooltip
275
264
 
276
265
  ```tsx
277
- import { Tooltip, TooltipTrigger, TooltipContent } from 'auxalia-ui';
266
+ import { Tooltip, TooltipTrigger, TooltipContent } from 'auxalia-ui-kit';
278
267
 
279
268
  <Tooltip>
280
269
  <TooltipTrigger>Hover me</TooltipTrigger>
281
270
  <TooltipContent>Helpful hint</TooltipContent>
282
- </Tooltip>;
271
+ </Tooltip>
283
272
  ```
284
273
 
285
274
  Also exports: `TooltipProvider`
@@ -289,12 +278,12 @@ Also exports: `TooltipProvider`
289
278
  ### Popover
290
279
 
291
280
  ```tsx
292
- import { Popover, PopoverTrigger, PopoverContent } from 'auxalia-ui';
281
+ import { Popover, PopoverTrigger, PopoverContent } from 'auxalia-ui-kit';
293
282
 
294
283
  <Popover>
295
284
  <PopoverTrigger>Open</PopoverTrigger>
296
285
  <PopoverContent>Popover content here</PopoverContent>
297
- </Popover>;
286
+ </Popover>
298
287
  ```
299
288
 
300
289
  Also exports: `PopoverAnchor`
@@ -305,36 +294,19 @@ Also exports: `PopoverAnchor`
305
294
 
306
295
  ```tsx
307
296
  import {
308
- Pagination,
309
- PaginationContent,
310
- PaginationItem,
311
- PaginationLink,
312
- PaginationPrevious,
313
- PaginationNext,
314
- PaginationEllipsis,
315
- } from 'auxalia-ui';
297
+ Pagination, PaginationContent, PaginationItem,
298
+ PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis
299
+ } from 'auxalia-ui-kit';
316
300
 
317
301
  <Pagination>
318
302
  <PaginationContent>
319
- <PaginationItem>
320
- <PaginationPrevious href="#" />
321
- </PaginationItem>
322
- <PaginationItem>
323
- <PaginationLink href="#" isActive>
324
- 1
325
- </PaginationLink>
326
- </PaginationItem>
327
- <PaginationItem>
328
- <PaginationLink href="#">2</PaginationLink>
329
- </PaginationItem>
330
- <PaginationItem>
331
- <PaginationEllipsis />
332
- </PaginationItem>
333
- <PaginationItem>
334
- <PaginationNext href="#" />
335
- </PaginationItem>
303
+ <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
304
+ <PaginationItem><PaginationLink href="#" isActive>1</PaginationLink></PaginationItem>
305
+ <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
306
+ <PaginationItem><PaginationEllipsis /></PaginationItem>
307
+ <PaginationItem><PaginationNext href="#" /></PaginationItem>
336
308
  </PaginationContent>
337
- </Pagination>;
309
+ </Pagination>
338
310
  ```
339
311
 
340
312
  ---
@@ -342,16 +314,12 @@ import {
342
314
  ### Collapsible
343
315
 
344
316
  ```tsx
345
- import {
346
- CollapsibleRoot,
347
- CollapsibleTrigger,
348
- CollapsibleContent,
349
- } from 'auxalia-ui';
317
+ import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from 'auxalia-ui-kit';
350
318
 
351
319
  <CollapsibleRoot>
352
320
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
353
321
  <CollapsibleContent>Hidden content</CollapsibleContent>
354
- </CollapsibleRoot>;
322
+ </CollapsibleRoot>
355
323
  ```
356
324
 
357
325
  ---
@@ -359,9 +327,9 @@ import {
359
327
  ### Label
360
328
 
361
329
  ```tsx
362
- import { Label } from 'auxalia-ui';
330
+ import { Label } from 'auxalia-ui-kit';
363
331
 
364
- <Label htmlFor="email">Email address</Label>;
332
+ <Label htmlFor="email">Email address</Label>
365
333
  ```
366
334
 
367
335
  ---
@@ -371,8 +339,8 @@ import { Label } from 'auxalia-ui';
371
339
  A full-featured controlled data table with sorting, filtering, pagination, and search.
372
340
 
373
341
  ```tsx
374
- import { TableView } from 'auxalia-ui';
375
- import type { TableField, TableConfig } from 'auxalia-ui';
342
+ import { TableView } from 'auxalia-ui-kit';
343
+ import type { TableField, TableConfig } from 'auxalia-ui-kit';
376
344
 
377
345
  const fields: TableField[] = [
378
346
  { key: 'name', label: 'Name', sortable: true },
@@ -385,7 +353,7 @@ const fields: TableField[] = [
385
353
  config={config}
386
354
  queryParams={queryParams}
387
355
  onQueryChange={setQueryParams}
388
- />;
356
+ />
389
357
  ```
390
358
 
391
359
  ---
@@ -395,7 +363,7 @@ const fields: TableField[] = [
395
363
  The preset includes the full Auxalia brand token system:
396
364
 
397
365
  ```ts
398
- import auxaliaPreset from 'auxalia-ui/tailwind.preset';
366
+ import auxaliaPreset from 'auxalia-ui-kit/tailwind.preset';
399
367
 
400
368
  export default {
401
369
  presets: [auxaliaPreset],
@@ -404,12 +372,12 @@ export default {
404
372
 
405
373
  **Brand colors available in Tailwind utilities:**
406
374
 
407
- | Token | Value | Usage |
408
- | ------------------ | ------------ | ----------------------- |
409
- | `primary` | #A7D500 | Auxalia Green |
410
- | `secondary` | #3e6897 | Auxalia Blue |
411
- | `accent` | #0f868b | Auxalia Petrol |
412
- | `destructive` | #dc2626 | Errors / danger |
375
+ | Token | Value | Usage |
376
+ |--------------------|-------------|--------------------------|
377
+ | `primary` | #A7D500 | Auxalia Green |
378
+ | `secondary` | #3e6897 | Auxalia Blue |
379
+ | `accent` | #0f868b | Auxalia Petrol |
380
+ | `destructive` | #dc2626 | Errors / danger |
413
381
  | `auxalia-green-*` | 50–900 scale | Extended green palette |
414
382
  | `auxalia-blue-*` | 50–900 scale | Extended blue palette |
415
383
  | `auxalia-petrol-*` | 50–900 scale | Extended petrol palette |
@@ -423,7 +391,7 @@ export default {
423
391
  Tokens are exposed as CSS custom properties and can be used independently:
424
392
 
425
393
  ```css
426
- @import 'auxalia-ui/tokens.css';
394
+ @import 'auxalia-ui-kit/tokens.css';
427
395
  ```
428
396
 
429
397
  ```css
@@ -453,4 +421,4 @@ npm run build-storybook
453
421
 
454
422
  ## License
455
423
 
456
- ISC — [Auxalia](https://github.com/Artur-Badalyan/auxalia-ui)
424
+ ISC — [Auxalia](https://github.com/Artur-Badalyan/auxalia-ui-kit)
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "auxalia-ui-kit",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "A React component library built with Radix UI and Tailwind CSS, designed to provide accessible and customizable UI components for modern web applications.",
5
5
  "license": "ISC",
6
6
  "author": {
7
- "name": "Auxalia",
7
+ "name": "auxalia-GmbH",
8
8
  "url": "https://www.auxalia.com"
9
9
  },
10
10
  "contributors": [