@aristobyte-ui/spinner 0.0.0-beta.1

package/@types/index.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}

package/@types/styles/scss-modules.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.scss" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/assets/svg/i_Copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>

package/assets/svg/i_Error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-x-icon lucide-octagon-x"><path d="m15 9-6 6"/><path d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z"/><path d="m9 9 6 6"/></svg>

package/assets/svg/i_Info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>

package/assets/svg/i_Success.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-icon lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

package/assets/svg/i_Warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert-icon lucide-octagon-alert"><path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/></svg>

package/components/Spinner/Spinner.module.scss

@@ -0,0 +1,232 @@
+@use "../../styles/settings" as *;
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+    transform: scale(0);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+@keyframes pulse-duo {
+  0%,
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(0);
+  }
+  50% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+.spinner {
+  &-size {
+    &--xsm {
+      width: 1rem; // 16px
+      height: 1rem;
+    }
+
+    &--sm {
+      width: 1.5rem; // 24px
+      height: 1.5rem;
+    }
+
+    &--md {
+      width: 2rem; // 32px
+      height: 2rem;
+    }
+
+    &--lg {
+      width: 2.5rem; // 40px
+      height: 2.5rem;
+    }
+
+    &--xlg {
+      width: 3rem; // 48px
+      height: 3rem;
+    }
+  }
+
+  &-type {
+    &--default {
+      animation: rotation 800ms ease infinite;
+      border-radius: 50%;
+
+      &.spinner-variant {
+        &--default {
+          border: 3px solid rgba($color-default, 0.25);
+          border-top-color: rgba($color-default, 1);
+        }
+        &--primary {
+          border: 3px solid rgba($color-primary, 0.25);
+          border-top-color: rgba($color-primary, 1);
+        }
+        &--secondary {
+          border: 3px solid rgba($color-secondary, 0.25);
+          border-top-color: rgba($color-secondary, 1);
+        }
+        &--success {
+          border: 3px solid rgba($color-success, 0.25);
+          border-top-color: rgba($color-success, 1);
+        }
+        &--error {
+          border: 3px solid rgba($color-error, 0.25);
+          border-top-color: rgba($color-error, 1);
+        }
+        &--warning {
+          border: 3px solid rgba($color-warning, 0.25);
+          border-top-color: rgba($color-warning, 1);
+        }
+      }
+    }
+
+    &--duo {
+      animation: rotation 800ms ease infinite;
+      border: 3px solid transparent;
+      border-radius: 50%;
+
+      &.spinner-variant {
+        &--default {
+          border-bottom-color: rgba($color-default, 1);
+          border-top-color: rgba($color-default, 1);
+        }
+        &--primary {
+          border-bottom-color: rgba($color-primary, 1);
+          border-top-color: rgba($color-primary, 1);
+        }
+        &--secondary {
+          border-bottom-color: rgba($color-secondary, 1);
+          border-top-color: rgba($color-secondary, 1);
+        }
+        &--success {
+          border-bottom-color: rgba($color-success, 1);
+          border-top-color: rgba($color-success, 1);
+        }
+        &--error {
+          border-bottom-color: rgba($color-error, 1);
+          border-top-color: rgba($color-error, 1);
+        }
+        &--warning {
+          border-bottom-color: rgba($color-warning, 1);
+          border-top-color: rgba($color-warning, 1);
+        }
+      }
+    }
+
+    &--gradient {
+      animation: rotation 800ms linear infinite;
+      border-right: 3px solid transparent;
+      border-radius: 50%;
+
+      &.spinner-variant {
+        &--default {
+          border-top: 3px solid rgba($color-default, 1);
+        }
+        &--primary {
+          border-top: 3px solid rgba($color-primary, 1);
+        }
+        &--secondary {
+          border-top: 3px solid rgba($color-secondary, 1);
+        }
+        &--success {
+          border-top: 3px solid rgba($color-success, 1);
+        }
+        &--error {
+          border-top: 3px solid rgba($color-error, 1);
+        }
+        &--warning {
+          border-top: 3px solid rgba($color-warning, 1);
+        }
+      }
+    }
+
+    &--pulse {
+      animation: pulse 1s ease-in-out infinite;
+      border-radius: 50%;
+      position: relative;
+
+      &.spinner-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;
+        }
+      }
+    }
+
+    &--pulse-duo {
+      position: relative;
+
+      &.spinner-variant {
+        &--default::after,
+        &--default::before {
+          background-color: $color-default;
+        }
+        &--primary::after,
+        &--primary::before {
+          background-color: $color-primary;
+        }
+        &--secondary::after,
+        &--secondary::before {
+          background-color: $color-secondary;
+        }
+        &--success::after,
+        &--success::before {
+          background-color: $color-success;
+        }
+        &--error::after,
+        &--error::before {
+          background-color: $color-error;
+        }
+        &--warning::after,
+        &--warning::before {
+          background-color: $color-warning;
+        }
+      }
+
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        transform: translate(-50%, -50%) scale(0);
+      }
+      &::before {
+        animation: pulse-duo 2s ease-in-out infinite;
+      }
+      &::after {
+        animation: pulse-duo 2s 1s ease-in-out infinite;
+      }
+    }
+  }
+}

