@astryxdesign/core 0.1.7-canary.eb8e07b → 0.1.7

package/src/DropdownMenu/DropdownMenuCheckboxItem.doc.mjs

@@ -1,95 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../docs-types').ComponentDoc} */
-
-export const docs = {
-  name: 'DropdownMenuCheckboxItem',
-  subComponentOf: 'DropdownMenu',
-  displayName: 'Dropdown Menu Checkbox Item',
-  isHiddenFromOverview: true,
-  description:
-    'A checkable menu item (role="menuitemcheckbox") that toggles an independent boolean. Use for on/off options inside a DropdownMenu; for a one-of-N choice use DropdownMenuRadioGroup.',
-  props: [
-    {
-      name: 'label',
-      type: 'ReactNode',
-      description: 'Primary label text identifying the item.',
-    },
-    {
-      name: 'description',
-      type: 'ReactNode',
-      description: 'Secondary description text displayed below the label.',
-    },
-    {
-      name: 'icon',
-      type: 'IconType',
-      description:
-        'Icon to display before the label. See `npx astryx docs icons` for valid semantic names.',
-    },
-    {
-      name: 'value',
-      type: 'boolean',
-      description: 'Whether the item is checked. Controlled — pair with onChange.',
-    },
-    {
-      name: 'onChange',
-      type: '(checked: boolean) => void',
-      description: 'Callback fired with the next checked state when the item is toggled.',
-    },
-    {
-      name: 'isDisabled',
-      type: 'boolean',
-      default: 'false',
-      description:
-        'Whether the item is disabled. Disabled items stay focusable (via aria-disabled) so they remain discoverable by keyboard and assistive technology, but activation is blocked.',
-    },
-    {
-      name: 'hasCloseOnSelect',
-      type: 'boolean',
-      default: 'false',
-      description:
-        'Whether toggling the item closes the menu. Checkbox items default to staying open so several can be toggled in a single session.',
-    },
-    {
-      name: 'endContent',
-      type: 'ReactNode',
-      description:
-        'Content to render after the label and description, such as a keyboard shortcut hint or badge.',
-    },
-  ],
-};
-
-export const docsZh = {
-  name: 'DropdownMenuCheckboxItem',
-  isHiddenFromOverview: true,
-  displayName: 'Dropdown Menu Checkbox Item',
-  description:
-    '可勾选的菜单项（role="menuitemcheckbox"），用于切换独立的布尔值。用于 DropdownMenu 中的开关选项；单选请使用 DropdownMenuRadioGroup。',
-  propDescriptions: {
-    label: '标识该项的主标签文本。',
-    description: '显示在标签下方的次要描述文本。',
-    icon: '显示在标签前的图标。',
-    value: '该项是否被勾选。受控 — 与 onChange 搭配使用。',
-    onChange: '切换该项时以下一个勾选状态触发的回调。',
-    isDisabled: '该项是否禁用。',
-    hasCloseOnSelect: '切换该项是否关闭菜单。默认保持打开。',
-    endContent: '在标签和描述之后渲染的内容。',
-  },
-};
-
-export const docsDense = {
-  name: 'DropdownMenuCheckboxItem',
-  isHiddenFromOverview: true,
-  displayName: 'Dropdown Menu Checkbox Item',
-  description: 'checkable menu item (menuitemcheckbox); independent boolean toggle',
-  propDescriptions: {
-    label: 'primary label text',
-    description: 'secondary text below label',
-    icon: 'icon before label',
-    value: 'checked state (controlled, w/ onChange)',
-    onChange: 'fired w/ next checked state on toggle',
-    isDisabled: 'disabled; stays focusable via aria-disabled',
-    hasCloseOnSelect: 'close menu on toggle (default false — stays open)',
-    endContent: 'content after label+description',
-  },
-};

package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx

