@astryxdesign/cli 0.1.2-canary.f330539 → 0.1.2-canary.f57fb72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.2-canary.f330539",
+  "version": "0.1.2-canary.f57fb72",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -75,9 +75,9 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.1.2-canary.f330539",
-    "@astryxdesign/lab": "0.1.2-canary.f330539",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.f330539",
+    "@astryxdesign/core": "0.1.2-canary.f57fb72",
+    "@astryxdesign/lab": "0.1.2-canary.f57fb72",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.f57fb72",
     "gpt-tokenizer": "^2.0.0"
   },
   "peerDependenciesMeta": {
@@ -92,9 +92,9 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.2-canary.f330539",
-    "@astryxdesign/lab": "0.1.2-canary.f330539",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.f330539",
+    "@astryxdesign/core": "0.1.2-canary.f57fb72",
+    "@astryxdesign/lab": "0.1.2-canary.f57fb72",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.f57fb72",
     "gpt-tokenizer": "^2.0.0"
   },
   "scripts": {

package/templates/blocks/components/DropdownMenu/DropdownMenuShowcase.tsx

@@ -12,6 +12,7 @@ export default function DropdownMenuShowcase() {
     <DropdownMenu
       isMenuOpen={isMenuOpen}
       onOpenChange={setIsMenuOpen}
+      hasAutoFocus={false}
       button={{label: 'Actions'}}
       items={[
         {label: 'Edit', onClick: () => {}},

package/templates/blocks/components/DropdownMenuItem/DropdownMenuItemShowcase.tsx

@@ -68,6 +68,7 @@ export default function DropdownMenuItemShowcase() {
     <DropdownMenu
       button={{label: 'Actions'}}
       isMenuOpen
+      hasAutoFocus={false}
       onOpenChange={() => {}}>
       <DropdownMenuItem
         icon={PencilIcon}

package/templates/blocks/components/Lightbox/LightboxShowcase.tsx

@@ -12,10 +12,9 @@ export default function LightboxShowcase() {
         isOpen={isOpen}
         onOpenChange={setIsOpen}
         media={{
-          src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
-          alt: 'Coastal shoreline with ocean waves',
-          caption:
-            'A scenic coastline with waves rolling onto a sandy beach beneath a clear sky.',
+          src: 'https://picsum.photos/id/10/1200/800',
+          alt: 'Forest path',
+          caption: 'A winding path through the forest',
         }}
       />
     </>

package/templates/blocks/components/MoreMenu/MoreMenuShowcase.tsx

@@ -12,6 +12,7 @@ export default function MoreMenuShowcase() {
     <MoreMenu
       isMenuOpen={isMenuOpen}
       onOpenChange={setIsMenuOpen}
+      hasAutoFocus={false}
       items={[
         {label: 'Edit', onClick: () => {}},
         {label: 'Duplicate', onClick: () => {}},

package/templates/pages/shell-side-nav/page.tsx

@@ -142,6 +142,7 @@ function ConversationItem({
             <MoreMenu
               size="sm"
               label="Conversation options"
+              hasAutoFocus={false}
               onOpenChange={setIsMenuOpen}
               items={[
                 {label: 'Pin', onClick: () => {}},

package/templates/blocks/components/Blockquote/BlockquoteTestimonials.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'Blockquote',
-  name: 'Blockquote — Testimonials',
-  displayName: 'Blockquote — Testimonials',
-  description:
-    'Multiple quotes arranged in a card grid for a testimonials section. Combine with Card and Grid to create social-proof layouts.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['Blockquote', 'Card', 'Grid', 'GridSpan'],
-};

package/templates/blocks/components/Blockquote/BlockquoteTestimonials.tsx

@@ -1,34 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {Blockquote} from '@astryxdesign/core/Blockquote';
-import {Grid, GridSpan} from '@astryxdesign/core/Grid';
-import {Card} from '@astryxdesign/core/Card';
-
-export default function BlockquoteTestimonials() {
-  return (
-    <Grid columns={2} gap={3} style={{maxWidth: 600}}>
-      <Card padding={4}>
-        <Blockquote cite="Sarah K., Lead Engineer">
-          Shipping UI has never been this fast. Our team went from design to
-          production in a single afternoon.
-        </Blockquote>
-      </Card>
-      <Card padding={4}>
-        <Blockquote cite="Marcus T., Product Designer">
-          The token system means every new screen just looks right — no manual
-          color or spacing decisions.
-        </Blockquote>
-      </Card>
-      <GridSpan columns={2}>
-        <Card padding={4}>
-          <Blockquote cite="Priya L., Engineering Manager">
-            Onboarding a new engineer used to take a week of design review. Now
-            they're shipping accessible, polished components on day one.
-          </Blockquote>
-        </Card>
-      </GridSpan>
-    </Grid>
-  );
-}

package/templates/blocks/components/Blockquote/BlockquoteWithCite.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'Blockquote',
-  name: 'Blockquote — With Attribution',
-  displayName: 'Blockquote — With Attribution',
-  description:
-    'A plain quote and a quote with a cite attribution. Use cite to credit the original author or source.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['Blockquote', 'Layout'],
-};

package/templates/blocks/components/Blockquote/BlockquoteWithCite.tsx

@@ -1,21 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {Blockquote} from '@astryxdesign/core/Blockquote';
-import {VStack} from '@astryxdesign/core/Layout';
-
-export default function BlockquoteWithCite() {
-  return (
-    <VStack gap={4} style={{maxWidth: 500}}>
-      <Blockquote>
-        Design is not just what it looks like and feels like. Design is how it
-        works.
-      </Blockquote>
-      <Blockquote cite="Steve Jobs">
-        The people who are crazy enough to think they can change the world are
-        the ones who do.
-      </Blockquote>
-    </VStack>
-  );
-}

package/templates/blocks/components/Hooks/useKeyboardHintHookUsage.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'useKeyboardHint',
-  name: 'useKeyboardHint — Arrow-key Hint',
-  displayName: 'useKeyboardHint — Arrow-key Hint',
-  description:
-    'Toolbar shows an ephemeral "← → to navigate" hint on first keyboard focus via useKeyboardHint, teaching sighted keyboard users that arrows move within the group.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['Toolbar', 'Button', 'Icon', 'Card', 'Section', 'Text', 'Layout'],
-};

package/templates/blocks/components/Hooks/useKeyboardHintHookUsage.tsx

@@ -1,57 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {Toolbar} from '@astryxdesign/core/Toolbar';
-import {Button} from '@astryxdesign/core/Button';
-import {Icon} from '@astryxdesign/core/Icon';
-import {Card} from '@astryxdesign/core/Card';
-import {Section} from '@astryxdesign/core/Section';
-import {Text} from '@astryxdesign/core/Text';
-import {VStack} from '@astryxdesign/core/Layout';
-import {BoldIcon, ItalicIcon, UnderlineIcon} from '@heroicons/react/24/outline';
-
-export default function UseKeyboardHintHookUsage() {
-  return (
-    <Card style={{width: 420}}>
-      <Toolbar
-        label="Text formatting"
-        dividers={['bottom']}
-        startContent={
-          <>
-            <Button
-              label="Bold"
-              variant="ghost"
-              icon={<Icon icon={BoldIcon} />}
-              isIconOnly
-            />
-            <Button
-              label="Italic"
-              variant="ghost"
-              icon={<Icon icon={ItalicIcon} />}
-              isIconOnly
-            />
-            <Button
-              label="Underline"
-              variant="ghost"
-              icon={<Icon icon={UnderlineIcon} />}
-              isIconOnly
-            />
-          </>
-        }
-      />
-      <Section>
-        <VStack gap={1}>
-          <Text type="body" weight="bold">
-            Keyboard-friendly by default
-          </Text>
-          <Text type="supporting" color="secondary">
-            Tab into the toolbar with your keyboard and Toolbar shows an
-            ephemeral "← → to navigate" hint — powered by useKeyboardHint — so
-            sighted keyboard users learn that arrows move within the group.
-          </Text>
-        </VStack>
-      </Section>
-    </Card>
-  );
-}

package/templates/blocks/components/Lightbox/LightboxGallery.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'Lightbox',
-  name: 'Lightbox — Gallery',
-  displayName: 'Lightbox — Gallery',
-  description:
-    'A thumbnail grid that opens a fullscreen gallery. Clicking any thumbnail opens the lightbox at that index. Prev/next navigation lets users browse all images without closing.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['Lightbox', 'Grid', 'Thumbnail'],
-};

package/templates/blocks/components/Lightbox/LightboxGallery.tsx

@@ -1,53 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useLightbox} from '@astryxdesign/core/Lightbox';
-import {Grid} from '@astryxdesign/core/Grid';
-import {Thumbnail} from '@astryxdesign/core/Thumbnail';
-
-const PHOTOS = [
-  {
-    src: 'https://lookaside.facebook.com/assets/astryx/Neutral-Backpack.png',
-    alt: 'Backpack',
-    caption: 'A backpack displayed on a neutral background.',
-  },
-  {
-    src: 'https://lookaside.facebook.com/assets/astryx/building.png',
-    alt: 'Modern building',
-    caption: 'A modern building with a contemporary architectural design.',
-  },
-  {
-    src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
-    alt: 'Coastal shoreline with ocean waves',
-    caption:
-      'A scenic coastline with waves rolling onto a sandy beach beneath a clear sky.',
-  },
-  {
-    src: 'https://lookaside.facebook.com/assets/astryx/illustrative-vertical-1.png',
-    alt: 'Illustrated lakeside landscape at sunset',
-    caption:
-      'A stylized landscape illustration featuring pink clouds reflected over a calm lake at sunset.',
-  },
-];
-
-export default function LightboxGallery() {
-  const lightbox = useLightbox({media: PHOTOS});
-
-  return (
-    <>
-      <Grid columns={2} gap={2} style={{width: 136}}>
-        {PHOTOS.map((photo, i) => (
-          <Thumbnail
-            key={photo.src}
-            src={photo.src}
-            alt={photo.alt}
-            label={photo.alt}
-            onClick={() => lightbox.open(i)}
-          />
-        ))}
-      </Grid>
-      {lightbox.element}
-    </>
-  );
-}

package/templates/blocks/components/Lightbox/LightboxVideo.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'Lightbox',
-  name: 'Lightbox — Video',
-  displayName: 'Lightbox — Video',
-  description:
-    'Opens a video in the lightbox. Native browser controls are available. Zoom and pan are disabled for video items.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['Lightbox'],
-};

package/templates/blocks/components/Lightbox/LightboxVideo.tsx

@@ -1,27 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useState} from 'react';
-import {Lightbox} from '@astryxdesign/core/Lightbox';
-import {Button} from '@astryxdesign/core/Button';
-
-export default function LightboxVideo() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <Button label="Play video" onClick={() => setIsOpen(true)} />
-      <Lightbox
-        isOpen={isOpen}
-        onOpenChange={setIsOpen}
-        media={{
-          src: 'https://lookaside.facebook.com/assets/?set=astryx&name=Nature-1&density=1',
-          alt: 'Flower blooming in time-lapse',
-          type: 'video',
-          caption: 'A flower blooming in time-lapse',
-        }}
-      />
-    </>
-  );
-}

package/templates/blocks/components/Lightbox/LightboxZoom.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'Lightbox',
-  name: 'Lightbox — Zoom',
-  displayName: 'Lightbox — Zoom',
-  description:
-    'A lightbox with zoom and pan enabled. Double-click the image to zoom in; drag to pan around. Double-click again or use the close button to exit.',
-  isReady: true,
-  aspectRatio: 4 / 3,
-  componentsUsed: ['Lightbox', 'Thumbnail'],
-};

package/templates/blocks/components/Lightbox/LightboxZoom.tsx

@@ -1,33 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useState} from 'react';
-import {Lightbox} from '@astryxdesign/core/Lightbox';
-import {Thumbnail} from '@astryxdesign/core/Thumbnail';
-
-export default function LightboxZoom() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <Thumbnail
-        src="https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png"
-        alt="Coastal shoreline with ocean waves"
-        label="Coastal shoreline with ocean waves"
-        onClick={() => setIsOpen(true)}
-      />
-      <Lightbox
-        isOpen={isOpen}
-        onOpenChange={setIsOpen}
-        media={{
-          src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
-          alt: 'Coastal shoreline with ocean waves',
-          caption:
-            'A scenic coastline. Double-click to zoom in and drag to pan.',
-        }}
-        hasZoom
-      />
-    </>
-  );
-}