package/components/Spinner/index.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+
+import styles from "./Spinner.module.scss";
+
+export interface ISpinner {
+  type?: "default" | "duo" | "gradient" | "pulse" | "pulse-duo";
+  variant?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "error"
+    | "warning";
+  size?: "xsm" | "sm" | "md" | "lg" | "xlg";
+  className?: string;
+}
+
+export const Spinner: React.FC<ISpinner> = ({
+  type = "default",
+  variant = "default",
+  size = "md",
+  className = "",
+}) => {
+  return (
+    <div
+      className={`spinner ${styles[`spinner-type--${type}`]} ${styles[`spinner-variant--${variant}`]} ${styles[`spinner-size--${size}`]} ${className}`}
+    />
+  );
+};

package/components/index.ts

@@ -0,0 +1 @@
+export { Spinner } from "./Spinner";

package/dist/components/Anchor/index.js

@@ -0,0 +1,28 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { renderRipple } from "../../utils";
+import styles from "./Anchor.module.scss";
+export const Anchor = (_a) => {
+    var { href, variant = "default", className = "", children, onClick } = _a, props = __rest(_a, ["href", "variant", "className", "children", "onClick"]);
+    const ref = React.useRef(null);
+    const handleClick = (e) => {
+        const { clientX, clientY } = e;
+        renderRipple({ ref, clientX, clientY });
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    return (_jsx("a", Object.assign({}, props, { ref: ref, href: href, className: `anchor ${styles["anchor"]} ${styles[`anchor--${variant}`]} ${className}`, onClick: handleClick, children: children })));
+};

package/dist/components/Button/index.js

@@ -0,0 +1,35 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Spinner } from "../Spinner";
+import { renderRipple } from "../../utils";
+import styles from "./Button.module.scss";
+export const Button = (_a) => {
+    var { onClick, children, variant = "default", appearance = "solid", size = "md", radius = "md", icon, spinnerType = "default", isLoading = false, disabled, className = "", dangerouslySetInnerHTML } = _a, restProps = __rest(_a, ["onClick", "children", "variant", "appearance", "size", "radius", "icon", "spinnerType", "isLoading", "disabled", "className", "dangerouslySetInnerHTML"]);
+    const ref = React.useRef(null);
+    const handleClick = (e) => {
+        const { clientX, clientY } = e;
+        renderRipple({ ref, clientX, clientY });
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    const Children = () => {
+        var _a;
+        return (_jsxs(_Fragment, { children: [isLoading && (_jsx(Spinner, { size: size, variant: variant, type: spinnerType, className: styles["spinner"] })), icon && (_jsx("span", { className: `${styles["icon"]} ${styles[`icon--${(_a = icon.align) !== null && _a !== void 0 ? _a : "left"}`]}`, children: React.createElement(icon.component) })), children] }));
+    };
+    return (_jsx("button", Object.assign({ ref: ref, disabled: disabled || isLoading, className: `${styles["button"]} ${styles[`button-variant--${variant}`]} ${styles[`button-appearance--${appearance}`]} ${styles[`button-size--${size}`]} ${styles[`button-radius--${radius}`]} ${isLoading ? styles["button--loading"] : ""} ${className}`, onClick: handleClick }, (dangerouslySetInnerHTML
+        ? { dangerouslySetInnerHTML }
+        : { children: _jsx(Children, {}) }), restProps)));
+};

package/dist/components/ButtonGroup/index.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "../Button";
+import styles from "./ButtonGroup.module.scss";
+export const ButtonGroup = ({ children, align = "horizontal", variant = "default", size = "md", radius = "md", disabled, className = "", }) => {
+    return (_jsx("div", { className: `${styles["button-group"]} ${styles[`button-group-variant--${variant}`]} ${styles[`button-group-size--${size}`]} ${styles[`button-group-radius--${radius}`]} ${styles[`button-group-align--${align}`]} ${className}`, children: React.Children.toArray(children)
+            .filter((child) => React.isValidElement(child) && child.type === Button)
+            .map((child, index) => 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/components/CodeBlock/index.js

@@ -0,0 +1,33 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { getSingletonHighlighter } from "shiki";
+import { Button } from "../Button";
+import { Icons } from "../../utils";
+import styles from "./CodeBlock.module.scss";
+export const CodeBlock = ({ code, lang = "tsx", theme = "nord", className = "", }) => {
+    const [html, setHtml] = React.useState("");
+    React.useEffect(() => {
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            setHtml((yield getSingletonHighlighter({
+                themes: [theme],
+                langs: [lang],
+            })).codeToHtml(code, {
+                lang,
+                theme,
+            }));
+        }))();
+    }, [code, lang, theme]);
+    const copyToClipboard = () => __awaiter(void 0, void 0, void 0, function* () {
+        yield navigator.clipboard.writeText(code);
+    });
+    return (_jsxs("div", { className: `code-block ${styles["code-block"]} ${className}`, children: [_jsx("div", { className: styles["code-block__container"], dangerouslySetInnerHTML: { __html: html } }), _jsx(Button, { onClick: copyToClipboard, className: styles["code-block__button"], dangerouslySetInnerHTML: { __html: Icons.Copy } })] }));
+};

package/dist/components/CodeBlock/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Dropdown/index.js

@@ -0,0 +1,73 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { DropdownOption } from "../DropdownOption";
+import { AnimatePresence, motion } from "framer-motion";
+import { Button } from "../Button";
+import { Portal } from "../../utils/Portal";
+import styles from "./Dropdown.module.scss";
+export const Dropdown = ({ children, value, onChange, appearance = "outline", placeholder = "Select", className = "", initiallyOpened = false, disabled = false, }) => {
+    const [isOpened, setIsOpened] = React.useState(initiallyOpened);
+    const [selected, setSelected] = React.useState(value);
+    const [position, setPosition] = React.useState({
+        top: 0,
+        left: 0,
+        width: 0,
+    });
+    const [dropdownHeight, setDropdownHeight] = React.useState(0);
+    const [buttonHeight, setButtonHeight] = React.useState(0);
+    const buttonRef = React.useRef(null);
+    const boxRef = React.useRef(null);
+    const uniqueId = React.useId();
+    React.useLayoutEffect(() => {
+        if (!isOpened) {
+            return;
+        }
+        if (boxRef.current) {
+            setDropdownHeight(boxRef.current.getBoundingClientRect().height);
+        }
+        if (buttonRef.current) {
+            setButtonHeight(buttonRef.current.getBoundingClientRect().height);
+        }
+    }, [isOpened]);
+    const options = React.Children.toArray(children).filter((child) => React.isValidElement(child) && child.type === DropdownOption);
+    const isValidValue = () => {
+        return !!options.find(({ props }) => props.value === value);
+    };
+    const handleChange = (currentRadioValue) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(currentRadioValue);
+        setSelected(currentRadioValue);
+        setIsOpened(false);
+    };
+    const handleToggle = () => {
+        var _a;
+        if (disabled)
+            return;
+        const rect = (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect)
+            return;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const shouldOpenUpwards = dropdownHeight > 0 &&
+            spaceBelow < dropdownHeight &&
+            spaceAbove > dropdownHeight;
+        const finalPosition = {
+            top: shouldOpenUpwards
+                ? rect.top + window.scrollY - dropdownHeight - buttonHeight / 2
+                : rect.top + window.scrollY + buttonHeight + 6,
+            left: rect.left + window.scrollX,
+            width: rect.width,
+        };
+        setPosition(finalPosition);
+        setIsOpened((prev) => !prev);
+    };
+    if (!isValidValue()) {
+        throw new Error('The "value" prop did not match with any of the DropdownOption "value" prop');
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: `${styles["dropdown"]} ${className}`, children: _jsx(Button, { ref: buttonRef, className: styles["dropdown__button"], appearance: appearance, onClick: handleToggle, disabled: disabled, children: placeholder }) }), _jsx(Portal, { children: _jsx(AnimatePresence, { children: isOpened && (_jsxs("div", { className: styles["dropdown__box"], children: [_jsx(motion.div, { className: styles["dropdown__box-overlay"], initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3, ease: "easeIn" }, onClick: () => setIsOpened(false) }), _jsx(motion.div, { ref: boxRef, className: styles["dropdown__box-options"], initial: { opacity: 0, y: 20, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 20, scale: 0.95 }, transition: { duration: 0.2, ease: "easeIn" }, style: {
+                                    top: position.top,
+                                    left: position.left,
+                                    width: position.width,
+                                }, children: options.map(({ props }) => (_createElement(DropdownOption, Object.assign({}, props, { key: `${props.value}-${uniqueId}`, selectedValue: selected, onChange: () => handleChange(props.value) })))) })] })) }) })] }));
+};

