@aristobyte-ui/button 2.3.5 → 2.4.0

package/es/src/main/components/Button/index.js

@@ -0,0 +1,49 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { Spinner } from '@aristobyte-ui/spinner';
+import { renderRipple } from '@aristobyte-ui/utils';
+import './Button.scss';
+export var Button = function (_a) {
+    var onClick = _a.onClick, _b = _a.text, text = _b === void 0 ? '' : _b, _c = _a.href, href = _c === void 0 ? '' : _c, _d = _a.target, target = _d === void 0 ? '_self' : _d, _e = _a.children, children = _e === void 0 ? '' : _e, _f = _a.type, type = _f === void 0 ? 'button' : _f, _g = _a.variant, variant = _g === void 0 ? 'default' : _g, _h = _a.appearance, appearance = _h === void 0 ? 'solid' : _h, _j = _a.size, size = _j === void 0 ? 'md' : _j, _k = _a.radius, radius = _k === void 0 ? 'md' : _k, icon = _a.icon, _l = _a.spinnerType, spinnerType = _l === void 0 ? 'default' : _l, _m = _a.transparent, transparent = _m === void 0 ? false : _m, _o = _a.isLoading, isLoading = _o === void 0 ? false : _o, _p = _a.disabled, disabled = _p === void 0 ? false : _p, _q = _a.className, className = _q === void 0 ? '' : _q, _r = _a.style, style = _r === void 0 ? {} : _r;
+    var uniqueId = React.useId();
+    var ref = React.useRef(null);
+    var handleClick = function (e) {
+        var clientX = e.clientX, clientY = e.clientY;
+        renderRipple({
+            ref: ref,
+            clientX: clientX,
+            clientY: clientY,
+        });
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    var getCommonProps = function () { return ({
+        onClick: handleClick,
+        disabled: disabled || isLoading,
+        style: style,
+        className: "button ".concat(transparent ? 'button--transparent' : '', " ").concat("button-variant--".concat(variant), " ").concat("button-appearance--".concat(appearance), " ").concat("button-size--".concat(size), " ").concat("button-radius--".concat(radius), " ").concat(isLoading ? 'button--loading' : '', " ").concat(className),
+    }); };
+    var renderChildren = function () {
+        var _a;
+        return (React.createElement(React.Fragment, null,
+            isLoading && React.createElement(Spinner, { size: size, variant: variant, type: spinnerType, className: "spinner" }),
+            icon && (React.createElement("span", { className: "icon ".concat("icon--".concat((_a = icon.align) !== null && _a !== void 0 ? _a : 'left')) }, icon.component({ color: icon.color, size: icon.size }))),
+            text || children));
+    };
+    if (type === 'link') {
+        return (React.createElement("a", __assign({ key: uniqueId, ref: ref, target: target, href: href }, getCommonProps()), renderChildren()));
+    }
+    return (React.createElement("button", __assign({ key: uniqueId, ref: ref }, getCommonProps()), renderChildren()));
+};

package/es/src/main/components/ButtonGroup/index.js

@@ -0,0 +1,20 @@
+'use client';
+import * as React from 'react';
+import { Button } from '../Button';
+import './ButtonGroup.scss';
+export var ButtonGroup = function (_a) {
+    var children = _a.children, _b = _a.align, align = _b === void 0 ? 'horizontal' : _b, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.radius, radius = _e === void 0 ? 'md' : _e, disabled = _a.disabled, _f = _a.className, className = _f === void 0 ? '' : _f, _g = _a.style, style = _g === void 0 ? {} : _g;
+    return (React.createElement("div", { className: "button-group ".concat("button-group-variant--".concat(variant), " ").concat("button-group-size--".concat(size), " ").concat("button-group-radius--".concat(radius), " ").concat("button-group-align--".concat(align), " ").concat(className), style: style }, React.Children.toArray(children)
+        .filter(function (child) {
+        return React.isValidElement(child) && child.type === Button;
+    })
+        .map(function (child, index) {
+        return React.cloneElement(child, {
+            key: index || child.key,
+            size: size || child.props.size,
+            disabled: disabled || child.props.disabled,
+            variant: variant || child.props.variant,
+            radius: 'none',
+        });
+    })));
+};

package/es/src/main/components/index.js

@@ -0,0 +1,2 @@
+export * from "./Button";
+export * from "./ButtonGroup";

package/es/src/main/index.js

@@ -0,0 +1 @@
+export * from './components';

package/lib/src/main/components/Button/index.js

@@ -0,0 +1,86 @@
+"use strict";
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var React = __importStar(require("react"));
+var spinner_1 = require("@aristobyte-ui/spinner");
+var utils_1 = require("@aristobyte-ui/utils");
+require("./Button.scss");
+var Button = function (_a) {
+    var onClick = _a.onClick, _b = _a.text, text = _b === void 0 ? '' : _b, _c = _a.href, href = _c === void 0 ? '' : _c, _d = _a.target, target = _d === void 0 ? '_self' : _d, _e = _a.children, children = _e === void 0 ? '' : _e, _f = _a.type, type = _f === void 0 ? 'button' : _f, _g = _a.variant, variant = _g === void 0 ? 'default' : _g, _h = _a.appearance, appearance = _h === void 0 ? 'solid' : _h, _j = _a.size, size = _j === void 0 ? 'md' : _j, _k = _a.radius, radius = _k === void 0 ? 'md' : _k, icon = _a.icon, _l = _a.spinnerType, spinnerType = _l === void 0 ? 'default' : _l, _m = _a.transparent, transparent = _m === void 0 ? false : _m, _o = _a.isLoading, isLoading = _o === void 0 ? false : _o, _p = _a.disabled, disabled = _p === void 0 ? false : _p, _q = _a.className, className = _q === void 0 ? '' : _q, _r = _a.style, style = _r === void 0 ? {} : _r;
+    var uniqueId = React.useId();
+    var ref = React.useRef(null);
+    var handleClick = function (e) {
+        var clientX = e.clientX, clientY = e.clientY;
+        (0, utils_1.renderRipple)({
+            ref: ref,
+            clientX: clientX,
+            clientY: clientY,
+        });
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    var getCommonProps = function () { return ({
+        onClick: handleClick,
+        disabled: disabled || isLoading,
+        style: style,
+        className: "button ".concat(transparent ? 'button--transparent' : '', " ").concat("button-variant--".concat(variant), " ").concat("button-appearance--".concat(appearance), " ").concat("button-size--".concat(size), " ").concat("button-radius--".concat(radius), " ").concat(isLoading ? 'button--loading' : '', " ").concat(className),
+    }); };
+    var renderChildren = function () {
+        var _a;
+        return (React.createElement(React.Fragment, null,
+            isLoading && React.createElement(spinner_1.Spinner, { size: size, variant: variant, type: spinnerType, className: "spinner" }),
+            icon && (React.createElement("span", { className: "icon ".concat("icon--".concat((_a = icon.align) !== null && _a !== void 0 ? _a : 'left')) }, icon.component({ color: icon.color, size: icon.size }))),
+            text || children));
+    };
+    if (type === 'link') {
+        return (React.createElement("a", __assign({ key: uniqueId, ref: ref, target: target, href: href }, getCommonProps()), renderChildren()));
+    }
+    return (React.createElement("button", __assign({ key: uniqueId, ref: ref }, getCommonProps()), renderChildren()));
+};
+exports.Button = Button;

package/lib/src/main/components/ButtonGroup/index.js

@@ -0,0 +1,57 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroup = void 0;
+var React = __importStar(require("react"));
+var Button_1 = require("../Button");
+require("./ButtonGroup.scss");
+var ButtonGroup = function (_a) {
+    var children = _a.children, _b = _a.align, align = _b === void 0 ? 'horizontal' : _b, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.radius, radius = _e === void 0 ? 'md' : _e, disabled = _a.disabled, _f = _a.className, className = _f === void 0 ? '' : _f, _g = _a.style, style = _g === void 0 ? {} : _g;
+    return (React.createElement("div", { className: "button-group ".concat("button-group-variant--".concat(variant), " ").concat("button-group-size--".concat(size), " ").concat("button-group-radius--".concat(radius), " ").concat("button-group-align--".concat(align), " ").concat(className), style: style }, React.Children.toArray(children)
+        .filter(function (child) {
+        return React.isValidElement(child) && child.type === Button_1.Button;
+    })
+        .map(function (child, index) {
+        return React.cloneElement(child, {
+            key: index || child.key,
+            size: size || child.props.size,
+            disabled: disabled || child.props.disabled,
+            variant: variant || child.props.variant,
+            radius: 'none',
+        });
+    })));
+};
+exports.ButtonGroup = ButtonGroup;

package/lib/src/main/components/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Button"), exports);
+__exportStar(require("./ButtonGroup"), exports);

package/lib/src/main/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aristobyte-ui/button",
-  "version": "2.3.5",
+  "version": "2.4.0",
   "description": "react button and buttongroup components with multiple variants, appearances, sizes, radius options, icons, ripple feedback, and fully typed typescript support",
   "license": "MIT",
   "private": false,
@@ -52,7 +52,7 @@
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@aristobyte-ui/spinner": "2.3.5",
-    "@aristobyte-ui/utils": "2.3.5"
+    "@aristobyte-ui/spinner": "2.4.0",
+    "@aristobyte-ui/utils": "2.4.0"
   }
 }

