@aristobyte-ui/message-box 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/MessageBox/MessageBox.module.scss

@@ -0,0 +1,320 @@
+@use "../../styles/settings" as *;
+
+.message-box {
+  align-items: flex-start;
+  color: $white;
+
+  display: flex;
+  padding: 0.75rem 1rem;
+  padding: 1rem;
+
+  &-radius {
+    &--none {
+      border-radius: 0rem; // 0px
+    }
+
+    &--sm {
+      border-radius: 0.25rem; // 4px
+    }
+
+    &--md {
+      border-radius: 0.5rem; // 8px
+    }
+
+    &--lg {
+      border-radius: 0.625rem; // 10px
+    }
+
+    &--full {
+      border-radius: 1.5rem; // 24px
+    }
+  }
+
+  &__content {
+    color: $white;
+    font-family: $font-family-sans;
+    font-size: $font-size-body-sm;
+    font-weight: $font-weight-regular;
+    line-height: $line-height-normal;
+  }
+
+  &--default.message-box-type {
+    &--solid {
+      background-color: rgba($grey-600, 1);
+
+      .message-box__icon {
+        color: $white;
+      }
+    }
+
+    &--outline {
+      background-color: rgba($grey-600, 0.2);
+      border: 1px solid $grey-600;
+
+      .message-box__icon {
+        color: $grey-600;
+      }
+    }
+
+    &--outline-dashed {
+      background-color: rgba($grey-600, 0.2);
+      border: 1px dashed $grey-600;
+
+      .message-box__icon {
+        color: $grey-600;
+      }
+    }
+
+    &--no-outline {
+      background-color: rgba($grey-600, 0.2);
+
+      .message-box__icon {
+        color: $grey-600;
+      }
+    }
+
+    &--glowing {
+      background-color: rgba($grey-600, 0.2);
+      border: 1px solid $grey-600;
+      box-shadow:
+        0 0 8px rgba($grey-600, 0.5),
+        0 0 16px rgba($grey-600, 0.4),
+        0 0 24px rgba($grey-600, 0.3);
+
+      .message-box__icon {
+        color: $grey-600;
+      }
+    }
+  }
+
+  &--info.message-box-type {
+    &--solid {
+      background-color: rgba($blue-600, 1);
+
+      .message-box__icon {
+        color: $white;
+      }
+    }
+
+    &--outline {
+      background-color: rgba($blue-600, 0.2);
+      border: 1px solid $blue-600;
+
+      .message-box__icon {
+        color: $blue-600;
+      }
+    }
+
+    &--outline-dashed {
+      background-color: rgba($blue-600, 0.2);
+      border: 1px dashed $blue-600;
+
+      .message-box__icon {
+        color: $blue-600;
+      }
+    }
+
+    &--no-outline {
+      background-color: rgba($blue-600, 0.2);
+
+      .message-box__icon {
+        color: $blue-600;
+      }
+    }
+
+    &--glowing {
+      background-color: rgba($blue-600, 0.2);
+      border: 1px solid $blue-600;
+      box-shadow:
+        0 0 8px rgba($blue-600, 0.5),
+        0 0 16px rgba($blue-600, 0.4),
+        0 0 24px rgba($blue-600, 0.3);
+
+      .message-box__icon {
+        color: $blue-600;
+      }
+    }
+  }
+
+  &--success.message-box-type {
+    &--solid {
+      background-color: rgba($green-600, 1);
+
+      .message-box__icon {
+        color: $white;
+      }
+    }
+
+    &--outline {
+      background-color: rgba($green-600, 0.2);
+      border: 1px solid $green-600;
+
+      .message-box__icon {
+        color: $green-600;
+      }
+    }
+
+    &--outline-dashed {
+      background-color: rgba($green-600, 0.2);
+      border: 1px dashed $green-600;
+
+      .message-box__icon {
+        color: $green-600;
+      }
+    }
+
+    &--no-outline {
+      background-color: rgba($green-600, 0.2);
+
+      .message-box__icon {
+        color: $green-600;
+      }
+    }
+
+    &--glowing {
+      background-color: rgba($green-600, 0.2);
+      border: 1px solid $green-600;
+      box-shadow:
+        0 0 8px rgba($green-600, 0.5),
+        0 0 16px rgba($green-600, 0.4),
+        0 0 24px rgba($green-600, 0.3);
+
+      .message-box__icon {
+        color: $green-600;
+      }
+    }
+  }
+
+  &--warning.message-box-type {
+    &--solid {
+      background-color: rgba($amber-600, 1);
+
+      .message-box__icon {
+        color: $white;
+      }
+    }
+
+    &--outline {
+      background-color: rgba($amber-600, 0.2);
+      border: 1px solid $amber-600;
+
+      .message-box__icon {
+        color: $amber-600;
+      }
+    }
+
+    &--outline-dashed {
+      background-color: rgba($amber-600, 0.2);
+      border: 1px dashed $amber-600;
+
+      .message-box__icon {
+        color: $amber-600;
+      }
+    }
+
+    &--no-outline {
+      background-color: rgba($amber-600, 0.2);
+
+      .message-box__icon {
+        color: $amber-600;
+      }
+    }
+
+    &--glowing {
+      background-color: rgba($amber-600, 0.2);
+      border: 1px solid $amber-600;
+      box-shadow:
+        0 0 8px rgba($amber-600, 0.5),
+        0 0 16px rgba($amber-600, 0.4),
+        0 0 24px rgba($amber-600, 0.3);
+
+      .message-box__icon {
+        color: $amber-600;
+      }
+    }
+  }
+
+  &--error.message-box-type {
+    &--solid {
+      background-color: rgba($red-600, 1);
+
+      .message-box__icon {
+        color: $white;
+      }
+    }
+
+    &--outline {
+      background-color: rgba($red-600, 0.2);
+      border: 1px solid $red-600;
+
+      .message-box__icon {
+        color: $red-600;
+      }
+    }
+
+    &--outline-dashed {
+      background-color: rgba($red-600, 0.2);
+      border: 1px dashed $red-600;
+
+      .message-box__icon {
+        color: $red-600;
+      }
+    }
+
+    &--no-outline {
+      background-color: rgba($red-600, 0.2);
+
+      .message-box__icon {
+        color: $red-600;
+      }
+    }
+
+    &--glowing {
+      background-color: rgba($red-600, 0.2);
+      border: 1px solid $red-600;
+      box-shadow:
+        0 0 8px rgba($red-600, 0.5),
+        0 0 16px rgba($red-600, 0.4),
+        0 0 24px rgba($red-600, 0.3);
+
+      .message-box__icon {
+        color: $red-600;
+      }
+    }
+  }
+
+  &__icon {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin: 0 10px 0 0;
+    max-height: 16px;
+    max-width: 16px;
+    min-height: 16px;
+    min-width: 16px;
+
+    &--default {
+      color: $grey-600;
+    }
+
+    &--info {
+      color: $blue-600;
+    }
+
+    &--success {
+      color: $green-600;
+    }
+
+    &--warning {
+      color: $amber-600;
+    }
+
+    &--error {
+      color: $red-600;
+    }
+
+    svg {
+      width: 100%;
+    }
+  }
+}