@@ -1,237 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file DropdownMenuCheckboxItem.tsx
- * @input React, stylex, Item + Icon + DropdownMenu context + tokens from core
- * @output DropdownMenuCheckboxItem — a standalone checkable menu item.
- * @position Sub-component; used inside DropdownMenu.
- *
- * A menu item that toggles an independent boolean (role="menuitemcheckbox").
- * Unlike CheckboxInput, there is no nested native <input>: the row itself owns
- * the role and aria-checked, per the WAI-ARIA menuitemcheckbox pattern.
- * Keyboard navigation (arrows/typeahead) and Enter/Space activation come from
- * the parent DropdownMenu's useListFocus + activation path, which matches
- * menuitemcheckbox alongside plain menuitem rows.
- *
- * The square checkbox visual is decorative (aria-hidden) — the row owns the
- * checked state. Its size is derived from the menu's item size (a `sm` menu
- * gets the compact control; `md`/`lg` get the standard one) and it swaps to the
- * inline-end of the row on coarse-pointer (touch) devices via CSS `order`, so
- * it lands where selection toggles are conventionally placed on mobile. The
- * checkmark uses the `check` icon from the active theme's icon registry.
- */
-
-import {useCallback, type ReactNode} from 'react';
-import * as stylex from '@stylexjs/stylex';
-import {Icon, renderIconSlot, type IconType} from '../Icon';
-import {Item} from '../Item';
-import {useDropdownMenuContext} from './DropdownMenuContext';
-import {
-  colorVars,
-  spacingVars,
-  radiusVars,
-  durationVars,
-  easeVars,
-  borderVars,
-} from '../theme/tokens.stylex';
-import {mergeProps, themeProps} from '../utils';
-import type {BaseProps} from '../BaseProps';
-
-const styles = stylex.create({
-  root: {
-    width: '100%',
-    borderRadius: `max(0px, calc(var(--_dropdown-menu-radius, ${spacingVars['--spacing-2']}) - var(--_dropdown-menu-padding, ${spacingVars['--spacing-1']})))`,
-    color: colorVars['--color-text-primary'],
-    backgroundColor: {
-      default: 'transparent',
-      ':focus': colorVars['--color-overlay-hover'],
-      ':hover': colorVars['--color-overlay-hover'],
-    },
-    cursor: 'pointer',
-    outline: 'none',
-  },
-  disabled: {
-    opacity: 0.5,
-    cursor: 'not-allowed',
-  },
-  // Rendered in Item's `marker` slot as a raw flex child, so `order` moves it
-  // relative to the label within the row. On touch it moves to the inline-end.
-  box: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    boxSizing: 'border-box',
-    borderWidth: borderVars['--border-width'],
-    borderStyle: 'solid',
-    borderRadius: radiusVars['--radius-inner'],
-    color: colorVars['--color-on-accent'],
-    transitionProperty: 'background-color, border-color',
-    transitionDuration: {
-      default: durationVars['--duration-fast'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
-    },
-    transitionTimingFunction: easeVars['--ease-standard'],
-    order: {
-      default: 0,
-      '@media (pointer: coarse)': 1,
-    },
-    marginInlineStart: {
-      default: 0,
-      '@media (pointer: coarse)': 'auto',
-    },
-  },
-  unchecked: {
-    borderColor: colorVars['--color-border-emphasized'],
-    backgroundColor: colorVars['--color-background-surface'],
-  },
-  checked: {
-    borderColor: colorVars['--color-accent'],
-    backgroundColor: colorVars['--color-accent'],
-  },
-});
-
-const boxSizeStyles = stylex.create({
-  sm: {width: 18, height: 18},
-  md: {width: 22, height: 22},
-});
-
-export interface DropdownMenuCheckboxItemProps extends Omit<
-  BaseProps,
-  'onChange' | 'role' | 'aria-checked' | 'tabIndex'
-> {
-  /**
-   * Primary label text identifying the item.
-   */
-  label: ReactNode;
-  /**
-   * Secondary description text displayed below the label.
-   */
-  description?: ReactNode;
-  /**
-   * Icon to display before the label. Accepts a semantic icon name (see
-   * `npx astryx docs icons`) or a rendered node.
-   */
-  icon?: ReactNode | IconType;
-  /**
-   * Whether the item is checked. Controlled — pair with `onChange`.
-   */
-  value: boolean;
-  /**
-   * Callback fired with the next checked state when the item is toggled.
-   */
-  onChange?: (checked: boolean) => void;
-  /**
-   * Whether the item is disabled. Disabled items stay focusable (via
-   * `aria-disabled`) so they remain discoverable by keyboard and assistive
-   * technology, but activation is blocked.
-   * @default false
-   */
-  isDisabled?: boolean;
-  /**
-   * Whether toggling the item closes the menu. Checkbox items default to
-   * staying open so several can be toggled in a single session, unlike radio
-   * items which default to closing on selection.
-   * @default false
-   */
-  hasCloseOnSelect?: boolean;
-  /**
-   * Content to render after the label and description, such as a keyboard
-   * shortcut hint or badge.
-   */
-  endContent?: ReactNode;
-}
-
-/**
- * A checkable dropdown menu item (role="menuitemcheckbox").
- *
- * Must be used inside a DropdownMenu. Toggles an independent boolean; for a
- * one-of-N choice use DropdownMenuRadioGroup + DropdownMenuRadioItem instead.
- *
- * @example
- * ```
- *  * import {DropdownMenuCheckboxItem} from '@astryxdesign/core/DropdownMenu';
- *
- * <DropdownMenu button={{label: 'View'}}>
- *   <DropdownMenuCheckboxItem
- *     label="Show archived"
- *     value={showArchived}
- *     onChange={setShowArchived}
- *   />
- * </DropdownMenu>
- * ```
- */
-export function DropdownMenuCheckboxItem({
-  label,
-  description,
-  icon,
-  value,
-  onChange,
-  isDisabled = false,
-  hasCloseOnSelect = false,
-  endContent,
-  xstyle,
-  className,
-  style,
-  ...rest
-}: DropdownMenuCheckboxItemProps) {
-  const ctx = useDropdownMenuContext();
-  const menuSize = ctx?.menuSize ?? 'md';
-  const controlSize = menuSize === 'sm' ? 'sm' : 'md';
-
-  const handleClick = useCallback(() => {
-    if (isDisabled) {
-      return;
-    }
-    onChange?.(!value);
-    if (hasCloseOnSelect) {
-      ctx?.closeMenu();
-    }
-  }, [isDisabled, onChange, value, hasCloseOnSelect, ctx]);
-
-  return (
-    <Item
-      {...rest}
-      role="menuitemcheckbox"
-      aria-checked={value}
-      tabIndex={isDisabled ? undefined : -1}
-      marker={
-        <span
-          aria-hidden="true"
-          {...mergeProps(
-            themeProps('dropdown-menu-checkbox', {
-              size: controlSize,
-              checked: value ? 'checked' : null,
-              disabled: isDisabled ? 'disabled' : null,
-            }),
-            stylex.props(
-              styles.box,
-              boxSizeStyles[controlSize],
-              value ? styles.checked : styles.unchecked,
-            ),
-          )}>
-          {value && <Icon icon="check" size="sm" color="inherit" />}
-        </span>
-      }
-      startContent={
-        icon
-          ? renderIconSlot(icon, {size: 'sm', color: 'secondary'})
-          : undefined
-      }
-      label={label}
-      description={description}
-      endContent={endContent}
-      onClick={handleClick}
-      isDisabled={isDisabled}
-      xstyle={[styles.root, isDisabled && styles.disabled, xstyle]}
-      {...mergeProps(themeProps('dropdown-menu-item', {size: menuSize}), {
-        className,
-        style,
-      })}
-    />
-  );
-}
-
-DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';