package/templates/blocks/components/ToggleButtonGroup/ToggleButtonGroupVertical.doc.mjs

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'ToggleButtonGroup',
-  name: 'ToggleButtonGroup — Vertical',
-  displayName: 'ToggleButtonGroup — Vertical',
-  description:
-    'A vertically stacked ToggleButtonGroup using the vertical orientation, shown with both single-select and multi-select behavior — ideal for sidebar-style option lists and vertical toolbars.',
-  isReady: true,
-  aspectRatio: 3 / 4,
-  componentsUsed: ['ToggleButton', 'ToggleButtonGroup', 'Layout', 'Text'],
-};

package/templates/blocks/components/ToggleButtonGroup/ToggleButtonGroupVertical.tsx

@@ -1,47 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {useState} from 'react';
-import {ToggleButton, ToggleButtonGroup} from '@astryxdesign/core/ToggleButton';
-import {VStack} from '@astryxdesign/core/Layout';
-import {Text} from '@astryxdesign/core/Text';
-
-export default function ToggleButtonGroupVertical() {
-  const [view, setView] = useState<string | null>('grid');
-  const [filters, setFilters] = useState<string[]>(['active']);
-
-  return (
-    <VStack gap={4}>
-      <VStack gap={1}>
-        <Text type="label" color="secondary">
-          Single select
-        </Text>
-        <ToggleButtonGroup
-          orientation="vertical"
-          value={view}
-          onChange={setView}
-          label="View mode">
-          <ToggleButton value="list" label="List" />
-          <ToggleButton value="grid" label="Grid" />
-          <ToggleButton value="board" label="Board" />
-        </ToggleButtonGroup>
-      </VStack>
-      <VStack gap={1}>
-        <Text type="label" color="secondary">
-          Multi select
-        </Text>
-        <ToggleButtonGroup
-          orientation="vertical"
-          type="multiple"
-          value={filters}
-          onChange={setFilters}
-          label="Status filters">
-          <ToggleButton value="active" label="Active" />
-          <ToggleButton value="pending" label="Pending" />
-          <ToggleButton value="closed" label="Closed" />
-        </ToggleButtonGroup>
-      </VStack>
-    </VStack>
-  );
-}