@ideasui/button 0.0.2-beta.0 → 0.0.2-beta.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 +61 -85
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,11 +1,25 @@
1
1
  # @ideasui/button
2
2
 
3
- A versatile button component with multiple variants, sizes, and states.
3
+ A high-performance, accessible Button and ButtonGroup component library for React, built with **Tailwind CSS v4** and **React Aria**.
4
+
5
+ [![NPM Version](https://img.shields.io/npm/v/@ideasui/button.svg)](https://www.npmjs.com/package/@ideasui/button)
6
+ [![License](https://img.shields.io/npm/l/@ideasui/button.svg)](https://github.com/hariharan804/ideasui/blob/master/LICENSE)
7
+
8
+ ## Features
9
+
10
+ - ⚡ **Tailwind CSS v4** — Built on the latest styling engine for zero-runtime overhead.
11
+ - ♿ **Accessible** — Full keyboard navigation and screen reader support via React Aria.
12
+ - 🌗 **Theme Aware** — Seamlessly integrates with `@ideasui/theme` for Light/Dark modes.
13
+ - 🎨 **Granular Styling** — Overridable internal slots via the `classNames` prop.
14
+ - 📦 **Polymorphic** — Use as a `button`, `a`, or any custom component using `as`.
15
+ - ✨ **Rich States** — Support for loading, disabled, pressed, and hover states with micro-interactions.
4
16
 
5
17
  ## Installation
6
18
 
7
19
  ```bash
8
- npm install @ideasui/button
20
+ npm install @ideasui/button @ideasui/theme
21
+ # or
22
+ pnpm add @ideasui/button @ideasui/theme
9
23
  ```
10
24
 
11
25
  ## Usage
@@ -16,108 +30,70 @@ import { Button } from '@ideasui/button';
16
30
  function App() {
17
31
  return (
18
32
  <Button variant="solid" color="primary" size="md">
19
- Click me
33
+ Get Started
20
34
  </Button>
21
35
  );
22
36
  }
23
37
  ```
24
38
 
25
- ## API Reference
26
-
27
- ### ButtonProps
28
-
29
- | Prop | Type | Default | Description |
30
- | ------------ | ------------------------------------------------------------------------------------- | --------- | -------------------------------------- |
31
- | variant | 'solid' \| 'outline' \| 'ghost' | 'solid' | Visual style variant |
32
- | color | 'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' | 'default' | Color variant based on semantic intent |
33
- | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Size of the button |
34
- | radius | 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' | 'md' | Border radius variant |
35
- | fullWidth | boolean | false | Whether button should take full width |
36
- | loading | boolean | false | Whether button is in loading state |
37
- | loadingText | string | - | Text to show when loading |
38
- | startContent | ReactNode | - | Content to show at start of button |
39
- | endContent | ReactNode | - | Content to show at end of button |
40
- | disabled | boolean | false | Whether button is disabled |
41
-
42
- ## Examples
43
-
44
- ### Basic Usage
45
-
46
- ```tsx
47
- <Button>Default Button</Button>
48
- <Button variant="outline">Outline Button</Button>
49
- <Button variant="ghost">Ghost Button</Button>
50
- ```
51
-
52
- ### Colors
39
+ ### Button Group
53
40
 
54
41
  ```tsx
55
- <Button color="primary">Primary</Button>
56
- <Button color="success">Success</Button>
57
- <Button color="warning">Warning</Button>
58
- <Button color="danger">Danger</Button>
59
- ```
60
-
61
- ### Sizes
42
+ import { Button, ButtonGroup } from '@ideasui/button';
62
43
 
63
- ```tsx
64
- <Button size="xs">Extra Small</Button>
65
- <Button size="sm">Small</Button>
66
- <Button size="md">Medium</Button>
67
- <Button size="lg">Large</Button>
68
- <Button size="xl">Extra Large</Button>
44
+ function ActionMenu() {
45
+ return (
46
+ <ButtonGroup variant="outline" color="secondary">
47
+ <Button>Edit</Button>
48
+ <Button>Copy</Button>
49
+ <Button color="danger">Delete</Button>
50
+ </ButtonGroup>
51
+ );
52
+ }
69
53
  ```
70
54
 
71
- ### With Icons
72
-
73
- ```tsx
74
- import { Heart, Download } from 'lucide-react'
55
+ ## API Reference
75
56
 
76
- <Button startContent={<Heart />}>Like</Button>
77
- <Button endContent={<Download />}>Download</Button>
78
- ```
57
+ ### Button Props
79
58
 
80
- ### Loading State
59
+ | Prop | Type | Default | Description |
60
+ | :----------- | :------------------------------------------------- | :---------- | :--------------------------------------------- |
61
+ | `variant` | `'solid' \| 'outline' \| 'ghost'` | `'solid'` | Visual style variant. |
62
+ | `color` | `SemanticColor` | `'default'` | Semantic color intent (primary, success, etc). |
63
+ | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | The size of the button. |
64
+ | `radius` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'md'` | The corner radius. |
65
+ | `loading` | `boolean` | `false` | Shows a spinner and disables interaction. |
66
+ | `disabled` | `boolean` | `false` | Disables the button. |
67
+ | `fullWidth` | `boolean` | `false` | Expands to fill the container width. |
68
+ | `startIcon` | `ReactNode` | — | Icon displayed before the label. |
69
+ | `endIcon` | `ReactNode` | — | Icon displayed after the label. |
70
+ | `shortcut` | `string` | — | Keyboard shortcut hint. |
71
+ | `classNames` | `ButtonClassNames` | — | Custom classes for internal slots. |
81
72
 
82
- ```tsx
83
- <Button loading>Loading</Button>
84
- <Button loading loadingText="Saving...">Save</Button>
85
- ```
73
+ ### Granular Styling (`classNames`)
86
74
 
87
- ### States
75
+ The `classNames` prop allows you to override styles for specific internal elements:
88
76
 
89
77
  ```tsx
90
- <Button disabled>Disabled</Button>
91
- <Button fullWidth>Full Width</Button>
78
+ <Button
79
+ classNames={{
80
+ base: 'px-8 py-4', // The main button container
81
+ label: 'font-bold', // The text label
82
+ startIcon: 'text-xl', // The leading icon
83
+ spinner: 'border-2', // The loading spinner
84
+ }}
85
+ >
86
+ Custom Styled
87
+ </Button>
92
88
  ```
93
89
 
94
90
  ## Accessibility
95
91
 
96
- The Button component follows WAI-ARIA guidelines:
92
+ - Built on `useButton` from **React Aria**.
93
+ - Proper `aria-live` regions for loading states.
94
+ - High-contrast focus rings for keyboard navigation.
95
+ - Semantic HTML tags based on the `as` prop.
97
96
 
98
- - Uses semantic `button` element
99
- - Supports keyboard navigation (Enter/Space)
100
- - Proper `disabled` and `aria-disabled` attributes
101
- - Loading state is communicated to screen readers
102
- - Focus management with visible focus indicators
97
+ ## License
103
98
 
104
- ## Styling
105
-
106
- The component uses Tailwind CSS classes and can be customized via:
107
-
108
- - CSS custom properties
109
- - Tailwind configuration
110
- - Custom className prop
111
- - Component variants system
112
-
113
- ## TypeScript
114
-
115
- Full TypeScript support with exported types:
116
-
117
- ```tsx
118
- import type { ButtonProps } from '@ideasui/button';
119
-
120
- const MyButton: React.FC<ButtonProps> = (props) => {
121
- return <Button {...props} />;
122
- };
123
- ```
99
+ MIT © [IdeasUI](https://ideasui.com)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ideasui/button",
3
- "version": "0.0.2-beta.0",
3
+ "version": "0.0.2-beta.1",
4
4
  "description": "A high-performance, accessible Button and ButtonGroup component library for React, built with Tailwind CSS v4 and React Aria.",
5
5
  "author": "IdeasUI<support@ideasui.com>",
6
6
  "homepage": "https://ideasui.com",
@@ -46,8 +46,8 @@
46
46
  },
47
47
  "dependencies": {
48
48
  "react-aria-components": "^1.16.0",
49
- "@ideasui/theme": "0.0.5-beta.0",
50
- "@ideasui/utils": "0.0.2-beta.0"
49
+ "@ideasui/theme": "0.0.5-beta.1",
50
+ "@ideasui/utils": "0.0.2-beta.1"
51
51
  },
52
52
  "module": "dist/index.mjs",
53
53
  "types": "dist/index.d.mts"