@jordan-mace/chaser-design-system 1.2.3 → 1.2.4

package/dist/components/Combobox/styles.css.js

@@ -0,0 +1,142 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const comboboxContainer = styleWithLayer({
+    position: 'relative',
+    width: '100%',
+});
+export const comboboxInput = styleWithLayer({
+    width: '100%',
+    padding: '0.75rem 2.5rem 0.75rem 1rem',
+    fontSize: '14px',
+    fontFamily: vars.fontFamily.body,
+    color: vars.colors.textPrimary,
+    backgroundColor: vars.colors.inputBackground,
+    border: `1px solid ${vars.colors.inputBorder}`,
+    borderRadius: '8px',
+    outline: 'none',
+    transition: 'border-color 0.2s ease',
+    '::placeholder': {
+        color: vars.colors.inputPlaceholder,
+    },
+    ':focus-visible': {
+        outline: `2px solid ${vars.colors.inputBorderFocused}`,
+        outlineOffset: '2px',
+    },
+    ':hover': {
+        borderColor: vars.colors.inputBorderFocused,
+    },
+    selectors: {
+        '&:disabled': {
+            cursor: 'not-allowed',
+            opacity: 0.5,
+            backgroundColor: vars.colors.backgroundMuted,
+        },
+        '&:disabled:hover': {
+            borderColor: vars.colors.inputBorder,
+        },
+    },
+});
+export const comboboxInputVariants = styleVariants({
+    default: {},
+    error: {
+        border: `1px solid ${vars.colors.alertErrorBorder}`,
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.alertErrorBorder}`,
+        },
+        ':hover': {
+            borderColor: vars.colors.alertErrorBorder,
+        },
+    },
+});
+export const comboboxLabel = styleWithLayer({
+    display: 'block',
+    fontSize: '14px',
+    fontWeight: '500',
+    color: vars.colors.textPrimary,
+    marginBottom: '8px',
+});
+export const comboboxDropdown = styleWithLayer({
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    right: 0,
+    backgroundColor: vars.colors.backgroundDefault,
+    border: `1px solid ${vars.colors.borderDefault}`,
+    borderRadius: '8px',
+    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    maxHeight: '200px',
+    overflowY: 'auto',
+    zIndex: 50,
+    marginTop: '4px',
+});
+export const comboboxOption = styleWithLayer({
+    padding: '0.75rem 1rem',
+    cursor: 'pointer',
+    fontSize: '14px',
+    color: vars.colors.textPrimary,
+    transition: 'background-color 0.15s ease',
+    ':hover': {
+        backgroundColor: vars.colors.backgroundMuted,
+    },
+    ':focus-visible': {
+        outline: 'none',
+        backgroundColor: vars.colors.backgroundMuted,
+    },
+});
+export const comboboxOptionSelected = styleWithLayer({
+    backgroundColor: vars.colors.buttonBackgroundPrimary,
+    color: vars.colors.buttonTextPrimary,
+    ':hover': {
+        backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
+    },
+});
+export const comboboxOptionDisabled = styleWithLayer({
+    opacity: 0.5,
+    cursor: 'not-allowed',
+    ':hover': {
+        backgroundColor: 'transparent',
+    },
+});
+export const comboboxClearButton = styleWithLayer({
+    position: 'absolute',
+    right: '2.5rem',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    padding: '0.25rem',
+    color: vars.colors.textSecondary,
+    fontSize: '16px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ':hover': {
+        color: vars.colors.textPrimary,
+    },
+});
+export const comboboxArrow = styleWithLayer({
+    position: 'absolute',
+    right: '0.75rem',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    pointerEvents: 'none',
+    color: vars.colors.textSecondary,
+});
+export const comboboxNoResults = styleWithLayer({
+    padding: '0.75rem 1rem',
+    fontSize: '14px',
+    color: vars.colors.textSecondary,
+    textAlign: 'center',
+});
+export const comboboxHint = styleWithLayer({
+    fontSize: '12px',
+    color: vars.colors.textSecondary,
+    marginTop: '4px',
+});
+export const comboboxErrorMessage = styleWithLayer({
+    fontSize: '12px',
+    color: vars.colors.alertErrorText,
+    marginTop: '4px',
+});

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export interface ContainerProps {
+    size?: ContainerSize;
+    centerContent?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
+export default Container;

package/dist/components/Container/Container.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import Box from '../Box';
+const sizeMap = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    full: '100%',
+};
+const Container = forwardRef(({ size = 'lg', centerContent = true, children, className, style }, ref) => {
+    const sizeValue = size;
+    const containerStyle = {
+        maxWidth: sizeMap[sizeValue],
+        marginLeft: centerContent ? 'auto' : undefined,
+        marginRight: centerContent ? 'auto' : undefined,
+    };
+    return (_jsx(Box, { ref: ref, width: "100%", className: className, style: { ...containerStyle, ...style }, children: children }));
+});
+Container.displayName = 'Container';
+export default Container;

package/dist/components/Container/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Container } from './Container';
+export type { ContainerProps, ContainerSize } from './Container';

package/dist/components/Container/index.js

@@ -0,0 +1 @@
+export { default as Container } from './Container';

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerSize = 'small' | 'medium' | 'large';
+export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+    orientation?: DividerOrientation;
+    size?: DividerSize;
+}
+declare const Divider: ({ orientation, size, ...props }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export default Divider;

package/dist/components/Divider/Divider.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { divider, dividerOrientations, dividerSizes, dividerVerticalSizes, } from './styles.css';
+import Box from '../Box';
+const Divider = ({ orientation = 'horizontal', size = 'medium', ...props }) => {
+    return (_jsx(Box, { as: "hr", className: clsx(divider, dividerOrientations[orientation], orientation === 'vertical' ? dividerVerticalSizes[size] : dividerSizes[size], props.className), role: "separator", "aria-orientation": orientation, ...props }));
+};
+export default Divider;

package/dist/components/Divider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Divider } from './Divider';
+export type { DividerProps, DividerOrientation, DividerSize } from './Divider';

package/dist/components/Divider/index.js

@@ -0,0 +1 @@
+export { default as Divider } from './Divider';

package/dist/components/Divider/styles.css.d.ts

@@ -0,0 +1,4 @@
+export declare const dividerOrientations: Record<"horizontal" | "vertical", string>;
+export declare const dividerSizes: Record<"medium" | "large" | "small", string>;
+export declare const divider: string;
+export declare const dividerVerticalSizes: Record<"medium" | "large" | "small", string>;

package/dist/components/Divider/styles.css.js

@@ -0,0 +1,41 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const dividerOrientations = styleVariants({
+    horizontal: {
+        width: '100%',
+        height: '1px',
+        borderTop: `1px solid ${vars.colors.borderMuted}`,
+    },
+    vertical: {
+        width: '1px',
+        height: '100%',
+        borderLeft: `1px solid ${vars.colors.borderMuted}`,
+    },
+});
+export const dividerSizes = styleVariants({
+    small: {
+        margin: '0.5rem 0',
+    },
+    medium: {
+        margin: '1rem 0',
+    },
+    large: {
+        margin: '1.5rem 0',
+    },
+});
+export const divider = styleWithLayer({
+    border: 'none',
+    flexShrink: 0,
+});
+export const dividerVerticalSizes = styleVariants({
+    small: {
+        margin: '0 0.5rem',
+    },
+    medium: {
+        margin: '0 1rem',
+    },
+    large: {
+        margin: '0 1.5rem',
+    },
+});

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
+export type DrawerSize = 'small' | 'medium' | 'large' | 'full';
+export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    position?: DrawerPosition;
+    size?: DrawerSize;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    showCloseButton?: boolean;
+    closeOnOverlayClick?: boolean;
+}
+declare const Drawer: ({ isOpen, onClose, title, position, size, children, footer, showCloseButton, closeOnOverlayClick, className, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export default Drawer;

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useEffect } from 'react';
+import { drawer, drawerPositionVariants, drawerOverlay, drawerHeader, drawerTitle, drawerCloseButton, drawerBody, drawerFooter, } from './styles.css';
+import Box from '../Box';
+const sizeMap = {
+    left: {
+        small: '250px',
+        medium: '350px',
+        large: '450px',
+        full: '100vw',
+    },
+    right: {
+        small: '250px',
+        medium: '350px',
+        large: '450px',
+        full: '100vw',
+    },
+    top: {
+        small: '200px',
+        medium: '300px',
+        large: '400px',
+        full: '100vh',
+    },
+    bottom: {
+        small: '200px',
+        medium: '300px',
+        large: '400px',
+        full: '100vh',
+    },
+};
+const Drawer = ({ isOpen, onClose, title, position = 'right', size = 'medium', children, footer, showCloseButton = true, closeOnOverlayClick = true, className, ...props }) => {
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [isOpen]);
+    useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === 'Escape' && isOpen) {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isOpen, onClose]);
+    if (!isOpen)
+        return null;
+    const dimensionStyle = {
+        ['--drawer-width']: ['left', 'right'].includes(position)
+            ? sizeMap[position][size]
+            : undefined,
+        ['--drawer-height']: ['top', 'bottom'].includes(position)
+            ? sizeMap[position][size]
+            : undefined,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { className: drawerOverlay, onClick: closeOnOverlayClick ? onClose : undefined, "aria-hidden": "true" }), _jsxs(Box, { as: "div", role: "dialog", "aria-modal": "true", className: clsx(drawer, drawerPositionVariants[position], className), style: dimensionStyle, ...props, children: [title && (_jsxs(Box, { as: "div", className: drawerHeader, children: [_jsx(Box, { as: "h2", className: drawerTitle, children: title }), showCloseButton && (_jsx(Box, { as: "button", className: drawerCloseButton, onClick: onClose, "aria-label": "Close drawer", type: "button", children: "\u00D7" }))] })), _jsx(Box, { as: "div", className: drawerBody, children: children }), footer && _jsx(Box, { as: "div", className: drawerFooter, children: footer })] })] }));
+};
+export default Drawer;

package/dist/components/Drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Drawer } from './Drawer';
+export type { DrawerProps, DrawerPosition, DrawerSize } from './Drawer';

package/dist/components/Drawer/index.js

@@ -0,0 +1 @@
+export { default as Drawer } from './Drawer';

package/dist/components/Drawer/styles.css.d.ts

@@ -0,0 +1,8 @@
+export declare const drawerPositionVariants: Record<"bottom" | "left" | "right" | "top", string>;
+export declare const drawerOverlay: string;
+export declare const drawer: string;
+export declare const drawerHeader: string;
+export declare const drawerTitle: string;
+export declare const drawerCloseButton: string;
+export declare const drawerBody: string;
+export declare const drawerFooter: string;

package/dist/components/Drawer/styles.css.js

@@ -0,0 +1,125 @@
+import { styleVariants, keyframes } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+const slideInFromLeft = keyframes({
+    from: { transform: 'translateX(-100%)' },
+    to: { transform: 'translateX(0)' },
+});
+const slideInFromRight = keyframes({
+    from: { transform: 'translateX(100%)' },
+    to: { transform: 'translateX(0)' },
+});
+const slideInFromTop = keyframes({
+    from: { transform: 'translateY(-100%)' },
+    to: { transform: 'translateY(0)' },
+});
+const slideInFromBottom = keyframes({
+    from: { transform: 'translateY(100%)' },
+    to: { transform: 'translateY(0)' },
+});
+const fadeIn = keyframes({
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+});
+export const drawerPositionVariants = styleVariants({
+    left: {
+        top: 0,
+        left: 0,
+        bottom: 0,
+        width: 'var(--drawer-width, 300px)',
+        maxWidth: '100vw',
+        animation: `${slideInFromLeft} 0.3s ease-out`,
+    },
+    right: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: 'var(--drawer-width, 300px)',
+        maxWidth: '100vw',
+        animation: `${slideInFromRight} 0.3s ease-out`,
+    },
+    top: {
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 'var(--drawer-height, 300px)',
+        maxHeight: '100vh',
+        animation: `${slideInFromTop} 0.3s ease-out`,
+    },
+    bottom: {
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: 'var(--drawer-height, 300px)',
+        maxHeight: '100vh',
+        animation: `${slideInFromBottom} 0.3s ease-out`,
+    },
+});
+export const drawerOverlay = styleWithLayer({
+    position: 'fixed',
+    inset: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    animation: `${fadeIn} 0.2s ease-out`,
+    zIndex: 40,
+});
+export const drawer = styleWithLayer({
+    position: 'fixed',
+    background: vars.colors.backgroundDefault,
+    boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+    zIndex: 50,
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+});
+export const drawerHeader = styleWithLayer({
+    padding: '1.25rem',
+    borderBottom: `1px solid ${vars.colors.borderMuted}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '1rem',
+});
+export const drawerTitle = styleWithLayer({
+    fontFamily: vars.fontFamily.heading,
+    fontSize: '1.25rem',
+    fontWeight: '600',
+    color: vars.colors.textPrimary,
+    margin: 0,
+});
+export const drawerCloseButton = styleWithLayer({
+    background: 'none',
+    border: 'none',
+    padding: '0.5rem',
+    cursor: 'pointer',
+    borderRadius: '0.375rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: vars.colors.textSecondary,
+    fontSize: '1.5rem',
+    lineHeight: '1',
+    transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
+    selectors: {
+        '&:hover': {
+            backgroundColor: vars.colors.borderMuted,
+            color: vars.colors.textPrimary,
+        },
+        '&:focus-visible': {
+            outline: '2px solid var(--drawer-focus-ring, currentColor)',
+            outlineOffset: '2px',
+        },
+    },
+});
+export const drawerBody = styleWithLayer({
+    padding: '1.25rem',
+    overflowY: 'auto',
+    flex: 1,
+});
+export const drawerFooter = styleWithLayer({
+    padding: '1.25rem',
+    borderTop: `1px solid ${vars.colors.borderMuted}`,
+    display: 'flex',
+    gap: '0.75rem',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+});

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export type DropdownMenuPosition = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+export type DropdownMenuItemVariant = 'default' | 'destructive' | 'disabled';
+export interface DropdownMenuItemProps {
+    label: string;
+    onClick?: () => void;
+    variant?: DropdownMenuItemVariant;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface DropdownMenuGroupProps {
+    label?: string;
+    items: DropdownMenuItemProps[];
+}
+export interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    trigger: React.ReactNode;
+    items?: DropdownMenuItemProps[];
+    groups?: DropdownMenuGroupProps[];
+    position?: DropdownMenuPosition;
+    closeOnItemClick?: boolean;
+}
+declare const DropdownMenu: ({ trigger, items, groups, position, closeOnItemClick, className, ...props }: DropdownMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default DropdownMenu;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import React, { useState, useRef, useEffect } from 'react';
+import { dropdownMenuContainer, dropdownMenuTrigger, dropdownMenuContent, dropdownMenuPositionVariants, dropdownMenuItem, dropdownMenuItemVariants, dropdownMenuSeparator, dropdownMenuGroup, dropdownMenuLabel, } from './styles.css';
+import Box from '../Box';
+const DropdownMenu = ({ trigger, items = [], groups = [], position = 'bottomLeft', closeOnItemClick = true, className, ...props }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === 'Escape' && isOpen) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isOpen]);
+    const handleItemClick = (item) => {
+        if (item.disabled || item.variant === 'disabled')
+            return;
+        item.onClick?.();
+        if (closeOnItemClick) {
+            setIsOpen(false);
+        }
+    };
+    const renderItem = (item, index) => (_jsxs(Box, { as: "button", className: clsx(dropdownMenuItem, dropdownMenuItemVariants[item.disabled || item.variant === 'disabled' ? 'disabled' : item.variant || 'default']), onClick: () => handleItemClick(item), disabled: item.disabled || item.variant === 'disabled', role: "menuitem", type: "button", children: [item.icon && _jsx("span", { children: item.icon }), item.label] }, index));
+    const renderGroup = (group, index) => (_jsxs(Box, { className: dropdownMenuGroup, role: "group", children: [group.label && (_jsx(Box, { as: "div", className: dropdownMenuLabel, role: "presentation", children: group.label })), group.items.map((item, itemIndex) => renderItem(item, itemIndex))] }, index));
+    return (_jsxs(Box, { ref: containerRef, className: clsx(dropdownMenuContainer, className), ...props, children: [_jsx(Box, { className: dropdownMenuTrigger, onClick: () => setIsOpen(!isOpen), "aria-expanded": isOpen, "aria-haspopup": "true", children: trigger }), isOpen && (_jsxs(Box, { className: clsx(dropdownMenuContent, dropdownMenuPositionVariants[position]), role: "menu", "aria-orientation": "vertical", children: [items.length > 0 && (_jsx(Box, { className: dropdownMenuGroup, children: items.map((item, index) => renderItem(item, index)) })), groups.map((group, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(Box, { as: "div", className: dropdownMenuSeparator, role: "separator" }), renderGroup(group, index)] }, index)))] }))] }));
+};
+export default DropdownMenu;

