@corefoundry-labs/forge-ui 1.0.2 → 1.1.0

package/dist/componentsV2/navigation/TabsV2/TabsV2.module.css

@@ -0,0 +1,128 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cf-v2-tabs-list-gap);
+  box-sizing: border-box;
+  min-width: 0;
+  padding: var(--cf-v2-tabs-padding);
+  border-radius: var(--cf-v2-tabs-radius);
+  background: var(--cf-v2-surface);
+  color: var(--cf-v2-on-surface);
+  font-family: inherit;
+}
+
+.list {
+  display: flex;
+  gap: var(--cf-v2-tabs-gap);
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.tab {
+  display: inline-flex;
+  flex: none;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: var(--cf-v2-tabs-tab-gap);
+  box-sizing: border-box;
+  margin: 0;
+  padding-block: var(--cf-v2-tabs-tab-padding-block);
+  padding-inline: var(--cf-v2-tabs-tab-padding-inline);
+  border: 0;
+  background: transparent;
+  color: var(--cf-v2-on-surface);
+  font-family: inherit;
+  font-weight: var(--cf-v2-tabs-font-weight);
+  line-height: normal;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color var(--cf-v2-tabs-transition-duration) ease;
+}
+
+.sm {
+  height: var(--cf-v2-tabs-height-sm);
+  min-width: var(--cf-v2-tabs-min-width-sm);
+  font-size: var(--cf-v2-tabs-font-size-sm);
+}
+
+.md {
+  height: var(--cf-v2-tabs-height-md);
+  min-width: var(--cf-v2-tabs-min-width-md);
+  font-size: var(--cf-v2-tabs-font-size-md);
+}
+
+.pill {
+  border-radius: var(--cf-v2-tabs-pill-radius);
+}
+
+.indicator {
+  height: var(--cf-v2-tabs-indicator-height);
+  margin-inline: var(--cf-v2-tabs-indicator-inset);
+  border-radius: var(--cf-v2-tabs-indicator-radius);
+}
+
+.tab:hover:not(:disabled, [aria-selected='true']) {
+  background: var(--cf-v2-surface-container-hover);
+}
+
+.tab[aria-selected='true'] {
+  color: var(--cf-v2-action-primary);
+}
+
+.tab[aria-selected='true'] .indicator {
+  background: var(--cf-v2-action-primary);
+}
+
+.pill[aria-selected='true'] {
+  background: var(--cf-v2-surface-container);
+}
+
+.tab:focus-visible {
+  outline: var(--cf-v2-tabs-focus-width) solid var(--cf-v2-focus-ring);
+  outline-offset: calc(-1 * var(--cf-v2-tabs-focus-width));
+}
+
+.tab:disabled {
+  opacity: var(--cf-v2-tabs-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cf-v2-tabs-panel-gap);
+  box-sizing: border-box;
+  padding: var(--cf-v2-tabs-panel-padding);
+  border-radius: var(--cf-v2-tabs-panel-radius);
+  background: var(--cf-v2-surface-container);
+  font-size: var(--cf-v2-tabs-panel-font-size);
+}
+
+.panel[hidden] {
+  display: none;
+}
+
+.panel:focus-visible {
+  outline: var(--cf-v2-tabs-focus-width) solid var(--cf-v2-focus-ring);
+  outline-offset: calc(-1 * var(--cf-v2-tabs-focus-width));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .tab[aria-selected='true'] .indicator {
+    background: Highlight;
+    forced-color-adjust: none;
+  }
+
+  .pill[aria-selected='true'] {
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+}

package/dist/componentsV2/navigation/TabsV2/index.d.ts

@@ -0,0 +1,3 @@
+export { TabsV2 } from './TabsV2';
+export type { TabsV2Activation, TabsV2Item, TabsV2Props, TabsV2Size, TabsV2Variant } from './TabsV2';
+//# sourceMappingURL=index.d.ts.map

package/dist/componentsV2/navigation/TabsV2/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/navigation/TabsV2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC"}

package/dist/componentsV2/navigation/TabsV2/index.js

@@ -0,0 +1 @@
+export { TabsV2 } from './TabsV2';

package/dist/componentsV2/overlays/DialogV2/DialogV2.d.ts

@@ -0,0 +1,22 @@
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { type DialogHTMLAttributes, type ReactNode, type RefObject } from 'react';
+export type DialogV2Size = 'sm' | 'md' | 'lg';
+type DialogV2Base = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'open' | 'title' | 'children' | 'aria-labelledby' | 'aria-describedby' | 'aria-modal'> & {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    size?: DialogV2Size;
+    initialFocusRef?: RefObject<HTMLElement | null>;
+};
+export type DialogV2Props = DialogV2Base & ({
+    closeOnEscape?: true;
+    footer?: ReactNode;
+} | {
+    closeOnEscape: false;
+    footer: ReactNode;
+});
+export declare const DialogV2: import("react").ForwardRefExoticComponent<DialogV2Props & import("react").RefAttributes<HTMLDialogElement>>;
+export {};
+//# sourceMappingURL=DialogV2.d.ts.map

package/dist/componentsV2/overlays/DialogV2/DialogV2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/overlays/DialogV2/DialogV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,EAOL,KAAK,oBAAoB,EAEzB,KAAK,SAAS,EACd,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,KAAK,YAAY,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,iBAAiB,GAAG,kBAAkB,GAAG,YAAY,CACtF,GAAG;IACF,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,GACtC,CAAC;IAAE,aAAa,CAAC,EAAE,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,aAAa,EAAE,KAAK,CAAC;IAAC,MAAM,EAAE,SAAS,CAAA;CAAE,CAAC,CAAC;AAE/F,eAAO,MAAM,QAAQ,6GAqHnB,CAAC"}

package/dist/componentsV2/overlays/DialogV2/DialogV2.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState, } from 'react';
+import { focusableIn, lockScroll, returnFocus, useEscapeLayer, useOpenLifecycle } from '../layer';
+import styles from './DialogV2.module.css';
+export const DialogV2 = forwardRef(function DialogV2({ open, onOpenChange, title, description, children, footer, size = 'sm', closeOnEscape = true, initialFocusRef, className, onCancel, onClose, onKeyDown, ...props }, ref) {
+    const id = useId();
+    const dialogRef = useRef(null);
+    const bodyRef = useRef(null);
+    const [scrollable, setScrollable] = useState(false);
+    useImperativeHandle(ref, () => dialogRef.current);
+    const escape = () => {
+        if (closeOnEscape)
+            onOpenChange(false);
+    };
+    useEscapeLayer(open, dialogRef, escape);
+    useOpenLifecycle(open, () => {
+        const dialog = dialogRef.current;
+        const previous = document.activeElement;
+        if (dialog && !dialog.open)
+            dialog.showModal?.();
+        initialFocusRef?.current?.focus();
+        const unlock = lockScroll();
+        return () => {
+            unlock();
+            dialog?.close?.();
+            returnFocus(previous);
+        };
+    });
+    useEffect(() => {
+        const body = bodyRef.current;
+        if (!open || !body || typeof ResizeObserver === 'undefined')
+            return;
+        const measure = () => setScrollable(body.scrollHeight > body.clientHeight);
+        const observer = new ResizeObserver(measure);
+        observer.observe(body);
+        for (const child of body.children)
+            observer.observe(child);
+        measure();
+        return () => observer.disconnect();
+    }, [open, children]);
+    const trapFocus = (event) => {
+        onKeyDown?.(event);
+        if (event.key !== 'Tab' || event.defaultPrevented)
+            return;
+        const dialog = event.currentTarget;
+        const items = focusableIn(dialog);
+        const first = items[0];
+        const last = items[items.length - 1];
+        if (!first || !last) {
+            event.preventDefault();
+            return;
+        }
+        const active = document.activeElement;
+        if (event.shiftKey && (active === first || active === dialog)) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    };
+    const cancel = (event) => {
+        onCancel?.(event);
+        if (event.target !== event.currentTarget)
+            return;
+        event.preventDefault();
+        escape();
+    };
+    const close = (event) => {
+        onClose?.(event);
+        if (event.target === event.currentTarget && open && !event.currentTarget.open)
+            onOpenChange(false);
+    };
+    return (_jsxs("dialog", { ...props, ref: dialogRef, "aria-modal": "true", "aria-labelledby": `${id}-title`, "aria-describedby": description != null ? `${id}-description` : undefined, tabIndex: -1, "data-size": size, onCancel: cancel, onClose: close, onKeyDown: trapFocus, className: [styles.dialog, styles[size], className].filter(Boolean).join(' '), children: [_jsx("h2", { id: `${id}-title`, className: styles.title, children: title }), description != null && (_jsx("div", { id: `${id}-description`, className: styles.description, children: description })), children != null && (_jsx("div", { ref: bodyRef, className: styles.body, tabIndex: scrollable ? 0 : undefined, children: children })), footer != null && _jsx("div", { className: styles.footer, children: footer })] }));
+});

package/dist/componentsV2/overlays/DialogV2/DialogV2.module.css

@@ -0,0 +1,91 @@
+.dialog {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: min(var(--dialog-width), calc(100vw - 2 * var(--cf-v2-overlay-viewport-margin)));
+  max-height: calc(100dvh - 2 * var(--cf-v2-overlay-viewport-margin));
+  margin: auto;
+  padding: var(--cf-v2-dialog-padding-top) var(--cf-v2-dialog-padding-inline) var(--cf-v2-dialog-padding-bottom);
+  border: var(--cf-v2-dialog-border-width) solid var(--cf-v2-outline);
+  border-radius: var(--cf-v2-dialog-radius);
+  background: var(--cf-v2-surface-container);
+  color: var(--cf-v2-on-surface);
+  font-family: inherit;
+  line-height: normal;
+}
+
+.dialog[open] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cf-v2-dialog-gap);
+}
+
+.dialog:focus {
+  outline: none;
+}
+
+.dialog:focus-visible {
+  outline: var(--cf-v2-dialog-focus-width) solid var(--cf-v2-focus-ring);
+  outline-offset: calc(-1 * var(--cf-v2-dialog-focus-width));
+}
+
+.dialog::backdrop {
+  background: color-mix(in srgb, var(--cf-v2-scrim) calc(var(--cf-v2-dialog-backdrop-opacity) * 100%), transparent);
+}
+
+.sm {
+  --dialog-width: var(--cf-v2-dialog-width-sm);
+  --dialog-title-size: var(--cf-v2-dialog-title-font-size-sm);
+}
+
+.md {
+  --dialog-width: var(--cf-v2-dialog-width-md);
+  --dialog-title-size: var(--cf-v2-dialog-title-font-size-md);
+}
+
+.lg {
+  --dialog-width: var(--cf-v2-dialog-width-lg);
+  --dialog-title-size: var(--cf-v2-dialog-title-font-size-md);
+}
+
+.title {
+  flex: none;
+  margin: 0;
+  font: inherit;
+  font-size: var(--dialog-title-size);
+  font-weight: var(--cf-v2-dialog-title-font-weight);
+  overflow-wrap: anywhere;
+}
+
+.description {
+  flex: none;
+  color: color-mix(in srgb, var(--cf-v2-on-surface) calc(var(--cf-v2-dialog-description-opacity) * 100%), transparent);
+  font-size: var(--cf-v2-dialog-description-font-size);
+  overflow-wrap: anywhere;
+}
+
+.body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  font-size: var(--cf-v2-dialog-description-font-size);
+}
+
+.body:focus-visible {
+  outline: var(--cf-v2-dialog-focus-width) solid var(--cf-v2-focus-ring);
+  outline-offset: calc(-1 * var(--cf-v2-dialog-focus-width));
+}
+
+.footer {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--cf-v2-dialog-footer-gap);
+}
+
+@media (pointer: coarse) {
+  .footer > * {
+    min-height: var(--cf-v2-dialog-touch-target);
+  }
+}

