@rootui/button 0.0.2 → 0.0.4

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 (9) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +74 -5
  3. package/dist/Button.d.ts +130 -0
  4. package/dist/Button.js +1 -0
  5. package/dist/chunk-W3ZTRXNP.js +141 -0
  6. package/dist/index.d.ts +4 -0
  7. package/dist/index.js +1 -2332
  8. package/package.json +14 -17
  9. package/dist/index.js.map +0 -14
package/LICENSE CHANGED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) [2026] [Root UI]
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,15 +1,84 @@
1
1
  # @rootui/button
2
2
 
3
- To install dependencies:
3
+ [![Github repository](https://img.shields.io/badge/github-repo-blue?logo=github)](https://github.com/rootui-org/root-ui) [![Npm monthly downloads](https://img.shields.io/npm/dm/@rootui/button)](https://www.npmjs.com/package/@rootui/button) [![Npm monthly downloads](https://img.shields.io/badge/live-demo-green)](https://root-ui.com/primitives/button) [![Root UI X profile](https://img.shields.io/twitter/follow/rootui_)](https://x.com/rootui_)
4
4
 
5
+ Buttons allow users to perform actions with mouse, touch, and keyboard interactions.
6
+
7
+ - 📖 Docs: [Root UI button docs](https://root-ui.com/primitives/button)
8
+ - 📄 Source: [Github repository](https://github.com/rootui-org/root-ui)
9
+ - 🐛 Report an issue: [Open an issue](#)
10
+ - 📦 Package: [@rootui/button](https://www.npmjs.com/package/@rootui/button)
11
+
12
+ ## 🧬 Anatomy
13
+ ```tsx
14
+ <Button></Button>
15
+ ```
16
+ ## 🛠️ Installation
17
+ ### 1. 📌 Prerequisite
18
+ #### 1.1. ⚙️ Install dependecies
19
+ Check the [getting started guide](https://root-ui.com/docs/getting-started) for more info.
20
+ If you haven't installed the dependecies yet, then run this command:
5
21
  ```bash
6
- bun install
22
+ npm install react-aria-components tw-animate-css
23
+ # or
24
+ yarn add react-aria-components tw-animate-css
25
+ # or
26
+ pnpm add react-aria-components tw-animate-css
27
+ # or
28
+ bun add react-aria-components tw-animate-css
7
29
  ```
30
+ #### 1.2. 🎨 Choose a theme
31
+ You need to pick a theme from the [official Root UI website](https://root-ui.com/playground).
8
32
 
9
- To run:
10
33
 
34
+ ### 2. 🍉 Install component
35
+ #### Option 1: 📦 Package
11
36
  ```bash
12
- bun run index.ts
37
+ npm install @rootui/button
38
+ # or
39
+ yarn add @rootui/button
40
+ # or
41
+ pnpm add @rootui/button
42
+ # or
43
+ bun add @rootui/button
13
44
  ```
14
45
 
15
- This project was created using `bun init` in bun v1.3.6. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
46
+ #### Option 2: ⬛ Shadcn CLI
47
+ ```bash
48
+ npx shadcn@latest add @rootui/button
49
+ # or
50
+ yarn shadcn@latest add @rootui/button
51
+ # or
52
+ pnpm dlx shadcn@latest add @rootui/button
53
+ # or
54
+ bunx --bun shadcn@latest add @rootui/button
55
+ ```
56
+
57
+ #### Option 3: 🏗️ Manual
58
+ Check the [Root UI button docs](https://root-ui.com/docs/primitives/button#installation).
59
+
60
+ ## 💻 Usage
61
+ ```tsx
62
+ import { Button } from "@rootui/button";
63
+
64
+ export default function Page() {
65
+ return (
66
+ <Button>Click me</Button>
67
+ )
68
+ }
69
+ ```
70
+ ## 📃 API Reference
71
+ Check the [Root UI button docs](https://root-ui.com/docs/primitives/button#api-reference).
72
+
73
+ ## 🤝 Contributing
74
+ Contributions are welcome! If you have suggestions for improvements or encounter any issues, please open an issue or submit a pull request on the [GitHub repository](#).
75
+
76
+ Steps to Contribute:
77
+
78
+ 1. Fork the repository. 🍴
79
+ 2. Create a new branch for your feature or bugfix. 🌿
80
+ 3. Commit your changes. 💾
81
+ 4. Push your branch and submit a pull request. 🚀
82
+
83
+ ## 📜 License
84
+ This project is licensed under the MIT License. See the [LICENSE](https://github.com/rootui-org/root-ui/blob/main/LICENSE.md) file for details.
package/dist/Button.d.ts ADDED
@@ -0,0 +1,130 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as tailwind_variants from 'tailwind-variants';
3
+ import { VariantProps } from 'tailwind-variants';
4
+ import { ButtonProps as ButtonProps$1 } from 'react-aria-components';
5
+
6
+ interface ButtonProps extends VariantProps<typeof button>, ButtonProps$1 {
7
+ customLoadingIcon?: React.ReactElement;
8
+ loadingIconProps?: LoadingIconProps;
9
+ }
10
+ interface LoadingIconProps extends React.ComponentProps<'svg'>, VariantProps<typeof buttonLoadingIcon> {
11
+ }
12
+ declare const button: tailwind_variants.TVReturnType<{
13
+ isLoading: {
14
+ true: string;
15
+ };
16
+ isDisabled: {
17
+ true: string;
18
+ false: string;
19
+ };
20
+ size: {
21
+ sm: string;
22
+ md: string;
23
+ lg: string;
24
+ };
25
+ isIconOnly: {
26
+ true: string;
27
+ };
28
+ color: {
29
+ neutral: string;
30
+ primary: string;
31
+ secondary: string;
32
+ info: string;
33
+ success: string;
34
+ warning: string;
35
+ danger: string;
36
+ magic: string;
37
+ };
38
+ variant: {
39
+ filled: string;
40
+ outlined: string;
41
+ subtle: string;
42
+ transparent: string;
43
+ };
44
+ isHovered: {
45
+ true: string;
46
+ };
47
+ isPressed: {
48
+ true: string;
49
+ };
50
+ }, undefined, "button-base", {
51
+ isLoading: {
52
+ true: string;
53
+ };
54
+ isDisabled: {
55
+ true: string;
56
+ false: string;
57
+ };
58
+ size: {
59
+ sm: string;
60
+ md: string;
61
+ lg: string;
62
+ };
63
+ isIconOnly: {
64
+ true: string;
65
+ };
66
+ color: {
67
+ neutral: string;
68
+ primary: string;
69
+ secondary: string;
70
+ info: string;
71
+ success: string;
72
+ warning: string;
73
+ danger: string;
74
+ magic: string;
75
+ };
76
+ variant: {
77
+ filled: string;
78
+ outlined: string;
79
+ subtle: string;
80
+ transparent: string;
81
+ };
82
+ isHovered: {
83
+ true: string;
84
+ };
85
+ isPressed: {
86
+ true: string;
87
+ };
88
+ }, undefined, tailwind_variants.TVReturnType<{
89
+ isLoading: {
90
+ true: string;
91
+ };
92
+ isDisabled: {
93
+ true: string;
94
+ false: string;
95
+ };
96
+ size: {
97
+ sm: string;
98
+ md: string;
99
+ lg: string;
100
+ };
101
+ isIconOnly: {
102
+ true: string;
103
+ };
104
+ color: {
105
+ neutral: string;
106
+ primary: string;
107
+ secondary: string;
108
+ info: string;
109
+ success: string;
110
+ warning: string;
111
+ danger: string;
112
+ magic: string;
113
+ };
114
+ variant: {
115
+ filled: string;
116
+ outlined: string;
117
+ subtle: string;
118
+ transparent: string;
119
+ };
120
+ isHovered: {
121
+ true: string;
122
+ };
123
+ isPressed: {
124
+ true: string;
125
+ };
126
+ }, undefined, "button-base", unknown, unknown, undefined>>;
127
+ declare const buttonLoadingIcon: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "button-loading-icon-base", {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "button-loading-icon-base", unknown, unknown, undefined>>;
128
+ declare function Button({ isIconOnly, color, variant, isLoading, size, isPending, loadingIconProps, customLoadingIcon, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
129
+
130
+ export { Button, type ButtonProps };
package/dist/Button.js ADDED
@@ -0,0 +1 @@
1
+ export { Button } from './chunk-W3ZTRXNP.js';
package/dist/chunk-W3ZTRXNP.js ADDED
@@ -0,0 +1,141 @@
1
+ import { tv } from 'tailwind-variants';
2
+ import { Button as Button$1, composeRenderProps } from 'react-aria-components';
3
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
+
5
+ // src/Button.tsx
6
+ var button = tv({
7
+ base: "button-base",
8
+ variants: {
9
+ isLoading: {
10
+ true: "button-loading"
11
+ },
12
+ isDisabled: {
13
+ true: "button-disabled",
14
+ false: "button-not-disabled"
15
+ },
16
+ size: {
17
+ sm: "button-sm",
18
+ md: "button-md",
19
+ lg: "button-lg"
20
+ },
21
+ isIconOnly: {
22
+ true: "button-icon-only"
23
+ },
24
+ color: {
25
+ neutral: "",
26
+ primary: "",
27
+ secondary: "",
28
+ info: "",
29
+ success: "",
30
+ warning: "",
31
+ danger: "",
32
+ magic: ""
33
+ },
34
+ variant: {
35
+ filled: "button-filled",
36
+ outlined: "button-outlined",
37
+ subtle: "button-subtle",
38
+ transparent: "button-transparent"
39
+ },
40
+ isHovered: {
41
+ true: "button-hovered"
42
+ },
43
+ isPressed: {
44
+ true: "button-pressed"
45
+ }
46
+ },
47
+ compoundVariants: [
48
+ // Filled variants
49
+ { variant: "filled", color: "neutral", className: "button-filled-neutral" },
50
+ { variant: "filled", color: "primary", className: "button-filled-primary" },
51
+ { variant: "filled", color: "secondary", className: "button-filled-secondary" },
52
+ { variant: "filled", color: "info", className: "button-filled-info" },
53
+ { variant: "filled", color: "success", className: "button-filled-success" },
54
+ { variant: "filled", color: "warning", className: "button-filled-warning" },
55
+ { variant: "filled", color: "danger", className: "button-filled-danger" },
56
+ { variant: "filled", color: "magic", className: "button-filled-magic" },
57
+ // Outlined variants
58
+ { variant: "outlined", color: "neutral", className: "button-outlined-neutral" },
59
+ { variant: "outlined", color: "primary", className: "button-outlined-primary" },
60
+ { variant: "outlined", color: "secondary", className: "button-outlined-secondary" },
61
+ { variant: "outlined", color: "info", className: "button-outlined-info" },
62
+ { variant: "outlined", color: "success", className: "button-outlined-success" },
63
+ { variant: "outlined", color: "warning", className: "button-outlined-warning" },
64
+ { variant: "outlined", color: "danger", className: "button-outlined-danger" },
65
+ { variant: "outlined", color: "magic", className: "button-outlined-magic" },
66
+ // Subtle variants
67
+ { variant: "subtle", color: "neutral", className: "button-subtle-neutral" },
68
+ { variant: "subtle", color: "primary", className: "button-subtle-primary" },
69
+ { variant: "subtle", color: "secondary", className: "button-subtle-secondary" },
70
+ { variant: "subtle", color: "info", className: "button-subtle-info" },
71
+ { variant: "subtle", color: "success", className: "button-subtle-success" },
72
+ { variant: "subtle", color: "warning", className: "button-subtle-warning" },
73
+ { variant: "subtle", color: "danger", className: "button-subtle-danger" },
74
+ { variant: "subtle", color: "magic", className: "button-subtle-magic" },
75
+ // Transparent variants
76
+ { variant: "transparent", color: "neutral", className: "button-transparent-neutral" },
77
+ { variant: "transparent", color: "primary", className: "button-transparent-primary" },
78
+ { variant: "transparent", color: "secondary", className: "button-transparent-secondary" },
79
+ { variant: "transparent", color: "info", className: "button-transparent-info" },
80
+ { variant: "transparent", color: "success", className: "button-transparent-success" },
81
+ { variant: "transparent", color: "warning", className: "button-transparent-warning" },
82
+ { variant: "transparent", color: "danger", className: "button-transparent-danger" },
83
+ { variant: "transparent", color: "magic", className: "button-transparent-magic" }
84
+ ],
85
+ defaultVariants: {
86
+ size: "md",
87
+ variant: "filled",
88
+ color: "neutral",
89
+ isDisabled: false,
90
+ isLoading: false
91
+ }
92
+ });
93
+ var buttonLoadingIcon = tv({
94
+ base: "button-loading-icon-base"
95
+ });
96
+ function LoadingIcon({
97
+ children,
98
+ className,
99
+ ...props
100
+ }) {
101
+ return /* @__PURE__ */ jsx("span", { className: buttonLoadingIcon({ className }), children: children || /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }) });
102
+ }
103
+ function Button({
104
+ isIconOnly,
105
+ color,
106
+ variant,
107
+ isLoading,
108
+ size,
109
+ isPending,
110
+ loadingIconProps,
111
+ customLoadingIcon,
112
+ ...props
113
+ }) {
114
+ return /* @__PURE__ */ jsx(
115
+ Button$1,
116
+ {
117
+ ...props,
118
+ isPending: isLoading || isPending,
119
+ className: composeRenderProps(
120
+ props.className,
121
+ (className, renderProps) => button({
122
+ ...renderProps,
123
+ color,
124
+ variant,
125
+ isHovered: renderProps.isHovered,
126
+ isPressed: renderProps.isPressed,
127
+ size,
128
+ isLoading: isLoading || isPending,
129
+ isIconOnly,
130
+ className
131
+ })
132
+ ),
133
+ children: composeRenderProps(props.children, (children, { isPending: isPending2 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
134
+ /* @__PURE__ */ jsx("span", { className: isLoading || isPending2 ? "text-transparent select-none" : "", children }),
135
+ (isLoading || isPending2) && /* @__PURE__ */ jsx(LoadingIcon, { ...loadingIconProps, children: customLoadingIcon })
136
+ ] }))
137
+ }
138
+ );
139
+ }
140
+
141
+ export { Button };
package/dist/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { Button, ButtonProps } from './Button.js';
2
+ import 'react/jsx-runtime';
3
+ import 'tailwind-variants';
4
+ import 'react-aria-components';