@rootui/button 0.0.3 → 0.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2026] [Root UI]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,15 +1,73 @@
 # @rootui/button
 
-To install dependencies:
+[![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_)
 
+Buttons allow users to perform actions with mouse, touch, and keyboard interactions.
+
+ - 📖 Docs: [Root UI button docs](https://root-ui.com/primitives/button)
+ - 📄 Source: [Github repository](https://github.com/rootui-org/root-ui)
+ - 🐛 Report an issue: [Open an issue](#)
+ - 📦 Package: [@rootui/button](https://www.npmjs.com/package/@rootui/button)
+
+## 🧬 Anatomy
+```tsx
+<Button></Button>
+```
+## 🛠️ Installation
+### 1. 📌 Prerequisite
+#### 1.1. ⚙️ Install dependecies
+Check the [getting started guide](https://root-ui.com/docs/getting-started) for more info.
+If you haven't installed the dependecies yet, then run this command:
 ```bash
-bun install
+npm install react-aria-components tw-animate-css
+# or
+yarn add react-aria-components tw-animate-css
+# or
+pnpm add react-aria-components tw-animate-css
+# or
+bun add react-aria-components tw-animate-css
 ```
+#### 1.2. 🎨 Choose a theme
+You need to pick a theme from the [official Root UI website](https://root-ui.com/playground).
 
-To run:
 
+### 2. 🍉 Install component
+#### Option 1: 📦 Package
 ```bash
-bun run index.ts
+npm install @rootui/button
+# or
+yarn add @rootui/button
+# or
+pnpm add @rootui/button
+# or
+bun add @rootui/button
+```
+
+#### Option 2: 🏗️ Manual
+Check the [Root UI button docs](https://root-ui.com/docs/primitives/button#installation).
+
+## 💻 Usage
+```tsx
+import { Button } from "@rootui/button";
+
+export default function Page() {
+  return (
+    <Button>Click me</Button>
+  )
+}
 ```
+## 📃 API Reference
+Check the [Root UI button docs](https://root-ui.com/docs/primitives/button#api-reference).
+
+## 🤝 Contributing
+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](#).
+
+Steps to Contribute:
+
+1.  Fork the repository. 🍴
+2.  Create a new branch for your feature or bugfix. 🌿
+3.  Commit your changes. 💾
+4.  Push your branch and submit a pull request. 🚀
 
-This project was created using `bun init` in bun v1.3.6. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
+## 📜 License
+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/{base-ui/Button.d.ts → Button.d.ts}

@@ -1,30 +1,31 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
-import { ButtonProps as ButtonProps$1 } from '@base-ui/react/button';
+import { ButtonProps as ButtonProps$1 } from 'react-aria-components';
 
-interface ButtonProps extends VariantProps<typeof button>, React.ComponentProps<'button'> {
+interface ButtonProps extends VariantProps<typeof button>, ButtonProps$1 {
+    customLoadingIcon?: React.ReactElement;
+    loadingIconProps?: LoadingIconProps;
+}
+interface LoadingIconProps extends React.ComponentProps<'svg'>, VariantProps<typeof buttonLoadingIcon> {
 }
 declare const button: tailwind_variants.TVReturnType<{
-    isPending: {
-        false: string[];
+    isLoading: {
         true: string;
     };
     isDisabled: {
         true: string;
+        false: string;
     };
     size: {
         sm: string;
         md: string;
         lg: string;
     };
-    variant: {
-        filled: string;
-        outlined: string;
-        subtle: string;
-        transparent: string;
+    isIconOnly: {
+        true: string;
     };
-    severity: {
+    color: {
         neutral: string;
         primary: string;
         secondary: string;
@@ -34,26 +35,35 @@ declare const button: tailwind_variants.TVReturnType<{
         danger: string;
         magic: string;
     };
-}, undefined, "button-base w-fit relative whitespace-nowrap inline-flex items-center justify-center text-center motion-safe:transition-button shrink-0", {
-    isPending: {
-        false: string[];
+    variant: {
+        filled: string;
+        outlined: string;
+        subtle: string;
+        transparent: string;
+    };
+    isHovered: {
+        true: string;
+    };
+    isPressed: {
+        true: string;
+    };
+}, undefined, "button-base", {
+    isLoading: {
         true: string;
     };
     isDisabled: {
         true: string;
+        false: string;
     };
     size: {
         sm: string;
         md: string;
         lg: string;
     };
-    variant: {
-        filled: string;
-        outlined: string;
-        subtle: string;
-        transparent: string;
+    isIconOnly: {
+        true: string;
     };
-    severity: {
+    color: {
         neutral: string;
         primary: string;
         secondary: string;
@@ -63,26 +73,35 @@ declare const button: tailwind_variants.TVReturnType<{
         danger: string;
         magic: string;
     };
+    variant: {
+        filled: string;
+        outlined: string;
+        subtle: string;
+        transparent: string;
+    };
+    isHovered: {
+        true: string;
+    };
+    isPressed: {
+        true: string;
+    };
 }, undefined, tailwind_variants.TVReturnType<{
-    isPending: {
-        false: string[];
+    isLoading: {
         true: string;
     };
     isDisabled: {
         true: string;
+        false: string;
     };
     size: {
         sm: string;
         md: string;
         lg: string;
     };
-    variant: {
-        filled: string;
-        outlined: string;
-        subtle: string;
-        transparent: string;
+    isIconOnly: {
+        true: string;
     };
-    severity: {
+    color: {
         neutral: string;
         primary: string;
         secondary: string;
@@ -92,7 +111,20 @@ declare const button: tailwind_variants.TVReturnType<{
         danger: string;
         magic: string;
     };
-}, undefined, "button-base w-fit relative whitespace-nowrap inline-flex items-center justify-center text-center motion-safe:transition-button shrink-0", unknown, unknown, undefined>>;
-declare function Button({ children, className, isPending, isDisabled, size, variant, severity, ...props }: ButtonProps & ButtonProps$1): react_jsx_runtime.JSX.Element;
+    variant: {
+        filled: string;
+        outlined: string;
+        subtle: string;
+        transparent: string;
+    };
+    isHovered: {
+        true: string;
+    };
+    isPressed: {
+        true: string;
+    };
+}, undefined, "button-base", unknown, unknown, undefined>>;
+declare const buttonLoadingIcon: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "button-loading-icon-base", {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "button-loading-icon-base", unknown, unknown, undefined>>;
+declare function Button({ isIconOnly, color, variant, isLoading, size, isPending, loadingIconProps, customLoadingIcon, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
-export { Button };
+export { Button, type ButtonProps };

package/dist/Button.js

@@ -0,0 +1 @@
+export { Button } from './chunk-W3ZTRXNP.js';

package/dist/chunk-W3ZTRXNP.js

@@ -0,0 +1,141 @@
+import { tv } from 'tailwind-variants';
+import { Button as Button$1, composeRenderProps } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/Button.tsx
+var button = tv({
+  base: "button-base",
+  variants: {
+    isLoading: {
+      true: "button-loading"
+    },
+    isDisabled: {
+      true: "button-disabled",
+      false: "button-not-disabled"
+    },
+    size: {
+      sm: "button-sm",
+      md: "button-md",
+      lg: "button-lg"
+    },
+    isIconOnly: {
+      true: "button-icon-only"
+    },
+    color: {
+      neutral: "",
+      primary: "",
+      secondary: "",
+      info: "",
+      success: "",
+      warning: "",
+      danger: "",
+      magic: ""
+    },
+    variant: {
+      filled: "button-filled",
+      outlined: "button-outlined",
+      subtle: "button-subtle",
+      transparent: "button-transparent"
+    },
+    isHovered: {
+      true: "button-hovered"
+    },
+    isPressed: {
+      true: "button-pressed"
+    }
+  },
+  compoundVariants: [
+    // Filled variants
+    { variant: "filled", color: "neutral", className: "button-filled-neutral" },
+    { variant: "filled", color: "primary", className: "button-filled-primary" },
+    { variant: "filled", color: "secondary", className: "button-filled-secondary" },
+    { variant: "filled", color: "info", className: "button-filled-info" },
+    { variant: "filled", color: "success", className: "button-filled-success" },
+    { variant: "filled", color: "warning", className: "button-filled-warning" },
+    { variant: "filled", color: "danger", className: "button-filled-danger" },
+    { variant: "filled", color: "magic", className: "button-filled-magic" },
+    // Outlined variants
+    { variant: "outlined", color: "neutral", className: "button-outlined-neutral" },
+    { variant: "outlined", color: "primary", className: "button-outlined-primary" },
+    { variant: "outlined", color: "secondary", className: "button-outlined-secondary" },
+    { variant: "outlined", color: "info", className: "button-outlined-info" },
+    { variant: "outlined", color: "success", className: "button-outlined-success" },
+    { variant: "outlined", color: "warning", className: "button-outlined-warning" },
+    { variant: "outlined", color: "danger", className: "button-outlined-danger" },
+    { variant: "outlined", color: "magic", className: "button-outlined-magic" },
+    // Subtle variants
+    { variant: "subtle", color: "neutral", className: "button-subtle-neutral" },
+    { variant: "subtle", color: "primary", className: "button-subtle-primary" },
+    { variant: "subtle", color: "secondary", className: "button-subtle-secondary" },
+    { variant: "subtle", color: "info", className: "button-subtle-info" },
+    { variant: "subtle", color: "success", className: "button-subtle-success" },
+    { variant: "subtle", color: "warning", className: "button-subtle-warning" },
+    { variant: "subtle", color: "danger", className: "button-subtle-danger" },
+    { variant: "subtle", color: "magic", className: "button-subtle-magic" },
+    // Transparent variants
+    { variant: "transparent", color: "neutral", className: "button-transparent-neutral" },
+    { variant: "transparent", color: "primary", className: "button-transparent-primary" },
+    { variant: "transparent", color: "secondary", className: "button-transparent-secondary" },
+    { variant: "transparent", color: "info", className: "button-transparent-info" },
+    { variant: "transparent", color: "success", className: "button-transparent-success" },
+    { variant: "transparent", color: "warning", className: "button-transparent-warning" },
+    { variant: "transparent", color: "danger", className: "button-transparent-danger" },
+    { variant: "transparent", color: "magic", className: "button-transparent-magic" }
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "filled",
+    color: "neutral",
+    isDisabled: false,
+    isLoading: false
+  }
+});
+var buttonLoadingIcon = tv({
+  base: "button-loading-icon-base"
+});
+function LoadingIcon({
+  children,
+  className,
+  ...props
+}) {
+  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" }) }) });
+}
+function Button({
+  isIconOnly,
+  color,
+  variant,
+  isLoading,
+  size,
+  isPending,
+  loadingIconProps,
+  customLoadingIcon,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      ...props,
+      isPending: isLoading || isPending,
+      className: composeRenderProps(
+        props.className,
+        (className, renderProps) => button({
+          ...renderProps,
+          color,
+          variant,
+          isHovered: renderProps.isHovered,
+          isPressed: renderProps.isPressed,
+          size,
+          isLoading: isLoading || isPending,
+          isIconOnly,
+          className
+        })
+      ),
+      children: composeRenderProps(props.children, (children, { isPending: isPending2 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: isLoading || isPending2 ? "text-transparent select-none" : "", children }),
+        (isLoading || isPending2) && /* @__PURE__ */ jsx(LoadingIcon, { ...loadingIconProps, children: customLoadingIcon })
+      ] }))
+    }
+  );
+}
+
+export { Button };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Button } from './base-ui/Button.js';
+export { Button, ButtonProps } from './Button.js';
 import 'react/jsx-runtime';
 import 'tailwind-variants';
-import '@base-ui/react/button';
+import 'react-aria-components';

package/dist/index.js

@@ -1,2 +1 @@
-import './chunk-ZXORUS7M.js';
-export { Button } from './chunk-R76X4JK7.js';
+export { Button } from './chunk-W3ZTRXNP.js';

package/package.json

@@ -1,14 +1,12 @@
 {
   "name": "@rootui/button",
+  "description": "Buttons allow users to perform actions with mouse, touch, and keyboard interactions.",
   "type": "module",
-  "version": "0.0.3",
-  "homepage": "https://root-ui.com",
+  "version": "0.0.5",
+  "homepage": "https://root-ui.com/docs/primitives/button",
   "license": "MIT",
-  "author": {
-    "name": "Souhail Dev",
-    "url": "https://x.com/souhail_dev",
-    "email": "souhail4dev@gmail.com"
-  },
+  "sideEffects": false,
+  "author": "Root UI <support@root-ui.com>",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -19,7 +17,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/benlhachemi/rootui.git",
+    "url": "git+https://github.com/rootui-org/root-ui.git",
     "directory": "packages/types"
   },
   "exports": {
@@ -32,21 +30,21 @@
   },
   "scripts": {
     "build": "tsup src",
-    "dev": "tsup src --watch src"
+    "dev": "tsup src --watch src",
+    "link": "bun link",
+    "publish": "bun publish"
+  },
+  "dependencies": {
+    "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
     "@types/react": "^19.2.9",
     "tsup": "^8.5.1",
     "typescript": "^5"
   },
-  "dependencies": {
-    "@base-ui/react": "^1.1.0",
-    "lucide-react": "^0.562.0",
-    "tailwind-merge": "^3.4.0",
-    "tailwind-variants": "^3.2.2"
-  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-aria-components": "^1.14.0"
   }
 }

package/dist/base-ui/Button.js

@@ -1 +0,0 @@
-export { Button } from '../chunk-R76X4JK7.js';

package/dist/base-ui/index.d.ts

@@ -1,4 +0,0 @@
-export { Button } from './Button.js';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@base-ui/react/button';

package/dist/base-ui/index.js

@@ -1,2 +0,0 @@
-import '../chunk-ZXORUS7M.js';
-export { Button } from '../chunk-R76X4JK7.js';

package/dist/chunk-R76X4JK7.js

@@ -1,166 +0,0 @@
-import { LoaderCircle } from 'lucide-react';
-import { defaultConfig, tv } from 'tailwind-variants';
-import { Button as Button$1 } from '@base-ui/react/button';
-import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-// src/base-ui/Button.tsx
-defaultConfig.twMerge = false;
-var button = tv({
-  base: "button-base w-fit relative whitespace-nowrap inline-flex items-center justify-center text-center motion-safe:transition-button shrink-0",
-  variants: {
-    isPending: {
-      false: [
-        "cursor-pointer",
-        "will-change-transform",
-        "motion-safe:hover:animate-button-hover",
-        "motion-safe:active:animate-button-active"
-      ],
-      true: "pointer-events-none opacity-80"
-    },
-    isDisabled: {
-      true: "pointer-events-none opacity-40"
-    },
-    size: {
-      sm: "button-size-sm",
-      md: "button-size-md",
-      lg: "button-size-lg"
-    },
-    variant: {
-      filled: "",
-      outlined: "",
-      subtle: "",
-      transparent: ""
-    },
-    severity: {
-      neutral: "",
-      primary: "",
-      secondary: "",
-      info: "",
-      success: "",
-      warning: "",
-      danger: "",
-      magic: ""
-    }
-  },
-  compoundVariants: [
-    {
-      variant: "filled",
-      severity: "primary",
-      className: "text-on-primary bg-primary hover:bg-primary-hover active:bg-primary-active"
-    },
-    {
-      variant: "subtle",
-      severity: "primary",
-      className: "text-on-primary-subtle bg-primary-subtle hover:bg-primary-subtle-hover active:bg-primary-subtle-active"
-    },
-    {
-      variant: "outlined",
-      severity: "primary",
-      className: "text-primary bg-transparent outline outline-primary hover:bg-primary/5 active:bg-primary/10"
-    },
-    {
-      variant: "transparent",
-      severity: "primary",
-      className: "text-primary bg-transparent hover:bg-primary/10 active:bg-primary/15"
-    },
-    {
-      variant: "filled",
-      severity: "neutral",
-      className: "text-on-neutral bg-neutral hover:bg-neutral-hover active:bg-neutral-active"
-    },
-    {
-      variant: "subtle",
-      severity: "neutral",
-      className: "text-on-neutral-subtle bg-neutral-subtle hover:bg-neutral-subtle-hover active:bg-neutral-subtle-active"
-    },
-    {
-      variant: "outlined",
-      severity: "neutral",
-      className: "text-neutral bg-transparent outline outline-default hover:bg-neutral/15 active:bg-neutral/20"
-    },
-    {
-      variant: "transparent",
-      severity: "neutral",
-      className: "text-neutral bg-transparent hover:bg-neutral/20 active:bg-neutral/30"
-    },
-    {
-      variant: "filled",
-      severity: "info",
-      className: "text-on-info bg-info hover:bg-info-hover active:bg-info-active"
-    },
-    {
-      variant: "subtle",
-      severity: "info",
-      className: "text-on-info-subtle bg-info-subtle hover:bg-info-subtle-hover active:bg-info-subtle-active"
-    },
-    {
-      variant: "outlined",
-      severity: "info",
-      className: "text-info bg-transparent outline outline-info hover:bg-info/5 active:bg-info/10"
-    },
-    {
-      variant: "transparent",
-      severity: "info",
-      className: "text-info bg-transparent hover:bg-info/10 active:bg-info/15"
-    },
-    {
-      variant: "filled",
-      severity: "success",
-      className: "text-on-success bg-success hover:bg-success-hover active:bg-success-active"
-    },
-    {
-      variant: "subtle",
-      severity: "success",
-      className: "text-on-success-subtle bg-success-subtle hover:bg-success-subtle-hover active:bg-success-subtle-active"
-    },
-    {
-      variant: "outlined",
-      severity: "success",
-      className: "text-success bg-transparent outline outline-success hover:bg-success/5 active:bg-success/10"
-    },
-    {
-      variant: "transparent",
-      severity: "success",
-      className: "text-success bg-transparent hover:bg-success/10 active:bg-success/15"
-    }
-  ],
-  defaultVariants: {
-    size: "md",
-    variant: "filled",
-    severity: "primary",
-    isDisabled: false,
-    isPending: false
-  }
-});
-function Button({
-  children,
-  className,
-  isPending = false,
-  isDisabled = false,
-  size,
-  variant,
-  severity,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Button$1,
-    {
-      disabled: isDisabled,
-      ...props,
-      className: twMerge(button({
-        size,
-        variant,
-        severity,
-        isDisabled,
-        isPending
-      }), className),
-      children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: isPending ? "text-transparent select-none" : "", children }),
-        isPending && /* @__PURE__ */ jsx("span", { className: "flex absolute inset-0 justify-center items-center", children: /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin", size: 16 }) })
-      ] })
-    }
-  );
-}
-
-export { Button };

package/dist/chunk-ZXORUS7M.js

@@ -1 +0,0 @@
-