@astryxdesign/cli 0.1.1-canary.a21bfc3 → 0.1.1-canary.ac73e47

package/package.json

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

package/templates/blocks/components/DateInput/DateInputDateRange.doc.mjs

@@ -4,8 +4,8 @@
 export const doc = {
   type: 'block',
   exampleFor: 'DateInput',
-  name: 'DateInput — Date Range',
-  displayName: 'DateInput — Date Range',
+  name: 'DateInput — Min/Max Constraints',
+  displayName: 'DateInput — Min/Max Constraints',
   description:
     'Date input constrained to a min/max window. Use when only certain dates are valid, like booking availability or a fiscal quarter.',
   isReady: true,

package/templates/blocks/components/Slider/SliderShowcase.tsx

@@ -2,8 +2,17 @@
 
 'use client';
 
+import {useState} from 'react';
 import {Slider} from '@astryxdesign/core/Slider';
 
 export default function SliderShowcase() {
-  return <Slider label="Volume" value={50} style={{width: 300}} />;
+  const [value, setValue] = useState(50);
+  return (
+    <Slider
+      label="Volume"
+      value={value}
+      onChange={setValue}
+      style={{width: 300}}
+    />
+  );
 }

package/templates/blocks/components/Table/ColumnResizeHookUsage.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: 'useTableColumnResize',
+  name: 'useTableColumnResize — Draggable Columns',
+  displayName: 'useTableColumnResize — Draggable Columns',
+  description:
+    'A Table using useTableColumnResize. Drag the right edge of any column header to resize; widths are committed on release. The last proportional column flexes to fill remaining space.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table'],
+};

package/templates/blocks/components/Table/ColumnResizeHookUsage.tsx

@@ -0,0 +1,59 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {
+  Table,
+  useTableColumnResize,
+  proportional,
+  pixel,
+} from '@astryxdesign/core/Table';
+
+interface User extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+const users: User[] = [
+  {
+    id: '1',
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    role: 'Engineer',
+  },
+  {id: '2', name: 'Bob Smith', email: 'bob@example.com', role: 'Designer'},
+  {id: '3', name: 'Charlie Brown', email: 'charlie@example.com', role: 'PM'},
+  {id: '4', name: 'Diana Prince', email: 'diana@example.com', role: 'Engineer'},
+  {id: '5', name: 'Eve Davis', email: 'eve@example.com', role: 'Analyst'},
+];
+
+const columns = [
+  {key: 'name', header: 'Name'},
+  {key: 'email', header: 'Email', width: proportional(2)},
+  {key: 'role', header: 'Role', width: pixel(120)},
+];
+
+export default function ColumnResizeHookUsage() {
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
+
+  const columnResize = useTableColumnResize({
+    columnWidths,
+    columns,
+    onColumnResizeEnd: updates => {
+      setColumnWidths(prev => ({...prev, ...updates}));
+    },
+  });
+
+  return (
+    <Table
+      data={users}
+      columns={columns}
+      idKey="id"
+      hasHover
+      plugins={{columnResize}}
+    />
+  );
+}

package/templates/blocks/components/Table/StickyColumnsHookUsage.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: 'useTableStickyColumns',
+  name: 'useTableStickyColumns — Pinned Columns',
+  displayName: 'useTableStickyColumns — Pinned Columns',
+  description:
+    'A Table using useTableStickyColumns to pin the Name column to the start edge and Status to the end edge. Scroll horizontally — pinned columns stay in view with a soft shadow over the scrolling content.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table'],
+};

package/templates/blocks/components/Table/StickyColumnsHookUsage.tsx

