@aristobyte-ui/dropdown 1.0.0

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/Dropdown/Dropdown.module.scss

@@ -0,0 +1,41 @@
+@use "../../styles/settings" as *;
+
+.dropdown {
+  width: max-content;
+
+  &__button {
+    width: max-content;
+  }
+
+  &__box {
+    &-overlay {
+      backdrop-filter: blur(12px);
+      height: 100%;
+      left: 0;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 99999999999;
+    }
+
+    &-options {
+      align-items: flex-start;
+      background-color: $color-default;
+      border-radius: 8px; //TODO: change to dynamic
+      box-shadow:
+        0 4px 6px rgba(0, 0, 0, 0.04),
+        0 12px 24px rgba(0, 0, 0, 0.1);
+      display: flex;
+      flex-direction: column;
+      opacity: 1;
+      min-width: 300px;
+      padding: 4px;
+      position: absolute;
+      transition:
+        transform 200ms $cubic-bezier-secondary,
+        opacity 150ms ease;
+      width: 100%;
+      z-index: 99999999999;
+    }
+  }
+}

package/components/Dropdown/index.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import * as React from "react";
+import { DropdownOption, type IDropdownOption } from "../DropdownOption";
+
+import { AnimatePresence, motion } from "framer-motion";
+
+import { Button } from "@aristobyte-ui/button";
+import { Portal } from "../../utils/Portal";
+
+import styles from "./Dropdown.module.scss";
+
+export interface IDropdown {
+  children:
+    | React.ReactElement<IDropdownOption>
+    | React.ReactElement<IDropdownOption>[];
+  value: string;
+  appearance?:
+    | "solid"
+    | "outline"
+    | "outline-dashed"
+    | "no-outline"
+    | "glowing";
+  onChange?: (newValue: string) => void;
+  initiallyOpened?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+type PositionType = {
+  top: 0;
+  left: 0;
+  width: 0;
+};
+
+export const Dropdown: React.FC<IDropdown> = ({
+  children,
+  value,
+  onChange,
+  appearance = "outline",
+  placeholder = "Select",
+  className = "",
+  initiallyOpened = false,
+  disabled = false,
+}) => {
+  const [isOpened, setIsOpened] = React.useState<boolean>(initiallyOpened);
+  const [selected, setSelected] = React.useState<string>(value);
+  const [position, setPosition] = React.useState<PositionType>({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
+  const [dropdownHeight, setDropdownHeight] = React.useState(0);
+  const [buttonHeight, setButtonHeight] = React.useState(0);
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const boxRef = React.useRef<HTMLDivElement>(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): child is React.ReactElement<IDropdownOption> =>
+      React.isValidElement(child) && child.type === DropdownOption
+  );
+
+  const isValidValue = () => {
+    return !!options.find(({ props }) => props.value === value);
+  };
+
+  const handleChange = (currentRadioValue: string) => {
+    onChange?.(currentRadioValue);
+    setSelected(currentRadioValue);
+    setIsOpened(false);
+  };
+
+  const handleToggle = () => {
+    if (disabled) return;
+
+    const rect = buttonRef.current?.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,
+    } as PositionType;
+
+    setPosition(finalPosition);
+    setIsOpened((prev) => !prev);
+  };
+
+  if (!isValidValue()) {
+    throw new Error(
+      'The "value" prop did not match with any of the DropdownOption "value" prop'
+    );
+  }
+
+  return (
+    <>
+      <div className={`${styles["dropdown"]} ${className}`}>
+        <Button
+          {...{ ref: buttonRef }}
+          className={styles["dropdown__button"]}
+          appearance={appearance}
+          onClick={handleToggle}
+          disabled={disabled}
+        >
+          {placeholder}
+        </Button>
+      </div>
+
+      <Portal>
+        <AnimatePresence>
+          {isOpened && (
+            <div className={styles["dropdown__box"]}>
+              <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)}
+              />
+              <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,
+                }}
+              >
+                {options.map(({ props }) => (
+                  <DropdownOption
+                    {...props}
+                    key={`${props.value}-${uniqueId}`}
+                    selectedValue={selected}
+                    onChange={() => handleChange(props.value)}
+                  />
+                ))}
+              </motion.div>
+            </div>
+          )}
+        </AnimatePresence>
+      </Portal>
+    </>
+  );
+};

package/components/DropdownOption/DropdownOption.module.scss

@@ -0,0 +1,24 @@
+@use "../../styles/settings" as *;
+
+.dropdown-option {
+  border-radius: 8px; //TODO: change to dynamic
+  color: $white;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 10px 16px;
+  text-align: left;
+  transition: all 120ms ease-out;
+  width: 100%;
+
+  &:hover {
+    background-color: $color-default-hover;
+  }
+
+  &__title {
+    color: $white;
+  }
+
+  &__description {
+    color: rgba($white, 0.6);
+  }
+}

package/components/DropdownOption/index.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import styles from "./DropdownOption.module.scss";
+
+export interface IDropdownOption {
+  children: string;
+  value: string;
+  onChange?: () => void;
+  selectedValue?: string;
+  description?: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+export const DropdownOption: React.FC<IDropdownOption> = ({
+  children,
+  // value,
+  // selectedValue,
+  onChange,
+  // icon,
+  description,
+  // disabled,
+}) => {
+  // const isSelected = selectedValue === value;
+  return (
+    <button className={styles["dropdown-option"]} onClick={onChange}>
+      <div className={styles["dropdown-option__content"]}>
+        <h3 className={styles["dropdown-option__title"]}>{children}</h3>
+        <p className={styles["dropdown-option__description"]}>{description}</p>
+      </div>
+    </button>
+  );
+};

package/components/index.ts

@@ -0,0 +1,2 @@
+export { Dropdown } from "./Dropdown";
+export { DropdownOption } from "./DropdownOption";

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 "@aristobyte-ui/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,2 @@
+export { Dropdown } from "./Dropdown";
+export { DropdownOption } from "./DropdownOption";

package/dist/index.js

@@ -0,0 +1 @@
+export { Dropdown, DropdownOption } from "./components";