@aristobyte-ui/dropdown 1.0.1 → 1.0.2

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@aristobyte-ui/dropdown",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": false,
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
@@ -31,7 +34,7 @@
     "typescript": "^5.8.3"
   },
   "dependencies": {
-    "@aristobyte-ui/button": "^1.0.3",
+    "@aristobyte-ui/button": "^1.0.4",
     "@aristobyte-ui/eslint-config": "^1.0.0",
     "@aristobyte-ui/jest-config": "^1.0.0",
     "@aristobyte-ui/typescript-config": "1.0.1",

package/@types/index.d.ts

@@ -1,4 +0,0 @@
-declare module "*.svg" {
-  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-  export default content;
-}

package/@types/styles/scss-modules.d.ts

@@ -1,4 +0,0 @@
-declare module "*.module.scss" {
-  const classes: { [key: string]: string };
-  export default classes;
-}

package/assets/svg/i_Copy.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>

package/assets/svg/i_Error.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-x-icon lucide-octagon-x"><path d="m15 9-6 6"/><path d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z"/><path d="m9 9 6 6"/></svg>

package/assets/svg/i_Info.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>

package/assets/svg/i_Success.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-icon lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

package/assets/svg/i_Warning.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert-icon lucide-octagon-alert"><path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/></svg>

package/components/Dropdown/Dropdown.module.scss

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

package/components/Dropdown/index.tsx

@@ -1,175 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { DropdownOption, type IDropdownOption } from "../DropdownOption";
-
-import { AnimatePresence, motion } from "framer-motion";
-
-import { Button } from "@aristobyte-ui/button";
-import { Portal } from "../../utils/Portal";
-
-import styles from "./Dropdown.module.scss";
-
-export interface IDropdown {
-  children:
-    | React.ReactElement<IDropdownOption>
-    | React.ReactElement<IDropdownOption>[];
-  value: string;
-  appearance?:
-    | "solid"
-    | "outline"
-    | "outline-dashed"
-    | "no-outline"
-    | "glowing";
-  onChange?: (newValue: string) => void;
-  initiallyOpened?: boolean;
-  placeholder?: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-type PositionType = {
-  top: 0;
-  left: 0;
-  width: 0;
-};
-
-export const Dropdown: React.FC<IDropdown> = ({
-  children,
-  value,
-  onChange,
-  appearance = "outline",
-  placeholder = "Select",
-  className = "",
-  initiallyOpened = false,
-  disabled = false,
-}) => {
-  const [isOpened, setIsOpened] = React.useState<boolean>(initiallyOpened);
-  const [selected, setSelected] = React.useState<string>(value);
-  const [position, setPosition] = React.useState<PositionType>({
-    top: 0,
-    left: 0,
-    width: 0,
-  });
-  const [dropdownHeight, setDropdownHeight] = React.useState(0);
-  const [buttonHeight, setButtonHeight] = React.useState(0);
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
-  const boxRef = React.useRef<HTMLDivElement>(null);
-  const uniqueId = React.useId();
-
-  React.useLayoutEffect(() => {
-    if (!isOpened) {
-      return;
-    }
-
-    if (boxRef.current) {
-      setDropdownHeight(boxRef.current.getBoundingClientRect().height);
-    }
-
-    if (buttonRef.current) {
-      setButtonHeight(buttonRef.current.getBoundingClientRect().height);
-    }
-  }, [isOpened]);
-
-  const options = React.Children.toArray(children).filter(
-    (child): child is React.ReactElement<IDropdownOption> =>
-      React.isValidElement(child) && child.type === DropdownOption
-  );
-
-  const isValidValue = () => {
-    return !!options.find(({ props }) => props.value === value);
-  };
-
-  const handleChange = (currentRadioValue: string) => {
-    onChange?.(currentRadioValue);
-    setSelected(currentRadioValue);
-    setIsOpened(false);
-  };
-
-  const handleToggle = () => {
-    if (disabled) return;
-
-    const rect = buttonRef.current?.getBoundingClientRect();
-    if (!rect) return;
-
-    const spaceBelow = window.innerHeight - rect.bottom;
-    const spaceAbove = rect.top;
-
-    const shouldOpenUpwards =
-      dropdownHeight > 0 &&
-      spaceBelow < dropdownHeight &&
-      spaceAbove > dropdownHeight;
-
-    const finalPosition = {
-      top: shouldOpenUpwards
-        ? rect.top + window.scrollY - dropdownHeight - buttonHeight / 2
-        : rect.top + window.scrollY + buttonHeight + 6,
-      left: rect.left + window.scrollX,
-      width: rect.width,
-    } as PositionType;
-
-    setPosition(finalPosition);
-    setIsOpened((prev) => !prev);
-  };
-
-  if (!isValidValue()) {
-    throw new Error(
-      'The "value" prop did not match with any of the DropdownOption "value" prop'
-    );
-  }
-
-  return (
-    <>
-      <div className={`${styles["dropdown"]} ${className}`}>
-        <Button
-          {...{ ref: buttonRef }}
-          className={styles["dropdown__button"]}
-          appearance={appearance}
-          onClick={handleToggle}
-          disabled={disabled}
-        >
-          {placeholder}
-        </Button>
-      </div>
-
-      <Portal>
-        <AnimatePresence>
-          {isOpened && (
-            <div className={styles["dropdown__box"]}>
-              <motion.div
-                className={styles["dropdown__box-overlay"]}
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.3, ease: "easeIn" }}
-                onClick={() => setIsOpened(false)}
-              />
-              <motion.div
-                ref={boxRef}
-                className={styles["dropdown__box-options"]}
-                initial={{ opacity: 0, y: 20, scale: 0.95 }}
-                animate={{ opacity: 1, y: 0, scale: 1 }}
-                exit={{ opacity: 0, y: 20, scale: 0.95 }}
-                transition={{ duration: 0.2, ease: "easeIn" }}
-                style={{
-                  top: position.top,
-                  left: position.left,
-                  width: position.width,
-                }}
-              >
-                {options.map(({ props }) => (
-                  <DropdownOption
-                    {...props}
-                    key={`${props.value}-${uniqueId}`}
-                    selectedValue={selected}
-                    onChange={() => handleChange(props.value)}
-                  />
-                ))}
-              </motion.div>
-            </div>
-          )}
-        </AnimatePresence>
-      </Portal>
-    </>
-  );
-};

