@astryxdesign/cli 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/templates/blocks/components/DateInput/DateInputWithValidation.tsx

@@ -0,0 +1,45 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {DateInput} from '@astryxdesign/core/DateInput';
+import {Stack} from '@astryxdesign/core/Layout';
+
+type DateString =
+  `${number}${number}${number}${number}-${number}${number}-${number}${number}`;
+
+export default function DateInputWithValidation() {
+  const [errorVal, setErrorVal] = useState<DateString | undefined>(
+    '2026-01-25' as DateString,
+  );
+  const [warningVal, setWarningVal] = useState<DateString | undefined>(
+    '2026-12-25' as DateString,
+  );
+  const [successVal, setSuccessVal] = useState<DateString | undefined>(
+    '2026-03-10' as DateString,
+  );
+
+  return (
+    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+      <DateInput
+        label="Event date"
+        value={errorVal}
+        onChange={setErrorVal}
+        status={{type: 'error', message: 'This date is already booked'}}
+      />
+      <DateInput
+        label="Preferred date"
+        value={warningVal}
+        onChange={setWarningVal}
+        status={{type: 'warning', message: 'This date falls on a holiday'}}
+      />
+      <DateInput
+        label="Start date"
+        value={successVal}
+        onChange={setSuccessVal}
+        status={{type: 'success', message: 'Date confirmed'}}
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/DateRangeInput/DateRangeInputShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'DateRangeInput',
+  name: 'DateRangeInput',
+  displayName: 'Date Range Input',
+  description:
+    'A date range picker with a button trigger and dual-month calendar popover with preset ranges.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 1,
+  componentsUsed: ['DateRangeInput', 'Layout'],
+};

package/templates/blocks/components/DateRangeInput/DateRangeInputShowcase.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {DateRangeInput} from '@astryxdesign/core/DateRangeInput';
+import type {DateRange} from '@astryxdesign/core/DateRangeInput';
+import type {ISODateString} from '@astryxdesign/core/Calendar';
+import {Stack} from '@astryxdesign/core/Layout';
+
+function daysAgo(n: number): ISODateString {
+  const d = new Date();
+  d.setDate(d.getDate() - n);
+  return d.toISOString().slice(0, 10) as ISODateString;
+}
+
+function today(): ISODateString {
+  return new Date().toISOString().slice(0, 10) as ISODateString;
+}
+
+const presets = [
+  {label: 'Last 7 days', getRange: () => ({start: daysAgo(7), end: today()})},
+  {label: 'Last 30 days', getRange: () => ({start: daysAgo(30), end: today()})},
+];
+
+export default function DateRangeInputShowcase() {
+  const [range, setRange] = useState<DateRange | null>(null);
+
+  return (
+    <Stack direction="vertical" width="100%" style={{maxWidth: 400}}>
+      <DateRangeInput
+        label="Date range"
+        value={range}
+        onChange={setRange}
+        presets={presets}
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/DateTimeInput/DateTimeInputShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'DateTimeInput',
+  name: 'DateTimeInput',
+  displayName: 'Date Time Input',
+  description:
+    'A combined date and time picker. Click to open a calendar popover with a time input below.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 1,
+  componentsUsed: ['DateTimeInput', 'Layout'],
+};

package/templates/blocks/components/DateTimeInput/DateTimeInputShowcase.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {DateTimeInput} from '@astryxdesign/core/DateTimeInput';
+import type {ISODateTimeString} from '@astryxdesign/core/DateTimeInput';
+import {Stack} from '@astryxdesign/core/Layout';
+
+export default function DateTimeInputShowcase() {
+  const [dateTime, setDateTime] = useState<ISODateTimeString | undefined>(
+    undefined,
+  );
+
+  return (
+    <Stack direction="vertical" width="100%" style={{maxWidth: 400}}>
+      <DateTimeInput
+        label="Meeting time"
+        placeholder="Select a date"
+        value={dateTime}
+        onChange={setDateTime}
+        hasClear
+      />
+    </Stack>
+  );
+}

package/templates/blocks/components/Dialog/DialogConfirmationDialog.doc.mjs

@@ -0,0 +1,16 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Dialog',
+  alsoExampleFor: ['useImperativeDialog'],
+  alsoShowcaseFor: ['useImperativeDialog'],
+  name: 'Dialog — Confirmation',
+  displayName: 'Dialog — Confirmation',
+  description:
+    'Asks the user to confirm a destructive action before it happens. Use before deleting projects, removing team members, revoking API keys, or any irreversible operation.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Dialog', 'Layout', 'Button', 'Text'],
+};

package/templates/blocks/components/Dialog/DialogConfirmationDialog.tsx

