silver-ui 0.1.0

package/dist/chunk-YRXGCYT2.js

@@ -0,0 +1,354 @@
+import { Divider } from './chunk-CVH6X6ND.js';
+import { Item } from './chunk-CA6645TQ.js';
+import { Popover } from './chunk-2QK2NZN5.js';
+import { Button } from './chunk-VLIQPSPM.js';
+import { Text } from './chunk-PZO5MZ46.js';
+import { cx as cx$1 } from './chunk-OKKL652L.js';
+import { Icon } from './chunk-4W7L63LH.js';
+import { cva } from './chunk-NAELQLZN.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { ChevronDown } from 'lucide-react';
+import { createContext, use, useCallback, useState, useRef, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DropdownMenuContext = createContext(null);
+DropdownMenuContext.displayName = "DropdownMenuContext";
+function useDropdownMenuContext() {
+  return use(DropdownMenuContext);
+}
+var menuItemRecipe = cva({
+  base: {
+    all: "unset",
+    boxSizing: "border-box",
+    display: "block",
+    w: "full",
+    borderRadius: "md",
+    color: "fg",
+    cursor: "pointer",
+    fontFamily: "body",
+    textAlign: "start",
+    _hover: { bg: "bg.subtle" },
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffsetTight"
+    },
+    _disabled: {
+      opacity: 0.5,
+      cursor: "not-allowed"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        minH: "component.sm",
+        "& > *": { py: "0.5", px: "1.5", gap: "1.5" }
+      },
+      md: {
+        minH: "component.md",
+        "& > *": { py: "1.5", px: "2" }
+      },
+      lg: {
+        minH: "component.lg",
+        "& > *": { py: "2.5", px: "2.5", gap: "2.5" }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var styles = {
+  icon: css({
+    display: "inline-flex",
+    flexShrink: 0,
+    color: "fg.muted"
+  })
+};
+function DropdownMenuItem({
+  className,
+  "data-testid": dataTestId,
+  description,
+  endContent,
+  icon,
+  isDisabled = false,
+  label,
+  onClick,
+  ref,
+  style
+}) {
+  const context = useDropdownMenuContext();
+  const menuSize = context?.menuSize ?? "md";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cx(menuItemRecipe({ size: menuSize }), className),
+      "data-testid": dataTestId,
+      disabled: isDisabled,
+      onClick: () => {
+        onClick?.();
+        context?.closeMenu();
+      },
+      ref,
+      role: "menuitem",
+      style,
+      type: "button",
+      children: /* @__PURE__ */ jsx(
+        Item,
+        {
+          as: "span",
+          description,
+          endContent,
+          label,
+          startContent: icon != null ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon, size: "sm" }) }) : null
+        }
+      )
+    }
+  );
+}
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var menuStyles = {
+  section: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5"
+  }),
+  heading: css({
+    px: "2",
+    py: "1",
+    userSelect: "none"
+  }),
+  divider: css({
+    my: "1"
+  })
+};
+function formatMenuWidth(value) {
+  if (value == null) {
+    return void 0;
+  }
+  return typeof value === "number" ? `${value}px` : value;
+}
+function renderMenuItems(items) {
+  return items.map((item, index) => {
+    if ("type" in item && item.type === "divider") {
+      return /* @__PURE__ */ jsx(Divider, { className: menuStyles.divider }, `divider-${index}`);
+    }
+    if ("type" in item) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "aria-label": item.title,
+          className: menuStyles.section,
+          role: "group",
+          children: [
+            item.title != null ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "span",
+                className: menuStyles.heading,
+                color: "secondary",
+                type: "supporting",
+                children: item.title
+              }
+            ) : null,
+            item.items.map((sectionItem) => /* @__PURE__ */ jsx(
+              DropdownMenuItem,
+              {
+                description: sectionItem.description,
+                icon: sectionItem.icon,
+                isDisabled: sectionItem.isDisabled,
+                label: sectionItem.label,
+                onClick: sectionItem.onClick
+              },
+              sectionItem.label
+            ))
+          ]
+        },
+        `section-${item.title ?? index}`
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      DropdownMenuItem,
+      {
+        description: item.description,
+        icon: item.icon,
+        isDisabled: item.isDisabled,
+        label: item.label,
+        onClick: item.onClick
+      },
+      item.label
+    );
+  });
+}
+function useMenuKeyboard(menuRef, onClose) {
+  const getMenuItems = useCallback(() => {
+    if (menuRef.current == null) {
+      return [];
+    }
+    return Array.from(
+      menuRef.current.querySelectorAll(
+        '[role="menuitem"]:not(:disabled)'
+      )
+    );
+  }, [menuRef]);
+  return useCallback(
+    (event) => {
+      const menuItems = getMenuItems();
+      if (menuItems.length === 0) {
+        return;
+      }
+      const currentIndex = menuItems.findIndex(
+        (item) => item === document.activeElement
+      );
+      let nextIndex;
+      switch (event.key) {
+        case "ArrowDown":
+          nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % menuItems.length;
+          break;
+        case "ArrowUp":
+          nextIndex = currentIndex === -1 ? menuItems.length - 1 : (currentIndex - 1 + menuItems.length) % menuItems.length;
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = menuItems.length - 1;
+          break;
+        case "Escape":
+          event.preventDefault();
+          onClose();
+          return;
+        case "Enter":
+        case " ":
+          if (document.activeElement instanceof HTMLElement) {
+            event.preventDefault();
+            document.activeElement.click();
+          }
+          return;
+        default:
+          if (event.key.length === 1) {
+            const char = event.key.toLowerCase();
+            const startIndex = currentIndex === -1 ? 0 : currentIndex + 1;
+            for (let i = 0; i < menuItems.length; i++) {
+              const index = (startIndex + i) % menuItems.length;
+              const label = menuItems[index].textContent.trim().toLowerCase();
+              if (label.startsWith(char)) {
+                event.preventDefault();
+                menuItems[index].focus();
+                return;
+              }
+            }
+          }
+          return;
+      }
+      event.preventDefault();
+      menuItems[nextIndex]?.focus();
+    },
+    [getMenuItems, onClose]
+  );
+}
+var styles2 = {
+  menu: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5",
+    maxH: "80",
+    overflowY: "auto",
+    p: "1"
+  })
+};
+var defaultButton = { label: "Menu" };
+function DropdownMenu({
+  button = defaultButton,
+  children,
+  className,
+  "data-testid": dataTestId,
+  hasAutoFocus = true,
+  hasChevron = true,
+  isMenuOpen,
+  items,
+  menuWidth,
+  onClick,
+  onOpenChange,
+  ref,
+  style
+}) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = isMenuOpen !== void 0;
+  const isOpen = isControlled ? isMenuOpen : internalOpen;
+  const menuSize = button.size ?? "md";
+  const menuRef = useRef(null);
+  if (process.env.NODE_ENV !== "production") {
+    if (items != null && children != null) {
+      throw new Error(
+        "DropdownMenu: pass either `items` or `children`, not both."
+      );
+    }
+  }
+  const hide = useCallback(() => {
+    if (isControlled) {
+      onOpenChange?.(false);
+    } else {
+      setInternalOpen(false);
+    }
+  }, [isControlled, onOpenChange]);
+  const handleMenuKeyDown = useMenuKeyboard(menuRef, hide);
+  const contextValue = useMemo(
+    () => ({
+      closeMenu: hide,
+      menuSize
+    }),
+    [hide, menuSize]
+  );
+  const menuNode = useMemo(
+    () => items == null ? children : renderMenuItems(items),
+    [items, children]
+  );
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      content: /* @__PURE__ */ jsx(DropdownMenuContext, { value: contextValue, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx$1(styles2.menu, className),
+          onKeyDown: handleMenuKeyDown,
+          ref: menuRef,
+          tabIndex: -1,
+          children: menuNode
+        }
+      ) }),
+      hasAutoFocus,
+      hasCloseButton: false,
+      isOpen,
+      onOpenChange: (isNextOpen) => {
+        if (isControlled) {
+          onOpenChange?.(isNextOpen);
+        } else {
+          setInternalOpen(isNextOpen);
+        }
+      },
+      role: "menu",
+      style: { width: formatMenuWidth(menuWidth), ...style },
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...button,
+          "data-testid": dataTestId,
+          endContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+            button.endContent,
+            hasChevron ? /* @__PURE__ */ jsx(Icon, { icon: ChevronDown, size: "sm" }) : null
+          ] }),
+          onClick,
+          ref
+        }
+      )
+    }
+  );
+}
+DropdownMenu.displayName = "DropdownMenu";
+
+export { DropdownMenu, DropdownMenuContext, DropdownMenuItem, formatMenuWidth, renderMenuItems, useDropdownMenuContext, useMenuKeyboard };
+//# sourceMappingURL=chunk-YRXGCYT2.js.map
+//# sourceMappingURL=chunk-YRXGCYT2.js.map