package/components/MessageBox/index.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Icons } from "../../utils";
+
+import styles from "./MessageBox.module.scss";
+
+type MessageBoxVariant = "default" | "info" | "warning" | "success" | "error";
+
+export interface IMessageBox {
+  variant?: MessageBoxVariant;
+  children?: React.ReactElement | React.ReactNode | string;
+  withIcon?: boolean;
+  customIcon?: React.ReactElement | React.ReactNode | string;
+  radius?: "none" | "sm" | "md" | "lg" | "full";
+  type?: "solid" | "outline" | "outline-dashed" | "no-outline" | "glowing";
+  className?: string;
+}
+
+const renderIcon = (variant: MessageBoxVariant) => {
+  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: React.FC<IMessageBox> = ({
+  children,
+  className = "",
+  variant = "default",
+  withIcon = false,
+  customIcon = null,
+  radius = "md",
+  type = "outline",
+}) => (
+  <div
+    className={`message-box ${styles["message-box"]} ${styles[`message-box-type--${type}`]} ${styles[`message-box-radius--${radius}`]} ${styles[`message-box--${variant}`]} ${className}`}
+  >
+    {withIcon && (
+      <span
+        className={`${styles["message-box__icon"]} ${styles[`message-box__icon--${variant}`]}`}
+        dangerouslySetInnerHTML={{
+          __html: customIcon ? customIcon : renderIcon(variant),
+        }}
+      />
+    )}
+    <p
+      className={`${styles["message-box__content"]}`}
+      dangerouslySetInnerHTML={{ __html: children || "" }}
+    />
+  </div>
+);

package/components/index.ts

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

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));
+};