@astryxdesign/core 0.1.9 → 0.2.0-canary.0b7a99e

package/src/Markdown/Markdown.tsx

@@ -226,7 +226,7 @@ const dynamicStyles = stylex.create({
 
 const cellAlignStyles = stylex.create({
   center: {textAlign: 'center'},
-  right: {textAlign: 'right'},
+  end: {textAlign: 'end'},
 });
 
 const styles = stylex.create({
@@ -1436,7 +1436,7 @@ function renderBlock(
                     xstyle={[
                       dynamicStyles.cellMinWidth(`${colMinWidths[i]}px`),
                       node.alignments[i] === 'center' && cellAlignStyles.center,
-                      node.alignments[i] === 'right' && cellAlignStyles.right,
+                      node.alignments[i] === 'right' && cellAlignStyles.end,
                     ]}>
                     {h.children.map((c, j) =>
                       renderInline(
@@ -1462,7 +1462,7 @@ function renderBlock(
                     key={j}
                     xstyle={[
                       node.alignments[j] === 'center' && cellAlignStyles.center,
-                      node.alignments[j] === 'right' && cellAlignStyles.right,
+                      node.alignments[j] === 'right' && cellAlignStyles.end,
                     ]}>
                     {cell.children.map((c, k) =>
                       renderInline(
@@ -1523,6 +1523,10 @@ function renderBlock(
           </div>
         );
       }
+      const ImageComp = components?.image;
+      if (ImageComp) {
+        return <ImageComp key={index} src={safeSrc} alt={node.alt} />;
+      }
       return (
         <div
           key={index}

package/src/MetadataList/MetadataList.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: 'MetadataList',
@@ -89,7 +89,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -109,7 +109,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'label/value metadata display; column layout, collapse, orientation variants',
   usage: {

package/src/MetadataList/MetadataList.test.tsx

@@ -5,6 +5,7 @@ import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {MetadataList} from './MetadataList';
 import {MetadataListItem} from './MetadataListItem';
+import {InternationalizationProvider} from '../i18n';
 
 describe('MetadataList', () => {
   it('renders a description list with items', () => {
@@ -87,6 +88,29 @@ describe('MetadataList', () => {
     expect(screen.queryByText('B')).not.toBeInTheDocument();
   });
 
+  it('localizes the show more / show less labels through the i18n catalog', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{
+          fr: {
+            '@astryx.metadataList.showMore': 'Afficher plus',
+            '@astryx.metadataList.showLess': 'Afficher moins',
+          },
+        }}>
+        <MetadataList maxNumOfItems={1}>
+          <MetadataListItem label="A">1</MetadataListItem>
+          <MetadataListItem label="B">2</MetadataListItem>
+        </MetadataList>
+      </InternationalizationProvider>,
+    );
+
+    await user.click(screen.getByText('Afficher plus'));
+    expect(screen.getByText('Afficher moins')).toBeInTheDocument();
+  });
+
   it('does not show toggle in horizontal mode even with maxNumOfItems', () => {
     render(
       <MetadataList orientation="horizontal" maxNumOfItems={1}>

package/src/MetadataList/MetadataList.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file MetadataList.tsx
- * @input Uses React, ReactNode, StyleXStyles, theme tokens, MetadataListContext
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, MetadataListContext, i18n (useTranslator)
  * @output Exports MetadataList component, MetadataListProps, MetadataListColumns types
  * @position Core implementation; consumed by index.ts, tested by MetadataList.test.tsx
  *
@@ -13,7 +13,7 @@
  * - /packages/core/src/MetadataList/MetadataList.test.tsx
  * - /packages/core/src/MetadataList/index.ts
  * - /apps/storybook/stories/MetadataList.stories.tsx
- * - /packages/cli/templates/blocks/components/MetadataList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/MetadataList/ (showcase blocks)
  */
 
 import {Children, useId, useMemo, useState, type ReactNode} from 'react';
@@ -31,6 +31,7 @@ import {
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -197,6 +198,7 @@ export function MetadataList({
   const labelConfig = label ?? (isMultiColumn ? LABEL_TOP : LABEL_START);
   const [isShowAll, setIsShowAll] = useState(false);
   const contentId = useId();
+  const t = useTranslator();
 
   const contextValue = useMemo(
     () => ({
@@ -283,7 +285,9 @@ export function MetadataList({
             aria-expanded={isShowAll}
             onClick={() => setIsShowAll(prev => !prev)}
             {...stylex.props(styles.toggleButton)}>
-            {isShowAll ? 'Show less' : 'Show more'}
+            {isShowAll
+              ? t('@astryx.metadataList.showLess')
+              : t('@astryx.metadataList.showMore')}
           </button>
         )}
       </div>

package/src/MetadataList/MetadataListItem.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: 'MetadataListItem',

package/src/MetadataList/MetadataListItem.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/MetadataList/MetadataList.test.tsx
  * - /packages/core/src/MetadataList/index.ts
  * - /apps/storybook/stories/MetadataList.stories.tsx
- * - /packages/cli/templates/blocks/components/MetadataList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/MetadataList/ (showcase blocks)
  */
 
 import {use, type ReactNode} from 'react';

package/src/MobileNav/MobileNav.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: 'MobileNav',
@@ -109,7 +109,7 @@ export const docs = {
     ],
   },
 };
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'MobileNav',
   displayName: 'Mobile Nav',
@@ -171,7 +171,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Slide-out drawer overlay for mobile navigation. Mobile counterpart to SideNav; accepts same children (SideNavSection, SideNavItem, or any ReactNode).',

package/src/MobileNav/MobileNav.tsx

@@ -23,7 +23,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/MobileNav/index.ts (exports if types change)
- * - /packages/cli/templates/blocks/components/MobileNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/MobileNav/ (showcase blocks)
  */
 
 import {

package/src/MoreMenu/MoreMenu.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: 'MoreMenu',
@@ -77,7 +77,7 @@ export const docs = {
     ],
   },
 };
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'MoreMenu',
   displayName: 'More Menu',
@@ -142,7 +142,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Overflow menu w/ three-dot icon trigger. Convenience wrapper composing icon-only Button w/ dropdown menu, eliminating boilerplate for state management, positioning, accessibility.',

package/src/MoreMenu/MoreMenu.tsx

@@ -15,7 +15,7 @@
  * - /packages/core/src/MoreMenu/MoreMenu.test.tsx
  * - /packages/core/src/MoreMenu/index.ts
  * - /apps/storybook/stories/MoreMenu.stories.tsx
- * - /packages/cli/templates/blocks/components/MoreMenu/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/MoreMenu/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';

package/src/MultiSelector/MultiSelector.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: 'MultiSelector',
@@ -21,6 +21,11 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-multi-selector', visualProps: ['size', 'status']},
+      {className: 'astryx-multi-selector-clear-icon'},
+      {
+        className: 'astryx-multi-selector-indicator-icon',
+        states: ['state'],
+      },
     ],
   },
   components: [
@@ -155,12 +160,25 @@ export const docs = {
           type: "{type: 'error' | 'warning' | 'success', message?: string}",
           description: 'Validation status with an optional message.',
         },
+        {
+          name: 'statusVariant',
+          type: "'attached' | 'detached'",
+          description:
+            'How the status message is placed relative to the input. attached overlaps directly below the input (bordered treatment); detached floats below as a separate element with spacing.',
+          default: "'attached'",
+        },
         {
           name: 'renderOption',
           type: '(option: MultiSelectorOptionData) => ReactNode',
           description:
             'Custom render function for each selectable option in the dropdown. Not called for dividers, sections, or the select-all row.',
         },
+        {
+          name: 'width',
+          type: 'SizeValue',
+          description:
+            'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
+        },
         {
           name: 'xstyle',
           type: 'StyleXStyles',
@@ -216,7 +234,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   components: [
     {
@@ -250,6 +268,7 @@ export const docsZh = {
         isRequired: '将字段标记为必填。',
         isLoading: '在触发器中显示加载旋转器。',
         status: '带可选消息的验证状态。',
+        statusVariant: '状态消息的放置方式：attached 直接叠加在输入框下方；detached 作为独立元素浮于下方并留有间距。',
         renderOption:
           '每个可选选项的自定义渲染函数。不会用于分隔线、分组或全选行。',
         xstyle: '布局自定义的 StyleX 样式，必须是 stylex.create() 值。',
@@ -297,7 +316,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'checkbox multi-select dropdown for finite sets like column toggles or filter facets',
@@ -375,6 +394,7 @@ export const docsDense = {
         isRequired: 'marks required',
         isLoading: 'spinner in trigger',
         status: 'validation status w/ optional message',
+        statusVariant: 'How status message is placed: attached overlaps below input; detached floats below w/ spacing.',
         renderOption:
           'custom render fn per selectable option; not dividers/sections/select-all',
         xstyle: 'StyleX layout styles; stylex.create() only',