@astryxdesign/core 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/src/TextInput/TextInput.tsx

@@ -0,0 +1,437 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file TextInput.tsx
+ * @input Uses React, useId, ChangeEvent, Field, Icon
+ * @output Exports TextInput component, TextInputProps
+ * @position Core implementation; consumed by index.ts, tested by TextInput.test.tsx
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/TextInput/TextInput.doc.mjs (props table, features, implementation notes)
+ * - /packages/core/src/TextInput/TextInput.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/TextInput/index.ts (exports if types change)
+ * - /apps/storybook/stories/TextInput.stories.tsx (storybook stories)
+ * - /packages/cli/templates/blocks/components/TextInput/ (showcase blocks)
+ */
+
+import {
+  useId,
+  useOptimistic,
+  useTransition,
+  useCallback,
+  useRef,
+  type ChangeEvent,
+  type KeyboardEvent,
+  type ReactNode,
+} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import type {IconName} from '../Icon';
+import {
+  colorVars,
+  sizeVars,
+  radiusVars,
+  typographyVars,
+  typeScaleVars,
+  borderVars,
+} from '../theme/tokens.stylex';
+import {
+  Field,
+  type InputStatus,
+  type InputStatusType,
+  inputWrapperStyles,
+  inputStatusBorderStyles,
+  inputStatusHoverShadowStyles,
+  inputStatusFocusWithinStyles,
+} from '../Field';
+import {Icon, renderIconSlot, type IconType} from '../Icon';
+import {Spinner} from '../Spinner';
+
+const styles = stylex.create({
+  clearButton: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 0,
+    margin: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    borderRadius: radiusVars['--radius-element'],
+    outline: {
+      default: 'none',
+      ':focus-visible': `${borderVars['--border-width']} solid ${colorVars['--color-accent']}`,
+    },
+    outlineOffset: 1,
+  },
+  input: {
+    display: 'block',
+    flex: 1,
+    minWidth: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+    padding: 0,
+    fontFamily: typographyVars['--font-family-body'],
+    fontSize: {
+      default: typeScaleVars['--text-body-size'],
+      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+    },
+    lineHeight: typeScaleVars['--text-body-leading'],
+    color: colorVars['--color-text-primary'],
+    backgroundColor: 'transparent',
+    outline: 'none',
+    '::placeholder': {
+      color: colorVars['--color-text-secondary'],
+    },
+  },
+  inputDisabled: {
+    cursor: 'not-allowed',
+  },
+});
+
+const sizeStyles = stylex.create({
+  sm: {
+    height: sizeVars['--size-element-sm'],
+  },
+  md: {
+    height: sizeVars['--size-element-md'],
+  },
+  lg: {
+    height: sizeVars['--size-element-lg'],
+  },
+});
+
+export type TextInputSize = keyof typeof sizeStyles;
+
+import {groupStyles} from '../InputGroup/groupStyles';
+
+// Re-export shared types for convenience
+
+export type {
+  InputStatus as TextInputStatus,
+  InputStatusType as TextInputStatusType,
+} from '../Field';
+import {mergeProps, mergeRefs} from '../utils';
+import {useSize} from '../SizeContext/SizeContext';
+import {useInputContainer} from '../hooks/useInputContainer';
+import {useInputGroup} from '../InputGroup/InputGroupContext';
+import type {BaseProps} from '../BaseProps';
+import type {SizeValue} from '../utils/types';
+import {themeProps} from '../utils/themeProps';
+
+export type TextInputType = 'text' | 'password' | 'email';
+
+export interface TextInputProps extends Omit<
+  BaseProps,
+  'onChange' | 'defaultValue'
+> {
+  /** Ref forwarded to the root element */
+  ref?: React.Ref<HTMLInputElement>;
+  /**
+   * The HTML input type.
+   * @default 'text'
+   */
+  type?: TextInputType;
+  /**
+   * Label text for the input (always rendered for accessibility).
+   */
+  label: string;
+  /**
+   * Whether to visually hide the label (still accessible to screen readers).
+   * @default false
+   */
+  isLabelHidden?: boolean;
+  /**
+   * Description text displayed between the label and input.
+   */
+  description?: string;
+  /**
+   * Whether the field is optional. Mutually exclusive with isRequired.
+   * @default false
+   */
+  isOptional?: boolean;
+  /**
+   * Whether the field is required. Mutually exclusive with isOptional.
+   * @default false
+   */
+  isRequired?: boolean;
+  /**
+   * Whether the input is disabled.
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * Icon to display at the start of the input.
+   * Accepts a ReactNode (e.g. `<Icon icon={SearchIcon} />`) or an SVG icon component directly.
+   */
+  startIcon?: ReactNode | IconType;
+  /**
+   * Status indicator for the input.
+   * When set, displays a colored border and status icon.
+   * If message is provided, displays a floating message box below the input.
+   */
+  status?: InputStatus;
+  /**
+   * The size of the input.
+   * - 'sm': Compact size (18px height)
+   * - 'md': Default size (26px height)
+   * @default 'md'
+   */
+  size?: TextInputSize;
+  /**
+   * Callback fired when the input value changes.
+   */
+  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
+  /** Async action on change. Fires after onChange if not prevented. */
+  changeAction?: (
+    value: string,
+    e: ChangeEvent<HTMLInputElement>,
+  ) => void | Promise<void>;
+  /** Whether the input is in a loading state. @default false */
+  isLoading?: boolean;
+  /**
+   * The current value of the input.
+   */
+  value: string;
+  /**
+   * Placeholder text shown when the input is empty.
+   */
+  placeholder?: string;
+  /**
+   * Width of the field. Numbers are treated as pixels, strings are used as-is
+   * (e.g. `'100%'`). Sizes the whole field (label, control, and status) so they
+   * stay aligned, unlike setting width via `xstyle`/`className`/`style`.
+   */
+  width?: SizeValue;
+  /**
+   * Tooltip text to display in an info icon at the end of the label.
+   */
+  labelTooltip?: string;
+  /**
+   * Whether to show a clear button when a value is set.
+   * When clicked, resets the value to an empty string and returns focus to the input.
+   * @default false
+   */
+  hasClear?: boolean;
+  /**
+   * Whether to automatically focus the input on mount.
+   * @default false
+   */
+  hasAutoFocus?: boolean;
+  /**
+   * The HTML name attribute for the input.
+   * Useful for form submissions.
+   */
+  htmlName?: string;
+  /**
+   * Callback fired when the user presses the Enter key.
+   */
+  onEnter?: () => void;
+  /**
+   * Callback fired on keydown events on the input.
+   */
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+}
+
+/**
+ * A text input component for collecting user input.
+ *
+ * @example
+ * ```
+ * <TextInput label="Name" value={name} onChange={setName} />
+ * <TextInput label="Search" isLabelHidden value={query} onChange={setQuery} />
+ * ```
+ */
+export function TextInput({
+  type = 'text',
+  label,
+  isLabelHidden = false,
+  description,
+  isOptional = false,
+  isRequired = false,
+  isDisabled = false,
+  startIcon,
+  status,
+  size: sizeProp,
+  onChange,
+  changeAction,
+  isLoading = false,
+  value,
+  placeholder,
+  labelTooltip,
+  hasClear = false,
+  hasAutoFocus = false,
+  htmlName,
+  onEnter,
+  onKeyDown,
+  width,
+  xstyle,
+  className,
+  style,
+  ref,
+  ...rest
+}: TextInputProps) {
+  const size = useSize(sizeProp, 'md');
+
+  const id = useId();
+  const descriptionID = useId();
+  const statusMessageID = useId();
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const inputGroup = useInputGroup();
+
+  const [, startTransition] = useTransition();
+  const [optimisticValue, setOptimisticValue] = useOptimistic(value);
+  const isBusy = isLoading || optimisticValue !== value;
+
+  const statusIconMap: Record<InputStatusType, IconName> = {
+    warning: 'warning',
+    error: 'error',
+    success: 'success',
+  };
+
+  const statusIconColorMap: Record<
+    InputStatusType,
+    'warning' | 'error' | 'success'
+  > = {
+    warning: 'warning',
+    error: 'error',
+    success: 'success',
+  };
+
+  const ariaDescribedBy =
+    [
+      description ? descriptionID : null,
+      status?.message ? statusMessageID : null,
+    ]
+      .filter(Boolean)
+      .join(' ') || undefined;
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    onChange?.(newValue, e);
+    if (changeAction && !e.defaultPrevented) {
+      startTransition(async () => {
+        setOptimisticValue(newValue);
+        await changeAction(newValue, e);
+      });
+    }
+  };
+
+  // Handle clear button click
+  const handleClear = useCallback(() => {
+    onChange?.('', null as unknown as ChangeEvent<HTMLInputElement>);
+    inputRef.current?.focus();
+  }, [onChange]);
+
+  // Focus input when clicking anywhere on the wrapper (icons, padding, etc.)
+  const {onClick: handleWrapperClick, onMouseUp: handleWrapperMouseUp} =
+    useInputContainer({
+      containerRef,
+      inputRef,
+      disabled: isDisabled,
+    });
+
+  const inputWrapper = (
+    <div
+      ref={containerRef}
+      onClick={handleWrapperClick}
+      onMouseUp={handleWrapperMouseUp}
+      {...mergeProps(
+        themeProps('text-input', {size, status: status?.type ?? null}),
+        stylex.props(
+          inputWrapperStyles.base,
+          sizeStyles[size],
+          isDisabled && inputWrapperStyles.disabled,
+          status && inputStatusBorderStyles[status.type],
+          status && inputStatusHoverShadowStyles[status.type],
+          status && inputStatusFocusWithinStyles[status.type],
+          inputGroup && groupStyles.inGroup,
+          xstyle,
+        ),
+        className,
+        style,
+      )}>
+      {startIcon && renderIconSlot(startIcon, {size: 'sm', color: 'secondary'})}
+      <input
+        {...rest}
+        ref={mergeRefs(ref, inputRef)}
+        id={id}
+        name={htmlName}
+        type={type}
+        value={optimisticValue}
+        onChange={handleChange}
+        onKeyDown={
+          onEnter || onKeyDown
+            ? e => {
+                if (e.key === 'Enter') {
+                  onEnter?.();
+                }
+                onKeyDown?.(e);
+              }
+            : undefined
+        }
+        placeholder={placeholder}
+        disabled={isDisabled}
+        autoFocus={hasAutoFocus}
+        data-autofocus={hasAutoFocus || undefined}
+        aria-describedby={ariaDescribedBy}
+        aria-required={isRequired === true ? 'true' : undefined}
+        aria-invalid={status?.type === 'error' ? 'true' : undefined}
+        aria-busy={isBusy || undefined}
+        aria-label={inputGroup ? label : undefined}
+        {...stylex.props(styles.input, isDisabled && styles.inputDisabled)}
+      />
+      {hasClear && value !== '' && !isDisabled && (
+        <button
+          type="button"
+          onClick={handleClear}
+          aria-label={`Clear ${label}`}
+          {...stylex.props(styles.clearButton)}>
+          <Icon icon="close" size="sm" color="secondary" />
+        </button>
+      )}
+      {isBusy && <Spinner size="sm" />}
+      {status && !inputGroup && (
+        <Icon
+          icon={statusIconMap[status.type]}
+          size="md"
+          color={statusIconColorMap[status.type]}
+        />
+      )}
+    </div>
+  );
+
+  if (inputGroup) {
+    return inputWrapper;
+  }
+
+  return (
+    <Field
+      label={label}
+      isLabelHidden={isLabelHidden}
+      description={description}
+      inputID={id}
+      descriptionID={description ? descriptionID : undefined}
+      isOptional={isOptional}
+      isRequired={isRequired}
+      isDisabled={isDisabled}
+      status={
+        status
+          ? {
+              type: status.type,
+              message: status.message,
+              messageID: status.message ? statusMessageID : undefined,
+            }
+          : undefined
+      }
+      labelTooltip={labelTooltip}
+      width={width}>
+      {inputWrapper}
+    </Field>
+  );
+}
+
+TextInput.displayName = 'TextInput';