package/components/DropdownOption/DropdownOption.module.scss

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

package/components/DropdownOption/index.tsx

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

package/components/index.ts

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

package/eslint.config.mjs

@@ -1,2 +0,0 @@
-import { config } from "@aristobyte-ui/eslint-config/react";
-export default config;

package/index.ts

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

package/styles/_settings.scss

@@ -1,179 +0,0 @@
-// === Design Tokens — Color Palette ===
-
-// Base
-$white: #ffffff;
-$black: #000000;
-$transparent: transparent;
-
-// === Black Transparent Scale ===
-$black-transparent-100: rgba(0, 0, 0, 0.1);
-$black-transparent-200: rgba(0, 0, 0, 0.2);
-$black-transparent-300: rgba(0, 0, 0, 0.3);
-$black-transparent-400: rgba(0, 0, 0, 0.4);
-$black-transparent-500: rgba(0, 0, 0, 0.5);
-$black-transparent-600: rgba(0, 0, 0, 0.6);
-$black-transparent-700: rgba(0, 0, 0, 0.7);
-$black-transparent-800: rgba(0, 0, 0, 0.8);
-$black-transparent-900: rgba(0, 0, 0, 0.9);
-
-// === Black Transparent Scale ===
-$white-transparent-100: rgba(255, 255, 255, 0.1);
-$white-transparent-200: rgba(255, 255, 255, 0.2);
-$white-transparent-300: rgba(255, 255, 255, 0.3);
-$white-transparent-400: rgba(255, 255, 255, 0.4);
-$white-transparent-500: rgba(255, 255, 255, 0.5);
-$white-transparent-600: rgba(255, 255, 255, 0.6);
-$white-transparent-700: rgba(255, 255, 255, 0.7);
-$white-transparent-800: rgba(255, 255, 255, 0.8);
-$white-transparent-900: rgba(255, 255, 255, 0.9);
-
-// === Neutral Scale (Grey) ===
-$grey-50: #f9fafb;
-$grey-100: #f3f4f6;
-$grey-200: #e5e7eb;
-$grey-300: #d1d5db;
-$grey-400: #9ca3af;
-$grey-500: #6b7280;
-$grey-600: #4b5563;
-$grey-700: #374151;
-$grey-800: #1f2937;
-$grey-900: #111827;
-
-// === Primary Scale (Blue) ===
-$blue-50: #eff6ff;
-$blue-100: #dbeafe;
-$blue-200: #bfdbfe;
-$blue-300: #93c5fd;
-$blue-400: #60a5fa;
-$blue-500: #3b82f6;
-$blue-600: #2563eb; // Main
-$blue-700: #1d4ed8; // Hover
-$blue-800: #1e40af;
-$blue-900: #1e3a8a;
-
-// === Secondary Scale (Indigo) ===
-$indigo-50: #eef2ff;
-$indigo-100: #e0e7ff;
-$indigo-200: #c7d2fe;
-$indigo-300: #a5b4fc;
-$indigo-400: #818cf8;
-$indigo-500: #6366f1;
-$indigo-600: #4f46e5; // Main
-$indigo-700: #4338ca; // Hover
-
-// === Error Scale (Red) ===
-$red-50: #fef2f2;
-$red-100: #fee2e2;
-$red-200: #fecaca;
-$red-300: #fca5a5;
-$red-400: #f87171;
-$red-500: #ef4444;
-$red-600: #dc2626; // Main
-$red-700: #b91c1c; // Hover
-
-// === Success Scale (Green) ===
-$green-50: #f0fdf4;
-$green-100: #dcfce7;
-$green-200: #bbf7d0;
-$green-300: #86efac;
-$green-400: #4ade80;
-$green-500: #22c55e;
-$green-600: #16a34a; // Main
-$green-700: #15803d; // Hover
-
-// === Warning Scale (Amber) ===
-$amber-50: #fffbeb;
-$amber-100: #fef3c7;
-$amber-200: #fde68a;
-$amber-300: #fcd34d;
-$amber-400: #fbbf24;
-$amber-500: #f59e0b;
-$amber-600: #d97706; // Main
-$amber-700: #b45309; // Hover
-
-// === Semantic Tokens ===
-$color-default: $grey-800;
-$color-default-hover: $grey-900;
-$color-default-disabled: rgba($color-default, 0.5);
-
-$color-primary: $blue-600;
-$color-primary-hover: $blue-700;
-$color-primary-disabled: rgba($color-primary, 0.5);
-
-$color-secondary: $indigo-600;
-$color-secondary-hover: $indigo-700;
-$color-secondary-disabled: rgba($color-secondary, 0.5);
-
-$color-error: $red-600;
-$color-error-hover: $red-700;
-$color-error-disabled: rgba($color-error, 0.5);
-
-$color-success: $green-600;
-$color-success-hover: $green-700;
-$color-success-disabled: rgba($color-success, 0.5);
-
-$color-warning: $amber-600;
-$color-warning-hover: $amber-700;
-$color-warning-disabled: rgba($color-warning, 0.5);
-
-$text-color-white: $white;
-$text-color-black: $black;
-$text-color-white-disabled: rgba($white, 0.5);
-$text-color-black-disabled: rgba($black, 0.5);
-
-// === Shadows ===
-$shadow-sm: 0 1px 2px 0 rgba($black, 0.05);
-$shadow-md:
-  0 4px 6px -1px rgba($black, 0.1),
-  0 2px 4px -1px rgba($black, 0.06);
-$shadow-lg:
-  0 10px 15px -3px rgba($black, 0.1),
-  0 4px 6px -2px rgba($black, 0.05);
-
-// === Font families ===
-$font-family-sans: "Inter", sans-serif;
-$font-family-serif: "Georgia", serif;
-$font-family-mono: "Fira Code", monospace;
-
-// === Font weights ===
-$font-weight-regular: 400;
-$font-weight-medium: 500;
-$font-weight-semibold: 600;
-$font-weight-bold: 700;
-
-// === Line heights ===
-$line-height-tight: 1.2;
-$line-height-snug: 1.375;
-$line-height-normal: 1.5;
-$line-height-loose: 1.625;
-
-// === Font Sizes — Semantic Tokens ===
-
-// === Titles ===
-$font-size-hero: 3rem; // 48px
-$font-size-title-1: 2.25rem; // 36px
-$font-size-title-2: 1.875rem; // 30px
-$font-size-title-3: 1.5rem; // 24px
-
-// === Subtitles ===
-$font-size-subtitle-1: 1.25rem; // 20px
-$font-size-subtitle-2: 1.125rem; // 18px
-
-// === Body text ===
-$font-size-body-lg: 1rem; // 16px
-$font-size-body-md: 0.9375rem; // 15px
-$font-size-body-sm: 0.875rem; // 14px
-
-// === Captions / Descriptions ===
-$font-size-caption: 0.75rem; // 12px
-$font-size-footnote: 0.6875rem; // 11px
-
-// === Buttons ===
-$font-size-button-lg: 1rem; // 16px
-$font-size-button-md: 0.875rem; // 14px
-$font-size-button-sm: 0.75rem; // 12px
-
-// === Animations ===
-
-$cubic-bezier-primary: cubic-bezier(0.55, -0.19, 0.59, 0.95);
-$cubic-bezier-secondary: cubic-bezier(0.175, 0.885, 0.32, 1.275);

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "@aristobyte-ui/typescript-config/package",
-  "compilerOptions": {
-    "outDir": "dist",
-    "declarationDir": "dist/types",
-    "baseUrl": ".",
-    "typeRoots": ["@types", "node_modules/@types"]
-  },
-  "include": ["@types", "components", "utils", "index.ts"],
-  "exclude": ["node_modules", "dist"]
-}

