@aristobyte-ui/dropdown 1.0.6 → 1.0.8

package/dist/index.css

@@ -0,0 +1,53 @@
+/* components/DropdownOption/DropdownOption.module.scss */
+.dropdown-option {
+  border-radius: 8px;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 10px 16px;
+  text-align: left;
+  transition: all 120ms ease-out;
+  width: 100%;
+}
+.dropdown-option:hover {
+  background-color: #111827;
+}
+.dropdown-option__title {
+  color: #ffffff;
+}
+.dropdown-option__description {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* components/Dropdown/Dropdown.module.scss */
+.dropdown {
+  width: max-content;
+}
+.dropdown__button {
+  width: max-content;
+}
+.dropdown__box-overlay {
+  backdrop-filter: blur(12px);
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 99999999999;
+}
+.dropdown__box-options {
+  align-items: flex-start;
+  background-color: #1f2937;
+  border-radius: 8px;
+  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(0.175, 0.885, 0.32, 1.275), opacity 150ms ease;
+  width: 100%;
+  z-index: 99999999999;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../components/DropdownOption.module.scss","../../styles/_settings.scss","../components/Dropdown.module.scss","../../styles/_settings.scss"],"sourcesContent":["@use \"../../styles/settings\" as *;\n\n.dropdown-option {\n  border-radius: 8px; //TODO: change to dynamic\n  color: $white;\n  font-size: 14px;\n  font-weight: 500;\n  padding: 10px 16px;\n  text-align: left;\n  transition: all 120ms ease-out;\n  width: 100%;\n\n  &:hover {\n    background-color: $color-default-hover;\n  }\n\n  &__title {\n    color: $white;\n  }\n\n  &__description {\n    color: rgba($white, 0.6);\n  }\n}\n","// === Design Tokens — Color Palette ===\n\n// Base\n$white: #ffffff;\n$black: #000000;\n$transparent: transparent;\n\n// === Black Transparent Scale ===\n$black-transparent-100: rgba(0, 0, 0, 0.1);\n$black-transparent-200: rgba(0, 0, 0, 0.2);\n$black-transparent-300: rgba(0, 0, 0, 0.3);\n$black-transparent-400: rgba(0, 0, 0, 0.4);\n$black-transparent-500: rgba(0, 0, 0, 0.5);\n$black-transparent-600: rgba(0, 0, 0, 0.6);\n$black-transparent-700: rgba(0, 0, 0, 0.7);\n$black-transparent-800: rgba(0, 0, 0, 0.8);\n$black-transparent-900: rgba(0, 0, 0, 0.9);\n\n// === Black Transparent Scale ===\n$white-transparent-100: rgba(255, 255, 255, 0.1);\n$white-transparent-200: rgba(255, 255, 255, 0.2);\n$white-transparent-300: rgba(255, 255, 255, 0.3);\n$white-transparent-400: rgba(255, 255, 255, 0.4);\n$white-transparent-500: rgba(255, 255, 255, 0.5);\n$white-transparent-600: rgba(255, 255, 255, 0.6);\n$white-transparent-700: rgba(255, 255, 255, 0.7);\n$white-transparent-800: rgba(255, 255, 255, 0.8);\n$white-transparent-900: rgba(255, 255, 255, 0.9);\n\n// === Neutral Scale (Grey) ===\n$grey-50: #f9fafb;\n$grey-100: #f3f4f6;\n$grey-200: #e5e7eb;\n$grey-300: #d1d5db;\n$grey-400: #9ca3af;\n$grey-500: #6b7280;\n$grey-600: #4b5563;\n$grey-700: #374151;\n$grey-800: #1f2937;\n$grey-900: #111827;\n\n// === Primary Scale (Blue) ===\n$blue-50: #eff6ff;\n$blue-100: #dbeafe;\n$blue-200: #bfdbfe;\n$blue-300: #93c5fd;\n$blue-400: #60a5fa;\n$blue-500: #3b82f6;\n$blue-600: #2563eb; // Main\n$blue-700: #1d4ed8; // Hover\n$blue-800: #1e40af;\n$blue-900: #1e3a8a;\n\n// === Secondary Scale (Indigo) ===\n$indigo-50: #eef2ff;\n$indigo-100: #e0e7ff;\n$indigo-200: #c7d2fe;\n$indigo-300: #a5b4fc;\n$indigo-400: #818cf8;\n$indigo-500: #6366f1;\n$indigo-600: #4f46e5; // Main\n$indigo-700: #4338ca; // Hover\n\n// === Error Scale (Red) ===\n$red-50: #fef2f2;\n$red-100: #fee2e2;\n$red-200: #fecaca;\n$red-300: #fca5a5;\n$red-400: #f87171;\n$red-500: #ef4444;\n$red-600: #dc2626; // Main\n$red-700: #b91c1c; // Hover\n\n// === Success Scale (Green) ===\n$green-50: #f0fdf4;\n$green-100: #dcfce7;\n$green-200: #bbf7d0;\n$green-300: #86efac;\n$green-400: #4ade80;\n$green-500: #22c55e;\n$green-600: #16a34a; // Main\n$green-700: #15803d; // Hover\n\n// === Warning Scale (Amber) ===\n$amber-50: #fffbeb;\n$amber-100: #fef3c7;\n$amber-200: #fde68a;\n$amber-300: #fcd34d;\n$amber-400: #fbbf24;\n$amber-500: #f59e0b;\n$amber-600: #d97706; // Main\n$amber-700: #b45309; // Hover\n\n// === Semantic Tokens ===\n$color-default: $grey-800;\n$color-default-hover: $grey-900;\n$color-default-disabled: rgba($color-default, 0.5);\n\n$color-primary: $blue-600;\n$color-primary-hover: $blue-700;\n$color-primary-disabled: rgba($color-primary, 0.5);\n\n$color-secondary: $indigo-600;\n$color-secondary-hover: $indigo-700;\n$color-secondary-disabled: rgba($color-secondary, 0.5);\n\n$color-error: $red-600;\n$color-error-hover: $red-700;\n$color-error-disabled: rgba($color-error, 0.5);\n\n$color-success: $green-600;\n$color-success-hover: $green-700;\n$color-success-disabled: rgba($color-success, 0.5);\n\n$color-warning: $amber-600;\n$color-warning-hover: $amber-700;\n$color-warning-disabled: rgba($color-warning, 0.5);\n\n$text-color-white: $white;\n$text-color-black: $black;\n$text-color-white-disabled: rgba($white, 0.5);\n$text-color-black-disabled: rgba($black, 0.5);\n\n// === Shadows ===\n$shadow-sm: 0 1px 2px 0 rgba($black, 0.05);\n$shadow-md:\n  0 4px 6px -1px rgba($black, 0.1),\n  0 2px 4px -1px rgba($black, 0.06);\n$shadow-lg:\n  0 10px 15px -3px rgba($black, 0.1),\n  0 4px 6px -2px rgba($black, 0.05);\n\n// === Font families ===\n$font-family-sans: \"Inter\", sans-serif;\n$font-family-serif: \"Georgia\", serif;\n$font-family-mono: \"Fira Code\", monospace;\n\n// === Font weights ===\n$font-weight-regular: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n\n// === Line heights ===\n$line-height-tight: 1.2;\n$line-height-snug: 1.375;\n$line-height-normal: 1.5;\n$line-height-loose: 1.625;\n\n// === Font Sizes — Semantic Tokens ===\n\n// === Titles ===\n$font-size-hero: 3rem; // 48px\n$font-size-title-1: 2.25rem; // 36px\n$font-size-title-2: 1.875rem; // 30px\n$font-size-title-3: 1.5rem; // 24px\n\n// === Subtitles ===\n$font-size-subtitle-1: 1.25rem; // 20px\n$font-size-subtitle-2: 1.125rem; // 18px\n\n// === Body text ===\n$font-size-body-lg: 1rem; // 16px\n$font-size-body-md: 0.9375rem; // 15px\n$font-size-body-sm: 0.875rem; // 14px\n\n// === Captions / Descriptions ===\n$font-size-caption: 0.75rem; // 12px\n$font-size-footnote: 0.6875rem; // 11px\n\n// === Buttons ===\n$font-size-button-lg: 1rem; // 16px\n$font-size-button-md: 0.875rem; // 14px\n$font-size-button-sm: 0.75rem; // 12px\n\n// === Animations ===\n\n$cubic-bezier-primary: cubic-bezier(0.55, -0.19, 0.59, 0.95);\n$cubic-bezier-secondary: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n","@use \"../../styles/settings\" as *;\n\n.dropdown {\n  width: max-content;\n\n  &__button {\n    width: max-content;\n  }\n\n  &__box {\n    &-overlay {\n      backdrop-filter: blur(12px);\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n      z-index: 99999999999;\n    }\n\n    &-options {\n      align-items: flex-start;\n      background-color: $color-default;\n      border-radius: 8px; //TODO: change to dynamic\n      box-shadow:\n        0 4px 6px rgba(0, 0, 0, 0.04),\n        0 12px 24px rgba(0, 0, 0, 0.1);\n      display: flex;\n      flex-direction: column;\n      opacity: 1;\n      min-width: 300px;\n      padding: 4px;\n      position: absolute;\n      transition:\n        transform 200ms $cubic-bezier-secondary,\n        opacity 150ms ease;\n      width: 100%;\n      z-index: 99999999999;\n    }\n  }\n}\n","// === Design Tokens — Color Palette ===\n\n// Base\n$white: #ffffff;\n$black: #000000;\n$transparent: transparent;\n\n// === Black Transparent Scale ===\n$black-transparent-100: rgba(0, 0, 0, 0.1);\n$black-transparent-200: rgba(0, 0, 0, 0.2);\n$black-transparent-300: rgba(0, 0, 0, 0.3);\n$black-transparent-400: rgba(0, 0, 0, 0.4);\n$black-transparent-500: rgba(0, 0, 0, 0.5);\n$black-transparent-600: rgba(0, 0, 0, 0.6);\n$black-transparent-700: rgba(0, 0, 0, 0.7);\n$black-transparent-800: rgba(0, 0, 0, 0.8);\n$black-transparent-900: rgba(0, 0, 0, 0.9);\n\n// === Black Transparent Scale ===\n$white-transparent-100: rgba(255, 255, 255, 0.1);\n$white-transparent-200: rgba(255, 255, 255, 0.2);\n$white-transparent-300: rgba(255, 255, 255, 0.3);\n$white-transparent-400: rgba(255, 255, 255, 0.4);\n$white-transparent-500: rgba(255, 255, 255, 0.5);\n$white-transparent-600: rgba(255, 255, 255, 0.6);\n$white-transparent-700: rgba(255, 255, 255, 0.7);\n$white-transparent-800: rgba(255, 255, 255, 0.8);\n$white-transparent-900: rgba(255, 255, 255, 0.9);\n\n// === Neutral Scale (Grey) ===\n$grey-50: #f9fafb;\n$grey-100: #f3f4f6;\n$grey-200: #e5e7eb;\n$grey-300: #d1d5db;\n$grey-400: #9ca3af;\n$grey-500: #6b7280;\n$grey-600: #4b5563;\n$grey-700: #374151;\n$grey-800: #1f2937;\n$grey-900: #111827;\n\n// === Primary Scale (Blue) ===\n$blue-50: #eff6ff;\n$blue-100: #dbeafe;\n$blue-200: #bfdbfe;\n$blue-300: #93c5fd;\n$blue-400: #60a5fa;\n$blue-500: #3b82f6;\n$blue-600: #2563eb; // Main\n$blue-700: #1d4ed8; // Hover\n$blue-800: #1e40af;\n$blue-900: #1e3a8a;\n\n// === Secondary Scale (Indigo) ===\n$indigo-50: #eef2ff;\n$indigo-100: #e0e7ff;\n$indigo-200: #c7d2fe;\n$indigo-300: #a5b4fc;\n$indigo-400: #818cf8;\n$indigo-500: #6366f1;\n$indigo-600: #4f46e5; // Main\n$indigo-700: #4338ca; // Hover\n\n// === Error Scale (Red) ===\n$red-50: #fef2f2;\n$red-100: #fee2e2;\n$red-200: #fecaca;\n$red-300: #fca5a5;\n$red-400: #f87171;\n$red-500: #ef4444;\n$red-600: #dc2626; // Main\n$red-700: #b91c1c; // Hover\n\n// === Success Scale (Green) ===\n$green-50: #f0fdf4;\n$green-100: #dcfce7;\n$green-200: #bbf7d0;\n$green-300: #86efac;\n$green-400: #4ade80;\n$green-500: #22c55e;\n$green-600: #16a34a; // Main\n$green-700: #15803d; // Hover\n\n// === Warning Scale (Amber) ===\n$amber-50: #fffbeb;\n$amber-100: #fef3c7;\n$amber-200: #fde68a;\n$amber-300: #fcd34d;\n$amber-400: #fbbf24;\n$amber-500: #f59e0b;\n$amber-600: #d97706; // Main\n$amber-700: #b45309; // Hover\n\n// === Semantic Tokens ===\n$color-default: $grey-800;\n$color-default-hover: $grey-900;\n$color-default-disabled: rgba($color-default, 0.5);\n\n$color-primary: $blue-600;\n$color-primary-hover: $blue-700;\n$color-primary-disabled: rgba($color-primary, 0.5);\n\n$color-secondary: $indigo-600;\n$color-secondary-hover: $indigo-700;\n$color-secondary-disabled: rgba($color-secondary, 0.5);\n\n$color-error: $red-600;\n$color-error-hover: $red-700;\n$color-error-disabled: rgba($color-error, 0.5);\n\n$color-success: $green-600;\n$color-success-hover: $green-700;\n$color-success-disabled: rgba($color-success, 0.5);\n\n$color-warning: $amber-600;\n$color-warning-hover: $amber-700;\n$color-warning-disabled: rgba($color-warning, 0.5);\n\n$text-color-white: $white;\n$text-color-black: $black;\n$text-color-white-disabled: rgba($white, 0.5);\n$text-color-black-disabled: rgba($black, 0.5);\n\n// === Shadows ===\n$shadow-sm: 0 1px 2px 0 rgba($black, 0.05);\n$shadow-md:\n  0 4px 6px -1px rgba($black, 0.1),\n  0 2px 4px -1px rgba($black, 0.06);\n$shadow-lg:\n  0 10px 15px -3px rgba($black, 0.1),\n  0 4px 6px -2px rgba($black, 0.05);\n\n// === Font families ===\n$font-family-sans: \"Inter\", sans-serif;\n$font-family-serif: \"Georgia\", serif;\n$font-family-mono: \"Fira Code\", monospace;\n\n// === Font weights ===\n$font-weight-regular: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n\n// === Line heights ===\n$line-height-tight: 1.2;\n$line-height-snug: 1.375;\n$line-height-normal: 1.5;\n$line-height-loose: 1.625;\n\n// === Font Sizes — Semantic Tokens ===\n\n// === Titles ===\n$font-size-hero: 3rem; // 48px\n$font-size-title-1: 2.25rem; // 36px\n$font-size-title-2: 1.875rem; // 30px\n$font-size-title-3: 1.5rem; // 24px\n\n// === Subtitles ===\n$font-size-subtitle-1: 1.25rem; // 20px\n$font-size-subtitle-2: 1.125rem; // 18px\n\n// === Body text ===\n$font-size-body-lg: 1rem; // 16px\n$font-size-body-md: 0.9375rem; // 15px\n$font-size-body-sm: 0.875rem; // 14px\n\n// === Captions / Descriptions ===\n$font-size-caption: 0.75rem; // 12px\n$font-size-footnote: 0.6875rem; // 11px\n\n// === Buttons ===\n$font-size-button-lg: 1rem; // 16px\n$font-size-button-md: 0.875rem; // 14px\n$font-size-button-sm: 0.75rem; // 12px\n\n// === Animations ===\n\n$cubic-bezier-primary: cubic-bezier(0.55, -0.19, 0.59, 0.95);\n$cubic-bezier-secondary: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n"],"mappings":";AAEA,CAAA;AACE,iBAAA;AACA,SCDM;ADEN,aAAA;AACA,eAAA;AACA,WAAA,KAAA;AACA,cAAA;AACA,cAAA,IAAA,MAAA;AACA,SAAA;;AAEA,CAVF,eAUE;AACE,oBC0BO;;ADvBT,CAAA;AACE,SCdI;;ADiBN,CAAA;AACE,SAAA,KAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;;;;AEnBJ,CAAA;AACE,SAAA;;AAEA,CAAA;AACE,SAAA;;AAIA,CAAA;AACE,mBAAA,KAAA;AACA,UAAA;AACA,QAAA;AACA,YAAA;AACA,OAAA;AACA,SAAA;AACA,WAAA;;AAGF,CAAA;AACE,eAAA;AACA,oBCgBK;ADfL,iBAAA;AACA,cACE,EAAA,IAAA,IAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,KAAA,KAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA;AAEF,WAAA;AACA,kBAAA;AACA,WAAA;AACA,aAAA;AACA,WAAA;AACA,YAAA;AACA,cACE,UAAA,MAAA,aAAA,KAAA,EAAA,KAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,MAAA;AAEF,SAAA;AACA,WAAA;;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+interface IDropdownOption {
+    children: string;
+    value: string;
+    onChange?: () => void;
+    selectedValue?: string;
+    description?: string;
+    icon?: string;
+    disabled?: boolean;
+}
+declare const DropdownOption: React.FC<IDropdownOption>;
+
+interface IDropdown {
+    children: React.ReactElement<IDropdownOption> | React.ReactElement<IDropdownOption>[];
+    value: string;
+    appearance?: "solid" | "outline" | "outline-dashed" | "no-outline" | "glowing";
+    onChange?: (newValue: string) => void;
+    initiallyOpened?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const Dropdown: React.FC<IDropdown>;
+
+export { Dropdown, DropdownOption };

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+interface IDropdownOption {
+    children: string;
+    value: string;
+    onChange?: () => void;
+    selectedValue?: string;
+    description?: string;
+    icon?: string;
+    disabled?: boolean;
+}
+declare const DropdownOption: React.FC<IDropdownOption>;
+
+interface IDropdown {
+    children: React.ReactElement<IDropdownOption> | React.ReactElement<IDropdownOption>[];
+    value: string;
+    appearance?: "solid" | "outline" | "outline-dashed" | "no-outline" | "glowing";
+    onChange?: (newValue: string) => void;
+    initiallyOpened?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const Dropdown: React.FC<IDropdown>;
+
+export { Dropdown, DropdownOption };

package/dist/index.js

@@ -1 +1,222 @@
-export { Dropdown, DropdownOption } from "./components";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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"));
+
+// components/DropdownOption/DropdownOption.module.scss
+var DropdownOption_module_default = {};
+
+// components/DropdownOption/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DropdownOption = ({
+  children,
+  // value,
+  // selectedValue,
+  onChange,
+  // icon,
+  description
+  // disabled,
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: DropdownOption_module_default["dropdown-option"], onClick: onChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: DropdownOption_module_default["dropdown-option__content"], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: DropdownOption_module_default["dropdown-option__title"], children }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: DropdownOption_module_default["dropdown-option__description"], children: description })
+  ] }) });
+};
+
+// components/Dropdown/index.tsx
+var import_framer_motion = require("framer-motion");
+var import_button = require("@aristobyte-ui/button");
+
+// utils/Portal.tsx
+var React = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var Portal = ({
+  children
+}) => {
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted || typeof window === "undefined") return null;
+  return (0, import_react_dom.createPortal)(children, document.body);
+};
+
+// components/Dropdown/Dropdown.module.scss
+var Dropdown_module_default = {};
+
+// components/Dropdown/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react = require("react");
+var Dropdown = ({
+  children,
+  value,
+  onChange,
+  appearance = "outline",
+  placeholder = "Select",
+  className = "",
+  initiallyOpened = false,
+  disabled = false
+}) => {
+  const [isOpened, setIsOpened] = React2.useState(initiallyOpened);
+  const [selected, setSelected] = React2.useState(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);
+    setSelected(currentRadioValue);
+    setIsOpened(false);
+  };
+  const handleToggle = () => {
+    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);
+    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_module_default["dropdown"]} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_button.Button,
+      __spreadProps(__spreadValues({}, { ref: buttonRef }), {
+        className: Dropdown_module_default["dropdown__button"],
+        appearance,
+        onClick: handleToggle,
+        disabled,
+        children: placeholder
+      })
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_framer_motion.AnimatePresence, { children: isOpened && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: Dropdown_module_default["dropdown__box"], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_framer_motion.motion.div,
+        {
+          className: Dropdown_module_default["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_module_default["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,
+            __spreadProps(__spreadValues({}, props), {
+              key: `${props.value}-${uniqueId}`,
+              selectedValue: 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

@@ -0,0 +1 @@
+{"version":3,"sources":["../index.ts","../components/Dropdown/index.tsx","../components/DropdownOption/DropdownOption.module.scss","../components/DropdownOption/index.tsx","../utils/Portal.tsx","../components/Dropdown/Dropdown.module.scss"],"sourcesContent":["export { Dropdown, DropdownOption } from \"./components\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { DropdownOption, type IDropdownOption } from \"../DropdownOption\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\n\nimport { Button } from \"@aristobyte-ui/button\";\nimport { Portal } from \"../../utils/Portal\";\n\nimport styles from \"./Dropdown.module.scss\";\n\nexport interface IDropdown {\n  children:\n    | React.ReactElement<IDropdownOption>\n    | React.ReactElement<IDropdownOption>[];\n  value: string;\n  appearance?:\n    | \"solid\"\n    | \"outline\"\n    | \"outline-dashed\"\n    | \"no-outline\"\n    | \"glowing\";\n  onChange?: (newValue: string) => void;\n  initiallyOpened?: boolean;\n  placeholder?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\ntype PositionType = {\n  top: 0;\n  left: 0;\n  width: 0;\n};\n\nexport const Dropdown: React.FC<IDropdown> = ({\n  children,\n  value,\n  onChange,\n  appearance = \"outline\",\n  placeholder = \"Select\",\n  className = \"\",\n  initiallyOpened = false,\n  disabled = false,\n}) => {\n  const [isOpened, setIsOpened] = React.useState<boolean>(initiallyOpened);\n  const [selected, setSelected] = React.useState<string>(value);\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    setSelected(currentRadioValue);\n    setIsOpened(false);\n  };\n\n  const handleToggle = () => {\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    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={`${styles[\"dropdown\"]} ${className}`}>\n        <Button\n          {...{ ref: buttonRef }}\n          className={styles[\"dropdown__button\"]}\n          appearance={appearance}\n          onClick={handleToggle}\n          disabled={disabled}\n        >\n          {placeholder}\n        </Button>\n      </div>\n\n      <Portal>\n        <AnimatePresence>\n          {isOpened && (\n            <div className={styles[\"dropdown__box\"]}>\n              <motion.div\n                className={styles[\"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={styles[\"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                    key={`${props.value}-${uniqueId}`}\n                    selectedValue={selected}\n                    onChange={() => handleChange(props.value)}\n                  />\n                ))}\n              </motion.div>\n            </div>\n          )}\n        </AnimatePresence>\n      </Portal>\n    </>\n  );\n};\n",".dropdown-option {\n  border-radius: 8px;\n  color: #ffffff;\n  font-size: 14px;\n  font-weight: 500;\n  padding: 10px 16px;\n  text-align: left;\n  transition: all 120ms ease-out;\n  width: 100%;\n}\n.dropdown-option:hover {\n  background-color: #111827;\n}\n.dropdown-option__title {\n  color: #ffffff;\n}\n.dropdown-option__description {\n  color: rgba(255, 255, 255, 0.6);\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL2RodW5hbnlhbi9hcmlzdG9ieXRlL2dpdGh1Yi9hcmlzdG9ieXRlLXVpL3BhY2thZ2VzL2Ryb3Bkb3duL2NvbXBvbmVudHMvRHJvcGRvd25PcHRpb24iLCJzb3VyY2VzIjpbIkRyb3Bkb3duT3B0aW9uLm1vZHVsZS5zY3NzIiwiLi4vLi4vc3R5bGVzL19zZXR0aW5ncy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBO0VBQ0U7RUFDQSxPQ0RNO0VERU47RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUVBO0VBQ0Usa0JDMEJPOztBRHZCVDtFQUNFLE9DZEk7O0FEaUJOO0VBQ0UiLCJzb3VyY2VzQ29udGVudCI6WyJAdXNlIFwiLi4vLi4vc3R5bGVzL3NldHRpbmdzXCIgYXMgKjtcblxuLmRyb3Bkb3duLW9wdGlvbiB7XG4gIGJvcmRlci1yYWRpdXM6IDhweDsgLy9UT0RPOiBjaGFuZ2UgdG8gZHluYW1pY1xuICBjb2xvcjogJHdoaXRlO1xuICBmb250LXNpemU6IDE0cHg7XG4gIGZvbnQtd2VpZ2h0OiA1MDA7XG4gIHBhZGRpbmc6IDEwcHggMTZweDtcbiAgdGV4dC1hbGlnbjogbGVmdDtcbiAgdHJhbnNpdGlvbjogYWxsIDEyMG1zIGVhc2Utb3V0O1xuICB3aWR0aDogMTAwJTtcblxuICAmOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3ItZGVmYXVsdC1ob3ZlcjtcbiAgfVxuXG4gICZfX3RpdGxlIHtcbiAgICBjb2xvcjogJHdoaXRlO1xuICB9XG5cbiAgJl9fZGVzY3JpcHRpb24ge1xuICAgIGNvbG9yOiByZ2JhKCR3aGl0ZSwgMC42KTtcbiAgfVxufVxuIiwiLy8gPT09IERlc2lnbiBUb2tlbnMg4oCUIENvbG9yIFBhbGV0dGUgPT09XG5cbi8vIEJhc2VcbiR3aGl0ZTogI2ZmZmZmZjtcbiRibGFjazogIzAwMDAwMDtcbiR0cmFuc3BhcmVudDogdHJhbnNwYXJlbnQ7XG5cbi8vID09PSBCbGFjayBUcmFuc3BhcmVudCBTY2FsZSA9PT1cbiRibGFjay10cmFuc3BhcmVudC0xMDA6IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiRibGFjay10cmFuc3BhcmVudC0yMDA6IHJnYmEoMCwgMCwgMCwgMC4yKTtcbiRibGFjay10cmFuc3BhcmVudC0zMDA6IHJnYmEoMCwgMCwgMCwgMC4zKTtcbiRibGFjay10cmFuc3BhcmVudC00MDA6IHJnYmEoMCwgMCwgMCwgMC40KTtcbiRibGFjay10cmFuc3BhcmVudC01MDA6IHJnYmEoMCwgMCwgMCwgMC41KTtcbiRibGFjay10cmFuc3BhcmVudC02MDA6IHJnYmEoMCwgMCwgMCwgMC42KTtcbiRibGFjay10cmFuc3BhcmVudC03MDA6IHJnYmEoMCwgMCwgMCwgMC43KTtcbiRibGFjay10cmFuc3BhcmVudC04MDA6IHJnYmEoMCwgMCwgMCwgMC44KTtcbiRibGFjay10cmFuc3BhcmVudC05MDA6IHJnYmEoMCwgMCwgMCwgMC45KTtcblxuLy8gPT09IEJsYWNrIFRyYW5zcGFyZW50IFNjYWxlID09PVxuJHdoaXRlLXRyYW5zcGFyZW50LTEwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTIwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjIpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTMwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjMpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTQwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjQpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTUwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjUpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTYwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjYpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTcwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjcpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTgwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjgpO1xuJHdoaXRlLXRyYW5zcGFyZW50LTkwMDogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjkpO1xuXG4vLyA9PT0gTmV1dHJhbCBTY2FsZSAoR3JleSkgPT09XG4kZ3JleS01MDogI2Y5ZmFmYjtcbiRncmV5LTEwMDogI2YzZjRmNjtcbiRncmV5LTIwMDogI2U1ZTdlYjtcbiRncmV5LTMwMDogI2QxZDVkYjtcbiRncmV5LTQwMDogIzljYTNhZjtcbiRncmV5LTUwMDogIzZiNzI4MDtcbiRncmV5LTYwMDogIzRiNTU2MztcbiRncmV5LTcwMDogIzM3NDE1MTtcbiRncmV5LTgwMDogIzFmMjkzNztcbiRncmV5LTkwMDogIzExMTgyNztcblxuLy8gPT09IFByaW1hcnkgU2NhbGUgKEJsdWUpID09PVxuJGJsdWUtNTA6ICNlZmY2ZmY7XG4kYmx1ZS0xMDA6ICNkYmVhZmU7XG4kYmx1ZS0yMDA6ICNiZmRiZmU7XG4kYmx1ZS0zMDA6ICM5M2M1ZmQ7XG4kYmx1ZS00MDA6ICM2MGE1ZmE7XG4kYmx1ZS01MDA6ICMzYjgyZjY7XG4kYmx1ZS02MDA6ICMyNTYzZWI7IC8vIE1haW5cbiRibHVlLTcwMDogIzFkNGVkODsgLy8gSG92ZXJcbiRibHVlLTgwMDogIzFlNDBhZjtcbiRibHVlLTkwMDogIzFlM2E4YTtcblxuLy8gPT09IFNlY29uZGFyeSBTY2FsZSAoSW5kaWdvKSA9PT1cbiRpbmRpZ28tNTA6ICNlZWYyZmY7XG4kaW5kaWdvLTEwMDogI2UwZTdmZjtcbiRpbmRpZ28tMjAwOiAjYzdkMmZlO1xuJGluZGlnby0zMDA6ICNhNWI0ZmM7XG4kaW5kaWdvLTQwMDogIzgxOGNmODtcbiRpbmRpZ28tNTAwOiAjNjM2NmYxO1xuJGluZGlnby02MDA6ICM0ZjQ2ZTU7IC8vIE1haW5cbiRpbmRpZ28tNzAwOiAjNDMzOGNhOyAvLyBIb3ZlclxuXG4vLyA9PT0gRXJyb3IgU2NhbGUgKFJlZCkgPT09XG4kcmVkLTUwOiAjZmVmMmYyO1xuJHJlZC0xMDA6ICNmZWUyZTI7XG4kcmVkLTIwMDogI2ZlY2FjYTtcbiRyZWQtMzAwOiAjZmNhNWE1O1xuJHJlZC00MDA6ICNmODcxNzE7XG4kcmVkLTUwMDogI2VmNDQ0NDtcbiRyZWQtNjAwOiAjZGMyNjI2OyAvLyBNYWluXG4kcmVkLTcwMDogI2I5MWMxYzsgLy8gSG92ZXJcblxuLy8gPT09IFN1Y2Nlc3MgU2NhbGUgKEdyZWVuKSA9PT1cbiRncmVlbi01MDogI2YwZmRmNDtcbiRncmVlbi0xMDA6ICNkY2ZjZTc7XG4kZ3JlZW4tMjAwOiAjYmJmN2QwO1xuJGdyZWVuLTMwMDogIzg2ZWZhYztcbiRncmVlbi00MDA6ICM0YWRlODA7XG4kZ3JlZW4tNTAwOiAjMjJjNTVlO1xuJGdyZWVuLTYwMDogIzE2YTM0YTsgLy8gTWFpblxuJGdyZWVuLTcwMDogIzE1ODAzZDsgLy8gSG92ZXJcblxuLy8gPT09IFdhcm5pbmcgU2NhbGUgKEFtYmVyKSA9PT1cbiRhbWJlci01MDogI2ZmZmJlYjtcbiRhbWJlci0xMDA6ICNmZWYzYzc7XG4kYW1iZXItMjAwOiAjZmRlNjhhO1xuJGFtYmVyLTMwMDogI2ZjZDM0ZDtcbiRhbWJlci00MDA6ICNmYmJmMjQ7XG4kYW1iZXItNTAwOiAjZjU5ZTBiO1xuJGFtYmVyLTYwMDogI2Q5NzcwNjsgLy8gTWFpblxuJGFtYmVyLTcwMDogI2I0NTMwOTsgLy8gSG92ZXJcblxuLy8gPT09IFNlbWFudGljIFRva2VucyA9PT1cbiRjb2xvci1kZWZhdWx0OiAkZ3JleS04MDA7XG4kY29sb3ItZGVmYXVsdC1ob3ZlcjogJGdyZXktOTAwO1xuJGNvbG9yLWRlZmF1bHQtZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLWRlZmF1bHQsIDAuNSk7XG5cbiRjb2xvci1wcmltYXJ5OiAkYmx1ZS02MDA7XG4kY29sb3ItcHJpbWFyeS1ob3ZlcjogJGJsdWUtNzAwO1xuJGNvbG9yLXByaW1hcnktZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXByaW1hcnksIDAuNSk7XG5cbiRjb2xvci1zZWNvbmRhcnk6ICRpbmRpZ28tNjAwO1xuJGNvbG9yLXNlY29uZGFyeS1ob3ZlcjogJGluZGlnby03MDA7XG4kY29sb3Itc2Vjb25kYXJ5LWRpc2FibGVkOiByZ2JhKCRjb2xvci1zZWNvbmRhcnksIDAuNSk7XG5cbiRjb2xvci1lcnJvcjogJHJlZC02MDA7XG4kY29sb3ItZXJyb3ItaG92ZXI6ICRyZWQtNzAwO1xuJGNvbG9yLWVycm9yLWRpc2FibGVkOiByZ2JhKCRjb2xvci1lcnJvciwgMC41KTtcblxuJGNvbG9yLXN1Y2Nlc3M6ICRncmVlbi02MDA7XG4kY29sb3Itc3VjY2Vzcy1ob3ZlcjogJGdyZWVuLTcwMDtcbiRjb2xvci1zdWNjZXNzLWRpc2FibGVkOiByZ2JhKCRjb2xvci1zdWNjZXNzLCAwLjUpO1xuXG4kY29sb3Itd2FybmluZzogJGFtYmVyLTYwMDtcbiRjb2xvci13YXJuaW5nLWhvdmVyOiAkYW1iZXItNzAwO1xuJGNvbG9yLXdhcm5pbmctZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXdhcm5pbmcsIDAuNSk7XG5cbiR0ZXh0LWNvbG9yLXdoaXRlOiAkd2hpdGU7XG4kdGV4dC1jb2xvci1ibGFjazogJGJsYWNrO1xuJHRleHQtY29sb3Itd2hpdGUtZGlzYWJsZWQ6IHJnYmEoJHdoaXRlLCAwLjUpO1xuJHRleHQtY29sb3ItYmxhY2stZGlzYWJsZWQ6IHJnYmEoJGJsYWNrLCAwLjUpO1xuXG4vLyA9PT0gU2hhZG93cyA9PT1cbiRzaGFkb3ctc206IDAgMXB4IDJweCAwIHJnYmEoJGJsYWNrLCAwLjA1KTtcbiRzaGFkb3ctbWQ6XG4gIDAgNHB4IDZweCAtMXB4IHJnYmEoJGJsYWNrLCAwLjEpLFxuICAwIDJweCA0cHggLTFweCByZ2JhKCRibGFjaywgMC4wNik7XG4kc2hhZG93LWxnOlxuICAwIDEwcHggMTVweCAtM3B4IHJnYmEoJGJsYWNrLCAwLjEpLFxuICAwIDRweCA2cHggLTJweCByZ2JhKCRibGFjaywgMC4wNSk7XG5cbi8vID09PSBGb250IGZhbWlsaWVzID09PVxuJGZvbnQtZmFtaWx5LXNhbnM6IFwiSW50ZXJcIiwgc2Fucy1zZXJpZjtcbiRmb250LWZhbWlseS1zZXJpZjogXCJHZW9yZ2lhXCIsIHNlcmlmO1xuJGZvbnQtZmFtaWx5LW1vbm86IFwiRmlyYSBDb2RlXCIsIG1vbm9zcGFjZTtcblxuLy8gPT09IEZvbnQgd2VpZ2h0cyA9PT1cbiRmb250LXdlaWdodC1yZWd1bGFyOiA0MDA7XG4kZm9udC13ZWlnaHQtbWVkaXVtOiA1MDA7XG4kZm9udC13ZWlnaHQtc2VtaWJvbGQ6IDYwMDtcbiRmb250LXdlaWdodC1ib2xkOiA3MDA7XG5cbi8vID09PSBMaW5lIGhlaWdodHMgPT09XG4kbGluZS1oZWlnaHQtdGlnaHQ6IDEuMjtcbiRsaW5lLWhlaWdodC1zbnVnOiAxLjM3NTtcbiRsaW5lLWhlaWdodC1ub3JtYWw6IDEuNTtcbiRsaW5lLWhlaWdodC1sb29zZTogMS42MjU7XG5cbi8vID09PSBGb250IFNpemVzIOKAlCBTZW1hbnRpYyBUb2tlbnMgPT09XG5cbi8vID09PSBUaXRsZXMgPT09XG4kZm9udC1zaXplLWhlcm86IDNyZW07IC8vIDQ4cHhcbiRmb250LXNpemUtdGl0bGUtMTogMi4yNXJlbTsgLy8gMzZweFxuJGZvbnQtc2l6ZS10aXRsZS0yOiAxLjg3NXJlbTsgLy8gMzBweFxuJGZvbnQtc2l6ZS10aXRsZS0zOiAxLjVyZW07IC8vIDI0cHhcblxuLy8gPT09IFN1YnRpdGxlcyA9PT1cbiRmb250LXNpemUtc3VidGl0bGUtMTogMS4yNXJlbTsgLy8gMjBweFxuJGZvbnQtc2l6ZS1zdWJ0aXRsZS0yOiAxLjEyNXJlbTsgLy8gMThweFxuXG4vLyA9PT0gQm9keSB0ZXh0ID09PVxuJGZvbnQtc2l6ZS1ib2R5LWxnOiAxcmVtOyAvLyAxNnB4XG4kZm9udC1zaXplLWJvZHktbWQ6IDAuOTM3NXJlbTsgLy8gMTVweFxuJGZvbnQtc2l6ZS1ib2R5LXNtOiAwLjg3NXJlbTsgLy8gMTRweFxuXG4vLyA9PT0gQ2FwdGlvbnMgLyBEZXNjcmlwdGlvbnMgPT09XG4kZm9udC1zaXplLWNhcHRpb246IDAuNzVyZW07IC8vIDEycHhcbiRmb250LXNpemUtZm9vdG5vdGU6IDAuNjg3NXJlbTsgLy8gMTFweFxuXG4vLyA9PT0gQnV0dG9ucyA9PT1cbiRmb250LXNpemUtYnV0dG9uLWxnOiAxcmVtOyAvLyAxNnB4XG4kZm9udC1zaXplLWJ1dHRvbi1tZDogMC44NzVyZW07IC8vIDE0cHhcbiRmb250LXNpemUtYnV0dG9uLXNtOiAwLjc1cmVtOyAvLyAxMnB4XG5cbi8vID09PSBBbmltYXRpb25zID09PVxuXG4kY3ViaWMtYmV6aWVyLXByaW1hcnk6IGN1YmljLWJlemllcigwLjU1LCAtMC4xOSwgMC41OSwgMC45NSk7XG4kY3ViaWMtYmV6aWVyLXNlY29uZGFyeTogY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMiwgMS4yNzUpO1xuIl19 */","import * as React from \"react\";\n\nimport styles from \"./DropdownOption.module.scss\";\n\nexport interface IDropdownOption {\n  children: string;\n  value: string;\n  onChange?: () => void;\n  selectedValue?: string;\n  description?: string;\n  icon?: string;\n  disabled?: boolean;\n}\n\nexport const DropdownOption: React.FC<IDropdownOption> = ({\n  children,\n  // value,\n  // selectedValue,\n  onChange,\n  // icon,\n  description,\n  // disabled,\n}) => {\n  // const isSelected = selectedValue === value;\n  return (\n    <button className={styles[\"dropdown-option\"]} onClick={onChange}>\n      <div className={styles[\"dropdown-option__content\"]}>\n        <h3 className={styles[\"dropdown-option__title\"]}>{children}</h3>\n        <p className={styles[\"dropdown-option__description\"]}>{description}</p>\n      </div>\n    </button>\n  );\n};\n","\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport const Portal: React.FC<{ children: React.ReactNode }> = ({\n  children,\n}) => {\n  const [mounted, setMounted] = React.useState(false);\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted || typeof window === \"undefined\") return null;\n  return createPortal(children, document.body);\n};\n",".dropdown {\n  width: max-content;\n}\n.dropdown__button {\n  width: max-content;\n}\n.dropdown__box-overlay {\n  backdrop-filter: blur(12px);\n  height: 100%;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 99999999999;\n}\n.dropdown__box-options {\n  align-items: flex-start;\n  background-color: #1f2937;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.1);\n  display: flex;\n  flex-direction: column;\n  opacity: 1;\n  min-width: 300px;\n  padding: 4px;\n  position: absolute;\n  transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 150ms ease;\n  width: 100%;\n  z-index: 99999999999;\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL2RodW5hbnlhbi9hcmlzdG9ieXRlL2dpdGh1Yi9hcmlzdG9ieXRlLXVpL3BhY2thZ2VzL2Ryb3Bkb3duL2NvbXBvbmVudHMvRHJvcGRvd24iLCJzb3VyY2VzIjpbIkRyb3Bkb3duLm1vZHVsZS5zY3NzIiwiLi4vLi4vc3R5bGVzL19zZXR0aW5ncy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBO0VBQ0U7O0FBRUE7RUFDRTs7QUFJQTtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUdGO0VBQ0U7RUFDQSxrQkNnQks7RURmTDtFQUNBLFlBQ0U7RUFFRjtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQSxZQUNFO0VBRUY7RUFDQSIsInNvdXJjZXNDb250ZW50IjpbIkB1c2UgXCIuLi8uLi9zdHlsZXMvc2V0dGluZ3NcIiBhcyAqO1xuXG4uZHJvcGRvd24ge1xuICB3aWR0aDogbWF4LWNvbnRlbnQ7XG5cbiAgJl9fYnV0dG9uIHtcbiAgICB3aWR0aDogbWF4LWNvbnRlbnQ7XG4gIH1cblxuICAmX19ib3gge1xuICAgICYtb3ZlcmxheSB7XG4gICAgICBiYWNrZHJvcC1maWx0ZXI6IGJsdXIoMTJweCk7XG4gICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICBsZWZ0OiAwO1xuICAgICAgcG9zaXRpb246IGZpeGVkO1xuICAgICAgdG9wOiAwO1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICB6LWluZGV4OiA5OTk5OTk5OTk5OTtcbiAgICB9XG5cbiAgICAmLW9wdGlvbnMge1xuICAgICAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkY29sb3ItZGVmYXVsdDtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDhweDsgLy9UT0RPOiBjaGFuZ2UgdG8gZHluYW1pY1xuICAgICAgYm94LXNoYWRvdzpcbiAgICAgICAgMCA0cHggNnB4IHJnYmEoMCwgMCwgMCwgMC4wNCksXG4gICAgICAgIDAgMTJweCAyNHB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAgb3BhY2l0eTogMTtcbiAgICAgIG1pbi13aWR0aDogMzAwcHg7XG4gICAgICBwYWRkaW5nOiA0cHg7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0cmFuc2l0aW9uOlxuICAgICAgICB0cmFuc2Zvcm0gMjAwbXMgJGN1YmljLWJlemllci1zZWNvbmRhcnksXG4gICAgICAgIG9wYWNpdHkgMTUwbXMgZWFzZTtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgei1pbmRleDogOTk5OTk5OTk5OTk7XG4gICAgfVxuICB9XG59XG4iLCIvLyA9PT0gRGVzaWduIFRva2VucyDigJQgQ29sb3IgUGFsZXR0ZSA9PT1cblxuLy8gQmFzZVxuJHdoaXRlOiAjZmZmZmZmO1xuJGJsYWNrOiAjMDAwMDAwO1xuJHRyYW5zcGFyZW50OiB0cmFuc3BhcmVudDtcblxuLy8gPT09IEJsYWNrIFRyYW5zcGFyZW50IFNjYWxlID09PVxuJGJsYWNrLXRyYW5zcGFyZW50LTEwMDogcmdiYSgwLCAwLCAwLCAwLjEpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTIwMDogcmdiYSgwLCAwLCAwLCAwLjIpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTMwMDogcmdiYSgwLCAwLCAwLCAwLjMpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTQwMDogcmdiYSgwLCAwLCAwLCAwLjQpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTUwMDogcmdiYSgwLCAwLCAwLCAwLjUpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTYwMDogcmdiYSgwLCAwLCAwLCAwLjYpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTcwMDogcmdiYSgwLCAwLCAwLCAwLjcpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTgwMDogcmdiYSgwLCAwLCAwLCAwLjgpO1xuJGJsYWNrLXRyYW5zcGFyZW50LTkwMDogcmdiYSgwLCAwLCAwLCAwLjkpO1xuXG4vLyA9PT0gQmxhY2sgVHJhbnNwYXJlbnQgU2NhbGUgPT09XG4kd2hpdGUtdHJhbnNwYXJlbnQtMTAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMSk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtMjAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMik7XG4kd2hpdGUtdHJhbnNwYXJlbnQtMzAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMyk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtNDAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNCk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtNTAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNSk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtNjAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNik7XG4kd2hpdGUtdHJhbnNwYXJlbnQtNzAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNyk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtODAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuOCk7XG4kd2hpdGUtdHJhbnNwYXJlbnQtOTAwOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuOSk7XG5cbi8vID09PSBOZXV0cmFsIFNjYWxlIChHcmV5KSA9PT1cbiRncmV5LTUwOiAjZjlmYWZiO1xuJGdyZXktMTAwOiAjZjNmNGY2O1xuJGdyZXktMjAwOiAjZTVlN2ViO1xuJGdyZXktMzAwOiAjZDFkNWRiO1xuJGdyZXktNDAwOiAjOWNhM2FmO1xuJGdyZXktNTAwOiAjNmI3MjgwO1xuJGdyZXktNjAwOiAjNGI1NTYzO1xuJGdyZXktNzAwOiAjMzc0MTUxO1xuJGdyZXktODAwOiAjMWYyOTM3O1xuJGdyZXktOTAwOiAjMTExODI3O1xuXG4vLyA9PT0gUHJpbWFyeSBTY2FsZSAoQmx1ZSkgPT09XG4kYmx1ZS01MDogI2VmZjZmZjtcbiRibHVlLTEwMDogI2RiZWFmZTtcbiRibHVlLTIwMDogI2JmZGJmZTtcbiRibHVlLTMwMDogIzkzYzVmZDtcbiRibHVlLTQwMDogIzYwYTVmYTtcbiRibHVlLTUwMDogIzNiODJmNjtcbiRibHVlLTYwMDogIzI1NjNlYjsgLy8gTWFpblxuJGJsdWUtNzAwOiAjMWQ0ZWQ4OyAvLyBIb3ZlclxuJGJsdWUtODAwOiAjMWU0MGFmO1xuJGJsdWUtOTAwOiAjMWUzYThhO1xuXG4vLyA9PT0gU2Vjb25kYXJ5IFNjYWxlIChJbmRpZ28pID09PVxuJGluZGlnby01MDogI2VlZjJmZjtcbiRpbmRpZ28tMTAwOiAjZTBlN2ZmO1xuJGluZGlnby0yMDA6ICNjN2QyZmU7XG4kaW5kaWdvLTMwMDogI2E1YjRmYztcbiRpbmRpZ28tNDAwOiAjODE4Y2Y4O1xuJGluZGlnby01MDA6ICM2MzY2ZjE7XG4kaW5kaWdvLTYwMDogIzRmNDZlNTsgLy8gTWFpblxuJGluZGlnby03MDA6ICM0MzM4Y2E7IC8vIEhvdmVyXG5cbi8vID09PSBFcnJvciBTY2FsZSAoUmVkKSA9PT1cbiRyZWQtNTA6ICNmZWYyZjI7XG4kcmVkLTEwMDogI2ZlZTJlMjtcbiRyZWQtMjAwOiAjZmVjYWNhO1xuJHJlZC0zMDA6ICNmY2E1YTU7XG4kcmVkLTQwMDogI2Y4NzE3MTtcbiRyZWQtNTAwOiAjZWY0NDQ0O1xuJHJlZC02MDA6ICNkYzI2MjY7IC8vIE1haW5cbiRyZWQtNzAwOiAjYjkxYzFjOyAvLyBIb3ZlclxuXG4vLyA9PT0gU3VjY2VzcyBTY2FsZSAoR3JlZW4pID09PVxuJGdyZWVuLTUwOiAjZjBmZGY0O1xuJGdyZWVuLTEwMDogI2RjZmNlNztcbiRncmVlbi0yMDA6ICNiYmY3ZDA7XG4kZ3JlZW4tMzAwOiAjODZlZmFjO1xuJGdyZWVuLTQwMDogIzRhZGU4MDtcbiRncmVlbi01MDA6ICMyMmM1NWU7XG4kZ3JlZW4tNjAwOiAjMTZhMzRhOyAvLyBNYWluXG4kZ3JlZW4tNzAwOiAjMTU4MDNkOyAvLyBIb3ZlclxuXG4vLyA9PT0gV2FybmluZyBTY2FsZSAoQW1iZXIpID09PVxuJGFtYmVyLTUwOiAjZmZmYmViO1xuJGFtYmVyLTEwMDogI2ZlZjNjNztcbiRhbWJlci0yMDA6ICNmZGU2OGE7XG4kYW1iZXItMzAwOiAjZmNkMzRkO1xuJGFtYmVyLTQwMDogI2ZiYmYyNDtcbiRhbWJlci01MDA6ICNmNTllMGI7XG4kYW1iZXItNjAwOiAjZDk3NzA2OyAvLyBNYWluXG4kYW1iZXItNzAwOiAjYjQ1MzA5OyAvLyBIb3ZlclxuXG4vLyA9PT0gU2VtYW50aWMgVG9rZW5zID09PVxuJGNvbG9yLWRlZmF1bHQ6ICRncmV5LTgwMDtcbiRjb2xvci1kZWZhdWx0LWhvdmVyOiAkZ3JleS05MDA7XG4kY29sb3ItZGVmYXVsdC1kaXNhYmxlZDogcmdiYSgkY29sb3ItZGVmYXVsdCwgMC41KTtcblxuJGNvbG9yLXByaW1hcnk6ICRibHVlLTYwMDtcbiRjb2xvci1wcmltYXJ5LWhvdmVyOiAkYmx1ZS03MDA7XG4kY29sb3ItcHJpbWFyeS1kaXNhYmxlZDogcmdiYSgkY29sb3ItcHJpbWFyeSwgMC41KTtcblxuJGNvbG9yLXNlY29uZGFyeTogJGluZGlnby02MDA7XG4kY29sb3Itc2Vjb25kYXJ5LWhvdmVyOiAkaW5kaWdvLTcwMDtcbiRjb2xvci1zZWNvbmRhcnktZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXNlY29uZGFyeSwgMC41KTtcblxuJGNvbG9yLWVycm9yOiAkcmVkLTYwMDtcbiRjb2xvci1lcnJvci1ob3ZlcjogJHJlZC03MDA7XG4kY29sb3ItZXJyb3ItZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLWVycm9yLCAwLjUpO1xuXG4kY29sb3Itc3VjY2VzczogJGdyZWVuLTYwMDtcbiRjb2xvci1zdWNjZXNzLWhvdmVyOiAkZ3JlZW4tNzAwO1xuJGNvbG9yLXN1Y2Nlc3MtZGlzYWJsZWQ6IHJnYmEoJGNvbG9yLXN1Y2Nlc3MsIDAuNSk7XG5cbiRjb2xvci13YXJuaW5nOiAkYW1iZXItNjAwO1xuJGNvbG9yLXdhcm5pbmctaG92ZXI6ICRhbWJlci03MDA7XG4kY29sb3Itd2FybmluZy1kaXNhYmxlZDogcmdiYSgkY29sb3Itd2FybmluZywgMC41KTtcblxuJHRleHQtY29sb3Itd2hpdGU6ICR3aGl0ZTtcbiR0ZXh0LWNvbG9yLWJsYWNrOiAkYmxhY2s7XG4kdGV4dC1jb2xvci13aGl0ZS1kaXNhYmxlZDogcmdiYSgkd2hpdGUsIDAuNSk7XG4kdGV4dC1jb2xvci1ibGFjay1kaXNhYmxlZDogcmdiYSgkYmxhY2ssIDAuNSk7XG5cbi8vID09PSBTaGFkb3dzID09PVxuJHNoYWRvdy1zbTogMCAxcHggMnB4IDAgcmdiYSgkYmxhY2ssIDAuMDUpO1xuJHNoYWRvdy1tZDpcbiAgMCA0cHggNnB4IC0xcHggcmdiYSgkYmxhY2ssIDAuMSksXG4gIDAgMnB4IDRweCAtMXB4IHJnYmEoJGJsYWNrLCAwLjA2KTtcbiRzaGFkb3ctbGc6XG4gIDAgMTBweCAxNXB4IC0zcHggcmdiYSgkYmxhY2ssIDAuMSksXG4gIDAgNHB4IDZweCAtMnB4IHJnYmEoJGJsYWNrLCAwLjA1KTtcblxuLy8gPT09IEZvbnQgZmFtaWxpZXMgPT09XG4kZm9udC1mYW1pbHktc2FuczogXCJJbnRlclwiLCBzYW5zLXNlcmlmO1xuJGZvbnQtZmFtaWx5LXNlcmlmOiBcIkdlb3JnaWFcIiwgc2VyaWY7XG4kZm9udC1mYW1pbHktbW9ubzogXCJGaXJhIENvZGVcIiwgbW9ub3NwYWNlO1xuXG4vLyA9PT0gRm9udCB3ZWlnaHRzID09PVxuJGZvbnQtd2VpZ2h0LXJlZ3VsYXI6IDQwMDtcbiRmb250LXdlaWdodC1tZWRpdW06IDUwMDtcbiRmb250LXdlaWdodC1zZW1pYm9sZDogNjAwO1xuJGZvbnQtd2VpZ2h0LWJvbGQ6IDcwMDtcblxuLy8gPT09IExpbmUgaGVpZ2h0cyA9PT1cbiRsaW5lLWhlaWdodC10aWdodDogMS4yO1xuJGxpbmUtaGVpZ2h0LXNudWc6IDEuMzc1O1xuJGxpbmUtaGVpZ2h0LW5vcm1hbDogMS41O1xuJGxpbmUtaGVpZ2h0LWxvb3NlOiAxLjYyNTtcblxuLy8gPT09IEZvbnQgU2l6ZXMg4oCUIFNlbWFudGljIFRva2VucyA9PT1cblxuLy8gPT09IFRpdGxlcyA9PT1cbiRmb250LXNpemUtaGVybzogM3JlbTsgLy8gNDhweFxuJGZvbnQtc2l6ZS10aXRsZS0xOiAyLjI1cmVtOyAvLyAzNnB4XG4kZm9udC1zaXplLXRpdGxlLTI6IDEuODc1cmVtOyAvLyAzMHB4XG4kZm9udC1zaXplLXRpdGxlLTM6IDEuNXJlbTsgLy8gMjRweFxuXG4vLyA9PT0gU3VidGl0bGVzID09PVxuJGZvbnQtc2l6ZS1zdWJ0aXRsZS0xOiAxLjI1cmVtOyAvLyAyMHB4XG4kZm9udC1zaXplLXN1YnRpdGxlLTI6IDEuMTI1cmVtOyAvLyAxOHB4XG5cbi8vID09PSBCb2R5IHRleHQgPT09XG4kZm9udC1zaXplLWJvZHktbGc6IDFyZW07IC8vIDE2cHhcbiRmb250LXNpemUtYm9keS1tZDogMC45Mzc1cmVtOyAvLyAxNXB4XG4kZm9udC1zaXplLWJvZHktc206IDAuODc1cmVtOyAvLyAxNHB4XG5cbi8vID09PSBDYXB0aW9ucyAvIERlc2NyaXB0aW9ucyA9PT1cbiRmb250LXNpemUtY2FwdGlvbjogMC43NXJlbTsgLy8gMTJweFxuJGZvbnQtc2l6ZS1mb290bm90ZTogMC42ODc1cmVtOyAvLyAxMXB4XG5cbi8vID09PSBCdXR0b25zID09PVxuJGZvbnQtc2l6ZS1idXR0b24tbGc6IDFyZW07IC8vIDE2cHhcbiRmb250LXNpemUtYnV0dG9uLW1kOiAwLjg3NXJlbTsgLy8gMTRweFxuJGZvbnQtc2l6ZS1idXR0b24tc206IDAuNzVyZW07IC8vIDEycHhcblxuLy8gPT09IEFuaW1hdGlvbnMgPT09XG5cbiRjdWJpYy1iZXppZXItcHJpbWFyeTogY3ViaWMtYmV6aWVyKDAuNTUsIC0wLjE5LCAwLjU5LCAwLjk1KTtcbiRjdWJpYy1iZXppZXItc2Vjb25kYXJ5OiBjdWJpYy1iZXppZXIoMC4xNzUsIDAuODg1LCAwLjMyLCAxLjI3NSk7XG4iXX0= */"],"mappings":"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","names":["React","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,187 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// components/Dropdown/index.tsx
+import * as React2 from "react";
+
+// components/DropdownOption/DropdownOption.module.scss
+var DropdownOption_module_default = {};
+
+// components/DropdownOption/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DropdownOption = ({
+  children,
+  // value,
+  // selectedValue,
+  onChange,
+  // icon,
+  description
+  // disabled,
+}) => {
+  return /* @__PURE__ */ jsx("button", { className: DropdownOption_module_default["dropdown-option"], onClick: onChange, children: /* @__PURE__ */ jsxs("div", { className: DropdownOption_module_default["dropdown-option__content"], children: [
+    /* @__PURE__ */ jsx("h3", { className: DropdownOption_module_default["dropdown-option__title"], children }),
+    /* @__PURE__ */ jsx("p", { className: DropdownOption_module_default["dropdown-option__description"], children: description })
+  ] }) });
+};
+
+// components/Dropdown/index.tsx
+import { AnimatePresence, motion } from "framer-motion";
+import { Button } from "@aristobyte-ui/button";
+
+// utils/Portal.tsx
+import * as React from "react";
+import { createPortal } from "react-dom";
+var Portal = ({
+  children
+}) => {
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted || typeof window === "undefined") return null;
+  return createPortal(children, document.body);
+};
+
+// components/Dropdown/Dropdown.module.scss
+var Dropdown_module_default = {};
+
+// components/Dropdown/index.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { createElement } from "react";
+var Dropdown = ({
+  children,
+  value,
+  onChange,
+  appearance = "outline",
+  placeholder = "Select",
+  className = "",
+  initiallyOpened = false,
+  disabled = false
+}) => {
+  const [isOpened, setIsOpened] = React2.useState(initiallyOpened);
+  const [selected, setSelected] = React2.useState(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);
+    setSelected(currentRadioValue);
+    setIsOpened(false);
+  };
+  const handleToggle = () => {
+    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);
+    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_module_default["dropdown"]} ${className}`, children: /* @__PURE__ */ jsx2(
+      Button,
+      __spreadProps(__spreadValues({}, { ref: buttonRef }), {
+        className: Dropdown_module_default["dropdown__button"],
+        appearance,
+        onClick: handleToggle,
+        disabled,
+        children: placeholder
+      })
+    ) }),
+    /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsxs2("div", { className: Dropdown_module_default["dropdown__box"], children: [
+      /* @__PURE__ */ jsx2(
+        motion.div,
+        {
+          className: Dropdown_module_default["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_module_default["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,
+            __spreadProps(__spreadValues({}, props), {
+              key: `${props.value}-${uniqueId}`,
+              selectedValue: selected,
+              onChange: () => handleChange(props.value)
+            })
+          ))
+        }
+      )
+    ] }) }) })
+  ] });
+};
+export {
+  Dropdown,
+  DropdownOption
+};
+//# sourceMappingURL=index.mjs.map