@@ -0,0 +1,67 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  Dialog,
+  DialogHeader,
+  useImperativeDialog,
+} from '@astryxdesign/core/Dialog';
+import {
+  Layout,
+  LayoutContent,
+  LayoutFooter,
+  HStack,
+} from '@astryxdesign/core/Layout';
+import {Button} from '@astryxdesign/core/Button';
+import {Text} from '@astryxdesign/core/Text';
+
+function Content({onClose}: {onClose: () => void}) {
+  return (
+    <Layout
+      header={
+        <DialogHeader
+          title="Delete project?"
+          onOpenChange={() => onClose()}
+        />
+      }
+      content={
+        <LayoutContent>
+          <Text type="body">
+            This will permanently delete &quot;Marketing Dashboard&quot; and all
+            of its data. This action cannot be undone.
+          </Text>
+        </LayoutContent>
+      }
+      footer={
+        <LayoutFooter>
+          <HStack gap={2} hAlign="end">
+            <Button label="Cancel" variant="secondary" onClick={onClose} />
+            <Button label="Delete" variant="destructive" onClick={onClose} />
+          </HStack>
+        </LayoutFooter>
+      }
+    />
+  );
+}
+
+// Remove isInline for production — dialogs should be modal.
+export default function DialogConfirmationDialog() {
+  const dialog = useImperativeDialog({width: 400, purpose: 'form'});
+
+  return (
+    <>
+      <Dialog
+        isOpen
+        isInline
+        onOpenChange={() => {}}
+        width={400}
+        purpose="form">
+        <Content
+          onClose={() => dialog.show(<Content onClose={() => dialog.hide()} />)}
+        />
+      </Dialog>
+      {dialog.element}
+    </>
+  );
+}

package/templates/blocks/components/Dialog/DialogFormDialog.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Dialog',
+  alsoExampleFor: ['useImperativeDialog'],
+  name: 'Dialog — Form',
+  displayName: 'Dialog — Form',
+  description:
+    'Collects user input without navigating away from the page. Uses purpose="form" so clicking the backdrop won\'t close it. Use for editing profiles, creating items, or updating settings inline.',
+  isReady: true,
+  aspectRatio: 3 / 4,
+  componentsUsed: ['Dialog', 'Layout', 'Button', 'TextInput', 'TextArea'],
+};

package/templates/blocks/components/Dialog/DialogFormDialog.tsx

@@ -0,0 +1,84 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {
+  Dialog,
+  DialogHeader,
+  useImperativeDialog,
+} from '@astryxdesign/core/Dialog';
+import {
+  Layout,
+  LayoutContent,
+  LayoutFooter,
+  HStack,
+  VStack,
+} from '@astryxdesign/core/Layout';
+import {Button} from '@astryxdesign/core/Button';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {TextArea} from '@astryxdesign/core/TextArea';
+
+function Content({onClose}: {onClose: () => void}) {
+  const [name, setName] = useState('Ruby Cheung');
+  const [bio, setBio] = useState('Design systems engineer');
+
+  return (
+    <Layout
+      header={
+        <DialogHeader
+          title="Edit profile"
+          subtitle="Update your display name and bio"
+          onOpenChange={() => onClose()}
+        />
+      }
+      content={
+        <LayoutContent>
+          <VStack gap={4}>
+            <TextInput
+              label="Display name"
+              value={name}
+              onChange={setName}
+              placeholder="Enter your name"
+            />
+            <TextArea
+              label="Bio"
+              value={bio}
+              onChange={setBio}
+              placeholder="Tell us about yourself"
+            />
+          </VStack>
+        </LayoutContent>
+      }
+      footer={
+        <LayoutFooter>
+          <HStack gap={2} hAlign="end">
+            <Button label="Cancel" variant="secondary" onClick={onClose} />
+            <Button label="Save" variant="primary" onClick={onClose} />
+          </HStack>
+        </LayoutFooter>
+      }
+    />
+  );
+}
+
+// Remove isInline for production — dialogs should be modal.
+export default function DialogFormDialog() {
+  const dialog = useImperativeDialog({purpose: 'form', width: 480});
+
+  return (
+    <>
+      <Dialog
+        isOpen
+        isInline
+        onOpenChange={() => {}}
+        purpose="form"
+        width={480}>
+        <Content
+          onClose={() => dialog.show(<Content onClose={() => dialog.hide()} />)}
+        />
+      </Dialog>
+      {dialog.element}
+    </>
+  );
+}

package/templates/blocks/components/Dialog/DialogFullscreenDialog.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: 'Dialog',
+  name: 'Dialog — Fullscreen',
+  displayName: 'Dialog — Fullscreen',
+  description:
+    'Takes over the entire viewport for content that needs maximum space. Use for documentation viewers, rich text editors, multi-step wizards, or media previews where the standard dialog width is too narrow.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Dialog', 'Layout', 'Button', 'Text', 'Card'],
+};