package/dist/chunk-YRXGCYT2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DropdownMenu/DropdownMenuContext.ts","../src/components/DropdownMenu/DropdownMenuItem.tsx","../src/components/DropdownMenu/menuUtils.tsx","../src/components/DropdownMenu/DropdownMenu.tsx"],"names":["cx","jsx","styles","useCallback","jsxs"],"mappings":"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","file":"chunk-YRXGCYT2.js","sourcesContent":["import {createContext, use} from 'react';\nimport type {ButtonSize} from '../Button';\n\nexport interface DropdownMenuContextValue {\n  closeMenu: () => void;\n  menuSize: ButtonSize;\n}\n\nexport const DropdownMenuContext =\n  createContext<DropdownMenuContextValue | null>(null);\n\nDropdownMenuContext.displayName = 'DropdownMenuContext';\n\nexport function useDropdownMenuContext(): DropdownMenuContextValue | null {\n  return use(DropdownMenuContext);\n}\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {css, cva} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Item} from '../Item';\nimport {useDropdownMenuContext} from './DropdownMenuContext';\n\nexport interface DropdownMenuItemProps {\n  /**\n   * Additional CSS class names applied to the item.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the item.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text shown below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Trailing content.\n   */\n  endContent?: ReactNode;\n  /**\n   * Icon rendered before the label.\n   */\n  icon?: IconComponent;\n  /**\n   * Whether the item is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Item label.\n   */\n  label: string;\n  /**\n   * Called when the item is selected.\n   */\n  onClick?: () => void;\n  /**\n   * Ref forwarded to the item button.\n   */\n  ref?: Ref<HTMLButtonElement>;\n  /**\n   * Inline styles applied to the item.\n   */\n  style?: CSSProperties;\n}\n\nconst menuItemRecipe = cva({\n  base: {\n    all: 'unset',\n    boxSizing: 'border-box',\n    display: 'block',\n    w: 'full',\n    borderRadius: 'md',\n    color: 'fg',\n    cursor: 'pointer',\n    fontFamily: 'body',\n    textAlign: 'start',\n    _hover: {bg: 'bg.subtle'},\n    _focusVisible: {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'primary',\n      outlineOffset: 'focusOffsetTight',\n    },\n    _disabled: {\n      opacity: 0.5,\n      cursor: 'not-allowed',\n    },\n  },\n  variants: {\n    size: {\n      sm: {\n        minH: 'component.sm',\n        '& > *': {py: '0.5', px: '1.5', gap: '1.5'},\n      },\n      md: {\n        minH: 'component.md',\n        '& > *': {py: '1.5', px: '2'},\n      },\n      lg: {\n        minH: 'component.lg',\n        '& > *': {py: '2.5', px: '2.5', gap: '2.5'},\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst styles = {\n  icon: css({\n    display: 'inline-flex',\n    flexShrink: 0,\n    color: 'fg.muted',\n  }),\n} as const;\n\n/**\n * Action item inside a `DropdownMenu`.\n */\nexport function DropdownMenuItem({\n  className,\n  'data-testid': dataTestId,\n  description,\n  endContent,\n  icon,\n  isDisabled = false,\n  label,\n  onClick,\n  ref,\n  style,\n}: DropdownMenuItemProps): React.JSX.Element {\n  const context = useDropdownMenuContext();\n  const menuSize = context?.menuSize ?? 'md';\n\n  return (\n    <button\n      className={cx(menuItemRecipe({size: menuSize}), className)}\n      data-testid={dataTestId}\n      disabled={isDisabled}\n      onClick={() => {\n        onClick?.();\n        context?.closeMenu();\n      }}\n      ref={ref}\n      role=\"menuitem\"\n      style={style}\n      type=\"button\">\n      <Item\n        as=\"span\"\n        description={description}\n        endContent={endContent}\n        label={label}\n        startContent={\n          icon != null ? (\n            <span className={styles.icon}>\n              <Icon color=\"secondary\" icon={icon} size=\"sm\" />\n            </span>\n          ) : null\n        }\n      />\n    </button>\n  );\n}\n\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n","/* eslint-disable @eslint-react/no-array-index-key */\nimport {useCallback, type KeyboardEvent, type ReactNode} from 'react';\nimport {css} from 'styled-system/css';\nimport {Divider} from '../Divider';\nimport {Text} from '../Text';\nimport {DropdownMenuItem} from './DropdownMenuItem';\nimport type {DropdownMenuOption} from './types';\n\nconst menuStyles = {\n  section: css({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '0.5',\n  }),\n  heading: css({\n    px: '2',\n    py: '1',\n    userSelect: 'none',\n  }),\n  divider: css({\n    my: '1',\n  }),\n} as const;\n\nexport function formatMenuWidth(\n  value: number | string | undefined,\n): string | undefined {\n  if (value == null) {\n    return undefined;\n  }\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\nexport function renderMenuItems(\n  items: ReadonlyArray<DropdownMenuOption>,\n): ReactNode {\n  return items.map((item, index) => {\n    if ('type' in item && item.type === 'divider') {\n      return (\n        <Divider className={menuStyles.divider} key={`divider-${index}`} />\n      );\n    }\n\n    if ('type' in item) {\n      return (\n        <div\n          aria-label={item.title}\n          className={menuStyles.section}\n          key={`section-${item.title ?? index}`}\n          role=\"group\">\n          {item.title != null ? (\n            <Text\n              as=\"span\"\n              className={menuStyles.heading}\n              color=\"secondary\"\n              type=\"supporting\">\n              {item.title}\n            </Text>\n          ) : null}\n          {item.items.map(sectionItem => (\n            <DropdownMenuItem\n              description={sectionItem.description}\n              icon={sectionItem.icon}\n              isDisabled={sectionItem.isDisabled}\n              key={sectionItem.label}\n              label={sectionItem.label}\n              onClick={sectionItem.onClick}\n            />\n          ))}\n        </div>\n      );\n    }\n\n    return (\n      <DropdownMenuItem\n        description={item.description}\n        icon={item.icon}\n        isDisabled={item.isDisabled}\n        key={item.label}\n        label={item.label}\n        onClick={item.onClick}\n      />\n    );\n  });\n}\n\nexport function useMenuKeyboard(\n  menuRef: React.RefObject<HTMLElement | null>,\n  onClose: () => void,\n): (event: KeyboardEvent<HTMLElement>) => void {\n  const getMenuItems = useCallback(() => {\n    if (menuRef.current == null) {\n      return [];\n    }\n    return Array.from(\n      menuRef.current.querySelectorAll<HTMLElement>(\n        '[role=\"menuitem\"]:not(:disabled)',\n      ),\n    );\n  }, [menuRef]);\n\n  return useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      const menuItems = getMenuItems();\n      if (menuItems.length === 0) {\n        return;\n      }\n      const currentIndex = menuItems.findIndex(\n        item => item === document.activeElement,\n      );\n      let nextIndex: number;\n\n      switch (event.key) {\n        case 'ArrowDown':\n          nextIndex =\n            currentIndex === -1 ? 0 : (currentIndex + 1) % menuItems.length;\n          break;\n        case 'ArrowUp':\n          nextIndex =\n            currentIndex === -1\n              ? menuItems.length - 1\n              : (currentIndex - 1 + menuItems.length) % menuItems.length;\n          break;\n        case 'Home':\n          nextIndex = 0;\n          break;\n        case 'End':\n          nextIndex = menuItems.length - 1;\n          break;\n        case 'Escape':\n          event.preventDefault();\n          onClose();\n          return;\n        case 'Enter':\n        case ' ':\n          if (document.activeElement instanceof HTMLElement) {\n            event.preventDefault();\n            document.activeElement.click();\n          }\n          return;\n        default:\n          if (event.key.length === 1) {\n            const char = event.key.toLowerCase();\n            const startIndex = currentIndex === -1 ? 0 : currentIndex + 1;\n            for (let i = 0; i < menuItems.length; i++) {\n              const index = (startIndex + i) % menuItems.length;\n              const label = menuItems[index].textContent.trim().toLowerCase();\n              if (label.startsWith(char)) {\n                event.preventDefault();\n                menuItems[index].focus();\n                return;\n              }\n            }\n          }\n          return;\n      }\n\n      event.preventDefault();\n      menuItems[nextIndex]?.focus();\n    },\n    [getMenuItems, onClose],\n  );\n}\n","import {ChevronDown} from 'lucide-react';\nimport {\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css, cx} from 'styled-system/css';\nimport {Button, type ButtonProps, type ButtonSize} from '../Button';\nimport {Icon} from '../Icon';\nimport {Popover} from '../Popover';\nimport {DropdownMenuContext} from './DropdownMenuContext';\nimport {formatMenuWidth, renderMenuItems, useMenuKeyboard} from './menuUtils';\nimport type {DropdownMenuOption} from './types';\n\nexport type {\n  DropdownMenuDivider,\n  DropdownMenuItemData,\n  DropdownMenuOption,\n  DropdownMenuSection,\n} from './types';\n\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown\n  ? Omit<T, K>\n  : never;\n\nexport type DropdownMenuButtonProps = DistributiveOmit<ButtonProps, 'onClick'>;\n\nexport interface DropdownMenuProps {\n  /**\n   * Trigger button props.\n   */\n  button?: DropdownMenuButtonProps;\n  /**\n   * Compound menu content (alternative to `items`).\n   */\n  children?: ReactNode;\n  /**\n   * Additional CSS class names applied to the menu surface.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the trigger button.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether to auto-focus the first menu item on open.\n   * @default true\n   */\n  hasAutoFocus?: boolean;\n  /**\n   * Whether to show a chevron on the trigger button.\n   * @default true\n   */\n  hasChevron?: boolean;\n  /**\n   * Controlled open state.\n   */\n  isMenuOpen?: boolean;\n  /**\n   * Data-driven menu items.\n   */\n  items?: ReadonlyArray<DropdownMenuOption>;\n  /**\n   * Width of the menu surface.\n   */\n  menuWidth?: number | string;\n  /**\n   * Click handler for the trigger button.\n   */\n  onClick?: () => void;\n  /**\n   * Called when the menu open state changes.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * Ref forwarded to the trigger button.\n   */\n  ref?: Ref<HTMLButtonElement>;\n  /**\n   * Inline styles applied to the menu surface.\n   */\n  style?: CSSProperties;\n}\n\nconst styles = {\n  menu: css({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '0.5',\n    maxH: '80',\n    overflowY: 'auto',\n    p: '1',\n  }),\n} as const;\n\nconst defaultButton = {label: 'Menu'} satisfies DropdownMenuButtonProps;\n\n/**\n * Button-triggered menu for grouped actions.\n */\nexport function DropdownMenu({\n  button = defaultButton,\n  children,\n  className,\n  'data-testid': dataTestId,\n  hasAutoFocus = true,\n  hasChevron = true,\n  isMenuOpen,\n  items,\n  menuWidth,\n  onClick,\n  onOpenChange,\n  ref,\n  style,\n}: DropdownMenuProps): React.JSX.Element {\n  const [internalOpen, setInternalOpen] = useState(false);\n  const isControlled = isMenuOpen !== undefined;\n  const isOpen = isControlled ? isMenuOpen : internalOpen;\n  const menuSize: ButtonSize = button.size ?? 'md';\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (items != null && children != null) {\n      throw new Error(\n        'DropdownMenu: pass either `items` or `children`, not both.',\n      );\n    }\n  }\n\n  const hide = useCallback(() => {\n    if (isControlled) {\n      onOpenChange?.(false);\n    } else {\n      setInternalOpen(false);\n    }\n  }, [isControlled, onOpenChange]);\n\n  const handleMenuKeyDown = useMenuKeyboard(menuRef, hide);\n\n  const contextValue = useMemo(\n    () => ({\n      closeMenu: hide,\n      menuSize,\n    }),\n    [hide, menuSize],\n  );\n\n  const menuNode = useMemo(\n    (): ReactNode => (items == null ? children : renderMenuItems(items)),\n    [items, children],\n  );\n\n  return (\n    <Popover\n      content={\n        <DropdownMenuContext value={contextValue}>\n          {/* eslint-disable-next-line jsx-a11y-x/no-static-element-interactions -- keyboard handler captures events for the parent role=\"menu\" element */}\n          <div\n            className={cx(styles.menu, className)}\n            onKeyDown={handleMenuKeyDown}\n            ref={menuRef}\n            tabIndex={-1}>\n            {menuNode}\n          </div>\n        </DropdownMenuContext>\n      }\n      hasAutoFocus={hasAutoFocus}\n      hasCloseButton={false}\n      isOpen={isOpen}\n      onOpenChange={(isNextOpen: boolean): void => {\n        if (isControlled) {\n          onOpenChange?.(isNextOpen);\n        } else {\n          setInternalOpen(isNextOpen);\n        }\n      }}\n      role=\"menu\"\n      style={{width: formatMenuWidth(menuWidth), ...style}}>\n      <Button\n        {...button}\n        data-testid={dataTestId}\n        endContent={\n          <>\n            {button.endContent}\n            {hasChevron ? <Icon icon={ChevronDown} size=\"sm\" /> : null}\n          </>\n        }\n        onClick={onClick}\n        ref={ref}\n      />\n    </Popover>\n  );\n}\n\nDropdownMenu.displayName = 'DropdownMenu';\n"]}

package/dist/chunk-YT3UWEVY.js

@@ -0,0 +1,81 @@
+import { cva } from './chunk-NAELQLZN.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Card/Card.recipe.ts
+var cardRecipe = cva({
+  base: {
+    borderRadius: "lg",
+    borderWidth: "default",
+    borderStyle: "solid",
+    borderColor: "transparent"
+  },
+  variants: {
+    variant: {
+      default: {
+        bg: "bg",
+        borderColor: "border"
+      },
+      transparent: {
+        bg: "transparent"
+      },
+      muted: {
+        bg: "bg.subtle"
+      },
+      blue: { bg: "surface.blue" },
+      cyan: { bg: "surface.cyan" },
+      gray: { bg: "surface.gray" },
+      green: { bg: "surface.green" },
+      orange: { bg: "surface.orange" },
+      pink: { bg: "surface.pink" },
+      purple: { bg: "surface.purple" },
+      red: { bg: "surface.red" },
+      teal: { bg: "surface.teal" },
+      yellow: { bg: "surface.yellow" }
+    },
+    padding: {
+      0: { p: "0" },
+      0.5: { p: "0.5" },
+      1: { p: "1" },
+      1.5: { p: "1.5" },
+      2: { p: "2" },
+      3: { p: "3" },
+      4: { p: "4" },
+      5: { p: "5" },
+      6: { p: "6" },
+      8: { p: "8" },
+      10: { p: "10" }
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    padding: 0
+  }
+});
+function Card({
+  children,
+  className,
+  "data-testid": dataTestId,
+  padding = 0,
+  ref,
+  style,
+  variant = "default",
+  ...htmlProps
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      className: cx(cardRecipe({ variant, padding }), className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children
+    }
+  );
+}
+Card.displayName = "Card";
+
+export { Card, cardRecipe };
+//# sourceMappingURL=chunk-YT3UWEVY.js.map
+//# sourceMappingURL=chunk-YT3UWEVY.js.map

package/dist/chunk-YT3UWEVY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Card/Card.recipe.ts","../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;AAEO,IAAM,aAAa,GAAA,CAAI;AAAA,EAC5B,IAAA,EAAM;AAAA,IACJ,YAAA,EAAc,IAAA;AAAA,IACd,WAAA,EAAa,SAAA;AAAA,IACb,WAAA,EAAa,OAAA;AAAA,IACb,WAAA,EAAa;AAAA,GACf;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,OAAA,EAAS;AAAA,QACP,EAAA,EAAI,IAAA;AAAA,QACJ,WAAA,EAAa;AAAA,OACf;AAAA,MACA,WAAA,EAAa;AAAA,QACX,EAAA,EAAI;AAAA,OACN;AAAA,MACA,KAAA,EAAO;AAAA,QACL,EAAA,EAAI;AAAA,OACN;AAAA,MACA,IAAA,EAAM,EAAC,EAAA,EAAI,cAAA,EAAc;AAAA,MACzB,IAAA,EAAM,EAAC,EAAA,EAAI,cAAA,EAAc;AAAA,MACzB,IAAA,EAAM,EAAC,EAAA,EAAI,cAAA,EAAc;AAAA,MACzB,KAAA,EAAO,EAAC,EAAA,EAAI,eAAA,EAAe;AAAA,MAC3B,MAAA,EAAQ,EAAC,EAAA,EAAI,gBAAA,EAAgB;AAAA,MAC7B,IAAA,EAAM,EAAC,EAAA,EAAI,cAAA,EAAc;AAAA,MACzB,MAAA,EAAQ,EAAC,EAAA,EAAI,gBAAA,EAAgB;AAAA,MAC7B,GAAA,EAAK,EAAC,EAAA,EAAI,aAAA,EAAa;AAAA,MACvB,IAAA,EAAM,EAAC,EAAA,EAAI,cAAA,EAAc;AAAA,MACzB,MAAA,EAAQ,EAAC,EAAA,EAAI,gBAAA;AAAgB,KAC/B;AAAA,IACA,OAAA,EAAS;AAAA,MACP,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,MACV,GAAA,EAAK,EAAC,CAAA,EAAG,KAAA,EAAK;AAAA,MACd,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,MACV,GAAA,EAAK,EAAC,CAAA,EAAG,KAAA,EAAK;AAAA,MACd,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,MACV,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,MACV,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,MACV,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,MACV,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,MACV,CAAA,EAAG,EAAC,CAAA,EAAG,GAAA,EAAG;AAAA,MACV,EAAA,EAAI,EAAC,CAAA,EAAG,IAAA;AAAI;AACd,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,SAAA;AAAA,IACT,OAAA,EAAS;AAAA;AAEb,CAAC;ACPM,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,OAAA,GAAU,CAAA;AAAA,EACV,GAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,GAAG;AACL,CAAA,EAAiC;AAC/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,GAAG,UAAA,CAAW,EAAC,SAAS,OAAA,EAAQ,GAAG,SAAS,CAAA;AAAA,MACvD,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,KAAA;AAAA,MACC;AAAA;AAAA,GACH;AAEJ;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"chunk-YT3UWEVY.js","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const cardRecipe = cva({\n  base: {\n    borderRadius: 'lg',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'transparent',\n  },\n  variants: {\n    variant: {\n      default: {\n        bg: 'bg',\n        borderColor: 'border',\n      },\n      transparent: {\n        bg: 'transparent',\n      },\n      muted: {\n        bg: 'bg.subtle',\n      },\n      blue: {bg: 'surface.blue'},\n      cyan: {bg: 'surface.cyan'},\n      gray: {bg: 'surface.gray'},\n      green: {bg: 'surface.green'},\n      orange: {bg: 'surface.orange'},\n      pink: {bg: 'surface.pink'},\n      purple: {bg: 'surface.purple'},\n      red: {bg: 'surface.red'},\n      teal: {bg: 'surface.teal'},\n      yellow: {bg: 'surface.yellow'},\n    },\n    padding: {\n      0: {p: '0'},\n      0.5: {p: '0.5'},\n      1: {p: '1'},\n      1.5: {p: '1.5'},\n      2: {p: '2'},\n      3: {p: '3'},\n      4: {p: '4'},\n      5: {p: '5'},\n      6: {p: '6'},\n      8: {p: '8'},\n      10: {p: '10'},\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    padding: 0,\n  },\n});\n\nexport type CardVariants = RecipeVariantProps<typeof cardRecipe>;\n","import type {ComponentPropsWithRef} from 'react';\nimport {cx} from '../../internal/cx';\nimport type {SpacingStep} from '../Layout/types';\nimport {cardRecipe} from './Card.recipe';\n\nexport type CardVariant =\n  | 'default'\n  | 'transparent'\n  | 'muted'\n  | 'blue'\n  | 'cyan'\n  | 'gray'\n  | 'green'\n  | 'orange'\n  | 'pink'\n  | 'purple'\n  | 'red'\n  | 'teal'\n  | 'yellow';\n\n/**\n * Rounded container surface for grouping related content.\n */\nexport interface CardProps extends ComponentPropsWithRef<'div'> {\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Inner padding step.\n   * @default 0\n   */\n  padding?: SpacingStep;\n  /**\n   * Visual style variant.\n   * @default 'default'\n   */\n  variant?: CardVariant;\n}\n\n/**\n * Rounded container surface for grouping related content.\n */\nexport function Card({\n  children,\n  className,\n  'data-testid': dataTestId,\n  padding = 0,\n  ref,\n  style,\n  variant = 'default',\n  ...htmlProps\n}: CardProps): React.JSX.Element {\n  return (\n    <div\n      {...htmlProps}\n      className={cx(cardRecipe({variant, padding}), className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      {children}\n    </div>\n  );\n}\n\nCard.displayName = 'Card';\n"]}