package/dist/components/DropdownOption/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./DropdownOption.module.scss";
+export const DropdownOption = ({ children, 
+// value,
+// selectedValue,
+onChange, 
+// icon,
+description,
+// disabled,
+ }) => {
+    // const isSelected = selectedValue === value;
+    return (_jsx("button", { className: styles["dropdown-option"], onClick: onChange, children: _jsxs("div", { className: styles["dropdown-option__content"], children: [_jsx("h3", { className: styles["dropdown-option__title"], children: children }), _jsx("p", { className: styles["dropdown-option__description"], children: description })] }) }));
+};

package/dist/components/MessageBox/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icons } from "../../utils";
+import styles from "./MessageBox.module.scss";
+const renderIcon = (variant) => {
+    switch (variant) {
+        case "warning":
+            return Icons.Warning;
+        case "success":
+            return Icons.Success;
+        case "error":
+            return Icons.Error;
+        case "info":
+        default:
+            return Icons.Info;
+    }
+};
+export const MessageBox = ({ children, className = "", variant = "default", withIcon = false, customIcon = null, radius = "md", type = "outline", }) => (_jsxs("div", { className: `message-box ${styles["message-box"]} ${styles[`message-box-type--${type}`]} ${styles[`message-box-radius--${radius}`]} ${styles[`message-box--${variant}`]} ${className}`, children: [withIcon && (_jsx("span", { className: `${styles["message-box__icon"]} ${styles[`message-box__icon--${variant}`]}`, dangerouslySetInnerHTML: {
+                __html: customIcon ? customIcon : renderIcon(variant),
+            } })), _jsx("p", { className: `${styles["message-box__content"]}`, dangerouslySetInnerHTML: { __html: children || "" } })] }));