package/templates/blocks/components/Dialog/DialogFullscreenDialog.tsx

@@ -0,0 +1,99 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
+import {
+  Layout,
+  LayoutContent,
+  LayoutFooter,
+  HStack,
+  VStack,
+} from '@astryxdesign/core/Layout';
+import {Button} from '@astryxdesign/core/Button';
+import {Text} from '@astryxdesign/core/Text';
+import {Card} from '@astryxdesign/core/Card';
+
+const SECTIONS = [
+  {
+    title: 'Getting started',
+    body: 'Create your first project by clicking New Project in the sidebar. Choose a template or start from scratch.',
+  },
+  {
+    title: 'Team members',
+    body: 'Invite collaborators from Settings > Team. Each member can have Admin, Editor, or Viewer permissions.',
+  },
+  {
+    title: 'Billing',
+    body: 'Free plans include up to 3 projects. Upgrade to Pro for unlimited projects and priority support.',
+  },
+  {
+    title: 'API access',
+    body: 'Generate API keys from Settings > Developer. Rate limits are 1,000 requests per minute on free plans.',
+  },
+  {
+    title: 'Data export',
+    body: 'Export your data anytime from Settings > Data. Exports are available as CSV or JSON within 24 hours.',
+  },
+];
+
+export default function DialogFullscreenDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Card>
+      <VStack gap={3}>
+        <VStack gap={1}>
+          <Text type="body" weight="bold">
+            Help &amp; Documentation
+          </Text>
+          <Text type="supporting" color="secondary">
+            5 articles · Last updated Apr 2026
+          </Text>
+        </VStack>
+        <Button
+          label="Open documentation"
+          variant="secondary"
+          onClick={() => setIsOpen(true)}
+        />
+      </VStack>
+      <Dialog isOpen={isOpen} onOpenChange={setIsOpen} variant="fullscreen">
+        <Layout
+          header={
+            <DialogHeader
+              title="Documentation"
+              subtitle="Everything you need to get started"
+              onOpenChange={setIsOpen}
+            />
+          }
+          content={
+            <LayoutContent>
+              <VStack gap={4}>
+                {SECTIONS.map(({title, body}) => (
+                  <VStack key={title} gap={1}>
+                    <Text type="body" weight="bold">
+                      {title}
+                    </Text>
+                    <Text type="body">{body}</Text>
+                  </VStack>
+                ))}
+              </VStack>
+            </LayoutContent>
+          }
+          footer={
+            <LayoutFooter>
+              <HStack hAlign="end">
+                <Button
+                  label="Close"
+                  variant="primary"
+                  onClick={() => setIsOpen(false)}
+                />
+              </HStack>
+            </LayoutFooter>
+          }
+        />
+      </Dialog>
+    </Card>
+  );
+}

package/templates/blocks/components/Dialog/DialogScrollingContent.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Dialog',
+  alsoExampleFor: ['useImperativeDialog'],
+  name: 'Dialog — Scrollable',
+  displayName: 'Dialog — Scrollable',
+  description:
+    'Constrains the dialog height and scrolls the body when content overflows. Use for terms and conditions, license agreements, changelogs, or any long-form content the user needs to review before accepting.',
+  isReady: true,
+  aspectRatio: 3 / 4,
+  componentsUsed: ['Dialog', 'Layout', 'Button', 'Text'],
+};

package/templates/blocks/components/Dialog/DialogScrollingContent.tsx

