@astryxdesign/core 0.2.0 → 0.3.0-canary.1b8b3f2

package/src/Field/Field.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Field',
@@ -30,6 +30,10 @@ export const docs = {
       {className: 'astryx-field', visualProps: ['layout']},
       {className: 'astryx-field-label'},
       {className: 'astryx-field-status', visualProps: ['type', 'variant']},
+      {
+        className: 'astryx-input-status-icon',
+        visualProps: ['size', 'status'],
+      },
     ],
     vars: [
       {name: '--_field-radius', description: 'Border radius of input fields', default: 'var(--radius-element)', private: true},
@@ -192,7 +196,7 @@ function CustomSliderField() {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description: 'Field is a low-level wrapper for custom, native, or third-party controls that do not already provide field label, description, and status UI. Use it when you need the Field shell around a control you own; use styled Astryx inputs like TextInput, Typeahead, and Select directly when they already expose label, description, and validation props.',
@@ -208,7 +212,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Low-level field shell for custom controls needing label/description/status.',

package/src/Field/Field.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/Field/Field.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Field/index.ts (exports if types change)
  * - /apps/storybook/stories/Field.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Field/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Field/ (showcase blocks)
  */
 
 import {type ReactNode, use} from 'react';

package/src/Field/FieldLabel.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'FieldLabel',

package/src/Field/FieldLabel.test.tsx

@@ -11,7 +11,9 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import {TestIcon} from '../__tests__/TestIcon';
+import {InternationalizationProvider} from '../i18n';
 import {FieldLabel} from './FieldLabel';
 
 describe('FieldLabel', () => {
@@ -36,6 +38,30 @@ describe('FieldLabel', () => {
     expect(screen.getByText(/Required/)).toBeInTheDocument();
   });
 
+  it('localizes the required indicator via the i18n provider', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{fr: {'@astryx.field.required': 'Obligatoire'}}}>
+        <FieldLabel label="Nom" inputID="name-input" isRequired />
+      </InternationalizationProvider>,
+    );
+    expect(screen.getByText(/Obligatoire/)).toBeInTheDocument();
+    expect(screen.queryByText(/Required/)).not.toBeInTheDocument();
+  });
+
+  it('localizes the optional indicator via the i18n provider', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{fr: {'@astryx.field.optional': 'Facultatif'}}}>
+        <FieldLabel label="Nom" inputID="name-input" isOptional />
+      </InternationalizationProvider>,
+    );
+    expect(screen.getByText(/Facultatif/)).toBeInTheDocument();
+    expect(screen.queryByText(/Optional/)).not.toBeInTheDocument();
+  });
+
   it('shows Optional when both isOptional and isRequired are true', () => {
     render(
       <FieldLabel label="Name" inputID="name-input" isOptional isRequired />,
@@ -94,4 +120,81 @@ describe('FieldLabel', () => {
     // Info icon should be present
     expect(document.querySelector('svg')).toBeInTheDocument();
   });
+
+  describe('description click forwarding', () => {
+    // Renders a real control with the target id so click-forwarding has
+    // something to hit, alongside the label whose description forwards clicks.
+    function renderWithControl(props: {
+      isGroupLabel?: boolean;
+      controlType?: string;
+      description?: React.ReactNode;
+    }) {
+      const {isGroupLabel, controlType = 'checkbox', description} = props;
+      const onClick = vi.fn();
+      render(
+        <>
+          <input id="ctrl" type={controlType} onClick={onClick} />
+          <FieldLabel
+            label="Notify"
+            inputID="ctrl"
+            description={description ?? "We'll email you"}
+            descriptionID="ctrl-desc"
+            isGroupLabel={isGroupLabel}
+          />
+        </>,
+      );
+      return onClick;
+    }
+
+    it('forwards a description click to a click-activatable control (checkbox)', async () => {
+      const user = userEvent.setup();
+      const onClick = renderWithControl({controlType: 'checkbox'});
+      await user.click(screen.getByText("We'll email you"));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('focuses (does not click) a text input on description click', async () => {
+      const user = userEvent.setup();
+      const onClick = renderWithControl({controlType: 'text'});
+      await user.click(screen.getByText("We'll email you"));
+      // Text inputs focus rather than click — matching native label behavior,
+      // so no synthetic click fires but the control receives focus.
+      expect(onClick).not.toHaveBeenCalled();
+      expect(document.getElementById('ctrl')).toHaveFocus();
+    });
+
+    it('does NOT forward description clicks for a group label', async () => {
+      const user = userEvent.setup();
+      const onClick = renderWithControl({isGroupLabel: true});
+      await user.click(screen.getByText("We'll email you"));
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('does NOT hijack clicks on interactive content inside the description', async () => {
+      const user = userEvent.setup();
+      const linkClick = vi.fn();
+      const onClick = renderWithControl({
+        description: (
+          <>
+            See our{' '}
+            <a href="#terms" onClick={linkClick}>
+              terms
+            </a>
+          </>
+        ),
+      });
+      await user.click(screen.getByRole('link', {name: 'terms'}));
+      // The nested link handles its own click; the control is not toggled.
+      expect(linkClick).toHaveBeenCalledTimes(1);
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('keeps the description a sibling of the label (not nested inside it)', () => {
+      renderWithControl({});
+      const description = screen.getByText("We'll email you");
+      // The description must not live inside the <label> — nesting it there
+      // would fold it into the control's accessible name.
+      expect(description.closest('label')).toBeNull();
+    });
+  });
 });

package/src/Field/FieldLabel.tsx

@@ -1,18 +1,21 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+'use client';
+
 /**
  * @file FieldLabel.tsx
- * @input Uses React, Icon, IconType
+ * @input Uses React, Icon, IconType, useTranslator
  * @output Exports FieldLabel component, FieldLabelProps
  * @position Core label implementation; used by Field, CheckboxInput, Switch
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Field/Field.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/Field/index.ts (exports if types change)
- * - /packages/cli/templates/blocks/components/Field/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Field/ (showcase blocks)
+ * - /packages/core/locales/en.json (@astryx.field.required / @astryx.field.optional)
  */
 
-import type {ReactNode} from 'react';
+import {useMemo, useRef, type ReactNode, type RefObject} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
@@ -26,7 +29,9 @@ import {
 } from '../theme/tokens.stylex';
 import {Icon, renderIconSlot, type IconType} from '../Icon';
 import {Tooltip} from '../Tooltip';
+import {useTranslator} from '../i18n';
 import {themeProps} from '../utils/themeProps';
+import {useInputContainer} from '../hooks';
 
 const styles = stylex.create({
   label: {
@@ -72,6 +77,11 @@ const styles = stylex.create({
     fontWeight: fontWeightVars['--font-weight-normal'],
     color: colorVars['--color-text-secondary'],
   },
+  // When the description forwards clicks to a click-activatable control
+  // (checkbox/switch), it reads as part of the same hit target as the label.
+  descriptionClickable: {
+    cursor: 'pointer',
+  },
 });
 
 export interface FieldLabelProps extends BaseProps<HTMLLabelElement> {
@@ -177,7 +187,12 @@ export function FieldLabel({
   ref,
   ...rest
 }: FieldLabelProps) {
-  const statusText = isOptional ? 'Optional' : isRequired ? 'Required' : null;
+  const t = useTranslator();
+  const statusText = isOptional
+    ? t('@astryx.field.optional')
+    : isRequired
+      ? t('@astryx.field.required')
+      : null;
 
   // A group label (e.g. for a radiogroup) must not be a literal `<label>`
   // element: a `<label>` semantically names a single form control and can't be
@@ -185,6 +200,41 @@ export function FieldLabel({
   // label styling and slots. The group references it via `aria-labelledby`.
   const LabelElement = isGroupLabel ? 'span' : 'label';
 
+  // Clicking the description forwards to the associated control, so the whole
+  // label area (label text + description) is one hit target — mirroring native
+  // `<label>` click behavior, which the description can't get from `htmlFor`
+  // because it stays a sibling `<span>` (nesting it in the `<label>` would fold
+  // it into the control's accessible name and double-announce it alongside
+  // `aria-describedby`). A group label names a group, not one control, so it
+  // has nothing to forward to.
+  const forwardsDescriptionClick = !isGroupLabel && inputID != null;
+
+  // Reuse `useInputContainer` — the same hook input wrappers use to forward
+  // clicks on non-interactive chrome to their control. It skips nested
+  // interactive content (a link/button inside a ReactNode description) and
+  // guards against forwarding during text selection, so the description needs
+  // no bespoke click logic. The "input" is resolved from `inputID` lazily via
+  // a ref-shaped object, since FieldLabel points at the control by id rather
+  // than holding a ref to it.
+  const descriptionRef = useRef<HTMLSpanElement>(null);
+  const controlRef = useMemo<RefObject<HTMLElement | null>>(
+    () => ({
+      get current() {
+        return inputID == null
+          ? null
+          : (descriptionRef.current?.ownerDocument.getElementById(inputID) ??
+              null);
+      },
+      set current(_value) {},
+    }),
+    [inputID],
+  );
+  const descriptionClickProps = useInputContainer({
+    containerRef: descriptionRef,
+    inputRef: controlRef,
+    disabled: !forwardsDescriptionClick,
+  });
+
   const labelContent = (
     <>
       {labelIcon && renderIconSlot(labelIcon, {size: 'sm', color: 'inherit'})}
@@ -227,8 +277,14 @@ export function FieldLabel({
       </LabelElement>
       {description && (
         <span
+          ref={forwardsDescriptionClick ? descriptionRef : undefined}
           id={descriptionID}
-          {...stylex.props(styles.description, isLabelHidden && styles.srOnly)}>
+          {...(forwardsDescriptionClick ? descriptionClickProps : undefined)}
+          {...stylex.props(
+            styles.description,
+            forwardsDescriptionClick && styles.descriptionClickable,
+            isLabelHidden && styles.srOnly,
+          )}>
           {description}
         </span>
       )}

package/src/FieldStatus/FieldStatus.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docs = {
   name: 'FieldStatus',
   displayName: 'Field Status',
@@ -12,6 +12,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-field-status', visualProps: ['type', 'variant']},
+      {className: 'astryx-field-status-icon', visualProps: ['type']},
     ],
   },
   props: [
@@ -63,7 +64,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Validation feedback message for fields/custom controls. Supports error, warning, success and attached/detached variants. Announced via persistent live regions (assertive for errors, polite otherwise).',

package/src/FieldStatus/FieldStatus.test.tsx

@@ -372,6 +372,67 @@ describe('FieldStatus', () => {
     });
   });
 
+  describe('field-status-icon theme target', () => {
+    // The stable theme target lands on the detached message box's leading glyph
+    // itself, so a theme can restyle (e.g. resize) just this icon via
+    // `defineTheme`. It reflects the status type as a data attribute so themes
+    // can target per status, mirroring the parent astryx-field-status.
+    const getStatusIcon = (root: HTMLElement): HTMLElement => {
+      const icon = root.querySelector('.astryx-field-status-icon');
+      if (icon == null) {
+        throw new Error('status icon not found');
+      }
+      return icon as HTMLElement;
+    };
+
+    it('renders the target on the detached leading icon', () => {
+      render(
+        <FieldStatus
+          type="error"
+          message="msg"
+          variant="detached"
+          data-testid="fs"
+        />,
+      );
+      const icon = getStatusIcon(screen.getByTestId('fs'));
+      expect(icon).toHaveClass('astryx-field-status-icon');
+      expect(icon).toHaveClass('astryx-icon');
+      expect(icon).toHaveAttribute('data-type', 'error');
+    });
+
+    it('reflects the status type per status', () => {
+      for (const type of ['error', 'warning', 'success'] as const) {
+        const {unmount} = render(
+          <FieldStatus
+            type={type}
+            message="msg"
+            variant="detached"
+            data-testid="fs"
+          />,
+        );
+        expect(getStatusIcon(screen.getByTestId('fs'))).toHaveAttribute(
+          'data-type',
+          type,
+        );
+        unmount();
+      }
+    });
+
+    it('does not render the target for the attached variant', () => {
+      render(
+        <FieldStatus
+          type="error"
+          message="msg"
+          variant="attached"
+          data-testid="fs"
+        />,
+      );
+      expect(
+        screen.getByTestId('fs').querySelector('.astryx-field-status-icon'),
+      ).toBeNull();
+    });
+  });
+
   describe('edge cases', () => {
     it('renders an empty message without crashing', () => {
       render(<FieldStatus type="error" message="" data-testid="fs" />);

package/src/FieldStatus/FieldStatus.tsx

@@ -11,7 +11,7 @@
  * - /packages/core/src/Field/Field.doc.mjs (compat docs when public API changes)
  * - /packages/core/src/FieldStatus/index.ts (exports if types change)
  * - /packages/core/src/Field/index.ts (compat re-export if public API changes)
- * - /packages/cli/templates/blocks/components/FieldStatus/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/FieldStatus/ (showcase blocks)
  */
 
 'use client';
@@ -33,6 +33,7 @@ import {useEntryAnimation} from '../hooks/useEntryAnimation';
 import {themeProps} from '../utils/themeProps';
 import {Icon} from '../Icon';
 import type {IconName} from '../Icon';
+import type {FieldStatusVariantMap} from './index';
 
 /**
  * Maps each status type to its status glyph. Mirrors the mapping the input
@@ -56,8 +57,8 @@ const styles = stylex.create({
     paddingBlockStart: `calc(${spacingVars['--spacing-1-5']} + ${spacingVars['--spacing-2']})`,
     paddingBlockEnd: spacingVars['--spacing-2'],
     paddingInline: spacingVars['--spacing-2'],
-    borderBottomLeftRadius: radiusVars['--radius-element'],
-    borderBottomRightRadius: radiusVars['--radius-element'],
+    borderEndStartRadius: radiusVars['--radius-element'],
+    borderEndEndRadius: radiusVars['--radius-element'],
   },
   detached: {
     marginTop: spacingVars['--spacing-1'],
@@ -96,25 +97,6 @@ const colorStyles = stylex.create({
   },
 });
 
-/**
- * Extensible variant map for FieldStatus.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/FieldStatus' {
- *   interface FieldStatusVariantMap {
- *     'inline': true;
- *   }
- * }
- * ```
- */
-export interface FieldStatusVariantMap {
-  attached: true;
-  detached: true;
-  tooltip: true;
-}
-
 /**
  * FieldStatus variant type. Extensible via module augmentation of FieldStatusVariantMap.
  */
@@ -216,7 +198,18 @@ export function FieldStatus({
       {variant === 'detached' ? (
         <span {...stylex.props(styles.detachedContent)}>
           <span {...stylex.props(styles.detachedIcon)}>
-            <Icon icon={statusIconMap[type]} size="sm" color="inherit" />
+            <Icon
+              icon={statusIconMap[type]}
+              size="sm"
+              color="inherit"
+              // Stable theme target on the detached message box's leading glyph
+              // itself, so a theme can restyle just this icon (color, size) —
+              // and each status — via `defineTheme`. Same-element rules in
+              // @layer astryx-theme win over the icon's own base
+              // width/height/fontSize, which a field-level target could not
+              // reach.
+              {...themeProps('field-status-icon', {type})}
+            />
           </span>
           <span>{message}</span>
         </span>

package/src/FieldStatus/index.ts

@@ -9,9 +9,24 @@
  * @position Entry point for @astryxdesign/core/FieldStatus subpath export
  */
 
+/**
+ * Extensible variant map for FieldStatus.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/FieldStatus' {
+ *   interface FieldStatusVariantMap {
+ *     'inline': true;
+ *   }
+ * }
+ * ```
+ */
+export interface FieldStatusVariantMap {
+  attached: true;
+  detached: true;
+  tooltip: true;
+}
+
 export {FieldStatus} from './FieldStatus';
-export type {
-  FieldStatusProps,
-  FieldStatusVariant,
-  FieldStatusVariantMap,
-} from './FieldStatus';
+export type {FieldStatusProps, FieldStatusVariant} from './FieldStatus';

package/src/FileInput/FileInput.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'FileInput',
@@ -170,7 +170,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'FileInput',
   displayName: 'File Input',
@@ -293,7 +293,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'File input w/ input/dropzone modes, validation, label, description, status.',
   usage: {

package/src/FileInput/FileInput.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/FileInput/FileInput.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/FileInput/index.ts (exports if types change)
  * - /apps/storybook/stories/FileInput.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/FileInput/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/FileInput/ (showcase blocks)
  */
 
 import {

package/src/FormLayout/FormLayout.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'FormLayout',
@@ -52,7 +52,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'FormLayout',
   displayName: 'Form Layout',
@@ -100,7 +100,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Layout container for form fields w/ consistent spacing + direction.',

package/src/FormLayout/FormLayout.tsx

@@ -12,17 +12,14 @@
  * - /packages/core/src/FormLayout/FormLayout.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/FormLayout/index.ts (exports if types change)
  * - /apps/storybook/stories/FormLayout.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/FormLayout/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/FormLayout/ (showcase blocks)
  */
 
 import {useMemo, type ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import {spacingVars} from '../theme/tokens.stylex';
-import {
-  FormLayoutContext,
-  type FormLayoutDirection,
-} from './FormLayoutContext';
+import {FormLayoutContext, type FormLayoutDirection} from './FormLayoutContext';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
 

package/src/Grid/Grid.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Grid',
@@ -33,11 +33,6 @@ export const docs = {
       type: "number | {minWidth: number, max?: number, repeat?: 'fill' | 'fit'}",
       description: 'Column configuration. Use a number for fixed columns (e.g. `columns={3}`). Use an object for responsive columns: `minWidth` sets the minimum column width in px, `repeat` controls track behavior (`"fill"` preserves empty tracks for consistent widths, `"fit"` collapses empty tracks so items stretch; defaults to `"fill"`), and `max` caps the maximum number of columns.',
     },
-    {
-      name: 'minChildWidth',
-      type: 'number',
-      description: 'Deprecated: use `columns={{minWidth: 280}}` instead. Minimum item width in px; enables responsive auto-fit.',
-    },
     {
       name: 'width',
       type: 'SizeValue',
@@ -101,7 +96,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -117,7 +112,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'CSS Grid-based layout w/ responsive column support.',
   usage: {

package/src/Grid/Grid.tsx

@@ -12,7 +12,7 @@
  * - /packages/core/src/Grid/Grid.doc.mjs
  * - /packages/core/src/Grid/Grid.test.tsx
  * - /apps/storybook/stories/Grid.stories.tsx
- * - /packages/cli/templates/blocks/components/Grid/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Grid/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';
@@ -63,15 +63,6 @@ export interface GridProps extends BaseProps<HTMLDivElement> {
    */
   columns?: GridColumns;
 
-  /**
-   * Minimum width of each grid item in pixels.
-   * Enables responsive auto-fit behavior.
-   *
-   * @deprecated Use `columns={{minWidth: 280}}` instead.
-   * @default 0 (disabled)
-   */
-  minChildWidth?: number;
-
   /**
    * Width of the grid container.
    * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
@@ -384,7 +375,6 @@ function buildCappedTemplate(
  */
 export function Grid({
   columns,
-  minChildWidth = 0,
   rowHeight,
   width,
   height,
@@ -421,20 +411,6 @@ export function Grid({
     } else {
       gridTemplateColumns = `repeat(${repeatMode}, minmax(${columns.minWidth}px, 1fr))`;
     }
-  } else if (minChildWidth > 0) {
-    // Deprecated path: minChildWidth uses auto-fit for backward compat
-    const numColumns = typeof columns === 'number' ? columns : 0;
-    if (numColumns > 0) {
-      gridTemplateColumns = buildCappedTemplate(
-        minChildWidth,
-        numColumns,
-        'auto-fit',
-        gap,
-        columnGap,
-      );
-    } else {
-      gridTemplateColumns = `repeat(auto-fit, minmax(${minChildWidth}px, 1fr))`;
-    }
   } else if (typeof columns === 'number' && columns > 0) {
     // Fixed columns mode
     gridTemplateColumns = `repeat(${columns}, 1fr)`;