@astryxdesign/core 0.1.3 → 0.1.4-canary.01e5b29

package/src/Chat/ChatToolCalls.tsx

@@ -18,7 +18,7 @@
  * for builders to wire up.
  */
 
-import React, {useState, useCallback, type ReactNode} from 'react';
+import React, {useState, useCallback, useId, type ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import {
@@ -41,11 +41,7 @@ import {themeProps} from '../utils/themeProps';
 // Types
 // =============================================================================
 
-export type ChatToolCallStatus =
-  | 'pending'
-  | 'running'
-  | 'complete'
-  | 'error';
+export type ChatToolCallStatus = 'pending' | 'running' | 'complete' | 'error';
 
 export interface ChatToolCallItem {
   /** Tool/function name. */
@@ -356,6 +352,7 @@ function CallRow({call}: {call: ChatToolCallItem}) {
   const status = call.status ?? 'complete';
   const hasDetail = call.resultDetail != null;
   const [isDetailOpen, setIsDetailOpen] = useState(false);
+  const detailId = useId();
 
   const toggleDetail = hasDetail
     ? () => setIsDetailOpen(prev => !prev)
@@ -365,6 +362,8 @@ function CallRow({call}: {call: ChatToolCallItem}) {
     <div
       role={hasDetail ? 'button' : undefined}
       tabIndex={hasDetail ? 0 : undefined}
+      aria-expanded={hasDetail ? isDetailOpen : undefined}
+      aria-controls={hasDetail && isDetailOpen ? detailId : undefined}
       onClick={toggleDetail}
       onKeyDown={
         hasDetail
@@ -399,11 +398,7 @@ function CallRow({call}: {call: ChatToolCallItem}) {
       </span>
       <span {...stylex.props(styles.callName)}>{call.name}</span>
       {call.node != null && (
-        <Badge
-          label={call.node}
-          variant="neutral"
-          xstyle={styles.nodePill}
-        />
+        <Badge label={call.node} variant="neutral" xstyle={styles.nodePill} />
       )}
       {call.target != null && (
         <span {...stylex.props(styles.callLabel)}>{call.target}</span>
@@ -448,7 +443,7 @@ function CallRow({call}: {call: ChatToolCallItem}) {
     <div>
       {row}
       {isDetailOpen && (
-        <div {...stylex.props(styles.callDetailContent)}>
+        <div id={detailId} {...stylex.props(styles.callDetailContent)}>
           {call.resultDetail}
         </div>
       )}
@@ -497,6 +492,7 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
 
   const autoDefault = defaultIsExpanded ?? false;
   const [internalExpanded, setInternalExpanded] = useState(autoDefault);
+  const contentId = useId();
   const isControlled = controlledExpanded !== undefined;
   const isExpanded = isControlled ? controlledExpanded : internalExpanded;
 
@@ -548,6 +544,7 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
         role="button"
         tabIndex={0}
         aria-expanded={isExpanded}
+        aria-controls={contentId}
         onClick={toggle}
         onKeyDown={e => {
           if (e.key === 'Enter' || e.key === ' ') {
@@ -613,6 +610,7 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
 
       {/* Expanded: all calls with full metadata */}
       <div
+        id={contentId}
         {...stylex.props(
           styles.groupContent,
           isExpanded && styles.groupContentExpanded,

package/src/Chat/index.ts

@@ -21,10 +21,7 @@ export type {ChatSendButtonProps} from './ChatSendButton';
 export {ChatComposerDrawer} from './ChatComposerDrawer';
 export type {ChatComposerDrawerProps} from './ChatComposerDrawer';
 
-export {
-  ChatComposerInput,
-  ChatComposerTokenElement,
-} from './ChatComposerInput';
+export {ChatComposerInput, ChatComposerTokenElement} from './ChatComposerInput';
 export type {
   ChatComposerInputProps,
   ChatComposerInputHandle,

package/src/Chat/useChatNewMessages.test.tsx

@@ -64,7 +64,7 @@ describe('useChatNewMessages — callback ref (issue #2282)', () => {
       const {contentRef} = useChatNewMessages({isLocked: true, onResize});
       return (
         <div ref={contentRef} data-testid="content">
-          <div className="xds-chat-message">msg</div>
+          <div className="astryx-chat-message">msg</div>
         </div>
       );
     }
@@ -91,7 +91,7 @@ describe('useChatNewMessages — callback ref (issue #2282)', () => {
           </button>
           {mounted && (
             <div ref={contentRef} data-testid="content">
-              <div className="xds-chat-message">msg</div>
+              <div className="astryx-chat-message">msg</div>
             </div>
           )}
         </>
@@ -129,7 +129,7 @@ describe('useChatNewMessages — callback ref (issue #2282)', () => {
           </button>
           {mounted && (
             <div ref={contentRef} data-testid="content">
-              <div className="xds-chat-message">msg</div>
+              <div className="astryx-chat-message">msg</div>
             </div>
           )}
         </>
@@ -198,7 +198,7 @@ describe('useChatNewMessages — callback ref (issue #2282)', () => {
       if (!el.querySelector?.('.astryx-chat-message')) {
         return false;
       }
-      if (el.className?.includes('xds-chat-layout')) {
+      if (el.className?.includes('astryx-chat-layout')) {
         return false;
       }
       return true;

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -63,11 +63,17 @@ export const docs = {
       description: 'Whether the checkbox is disabled.',
       default: 'false',
     },
+    {
+      name: 'htmlName',
+      type: 'string',
+      description:
+        'The HTML name attribute for the underlying checkbox input, useful for form submissions (submits "on" when checked).',
+    },
     {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the checkbox is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the checkbox focusable via aria-disabled (toggling stays blocked). Use this instead of wrapping a disabled CheckboxInput in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the checkbox is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the checkbox focusable via aria-disabled (toggling stays blocked). Use this instead of wrapping a disabled CheckboxInput in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
     },
     {
       name: 'isReadOnly',
@@ -119,7 +125,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-checkbox-input', visualProps: ['size']},
-      {className: 'astryx-checkbox'},
+      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled']},
     ],
   },
   usage: {
@@ -171,7 +177,8 @@ export const docsZh = {
     },
     {name: 'isLoading', type: 'boolean', description: '复选框是否处于加载状态。显示旋转器并阻止交互。', default: 'false'},
     {name: 'isDisabled', type: 'boolean', description: '复选框是否禁用。', default: 'false'},
-    {name: 'disabledMessage', type: 'string', description: 'Explains why the checkbox is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the checkbox focusable via aria-disabled (toggling stays blocked). Use this instead of wrapping a disabled CheckboxInput in Tooltip — disabled controls swallow the hover events an external Tooltip needs.'},
+    {name: 'htmlName', type: 'string', description: '底层复选框输入的 HTML name 属性，用于表单提交（勾选时提交 "on"）。'},
+    {name: 'disabledMessage', type: 'string', description: 'Explains why the checkbox is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the checkbox focusable via aria-disabled (toggling stays blocked). Use this instead of wrapping a disabled CheckboxInput in Tooltip: disabled controls swallow the hover events an external Tooltip needs.'},
     {name: 'isReadOnly', type: 'boolean', description: '复选框是否为只读。以完整不透明度显示当前状态但阻止交互。与 isDisabled 不同，只读复选框不会变暗。', default: 'false'},
     {name: 'isOptional', type: 'boolean', description: '字段是否可选。与 isRequired 互斥。', default: 'false'},
     {name: 'isRequired', type: 'boolean', description: '复选框是否必填。与 isOptional 互斥。', default: 'false'},
@@ -193,7 +200,7 @@ export const docsZh = {
           'size',
         ],
       },
-      {className: 'astryx-checkbox'},
+      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled']},
     ],
   },
 };
@@ -222,6 +229,7 @@ export const docsDense = {
     changeAction: 'async action; fires after onChange, shows spinner while pending',
     isLoading: 'shows spinner + prevents interaction',
     isDisabled: 'disable checkbox',
+    htmlName: 'HTML name attr for the checkbox; submits "on" when checked.',
     isOptional: 'mark field as optional (mutually exclusive w/ isRequired)',
     isRequired: 'mark field as required (mutually exclusive w/ isOptional)',
     size: 'sm (compact) or md (default)',

package/src/CheckboxInput/CheckboxInput.test.tsx

@@ -167,6 +167,59 @@ describe('CheckboxInput', () => {
     expect(handleChange).not.toHaveBeenCalled();
   });
 
+  it('forwards data-testid to the input', () => {
+    render(
+      <CheckboxInput
+        label="Accept terms"
+        value={false}
+        onChange={() => {}}
+        data-testid="accept-terms-checkbox"
+      />,
+    );
+    expect(screen.getByTestId('accept-terms-checkbox')).toBe(
+      screen.getByRole('checkbox'),
+    );
+  });
+
+  it('forwards arbitrary data-* attributes to the input', () => {
+    render(
+      <CheckboxInput
+        label="Accept terms"
+        value={false}
+        onChange={() => {}}
+        data-tracking-id="checkbox-42"
+      />,
+    );
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'data-tracking-id',
+      'checkbox-42',
+    );
+  });
+
+  it('does not let rest props override checked, disabled, or type', () => {
+    // Not part of CheckboxInputProps; spread (rather than named attributes)
+    // to sidestep JSX excess-property checks the same way a real caller's
+    // spread rest-props object would arrive untyped at runtime.
+    const foreignAttrs: Record<string, unknown> = {
+      checked: false,
+      disabled: false,
+      type: 'text',
+    };
+    render(
+      <CheckboxInput
+        {...foreignAttrs}
+        label="Accept terms"
+        value={true}
+        onChange={() => {}}
+        isDisabled
+      />,
+    );
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeChecked();
+    expect(checkbox).toBeDisabled();
+    expect(checkbox).toHaveAttribute('type', 'checkbox');
+  });
+
   it('forwards ref correctly', () => {
     const ref = vi.fn();
     render(
@@ -392,4 +445,54 @@ describe('CheckboxInput', () => {
       expect(screen.getByRole('checkbox')).toBeDisabled();
     });
   });
+  describe('form participation', () => {
+    it('submits under htmlName when checked', () => {
+      const {container} = render(
+        <form>
+          <CheckboxInput
+            label="Terms"
+            htmlName="terms"
+            value={true}
+            onChange={() => {}}
+          />
+        </form>,
+      );
+      const data = new FormData(container.querySelector('form')!);
+      expect(data.get('terms')).toBe('on');
+    });
+
+    it('is excluded from form data when disabled, even with a disabledMessage', () => {
+      const {container} = render(
+        <form>
+          <CheckboxInput
+            label="Terms"
+            htmlName="terms"
+            value={true}
+            onChange={() => {}}
+            isDisabled
+            disabledMessage="Locked"
+          />
+        </form>,
+      );
+      expect([
+        ...new FormData(container.querySelector('form')!).keys(),
+      ]).toEqual([]);
+    });
+
+    it('submits nothing when unchecked', () => {
+      const {container} = render(
+        <form>
+          <CheckboxInput
+            label="Terms"
+            htmlName="terms"
+            value={false}
+            onChange={() => {}}
+          />
+        </form>,
+      );
+      expect([
+        ...new FormData(container.querySelector('form')!).keys(),
+      ]).toEqual([]);
+    });
+  });
 });

package/src/CheckboxInput/CheckboxInput.tsx

@@ -272,6 +272,12 @@ export interface CheckboxInputProps extends Omit<BaseProps, 'onChange'> {
    * @default false
    */
   isDisabled?: boolean;
+
+  /**
+   * The HTML name attribute for the underlying checkbox input.
+   * Useful for form submissions.
+   */
+  htmlName?: string;
   /**
    * Explains why the checkbox is disabled. When set together with
    * `isDisabled`, the checkbox shows a tooltip with this text on hover and
@@ -374,6 +380,7 @@ export function CheckboxInput({
   isLoading = false,
   value,
   isDisabled = false,
+  htmlName,
   disabledMessage,
   isReadOnly = false,
   isOptional = false,
@@ -388,6 +395,7 @@ export function CheckboxInput({
   className,
   style,
   ref,
+  ...rest
 }: CheckboxInputProps) {
   const id = useId();
   const descriptionID = useId();
@@ -477,6 +485,7 @@ export function CheckboxInput({
         )}>
         <div {...stylex.props(styles.checkboxWrapper, wrapperSizeStyles[size])}>
           <input
+            {...rest}
             ref={mergeRefs(
               ref,
               indeterminateRef,
@@ -484,6 +493,10 @@ export function CheckboxInput({
             )}
             id={id}
             type="checkbox"
+            // Withhold the name while disabled: with a disabledMessage the
+            // input stays focusable (not natively disabled), and a disabled
+            // control must not submit.
+            name={isDisabled ? undefined : htmlName}
             checked={isChecked}
             // With a disabledMessage the checkbox keeps focusability via
             // aria-disabled so the reason is focus-discoverable; toggling is

package/src/CheckboxList/CheckboxList.doc.mjs

@@ -81,7 +81,7 @@ export const docs = {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the group is disabled. Applies to the whole-group disabled state (isDisabled), not per item. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the checkboxes focusable via aria-disabled (toggling stays blocked). Use this instead of wrapping a disabled CheckboxList in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the group is disabled. Applies to the whole-group disabled state (isDisabled), not per item. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the checkboxes focusable via aria-disabled (toggling stays blocked). Use this instead of wrapping a disabled CheckboxList in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
     },
     {
       name: 'status',

package/src/CheckboxList/CheckboxList.test.tsx

@@ -135,6 +135,25 @@ describe('CheckboxList', () => {
     expect(handleChange).toHaveBeenCalledWith(['b']);
   });
 
+  it('fires a consumer onClick on an item in addition to toggling', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    const handleClick = vi.fn();
+    render(
+      <CheckboxList label="Preferences" value={['a']} onChange={handleChange}>
+        <CheckboxListItem label="Option A" value="a" />
+        <CheckboxListItem label="Option B" value="b" onClick={handleClick} />
+      </CheckboxList>,
+    );
+
+    // Click the interactive row (invisible-button pattern), which is where the
+    // composed onClick lives — not the inner checkbox.
+    await user.click(screen.getByRole('button', {name: 'Option B'}));
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+    expect(handleChange).toHaveBeenCalledWith(['a', 'b']);
+  });
+
   it('disables all checkboxes when group isDisabled is true', () => {
     render(
       <CheckboxList

package/src/CheckboxList/CheckboxListItem.tsx

@@ -16,11 +16,12 @@
  * - /packages/cli/templates/blocks/components/CheckboxList/ (showcase blocks)
  */
 
-import {use, type ReactNode} from 'react';
+import {use, type MouseEvent, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import {colorVars} from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
+import {composeEventHandlers} from '../utils';
 import {CheckboxInput} from '../CheckboxInput/CheckboxInput';
 import {ListItem} from '../List/ListItem';
 import {ListContext} from '../List/ListContext';
@@ -128,6 +129,7 @@ export function CheckboxListItem({
   xstyle,
   className,
   style,
+  onClick: onClickProp,
   ...restProps
 }: CheckboxListItemProps) {
   const ctx = use(CheckboxListContext);
@@ -200,7 +202,14 @@ export function CheckboxListItem({
       description={description}
       endContent={endContent}
       isDisabled={effectiveDisabled}
-      onClick={isInteractive ? handleToggle : undefined}
+      onClick={
+        isInteractive || onClickProp
+          ? composeEventHandlers<MouseEvent>(
+              onClickProp as ((event: MouseEvent) => void) | undefined,
+              isInteractive ? handleToggle : undefined,
+            )
+          : undefined
+      }
       aria-busy={isBusy || undefined}
       xstyle={
         [

package/src/Citation/Citation.doc.mjs

@@ -88,6 +88,11 @@ export const docs = {
       default: "'label'",
     },
   ],
+  theming: {
+    targets: [
+      {className: 'astryx-citation', visualProps: ['variant']},
+    ],
+  },
 };
 
 /** @type {import('../docs-types').TranslationDoc} */

package/src/ClickableCard/ClickableCard.tsx

@@ -31,7 +31,12 @@
 import {type ReactNode, type MouseEvent, useRef, type Ref} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
-import {colorVars, durationVars, easeVars} from '../theme/tokens.stylex';
+import {
+  borderVars,
+  colorVars,
+  durationVars,
+  easeVars,
+} from '../theme/tokens.stylex';
 import type {SizeValue, SpacingStep} from '../utils/types';
 import {mergeProps, mergeRefs} from '../utils';
 import {Card} from '../Card/Card';
@@ -66,7 +71,6 @@ const styles = stylex.create({
       content: '""',
       position: 'absolute',
       inset: 0,
-      borderRadius: 'inherit',
       pointerEvents: 'none',
       transitionProperty: 'background-color',
       transitionDuration: durationVars['--duration-fast'],
@@ -84,6 +88,38 @@ const styles = stylex.create({
       },
     },
   },
+  // Borderless variants (everything except `default`): drop the transparent
+  // 1px border Card applies. The overlay is inset to the padding box — inside
+  // that border — so a transparent border strip stays untinted on hover and
+  // reads as a faint ring. With no border, the overlay covers the full box
+  // edge-to-edge and the ring disappears.
+  borderless: {
+    borderWidth: 0,
+  },
+  // Bordered variant (`default`): draw the 1px border *within* the padding by
+  // subtracting the border width from every side. Total inset (border +
+  // padding) then equals the borderless variants' padding, so content geometry
+  // and outer dimensions stay identical across all variants. The border rests
+  // at the subtle token and emphasizes on hover.
+  bordered: {
+    borderColor: colorVars['--color-border'],
+    paddingInlineStart: `calc(var(--container-padding-inline-start) - ${borderVars['--border-width']})`,
+    paddingInlineEnd: `calc(var(--container-padding-inline-end) - ${borderVars['--border-width']})`,
+    paddingBlockStart: `calc(var(--container-padding-block-start) - ${borderVars['--border-width']})`,
+    paddingBlockEnd: `calc(var(--container-padding-block-end) - ${borderVars['--border-width']})`,
+    transitionProperty: 'border-color',
+    transitionDuration: durationVars['--duration-fast'],
+    transitionTimingFunction: easeVars['--ease-standard'],
+  },
+  // Emphasize the bordered variant's border on hover. Guarded by
+  // @media (hover: hover) so touch devices don't get a stuck hover state.
+  borderedHoverOnPointer: {
+    '@media (hover: hover)': {
+      ':hover': {
+        borderColor: colorVars['--color-border-emphasized'],
+      },
+    },
+  },
   disabled: {
     cursor: 'not-allowed',
     opacity: 0.5,
@@ -248,6 +284,11 @@ export function ClickableCard({
 
   const isLink = href != null;
 
+  // Only the `default` variant has a visible border. Card draws a transparent
+  // 1px border on every other variant purely to avoid layout jitter; we drop
+  // it here so the hover overlay covers the full box with no untinted ring.
+  const hasBorder = variant === 'default';
+
   return (
     <Card
       ref={mergeRefs(ref, containerRef)}
@@ -264,8 +305,10 @@ export function ClickableCard({
         [
           styles.interactive,
           styles.focusWithin,
+          hasBorder ? styles.bordered : styles.borderless,
           !isDisabled && styles.overlay,
           !isDisabled && styles.hoverOnPointer,
+          !isDisabled && hasBorder && styles.borderedHoverOnPointer,
           isDisabled && styles.disabled,
           xstyleProp,
         ] as unknown as StyleXStyles

package/src/Code/Code.test.tsx

@@ -0,0 +1,54 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Code.test.tsx
+ * @input Uses vitest, @testing-library/react, Code component
+ * @output Unit tests for Code component behavior
+ * @position Testing; validates Code.tsx implementation
+ *
+ * SYNC: When Code.tsx changes, update tests to match new behavior
+ */
+
+import {describe, it, expect, vi} from 'vitest';
+import {render, screen} from '@testing-library/react';
+import {Code} from './Code';
+
+describe('Code', () => {
+  it('renders children inside a <code> element', () => {
+    render(<Code>const x = 1</Code>);
+    const el = screen.getByText('const x = 1');
+    expect(el.tagName).toBe('CODE');
+  });
+
+  it('forwards ref to the root element', () => {
+    const ref = vi.fn();
+    render(<Code ref={ref}>code</Code>);
+    expect(ref).toHaveBeenCalledWith(expect.any(HTMLElement));
+  });
+
+  it('defaults color to primary', () => {
+    render(<Code>code</Code>);
+    expect(screen.getByText('code')).toHaveClass('astryx-code', 'primary');
+  });
+
+  it('applies the secondary color', () => {
+    render(<Code color="secondary">code</Code>);
+    expect(screen.getByText('code')).toHaveClass('astryx-code', 'secondary');
+  });
+
+  it('applies the inherit color', () => {
+    render(<Code color="inherit">code</Code>);
+    expect(screen.getByText('code')).toHaveClass('astryx-code', 'inherit');
+  });
+
+  it('adds a size class when size="inherit" (font-size + line-height inherit)', () => {
+    const {rerender} = render(<Code>code</Code>);
+    const defaultClass = screen.getByText('code').getAttribute('class');
+
+    rerender(<Code size="inherit">code</Code>);
+    const inheritClass = screen.getByText('code').getAttribute('class');
+
+    // size="inherit" adds an extra StyleX class beyond the default rendering.
+    expect(inheritClass).not.toEqual(defaultClass);
+  });
+});

package/src/Code/Code.tsx

@@ -42,9 +42,46 @@ const styles = stylex.create({
   },
 });
 
+const colorStyles = stylex.create({
+  primary: {
+    color: colorVars['--color-text-primary'],
+  },
+  secondary: {
+    color: colorVars['--color-text-secondary'],
+  },
+  inherit: {
+    color: 'inherit',
+  },
+});
+
+const sizeStyles = stylex.create({
+  // Adopt the surrounding text's font-size and line-height, for inline code
+  // that should match differently-sized text around it.
+  inherit: {
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+  },
+});
+
+/** Text color for {@link Code}, mirroring the primary/secondary/inherit subset of Text. */
+export type CodeColor = 'primary' | 'secondary' | 'inherit';
+
+/** Font size for {@link Code}. `'inherit'` adopts the surrounding text size. */
+export type CodeSize = 'inherit';
+
 export interface CodeProps extends BaseProps<HTMLElement> {
   /** Ref forwarded to the root element */
   ref?: React.Ref<HTMLElement>;
+  /**
+   * Text color. Mirrors the Text color subset.
+   * @default 'primary'
+   */
+  color?: CodeColor;
+  /**
+   * Font size. Set to `'inherit'` to adopt the surrounding text's font-size
+   * and line-height (useful for inline code inside larger/smaller text).
+   */
+  size?: CodeSize;
   /** Code content */
   children: ReactNode;
 }
@@ -64,6 +101,8 @@ export interface CodeProps extends BaseProps<HTMLElement> {
  */
 export function Code({
   children,
+  color = 'primary',
+  size,
   xstyle,
   className,
   style,
@@ -73,13 +112,18 @@ export function Code({
   return (
     <code
       ref={ref}
+      {...props}
       {...mergeProps(
-        themeProps('code'),
-        stylex.props(styles.base, xstyle),
+        themeProps('code', {color}),
+        stylex.props(
+          styles.base,
+          colorStyles[color],
+          size && sizeStyles[size],
+          xstyle,
+        ),
         className,
         style,
-      )}
-      data-testid={props['data-testid']}>
+      )}>
       {children}
     </code>
   );

package/src/Code/index.ts

@@ -7,4 +7,4 @@
  * @position Entry point for @astryxdesign/core/Code subpath export
  */
 
-export {Code, type CodeProps} from './Code';
+export {Code, type CodeProps, type CodeColor, type CodeSize} from './Code';