package/dist/componentsV2/overlays/DialogV2/index.d.ts

@@ -0,0 +1,3 @@
+export { DialogV2 } from './DialogV2';
+export type { DialogV2Props, DialogV2Size } from './DialogV2';
+//# sourceMappingURL=index.d.ts.map

package/dist/componentsV2/overlays/DialogV2/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/overlays/DialogV2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

package/dist/componentsV2/overlays/DialogV2/index.js

@@ -0,0 +1 @@
+export { DialogV2 } from './DialogV2';

package/dist/componentsV2/overlays/DropdownMenuV2/DropdownMenuV2.d.ts

@@ -0,0 +1,40 @@
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type OverlayTrigger } from '../layer';
+import type { OverlayAlign, OverlayPlacement } from '../position';
+export type DropdownMenuV2Density = 'compact' | 'comfortable';
+export type DropdownMenuV2Action = {
+    type?: 'item';
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    destructive?: boolean;
+    onSelect?: () => void;
+};
+export type DropdownMenuV2Separator = {
+    type: 'separator';
+    id: string;
+};
+export type DropdownMenuV2Item = DropdownMenuV2Action | DropdownMenuV2Separator;
+export type DropdownMenuV2Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role' | 'popover'> & {
+    trigger: OverlayTrigger;
+    items: readonly DropdownMenuV2Item[];
+    density?: DropdownMenuV2Density;
+    placement?: OverlayPlacement;
+    align?: OverlayAlign;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+export declare const DropdownMenuV2: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "role" | "popover" | "children"> & {
+    trigger: OverlayTrigger;
+    items: readonly DropdownMenuV2Item[];
+    density?: DropdownMenuV2Density;
+    placement?: OverlayPlacement;
+    align?: OverlayAlign;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=DropdownMenuV2.d.ts.map

package/dist/componentsV2/overlays/DropdownMenuV2/DropdownMenuV2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuV2.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/overlays/DropdownMenuV2/DropdownMenuV2.tsx"],"names":[],"mappings":"AAAA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,EAOL,KAAK,cAAc,EAInB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAOL,KAAK,cAAc,EACpB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,aAAa,CAAC;AAE9D,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AACxE,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GAAG,uBAAuB,CAAC;AAEhF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;IACxG,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACrC,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;AAMF,eAAO,MAAM,cAAc;aAdhB,cAAc;WAChB,SAAS,kBAAkB,EAAE;cAC1B,qBAAqB;gBACnB,gBAAgB;YACpB,YAAY;WACb,OAAO;kBACA,OAAO;mBACN,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;kDAoLtC,CAAC"}

package/dist/componentsV2/overlays/DropdownMenuV2/DropdownMenuV2.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import '@corefoundry-labs/forge-tokens/theme-v2/tokens.css';
+import { cloneElement, forwardRef, useEffect, useId, useImperativeHandle, useRef, } from 'react';
+import { chain, useAnchoredPanel, useDismiss, useEscapeLayer, useOpenState, useTriggerRef, } from '../layer';
+import styles from './DropdownMenuV2.module.css';
+const typeaheadReset = 500;
+export const DropdownMenuV2 = forwardRef(function DropdownMenuV2({ trigger, items, density = 'compact', placement = 'bottom', align = 'start', open: openProp, defaultOpen, onOpenChange, id, className, onKeyDown, 'aria-label': label, 'aria-labelledby': labelledBy, ...props }, ref) {
+    const generated = useId();
+    const menuId = id ?? generated;
+    const triggerId = trigger.props.id ?? `${menuId}-trigger`;
+    const [open, setOpen] = useOpenState(openProp, defaultOpen, onOpenChange);
+    const panelRef = useRef(null);
+    const anchorRef = useRef(null);
+    const attachTrigger = useTriggerRef(anchorRef, trigger.props.ref);
+    const entry = useRef('menu');
+    const query = useRef('');
+    const timer = useRef(undefined);
+    useImperativeHandle(ref, () => panelRef.current);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const actions = () => [
+        ...(panelRef.current?.querySelectorAll('[role="menuitem"]:not(:disabled)') ?? []),
+    ];
+    const focus = (element) => element?.focus({ preventScroll: true });
+    const close = () => setOpen(false);
+    useEscapeLayer(open, panelRef, close);
+    useDismiss(open, panelRef, anchorRef, close);
+    useAnchoredPanel({
+        open,
+        anchorRef,
+        panelRef,
+        placement,
+        align,
+        restoreFocus: true,
+        onShown: () => {
+            const enabled = actions();
+            const target = { first: enabled[0], last: enabled[enabled.length - 1], menu: undefined }[entry.current];
+            focus(target ?? panelRef.current);
+        },
+    });
+    const openAt = (position) => {
+        entry.current = position;
+        setOpen(true);
+    };
+    const onTriggerClick = (event) => {
+        if (open)
+            close();
+        else
+            openAt(event.detail === 0 ? 'first' : 'menu');
+    };
+    const onTriggerKeyDown = (event) => {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
+            return;
+        event.preventDefault();
+        openAt(event.key === 'ArrowDown' ? 'first' : 'last');
+    };
+    const typeahead = (key, enabled, index) => {
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+            query.current = '';
+        }, typeaheadReset);
+        query.current += key.toLowerCase();
+        const search = new Set(query.current).size === 1 ? query.current.charAt(0) : query.current;
+        const start = search.length === 1 ? index + 1 : Math.max(index, 0);
+        const ordered = [...enabled.slice(start), ...enabled.slice(0, start)];
+        focus(ordered.find((item) => item.textContent?.trim().toLowerCase().startsWith(search)));
+    };
+    const onMenuKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        event.currentTarget.dataset.input = 'keyboard';
+        const enabled = actions();
+        const index = enabled.indexOf(document.activeElement);
+        const moves = {
+            ArrowDown: enabled[(index + 1) % enabled.length],
+            ArrowUp: enabled[index <= 0 ? enabled.length - 1 : index - 1],
+            Home: enabled[0],
+            End: enabled[enabled.length - 1],
+        };
+        if (event.key in moves) {
+            event.preventDefault();
+            focus(moves[event.key]);
+        }
+        else if (event.key === 'Tab') {
+            focus(anchorRef.current);
+            close();
+        }
+        else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            if (event.key === ' ' && !query.current)
+                return;
+            event.preventDefault();
+            typeahead(event.key, enabled, index);
+        }
+    };
+    const select = (item) => {
+        focus(anchorRef.current);
+        close();
+        item.onSelect?.();
+    };
+    const hover = (event) => {
+        if (panelRef.current)
+            panelRef.current.dataset.input = 'pointer';
+        if (document.activeElement !== event.currentTarget)
+            focus(event.currentTarget);
+    };
+    const withIcons = items.some((item) => item.type !== 'separator' && item.icon != null);
+    return (_jsxs(_Fragment, { children: [cloneElement(trigger, {
+                ref: attachTrigger,
+                id: triggerId,
+                'aria-haspopup': 'menu',
+                'aria-expanded': open,
+                onClick: chain(trigger.props.onClick, onTriggerClick),
+                onKeyDown: chain(trigger.props.onKeyDown, onTriggerKeyDown),
+            }), _jsx("div", { ...props, ref: panelRef, id: menuId, role: "menu", popover: "manual", tabIndex: -1, "aria-label": label, "aria-labelledby": labelledBy ?? (label ? undefined : triggerId), "data-state": open ? 'open' : 'closed', "data-density": density, onKeyDown: onMenuKeyDown, className: [styles.menu, styles[density], className].filter(Boolean).join(' '), children: items.map((item) => item.type === 'separator' ? (_jsx("div", { role: "separator", className: styles.separator }, item.id)) : (_jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, disabled: item.disabled, "data-destructive": item.destructive || undefined, onClick: () => select(item), onPointerMove: hover, onPointerLeave: () => focus(panelRef.current), className: [styles.item, item.destructive && styles.destructive].filter(Boolean).join(' '), children: [withIcons && (_jsx("span", { className: styles.icon, "aria-hidden": "true", children: item.icon })), _jsx("span", { className: styles.label, children: item.label })] }, item.id))) })] }));
+});

