@aristobyte-ui/button 1.0.8 → 1.0.11
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/README.md +94 -0
- package/dist/index.css +190 -190
- package/dist/index.css.map +1 -1
- package/dist/index.js +66 -61
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +66 -63
- package/dist/index.mjs.map +1 -1
- package/package.json +39 -1
package/README.md
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
# @aristobyte-ui/button
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<img src="https://img.shields.io/badge/TypeScript-5.8-blue?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
|
|
5
|
+
<img src="https://img.shields.io/badge/Build-Turbo-green?style=for-the-badge&logo=turbo&logoColor=white" alt="TurboRepo" />
|
|
6
|
+
<img src="https://img.shields.io/badge/Lint-Strict-red?style=for-the-badge&logo=eslint&logoColor=white" alt="ESLint" />
|
|
7
|
+
<img src="https://img.shields.io/badge/License-MIT-black?style=for-the-badge&logo=open-source-initiative&logoColor=white" alt="License" />
|
|
8
|
+
<img src="https://img.shields.io/badge/AristoByte-UI-purple?style=for-the-badge&logo=react&logoColor=white" alt="AristoByte UI" />
|
|
9
|
+
<img src="https://img.shields.io/badge/Node-20.17.0+-339933?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js >=20.17.0" />
|
|
10
|
+
<img src="https://img.shields.io/badge/Yarn-1.22+-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white" alt="Yarn >=1.22" />
|
|
11
|
+
<img src="https://img.shields.io/badge/NPM-10.8+-CB3837?style=for-the-badge&logo=npm&logoColor=white" alt="NPM >=10.8" />
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
Fully-featured, modular Button components for AristoByteUI with ripple effects, composable groups, variants, appearances, sizes, radius options, icons, and loading states.
|
|
15
|
+
|
|
16
|
+
## 📦 Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
# Install via Yarn
|
|
20
|
+
yarn add -D @aristobyte-ui/button
|
|
21
|
+
|
|
22
|
+
# Or via npm
|
|
23
|
+
npm install -D @aristobyte-ui/button
|
|
24
|
+
|
|
25
|
+
# Or via pnpm
|
|
26
|
+
pnpm add -D @aristobyte-ui/button
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## 🛠 Usage
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import { Button, ButtonGroup } from "@aristobyte-ui/button";
|
|
33
|
+
import { IconSample } from "@aristobyte-ui/icons";
|
|
34
|
+
|
|
35
|
+
<Button variant="primary" appearance="solid" size="md" radius="md" icon={{ component: IconSample, align: "left" }}>
|
|
36
|
+
Click Me
|
|
37
|
+
</Button>
|
|
38
|
+
|
|
39
|
+
<ButtonGroup variant="secondary" size="md" align="horizontal">
|
|
40
|
+
<Button>One</Button>
|
|
41
|
+
<Button>Two</Button>
|
|
42
|
+
<Button>Three</Button>
|
|
43
|
+
</ButtonGroup>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## 📂 Presets Available
|
|
47
|
+
|
|
48
|
+
- **Button Variants**: `default`, `primary`, `secondary`, `success`, `error`, `warning`
|
|
49
|
+
- **Button Appearances**: `solid`, `outline`,`outline-dashed`, `no-outline`, `glowing`
|
|
50
|
+
- **Button Sizes**: `xsm`, `sm`, `md`, `lg`, `xlg`
|
|
51
|
+
- **Button Radius**: `none`, `sm`, `md`, `lg`, `full`
|
|
52
|
+
- **ButtonGroup Alignment**: `horizontal`, `vertical`
|
|
53
|
+
|
|
54
|
+
## 🔧 Example in a Package
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
<Button variant="success" appearance="glowing" size="lg" radius="full" isLoading spinnerType="duo">
|
|
58
|
+
Submit
|
|
59
|
+
</Button>
|
|
60
|
+
|
|
61
|
+
<ButtonGroup variant="primary" size="sm" align="vertical">
|
|
62
|
+
<Button>Save</Button>
|
|
63
|
+
<Button>Cancel</Button>
|
|
64
|
+
</ButtonGroup>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## 📊 Why This Matters
|
|
68
|
+
|
|
69
|
+
- **Performance-first:** Lightweight CSS ensures fast rendering and smooth transitions.
|
|
70
|
+
- **Fully typed:** TypeScript-first API ensures predictable usage and IDE autocomplete.
|
|
71
|
+
- **AristoByteUI ready:** Seamlessly integrates with design tokens and SCSS modules.
|
|
72
|
+
- **Flexible:** Supports multiple variants, appearances, sizes, radius options, icons, ripple-enabled interactive feedback, and composable groups.
|
|
73
|
+
|
|
74
|
+
## 🏆 Philosophy
|
|
75
|
+
|
|
76
|
+
- **Modular architecture:** Button and ButtonGroup components are fully composable.
|
|
77
|
+
- **Declarative styling:** SCSS modules keep styles maintainable and scoped.
|
|
78
|
+
- **Strict typing & runtime flexibility:** Props fully typed while allowing runtime overrides.
|
|
79
|
+
- **Developer experience optimized:** Easy to use with predictable behavior and minimal boilerplate.
|
|
80
|
+
|
|
81
|
+
## 📜 License
|
|
82
|
+
|
|
83
|
+
[MIT](./LICENSE) © AristoByte
|
|
84
|
+
|
|
85
|
+
## 🛡 Shields Showcase
|
|
86
|
+
|
|
87
|
+
<p align="center">
|
|
88
|
+
<img src="https://img.shields.io/badge/Consistency-100%25-green?style=for-the-badge&logo=typescript" />
|
|
89
|
+
<img src="https://img.shields.io/badge/Maintained-Active-brightgreen?style=for-the-badge&logo=github" />
|
|
90
|
+
<img src="https://img.shields.io/badge/Strictness-High-critical?style=for-the-badge&logo=eslint" />
|
|
91
|
+
<img src="https://img.shields.io/badge/Declarations-Enabled-blue?style=for-the-badge&logo=typescript" />
|
|
92
|
+
<img src="https://img.shields.io/badge/Monorepo-Turbo-green?style=for-the-badge&logo=monorepo" />
|
|
93
|
+
<img src="https://img.shields.io/badge/Interop-ESM%2FCJS-orange?style=for-the-badge&logo=javascript" />
|
|
94
|
+
</p>
|