@velocis/dropdown1 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Velocis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,476 @@
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DROPDOWN1_DEFAULTS: () => DROPDOWN1_DEFAULTS,
+  DROPDOWN1_ITEM_DEFAULTS: () => DROPDOWN1_ITEM_DEFAULTS,
+  DROPDOWN1_SUBMENU_DEFAULTS: () => DROPDOWN1_SUBMENU_DEFAULTS,
+  Dropdown1: () => Dropdown1,
+  Dropdown1Context: () => Dropdown1Context,
+  Dropdown1Item: () => Dropdown1Item,
+  Dropdown1Root: () => Dropdown1Root,
+  Dropdown1SubMenu: () => Dropdown1SubMenu,
+  dropdown1ContentVariants: () => dropdown1ContentVariants,
+  dropdown1ItemVariants: () => dropdown1ItemVariants,
+  dropdown1Styles: () => dropdown1Styles,
+  dropdown1SubMenuContentVariants: () => dropdown1SubMenuContentVariants,
+  dropdown1SubMenuTriggerVariants: () => dropdown1SubMenuTriggerVariants,
+  dropdown1TriggerVariants: () => dropdown1TriggerVariants,
+  resolveDropdown1Styles: () => resolveDropdown1Styles,
+  useDropdown1: () => useDropdown1,
+  useDropdown1Context: () => useDropdown1Context
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Dropdown1.tsx
+var import_core3 = require("@velocis/core");
+var import_react2 = require("react");
+
+// src/Dropdown1.defaults.ts
+var DROPDOWN1_DEFAULTS = {
+  contentWidth: "w-56",
+  fullWidth: false,
+  disabled: false,
+  closeOnScroll: true,
+  contentZIndex: "var(--velocis-z-dropdown)"
+};
+var DROPDOWN1_ITEM_DEFAULTS = {
+  closeOnSelect: true
+};
+var DROPDOWN1_SUBMENU_DEFAULTS = {
+  contentWidth: "w-48",
+  hoverDelayMs: 100
+};
+
+// src/Dropdown1.variants.ts
+var import_class_variance_authority = require("class-variance-authority");
+var dropdown1TriggerVariants = (0, import_class_variance_authority.cva)(
+  "flex items-center gap-2 rounded-velocis-md px-4 py-2 text-sm font-medium shadow-sm ring-1 ring-inset transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-velocis-primary/40",
+  {
+    variants: {
+      fullWidth: {
+        true: "w-full justify-between",
+        false: ""
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-60",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      fullWidth: false,
+      disabled: false
+    }
+  }
+);
+var dropdown1ContentVariants = (0, import_class_variance_authority.cva)(
+  "fixed origin-top-right rounded-velocis-md focus:outline-none overflow-visible"
+);
+var dropdown1ItemVariants = (0, import_class_variance_authority.cva)(
+  "flex cursor-pointer items-center gap-2 px-4 py-2 text-sm transition-colors"
+);
+var dropdown1SubMenuTriggerVariants = (0, import_class_variance_authority.cva)(
+  "flex w-full cursor-default items-center justify-between px-4 py-2 text-sm transition-colors"
+);
+var dropdown1SubMenuContentVariants = (0, import_class_variance_authority.cva)(
+  "absolute top-0 right-full mr-2 w-48 rounded-velocis-md z-[10000]"
+);
+
+// src/context/Dropdown1Context.tsx
+var import_react = require("react");
+var Dropdown1Context = (0, import_react.createContext)(null);
+function useDropdown1Context() {
+  return (0, import_react.useContext)(Dropdown1Context);
+}
+
+// src/icons/Dropdown1Icons.tsx
+var import_core = require("@velocis/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ChevronDownIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Icon, { size: "sm", className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 9l6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) }) });
+}
+function ChevronSubMenuIcon({ className, open }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Icon, { size: "sm", className: (0, import_core.cn)(className, open && "rotate-90"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 18l-6-6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) }) });
+}
+
+// src/presets/dropdown1Styles.ts
+var dropdown1Styles = {
+  trigger: "bg-velocis-background text-velocis-foreground ring-velocis-border hover:bg-velocis-border/30",
+  triggerIcon: "text-velocis-muted",
+  content: "bg-velocis-background text-velocis-foreground border border-velocis-border shadow-velocis-md ring-1 ring-velocis-border/40",
+  item: "text-velocis-foreground hover:bg-velocis-border/40 hover:text-velocis-foreground",
+  subMenuTrigger: "text-velocis-foreground hover:bg-velocis-border/40 hover:text-velocis-foreground",
+  subMenuContent: "bg-velocis-background text-velocis-foreground border border-velocis-border shadow-velocis-md",
+  subMenuIcon: "text-velocis-muted"
+};
+function resolveDropdown1Styles(overrides) {
+  const content = overrides?.content ?? dropdown1Styles.content;
+  return {
+    trigger: overrides?.trigger ?? dropdown1Styles.trigger,
+    triggerIcon: overrides?.triggerIcon ?? dropdown1Styles.triggerIcon,
+    content,
+    item: overrides?.item ?? dropdown1Styles.item,
+    subMenuTrigger: overrides?.subMenuTrigger ?? dropdown1Styles.subMenuTrigger,
+    subMenuContent: overrides?.subMenuContent ?? content,
+    subMenuIcon: overrides?.subMenuIcon ?? dropdown1Styles.subMenuIcon
+  };
+}
+
+// src/positioning/computeDropdownStyle.ts
+var import_core2 = require("@velocis/core");
+function computeDropdownStyle({
+  anchorRect,
+  direction,
+  fullWidth,
+  contentWidthPx
+}) {
+  const margin = 8;
+  const vw = window.innerWidth;
+  const rtl = (0, import_core2.isRTL)(direction);
+  const width = fullWidth ? anchorRect.width : contentWidthPx ?? Math.min(224, vw - margin * 2);
+  const top = anchorRect.bottom + 4;
+  const inlineStart = rtl ? anchorRect.right - width : anchorRect.left;
+  const left = Math.max(margin, Math.min(inlineStart, vw - width - margin));
+  return {
+    position: "fixed",
+    top,
+    left,
+    width: fullWidth ? anchorRect.width : width,
+    minWidth: fullWidth ? anchorRect.width : void 0
+  };
+}
+function parseContentWidthClass(contentWidth) {
+  const match = contentWidth.match(/^w-(\d+(?:\.\d+)?|\[\d+px\])$/);
+  if (!match?.[1]) return void 0;
+  const value = match[1];
+  if (value.startsWith("[")) {
+    return parseInt(value.slice(1, -2), 10);
+  }
+  const remMap = {
+    "48": 192,
+    "56": 224,
+    "64": 256,
+    "72": 288
+  };
+  return remMap[value];
+}
+
+// src/Dropdown1.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function useControllableOpen(controlledOpen, defaultOpen, onOpenChange) {
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react2.useState)(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = (0, import_react2.useCallback)(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return { open, setOpen };
+}
+function Dropdown1Root({
+  trigger,
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  styles: stylesProp,
+  triggerClassName,
+  contentClassName,
+  contentWidth = DROPDOWN1_DEFAULTS.contentWidth,
+  maxHeight,
+  fullWidth = DROPDOWN1_DEFAULTS.fullWidth,
+  disabled = DROPDOWN1_DEFAULTS.disabled,
+  contentZIndex = DROPDOWN1_DEFAULTS.contentZIndex,
+  closeOnScroll = DROPDOWN1_DEFAULTS.closeOnScroll,
+  testId,
+  contentTestId
+}) {
+  const direction = (0, import_core3.useDirection)();
+  const { open, setOpen } = useControllableOpen(controlledOpen, defaultOpen, onOpenChange);
+  const styles = resolveDropdown1Styles(stylesProp);
+  const dropdownRef = (0, import_react2.useRef)(null);
+  const buttonRef = (0, import_react2.useRef)(null);
+  const [positionStyle, setPositionStyle] = (0, import_react2.useState)({});
+  const closeDropdown = (0, import_react2.useCallback)(() => setOpen(false), [setOpen]);
+  const updatePosition = (0, import_react2.useCallback)(() => {
+    if (!buttonRef.current) return;
+    const rect = buttonRef.current.getBoundingClientRect();
+    const contentWidthPx = parseContentWidthClass(contentWidth);
+    setPositionStyle(
+      computeDropdownStyle({
+        anchorRect: rect,
+        direction,
+        fullWidth,
+        contentWidthPx
+      })
+    );
+  }, [contentWidth, direction, fullWidth]);
+  (0, import_react2.useEffect)(() => {
+    if (open) {
+      updatePosition();
+    }
+  }, [open, updatePosition]);
+  (0, import_react2.useEffect)(() => {
+    if (!open) return;
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && buttonRef.current && !dropdownRef.current.contains(event.target) && !buttonRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    const handleScroll = (event) => {
+      if (!closeOnScroll) return;
+      const target = event.target;
+      if (dropdownRef.current && target && !dropdownRef.current.contains(target) && !buttonRef.current?.contains(target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [closeOnScroll, open, setOpen]);
+  const dropdownContent = open ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dropdown1Context.Provider, { value: { closeDropdown, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ref: dropdownRef,
+      role: "menu",
+      "data-testid": contentTestId,
+      dir: direction,
+      className: (0, import_core3.cn)(
+        dropdown1ContentVariants(),
+        styles.content,
+        !fullWidth && contentWidth,
+        maxHeight && "overflow-y-auto",
+        contentClassName
+      ),
+      style: {
+        ...positionStyle,
+        zIndex: contentZIndex,
+        maxHeight: maxHeight || void 0
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "py-1", children })
+    }
+  ) }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: (0, import_core3.cn)(
+          "relative text-start",
+          fullWidth ? "block w-full" : "inline-block"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "button",
+          {
+            ref: buttonRef,
+            type: "button",
+            disabled,
+            "aria-expanded": open,
+            "aria-haspopup": "menu",
+            onClick: () => !disabled && setOpen(!open),
+            "data-testid": testId,
+            className: (0, import_core3.cn)(
+              dropdown1TriggerVariants({ fullWidth, disabled }),
+              styles.trigger,
+              triggerClassName
+            ),
+            children: [
+              trigger,
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronDownIcon, { className: styles.triggerIcon })
+            ]
+          }
+        )
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core3.Portal, { children: dropdownContent })
+  ] });
+}
+
+// src/components/Dropdown1Item.tsx
+var import_core4 = require("@velocis/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Dropdown1Item({
+  children,
+  onClick,
+  closeOnSelect = DROPDOWN1_ITEM_DEFAULTS.closeOnSelect,
+  styles: stylesProp,
+  className,
+  testId
+}) {
+  const context = useDropdown1Context();
+  const itemStyles = stylesProp?.item ?? context?.styles.item;
+  const handleClick = () => {
+    onClick?.();
+    if (closeOnSelect && context?.closeDropdown) {
+      context.closeDropdown();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      role: "menuitem",
+      tabIndex: 0,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      "data-testid": testId,
+      className: (0, import_core4.cn)(dropdown1ItemVariants(), itemStyles, className),
+      children
+    }
+  );
+}
+
+// src/components/Dropdown1SubMenu.tsx
+var import_core5 = require("@velocis/core");
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Dropdown1SubMenu({
+  trigger,
+  children,
+  contentWidth = DROPDOWN1_SUBMENU_DEFAULTS.contentWidth,
+  styles: stylesProp,
+  className
+}) {
+  const context = useDropdown1Context();
+  const subMenuTriggerStyles = stylesProp?.subMenuTrigger ?? context?.styles.subMenuTrigger;
+  const subMenuContentStyles = stylesProp?.subMenuContent ?? context?.styles.subMenuContent;
+  const subMenuIconStyles = stylesProp?.subMenuIcon ?? context?.styles.subMenuIcon;
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const timeoutRef = (0, import_react3.useRef)(null);
+  const containerRef = (0, import_react3.useRef)(null);
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsOpen(true);
+  };
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+    }, DROPDOWN1_SUBMENU_DEFAULTS.hoverDelayMs);
+  };
+  (0, import_react3.useEffect)(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: "relative w-full",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            role: "menuitem",
+            "aria-haspopup": "menu",
+            "aria-expanded": isOpen,
+            className: (0, import_core5.cn)(dropdown1SubMenuTriggerVariants(), subMenuTriggerStyles),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex items-center gap-2", children: trigger }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronSubMenuIcon, { open: isOpen, className: (0, import_core5.cn)("transition-transform", subMenuIconStyles) })
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            role: "menu",
+            className: (0, import_core5.cn)(
+              dropdown1SubMenuContentVariants(),
+              subMenuContentStyles,
+              contentWidth !== "w-48" && contentWidth,
+              className
+            ),
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "py-1", children })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/hooks/useDropdown1.ts
+var import_react4 = require("react");
+function useDropdown1(options = {}) {
+  const [open, setOpen] = (0, import_react4.useState)(options.defaultOpen ?? false);
+  const onOpenChange = (0, import_react4.useCallback)((next) => {
+    setOpen(next);
+  }, []);
+  return {
+    open,
+    setOpen,
+    dropdownProps: { open, onOpenChange }
+  };
+}
+
+// src/index.ts
+var Dropdown1 = Object.assign(Dropdown1Root, {
+  Item: Dropdown1Item,
+  SubMenu: Dropdown1SubMenu
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DROPDOWN1_DEFAULTS,
+  DROPDOWN1_ITEM_DEFAULTS,
+  DROPDOWN1_SUBMENU_DEFAULTS,
+  Dropdown1,
+  Dropdown1Context,
+  Dropdown1Item,
+  Dropdown1Root,
+  Dropdown1SubMenu,
+  dropdown1ContentVariants,
+  dropdown1ItemVariants,
+  dropdown1Styles,
+  dropdown1SubMenuContentVariants,
+  dropdown1SubMenuTriggerVariants,
+  dropdown1TriggerVariants,
+  resolveDropdown1Styles,
+  useDropdown1,
+  useDropdown1Context
+});

