@aristobyte-ui/dropdown 1.0.113 → 2.1.0

package/dist/es/main/components/Dropdown/Dropdown.scss

@@ -0,0 +1,64 @@
+@use "@aristobyte-ui/utils/styles/settings" as *;
+
+.dropdown {
+  width: max-content;
+
+  &__button {
+    width: max-content;
+  }
+
+  &__box {
+    &-variant--default &-options {
+      background-color: $color-default;
+    }
+
+    &-variant--primary &-options {
+      background-color: $color-primary;
+    }
+
+    &-variant--secondary &-options {
+      background-color: $color-secondary;
+    }
+
+    &-variant--warning &-options {
+      background-color: $color-warning;
+    }
+
+    &-variant--error &-options {
+      background-color: $color-error;
+    }
+
+    &-variant--success &-options {
+      background-color: $color-success;
+    }
+
+    &-overlay {
+      backdrop-filter: blur(12px);
+      height: 100%;
+      left: 0;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 99999999999;
+    }
+
+    &-options {
+      align-items: flex-start;
+      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/dist/es/main/components/Dropdown/index.js

@@ -0,0 +1,133 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { DropdownOption } from '../DropdownOption';
+import { Button } from '@aristobyte-ui/button';
+import { Portal } from '@aristobyte-ui/utils';
+import './Dropdown.scss';
+export var Dropdown = function (_a) {
+    var children = _a.children, value = _a.value, onChange = _a.onChange, _b = _a.appearance, appearance = _b === void 0 ? 'outline' : _b, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, _d = _a.placeholder, placeholder = _d === void 0 ? 'Select' : _d, _e = _a.choice, choice = _e === void 0 ? 'single' : _e, _f = _a.className, className = _f === void 0 ? '' : _f, _g = _a.initiallyOpened, initiallyOpened = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.button, button = _j === void 0 ? {} : _j, _k = _a.style, style = _k === void 0 ? {} : _k;
+    var _l = __read(React.useState(initiallyOpened), 2), isOpened = _l[0], setIsOpened = _l[1];
+    var _m = __read(React.useState(value ? [value] : []), 2), selected = _m[0], setSelected = _m[1];
+    var _o = __read(React.useState({
+        top: 0,
+        left: 0,
+        width: 0,
+    }), 2), position = _o[0], setPosition = _o[1];
+    var _p = __read(React.useState(0), 2), dropdownHeight = _p[0], setDropdownHeight = _p[1];
+    var _q = __read(React.useState(0), 2), buttonHeight = _q[0], setButtonHeight = _q[1];
+    var buttonRef = React.useRef(null);
+    var boxRef = React.useRef(null);
+    var uniqueId = React.useId();
+    React.useLayoutEffect(function () {
+        if (!isOpened) {
+            return;
+        }
+        if (boxRef.current) {
+            setDropdownHeight(boxRef.current.getBoundingClientRect().height);
+        }
+        if (buttonRef.current) {
+            setButtonHeight(buttonRef.current.getBoundingClientRect().height);
+        }
+    }, [isOpened]);
+    var options = React.Children.toArray(children).filter(function (child) {
+        return React.isValidElement(child) && child.type === DropdownOption;
+    });
+    var isValidValue = function () {
+        return !!options.find(function (_a) {
+            var props = _a.props;
+            return props.value === value;
+        });
+    };
+    var handleChange = function (currentRadioValue) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(currentRadioValue);
+        if (!choice) {
+            setSelected([currentRadioValue]);
+            setIsOpened(false);
+            return;
+        }
+        if (choice === 'single') {
+            setSelected([currentRadioValue]);
+        }
+        if (choice === 'multiple') {
+            setSelected(function (prev) {
+                return prev.includes(currentRadioValue) ? prev.filter(function (v) { return v !== currentRadioValue; }) : __spreadArray(__spreadArray([], __read(prev), false), [currentRadioValue], false);
+            });
+        }
+    };
+    var handleToggle = function (e) {
+        var _a;
+        if (disabled)
+            return;
+        var rect = (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect)
+            return;
+        var spaceBelow = window.innerHeight - rect.bottom;
+        var spaceAbove = rect.top;
+        var shouldOpenUpwards = dropdownHeight > 0 && spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
+        var 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);
+        if (button === null || button === void 0 ? void 0 : button.onClick)
+            button.onClick(e);
+        setIsOpened(function (prev) { return !prev; });
+    };
+    if (!isValidValue()) {
+        throw new Error('The "value" prop did not match with any of the DropdownOption "value" prop');
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "dropdown ".concat(className) },
+            React.createElement(Button, { onClick: handleToggle, className: "dropdown__button ".concat((button === null || button === void 0 ? void 0 : button.className) || ''), appearance: (button === null || button === void 0 ? void 0 : button.appearance) || appearance, variant: (button === null || button === void 0 ? void 0 : button.variant) || variant, disabled: (button === null || button === void 0 ? void 0 : button.disabled) || disabled, ref: buttonRef }, placeholder)),
+        React.createElement(Portal, null,
+            React.createElement(AnimatePresence, null, isOpened && (React.createElement("div", { className: "dropdown__box ".concat("dropdown__box-variant--".concat(variant)), style: style },
+                React.createElement(motion.div, { className: "dropdown__box-overlay", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3, ease: 'easeIn' }, onClick: function () { return setIsOpened(false); } }),
+                React.createElement(motion.div, { ref: boxRef, className: "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(function (_a) {
+                    var props = _a.props;
+                    return (React.createElement(DropdownOption, __assign({}, props, { variant: variant, appearance: appearance, key: "".concat(props.value, "-").concat(uniqueId), selectedValues: selected, onChange: function () { return handleChange(props.value); } })));
+                }))))))));
+};

package/dist/es/main/components/DropdownOption/DropdownOption.scss