package/dist/components/Radio/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./Radio.module.scss";
+export const Radio = ({ children, value, checked, name, disabled = false, highlightLabel = false, className = "", size = "md", variant = "default", appearance = "default", alignLabel = "right", onChange, }) => {
+    const handleChange = () => {
+        if (!disabled && onChange) {
+            onChange(value);
+        }
+    };
+    return (_jsxs("label", { className: `${styles["radio"]} ${styles[`radio-align-label--${alignLabel}`]} ${styles[`radio-appearance--${appearance}`]} ${styles[`radio-variant--${variant}`]} ${styles[`radio-size--${size}`]} ${disabled ? styles["radio--disabled"] : ""} ${className}`, children: [_jsx("input", { type: "radio", name: name, value: value, checked: checked, disabled: disabled, onChange: handleChange, className: styles["radio__input"] }), _jsx("span", { className: styles["radio__control"] }), children && (_jsx("span", { className: `${styles["radio__label"]} ${highlightLabel ? styles["radio__label--highlight-label"] : ""}`, children: children }))] }));
+};

package/dist/components/RadioGroup/index.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import * as React from "react";
+import { Radio } from "../Radio";
+import styles from "./RadioGroup.module.scss";
+export const RadioGroup = ({ name, value, onChange, children, disabled = false, highlightLabel = false, className = "", size = "md", variant = "default", appearance = "outline", align = "horizontal", alignLabel = "right", }) => {
+    const uniqueId = React.useId();
+    const [currentValue, setCurrentValue] = React.useState(value);
+    const radios = React.Children.toArray(children).filter((child) => React.isValidElement(child) && child.type === Radio);
+    const handleChange = (currentRadioValue) => {
+        if (onChange) {
+            onChange(currentRadioValue);
+        }
+        setCurrentValue(currentRadioValue);
+    };
+    return (_jsx("div", { className: `${styles["radio-group"]} ${styles[`radio-group--${align}`]} ${className}`, children: radios.map(({ props }) => {
+            var _a, _b, _c, _d, _e, _f;
+            return (_createElement(Radio, Object.assign({}, props, { key: `${name}-${props.value}-${uniqueId}`, name: `${name}-${props.value}-${uniqueId}`, checked: props.value === currentValue, onChange: () => handleChange(props.value), disabled: (_a = props.disabled) !== null && _a !== void 0 ? _a : disabled, size: (_b = props.size) !== null && _b !== void 0 ? _b : size, variant: (_c = props.variant) !== null && _c !== void 0 ? _c : variant, appearance: (_d = props.appearance) !== null && _d !== void 0 ? _d : appearance, highlightLabel: (_e = props.highlightLabel) !== null && _e !== void 0 ? _e : highlightLabel, alignLabel: (_f = props.alignLabel) !== null && _f !== void 0 ? _f : alignLabel })));
+        }) }, uniqueId));
+};

