@astryxdesign/cli 0.1.8-canary.08a0957 → 0.1.8-canary.0db5dfd

package/templates/blocks/components/Banner/BannerFloating.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Banner',
+  name: 'Banner — Floating',
+  displayName: 'Banner — Floating',
+  description:
+    'A floating banner raised with `elevation="med"`. Banners are inline by default; raise one when it should read as an overlay above content.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Banner'],
+};

package/templates/blocks/components/Banner/BannerFloating.tsx

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Banner} from '@astryxdesign/core/Banner';
+
+export default function BannerFloating() {
+  return (
+    <Banner
+      status="info"
+      title="You have unsaved changes"
+      description="A raised banner reads as an overlay floating above the page."
+      elevation="med"
+    />
+  );
+}

package/templates/blocks/components/Button/ButtonFloating.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Button',
+  name: 'Button — Floating',
+  displayName: 'Button — Floating',
+  description:
+    'A floating action button raised with `elevation="med"`. Use elevation for buttons that hover above content, like a FAB.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Button', 'Icon', 'Layout', 'Text'],
+};

package/templates/blocks/components/Button/ButtonFloating.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Button} from '@astryxdesign/core/Button';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {PlusIcon} from '@heroicons/react/24/outline';
+
+const VARIANTS = [
+  {variant: 'primary' as const, label: 'Primary'},
+  {variant: 'secondary' as const, label: 'Secondary'},
+  {variant: 'ghost' as const, label: 'Ghost'},
+  {variant: 'destructive' as const, label: 'Destructive'},
+];
+
+export default function ButtonFloating() {
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Text type="supporting" color="secondary">
+        Floating action buttons — raised above content with `elevation="med"`
+      </Text>
+      <Stack direction="horizontal" gap={3} vAlign="center">
+        {VARIANTS.map(({variant, label}) => (
+          <Button
+            key={variant}
+            label={label}
+            variant={variant}
+            icon={<Icon icon={PlusIcon} />}
+            elevation="med"
+          />
+        ))}
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/ButtonGroup/ButtonGroupFloating.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ButtonGroup',
+  name: 'ButtonGroup — Floating',
+  displayName: 'ButtonGroup — Floating',
+  description:
+    'A grouped action bar raised with `elevation="med"`. The connected buttons share one surface, so the shadow lifts them as a unit.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['ButtonGroup', 'Button', 'Layout', 'Text'],
+};

package/templates/blocks/components/ButtonGroup/ButtonGroupFloating.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ButtonGroup} from '@astryxdesign/core/ButtonGroup';
+import {Button} from '@astryxdesign/core/Button';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function ButtonGroupFloating() {
+  return (
+    <Stack direction="vertical" gap={3} hAlign="start">
+      <Text type="supporting" color="secondary">
+        The whole group shares one raised surface — a floating action bar
+      </Text>
+      <ButtonGroup label="Zoom controls" elevation="med">
+        <Button label="Zoom out" />
+        <Button label="Reset" />
+        <Button label="Zoom in" />
+      </ButtonGroup>
+    </Stack>
+  );
+}

package/templates/blocks/components/Card/CardElevations.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Card',
+  name: 'Card — Elevations',
+  displayName: 'Card — Elevations',
+  description:
+    'The four elevation levels side by side. Cards are flat by default; raise a card with `elevation` only when it needs to float above surrounding content.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Card', 'Layout', 'Text'],
+};

package/templates/blocks/components/Card/CardElevations.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Card} from '@astryxdesign/core/Card';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Grid} from '@astryxdesign/core/Grid';
+import {Text, Heading} from '@astryxdesign/core/Text';
+
+const LEVELS = [
+  {elevation: 'none' as const, caption: 'Flat — sits on the page (default)'},
+  {elevation: 'low' as const, caption: 'Low — lifts off slightly'},
+  {elevation: 'med' as const, caption: 'Med — clearly raised'},
+  {elevation: 'high' as const, caption: 'High — floats well above'},
+];
+
+export default function CardElevations() {
+  return (
+    <Grid columns={2} gap={4} width={520}>
+      {LEVELS.map(({elevation, caption}) => (
+        <Card key={elevation} elevation={elevation}>
+          <Stack direction="vertical" gap={1}>
+            <Heading level={4}>elevation=&quot;{elevation}&quot;</Heading>
+            <Text type="supporting" color="secondary">
+              {caption}
+            </Text>
+          </Stack>
+        </Card>
+      ))}
+    </Grid>
+  );
+}