package/turbo/generators/config.ts

@@ -1,30 +0,0 @@
-import type { PlopTypes } from "@turbo/gen";
-
-// Learn more about Turborepo Generators at https://turborepo.com/docs/guides/generating-code
-
-export default function generator(plop: PlopTypes.NodePlopAPI): void {
-  // A simple generator to add a new React component to the internal UI library
-  plop.setGenerator("react-component", {
-    description: "Adds a new react component",
-    prompts: [
-      {
-        type: "input",
-        name: "name",
-        message: "What is the name of the component?",
-      },
-    ],
-    actions: [
-      {
-        type: "add",
-        path: "src/{{kebabCase name}}.tsx",
-        templateFile: "templates/component.hbs",
-      },
-      {
-        type: "append",
-        path: "package.json",
-        pattern: /"exports": {(?<insertion>)/g,
-        template: '    "./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
-      },
-    ],
-  });
-}

package/turbo/generators/templates/component.hbs

@@ -1,8 +0,0 @@
-export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <div>
-      <h1>{{ pascalCase name }} Component</h1>
-      {children}
-    </div>
-  );
-};

package/utils/Portal.tsx

@@ -1,17 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { createPortal } from "react-dom";
-
-export const Portal: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const [mounted, setMounted] = React.useState(false);
-
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted || typeof window === "undefined") return null;
-  return createPortal(children, document.body);
-};

