@astryxdesign/cli 0.1.2-canary.deb5aa0 → 0.1.2-canary.df46db7

package/templates/blocks/components/RadioListItem/RadioListItemBasic.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: 'RadioListItem',
+  name: 'RadioListItem — Basic',
+  displayName: 'RadioListItem — Basic',
+  description:
+    'Radio items with labels and descriptions inside a controlled RadioList. Use for single-choice option groups like shipping methods.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['RadioList', 'RadioListItem'],
+};

package/templates/blocks/components/RadioListItem/RadioListItemBasic.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
+
+export default function RadioListItemBasic() {
+  const [value, setValue] = useState('standard');
+
+  return (
+    <RadioList label="Shipping method" value={value} onChange={setValue}>
+      <RadioListItem
+        label="Standard"
+        value="standard"
+        description="5–7 business days"
+      />
+      <RadioListItem
+        label="Express"
+        value="express"
+        description="2–3 business days"
+      />
+      <RadioListItem
+        label="Overnight"
+        value="overnight"
+        description="Next business day"
+      />
+    </RadioList>
+  );
+}

package/templates/blocks/components/Resizable/ResizableSidebar.doc.mjs

@@ -0,0 +1,25 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ResizeHandle',
+  alsoExampleFor: ['useResizable'],
+  name: 'Resizable — Collapsible with snap points',
+  displayName: 'Resizable — Collapsible with snap points',
+  description:
+    'A collapsible sidebar with snap points, driven by useResizable. Dragging snaps to preset widths, dragging past the minimum collapses the panel, and the expand method restores it programmatically.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: [
+    'Resizable',
+    'ResizeHandle',
+    'Layout',
+    'LayoutPanel',
+    'LayoutContent',
+    'Card',
+    'VStack',
+    'Button',
+    'Text',
+  ],
+};

package/templates/blocks/components/Resizable/ResizableSidebar.tsx

@@ -0,0 +1,67 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useResizable, ResizeHandle} from '@astryxdesign/core/Resizable';
+import {
+  Card,
+  Layout,
+  LayoutContent,
+  LayoutPanel,
+  VStack,
+} from '@astryxdesign/core/Layout';
+import {Button} from '@astryxdesign/core/Button';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function ResizableSidebar() {
+  const sidebar = useResizable({
+    defaultSize: 240,
+    minSizePx: 160,
+    maxSizePx: 360,
+    collapsible: true,
+    snaps: [200, 280],
+  });
+
+  return (
+    <Card variant="muted" height={240} width={500}>
+      <Layout
+        height="fill"
+        start={
+          <>
+            <LayoutPanel width={sidebar.size} hasDivider={false}>
+              <Text color="secondary">
+                {sidebar.isCollapsed
+                  ? ''
+                  : `${Math.round(sidebar.size)}px wide`}
+              </Text>
+            </LayoutPanel>
+            <ResizeHandle
+              direction="horizontal"
+              hasDivider
+              resizable={sidebar.props}
+              label="Resize sidebar"
+            />
+          </>
+        }
+        content={
+          <LayoutContent>
+            <VStack gap={2}>
+              <Text color="secondary">
+                Drag the handle — it snaps at 200px and 280px. Drag all the way
+                left to collapse the sidebar.
+              </Text>
+              {sidebar.isCollapsed && (
+                <Button
+                  label="Expand sidebar"
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => sidebar.expand()}
+                />
+              )}
+            </VStack>
+          </LayoutContent>
+        }
+      />
+    </Card>
+  );
+}

package/templates/blocks/components/SegmentedControlItem/SegmentedControlItemBasic.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: 'SegmentedControlItem',
+  name: 'SegmentedControlItem — Basic',
+  displayName: 'SegmentedControlItem — Basic',
+  description:
+    'Label-only options inside a SegmentedControl. Each item declares a value; the parent control holds the selected value and change handler.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['SegmentedControl', 'SegmentedControlItem'],
+};

package/templates/blocks/components/SegmentedControlItem/SegmentedControlItemBasic.tsx

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from '@astryxdesign/core/SegmentedControl';
+
+export default function SegmentedControlItemBasic() {
+  const [view, setView] = useState('board');
+
+  return (
+    <SegmentedControl value={view} onChange={setView} label="View mode">
+      <SegmentedControlItem value="board" label="Board" />
+      <SegmentedControlItem value="list" label="List" />
+      <SegmentedControlItem value="timeline" label="Timeline" />
+    </SegmentedControl>
+  );
+}