@@ -0,0 +1,68 @@
+@use "@aristobyte-ui/utils/styles/settings" as *;
+
+.dropdown-option {
+  align-items: center;
+  border-radius: 8px; //TODO: change to dynamic
+  color: $white;
+  display: flex;
+  font-size: 14px;
+  font-weight: 500;
+  gap: 10px;
+  padding: 10px 16px;
+  text-align: left;
+  transition: all 120ms ease-out;
+  width: 100%;
+
+  &-variant {
+    &--default:hover {
+      background-color: $color-default-hover;
+    }
+
+    &--primary:hover {
+      background-color: $color-primary-hover;
+    }
+
+    &--secondary:hover {
+      background-color: $color-secondary-hover;
+    }
+
+    &--warning:hover {
+      background-color: $color-warning-hover;
+    }
+
+    &--error:hover {
+      background-color: $color-error-hover;
+    }
+
+    &--success:hover {
+      background-color: $color-success-hover;
+    }
+  }
+
+  &--disabled,
+  &--disabled:hover {
+    background-color: $color-default-disabled;
+    cursor: auto;
+    opacity: 0.5;
+  }
+
+  &__title {
+    color: $white;
+  }
+
+  &__description {
+    color: rgba($white, 0.6);
+  }
+
+  &__tick {
+    color: rgba($white, 0.6);
+    opacity: 0;
+    transform: scale(0, 0.7) translate(0, 10px);
+    transition: all 120ms ease-out;
+
+    &--active {
+      opacity: 1;
+      transform: scale(1) translate(0);
+    }
+  }
+}

package/dist/es/main/components/DropdownOption/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Icons } from '@aristobyte-ui/utils';
+import './DropdownOption.scss';
+export var DropdownOption = function (_a) {
+    var variant = _a.variant, children = _a.children, value = _a.value, selectedValues = _a.selectedValues, onChange = _a.onChange, description = _a.description, disabled = _a.disabled, _b = _a.style, style = _b === void 0 ? {} : _b;
+    var uniqueId = React.useId();
+    return (React.createElement("button", { style: style, key: uniqueId, disabled: disabled, className: "".concat('dropdown-option', " ").concat("dropdown-option-variant--".concat(variant), " ").concat(disabled ? 'dropdown-option--disabled' : ''), onClick: onChange },
+        React.createElement("div", { className: 'dropdown-option__content' },
+            React.createElement("h3", { className: 'dropdown-option__title' }, children),
+            React.createElement("p", { className: 'dropdown-option__description' }, description)),
+        React.createElement("div", { className: "".concat('dropdown-option__tick', " ").concat((selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(value)) ? 'dropdown-option__tick--active' : '') },
+            React.createElement(Icons.Success, { size: 18 }))));
+};

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

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

package/dist/es/main/index.js

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

package/dist/lib/main/components/Dropdown/Dropdown.scss

@@ -0,0 +1,64 @@
+@use "@aristobyte-ui/utils/styles/settings" as *;
+
+.dropdown {
+  width: max-content;
+
+  &__button {
+    width: max-content;
+  }
+
+  &__box {
+    &-variant--default &-options {
+      background-color: $color-default;
+    }
+
+    &-variant--primary &-options {
+      background-color: $color-primary;
+    }
+
+    &-variant--secondary &-options {
+      background-color: $color-secondary;
+    }
+
+    &-variant--warning &-options {
+      background-color: $color-warning;
+    }
+
+    &-variant--error &-options {
+      background-color: $color-error;
+    }
+
+    &-variant--success &-options {
+      background-color: $color-success;
+    }
+
+    &-overlay {
+      backdrop-filter: blur(12px);
+      height: 100%;
+      left: 0;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 99999999999;
+    }
+
+    &-options {
+      align-items: flex-start;
+      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/dist/lib/main/components/Dropdown/index.js

@@ -0,0 +1,170 @@
+"use strict";
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
+var React = __importStar(require("react"));
+var framer_motion_1 = require("framer-motion");
+var DropdownOption_1 = require("../DropdownOption");
+var button_1 = require("@aristobyte-ui/button");
+var utils_1 = require("@aristobyte-ui/utils");
+require("./Dropdown.scss");
+var Dropdown = function (_a) {
+    var children = _a.children, value = _a.value, onChange = _a.onChange, _b = _a.appearance, appearance = _b === void 0 ? 'outline' : _b, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, _d = _a.placeholder, placeholder = _d === void 0 ? 'Select' : _d, _e = _a.choice, choice = _e === void 0 ? 'single' : _e, _f = _a.className, className = _f === void 0 ? '' : _f, _g = _a.initiallyOpened, initiallyOpened = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.button, button = _j === void 0 ? {} : _j, _k = _a.style, style = _k === void 0 ? {} : _k;
+    var _l = __read(React.useState(initiallyOpened), 2), isOpened = _l[0], setIsOpened = _l[1];
+    var _m = __read(React.useState(value ? [value] : []), 2), selected = _m[0], setSelected = _m[1];
+    var _o = __read(React.useState({
+        top: 0,
+        left: 0,
+        width: 0,
+    }), 2), position = _o[0], setPosition = _o[1];
+    var _p = __read(React.useState(0), 2), dropdownHeight = _p[0], setDropdownHeight = _p[1];
+    var _q = __read(React.useState(0), 2), buttonHeight = _q[0], setButtonHeight = _q[1];
+    var buttonRef = React.useRef(null);
+    var boxRef = React.useRef(null);
+    var uniqueId = React.useId();
+    React.useLayoutEffect(function () {
+        if (!isOpened) {
+            return;
+        }
+        if (boxRef.current) {
+            setDropdownHeight(boxRef.current.getBoundingClientRect().height);
+        }
+        if (buttonRef.current) {
+            setButtonHeight(buttonRef.current.getBoundingClientRect().height);
+        }
+    }, [isOpened]);
+    var options = React.Children.toArray(children).filter(function (child) {
+        return React.isValidElement(child) && child.type === DropdownOption_1.DropdownOption;
+    });
+    var isValidValue = function () {
+        return !!options.find(function (_a) {
+            var props = _a.props;
+            return props.value === value;
+        });
+    };
+    var handleChange = function (currentRadioValue) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(currentRadioValue);
+        if (!choice) {
+            setSelected([currentRadioValue]);
+            setIsOpened(false);
+            return;
+        }
+        if (choice === 'single') {
+            setSelected([currentRadioValue]);
+        }
+        if (choice === 'multiple') {
+            setSelected(function (prev) {
+                return prev.includes(currentRadioValue) ? prev.filter(function (v) { return v !== currentRadioValue; }) : __spreadArray(__spreadArray([], __read(prev), false), [currentRadioValue], false);
+            });
+        }
+    };
+    var handleToggle = function (e) {
+        var _a;
+        if (disabled)
+            return;
+        var rect = (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect)
+            return;
+        var spaceBelow = window.innerHeight - rect.bottom;
+        var spaceAbove = rect.top;
+        var shouldOpenUpwards = dropdownHeight > 0 && spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
+        var 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);
+        if (button === null || button === void 0 ? void 0 : button.onClick)
+            button.onClick(e);
+        setIsOpened(function (prev) { return !prev; });
+    };
+    if (!isValidValue()) {
+        throw new Error('The "value" prop did not match with any of the DropdownOption "value" prop');
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "dropdown ".concat(className) },
+            React.createElement(button_1.Button, { onClick: handleToggle, className: "dropdown__button ".concat((button === null || button === void 0 ? void 0 : button.className) || ''), appearance: (button === null || button === void 0 ? void 0 : button.appearance) || appearance, variant: (button === null || button === void 0 ? void 0 : button.variant) || variant, disabled: (button === null || button === void 0 ? void 0 : button.disabled) || disabled, ref: buttonRef }, placeholder)),
+        React.createElement(utils_1.Portal, null,
+            React.createElement(framer_motion_1.AnimatePresence, null, isOpened && (React.createElement("div", { className: "dropdown__box ".concat("dropdown__box-variant--".concat(variant)), style: style },
+                React.createElement(framer_motion_1.motion.div, { className: "dropdown__box-overlay", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3, ease: 'easeIn' }, onClick: function () { return setIsOpened(false); } }),
+                React.createElement(framer_motion_1.motion.div, { ref: boxRef, className: "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(function (_a) {
+                    var props = _a.props;
+                    return (React.createElement(DropdownOption_1.DropdownOption, __assign({}, props, { variant: variant, appearance: appearance, key: "".concat(props.value, "-").concat(uniqueId), selectedValues: selected, onChange: function () { return handleChange(props.value); } })));
+                }))))))));
+};
+exports.Dropdown = Dropdown;