package/templates/blocks/components/Card/ClickableCardElevated.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ClickableCard',
+  name: 'ClickableCard — Elevated',
+  displayName: 'Clickable Card — Elevated',
+  description:
+    'A clickable card raised with `elevation="med"` so the shadow signals the whole surface is interactive.',
+  isReady: true,
+  aspectRatio: 1,
+  componentsUsed: ['ClickableCard', 'Layout', 'Text'],
+};

package/templates/blocks/components/Card/ClickableCardElevated.tsx

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ClickableCard} from '@astryxdesign/core/ClickableCard';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text, Heading} from '@astryxdesign/core/Text';
+
+export default function ClickableCardElevated() {
+  return (
+    <ClickableCard label="Open report" href="#" elevation="med" width={320}>
+      <Stack direction="vertical" gap={2}>
+        <Heading level={4}>Quarterly report</Heading>
+        <Text type="body" color="secondary">
+          A raised shadow signals the whole card is clickable, lifting it above
+          the surrounding content.
+        </Text>
+      </Stack>
+    </ClickableCard>
+  );
+}

package/templates/blocks/components/Card/SelectableCardElevated.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'SelectableCard',
+  name: 'SelectableCard — Elevated',
+  displayName: 'Selectable Card — Elevated',
+  description:
+    'Raised selectable cards with `elevation="low"`. The inset selection ring composes on top of the shadow, so a selected card keeps its elevation.',
+  isReady: true,
+  aspectRatio: 2,
+  componentsUsed: ['SelectableCard', 'Layout', 'Text'],
+};

package/templates/blocks/components/Card/SelectableCardElevated.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {SelectableCard} from '@astryxdesign/core/SelectableCard';
+import {Grid} from '@astryxdesign/core/Grid';
+import {Text} from '@astryxdesign/core/Text';
+
+const PLANS = [
+  {id: 'starter', name: 'Starter'},
+  {id: 'pro', name: 'Pro'},
+];
+
+export default function SelectableCardElevated() {
+  const [selected, setSelected] = useState('pro');
+
+  return (
+    <Grid columns={2} gap={3} width={420}>
+      {PLANS.map(plan => (
+        <SelectableCard
+          key={plan.id}
+          label={plan.name}
+          isSelected={selected === plan.id}
+          onChange={() => setSelected(plan.id)}
+          elevation="low">
+          <Text type="body" weight="bold">
+            {plan.name}
+          </Text>
+          <Text type="supporting" color="secondary">
+            The resting shadow stays put — the selection ring layers on top.
+          </Text>
+        </SelectableCard>
+      ))}
+    </Grid>
+  );
+}

package/templates/blocks/components/ChatComposer/ChatComposerFlat.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ChatComposer',
+  name: 'ChatComposer — Flat',
+  displayName: 'ChatComposer — Flat',
+  description:
+    'The composer is raised by default (`elevation="low"`). Set `elevation="none"` to flatten it — it then draws a border with the same rest / hover / focus treatment as a text input.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['ChatComposer', 'Layout', 'Text'],
+};

package/templates/blocks/components/ChatComposer/ChatComposerFlat.tsx