@@ -0,0 +1,84 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  Dialog,
+  DialogHeader,
+  useImperativeDialog,
+} from '@astryxdesign/core/Dialog';
+import {
+  Layout,
+  LayoutContent,
+  LayoutFooter,
+  HStack,
+  VStack,
+} from '@astryxdesign/core/Layout';
+import {Button} from '@astryxdesign/core/Button';
+import {Text} from '@astryxdesign/core/Text';
+
+const TERMS = [
+  'You agree to use the service only for lawful purposes and in compliance with all applicable laws and regulations in your jurisdiction.',
+  'Your account credentials are your responsibility. Notify us immediately if you suspect unauthorized access to your account.',
+  'We reserve the right to suspend accounts that violate these terms or engage in abusive behavior toward other users.',
+  'Content you upload remains your property. You grant us a license to host and display it within the service.',
+  'We may update these terms at any time. Continued use after changes constitutes acceptance of the updated terms.',
+  'The service is provided as-is without warranties of any kind. We are not liable for data loss or service interruptions.',
+  'You may cancel your account at any time. Your data will be deleted within 30 days of cancellation.',
+  'Disputes will be resolved through binding arbitration in accordance with applicable regulations.',
+  'You agree not to reverse-engineer, decompile, or disassemble any part of the service or its underlying technology.',
+  'We may collect anonymized usage data to improve the service. Personal data is handled per our Privacy Policy.',
+  'Third-party integrations are governed by their own terms. We are not responsible for third-party service outages.',
+  'You are responsible for maintaining backups of your data. We provide export tools but do not guarantee data recovery.',
+  'Commercial use requires a Business plan. Free accounts are limited to personal and non-commercial projects.',
+  'We may introduce new features or discontinue existing ones with 30 days notice via email or in-app notification.',
+  'Violation of these terms may result in immediate termination of your account without prior notice or refund.',
+];
+
+function Content({onClose}: {onClose: () => void}) {
+  return (
+    <Layout
+      header={
+        <DialogHeader
+          title="Terms and Conditions"
+          onOpenChange={() => onClose()}
+        />
+      }
+      content={
+        <LayoutContent>
+          <VStack gap={3}>
+            {TERMS.map((term, i) => (
+              <Text type="body" key={i}>
+                {i + 1}. {term}
+              </Text>
+            ))}
+          </VStack>
+        </LayoutContent>
+      }
+      footer={
+        <LayoutFooter>
+          <HStack gap={2} hAlign="end">
+            <Button label="Decline" variant="secondary" onClick={onClose} />
+            <Button label="Accept" variant="primary" onClick={onClose} />
+          </HStack>
+        </LayoutFooter>
+      }
+    />
+  );
+}
+
+// Remove isInline for production — dialogs should be modal.
+export default function DialogScrollingContent() {
+  const dialog = useImperativeDialog({maxHeight: '50vh'});
+
+  return (
+    <>
+      <Dialog isOpen isInline onOpenChange={() => {}} maxHeight={360}>
+        <Content
+          onClose={() => dialog.show(<Content onClose={() => dialog.hide()} />)}
+        />
+      </Dialog>
+      {dialog.element}
+    </>
+  );
+}

package/templates/blocks/components/Dialog/DialogShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Dialog',
+  name: 'Dialog',
+  displayName: 'Dialog',
+  description:
+    'Modal dialog with a header, body content, and close button.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Dialog', 'Layout', 'Text'],
+};

package/templates/blocks/components/Dialog/DialogShowcase.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
+import {Layout, LayoutContent} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+// Remove isInline for production — dialogs should be modal.
+export default function DialogShowcase() {
+  return (
+    <Dialog isOpen isInline onOpenChange={() => {}}>
+      <Layout
+        header={<DialogHeader title="Modal Title" onOpenChange={() => {}} />}
+        content={
+          <LayoutContent>
+            <Text type="body">Dialog content goes here.</Text>
+          </LayoutContent>
+        }
+      />
+    </Dialog>
+  );
+}

package/templates/blocks/components/Dialog/DialogWithSubtitle.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Dialog',
+  alsoExampleFor: ['useImperativeDialog'],
+  name: 'Dialog — Required',
+  displayName: 'Dialog — Required',
+  description:
+    'Cannot be dismissed by Escape or backdrop click; the user must explicitly choose an action. Uses purpose="required". Use for ownership transfers, legal acknowledgements, or critical decisions where skipping is not an option.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Dialog', 'Layout', 'Button', 'Text'],
+};

package/templates/blocks/components/Dialog/DialogWithSubtitle.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  Dialog,
+  DialogHeader,
+  useImperativeDialog,
+} from '@astryxdesign/core/Dialog';
+import {
+  Layout,
+  LayoutContent,
+  LayoutFooter,
+  HStack,
+} from '@astryxdesign/core/Layout';
+import {Button} from '@astryxdesign/core/Button';
+import {Text} from '@astryxdesign/core/Text';
+
+function Content({onClose}: {onClose: () => void}) {
+  return (
+    <Layout
+      header={
+        <DialogHeader
+          title="Transfer project ownership"
+          subtitle="This action requires confirmation from the new owner"
+        />
+      }
+      content={
+        <LayoutContent>
+          <Text type="body">
+            You are about to transfer &quot;Marketing Dashboard&quot; to Sarah
+            Chen. Once accepted, you will lose admin access.
+          </Text>
+        </LayoutContent>
+      }
+      footer={
+        <LayoutFooter>
+          <HStack gap={2} hAlign="end">
+            <Button label="Cancel" variant="secondary" onClick={onClose} />
+            <Button label="Transfer" variant="primary" onClick={onClose} />
+          </HStack>
+        </LayoutFooter>
+      }
+    />
+  );
+}
+
+// Remove isInline for production — dialogs should be modal.
+export default function DialogWithSubtitle() {
+  const dialog = useImperativeDialog({purpose: 'required'});
+
+  return (
+    <>
+      <Dialog isOpen isInline onOpenChange={() => {}} purpose="required">
+        <Content
+          onClose={() => dialog.show(<Content onClose={() => dialog.hide()} />)}
+        />
+      </Dialog>
+      {dialog.element}
+    </>
+  );
+}