package/dist/components/DropdownMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DropdownMenu } from './DropdownMenu';
+export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuPosition, DropdownMenuItemVariant } from './DropdownMenu';

package/dist/components/DropdownMenu/index.js

@@ -0,0 +1 @@
+export { default as DropdownMenu } from './DropdownMenu';

package/dist/components/DropdownMenu/styles.css.d.ts

@@ -0,0 +1,9 @@
+export declare const dropdownMenuContainer: string;
+export declare const dropdownMenuTrigger: string;
+export declare const dropdownMenuContent: string;
+export declare const dropdownMenuPositionVariants: Record<"topLeft" | "topRight" | "bottomLeft" | "bottomRight", string>;
+export declare const dropdownMenuItem: string;
+export declare const dropdownMenuItemVariants: Record<"default" | "disabled" | "destructive", string>;
+export declare const dropdownMenuSeparator: string;
+export declare const dropdownMenuGroup: string;
+export declare const dropdownMenuLabel: string;

package/dist/components/DropdownMenu/styles.css.js

@@ -0,0 +1,93 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const dropdownMenuContainer = styleWithLayer({
+    position: 'relative',
+    display: 'inline-block',
+});
+export const dropdownMenuTrigger = styleWithLayer({
+    cursor: 'pointer',
+    userSelect: 'none',
+});
+export const dropdownMenuContent = styleWithLayer({
+    position: 'absolute',
+    backgroundColor: vars.colors.backgroundDefault,
+    border: `1px solid ${vars.colors.borderDefault}`,
+    borderRadius: '0.5rem',
+    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    minWidth: '160px',
+    zIndex: 50,
+    overflow: 'hidden',
+    marginTop: '0.25rem',
+});
+export const dropdownMenuPositionVariants = styleVariants({
+    bottomLeft: {
+        top: '100%',
+        left: 0,
+    },
+    bottomRight: {
+        top: '100%',
+        right: 0,
+    },
+    topLeft: {
+        bottom: '100%',
+        left: 0,
+        marginTop: 0,
+        marginBottom: '0.25rem',
+    },
+    topRight: {
+        bottom: '100%',
+        right: 0,
+        marginTop: 0,
+        marginBottom: '0.25rem',
+    },
+});
+export const dropdownMenuItem = styleWithLayer({
+    padding: '0.75rem 1rem',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+    fontSize: '14px',
+    color: vars.colors.textPrimary,
+    transition: 'background-color 0.15s ease',
+    ':hover': {
+        backgroundColor: vars.colors.backgroundMuted,
+    },
+    ':focus-visible': {
+        outline: 'none',
+        backgroundColor: vars.colors.backgroundMuted,
+    },
+});
+export const dropdownMenuItemVariants = styleVariants({
+    default: {},
+    destructive: {
+        color: vars.colors.alertErrorText,
+        ':hover': {
+            backgroundColor: vars.colors.alertErrorBackground,
+        },
+    },
+    disabled: {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+        ':hover': {
+            backgroundColor: 'transparent',
+        },
+    },
+});
+export const dropdownMenuSeparator = styleWithLayer({
+    height: '1px',
+    backgroundColor: vars.colors.borderMuted,
+    margin: '0.5rem 0',
+});
+export const dropdownMenuGroup = styleWithLayer({
+    padding: '0.5rem 0',
+});
+export const dropdownMenuLabel = styleWithLayer({
+    padding: '0.5rem 1rem',
+    fontSize: '12px',
+    fontWeight: '600',
+    color: vars.colors.textSecondary,
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+});