@aristobyte-ui/button 1.0.113 → 2.1.0

package/dist/es/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/dist/es/main/components/ButtonGroup/ButtonGroup.scss

@@ -0,0 +1,66 @@
+@use "@aristobyte-ui/utils/styles/settings" as *;
+
+.button-group {
+  align-items: center;
+  display: flex;
+  overflow: hidden;
+  max-width: max-content;
+
+  &-align {
+    &--horizontal {
+      flex-direction: row;
+    }
+
+    &--vertical {
+      flex-direction: column;
+    }
+  }
+
+  &-variant {
+    &--default {
+      background-color: $color-default;
+    }
+
+    &--primary {
+      background-color: $color-primary;
+    }
+
+    &--secondary {
+      background-color: $color-secondary;
+    }
+
+    &--success {
+      background-color: $color-success;
+    }
+
+    &--error {
+      background-color: $color-error;
+    }
+
+    &--warning {
+      background-color: $color-warning;
+    }
+  }
+
+  &-radius {
+    &--none {
+      border-radius: 0rem; // 0px
+    }
+
+    &--sm {
+      border-radius: 0.125rem; // 2px
+    }
+
+    &--md {
+      border-radius: 0.375rem; // 6px
+    }
+
+    &--lg {
+      border-radius: 0.5rem; // 8px
+    }
+
+    &--full {
+      border-radius: 1.5rem; // 24px
+    }
+  }
+}

package/dist/es/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/dist/es/main/components/index.js

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

package/dist/es/main/index.js

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