package/dist/lib/main/components/DropdownOption/DropdownOption.scss

@@ -0,0 +1,68 @@
+@use "@aristobyte-ui/utils/styles/settings" as *;
+
+.dropdown-option {
+  align-items: center;
+  border-radius: 8px; //TODO: change to dynamic
+  color: $white;
+  display: flex;
+  font-size: 14px;
+  font-weight: 500;
+  gap: 10px;
+  padding: 10px 16px;
+  text-align: left;
+  transition: all 120ms ease-out;
+  width: 100%;
+
+  &-variant {
+    &--default:hover {
+      background-color: $color-default-hover;
+    }
+
+    &--primary:hover {
+      background-color: $color-primary-hover;
+    }
+
+    &--secondary:hover {
+      background-color: $color-secondary-hover;
+    }
+
+    &--warning:hover {
+      background-color: $color-warning-hover;
+    }
+
+    &--error:hover {
+      background-color: $color-error-hover;
+    }
+
+    &--success:hover {
+      background-color: $color-success-hover;
+    }
+  }
+
+  &--disabled,
+  &--disabled:hover {
+    background-color: $color-default-disabled;
+    cursor: auto;
+    opacity: 0.5;
+  }
+
+  &__title {
+    color: $white;
+  }
+
+  &__description {
+    color: rgba($white, 0.6);
+  }
+
+  &__tick {
+    color: rgba($white, 0.6);
+    opacity: 0;
+    transform: scale(0, 0.7) translate(0, 10px);
+    transition: all 120ms ease-out;
+
+    &--active {
+      opacity: 1;
+      transform: scale(1) translate(0);
+    }
+  }
+}

package/dist/lib/main/components/DropdownOption/index.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownOption = void 0;
+var React = __importStar(require("react"));
+var utils_1 = require("@aristobyte-ui/utils");
+require("./DropdownOption.scss");
+var DropdownOption = function (_a) {
+    var variant = _a.variant, children = _a.children, value = _a.value, selectedValues = _a.selectedValues, onChange = _a.onChange, description = _a.description, disabled = _a.disabled, _b = _a.style, style = _b === void 0 ? {} : _b;
+    var uniqueId = React.useId();
+    return (React.createElement("button", { style: style, key: uniqueId, disabled: disabled, className: "".concat('dropdown-option', " ").concat("dropdown-option-variant--".concat(variant), " ").concat(disabled ? 'dropdown-option--disabled' : ''), onClick: onChange },
+        React.createElement("div", { className: 'dropdown-option__content' },
+            React.createElement("h3", { className: 'dropdown-option__title' }, children),
+            React.createElement("p", { className: 'dropdown-option__description' }, description)),
+        React.createElement("div", { className: "".concat('dropdown-option__tick', " ").concat((selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(value)) ? 'dropdown-option__tick--active' : '') },
+            React.createElement(utils_1.Icons.Success, { size: 18 }))));
+};
+exports.DropdownOption = DropdownOption;

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

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

package/dist/lib/main/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aristobyte-ui/dropdown",
   "description": "react dropdown component with trigger button, dropdownoptions, placement variants, fully typed typescript support, and composable integration with aristobyte ui button",
-  "version": "1.0.113",
+  "version": "2.1.0",
   "license": "MIT",
   "private": false,
   "author": "AristoByte <info@aristobyte.com>",