package/src/TextInput/index.ts

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports TextInput component and types from TextInput.tsx
+ * @output Exports TextInput, TextInputProps, TextInputSize, TextInputStatus, TextInputStatusType
+ * @position Component entry point; re-exported by /packages/core/src/index.ts
+ *
+ * SYNC: When modified, update this header and /packages/core/src/TextInput/TextInput.doc.mjs
+ */
+
+export {TextInput} from './TextInput';
+export type {
+  TextInputProps,
+  TextInputType,
+  TextInputSize,
+  TextInputStatus,
+  TextInputStatusType,
+} from './TextInput';

package/src/Thumbnail/Thumbnail.doc.mjs

@@ -0,0 +1,149 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../docs-types').ComponentDoc} */
+
+export const docs = {
+  name: 'Thumbnail',
+  displayName: 'Thumbnail',
+  category: 'Content',
+  keywords: ["thumbnail","attachment","preview","image","upload","dismiss","remove","loading"],
+  props: [
+    {
+      name: 'src',
+      type: 'string',
+      description: 'Image source URL.',
+    },
+    {
+      name: 'alt',
+      type: 'string',
+      description: 'Alt text for the image.',
+    },
+    {
+      name: 'label',
+      type: 'string',
+      description: 'Accessible label (e.g. file name). Shown as tooltip on hover.',
+    },
+    {
+      name: 'onRemove',
+      type: '(e: React.MouseEvent) => void',
+      description: 'Callback for the overlaid remove button.',
+    },
+    {
+      name: 'onClick',
+      type: '(e: React.MouseEvent) => void',
+      description: 'Click handler. Adds button semantics and hover shadow.',
+    },
+    {
+      name: 'isLoading',
+      type: 'boolean',
+      description: 'Shows skeleton (no src) or upload overlay (with src).',
+      default: 'false',
+    },
+    {
+      name: 'isDisabled',
+      type: 'boolean',
+      description: 'Whether the thumbnail is disabled.',
+      default: 'false',
+    },
+    {
+      name: 'xstyle',
+      type: 'StyleXStyles',
+      description: 'StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.',
+    },
+    {
+      name: 'className',
+      type: 'string',
+      description: 'CSS class name for the root element. Prefer xstyle for styling; className is provided for integration with non-StyleX systems.',
+    },
+    {
+      name: 'style',
+      type: 'CSSProperties',
+      description: 'Inline styles for the root element. Prefer xstyle for styling; inline styles bypass StyleX optimization.',
+    },
+    {
+      name: 'data-testid',
+      type: 'string',
+      description: 'Test selector for automated testing frameworks.',
+    },
+  ],
+  theming: {
+    targets: [
+      {className: 'astryx-thumbnail'},
+    ],
+  },
+  usage: {
+    description:
+      'Thumbnail displays a compact, square preview of an image attachment. It shows a shimmer effect while uploading, the image on success, and a placeholder icon when no source is set. Use it in chat composers, file upload lists, or anywhere you need a small image preview with optional remove and click actions.',
+    bestPractices: [
+      {guidance: true, description: 'Always provide a label prop with the file name so the thumbnail and its remove button are accessible to screen readers and show a tooltip on hover.'},
+      {guidance: true, description: 'Use isLoading without a src to show a skeleton during initial upload, and isLoading with a src to show a spinner overlay once a preview URL is available.'},
+      {guidance: true, description: 'Pair onClick with a lightbox or detail view so users can inspect the full image; the thumbnail adds button semantics and a hover shadow automatically.'},
+      {guidance: false, description: "Don't use Thumbnail for non-image file types like PDFs or spreadsheets; use a file attachment component with an appropriate icon instead."},
+      {guidance: false, description: "Don't omit alt text when a src is provided; screen readers need a description of the image content, not just the file name from label."},
+    ],
+    anatomy: [
+      {name: 'Image', required: false, description: 'The preview image, displayed as a square with cover fit.'},
+      {name: 'Placeholder', required: false, description: 'An image silhouette icon shown when no src is provided.'},
+      {name: 'Remove button', required: false, description: 'An overlaid close button in the top-right corner. Appears when onRemove is set. Uses APCA luminance detection to stay visible on any image.'},
+      {name: 'Upload overlay', required: false, description: 'A semi-transparent overlay with a spinner, shown when isLoading is true and a src preview is available.'},
+      {name: 'Skeleton', required: false, description: 'A shimmer animation shown when isLoading is true and no src is set.'},
+    ],
+  },
+};
+
+/** @type {import('../docs-types').TranslationDoc} */
+export const docsZh = {
+  propDescriptions: {
+    src: '\u56FE\u7247\u6E90 URL\u3002',
+    alt: '\u56FE\u7247\u7684\u66FF\u4EE3\u6587\u672C\u3002',
+    label: '\u65E0\u969C\u788D\u6807\u7B7E\uFF08\u5982\u6587\u4EF6\u540D\uFF09\u3002\u60AC\u505C\u65F6\u4EE5\u63D0\u793A\u5DE5\u5177\u663E\u793A\u3002',
+    onRemove: '\u8986\u76D6\u5C42\u79FB\u9664\u6309\u94AE\u7684\u56DE\u8C03\u3002',
+    onClick: '\u70B9\u51FB\u5904\u7406\u5668\u3002\u6DFB\u52A0\u6309\u94AE\u8BED\u4E49\u548C\u60AC\u505C\u9634\u5F71\u3002',
+    isLoading: '\u663E\u793A\u9AA8\u67B6\u5C4F\uFF08\u65E0 src\uFF09\u6216\u4E0A\u4F20\u8986\u76D6\u5C42\uFF08\u6709 src\uFF09\u3002',
+    isDisabled: '\u662F\u5426\u7981\u7528\u7F29\u7565\u56FE\u3002',
+    xstyle: '\u7528\u4E8E\u5E03\u5C40\u81EA\u5B9A\u4E49\u7684 StyleX \u6837\u5F0F\u3002\u5FC5\u987B\u662F stylex.create() \u7684\u503C\uFF0C\u800C\u975E\u5185\u8054\u6837\u5F0F\u5BF9\u8C61\u3002',
+    className: '\u6839\u5143\u7D20\u7684 CSS \u7C7B\u540D\u3002\u5EFA\u8BAE\u4F7F\u7528 xstyle\u3002',
+    style: '\u6839\u5143\u7D20\u7684\u5185\u8054\u6837\u5F0F\u3002\u5EFA\u8BAE\u4F7F\u7528 xstyle\u3002',
+    'data-testid': '\u7528\u4E8E\u81EA\u52A8\u5316\u6D4B\u8BD5\u6846\u67B6\u7684\u6D4B\u8BD5\u9009\u62E9\u5668\u3002',
+  },
+  usage: {
+    description:
+      'Thumbnail \u662F\u56FE\u7247\u9644\u4EF6\u7684\u65B9\u5F62\u9884\u89C8\u5361\u7247\u3002\u4E0A\u4F20\u65F6\u663E\u793A\u9AA8\u67B6\u5C4F\u52A8\u753B\uFF0C\u6210\u529F\u540E\u663E\u793A\u56FE\u7247\uFF0C\u672A\u8BBE\u7F6E\u6E90\u65F6\u663E\u793A\u5360\u4F4D\u56FE\u6807\u3002\u7528\u4E8E\u804A\u5929\u7F16\u8F91\u5668\u3001\u6587\u4EF6\u4E0A\u4F20\u5217\u8868\u6216\u4EFB\u4F55\u9700\u8981\u7D27\u51D1\u56FE\u7247\u9884\u89C8\u7684\u573A\u666F\u3002',
+    bestPractices: [
+      {guidance: true, description: '\u59CB\u7EC8\u63D0\u4F9B label \u5C5E\u6027\u5E76\u586B\u5199\u6587\u4EF6\u540D\uFF0C\u4EE5\u4FBF\u5C4F\u5E55\u9605\u8BFB\u5668\u80FD\u591F\u8BC6\u522B\u7F29\u7565\u56FE\u53CA\u5176\u79FB\u9664\u6309\u94AE\uFF0C\u5E76\u5728\u60AC\u505C\u65F6\u663E\u793A\u63D0\u793A\u3002'},
+      {guidance: true, description: '\u4E0A\u4F20\u521D\u671F\u4F7F\u7528\u4E0D\u5E26 src \u7684 isLoading \u663E\u793A\u9AA8\u67B6\u5C4F\uFF1B\u83B7\u5F97\u9884\u89C8 URL \u540E\u4F7F\u7528\u5E26 src \u7684 isLoading \u663E\u793A\u65CB\u8F6C\u52A0\u8F7D\u8986\u76D6\u5C42\u3002'},
+      {guidance: true, description: '\u5C06 onClick \u4E0E\u706F\u7BB1\u6216\u8BE6\u60C5\u89C6\u56FE\u914D\u5BF9\uFF0C\u4EE5\u4FBF\u7528\u6237\u67E5\u770B\u5B8C\u6574\u56FE\u7247\u2014\u2014\u7EC4\u4EF6\u4F1A\u81EA\u52A8\u6DFB\u52A0\u6309\u94AE\u8BED\u4E49\u548C\u60AC\u505C\u9634\u5F71\u3002'},
+      {guidance: false, description: '\u5BF9 PDF \u6216\u7535\u5B50\u8868\u683C\u7B49\u975E\u56FE\u7247\u6587\u4EF6\u7C7B\u578B\u4F7F\u7528 Thumbnail\u2014\u2014\u5E94\u4F7F\u7528\u5E26\u6709\u76F8\u5E94\u56FE\u6807\u7684\u6587\u4EF6\u9644\u4EF6\u7EC4\u4EF6\u3002'},
+      {guidance: false, description: '\u63D0\u4F9B src \u65F6\u7701\u7565 alt \u6587\u672C\u2014\u2014\u5C4F\u5E55\u9605\u8BFB\u5668\u9700\u8981\u56FE\u7247\u5185\u5BB9\u7684\u63CF\u8FF0\uFF0C\u800C\u4E0D\u4EC5\u662F label \u4E2D\u7684\u6587\u4EF6\u540D\u3002'},
+    ],
+  },
+};
+
+export const docsDense = {
+  description:
+    'Square preview card for image attachments. Skeleton shimmer on upload, image on success, placeholder when no src.',
+  usage: {
+    description:
+      'Compact square image preview. Shimmer while uploading, image on success, placeholder when empty. Use in chat composers, file lists, or small media previews.',
+    bestPractices: [
+      {guidance: true, description: 'Always set label (file name) for a11y \u2014 powers screen reader announce + hover tooltip.'},
+      {guidance: true, description: 'isLoading w/o src \u2192 skeleton; isLoading w/ src \u2192 spinner overlay. Two distinct loading states.'},
+      {guidance: true, description: 'onClick adds button semantics + hover shadow \u2014 pair with lightbox for full preview.'},
+      {guidance: false, description: "Don't use for non-image files (PDF, xlsx) \u2014 use file attachment component with icon instead."},
+      {guidance: false, description: "Don't omit alt when src present \u2014 screen readers need image content description, not just label."},
+    ],
+  },
+  propDescriptions: {
+    src: 'Image source URL.',
+    alt: 'Alt text for image.',
+    label: 'Accessible label (file name). Tooltip on hover, aria-label.',
+    onRemove: '(e) => void. Overlaid remove button callback.',
+    onClick: '(e) => void. Adds button semantics + hover shadow.',
+    isLoading: 'Skeleton (no src) or upload overlay (with src). Default: false.',
+    isDisabled: 'Disabled state. Default: false.',
+    xstyle: 'stylex.create() for layout.',
+    className: 'CSS class. Prefer xstyle.',
+    style: 'Inline styles. Prefer xstyle.',
+    'data-testid': 'Test selector.',
+  },
+};