package/README.md

@@ -1,94 +0,0 @@
-# @aristobyte-ui/button
-
-<p align="center">
-  <img src="https://img.shields.io/badge/TypeScript-5.8-blue?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
-  <img src="https://img.shields.io/badge/Build-Turbo-green?style=for-the-badge&logo=turbo&logoColor=white" alt="TurboRepo" />
-  <img src="https://img.shields.io/badge/Lint-Strict-red?style=for-the-badge&logo=eslint&logoColor=white" alt="ESLint" />
-  <img src="https://img.shields.io/badge/License-MIT-black?style=for-the-badge&logo=open-source-initiative&logoColor=white" alt="License" />
-  <img src="https://img.shields.io/badge/AristoByte-UI-purple?style=for-the-badge&logo=react&logoColor=white" alt="AristoByte UI" />
-  <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" />
-  <img src="https://img.shields.io/badge/Yarn-1.22+-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white" alt="Yarn >=1.22" />
-  <img src="https://img.shields.io/badge/NPM-10.8+-CB3837?style=for-the-badge&logo=npm&logoColor=white" alt="NPM >=10.8" />
-</p>
-
-Fully-featured, modular Button components for AristoByteUI with ripple effects, composable groups, variants, appearances, sizes, radius options, icons, and loading states.
-
-## 📦 Installation
-
-```bash
-# Install via Yarn
-yarn add -D @aristobyte-ui/button
-
-# Or via npm
-npm install -D @aristobyte-ui/button
-
-# Or via pnpm
-pnpm add -D @aristobyte-ui/button
-```
-
-## 🛠 Usage
-
-```tsx
-import { Button, ButtonGroup } from "@aristobyte-ui/button";
-import { IconSample } from "@aristobyte-ui/icons";
-
-<Button variant="primary" appearance="solid" size="md" radius="md" icon={{ component: IconSample, align: "left" }}>
-  Click Me
-</Button>
-
-<ButtonGroup variant="secondary" size="md" align="horizontal">
-  <Button>One</Button>
-  <Button>Two</Button>
-  <Button>Three</Button>
-</ButtonGroup>
-```
-
-## 📂 Presets Available
-
-- **Button Variants**: `default`, `primary`, `secondary`, `success`, `error`, `warning`
-- **Button Appearances**: `solid`, `outline`,`outline-dashed`, `no-outline`, `glowing`
-- **Button Sizes**: `xsm`, `sm`, `md`, `lg`, `xlg`
-- **Button Radius**: `none`, `sm`, `md`, `lg`, `full`
-- **ButtonGroup Alignment**: `horizontal`, `vertical`
-
-## 🔧 Example in a Package
-
-```tsx
-<Button variant="success" appearance="glowing" size="lg" radius="full" isLoading spinnerType="duo">
-  Submit
-</Button>
-
-<ButtonGroup variant="primary" size="sm" align="vertical">
-  <Button>Save</Button>
-  <Button>Cancel</Button>
-</ButtonGroup>
-```
-
-## 📊 Why This Matters
-
-- **Performance-first:** Lightweight CSS ensures fast rendering and smooth transitions.
-- **Fully typed:** TypeScript-first API ensures predictable usage and IDE autocomplete.
-- **AristoByteUI ready:** Seamlessly integrates with design tokens and SCSS modules.
-- **Flexible:** Supports multiple variants, appearances, sizes, radius options, icons, ripple-enabled interactive feedback, and composable groups.
-
-## 🏆 Philosophy
-
-- **Modular architecture:** Button and ButtonGroup components are fully composable.
-- **Declarative styling:** SCSS modules keep styles maintainable and scoped.
-- **Strict typing & runtime flexibility:** Props fully typed while allowing runtime overrides.
-- **Developer experience optimized:** Easy to use with predictable behavior and minimal boilerplate.
-
-## 📜 License
-
-[MIT](./LICENSE) © AristoByte
-
-## 🛡 Shields Showcase
-
-<p align="center">
-  <img src="https://img.shields.io/badge/Consistency-100%25-green?style=for-the-badge&logo=typescript" />
-  <img src="https://img.shields.io/badge/Maintained-Active-brightgreen?style=for-the-badge&logo=github" />
-  <img src="https://img.shields.io/badge/Strictness-High-critical?style=for-the-badge&logo=eslint" />
-  <img src="https://img.shields.io/badge/Declarations-Enabled-blue?style=for-the-badge&logo=typescript" />
-  <img src="https://img.shields.io/badge/Monorepo-Turbo-green?style=for-the-badge&logo=monorepo" />
-  <img src="https://img.shields.io/badge/Interop-ESM%2FCJS-orange?style=for-the-badge&logo=javascript" />
-</p>