@@ -9,7 +9,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/aristobyte-team/aristobyte-ui.git",
-    "directory": "packages/jest-config"
+    "directory": "packages/dropdown"
   },
   "bugs": {
     "url": "https://github.com/aristobyte-team/aristobyte-ui.git/issues"
@@ -42,44 +42,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "exports": {
-    "development": {
-      "import": "./index.ts",
-      "types": "./index.ts"
-    },
-    "default": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    }
-  },
-  "scripts": {
-    "build": "tsup",
-    "lint": "eslint . --max-warnings 0",
-    "generate:component": "turbo gen react-component",
-    "check-types": "tsc --noEmit"
-  },
+  "main": "dist/lib/main/index.js",
+  "module": "dist/es/main/index.js",
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@aristobyte-ui/button": "^1.0.113",
-    "@aristobyte-ui/utils": "^1.0.113",
-    "framer-motion": "^12.23.12"
-  },
-  "devDependencies": {
-    "@aristobyte-ui/eslint-config": "^1.0.113",
-    "@aristobyte-ui/typescript-config": "^1.0.113",
-    "@turbo/gen": "^2.5.0",
-    "@types/node": "^24.3.0",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.1",
-    "eslint": "^9.27.0",
-    "tsup": "^8.5.0",
-    "typescript": "^5.8.3"
+    "@aristobyte-ui/button": "^2.1.0",
+    "@aristobyte-ui/utils": "^2.1.0"
   }
 }

package/dist/index.d.mts

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { IButton } from '@aristobyte-ui/button';
-
-interface IDropdownOption {
-    variant?: "default" | "primary" | "secondary" | "success" | "error" | "warning";
-    appearance?: "solid" | "outline" | "outline-dashed" | "no-outline" | "glowing";
-    children: string;
-    value: string;
-    onChange?: () => void;
-    selectedValues?: string[];
-    description?: string;
-    icon?: string;
-    disabled?: boolean;
-    choice?: "multiple" | "single";
-    style?: React.CSSProperties;
-}
-declare const DropdownOption: React.FC<IDropdownOption>;
-
-interface IDropdown {
-    children: React.ReactElement<IDropdownOption> | React.ReactElement<IDropdownOption>[];
-    value: string;
-    button?: Omit<IButton, "children" | "dangerouslySetInnerHTML">;
-    variant?: "default" | "primary" | "secondary" | "success" | "error" | "warning";
-    appearance?: "solid" | "outline" | "outline-dashed" | "no-outline" | "glowing";
-    onChange?: (newValue: string) => void;
-    initiallyOpened?: boolean;
-    choice?: "multiple" | "single";
-    placeholder?: string;
-    disabled?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-}
-declare const Dropdown: React.FC<IDropdown>;
-
-export { Dropdown, DropdownOption, type IDropdown, type IDropdownOption };

package/dist/index.d.ts

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { IButton } from '@aristobyte-ui/button';
-
-interface IDropdownOption {
-    variant?: "default" | "primary" | "secondary" | "success" | "error" | "warning";
-    appearance?: "solid" | "outline" | "outline-dashed" | "no-outline" | "glowing";
-    children: string;
-    value: string;
-    onChange?: () => void;
-    selectedValues?: string[];
-    description?: string;
-    icon?: string;
-    disabled?: boolean;
-    choice?: "multiple" | "single";
-    style?: React.CSSProperties;
-}
-declare const DropdownOption: React.FC<IDropdownOption>;
-
-interface IDropdown {
-    children: React.ReactElement<IDropdownOption> | React.ReactElement<IDropdownOption>[];
-    value: string;
-    button?: Omit<IButton, "children" | "dangerouslySetInnerHTML">;
-    variant?: "default" | "primary" | "secondary" | "success" | "error" | "warning";
-    appearance?: "solid" | "outline" | "outline-dashed" | "no-outline" | "glowing";
-    onChange?: (newValue: string) => void;
-    initiallyOpened?: boolean;
-    choice?: "multiple" | "single";
-    placeholder?: string;
-    disabled?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-}
-declare const Dropdown: React.FC<IDropdown>;
-
-export { Dropdown, DropdownOption, type IDropdown, type IDropdownOption };

package/dist/index.js