@@ -0,0 +1,75 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ChatComposer} from '@astryxdesign/core/Chat';
+import {Button} from '@astryxdesign/core/Button';
+import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {
+  Cog6ToothIcon,
+  MicrophoneIcon,
+  SparklesIcon,
+} from '@heroicons/react/24/outline';
+
+export default function ChatComposerFlat() {
+  return (
+    <Stack direction="vertical" gap={2} style={{width: '100%', maxWidth: 450}}>
+      <Text type="supporting" color="secondary">
+        elevation=&quot;none&quot; — flat, with a text-input-style border and
+        focus ring
+      </Text>
+      <ChatComposer
+        elevation="none"
+        onSubmit={value => {
+          console.log('Sent:', value);
+        }}
+        footerActions={
+          <>
+            <DropdownMenu
+              button={{
+                label: 'Auto',
+                variant: 'ghost',
+                size: 'md',
+                icon: <Icon icon={SparklesIcon} size="sm" />,
+                children: 'Auto',
+              }}
+              menuWidth={200}
+              items={[
+                {label: 'Auto', onClick: () => {}},
+                {label: 'Model A', onClick: () => {}},
+                {label: 'Model B', onClick: () => {}},
+              ]}
+            />
+            <DropdownMenu
+              button={{
+                label: 'Settings',
+                variant: 'ghost',
+                size: 'md',
+                icon: <Icon icon={Cog6ToothIcon} size="sm" />,
+                children: 'Settings',
+              }}
+              menuWidth={200}
+              items={[
+                {label: 'Preferences', onClick: () => {}},
+                {label: 'Keyboard shortcuts', onClick: () => {}},
+                {label: 'About', onClick: () => {}},
+              ]}
+            />
+          </>
+        }
+        sendActions={
+          <Button
+            label="Microphone"
+            variant="ghost"
+            size="md"
+            icon={<Icon icon={MicrophoneIcon} />}
+            isIconOnly
+          />
+        }
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/IconButton/IconButtonFloating.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'IconButton',
+  name: 'IconButton — Floating',
+  displayName: 'IconButton — Floating',
+  description:
+    'A floating action button (FAB) — the most common floating-button shape is icon-only. Raised here with `elevation="high"`.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['IconButton', 'Icon', 'Layout', 'Text'],
+};

package/templates/blocks/components/IconButton/IconButtonFloating.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {PlusIcon} from '@heroicons/react/24/outline';
+
+const VARIANTS = [
+  {variant: 'primary' as const, label: 'Primary'},
+  {variant: 'secondary' as const, label: 'Secondary'},
+  {variant: 'ghost' as const, label: 'Ghost'},
+  {variant: 'destructive' as const, label: 'Destructive'},
+];
+
+export default function IconButtonFloating() {
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Text type="supporting" color="secondary">
+        FABs are usually icon-only — raise one with `elevation="high"`
+      </Text>
+      <Stack direction="horizontal" gap={3} vAlign="center">
+        {VARIANTS.map(({variant, label}) => (
+          <IconButton
+            key={variant}
+            label={label}
+            variant={variant}
+            icon={<Icon icon={PlusIcon} />}
+            elevation="high"
+          />
+        ))}
+      </Stack>
+    </Stack>
+  );
+}

package/templates/blocks/components/InternationalizationProvider/InternationalizationProvider01ShippedLocale.doc.mjs

@@ -0,0 +1,19 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'InternationalizationProvider',
+  name: 'InternationalizationProvider — Shipped Locale',
+  displayName: 'Internationalization Provider — Shipped Locale',
+  description:
+    'Load a locale catalog shipped by Astryx and re-render InternationalizationProvider with a new locale to update Astryx strings live.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: [
+    'InternationalizationProvider',
+    'SegmentedControl',
+    'Selector',
+    'Layout',
+  ],
+};

package/templates/blocks/components/InternationalizationProvider/InternationalizationProvider01ShippedLocale.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {InternationalizationProvider} from '@astryxdesign/core/i18n';
+import frFR from '@astryxdesign/core/locales/fr-FR.json';
+import {Stack} from '@astryxdesign/core/Layout';
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from '@astryxdesign/core/SegmentedControl';
+import {Selector} from '@astryxdesign/core/Selector';
+
+type Locale = 'en' | 'fr-FR';
+
+export default function InternationalizationProviderShippedLocale() {
+  const [locale, setLocale] = useState<Locale>('en');
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <InternationalizationProvider locale={locale} messages={{'fr-FR': frFR}}>
+      <Stack direction="vertical" gap={4} hAlign="center">
+        <SegmentedControl
+          label="Language"
+          value={locale}
+          onChange={nextLocale => setLocale(nextLocale as Locale)}
+          size="sm">
+          <SegmentedControlItem value="en" label="EN" />
+          <SegmentedControlItem value="fr-FR" label="FR" />
+        </SegmentedControl>
+        <Selector
+          style={{width: 300}}
+          label="Billing region"
+          options={[
+            {value: 'americas', label: 'Americas'},
+            {value: 'emea', label: 'EMEA'},
+            {value: 'apac', label: 'APAC'},
+          ]}
+          value={value}
+          onChange={setValue}
+          hasClear
+        />
+      </Stack>
+    </InternationalizationProvider>
+  );
+}

package/templates/blocks/components/InternationalizationProvider/InternationalizationProvider02Overrides.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'InternationalizationProvider',
+  name: 'InternationalizationProvider — Overrides',
+  displayName: 'Internationalization Provider — Overrides',
+  description:
+    'Override a small number of Astryx strings without providing a full locale catalog.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['InternationalizationProvider', 'Selector'],
+};