package/templates/blocks/components/SelectorOption/SelectorOptionBasic.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: 'SelectorOption',
+  name: 'SelectorOption — Basic',
+  displayName: 'SelectorOption — Basic',
+  description:
+    'A selector whose options are rendered with SelectorOption, adding a secondary description below each label. Use inside renderOption for consistent custom option styling.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Selector', 'SelectorOption'],
+};

package/templates/blocks/components/SelectorOption/SelectorOptionBasic.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Selector, SelectorOption} from '@astryxdesign/core/Selector';
+
+const descriptions: Record<string, string> = {
+  admin: 'Full access to all resources',
+  editor: 'Can edit and publish content',
+  viewer: 'Read-only access',
+};
+
+const roles = [
+  {value: 'admin', label: 'Admin'},
+  {value: 'editor', label: 'Editor'},
+  {value: 'viewer', label: 'Viewer'},
+];
+
+export default function SelectorOptionBasic() {
+  const [value, setValue] = useState<string | undefined>('editor');
+
+  return (
+    <Selector
+      style={{width: 300}}
+      label="Role"
+      options={roles}
+      value={value}
+      onChange={setValue}
+      placeholder="Assign a role..."
+      renderOption={option => (
+        <SelectorOption
+          label={option.label}
+          description={descriptions[option.value]}
+        />
+      )}
+    />
+  );
+}

package/templates/blocks/components/SideNavCollapseButton/SideNavCollapseButtonBasic.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: 'SideNavCollapseButton',
+  name: 'SideNavCollapseButton — Basic',
+  displayName: 'SideNavCollapseButton — Basic',
+  description:
+    'Place a collapse button in the SideNav footer to let users toggle the rail between expanded and collapsed states. Disable the built-in button via collapsible={{hasButton: false}} when positioning it yourself.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['SideNav', 'SideNavCollapseButton', 'SideNavItem'],
+};

package/templates/blocks/components/SideNavCollapseButton/SideNavCollapseButtonBasic.tsx

@@ -0,0 +1,55 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import type {ComponentProps} from 'react';
+import {
+  SideNav,
+  SideNavCollapseButton,
+  SideNavItem,
+} from '@astryxdesign/core/SideNav';
+
+function HomeIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+      />
+    </svg>
+  );
+}
+
+function FolderIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+      />
+    </svg>
+  );
+}
+
+export default function SideNavCollapseButtonBasic() {
+  return (
+    <SideNav
+      collapsible={{hasButton: false}}
+      footerIcons={<SideNavCollapseButton />}>
+      <SideNavItem label="Home" icon={HomeIcon} isSelected href="#" />
+      <SideNavItem label="Projects" icon={FolderIcon} href="#" />
+    </SideNav>
+  );
+}

package/templates/blocks/components/SideNavHeading/SideNavHeadingBasic.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: 'SideNavHeading',
+  name: 'SideNavHeading — Basic',
+  displayName: 'SideNavHeading — Basic',
+  description:
+    'A SideNav header with an app icon and a linked title. Pass it to the SideNav header prop to identify the product or workspace at the top of the navigation rail.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['SideNav', 'SideNavHeading'],
+};

package/templates/blocks/components/SideNavHeading/SideNavHeadingBasic.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {SideNav, SideNavHeading} from '@astryxdesign/core/SideNav';
+
+function AppIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z"
+      />
+    </svg>
+  );
+}
+
+export default function SideNavHeadingBasic() {
+  return (
+    <SideNav
+      header={
+        <SideNavHeading
+          heading="Analytics"
+          icon={<AppIcon />}
+          headingHref="/"
+        />
+      }>
+      {null}
+    </SideNav>
+  );
+}

package/templates/blocks/components/SideNavItem/SideNavItemBasic.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: 'SideNavItem',
+  name: 'SideNavItem — Basic',
+  displayName: 'SideNavItem — Basic',
+  description:
+    'Navigation links inside a SideNav, each with a label, an icon, and an href. Mark the item for the current page with isSelected.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['SideNav', 'SideNavItem'],
+};

package/templates/blocks/components/SideNavItem/SideNavItemBasic.tsx

