@aristobyte-ui/dropdown 2.5.1 → 2.6.1

package/README.md

@@ -0,0 +1,120 @@
+# @aristobyte-ui/dropdown
+
+<p align="center">
+  <img src="https://img.shields.io/badge/TypeScript-5.8-blue?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
+  <img src="https://img.shields.io/badge/Build-Turbo-green?style=for-the-badge&logo=turbo&logoColor=white" alt="TurboRepo" />
+  <img src="https://img.shields.io/badge/Lint-Strict-red?style=for-the-badge&logo=eslint&logoColor=white" alt="ESLint" />
+  <img src="https://img.shields.io/badge/License-MIT-black?style=for-the-badge&logo=open-source-initiative&logoColor=white" alt="License" />
+  <img src="https://img.shields.io/badge/AristoByte-UI-purple?style=for-the-badge&logo=react&logoColor=white" alt="AristoByte UI" />
+  <img src="https://img.shields.io/badge/Node-20.17.0+-339933?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js >=20.17.0" />
+  <img src="https://img.shields.io/badge/Yarn-1.22+-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white" alt="Yarn >=1.22" />
+  <img src="https://img.shields.io/badge/NPM-10.8+-CB3837?style=for-the-badge&logo=npm&logoColor=white" alt="NPM >=10.8" />
+</p>
+
+> A fully typed, modular, and composable Dropdown component built for AristoByteUI, leveraging Button for interactive triggers and providing lightweight, performant, and flexible menus for React applications.
+
+## 📦 Installation
+
+```bash
+# Install via Yarn
+yarn add -D @aristobyte-ui/dropdown
+
+# Or via npm
+npm install -D @aristobyte-ui/dropdown
+
+# Or via pnpm
+pnpm add -D @aristobyte-ui/dropdown
+
+```
+
+## 🛠 Usage
+
+```tsx
+import { Dropdown } from "@aristobyte-ui/dropdown";
+import { Button } from "@aristobyte-ui/button";
+
+export default function Example() {
+  return (
+    <Dropdown
+      trigger={<Button variant="primary">Options</Button>}
+      items={[
+        { label: "Profile", onClick: () => console.log("Profile clicked") },
+        { label: "Settings", onClick: () => console.log("Settings clicked") },
+        { label: "Logout", onClick: () => console.log("Logout clicked") },
+      ]}
+      placement="bottom-start"
+      disabled={false}
+    />
+  );
+}
+```
+
+##📂 Presets Available
+
+- **trigger**: Any React element, commonly a Button, to toggle the dropdown.
+- **items**: Array of menu items, each with label, optional icon, and onClick callback.
+- **placement**: Positioning of the dropdown menu (e.g., `top`, `bottom`, `left`, `right` with variations like -start or -end).
+- **disabled**: Boolean to disable the dropdown trigger.
+
+## 🔧 Example in a Package
+
+```tsx
+import { Dropdown } from "@aristobyte-ui/dropdown";
+import { Button } from "@aristobyte-ui/button";
+import { FiSettings, FiUser } from "react-icons/fi";
+
+export function UserMenu() {
+  return (
+    <Dropdown
+      trigger={
+        <Button variant="secondary" appearance="outline">
+          Menu
+        </Button>
+      }
+      items={[
+        {
+          label: "Profile",
+          icon: FiUser,
+          onClick: () => console.log("Profile"),
+        },
+        {
+          label: "Settings",
+          icon: FiSettings,
+          onClick: () => console.log("Settings"),
+        },
+        { label: "Logout", onClick: () => console.log("Logout") },
+      ]}
+      placement="bottom-end"
+    />
+  );
+}
+```
+
+## 📊 Why This Matters
+
+- **Performance-first:** Lightweight CSS ensures fast rendering and smooth transitions.
+- **Fully typed:** TypeScript-first API ensures predictable usage and IDE autocomplete.
+- **AristoByteUI ready:** Seamlessly integrates with design tokens, SCSS modules, and Button component composition.
+- **Flexible:** Supports multiple variants, appearances, sizes, radius options, icons, ripple-enabled interactive feedback, and nested menu structures.
+
+## 🏆 Philosophy
+
+- **Modular architecture:** Dropdown component is fully composable with Button and other interactive elements.
+- **Declarative styling:** SCSS modules keep styles maintainable and scoped.
+- **Strict typing & runtime flexibility:** Props fully typed while allowing runtime overrides.
+- **Developer experience optimized:** Easy to use with predictable behavior and minimal boilerplate.
+
+## 📜 License
+
+MIT © AristoByte
+
+## 🛡 Shields Showcase
+
+<p align="center">
+  <img src="https://img.shields.io/badge/Consistency-100%25-green?style=for-the-badge&logo=typescript" />
+  <img src="https://img.shields.io/badge/Maintained-Active-brightgreen?style=for-the-badge&logo=github" />
+  <img src="https://img.shields.io/badge/Strictness-High-critical?style=for-the-badge&logo=eslint" />
+  <img src="https://img.shields.io/badge/Declarations-Enabled-blue?style=for-the-badge&logo=typescript" />
+  <img src="https://img.shields.io/badge/Monorepo-Turbo-green?style=for-the-badge&logo=monorepo" />
+  <img src="https://img.shields.io/badge/Interop-ESM%2FCJS-orange?style=for-the-badge&logo=javascript" />
+</p>

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": "2.5.1",
+  "version": "2.6.1",
   "license": "MIT",
   "private": false,
   "author": "AristoByte <info@aristobyte.com>",