package/src/DropdownMenu/DropdownMenuRadioGroup.doc.mjs

@@ -1,80 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../docs-types').ComponentDoc} */
-
-export const docs = {
-  name: 'DropdownMenuRadioGroup',
-  subComponentOf: 'DropdownMenu',
-  displayName: 'Dropdown Menu Radio Group',
-  isHiddenFromOverview: true,
-  description:
-    'A single-select group of radio menu items (role="group" of menuitemradio). Owns the selected value and lays its items out with the menu\'s inter-item gap.',
-  props: [
-    {
-      name: 'value',
-      type: 'string | undefined',
-      description:
-        'The currently selected value in the group. Pass undefined when nothing is selected yet.',
-    },
-    {
-      name: 'onChange',
-      type: '(value: string) => void',
-      description: 'Callback fired when the selected value changes.',
-    },
-    {
-      name: 'aria-label',
-      type: 'string',
-      description:
-        'Accessible label for the group. Required (or aria-labelledby) so screen readers announce the radios as a named set, e.g. "Sort by".',
-    },
-    {
-      name: 'aria-labelledby',
-      type: 'string',
-      description:
-        'The id of an element that labels the group, as an alternative to aria-label.',
-    },
-    {
-      name: 'hasCloseOnSelect',
-      type: 'boolean',
-      default: 'true',
-      description:
-        'Whether selecting a value closes the menu. Radio items default to closing on selection (a single-choice commit).',
-    },
-    {
-      name: 'children',
-      type: 'ReactNode',
-      description: 'The DropdownMenuRadioItems that make up the group.',
-    },
-  ],
-};
-
-export const docsZh = {
-  name: 'DropdownMenuRadioGroup',
-  isHiddenFromOverview: true,
-  displayName: 'Dropdown Menu Radio Group',
-  description:
-    '单选的单选菜单项组（menuitemradio 的 role="group"）。持有所选值，并以菜单的项间距布局其子项。',
-  propDescriptions: {
-    value: '组中当前选中的值。尚无选中项时传 undefined。',
-    onChange: '所选值变化时触发的回调。',
-    'aria-label': '组的无障碍标签。必需（或 aria-labelledby），以便屏幕阅读器将单选项作为命名集合朗读。',
-    'aria-labelledby': '标记该组的元素 id，作为 aria-label 的替代。',
-    hasCloseOnSelect: '选择某值是否关闭菜单。默认关闭。',
-    children: '组成该组的 DropdownMenuRadioItem。',
-  },
-};
-
-export const docsDense = {
-  name: 'DropdownMenuRadioGroup',
-  isHiddenFromOverview: true,
-  displayName: 'Dropdown Menu Radio Group',
-  description: 'single-select group of menuitemradio; owns selected value',
-  propDescriptions: {
-    value: 'selected value (undefined = none)',
-    onChange: 'fired when selected value changes',
-    'aria-label': 'accessible group name (or aria-labelledby); required',
-    'aria-labelledby': 'id of labelling element (alt to aria-label)',
-    hasCloseOnSelect: 'close menu on select (default true)',
-    children: 'the DropdownMenuRadioItems',
-  },
-};