@@ -0,0 +1,104 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Table, useTableStickyColumns, pixel} from '@astryxdesign/core/Table';
+
+interface Employee extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  team: string;
+  role: string;
+  location: string;
+  startDate: string;
+  status: string;
+}
+
+const employees: Employee[] = [
+  {
+    id: '1',
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    team: 'Design Systems',
+    role: 'Staff Engineer',
+    location: 'San Francisco',
+    startDate: '2019-03-12',
+    status: 'Active',
+  },
+  {
+    id: '2',
+    name: 'Bob Smith',
+    email: 'bob@example.com',
+    team: 'Design Systems',
+    role: 'Senior Designer',
+    location: 'New York',
+    startDate: '2020-07-01',
+    status: 'Active',
+  },
+  {
+    id: '3',
+    name: 'Charlie Brown',
+    email: 'charlie@example.com',
+    team: 'Platform',
+    role: 'Engineering Manager',
+    location: 'London',
+    startDate: '2017-11-20',
+    status: 'On leave',
+  },
+  {
+    id: '4',
+    name: 'Diana Prince',
+    email: 'diana@example.com',
+    team: 'Platform',
+    role: 'Staff Engineer',
+    location: 'Remote',
+    startDate: '2021-01-15',
+    status: 'Active',
+  },
+  {
+    id: '5',
+    name: 'Eve Davis',
+    email: 'eve@example.com',
+    team: 'Growth',
+    role: 'Product Engineer',
+    location: 'Berlin',
+    startDate: '2022-05-30',
+    status: 'Active',
+  },
+];
+
+// Wide fixed-width columns so the table overflows and scrolls horizontally,
+// keeping the pinned Name (start) and Status (end) columns in view.
+const columns = [
+  {key: 'name', header: 'Name', width: pixel(180)},
+  {key: 'email', header: 'Email', width: pixel(220)},
+  {key: 'team', header: 'Team', width: pixel(180)},
+  {key: 'role', header: 'Role', width: pixel(200)},
+  {key: 'location', header: 'Location', width: pixel(160)},
+  {key: 'startDate', header: 'Start date', width: pixel(140)},
+  {key: 'status', header: 'Status', width: pixel(140)},
+];
+
+export default function StickyColumnsHookUsage() {
+  const stickyColumns = useTableStickyColumns<Employee>({
+    startKeys: ['name'],
+    endKeys: ['status'],
+  });
+
+  return (
+    // Constrain the width so the Table's own horizontal scroll container is
+    // narrower than its columns — that scroll container is what sticky columns
+    // pin against. Without a width cap the table renders full-width and never
+    // scrolls internally, so nothing sticks.
+    <div style={{width: 560, maxWidth: '100%'}}>
+      <Table
+        data={employees}
+        columns={columns}
+        idKey="id"
+        hasHover
+        plugins={{stickyColumns}}
+      />
+    </div>
+  );
+}

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

@@ -3,7 +3,7 @@
 /** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
 export const doc = {
   type: 'block',
-  exampleFor: 'ToggleButton',
+  exampleFor: 'ToggleButtonGroup',
   name: 'ToggleButton — Group',
   displayName: 'ToggleButton — Group',
   description: 'Toggle button groups in single-select and multi-select modes. Single selection acts as a view mode switcher; multiple selection forms a formatting toolbar.',

package/templates/blocks/components/MoreMenu/MoreMenuInToolbar.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: 'MoreMenu',
-  name: 'MoreMenu — In Toolbar',
-  displayName: 'MoreMenu — In Toolbar',
-  description:
-    'A three-dot menu alongside icon buttons in a card header toolbar.',
-  isReady: true,
-  aspectRatio: 16 / 9,
-  componentsUsed: ['MoreMenu', 'Button', 'Icon', 'Toolbar', 'Text', 'Card', 'Section'],
-};

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

@@ -1,57 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {MoreMenu} from '@astryxdesign/core/MoreMenu';
-import {Button} from '@astryxdesign/core/Button';
-import {Icon} from '@astryxdesign/core/Icon';
-import {Toolbar} from '@astryxdesign/core/Toolbar';
-import {Heading} from '@astryxdesign/core/Text';
-import {Card} from '@astryxdesign/core/Card';
-import {Section} from '@astryxdesign/core/Section';
-import {
-  ArrowLeftIcon,
-  ArrowDownTrayIcon,
-  ShareIcon,
-  TrashIcon,
-} from '@heroicons/react/24/outline';
-
-export default function MoreMenuInToolbar() {
-  return (
-    <Card width="100%" height="100%" style={{marginTop: 100}}>
-      <Toolbar
-        label="Project actions"
-        size="sm"
-        dividers={['bottom']}
-        startContent={
-          <Button
-            label="Back"
-            variant="ghost"
-            icon={<Icon icon={ArrowLeftIcon} />}
-            isIconOnly
-          />
-        }
-        centerContent={<Heading level={5}>Title</Heading>}
-        endContent={
-          <>
-            <div style={{marginInlineEnd: 8}}>
-              <MoreMenu
-                label="More actions"
-                size="sm"
-                items={[
-                  {label: 'Export', icon: ArrowDownTrayIcon, onClick: () => {}},
-                  {label: 'Share', icon: ShareIcon, onClick: () => {}},
-                  {type: 'divider'},
-                  {label: 'Delete', icon: TrashIcon, onClick: () => {}},
-                ]}
-              />
-            </div>
-            <Button label="Discard" variant="secondary" size="sm" />
-            <Button label="Save" variant="primary" size="sm" />
-          </>
-        }
-      />
-      <Section />
-    </Card>
-  );
-}