@astryxdesign/core 0.1.4-canary.fd7ab46 → 0.1.4

package/src/Chat/ChatTokenizedText.test.tsx

@@ -6,12 +6,18 @@ import {ChatTokenizedText} from './ChatTokenizedText';
 
 describe('ChatTokenizedText', () => {
   it('renders plain text when no tokens provided', () => {
-    render(<ChatTokenizedText>Hello world</ChatTokenizedText>);
+    render(
+      <ChatTokenizedText>Hello world</ChatTokenizedText>,
+    );
     expect(screen.getByText('Hello world')).toBeInTheDocument();
   });
 
   it('renders plain text when tokens array is empty', () => {
-    render(<ChatTokenizedText tokens={[]}>Hello world</ChatTokenizedText>);
+    render(
+      <ChatTokenizedText tokens={[]}>
+        Hello world
+      </ChatTokenizedText>,
+    );
     expect(screen.getByText('Hello world')).toBeInTheDocument();
   });
 
@@ -42,7 +48,8 @@ describe('ChatTokenizedText', () => {
 
   it('handles repeated occurrences of the same token', () => {
     render(
-      <ChatTokenizedText tokens={[{value: '@cindy', label: '@Cindy Zhang'}]}>
+      <ChatTokenizedText
+        tokens={[{value: '@cindy', label: '@Cindy Zhang'}]}>
         @cindy and @cindy again
       </ChatTokenizedText>,
     );
@@ -51,7 +58,8 @@ describe('ChatTokenizedText', () => {
 
   it('renders text with no matching tokens as plain text', () => {
     render(
-      <ChatTokenizedText tokens={[{value: '@cindy', label: '@Cindy Zhang'}]}>
+      <ChatTokenizedText
+        tokens={[{value: '@cindy', label: '@Cindy Zhang'}]}>
         Hello world
       </ChatTokenizedText>,
     );
@@ -60,7 +68,8 @@ describe('ChatTokenizedText', () => {
 
   it('handles tokens with special regex characters in pattern', () => {
     render(
-      <ChatTokenizedText tokens={[{value: '/search', label: '/search'}]}>
+      <ChatTokenizedText
+        tokens={[{value: '/search', label: '/search'}]}>
         Run /search now
       </ChatTokenizedText>,
     );
@@ -70,7 +79,8 @@ describe('ChatTokenizedText', () => {
 
   it('preserves surrounding text', () => {
     const {container} = render(
-      <ChatTokenizedText tokens={[{value: '@cindy', label: '@Cindy Zhang'}]}>
+      <ChatTokenizedText
+        tokens={[{value: '@cindy', label: '@Cindy Zhang'}]}>
         Before @cindy after
       </ChatTokenizedText>,
     );
@@ -78,27 +88,4 @@ describe('ChatTokenizedText', () => {
     expect(container.textContent).toContain('after');
     expect(container.textContent).toContain('@Cindy Zhang');
   });
-
-  it('forwards rest props (data-*, id) to the root element', () => {
-    render(
-      <ChatTokenizedText data-testid="tokenized" data-custom="x" id="tok-1">
-        Plain text
-      </ChatTokenizedText>,
-    );
-    const root = screen.getByTestId('tokenized');
-    expect(root).toHaveAttribute('data-custom', 'x');
-    expect(root).toHaveAttribute('id', 'tok-1');
-  });
-
-  it('forwards rest props when rendering tokens', () => {
-    render(
-      <ChatTokenizedText
-        tokens={[{value: '@cindy', label: '@Cindy Zhang'}]}
-        data-testid="tokenized"
-        data-custom="x">
-        Hi @cindy
-      </ChatTokenizedText>,
-    );
-    expect(screen.getByTestId('tokenized')).toHaveAttribute('data-custom', 'x');
-  });
 });

package/src/Chat/ChatTokenizedText.tsx

@@ -91,10 +91,6 @@ export function ChatTokenizedText({
   ref,
   children,
   tokens,
-  xstyle,
-  className,
-  style,
-  ...rest
 }: ChatTokenizedTextProps) {
   if (!children || !tokens || tokens.length === 0) {
     return (
@@ -102,11 +98,8 @@ export function ChatTokenizedText({
         ref={ref}
         {...mergeProps(
           themeProps('chat-tokenized-text'),
-          stylex.props(styles.root, xstyle),
-          className,
-          style,
-        )}
-        {...rest}>
+          stylex.props(styles.root),
+        )}>
         {children ?? ''}
       </span>
     );
@@ -118,11 +111,8 @@ export function ChatTokenizedText({
       ref={ref}
       {...mergeProps(
         themeProps('chat-tokenized-text'),
-        stylex.props(styles.root, xstyle),
-        className,
-        style,
-      )}
-      {...rest}>
+        stylex.props(styles.root),
+      )}>
       {parts}
     </span>
   );
@@ -134,7 +124,10 @@ ChatTokenizedText.displayName = 'ChatTokenizedText';
 // Render
 // =============================================================================
 
-function renderTokens(text: string, tokens: ChatComposerToken[]): ReactNode[] {
+function renderTokens(
+  text: string,
+  tokens: ChatComposerToken[],
+): ReactNode[] {
   const pattern = tokens.map(t => escapeRegExp(t.value)).join('|');
   const regex = new RegExp(`(${pattern})`, 'g');
 

package/src/Chat/ChatToolCalls.test.tsx

@@ -97,59 +97,4 @@ describe('ChatToolCalls', () => {
     );
     expect(screen.getByText('git status')).toBeInTheDocument();
   });
-
-  it('exposes no aria-expanded on a call row without resultDetail', () => {
-    const {container} = render(
-      <ChatToolCalls calls={[{name: 'bash', status: 'complete'}]} />,
-    );
-    expect(container.querySelector('[aria-expanded]')).toBeNull();
-  });
-
-  it('wires disclosure semantics on an expandable call row', () => {
-    render(
-      <ChatToolCalls
-        calls={[
-          {
-            name: 'readFile',
-            status: 'complete',
-            resultDetail: <div>file contents here</div>,
-          },
-        ]}
-      />,
-    );
-    const row = screen.getByRole('button');
-    expect(row).toHaveAttribute('aria-expanded', 'false');
-    // Detail panel is conditionally mounted, so no aria-controls while closed.
-    expect(row).not.toHaveAttribute('aria-controls');
-    expect(screen.queryByText('file contents here')).not.toBeInTheDocument();
-
-    fireEvent.click(row);
-
-    expect(row).toHaveAttribute('aria-expanded', 'true');
-    const detailId = row.getAttribute('aria-controls');
-    expect(detailId).toBeTruthy();
-    const panel = document.getElementById(detailId as string);
-    expect(panel).not.toBeNull();
-    expect(panel).toHaveTextContent('file contents here');
-  });
-
-  it('points the group header aria-controls at the content region', () => {
-    render(
-      <ChatToolCalls
-        defaultIsExpanded={true}
-        calls={[
-          {name: 'searchCode', status: 'complete'},
-          {name: 'readFile', status: 'complete'},
-        ]}
-      />,
-    );
-    const header = screen.getByRole('button');
-    expect(header).toHaveAttribute('aria-expanded', 'true');
-    const regionId = header.getAttribute('aria-controls');
-    expect(regionId).toBeTruthy();
-    const region = document.getElementById(regionId as string);
-    expect(region).not.toBeNull();
-    expect(region).toHaveTextContent('searchCode');
-    expect(region).toHaveTextContent('readFile');
-  });
 });

package/src/Chat/ChatToolCalls.tsx

@@ -18,7 +18,7 @@
  * for builders to wire up.
  */
 
-import React, {useState, useCallback, useId, type ReactNode} from 'react';
+import React, {useState, useCallback, type ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import {
@@ -41,7 +41,11 @@ 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. */
@@ -352,7 +356,6 @@ 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)
@@ -362,8 +365,6 @@ 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
@@ -398,7 +399,11 @@ 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>
@@ -443,7 +448,7 @@ function CallRow({call}: {call: ChatToolCallItem}) {
     <div>
       {row}
       {isDetailOpen && (
-        <div id={detailId} {...stylex.props(styles.callDetailContent)}>
+        <div {...stylex.props(styles.callDetailContent)}>
           {call.resultDetail}
         </div>
       )}
@@ -492,7 +497,6 @@ 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;
 
@@ -544,7 +548,6 @@ 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 === ' ') {
@@ -610,7 +613,6 @@ 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,7 +21,10 @@ 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/useTriggerMenu.tsx

@@ -40,7 +40,10 @@ import {
 import {mergeProps, groupItems} from '../utils';
 import type {SearchableItem} from '../Typeahead/types';
 import {themeProps} from '../utils/themeProps';
-import type {ChatComposerTrigger, ChatComposerToken} from './ChatComposerInput';
+import type {
+  ChatComposerTrigger,
+  ChatComposerToken,
+} from './ChatComposerInput';
 
 // =============================================================================
 // Types

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -125,7 +125,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-checkbox-input', visualProps: ['size']},
-      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled']},
+      {className: 'astryx-checkbox'},
     ],
   },
   usage: {
@@ -178,7 +178,7 @@ export const docsZh = {
     {name: 'isLoading', type: 'boolean', description: '复选框是否处于加载状态。显示旋转器并阻止交互。', default: 'false'},
     {name: 'isDisabled', type: 'boolean', description: '复选框是否禁用。', default: 'false'},
     {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: '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'},
@@ -200,7 +200,7 @@ export const docsZh = {
           'size',
         ],
       },
-      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled']},
+      {className: 'astryx-checkbox'},
     ],
   },
 };

package/src/CheckboxInput/CheckboxInput.test.tsx

@@ -167,59 +167,6 @@ 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(
@@ -449,12 +396,7 @@ describe('CheckboxInput', () => {
     it('submits under htmlName when checked', () => {
       const {container} = render(
         <form>
-          <CheckboxInput
-            label="Terms"
-            htmlName="terms"
-            value={true}
-            onChange={() => {}}
-          />
+          <CheckboxInput label="Terms" htmlName="terms" value={true} onChange={() => {}} />
         </form>,
       );
       const data = new FormData(container.querySelector('form')!);
@@ -474,25 +416,16 @@ describe('CheckboxInput', () => {
           />
         </form>,
       );
-      expect([
-        ...new FormData(container.querySelector('form')!).keys(),
-      ]).toEqual([]);
+      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={() => {}}
-          />
+          <CheckboxInput label="Terms" htmlName="terms" value={false} onChange={() => {}} />
         </form>,
       );
-      expect([
-        ...new FormData(container.querySelector('form')!).keys(),
-      ]).toEqual([]);
+      expect([...new FormData(container.querySelector('form')!).keys()]).toEqual([]);
     });
   });
 });

package/src/CheckboxInput/CheckboxInput.tsx

@@ -395,7 +395,6 @@ export function CheckboxInput({
   className,
   style,
   ref,
-  ...rest
 }: CheckboxInputProps) {
   const id = useId();
   const descriptionID = useId();
@@ -485,7 +484,6 @@ export function CheckboxInput({
         )}>
         <div {...stylex.props(styles.checkboxWrapper, wrapperSizeStyles[size])}>
           <input
-            {...rest}
             ref={mergeRefs(
               ref,
               indeterminateRef,

package/src/CheckboxList/CheckboxList.test.tsx

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

package/src/Citation/Citation.doc.mjs

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

package/src/ClickableCard/ClickableCard.tsx

@@ -31,12 +31,7 @@
 import {type ReactNode, type MouseEvent, useRef, type Ref} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
-import {
-  borderVars,
-  colorVars,
-  durationVars,
-  easeVars,
-} from '../theme/tokens.stylex';
+import {colorVars, durationVars, easeVars} from '../theme/tokens.stylex';
 import type {SizeValue, SpacingStep} from '../utils/types';
 import {mergeProps, mergeRefs} from '../utils';
 import {Card} from '../Card/Card';
@@ -71,6 +66,7 @@ const styles = stylex.create({
       content: '""',
       position: 'absolute',
       inset: 0,
+      borderRadius: 'inherit',
       pointerEvents: 'none',
       transitionProperty: 'background-color',
       transitionDuration: durationVars['--duration-fast'],
@@ -88,38 +84,6 @@ 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,
@@ -284,11 +248,6 @@ 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)}
@@ -305,10 +264,8 @@ 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/CodeBlock/CodeBlock.doc.mjs

@@ -90,11 +90,6 @@ export const docs = {
       type: '(code: string, language: string) => Array<{type: string; start: number; end: number}>',
       description: 'Custom tokenizer override for unsupported languages.',
     },
-    {
-      name: 'syntaxTheme',
-      type: 'SyntaxThemeDefinition',
-      description: 'Per-instance syntax theme override. Shorthand for wrapping the block in <SyntaxTheme theme={...}>. Accepts a preset from @astryxdesign/core/theme/syntax or a theme created with defineSyntaxTheme(). Defaults to the nearest SyntaxTheme ancestor or the theme-level syntax colors.',
-    },
     {
       name: 'isCollapsible',
       type: 'boolean',
@@ -140,8 +135,8 @@ export const docs = {
   },
   theming: {
     targets: [
-      {className: 'astryx-code', visualProps: ['color']},
-      {className: 'astryx-codeblock', visualProps: ['size', 'language', 'container']},
+      {className: 'astryx-code'},
+      {className: 'astryx-codeblock', visualProps: ['size', 'language']},
     ],
   },
   usage: {