package/src/DropdownMenu/DropdownMenuRadioGroup.tsx

@@ -1,119 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file DropdownMenuRadioGroup.tsx
- * @output DropdownMenuRadioGroup — a single-select group of menu items.
- * @position Sub-component; wraps DropdownMenuRadioItem inside a DropdownMenu.
- *
- * Owns single-selection state (value/onChange) for its child
- * DropdownMenuRadioItems and exposes it via context. Renders role="group" with
- * an accessible name so the radios are announced as a set. Keyboard navigation
- * comes from the parent DropdownMenu's useListFocus, which matches
- * menuitemradio rows.
- */
-
-import {useMemo, type ReactNode} from 'react';
-import * as stylex from '@stylexjs/stylex';
-import {spacingVars} from '../theme/tokens.stylex';
-import {mergeProps} from '../utils';
-import type {BaseProps} from '../BaseProps';
-import {
-  DropdownMenuRadioGroupContext,
-  type DropdownMenuRadioGroupContextValue,
-} from './DropdownMenuContext';
-
-const styles = stylex.create({
-  // Match the menu's own inter-item rhythm (2px) so grouped radio items keep
-  // the same gap as ungrouped items instead of sitting flush against each
-  // other inside the role="group" wrapper.
-  group: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: spacingVars['--spacing-0-5'],
-  },
-});
-
-export interface DropdownMenuRadioGroupProps extends Omit<
-  BaseProps,
-  'onChange'
-> {
-  /**
-   * The currently selected value in the group. Pass `undefined` when nothing
-   * is selected yet.
-   */
-  value: string | undefined;
-  /**
-   * Callback fired when the selected value changes.
-   */
-  onChange: (value: string) => void;
-  /**
-   * Accessible label for the group. Required (together with `aria-labelledby`,
-   * one of the two) so screen readers announce the radios as a named set,
-   * e.g. "Sort by".
-   */
-  'aria-label'?: string;
-  /**
-   * The id of an element that labels the group, as an alternative to
-   * `aria-label`.
-   */
-  'aria-labelledby'?: string;
-  /**
-   * Whether selecting a value closes the menu. Radio items default to closing
-   * on selection (a single-choice commit), unlike checkbox items which stay
-   * open.
-   * @default true
-   */
-  hasCloseOnSelect?: boolean;
-  /**
-   * The `DropdownMenuRadioItem`s that make up the group.
-   */
-  children: ReactNode;
-}
-
-/**
- * A single-select group of radio menu items (role="group" of menuitemradio).
- *
- * @example
- * ```
- *  * import {
- *   DropdownMenuRadioGroup,
- *   DropdownMenuRadioItem,
- * } from '@astryxdesign/core/DropdownMenu';
- *
- * <DropdownMenu button={{label: 'Sort'}}>
- *   <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
- *     <DropdownMenuRadioItem value="newest" label="Newest" />
- *     <DropdownMenuRadioItem value="oldest" label="Oldest" />
- *   </DropdownMenuRadioGroup>
- * </DropdownMenu>
- * ```
- */
-export function DropdownMenuRadioGroup({
-  value,
-  onChange,
-  hasCloseOnSelect = true,
-  children,
-  className,
-  style,
-  ...rest
-}: DropdownMenuRadioGroupProps) {
-  const contextValue = useMemo<DropdownMenuRadioGroupContextValue>(
-    () => ({value, onChange, hasCloseOnSelect}),
-    [value, onChange, hasCloseOnSelect],
-  );
-
-  return (
-    <div
-      {...rest}
-      role="group"
-      {...mergeProps(stylex.props(styles.group), {className, style})}>
-      <DropdownMenuRadioGroupContext value={contextValue}>
-        {children}
-      </DropdownMenuRadioGroupContext>
-    </div>
-  );
-}
-
-DropdownMenuRadioGroup.displayName = 'DropdownMenuRadioGroup';