@@ -1,239 +0,0 @@
-"use client";
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// index.ts
-var index_exports = {};
-__export(index_exports, {
-  Dropdown: () => Dropdown,
-  DropdownOption: () => DropdownOption
-});
-module.exports = __toCommonJS(index_exports);
-
-// components/Dropdown/index.tsx
-var React2 = __toESM(require("react"));
-var import_framer_motion = require("framer-motion");
-
-// components/DropdownOption/index.tsx
-var React = __toESM(require("react"));
-var import_utils = require("@aristobyte-ui/utils");
-var import_jsx_runtime = require("react/jsx-runtime");
-var DropdownOption = ({
-  variant,
-  children,
-  value,
-  selectedValues,
-  onChange,
-  // icon,
-  description,
-  disabled,
-  style = {}
-}) => {
-  const uniqueId = React.useId();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "button",
-    {
-      style,
-      disabled,
-      className: `dropdown-option dropdown-option-variant--${variant} ${disabled ? "dropdown-option--disabled" : ""}`,
-      onClick: onChange,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dropdown-option__content", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "dropdown-option__title", children }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dropdown-option__description", children: description })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
-          {
-            className: `dropdown-option__tick ${(selectedValues == null ? void 0 : selectedValues.includes(value)) ? "dropdown-option__tick--active" : ""}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_utils.Icons.Success, { size: 18 })
-          }
-        )
-      ]
-    },
-    uniqueId
-  );
-};
-
-// components/Dropdown/index.tsx
-var import_button = require("@aristobyte-ui/button");
-var import_utils2 = require("@aristobyte-ui/utils");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var import_react = require("react");
-var Dropdown = ({
-  children,
-  value,
-  onChange,
-  appearance = "outline",
-  variant = "default",
-  placeholder = "Select",
-  choice = "single",
-  className = "",
-  initiallyOpened = false,
-  disabled = false,
-  button = {},
-  style = {}
-}) => {
-  const [isOpened, setIsOpened] = React2.useState(initiallyOpened);
-  const [selected, setSelected] = React2.useState(
-    value ? [value] : []
-  );
-  const [position, setPosition] = React2.useState({
-    top: 0,
-    left: 0,
-    width: 0
-  });
-  const [dropdownHeight, setDropdownHeight] = React2.useState(0);
-  const [buttonHeight, setButtonHeight] = React2.useState(0);
-  const buttonRef = React2.useRef(null);
-  const boxRef = React2.useRef(null);
-  const uniqueId = React2.useId();
-  React2.useLayoutEffect(() => {
-    if (!isOpened) {
-      return;
-    }
-    if (boxRef.current) {
-      setDropdownHeight(boxRef.current.getBoundingClientRect().height);
-    }
-    if (buttonRef.current) {
-      setButtonHeight(buttonRef.current.getBoundingClientRect().height);
-    }
-  }, [isOpened]);
-  const options = React2.Children.toArray(children).filter(
-    (child) => React2.isValidElement(child) && child.type === DropdownOption
-  );
-  const isValidValue = () => {
-    return !!options.find(({ props }) => props.value === value);
-  };
-  const handleChange = (currentRadioValue) => {
-    onChange == null ? void 0 : onChange(currentRadioValue);
-    if (!choice) {
-      setSelected([currentRadioValue]);
-      setIsOpened(false);
-      return;
-    }
-    if (choice === "single") {
-      setSelected([currentRadioValue]);
-    }
-    if (choice === "multiple") {
-      setSelected(
-        (prev) => prev.includes(currentRadioValue) ? prev.filter((v) => v !== currentRadioValue) : [...prev, currentRadioValue]
-      );
-    }
-  };
-  const handleToggle = (e) => {
-    var _a;
-    if (disabled) return;
-    const rect = (_a = buttonRef.current) == null ? 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);
-    if (button == null ? void 0 : button.onClick) button.onClick(e);
-    setIsOpened((prev) => !prev);
-  };
-  if (!isValidValue()) {
-    throw new Error(
-      'The "value" prop did not match with any of the DropdownOption "value" prop'
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `dropdown ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_button.Button,
-      {
-        onClick: handleToggle,
-        className: `${"dropdown__button"} ${(button == null ? void 0 : button.className) || ""}`,
-        appearance: (button == null ? void 0 : button.appearance) || appearance,
-        variant: (button == null ? void 0 : button.variant) || variant,
-        disabled: (button == null ? void 0 : button.disabled) || disabled,
-        ...{ ref: buttonRef },
-        children: placeholder
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_utils2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_framer_motion.AnimatePresence, { children: isOpened && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      "div",
-      {
-        className: `dropdown__box dropdown__box-variant--${variant}`,
-        style,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_framer_motion.motion.div,
-            {
-              className: "dropdown__box-overlay",
-              initial: { opacity: 0 },
-              animate: { opacity: 1 },
-              exit: { opacity: 0 },
-              transition: { duration: 0.3, ease: "easeIn" },
-              onClick: () => setIsOpened(false)
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_framer_motion.motion.div,
-            {
-              ref: boxRef,
-              className: "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 }) => /* @__PURE__ */ (0, import_react.createElement)(
-                DropdownOption,
-                {
-                  ...props,
-                  variant,
-                  appearance,
-                  key: `${props.value}-${uniqueId}`,
-                  selectedValues: selected,
-                  onChange: () => handleChange(props.value)
-                }
-              ))
-            }
-          )
-        ]
-      }
-    ) }) })
-  ] });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Dropdown,
-  DropdownOption
-});
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../index.ts","../components/Dropdown/index.tsx","../components/DropdownOption/index.tsx"],"sourcesContent":["export * from \"./components\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\n\nimport { DropdownOption, type IDropdownOption } from \"../DropdownOption\";\nimport { Button, type IButton } from \"@aristobyte-ui/button\";\nimport { Portal } from \"@aristobyte-ui/utils\";\n\ntype PositionType = {\n  top: 0;\n  left: 0;\n  width: 0;\n};\n\nexport interface IDropdown {\n  children:\n    | React.ReactElement<IDropdownOption>\n    | React.ReactElement<IDropdownOption>[];\n  value: string;\n  button?: Omit<IButton, \"children\" | \"dangerouslySetInnerHTML\">;\n  variant?:\n    | \"default\"\n    | \"primary\"\n    | \"secondary\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  appearance?:\n    | \"solid\"\n    | \"outline\"\n    | \"outline-dashed\"\n    | \"no-outline\"\n    | \"glowing\";\n  onChange?: (newValue: string) => void;\n  initiallyOpened?: boolean;\n  choice?: \"multiple\" | \"single\";\n  placeholder?: string;\n  disabled?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport const Dropdown: React.FC<IDropdown> = ({\n  children,\n  value,\n  onChange,\n  appearance = \"outline\",\n  variant = \"default\",\n  placeholder = \"Select\",\n  choice = \"single\",\n  className = \"\",\n  initiallyOpened = false,\n  disabled = false,\n  button = {},\n  style = {},\n}) => {\n  const [isOpened, setIsOpened] = React.useState<boolean>(initiallyOpened);\n  const [selected, setSelected] = React.useState<string[]>(\n    value ? [value] : []\n  );\n  const [position, setPosition] = React.useState<PositionType>({\n    top: 0,\n    left: 0,\n    width: 0,\n  });\n  const [dropdownHeight, setDropdownHeight] = React.useState(0);\n  const [buttonHeight, setButtonHeight] = React.useState(0);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const boxRef = React.useRef<HTMLDivElement>(null);\n  const uniqueId = React.useId();\n\n  React.useLayoutEffect(() => {\n    if (!isOpened) {\n      return;\n    }\n\n    if (boxRef.current) {\n      setDropdownHeight(boxRef.current.getBoundingClientRect().height);\n    }\n\n    if (buttonRef.current) {\n      setButtonHeight(buttonRef.current.getBoundingClientRect().height);\n    }\n  }, [isOpened]);\n\n  const options = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<IDropdownOption> =>\n      React.isValidElement(child) && child.type === DropdownOption\n  );\n\n  const isValidValue = () => {\n    return !!options.find(({ props }) => props.value === value);\n  };\n\n  const handleChange = (currentRadioValue: string) => {\n    onChange?.(currentRadioValue);\n    if (!choice) {\n      setSelected([currentRadioValue]);\n      setIsOpened(false);\n      return;\n    }\n\n    if (choice === \"single\") {\n      setSelected([currentRadioValue]);\n    }\n\n    if (choice === \"multiple\") {\n      setSelected((prev) =>\n        prev.includes(currentRadioValue)\n          ? prev.filter((v) => v !== currentRadioValue)\n          : [...prev, currentRadioValue]\n      );\n    }\n  };\n\n  const handleToggle = (\n    e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>\n  ) => {\n    if (disabled) return;\n\n    const rect = buttonRef.current?.getBoundingClientRect();\n    if (!rect) return;\n\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const spaceAbove = rect.top;\n\n    const shouldOpenUpwards =\n      dropdownHeight > 0 &&\n      spaceBelow < dropdownHeight &&\n      spaceAbove > dropdownHeight;\n\n    const finalPosition = {\n      top: shouldOpenUpwards\n        ? rect.top + window.scrollY - dropdownHeight - buttonHeight / 2\n        : rect.top + window.scrollY + buttonHeight + 6,\n      left: rect.left + window.scrollX,\n      width: rect.width,\n    } as PositionType;\n\n    setPosition(finalPosition);\n\n    if (button?.onClick) button.onClick(e);\n\n    setIsOpened((prev) => !prev);\n  };\n\n  if (!isValidValue()) {\n    throw new Error(\n      'The \"value\" prop did not match with any of the DropdownOption \"value\" prop'\n    );\n  }\n\n  return (\n    <>\n      <div className={`dropdown ${className}`}>\n        <Button\n          onClick={handleToggle}\n          className={`${\"dropdown__button\"} ${button?.className || \"\"}`}\n          appearance={button?.appearance || appearance}\n          variant={button?.variant || variant}\n          disabled={button?.disabled || disabled}\n          {...{ ref: buttonRef }}\n        >\n          {placeholder}\n        </Button>\n      </div>\n\n      <Portal>\n        <AnimatePresence>\n          {isOpened && (\n            <div\n              className={`dropdown__box dropdown__box-variant--${variant}`}\n              style={style}\n            >\n              <motion.div\n                className={\"dropdown__box-overlay\"}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.3, ease: \"easeIn\" }}\n                onClick={() => setIsOpened(false)}\n              />\n              <motion.div\n                ref={boxRef}\n                className={\"dropdown__box-options\"}\n                initial={{ opacity: 0, y: 20, scale: 0.95 }}\n                animate={{ opacity: 1, y: 0, scale: 1 }}\n                exit={{ opacity: 0, y: 20, scale: 0.95 }}\n                transition={{ duration: 0.2, ease: \"easeIn\" }}\n                style={{\n                  top: position.top,\n                  left: position.left,\n                  width: position.width,\n                }}\n              >\n                {options.map(({ props }) => (\n                  <DropdownOption\n                    {...props}\n                    variant={variant}\n                    appearance={appearance}\n                    key={`${props.value}-${uniqueId}`}\n                    selectedValues={selected}\n                    onChange={() => handleChange(props.value)}\n                  />\n                ))}\n              </motion.div>\n            </div>\n          )}\n        </AnimatePresence>\n      </Portal>\n    </>\n  );\n};\n","import * as React from \"react\";\n\nimport { Icons } from \"@aristobyte-ui/utils\";\n\nexport interface IDropdownOption {\n  variant?:\n    | \"default\"\n    | \"primary\"\n    | \"secondary\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  appearance?:\n    | \"solid\"\n    | \"outline\"\n    | \"outline-dashed\"\n    | \"no-outline\"\n    | \"glowing\";\n  children: string;\n  value: string;\n  onChange?: () => void;\n  selectedValues?: string[];\n  description?: string;\n  icon?: string;\n  disabled?: boolean;\n  choice?: \"multiple\" | \"single\";\n  style?: React.CSSProperties;\n}\n\nexport const DropdownOption: React.FC<IDropdownOption> = ({\n  variant,\n  children,\n  value,\n  selectedValues,\n  onChange,\n  // icon,\n  description,\n  disabled,\n  style = {},\n}) => {\n  const uniqueId = React.useId();\n  return (\n    <button\n      style={style}\n      key={uniqueId}\n      disabled={disabled}\n      className={`dropdown-option dropdown-option-variant--${variant} ${disabled ? \"dropdown-option--disabled\" : \"\"}`}\n      onClick={onChange}\n    >\n      <div className={\"dropdown-option__content\"}>\n        <h3 className={\"dropdown-option__title\"}>{children}</h3>\n        <p className={\"dropdown-option__description\"}>{description}</p>\n      </div>\n      <div\n        className={`dropdown-option__tick ${selectedValues?.includes(value) ? \"dropdown-option__tick--active\" : \"\"}`}\n      >\n        <Icons.Success size={18} />\n      </div>\n    </button>\n  );\n};\n"],"mappings":"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","names":["React","import_utils","import_jsx_runtime"]}