package/utils/icons.ts

@@ -1,13 +0,0 @@
-import Copy from "../assets/svg/i_Copy.svg";
-import Error from "../assets/svg/i_Error.svg";
-import Info from "../assets/svg/i_Info.svg";
-import Success from "../assets/svg/i_Success.svg";
-import Warning from "../assets/svg/i_Warning.svg";
-
-export const Icons = {
-  Copy,
-  Error,
-  Info,
-  Success,
-  Warning,
-};

package/utils/index.ts

@@ -1,2 +0,0 @@
-export { renderRipple, type RippleParams } from "./ripple";
-export { Icons } from "./icons";

package/utils/ripple.tsx

@@ -1,54 +0,0 @@
-type RippleParamsRef = HTMLButtonElement | HTMLAnchorElement;
-
-export type RippleParams<HTMLElementType extends RippleParamsRef> = {
-  ref: React.RefObject<HTMLElementType | null>;
-  clientX: number;
-  clientY: number;
-};
-
-export const renderRipple = <HTMLElementType extends RippleParamsRef>({
-  ref,
-  clientX,
-  clientY,
-}: RippleParams<HTMLElementType>) => {
-  const button = ref.current;
-  if (!button) return;
-
-  const circle = document.createElement("span");
-  const diameter = Math.max(button.clientWidth, button.clientHeight);
-  const radius = diameter / 2;
-
-  circle.id = "ripple";
-
-  const style = document.createElement("style");
-  style.innerHTML = `
-      #ripple {
-        animation: ripple 300ms linear;
-        background-color: rgba(255, 255, 255, 0.3);
-        border-radius: 50%;
-        height: ${diameter}px;
-        left: ${clientX - button.getBoundingClientRect().left - radius}px;
-        pointer-events: none;
-        position: absolute;
-        top: ${clientY - button.getBoundingClientRect().top - radius}px;
-        transform: scale(0);
-        width: ${diameter}px;
-        z-index: 0;
-      }
-      
-      @keyframes ripple {
-        to {
-          opacity: 0;
-          transform: scale(2);
-        }
-      }
-    `;
-
-  button.appendChild(style);
-  button.appendChild(circle);
-
-  circle.addEventListener("animationend", () => {
-    circle.remove();
-    style.remove();
-  });
-};