package/src/DropdownMenu/DropdownMenuRadioItem.doc.mjs

@@ -1,80 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../docs-types').ComponentDoc} */
-
-export const docs = {
-  name: 'DropdownMenuRadioItem',
-  subComponentOf: 'DropdownMenu',
-  displayName: 'Dropdown Menu Radio Item',
-  isHiddenFromOverview: true,
-  description:
-    'A single option in a DropdownMenuRadioGroup (role="menuitemradio"). Must be used inside a DropdownMenuRadioGroup.',
-  props: [
-    {
-      name: 'value',
-      type: 'string',
-      description:
-        "The value this item represents within its group. The group's value matches against this to determine the checked state.",
-    },
-    {
-      name: 'label',
-      type: 'ReactNode',
-      description: 'Primary label text identifying the option.',
-    },
-    {
-      name: 'description',
-      type: 'ReactNode',
-      description: 'Secondary description text displayed below the label.',
-    },
-    {
-      name: 'icon',
-      type: 'IconType',
-      description:
-        'Icon to display before the label. See `npx astryx docs icons` for valid semantic names.',
-    },
-    {
-      name: 'isDisabled',
-      type: 'boolean',
-      default: 'false',
-      description:
-        'Whether this individual radio item is disabled. Disabled items stay focusable (via aria-disabled) so they remain discoverable by keyboard and assistive technology, but selection is blocked.',
-    },
-    {
-      name: 'endContent',
-      type: 'ReactNode',
-      description:
-        'Content to render after the label and description, such as a badge or metadata.',
-    },
-  ],
-};
-
-export const docsZh = {
-  name: 'DropdownMenuRadioItem',
-  isHiddenFromOverview: true,
-  displayName: 'Dropdown Menu Radio Item',
-  description:
-    'DropdownMenuRadioGroup 中的单个选项（role="menuitemradio"）。必须在 DropdownMenuRadioGroup 内使用。',
-  propDescriptions: {
-    value: '该项在组内代表的值。组的 value 与之匹配以确定勾选状态。',
-    label: '标识该选项的主标签文本。',
-    description: '显示在标签下方的次要描述文本。',
-    icon: '显示在标签前的图标。',
-    isDisabled: '该单选项是否禁用。',
-    endContent: '在标签和描述之后渲染的内容。',
-  },
-};
-
-export const docsDense = {
-  name: 'DropdownMenuRadioItem',
-  isHiddenFromOverview: true,
-  displayName: 'Dropdown Menu Radio Item',
-  description: 'one option in a DropdownMenuRadioGroup (menuitemradio)',
-  propDescriptions: {
-    value: "item's value within the group (matched vs group value)",
-    label: 'primary label text',
-    description: 'secondary text below label',
-    icon: 'icon before label',
-    isDisabled: 'disabled; stays focusable via aria-disabled',
-    endContent: 'content after label+description',
-  },
-};