@@ -43,16 +43,16 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "lib/src/main/index.js",
-  "module": "es/src/main/index.js",
-  "types": "es/src/main/index.d.ts",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sass": "^1.97.3"
   },
   "dependencies": {
-    "@aristobyte-ui/button": "^2.5.1",
-    "@aristobyte-ui/utils": "^2.5.1"
+    "@aristobyte-ui/button": "^2.6.1",
+    "@aristobyte-ui/utils": "^2.6.1"
   }
 }

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

@@ -1,64 +0,0 @@
-@use '@aristobyte-ui/utils/styles' 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/es/src/main/components/Dropdown/index.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { type IDropdownOption } from '../DropdownOption';
-import { type IButton } from '@aristobyte-ui/button';
-import './Dropdown.scss';
-export 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;
-}
-export declare const Dropdown: React.FC<IDropdown>;
-//# sourceMappingURL=index.d.ts.map

package/es/src/main/components/Dropdown/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/dropdown/src/main/components/Dropdown/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAG7D,OAAO,iBAAiB,CAAC;AAQzB,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE,CAAC;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,UAAU,GAAG,yBAAyB,CAAC,CAAC;IAC/D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAChF,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,gBAAgB,GAAG,YAAY,GAAG,SAAS,CAAC;IAC/E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA4JxC,CAAC"}

package/es/src/main/components/Dropdown/index.js

@@ -1,133 +0,0 @@
-'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/es/src/main/components/DropdownOption/DropdownOption.scss

@@ -1,68 +0,0 @@
-@use '@aristobyte-ui/utils/styles' 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/es/src/main/components/DropdownOption/index.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import './DropdownOption.scss';
-export 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;
-}
-export declare const DropdownOption: React.FC<IDropdownOption>;
-//# sourceMappingURL=index.d.ts.map

package/es/src/main/components/DropdownOption/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/dropdown/src/main/components/DropdownOption/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,uBAAuB,CAAC;AAE/B,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAChF,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,gBAAgB,GAAG,YAAY,GAAG,SAAS,CAAC;IAC/E,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+BpD,CAAC"}

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

@@ -1,13 +0,0 @@
-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/es/src/main/components/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./Dropdown";
-export * from "./DropdownOption";
-//# sourceMappingURL=index.d.ts.map

package/es/src/main/components/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/dropdown/src/main/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

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

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

package/es/src/main/index.d.ts

@@ -1,2 +0,0 @@
-export * from './components';
-//# sourceMappingURL=index.d.ts.map

package/es/src/main/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/dropdown/src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/es/src/main/index.js

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

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

@@ -1,64 +0,0 @@
-@use '@aristobyte-ui/utils/styles' 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/lib/src/main/components/Dropdown/index.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { type IDropdownOption } from '../DropdownOption';
-import { type IButton } from '@aristobyte-ui/button';
-import './Dropdown.scss';
-export 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;
-}
-export declare const Dropdown: React.FC<IDropdown>;
-//# sourceMappingURL=index.d.ts.map

package/lib/src/main/components/Dropdown/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/dropdown/src/main/components/Dropdown/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAG7D,OAAO,iBAAiB,CAAC;AAQzB,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE,CAAC;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,UAAU,GAAG,yBAAyB,CAAC,CAAC;IAC/D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAChF,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,gBAAgB,GAAG,YAAY,GAAG,SAAS,CAAC;IAC/E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA4JxC,CAAC"}

package/lib/src/main/components/Dropdown/index.js

@@ -1,170 +0,0 @@
-"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/lib/src/main/components/DropdownOption/DropdownOption.scss

@@ -1,68 +0,0 @@
-@use '@aristobyte-ui/utils/styles' 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/lib/src/main/components/DropdownOption/index.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import './DropdownOption.scss';
-export 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;
-}
-export declare const DropdownOption: React.FC<IDropdownOption>;
-//# sourceMappingURL=index.d.ts.map

package/lib/src/main/components/DropdownOption/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/dropdown/src/main/components/DropdownOption/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,uBAAuB,CAAC;AAE/B,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAChF,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,gBAAgB,GAAG,YAAY,GAAG,SAAS,CAAC;IAC/E,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+BpD,CAAC"}

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

@@ -1,50 +0,0 @@
-"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/lib/src/main/components/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./Dropdown";
-export * from "./DropdownOption";
-//# sourceMappingURL=index.d.ts.map

package/lib/src/main/components/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/dropdown/src/main/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

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

@@ -1,18 +0,0 @@
-"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/lib/src/main/index.d.ts

@@ -1,2 +0,0 @@
-export * from './components';
-//# sourceMappingURL=index.d.ts.map

package/lib/src/main/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/dropdown/src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/lib/src/main/index.js

@@ -1,17 +0,0 @@
-"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);