package/dist/componentsV2/overlays/DropdownMenuV2/DropdownMenuV2.module.css

@@ -0,0 +1,122 @@
+.menu {
+  --overlay-offset: var(--cf-v2-menu-offset);
+  position: fixed;
+  inset: auto;
+  box-sizing: border-box;
+  max-width: calc(100vw - 2 * var(--cf-v2-overlay-viewport-margin));
+  max-height: calc(100dvh - 2 * var(--cf-v2-overlay-viewport-margin));
+  margin: 0;
+  padding: var(--cf-v2-menu-padding-block) var(--cf-v2-menu-padding-inline);
+  overflow: auto;
+  border: var(--cf-v2-menu-border-width) solid var(--cf-v2-outline);
+  border-radius: var(--cf-v2-menu-radius);
+  background: var(--cf-v2-surface-container);
+  color: var(--cf-v2-on-surface);
+  font-family: inherit;
+  font-size: var(--cf-v2-menu-font-size);
+  line-height: normal;
+}
+
+.menu[data-state='open'] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cf-v2-menu-gap);
+}
+
+.menu[data-state='closed'] {
+  display: none;
+}
+
+.menu:focus {
+  outline: none;
+}
+
+.compact {
+  width: var(--cf-v2-menu-width-compact);
+}
+
+.comfortable {
+  width: var(--cf-v2-menu-width-comfortable);
+}
+
+.item {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--cf-v2-menu-item-gap);
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--cf-v2-menu-item-height);
+  margin: 0;
+  padding: var(--cf-v2-menu-item-padding-block) var(--cf-v2-menu-item-padding-inline);
+  border: 0;
+  border-radius: var(--cf-v2-menu-item-radius);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: var(--cf-v2-menu-font-weight);
+  text-align: start;
+  cursor: pointer;
+}
+
+.item:focus {
+  outline: none;
+  background: var(--cf-v2-surface-container-hover);
+}
+
+.item:focus-visible {
+  outline: var(--cf-v2-menu-focus-width) solid var(--cf-v2-focus-ring);
+  outline-offset: calc(-1 * var(--cf-v2-menu-focus-width));
+}
+
+.menu[data-input='pointer'] .item:focus-visible {
+  outline: none;
+}
+
+.item:disabled {
+  opacity: var(--cf-v2-menu-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.destructive {
+  color: var(--cf-v2-error);
+}
+
+.icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--cf-v2-menu-item-icon-size);
+}
+
+.icon svg {
+  width: 100%;
+  height: auto;
+}
+
+.label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.separator {
+  flex: none;
+  height: var(--cf-v2-menu-border-width);
+  background: var(--cf-v2-outline);
+  opacity: var(--cf-v2-menu-separator-opacity);
+}
+
+@media (pointer: coarse) {
+  .item {
+    min-height: var(--cf-v2-menu-touch-target);
+  }
+}
+
+@media (forced-colors: active) {
+  .item:focus {
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+}

package/dist/componentsV2/overlays/DropdownMenuV2/index.d.ts

@@ -0,0 +1,3 @@
+export { DropdownMenuV2 } from './DropdownMenuV2';
+export type { DropdownMenuV2Action, DropdownMenuV2Density, DropdownMenuV2Item, DropdownMenuV2Props, DropdownMenuV2Separator, } from './DropdownMenuV2';
+//# sourceMappingURL=index.d.ts.map

package/dist/componentsV2/overlays/DropdownMenuV2/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/overlays/DropdownMenuV2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,kBAAkB,EAClB,mBAAmB,EACnB,uBAAuB,GACxB,MAAM,kBAAkB,CAAC"}

package/dist/componentsV2/overlays/DropdownMenuV2/index.js

@@ -0,0 +1 @@
+export { DropdownMenuV2 } from './DropdownMenuV2';