package/templates/blocks/components/InternationalizationProvider/InternationalizationProvider02Overrides.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {InternationalizationProvider} from '@astryxdesign/core/i18n';
+import {Selector} from '@astryxdesign/core/Selector';
+
+export default function InternationalizationProviderOverrides() {
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <InternationalizationProvider
+      locale="en"
+      overrides={{
+        en: {
+          '@astryx.selector.placeholder': 'Choose...',
+        },
+      }}>
+      <Selector
+        style={{width: 300}}
+        label="Billing region"
+        options={[
+          {value: 'americas', label: 'Americas'},
+          {value: 'emea', label: 'EMEA'},
+          {value: 'apac', label: 'APAC'},
+        ]}
+        value={value}
+        onChange={setValue}
+        hasClear
+      />
+    </InternationalizationProvider>
+  );
+}

package/templates/blocks/components/OverflowList/OverflowListCappedToolbar.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'OverflowList',
+  name: 'OverflowList — Capped Toolbar',
+  displayName: 'OverflowList — Capped Toolbar',
+  description:
+    'maxVisibleItems caps the row at three actions even when more would fit; the rest move to a dropdown',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['OverflowList', 'Button', 'DropdownMenu', 'Card', 'Center'],
+};

package/templates/blocks/components/OverflowList/OverflowListCappedToolbar.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {OverflowList} from '@astryxdesign/core/OverflowList';
+import {Button} from '@astryxdesign/core/Button';
+import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
+import {Card} from '@astryxdesign/core/Card';
+import {Center} from '@astryxdesign/core/Center';
+
+const actions = ['Save', 'Edit', 'Duplicate', 'Share', 'Archive', 'Delete'];
+
+export default function OverflowListCappedToolbar() {
+  return (
+    <Center width={420}>
+      <Card padding={2}>
+        <OverflowList
+          gap={2}
+          maxVisibleItems={3}
+          overflowRenderer={overflowItems => (
+            <DropdownMenu
+              button={{
+                label: `+${overflowItems.length}`,
+                variant: 'ghost',
+                size: 'sm',
+              }}
+              items={overflowItems.map(({index}) => ({
+                label: actions[index],
+              }))}
+            />
+          )}>
+          {actions.map(action => (
+            <Button key={action} label={action} size="sm" />
+          ))}
+        </OverflowList>
+      </Card>
+    </Center>
+  );
+}

package/templates/blocks/components/OverflowList/OverflowListMultiRowTags.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'OverflowList',
+  name: 'OverflowList — Multi-row Tags',
+  displayName: 'OverflowList — Multi-row Tags',
+  description:
+    'Tags wrap onto up to two rows with maxRows, then collapse the rest into a count badge',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['OverflowList', 'Badge', 'Card'],
+};

package/templates/blocks/components/OverflowList/OverflowListMultiRowTags.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {OverflowList} from '@astryxdesign/core/OverflowList';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Card} from '@astryxdesign/core/Card';
+
+const tags = [
+  'React',
+  'TypeScript',
+  'StyleX',
+  'Storybook',
+  'Vitest',
+  'Playwright',
+  'ESLint',
+  'Prettier',
+  'Vite',
+  'pnpm',
+];
+
+export default function OverflowListMultiRowTags() {
+  return (
+    <Card
+      padding={2}
+      style={{
+        resize: 'horizontal',
+        overflow: 'hidden',
+        minWidth: 120,
+        width: 260,
+      }}>
+      <OverflowList
+        gap={1}
+        maxRows={2}
+        overflowRenderer={overflowItems => (
+          <Badge variant="neutral" label={`+${overflowItems.length}`} />
+        )}>
+        {tags.map(tag => (
+          <Badge key={tag} variant="info" label={tag} />
+        ))}
+      </OverflowList>
+    </Card>
+  );
+}

package/templates/blocks/components/Thumbnail/ThumbnailElevated.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Thumbnail',
+  name: 'Thumbnail — Elevated',
+  displayName: 'Thumbnail — Elevated',
+  description:
+    'Image tiles raised at rest with `elevation`. The default keeps the existing hover-only shadow; a set level lifts the tile off the page.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Thumbnail', 'Layout', 'Text'],
+};