package/dist/components/Spinner/index.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./Spinner.module.scss";
+export const Spinner = ({ type = "default", variant = "default", size = "md", className = "", }) => {
+    return (_jsx("div", { className: `spinner ${styles[`spinner-type--${type}`]} ${styles[`spinner-variant--${variant}`]} ${styles[`spinner-size--${size}`]} ${className}` }));
+};

package/dist/components/Switch/index.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Switch.module.scss";
+//@TODO: Fix the the switch styling, which is breaking when continuously clicking on the component
+export const Switch = ({ label, alignLabel = "vertical", checked, switchSize = "md", variant = "default", disabled = false, trackIcon, thumbIcon, className = "", onChange, }) => {
+    const id = React.useId();
+    const [isChecked, setIsChecked] = React.useState(!!checked);
+    const handleChange = () => {
+        setIsChecked((prev) => !prev);
+        if (onChange)
+            onChange();
+    };
+    return (_jsxs("label", { htmlFor: id, className: `${styles["switch"]} ${styles[`switch-size--${switchSize}`]} ${styles[`switch-variant--${variant}`]} ${styles[`switch-align-label--${alignLabel}`]} ${disabled ? styles["switch--disabled"] : ""} ${className}`, children: [_jsx("input", { id: id, type: "checkbox", disabled: disabled, checked: isChecked, onChange: handleChange }), _jsxs("span", { className: styles["switch__track"], children: [trackIcon && trackIcon.checked && (_jsx("span", { className: `${styles["switch__track-icon"]} ${styles["switch__track-icon--checked"]}`, children: React.createElement(trackIcon.checked) })), _jsx("span", { className: styles["switch__thumb"], children: thumbIcon && (_jsx("span", { className: styles["switch__thumb-icon"], children: React.createElement(thumbIcon) })) }), trackIcon && trackIcon.unchecked && (_jsx("span", { className: `${styles["switch__track-icon"]} ${styles["switch__track-icon--unchecked"]}`, children: React.createElement(trackIcon.unchecked) }))] }), label && _jsx("span", { className: styles["switch__label"], children: label })] }));
+};

package/dist/components/TabSwitchWithSlidingIndicator/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./TabSwitchWithSlidingIndicator.module.scss";
+export const TabSwitchWithSlidingIndicator = ({ tabs }) => {
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    const currentIndex = tabs.findIndex((_, i) => i === activeIndex);
+    return (_jsxs("div", { className: `tab-switch-with-sliding-indicator ${styles["tab-switch-with-sliding-indicator"]}`, children: [_jsxs("div", { className: styles["tab-switch-with-sliding-indicator__tabs"], children: [tabs.map(({ buttonContent }, index) => (_jsx("button", { className: `${styles["tab-switch-with-sliding-indicator__tab"]} ${activeIndex === index ? styles[" tab-switch-with-sliding-indicator__tab--active"] : ""}`, onClick: () => setActiveIndex(index), children: 
+                        // @TODO: This should be fixed: from consumer level we should be able to pass only string not components - once this is resolved the active tab should have text color white. Since we pass a whole component from consumer level it's hard to identify the most inner component which contains text, so we can change the color of it in different scenarios
+                        buttonContent || index }, index))), _jsx("span", { className: styles["tab-switch-with-sliding-indicator__bar"], style: { left: `${currentIndex * 80}px` } })] }), _jsx("div", { className: styles["tab-switch-with-sliding-indicator__content"], children: tabs[currentIndex].content })] }));
+};

package/dist/components/index.js

@@ -0,0 +1,12 @@
+export { Anchor } from "./Anchor";
+export { Button } from "./Button";
+export { ButtonGroup } from "./ButtonGroup";
+export { Dropdown } from "./Dropdown";
+export { DropdownOption } from "./DropdownOption";
+export { MessageBox } from "./MessageBox";
+export { CodeBlock } from "./CodeBlock";
+export { TabSwitchWithSlidingIndicator } from "./TabSwitchWithSlidingIndicator";
+export { Spinner } from "./Spinner";
+export { Switch } from "./Switch";
+export { Radio } from "./Radio";
+export { RadioGroup } from "./RadioGroup";

package/dist/index.js

@@ -0,0 +1 @@
+export { Anchor, Button, ButtonGroup, Dropdown, DropdownOption, MessageBox, CodeBlock, Spinner, Switch, } from "./components";