@@ -0,0 +1,49 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import type {ComponentProps} from 'react';
+import {SideNav, SideNavItem} from '@astryxdesign/core/SideNav';
+
+function InboxIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z"
+      />
+    </svg>
+  );
+}
+
+function DocumentIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+      />
+    </svg>
+  );
+}
+
+export default function SideNavItemBasic() {
+  return (
+    <SideNav>
+      <SideNavItem label="Inbox" icon={InboxIcon} isSelected href="#" />
+      <SideNavItem label="Documents" icon={DocumentIcon} href="#" />
+    </SideNav>
+  );
+}

package/templates/blocks/components/SideNavSection/SideNavSectionBasic.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: 'SideNavSection',
+  name: 'SideNavSection — Basic',
+  displayName: 'SideNavSection — Basic',
+  description:
+    'Group related SideNavItems under titled sections. Use sections to organize longer navigation lists into scannable clusters like Overview and Account.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['SideNav', 'SideNavSection', 'SideNavItem'],
+};

package/templates/blocks/components/SideNavSection/SideNavSectionBasic.tsx

@@ -0,0 +1,71 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import type {ComponentProps} from 'react';
+import {SideNav, SideNavItem, SideNavSection} from '@astryxdesign/core/SideNav';
+
+function HomeIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+      />
+    </svg>
+  );
+}
+
+function ChartIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"
+      />
+    </svg>
+  );
+}
+
+function UserIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
+      />
+    </svg>
+  );
+}
+
+export default function SideNavSectionBasic() {
+  return (
+    <SideNav>
+      <SideNavSection title="Overview">
+        <SideNavItem label="Dashboard" icon={HomeIcon} isSelected href="#" />
+        <SideNavItem label="Analytics" icon={ChartIcon} href="#" />
+      </SideNavSection>
+      <SideNavSection title="Account">
+        <SideNavItem label="Profile" icon={UserIcon} href="#" />
+      </SideNavSection>
+    </SideNav>
+  );
+}

package/templates/blocks/components/StackItem/StackItemFill.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: 'StackItem',
+  name: 'StackItem — Fill',
+  displayName: 'StackItem — Fill',
+  description:
+    'A static-width item next to one that fills the remaining space. Wrap stack children in StackItem when an item needs explicit sizing control.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['StackItem', 'HStack', 'Card', 'Text'],
+};

package/templates/blocks/components/StackItem/StackItemFill.tsx

@@ -0,0 +1,28 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {HStack, StackItem} from '@astryxdesign/core/Layout';
+import {Card} from '@astryxdesign/core/Card';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function StackItemFill() {
+  return (
+    <HStack gap={3} vAlign="center" width="100%" style={{maxWidth: 400}}>
+      <StackItem size="static">
+        <Card padding={3}>
+          <Text type="supporting" color="secondary">
+            Static
+          </Text>
+        </Card>
+      </StackItem>
+      <StackItem size="fill">
+        <Card padding={3}>
+          <Text type="supporting" color="secondary">
+            Fills remaining space
+          </Text>
+        </Card>
+      </StackItem>
+    </HStack>
+  );
+}

package/templates/blocks/components/TabMenu/TabMenuBasic.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: 'TabMenu',
+  name: 'TabMenu — Basic',
+  displayName: 'TabMenu — Basic',
+  description:
+    'An overflow menu at the end of a TabList that collects secondary tabs behind a dropdown. Use it when there are more tabs than fit comfortably inline.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['TabList', 'Tab', 'TabMenu'],
+};

package/templates/blocks/components/TabMenu/TabMenuBasic.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {TabList, Tab, TabMenu} from '@astryxdesign/core/TabList';
+
+export default function TabMenuBasic() {
+  const [value, setValue] = useState('overview');
+  return (
+    <TabList value={value} onChange={setValue}>
+      <Tab value="overview" label="Overview" />
+      <Tab value="activity" label="Activity" />
+      <TabMenu
+        label="More"
+        options={[
+          {value: 'settings', label: 'Settings'},
+          {value: 'billing', label: 'Billing'},
+        ]}
+      />
+    </TabList>
+  );
+}

package/templates/blocks/components/ToggleButtonGroup/ToggleButtonGroupVertical.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: '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

@@ -0,0 +1,47 @@
+// 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>
+  );
+}