package/dist/index.d.cts

@@ -0,0 +1,123 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+type Dropdown1Styles = {
+    /** Trigger button — bg + text + border/hover as one coordinated set */
+    trigger?: string;
+    /** Chevron on trigger */
+    triggerIcon?: string;
+    /** Main menu panel — bg + text + border/shadow */
+    content?: string;
+    /** Menu item — text + hover bg/text */
+    item?: string;
+    /** Sub-menu row — text + hover bg/text */
+    subMenuTrigger?: string;
+    /** Sub-menu panel — defaults to `content` when omitted */
+    subMenuContent?: string;
+    /** Chevron on sub-menu row */
+    subMenuIcon?: string;
+};
+declare const dropdown1Styles: {
+    readonly trigger: "bg-velocis-background text-velocis-foreground ring-velocis-border hover:bg-velocis-border/30";
+    readonly triggerIcon: "text-velocis-muted";
+    readonly content: "bg-velocis-background text-velocis-foreground border border-velocis-border shadow-velocis-md ring-1 ring-velocis-border/40";
+    readonly item: "text-velocis-foreground hover:bg-velocis-border/40 hover:text-velocis-foreground";
+    readonly subMenuTrigger: "text-velocis-foreground hover:bg-velocis-border/40 hover:text-velocis-foreground";
+    readonly subMenuContent: "bg-velocis-background text-velocis-foreground border border-velocis-border shadow-velocis-md";
+    readonly subMenuIcon: "text-velocis-muted";
+};
+type ResolvedDropdown1Styles = Required<Dropdown1Styles>;
+declare function resolveDropdown1Styles(overrides?: Partial<Dropdown1Styles>): ResolvedDropdown1Styles;
+
+type Dropdown1Props = {
+    trigger: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Override coordinated bg/text/hover classes per layer */
+    styles?: Partial<Dropdown1Styles>;
+    triggerClassName?: string;
+    contentClassName?: string;
+    contentWidth?: string;
+    maxHeight?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    contentZIndex?: number | string;
+    closeOnScroll?: boolean;
+    testId?: string;
+    contentTestId?: string;
+};
+type Dropdown1ItemProps = {
+    children: ReactNode;
+    onClick?: () => void;
+    closeOnSelect?: boolean;
+    /** Override item text/hover colors (defaults to root `styles.item`) */
+    styles?: Pick<Dropdown1Styles, 'item'>;
+    className?: string;
+    testId?: string;
+};
+type Dropdown1SubMenuProps = {
+    trigger: ReactNode;
+    children: ReactNode;
+    contentWidth?: string;
+    /** Override sub-menu colors (defaults to root styles) */
+    styles?: Pick<Dropdown1Styles, 'subMenuTrigger' | 'subMenuContent' | 'subMenuIcon'>;
+    className?: string;
+};
+
+declare function Dropdown1Root({ trigger, children, open: controlledOpen, defaultOpen, onOpenChange, styles: stylesProp, triggerClassName, contentClassName, contentWidth, maxHeight, fullWidth, disabled, contentZIndex, closeOnScroll, testId, contentTestId, }: Dropdown1Props): react.JSX.Element;
+
+declare function Dropdown1Item({ children, onClick, closeOnSelect, styles: stylesProp, className, testId, }: Dropdown1ItemProps): react.JSX.Element;
+
+declare function Dropdown1SubMenu({ trigger, children, contentWidth, styles: stylesProp, className, }: Dropdown1SubMenuProps): react.JSX.Element;
+
+type UseDropdown1Options = {
+    defaultOpen?: boolean;
+};
+type UseDropdown1Result = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    dropdownProps: Pick<Dropdown1Props, 'open' | 'onOpenChange'>;
+};
+declare function useDropdown1(options?: UseDropdown1Options): UseDropdown1Result;
+
+type Dropdown1ContextValue = {
+    closeDropdown: () => void;
+    styles: ResolvedDropdown1Styles;
+};
+declare const Dropdown1Context: react.Context<Dropdown1ContextValue | null>;
+declare function useDropdown1Context(): Dropdown1ContextValue | null;
+
+declare const DROPDOWN1_DEFAULTS: {
+    readonly contentWidth: "w-56";
+    readonly fullWidth: false;
+    readonly disabled: false;
+    readonly closeOnScroll: true;
+    readonly contentZIndex: "var(--velocis-z-dropdown)";
+};
+declare const DROPDOWN1_ITEM_DEFAULTS: {
+    readonly closeOnSelect: true;
+};
+declare const DROPDOWN1_SUBMENU_DEFAULTS: {
+    readonly contentWidth: "w-48";
+    readonly hoverDelayMs: 100;
+};
+
+/** Layout/structure only — colors come from `dropdown1Styles` + `styles` prop */
+declare const dropdown1TriggerVariants: (props?: ({
+    fullWidth?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const dropdown1ContentVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const dropdown1ItemVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const dropdown1SubMenuTriggerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const dropdown1SubMenuContentVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+declare const Dropdown1: typeof Dropdown1Root & {
+    Item: typeof Dropdown1Item;
+    SubMenu: typeof Dropdown1SubMenu;
+};
+
+export { DROPDOWN1_DEFAULTS, DROPDOWN1_ITEM_DEFAULTS, DROPDOWN1_SUBMENU_DEFAULTS, Dropdown1, Dropdown1Context, type Dropdown1ContextValue, Dropdown1Item, type Dropdown1ItemProps, type Dropdown1Props, Dropdown1Root, type Dropdown1Styles, Dropdown1SubMenu, type Dropdown1SubMenuProps, type ResolvedDropdown1Styles, type UseDropdown1Options, type UseDropdown1Result, dropdown1ContentVariants, dropdown1ItemVariants, dropdown1Styles, dropdown1SubMenuContentVariants, dropdown1SubMenuTriggerVariants, dropdown1TriggerVariants, resolveDropdown1Styles, useDropdown1, useDropdown1Context };

package/dist/index.d.ts

@@ -0,0 +1,123 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+type Dropdown1Styles = {
+    /** Trigger button — bg + text + border/hover as one coordinated set */
+    trigger?: string;
+    /** Chevron on trigger */
+    triggerIcon?: string;
+    /** Main menu panel — bg + text + border/shadow */
+    content?: string;
+    /** Menu item — text + hover bg/text */
+    item?: string;
+    /** Sub-menu row — text + hover bg/text */
+    subMenuTrigger?: string;
+    /** Sub-menu panel — defaults to `content` when omitted */
+    subMenuContent?: string;
+    /** Chevron on sub-menu row */
+    subMenuIcon?: string;
+};
+declare const dropdown1Styles: {
+    readonly trigger: "bg-velocis-background text-velocis-foreground ring-velocis-border hover:bg-velocis-border/30";
+    readonly triggerIcon: "text-velocis-muted";
+    readonly content: "bg-velocis-background text-velocis-foreground border border-velocis-border shadow-velocis-md ring-1 ring-velocis-border/40";
+    readonly item: "text-velocis-foreground hover:bg-velocis-border/40 hover:text-velocis-foreground";
+    readonly subMenuTrigger: "text-velocis-foreground hover:bg-velocis-border/40 hover:text-velocis-foreground";
+    readonly subMenuContent: "bg-velocis-background text-velocis-foreground border border-velocis-border shadow-velocis-md";
+    readonly subMenuIcon: "text-velocis-muted";
+};
+type ResolvedDropdown1Styles = Required<Dropdown1Styles>;
+declare function resolveDropdown1Styles(overrides?: Partial<Dropdown1Styles>): ResolvedDropdown1Styles;
+
+type Dropdown1Props = {
+    trigger: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Override coordinated bg/text/hover classes per layer */
+    styles?: Partial<Dropdown1Styles>;
+    triggerClassName?: string;
+    contentClassName?: string;
+    contentWidth?: string;
+    maxHeight?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    contentZIndex?: number | string;
+    closeOnScroll?: boolean;
+    testId?: string;
+    contentTestId?: string;
+};
+type Dropdown1ItemProps = {
+    children: ReactNode;
+    onClick?: () => void;
+    closeOnSelect?: boolean;
+    /** Override item text/hover colors (defaults to root `styles.item`) */
+    styles?: Pick<Dropdown1Styles, 'item'>;
+    className?: string;
+    testId?: string;
+};
+type Dropdown1SubMenuProps = {
+    trigger: ReactNode;
+    children: ReactNode;
+    contentWidth?: string;
+    /** Override sub-menu colors (defaults to root styles) */
+    styles?: Pick<Dropdown1Styles, 'subMenuTrigger' | 'subMenuContent' | 'subMenuIcon'>;
+    className?: string;
+};
+
+declare function Dropdown1Root({ trigger, children, open: controlledOpen, defaultOpen, onOpenChange, styles: stylesProp, triggerClassName, contentClassName, contentWidth, maxHeight, fullWidth, disabled, contentZIndex, closeOnScroll, testId, contentTestId, }: Dropdown1Props): react.JSX.Element;
+
+declare function Dropdown1Item({ children, onClick, closeOnSelect, styles: stylesProp, className, testId, }: Dropdown1ItemProps): react.JSX.Element;
+
+declare function Dropdown1SubMenu({ trigger, children, contentWidth, styles: stylesProp, className, }: Dropdown1SubMenuProps): react.JSX.Element;
+
+type UseDropdown1Options = {
+    defaultOpen?: boolean;
+};
+type UseDropdown1Result = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    dropdownProps: Pick<Dropdown1Props, 'open' | 'onOpenChange'>;
+};
+declare function useDropdown1(options?: UseDropdown1Options): UseDropdown1Result;
+
+type Dropdown1ContextValue = {
+    closeDropdown: () => void;
+    styles: ResolvedDropdown1Styles;
+};
+declare const Dropdown1Context: react.Context<Dropdown1ContextValue | null>;
+declare function useDropdown1Context(): Dropdown1ContextValue | null;
+
+declare const DROPDOWN1_DEFAULTS: {
+    readonly contentWidth: "w-56";
+    readonly fullWidth: false;
+    readonly disabled: false;
+    readonly closeOnScroll: true;
+    readonly contentZIndex: "var(--velocis-z-dropdown)";
+};
+declare const DROPDOWN1_ITEM_DEFAULTS: {
+    readonly closeOnSelect: true;
+};
+declare const DROPDOWN1_SUBMENU_DEFAULTS: {
+    readonly contentWidth: "w-48";
+    readonly hoverDelayMs: 100;
+};
+
+/** Layout/structure only — colors come from `dropdown1Styles` + `styles` prop */
+declare const dropdown1TriggerVariants: (props?: ({
+    fullWidth?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const dropdown1ContentVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const dropdown1ItemVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const dropdown1SubMenuTriggerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const dropdown1SubMenuContentVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+declare const Dropdown1: typeof Dropdown1Root & {
+    Item: typeof Dropdown1Item;
+    SubMenu: typeof Dropdown1SubMenu;
+};
+
+export { DROPDOWN1_DEFAULTS, DROPDOWN1_ITEM_DEFAULTS, DROPDOWN1_SUBMENU_DEFAULTS, Dropdown1, Dropdown1Context, type Dropdown1ContextValue, Dropdown1Item, type Dropdown1ItemProps, type Dropdown1Props, Dropdown1Root, type Dropdown1Styles, Dropdown1SubMenu, type Dropdown1SubMenuProps, type ResolvedDropdown1Styles, type UseDropdown1Options, type UseDropdown1Result, dropdown1ContentVariants, dropdown1ItemVariants, dropdown1Styles, dropdown1SubMenuContentVariants, dropdown1SubMenuTriggerVariants, dropdown1TriggerVariants, resolveDropdown1Styles, useDropdown1, useDropdown1Context };

package/dist/index.js

@@ -0,0 +1,439 @@
+'use client';
+
+// src/Dropdown1.tsx
+import { cn as cn2, Portal, useDirection } from "@velocis/core";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+
+// src/Dropdown1.defaults.ts
+var DROPDOWN1_DEFAULTS = {
+  contentWidth: "w-56",
+  fullWidth: false,
+  disabled: false,
+  closeOnScroll: true,
+  contentZIndex: "var(--velocis-z-dropdown)"
+};
+var DROPDOWN1_ITEM_DEFAULTS = {
+  closeOnSelect: true
+};
+var DROPDOWN1_SUBMENU_DEFAULTS = {
+  contentWidth: "w-48",
+  hoverDelayMs: 100
+};
+
+// src/Dropdown1.variants.ts
+import { cva } from "class-variance-authority";
+var dropdown1TriggerVariants = cva(
+  "flex items-center gap-2 rounded-velocis-md px-4 py-2 text-sm font-medium shadow-sm ring-1 ring-inset transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-velocis-primary/40",
+  {
+    variants: {
+      fullWidth: {
+        true: "w-full justify-between",
+        false: ""
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-60",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      fullWidth: false,
+      disabled: false
+    }
+  }
+);
+var dropdown1ContentVariants = cva(
+  "fixed origin-top-right rounded-velocis-md focus:outline-none overflow-visible"
+);
+var dropdown1ItemVariants = cva(
+  "flex cursor-pointer items-center gap-2 px-4 py-2 text-sm transition-colors"
+);
+var dropdown1SubMenuTriggerVariants = cva(
+  "flex w-full cursor-default items-center justify-between px-4 py-2 text-sm transition-colors"
+);
+var dropdown1SubMenuContentVariants = cva(
+  "absolute top-0 right-full mr-2 w-48 rounded-velocis-md z-[10000]"
+);
+
+// src/context/Dropdown1Context.tsx
+import { createContext, useContext } from "react";
+var Dropdown1Context = createContext(null);
+function useDropdown1Context() {
+  return useContext(Dropdown1Context);
+}
+
+// src/icons/Dropdown1Icons.tsx
+import { cn, Icon } from "@velocis/core";
+import { jsx } from "react/jsx-runtime";
+function ChevronDownIcon({ className }) {
+  return /* @__PURE__ */ jsx(Icon, { size: "sm", className, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) }) });
+}
+function ChevronSubMenuIcon({ className, open }) {
+  return /* @__PURE__ */ jsx(Icon, { size: "sm", className: cn(className, open && "rotate-90"), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) }) });
+}
+
+// src/presets/dropdown1Styles.ts
+var dropdown1Styles = {
+  trigger: "bg-velocis-background text-velocis-foreground ring-velocis-border hover:bg-velocis-border/30",
+  triggerIcon: "text-velocis-muted",
+  content: "bg-velocis-background text-velocis-foreground border border-velocis-border shadow-velocis-md ring-1 ring-velocis-border/40",
+  item: "text-velocis-foreground hover:bg-velocis-border/40 hover:text-velocis-foreground",
+  subMenuTrigger: "text-velocis-foreground hover:bg-velocis-border/40 hover:text-velocis-foreground",
+  subMenuContent: "bg-velocis-background text-velocis-foreground border border-velocis-border shadow-velocis-md",
+  subMenuIcon: "text-velocis-muted"
+};
+function resolveDropdown1Styles(overrides) {
+  const content = overrides?.content ?? dropdown1Styles.content;
+  return {
+    trigger: overrides?.trigger ?? dropdown1Styles.trigger,
+    triggerIcon: overrides?.triggerIcon ?? dropdown1Styles.triggerIcon,
+    content,
+    item: overrides?.item ?? dropdown1Styles.item,
+    subMenuTrigger: overrides?.subMenuTrigger ?? dropdown1Styles.subMenuTrigger,
+    subMenuContent: overrides?.subMenuContent ?? content,
+    subMenuIcon: overrides?.subMenuIcon ?? dropdown1Styles.subMenuIcon
+  };
+}
+
+// src/positioning/computeDropdownStyle.ts
+import { isRTL } from "@velocis/core";
+function computeDropdownStyle({
+  anchorRect,
+  direction,
+  fullWidth,
+  contentWidthPx
+}) {
+  const margin = 8;
+  const vw = window.innerWidth;
+  const rtl = isRTL(direction);
+  const width = fullWidth ? anchorRect.width : contentWidthPx ?? Math.min(224, vw - margin * 2);
+  const top = anchorRect.bottom + 4;
+  const inlineStart = rtl ? anchorRect.right - width : anchorRect.left;
+  const left = Math.max(margin, Math.min(inlineStart, vw - width - margin));
+  return {
+    position: "fixed",
+    top,
+    left,
+    width: fullWidth ? anchorRect.width : width,
+    minWidth: fullWidth ? anchorRect.width : void 0
+  };
+}
+function parseContentWidthClass(contentWidth) {
+  const match = contentWidth.match(/^w-(\d+(?:\.\d+)?|\[\d+px\])$/);
+  if (!match?.[1]) return void 0;
+  const value = match[1];
+  if (value.startsWith("[")) {
+    return parseInt(value.slice(1, -2), 10);
+  }
+  const remMap = {
+    "48": 192,
+    "56": 224,
+    "64": 256,
+    "72": 288
+  };
+  return remMap[value];
+}
+
+// src/Dropdown1.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function useControllableOpen(controlledOpen, defaultOpen, onOpenChange) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return { open, setOpen };
+}
+function Dropdown1Root({
+  trigger,
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  styles: stylesProp,
+  triggerClassName,
+  contentClassName,
+  contentWidth = DROPDOWN1_DEFAULTS.contentWidth,
+  maxHeight,
+  fullWidth = DROPDOWN1_DEFAULTS.fullWidth,
+  disabled = DROPDOWN1_DEFAULTS.disabled,
+  contentZIndex = DROPDOWN1_DEFAULTS.contentZIndex,
+  closeOnScroll = DROPDOWN1_DEFAULTS.closeOnScroll,
+  testId,
+  contentTestId
+}) {
+  const direction = useDirection();
+  const { open, setOpen } = useControllableOpen(controlledOpen, defaultOpen, onOpenChange);
+  const styles = resolveDropdown1Styles(stylesProp);
+  const dropdownRef = useRef(null);
+  const buttonRef = useRef(null);
+  const [positionStyle, setPositionStyle] = useState({});
+  const closeDropdown = useCallback(() => setOpen(false), [setOpen]);
+  const updatePosition = useCallback(() => {
+    if (!buttonRef.current) return;
+    const rect = buttonRef.current.getBoundingClientRect();
+    const contentWidthPx = parseContentWidthClass(contentWidth);
+    setPositionStyle(
+      computeDropdownStyle({
+        anchorRect: rect,
+        direction,
+        fullWidth,
+        contentWidthPx
+      })
+    );
+  }, [contentWidth, direction, fullWidth]);
+  useEffect(() => {
+    if (open) {
+      updatePosition();
+    }
+  }, [open, updatePosition]);
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && buttonRef.current && !dropdownRef.current.contains(event.target) && !buttonRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    const handleScroll = (event) => {
+      if (!closeOnScroll) return;
+      const target = event.target;
+      if (dropdownRef.current && target && !dropdownRef.current.contains(target) && !buttonRef.current?.contains(target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [closeOnScroll, open, setOpen]);
+  const dropdownContent = open ? /* @__PURE__ */ jsx2(Dropdown1Context.Provider, { value: { closeDropdown, styles }, children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: dropdownRef,
+      role: "menu",
+      "data-testid": contentTestId,
+      dir: direction,
+      className: cn2(
+        dropdown1ContentVariants(),
+        styles.content,
+        !fullWidth && contentWidth,
+        maxHeight && "overflow-y-auto",
+        contentClassName
+      ),
+      style: {
+        ...positionStyle,
+        zIndex: contentZIndex,
+        maxHeight: maxHeight || void 0
+      },
+      children: /* @__PURE__ */ jsx2("div", { className: "py-1", children })
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: cn2(
+          "relative text-start",
+          fullWidth ? "block w-full" : "inline-block"
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: buttonRef,
+            type: "button",
+            disabled,
+            "aria-expanded": open,
+            "aria-haspopup": "menu",
+            onClick: () => !disabled && setOpen(!open),
+            "data-testid": testId,
+            className: cn2(
+              dropdown1TriggerVariants({ fullWidth, disabled }),
+              styles.trigger,
+              triggerClassName
+            ),
+            children: [
+              trigger,
+              /* @__PURE__ */ jsx2(ChevronDownIcon, { className: styles.triggerIcon })
+            ]
+          }
+        )
+      }
+    ),
+    open && /* @__PURE__ */ jsx2(Portal, { children: dropdownContent })
+  ] });
+}
+
+// src/components/Dropdown1Item.tsx
+import { cn as cn3 } from "@velocis/core";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Dropdown1Item({
+  children,
+  onClick,
+  closeOnSelect = DROPDOWN1_ITEM_DEFAULTS.closeOnSelect,
+  styles: stylesProp,
+  className,
+  testId
+}) {
+  const context = useDropdown1Context();
+  const itemStyles = stylesProp?.item ?? context?.styles.item;
+  const handleClick = () => {
+    onClick?.();
+    if (closeOnSelect && context?.closeDropdown) {
+      context.closeDropdown();
+    }
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      role: "menuitem",
+      tabIndex: 0,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      "data-testid": testId,
+      className: cn3(dropdown1ItemVariants(), itemStyles, className),
+      children
+    }
+  );
+}
+
+// src/components/Dropdown1SubMenu.tsx
+import { cn as cn4 } from "@velocis/core";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function Dropdown1SubMenu({
+  trigger,
+  children,
+  contentWidth = DROPDOWN1_SUBMENU_DEFAULTS.contentWidth,
+  styles: stylesProp,
+  className
+}) {
+  const context = useDropdown1Context();
+  const subMenuTriggerStyles = stylesProp?.subMenuTrigger ?? context?.styles.subMenuTrigger;
+  const subMenuContentStyles = stylesProp?.subMenuContent ?? context?.styles.subMenuContent;
+  const subMenuIconStyles = stylesProp?.subMenuIcon ?? context?.styles.subMenuIcon;
+  const [isOpen, setIsOpen] = useState2(false);
+  const timeoutRef = useRef2(null);
+  const containerRef = useRef2(null);
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsOpen(true);
+  };
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+    }, DROPDOWN1_SUBMENU_DEFAULTS.hoverDelayMs);
+  };
+  useEffect2(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: containerRef,
+      className: "relative w-full",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            role: "menuitem",
+            "aria-haspopup": "menu",
+            "aria-expanded": isOpen,
+            className: cn4(dropdown1SubMenuTriggerVariants(), subMenuTriggerStyles),
+            children: [
+              /* @__PURE__ */ jsx4("span", { className: "flex items-center gap-2", children: trigger }),
+              /* @__PURE__ */ jsx4(ChevronSubMenuIcon, { open: isOpen, className: cn4("transition-transform", subMenuIconStyles) })
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            role: "menu",
+            className: cn4(
+              dropdown1SubMenuContentVariants(),
+              subMenuContentStyles,
+              contentWidth !== "w-48" && contentWidth,
+              className
+            ),
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            children: /* @__PURE__ */ jsx4("div", { className: "py-1", children })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/hooks/useDropdown1.ts
+import { useCallback as useCallback2, useState as useState3 } from "react";
+function useDropdown1(options = {}) {
+  const [open, setOpen] = useState3(options.defaultOpen ?? false);
+  const onOpenChange = useCallback2((next) => {
+    setOpen(next);
+  }, []);
+  return {
+    open,
+    setOpen,
+    dropdownProps: { open, onOpenChange }
+  };
+}
+
+// src/index.ts
+var Dropdown1 = Object.assign(Dropdown1Root, {
+  Item: Dropdown1Item,
+  SubMenu: Dropdown1SubMenu
+});
+export {
+  DROPDOWN1_DEFAULTS,
+  DROPDOWN1_ITEM_DEFAULTS,
+  DROPDOWN1_SUBMENU_DEFAULTS,
+  Dropdown1,
+  Dropdown1Context,
+  Dropdown1Item,
+  Dropdown1Root,
+  Dropdown1SubMenu,
+  dropdown1ContentVariants,
+  dropdown1ItemVariants,
+  dropdown1Styles,
+  dropdown1SubMenuContentVariants,
+  dropdown1SubMenuTriggerVariants,
+  dropdown1TriggerVariants,
+  resolveDropdown1Styles,
+  useDropdown1,
+  useDropdown1Context
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@velocis/dropdown1",
+  "version": "0.2.0",
+  "license": "MIT",
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "@velocis/core": "0.1.0",
+    "@velocis/theme": "0.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.2",
+    "eslint": "^9.17.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8",
+    "@velocis/tsconfig": "0.0.0",
+    "@velocis/eslint-config": "0.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "lint": "eslint src",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}