package/dist/index.mjs

@@ -1,202 +0,0 @@
-"use client";
-
-// components/Dropdown/index.tsx
-import * as React2 from "react";
-import { AnimatePresence, motion } from "framer-motion";
-
-// components/DropdownOption/index.tsx
-import * as React from "react";
-import { Icons } from "@aristobyte-ui/utils";
-import { jsx, jsxs } from "react/jsx-runtime";
-var DropdownOption = ({
-  variant,
-  children,
-  value,
-  selectedValues,
-  onChange,
-  // icon,
-  description,
-  disabled,
-  style = {}
-}) => {
-  const uniqueId = React.useId();
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      style,
-      disabled,
-      className: `dropdown-option dropdown-option-variant--${variant} ${disabled ? "dropdown-option--disabled" : ""}`,
-      onClick: onChange,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "dropdown-option__content", children: [
-          /* @__PURE__ */ jsx("h3", { className: "dropdown-option__title", children }),
-          /* @__PURE__ */ jsx("p", { className: "dropdown-option__description", children: description })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `dropdown-option__tick ${(selectedValues == null ? void 0 : selectedValues.includes(value)) ? "dropdown-option__tick--active" : ""}`,
-            children: /* @__PURE__ */ jsx(Icons.Success, { size: 18 })
-          }
-        )
-      ]
-    },
-    uniqueId
-  );
-};
-
-// components/Dropdown/index.tsx
-import { Button } from "@aristobyte-ui/button";
-import { Portal } from "@aristobyte-ui/utils";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-import { createElement } from "react";
-var Dropdown = ({
-  children,
-  value,
-  onChange,
-  appearance = "outline",
-  variant = "default",
-  placeholder = "Select",
-  choice = "single",
-  className = "",
-  initiallyOpened = false,
-  disabled = false,
-  button = {},
-  style = {}
-}) => {
-  const [isOpened, setIsOpened] = React2.useState(initiallyOpened);
-  const [selected, setSelected] = React2.useState(
-    value ? [value] : []
-  );
-  const [position, setPosition] = React2.useState({
-    top: 0,
-    left: 0,
-    width: 0
-  });
-  const [dropdownHeight, setDropdownHeight] = React2.useState(0);
-  const [buttonHeight, setButtonHeight] = React2.useState(0);
-  const buttonRef = React2.useRef(null);
-  const boxRef = React2.useRef(null);
-  const uniqueId = React2.useId();
-  React2.useLayoutEffect(() => {
-    if (!isOpened) {
-      return;
-    }
-    if (boxRef.current) {
-      setDropdownHeight(boxRef.current.getBoundingClientRect().height);
-    }
-    if (buttonRef.current) {
-      setButtonHeight(buttonRef.current.getBoundingClientRect().height);
-    }
-  }, [isOpened]);
-  const options = React2.Children.toArray(children).filter(
-    (child) => React2.isValidElement(child) && child.type === DropdownOption
-  );
-  const isValidValue = () => {
-    return !!options.find(({ props }) => props.value === value);
-  };
-  const handleChange = (currentRadioValue) => {
-    onChange == null ? void 0 : onChange(currentRadioValue);
-    if (!choice) {
-      setSelected([currentRadioValue]);
-      setIsOpened(false);
-      return;
-    }
-    if (choice === "single") {
-      setSelected([currentRadioValue]);
-    }
-    if (choice === "multiple") {
-      setSelected(
-        (prev) => prev.includes(currentRadioValue) ? prev.filter((v) => v !== currentRadioValue) : [...prev, currentRadioValue]
-      );
-    }
-  };
-  const handleToggle = (e) => {
-    var _a;
-    if (disabled) return;
-    const rect = (_a = buttonRef.current) == null ? 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);
-    if (button == null ? void 0 : button.onClick) button.onClick(e);
-    setIsOpened((prev) => !prev);
-  };
-  if (!isValidValue()) {
-    throw new Error(
-      'The "value" prop did not match with any of the DropdownOption "value" prop'
-    );
-  }
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx2("div", { className: `dropdown ${className}`, children: /* @__PURE__ */ jsx2(
-      Button,
-      {
-        onClick: handleToggle,
-        className: `${"dropdown__button"} ${(button == null ? void 0 : button.className) || ""}`,
-        appearance: (button == null ? void 0 : button.appearance) || appearance,
-        variant: (button == null ? void 0 : button.variant) || variant,
-        disabled: (button == null ? void 0 : button.disabled) || disabled,
-        ...{ ref: buttonRef },
-        children: placeholder
-      }
-    ) }),
-    /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        className: `dropdown__box dropdown__box-variant--${variant}`,
-        style,
-        children: [
-          /* @__PURE__ */ jsx2(
-            motion.div,
-            {
-              className: "dropdown__box-overlay",
-              initial: { opacity: 0 },
-              animate: { opacity: 1 },
-              exit: { opacity: 0 },
-              transition: { duration: 0.3, ease: "easeIn" },
-              onClick: () => setIsOpened(false)
-            }
-          ),
-          /* @__PURE__ */ jsx2(
-            motion.div,
-            {
-              ref: boxRef,
-              className: "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 }) => /* @__PURE__ */ createElement(
-                DropdownOption,
-                {
-                  ...props,
-                  variant,
-                  appearance,
-                  key: `${props.value}-${uniqueId}`,
-                  selectedValues: selected,
-                  onChange: () => handleChange(props.value)
-                }
-              ))
-            }
-          )
-        ]
-      }
-    ) }) })
-  ] });
-};
-export {
-  Dropdown,
-  DropdownOption
-};
-//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../components/Dropdown/index.tsx","../components/DropdownOption/index.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\n\nimport { DropdownOption, type IDropdownOption } from \"../DropdownOption\";\nimport { Button, type IButton } from \"@aristobyte-ui/button\";\nimport { Portal } from \"@aristobyte-ui/utils\";\n\ntype PositionType = {\n  top: 0;\n  left: 0;\n  width: 0;\n};\n\nexport interface IDropdown {\n  children:\n    | React.ReactElement<IDropdownOption>\n    | React.ReactElement<IDropdownOption>[];\n  value: string;\n  button?: Omit<IButton, \"children\" | \"dangerouslySetInnerHTML\">;\n  variant?:\n    | \"default\"\n    | \"primary\"\n    | \"secondary\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  appearance?:\n    | \"solid\"\n    | \"outline\"\n    | \"outline-dashed\"\n    | \"no-outline\"\n    | \"glowing\";\n  onChange?: (newValue: string) => void;\n  initiallyOpened?: boolean;\n  choice?: \"multiple\" | \"single\";\n  placeholder?: string;\n  disabled?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport const Dropdown: React.FC<IDropdown> = ({\n  children,\n  value,\n  onChange,\n  appearance = \"outline\",\n  variant = \"default\",\n  placeholder = \"Select\",\n  choice = \"single\",\n  className = \"\",\n  initiallyOpened = false,\n  disabled = false,\n  button = {},\n  style = {},\n}) => {\n  const [isOpened, setIsOpened] = React.useState<boolean>(initiallyOpened);\n  const [selected, setSelected] = React.useState<string[]>(\n    value ? [value] : []\n  );\n  const [position, setPosition] = React.useState<PositionType>({\n    top: 0,\n    left: 0,\n    width: 0,\n  });\n  const [dropdownHeight, setDropdownHeight] = React.useState(0);\n  const [buttonHeight, setButtonHeight] = React.useState(0);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const boxRef = React.useRef<HTMLDivElement>(null);\n  const uniqueId = React.useId();\n\n  React.useLayoutEffect(() => {\n    if (!isOpened) {\n      return;\n    }\n\n    if (boxRef.current) {\n      setDropdownHeight(boxRef.current.getBoundingClientRect().height);\n    }\n\n    if (buttonRef.current) {\n      setButtonHeight(buttonRef.current.getBoundingClientRect().height);\n    }\n  }, [isOpened]);\n\n  const options = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<IDropdownOption> =>\n      React.isValidElement(child) && child.type === DropdownOption\n  );\n\n  const isValidValue = () => {\n    return !!options.find(({ props }) => props.value === value);\n  };\n\n  const handleChange = (currentRadioValue: string) => {\n    onChange?.(currentRadioValue);\n    if (!choice) {\n      setSelected([currentRadioValue]);\n      setIsOpened(false);\n      return;\n    }\n\n    if (choice === \"single\") {\n      setSelected([currentRadioValue]);\n    }\n\n    if (choice === \"multiple\") {\n      setSelected((prev) =>\n        prev.includes(currentRadioValue)\n          ? prev.filter((v) => v !== currentRadioValue)\n          : [...prev, currentRadioValue]\n      );\n    }\n  };\n\n  const handleToggle = (\n    e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>\n  ) => {\n    if (disabled) return;\n\n    const rect = buttonRef.current?.getBoundingClientRect();\n    if (!rect) return;\n\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const spaceAbove = rect.top;\n\n    const shouldOpenUpwards =\n      dropdownHeight > 0 &&\n      spaceBelow < dropdownHeight &&\n      spaceAbove > dropdownHeight;\n\n    const finalPosition = {\n      top: shouldOpenUpwards\n        ? rect.top + window.scrollY - dropdownHeight - buttonHeight / 2\n        : rect.top + window.scrollY + buttonHeight + 6,\n      left: rect.left + window.scrollX,\n      width: rect.width,\n    } as PositionType;\n\n    setPosition(finalPosition);\n\n    if (button?.onClick) button.onClick(e);\n\n    setIsOpened((prev) => !prev);\n  };\n\n  if (!isValidValue()) {\n    throw new Error(\n      'The \"value\" prop did not match with any of the DropdownOption \"value\" prop'\n    );\n  }\n\n  return (\n    <>\n      <div className={`dropdown ${className}`}>\n        <Button\n          onClick={handleToggle}\n          className={`${\"dropdown__button\"} ${button?.className || \"\"}`}\n          appearance={button?.appearance || appearance}\n          variant={button?.variant || variant}\n          disabled={button?.disabled || disabled}\n          {...{ ref: buttonRef }}\n        >\n          {placeholder}\n        </Button>\n      </div>\n\n      <Portal>\n        <AnimatePresence>\n          {isOpened && (\n            <div\n              className={`dropdown__box dropdown__box-variant--${variant}`}\n              style={style}\n            >\n              <motion.div\n                className={\"dropdown__box-overlay\"}\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.3, ease: \"easeIn\" }}\n                onClick={() => setIsOpened(false)}\n              />\n              <motion.div\n                ref={boxRef}\n                className={\"dropdown__box-options\"}\n                initial={{ opacity: 0, y: 20, scale: 0.95 }}\n                animate={{ opacity: 1, y: 0, scale: 1 }}\n                exit={{ opacity: 0, y: 20, scale: 0.95 }}\n                transition={{ duration: 0.2, ease: \"easeIn\" }}\n                style={{\n                  top: position.top,\n                  left: position.left,\n                  width: position.width,\n                }}\n              >\n                {options.map(({ props }) => (\n                  <DropdownOption\n                    {...props}\n                    variant={variant}\n                    appearance={appearance}\n                    key={`${props.value}-${uniqueId}`}\n                    selectedValues={selected}\n                    onChange={() => handleChange(props.value)}\n                  />\n                ))}\n              </motion.div>\n            </div>\n          )}\n        </AnimatePresence>\n      </Portal>\n    </>\n  );\n};\n","import * as React from \"react\";\n\nimport { Icons } from \"@aristobyte-ui/utils\";\n\nexport interface IDropdownOption {\n  variant?:\n    | \"default\"\n    | \"primary\"\n    | \"secondary\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  appearance?:\n    | \"solid\"\n    | \"outline\"\n    | \"outline-dashed\"\n    | \"no-outline\"\n    | \"glowing\";\n  children: string;\n  value: string;\n  onChange?: () => void;\n  selectedValues?: string[];\n  description?: string;\n  icon?: string;\n  disabled?: boolean;\n  choice?: \"multiple\" | \"single\";\n  style?: React.CSSProperties;\n}\n\nexport const DropdownOption: React.FC<IDropdownOption> = ({\n  variant,\n  children,\n  value,\n  selectedValues,\n  onChange,\n  // icon,\n  description,\n  disabled,\n  style = {},\n}) => {\n  const uniqueId = React.useId();\n  return (\n    <button\n      style={style}\n      key={uniqueId}\n      disabled={disabled}\n      className={`dropdown-option dropdown-option-variant--${variant} ${disabled ? \"dropdown-option--disabled\" : \"\"}`}\n      onClick={onChange}\n    >\n      <div className={\"dropdown-option__content\"}>\n        <h3 className={\"dropdown-option__title\"}>{children}</h3>\n        <p className={\"dropdown-option__description\"}>{description}</p>\n      </div>\n      <div\n        className={`dropdown-option__tick ${selectedValues?.includes(value) ? \"dropdown-option__tick--active\" : \"\"}`}\n      >\n        <Icons.Success size={18} />\n      </div>\n    </button>\n  );\n};\n"],"mappings":"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","names":["React","jsx","jsxs"]}