astryx-dracula 0.1.3 → 0.2.0

package/templates/form-two-column.tsx

@@ -0,0 +1,314 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {useState, type CSSProperties} from 'react';
+import {VStack, HStack} from '@astryxdesign/core/Layout';
+import {Center} from '@astryxdesign/core/Center';
+import {Section} from '@astryxdesign/core/Section';
+import {Grid} from '@astryxdesign/core/Grid';
+import {AspectRatio} from '@astryxdesign/core/AspectRatio';
+import {Button} from '@astryxdesign/core/Button';
+import {Text, Heading} from '@astryxdesign/core/Text';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Token} from '@astryxdesign/core/Token';
+import {TextArea} from '@astryxdesign/core/TextArea';
+import {Link} from '@astryxdesign/core/Link';
+import {Divider} from '@astryxdesign/core/Divider';
+import {Card} from '@astryxdesign/core/Card';
+import {Selector} from '@astryxdesign/core/Selector';
+
+function CastleIllustration() {
+  return (
+    <svg
+      style={illustrationImg}
+      viewBox="0 0 400 300"
+      role="img"
+      aria-label="Moonlit castle where the night crew works">
+      <title>Castle office after dark</title>
+      <rect width="400" height="300" fill="var(--dracula-bg-dark)" />
+      <g fill="var(--dracula-purple)">
+        <circle cx="40" cy="40" r="2.5" />
+        <circle cx="120" cy="70" r="2" />
+        <circle cx="210" cy="36" r="2.5" />
+        <circle cx="330" cy="60" r="2" />
+      </g>
+      <g fill="var(--dracula-cyan)">
+        <circle cx="80" cy="55" r="2" />
+        <circle cx="170" cy="60" r="2" />
+        <circle cx="290" cy="36" r="2.5" />
+      </g>
+      <circle cx="315" cy="70" r="34" fill="var(--dracula-yellow)" />
+      <circle
+        cx="304"
+        cy="61"
+        r="6"
+        fill="var(--dracula-orange)"
+        opacity={0.5}
+      />
+      <g
+        fill="none"
+        stroke="var(--dracula-purple)"
+        strokeWidth={3}
+        strokeLinecap="round">
+        <path d="M90 100 q9 -9 18 0 q9 -9 18 0" />
+        <path d="M180 84 q9 -9 18 0 q9 -9 18 0" />
+      </g>
+      <path
+        d="M0 220 Q140 180 260 210 T400 200 V300 H0 Z"
+        fill="var(--dracula-selection)"
+      />
+      <path
+        d="M0 255 Q160 225 320 250 T400 245 V300 H0 Z"
+        fill="var(--dracula-bg-light)"
+      />
+      <g>
+        <rect
+          x="140"
+          y="150"
+          width="120"
+          height="100"
+          rx={4}
+          fill="var(--dracula-bg-lighter)"
+        />
+        <rect
+          x="122"
+          y="122"
+          width="38"
+          height="128"
+          rx={4}
+          fill="var(--dracula-bg-lighter)"
+        />
+        <rect
+          x="240"
+          y="122"
+          width="38"
+          height="128"
+          rx={4}
+          fill="var(--dracula-bg-lighter)"
+        />
+        <g fill="var(--dracula-yellow)">
+          <rect x="156" y="172" width="12" height="18" rx={2} />
+          <rect x="186" y="172" width="12" height="18" rx={2} />
+          <rect x="216" y="172" width="12" height="18" rx={2} />
+          <rect x="132" y="146" width="9" height="12" rx={2} />
+          <rect x="251" y="146" width="9" height="12" rx={2} />
+        </g>
+        <path
+          d="M185 250 v-24 a15 15 0 0 1 30 0 v24 Z"
+          fill="var(--dracula-bg-dark)"
+        />
+      </g>
+    </svg>
+  );
+}
+
+const INQUIRY_REASONS = [
+  'New business',
+  'General inquiry',
+  'Press & media',
+  'Partnerships',
+  'Product feedback',
+  'Technical support',
+  'Other',
+];
+
+const BUDGET_OPTIONS = [
+  'Under $10k',
+  '$10k – $50k',
+  '$50k – $100k',
+  '$100k – $500k',
+  '$500k+',
+  'Not sure yet',
+];
+
+const CONTACT_COLUMNS = [
+  {label: 'General inquiries', email: 'hello@castle.dracula'},
+  {label: 'New business', email: 'newbiz@castle.dracula'},
+  {label: 'Press & partnerships', email: 'press@castle.dracula'},
+];
+
+// AspectRatio has no radius prop and there's no Image primitive (#2582), so
+// the illustration carries its own corner radius directly.
+const pageStyle: CSSProperties = {
+  minHeight: '100%',
+};
+const illustrationImg: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  display: 'block',
+  borderRadius: 'var(--radius-container)',
+};
+
+/**
+ * Form (Two-column) — marketing contact form template.
+ *
+ * Layout:
+ *   Top: two-column — left has headline + description + illustration,
+ *        right has the contact form on a card.
+ *   Bottom: three-column contact info strip.
+ *   Mobile (<768px): single column stack.
+ */
+export default function TwoColumnForm() {
+  const [fullName, setFullName] = useState('');
+  const [email, setEmail] = useState('');
+  const [company, setCompany] = useState('');
+  const [jobTitle, setJobTitle] = useState('');
+  const [phone, setPhone] = useState('');
+  const [inquiryReason, setInquiryReason] = useState('');
+  const [budget, setBudget] = useState('');
+  const [details, setDetails] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+
+  const errors = submitted
+    ? {
+        fullName: !fullName.trim() ? 'Required' : undefined,
+        email: !email.trim() ? 'Required' : undefined,
+        details: !details.trim() ? 'Required' : undefined,
+      }
+    : {};
+
+  const handleSubmit = () => setSubmitted(true);
+
+  return (
+    <Center style={pageStyle}>
+      <Section maxWidth={1100} width="100%" padding={10} variant="transparent">
+        <VStack gap={10}>
+          {/* Two-column; stacks to one column below ~520px. */}
+          <Grid columns={{minWidth: 320}} align="center" gap={10}>
+            <VStack gap={6}>
+              <VStack gap={3}>
+                <Heading level={1} type="display-1">
+                  Let&apos;s conjure together
+                </Heading>
+                <Text type="body" color="secondary">
+                  Tell us what you&apos;re brewing and we&apos;ll help you find
+                  the best path through the night.
+                </Text>
+              </VStack>
+              <AspectRatio ratio={4 / 3}>
+                <CastleIllustration />
+              </AspectRatio>
+            </VStack>
+
+            <Card padding={8}>
+              <VStack gap={4}>
+                <Text type="label">Your details</Text>
+                <TextInput
+                  label="Full name"
+                  isLabelHidden
+                  placeholder="Full name*"
+                  value={fullName}
+                  onChange={setFullName}
+                  status={
+                    errors.fullName
+                      ? {type: 'error', message: errors.fullName}
+                      : undefined
+                  }
+                />
+                <Grid columns={{minWidth: 180}} gap={3}>
+                  <TextInput
+                    label="Email"
+                    isLabelHidden
+                    placeholder="Email*"
+                    value={email}
+                    onChange={setEmail}
+                    status={
+                      errors.email
+                        ? {type: 'error', message: errors.email}
+                        : undefined
+                    }
+                  />
+                  <TextInput
+                    label="Company name"
+                    isLabelHidden
+                    placeholder="Company name"
+                    value={company}
+                    onChange={setCompany}
+                  />
+                </Grid>
+                <Grid columns={{minWidth: 180}} gap={3}>
+                  <TextInput
+                    label="Job title"
+                    isLabelHidden
+                    placeholder="Job title"
+                    value={jobTitle}
+                    onChange={setJobTitle}
+                  />
+                  <TextInput
+                    label="Phone number"
+                    isLabelHidden
+                    placeholder="Phone number"
+                    value={phone}
+                    onChange={setPhone}
+                  />
+                </Grid>
+
+                <VStack gap={2}>
+                  <Text type="label">What are you reaching out about?</Text>
+                  <HStack gap={2} wrap="wrap">
+                    {INQUIRY_REASONS.map(reason => (
+                      <Token
+                        key={reason}
+                        label={reason}
+                        color={inquiryReason === reason ? 'blue' : 'default'}
+                        onClick={() =>
+                          setInquiryReason(prev =>
+                            prev === reason ? '' : reason,
+                          )
+                        }
+                      />
+                    ))}
+                  </HStack>
+                </VStack>
+                <Selector
+                  label="Budget range"
+                  options={BUDGET_OPTIONS}
+                  value={budget}
+                  onChange={setBudget}
+                  placeholder="Select a budget range..."
+                />
+                <TextArea
+                  label="Project details"
+                  isLabelHidden
+                  placeholder="Project details*"
+                  value={details}
+                  onChange={setDetails}
+                  status={
+                    errors.details
+                      ? {type: 'error', message: errors.details}
+                      : undefined
+                  }
+                />
+                {/* hAlign="stretch" = full-width button workaround; Button
+                    has no full-width prop (#2600). */}
+                <VStack hAlign="stretch">
+                  <Button
+                    label="Send it into the night"
+                    variant="primary"
+                    onClick={handleSubmit}
+                  />
+                </VStack>
+              </VStack>
+            </Card>
+          </Grid>
+
+          {/* Contact strip; stacks below ~440px. */}
+          <VStack gap={6}>
+            <Divider />
+            <Grid columns={{minWidth: 200}} gap={6}>
+              {CONTACT_COLUMNS.map(col => (
+                <VStack key={col.label} gap={1} hAlign="center">
+                  <Text type="supporting" color="secondary">
+                    {col.label}
+                  </Text>
+                  <Link href={`mailto:${col.email}`} type="body" size="sm">
+                    {col.email}
+                  </Link>
+                </VStack>
+              ))}
+            </Grid>
+          </VStack>
+        </VStack>
+      </Section>
+    </Center>
+  );
+}

package/templates/gallery-hero.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'Gallery Hero',
+  description: 'Headline, CTAs, and three-image gallery',
+  category: 'marketing',
+};

package/templates/gallery-hero.tsx

@@ -0,0 +1,287 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import type {CSSProperties} from 'react';
+import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
+import {Text, Heading} from '@astryxdesign/core/Text';
+import {Button} from '@astryxdesign/core/Button';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Grid} from '@astryxdesign/core/Grid';
+import {AspectRatio} from '@astryxdesign/core/AspectRatio';
+import {ArrowRight} from 'lucide-react';
+
+// NOTE: The only custom styling here is gallery fill + corner radius. It
+// exists because Astryx has no image primitive — AspectRatio exposes no
+// objectFit or radius props and there's no Image. Tracked in issue #2582;
+// replace these with component props once it lands.
+// Fills the AspectRatio box. No objectFit prop on AspectRatio (#2582).
+const galleryImage: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  display: 'block',
+};
+// Rounds the gallery corners. No radius prop on AspectRatio (#2582);
+// overflow clip masks the SVG scene to the rounded corners.
+const galleryImageClip: CSSProperties = {
+  borderRadius: 'var(--radius-container)',
+  overflow: 'clip',
+};
+
+function NightCastleScene() {
+  return (
+    <svg
+      style={galleryImage}
+      viewBox="0 0 400 500"
+      role="img"
+      aria-label="Moonlit castle on midnight hills">
+      <title>Castle under a harvest moon</title>
+      <rect width="400" height="500" fill="var(--dracula-bg-dark)" />
+      <g fill="var(--dracula-purple)">
+        <circle cx="50" cy="60" r="2.5" />
+        <circle cx="140" cy="130" r="2" />
+        <circle cx="240" cy="50" r="2.5" />
+        <circle cx="330" cy="110" r="2" />
+        <circle cx="300" cy="200" r="2.5" />
+      </g>
+      <g fill="var(--dracula-cyan)">
+        <circle cx="95" cy="90" r="2" />
+        <circle cx="200" cy="100" r="2.5" />
+        <circle cx="360" cy="60" r="2" />
+      </g>
+      <circle cx="290" cy="120" r="52" fill="var(--dracula-yellow)" />
+      <circle
+        cx="272"
+        cy="106"
+        r="9"
+        fill="var(--dracula-orange)"
+        opacity={0.5}
+      />
+      <g
+        fill="none"
+        stroke="var(--dracula-purple)"
+        strokeWidth={4}
+        strokeLinecap="round">
+        <path d="M70 170 q12 -12 24 0 q12 -12 24 0" />
+        <path d="M150 130 q9 -9 18 0 q9 -9 18 0" />
+      </g>
+      <path
+        d="M0 360 Q140 300 260 350 T400 335 V500 H0 Z"
+        fill="var(--dracula-selection)"
+      />
+      <path
+        d="M0 420 Q160 365 300 410 T400 400 V500 H0 Z"
+        fill="var(--dracula-bg-light)"
+      />
+      <g>
+        <rect
+          x="140"
+          y="270"
+          width="120"
+          height="110"
+          rx={4}
+          fill="var(--dracula-bg-lighter)"
+        />
+        <rect
+          x="118"
+          y="235"
+          width="44"
+          height="145"
+          rx={4}
+          fill="var(--dracula-bg-lighter)"
+        />
+        <rect
+          x="238"
+          y="235"
+          width="44"
+          height="145"
+          rx={4}
+          fill="var(--dracula-bg-lighter)"
+        />
+        <g fill="var(--dracula-yellow)">
+          <rect x="160" y="300" width="14" height="20" rx={2} />
+          <rect x="196" y="300" width="14" height="20" rx={2} />
+          <rect x="232" y="300" width="14" height="20" rx={2} />
+          <rect x="131" y="262" width="10" height="14" rx={2} />
+          <rect x="253" y="262" width="10" height="14" rx={2} />
+        </g>
+        <path
+          d="M185 380 v-28 a15 15 0 0 1 30 0 v28 Z"
+          fill="var(--dracula-bg-dark)"
+        />
+      </g>
+    </svg>
+  );
+}
+
+function HarvestMoonScene() {
+  return (
+    <svg
+      style={galleryImage}
+      viewBox="0 0 400 500"
+      role="img"
+      aria-label="Harvest moon over midnight pines">
+      <title>Harvest moon over the pines</title>
+      <rect width="400" height="500" fill="var(--dracula-bg-dark)" />
+      <g fill="var(--dracula-pink)">
+        <circle cx="60" cy="80" r="2" />
+        <circle cx="160" cy="50" r="2.5" />
+        <circle cx="320" cy="70" r="2" />
+        <circle cx="90" cy="190" r="2.5" />
+        <circle cx="250" cy="160" r="2" />
+      </g>
+      <g fill="var(--dracula-cyan)">
+        <circle cx="110" cy="120" r="2" />
+        <circle cx="220" cy="90" r="2" />
+        <circle cx="350" cy="150" r="2.5" />
+      </g>
+      <circle cx="200" cy="190" r="72" fill="var(--dracula-yellow)" />
+      <circle
+        cx="176"
+        cy="170"
+        r="12"
+        fill="var(--dracula-orange)"
+        opacity={0.5}
+      />
+      <circle
+        cx="222"
+        cy="210"
+        r="8"
+        fill="var(--dracula-orange)"
+        opacity={0.5}
+      />
+      <g
+        fill="none"
+        stroke="var(--dracula-purple)"
+        strokeWidth={4}
+        strokeLinecap="round">
+        <path d="M90 260 q12 -12 24 0 q12 -12 24 0" />
+        <path d="M260 250 q9 -9 18 0 q9 -9 18 0" />
+      </g>
+      <path
+        d="M0 380 Q200 320 400 370 V500 H0 Z"
+        fill="var(--dracula-selection)"
+      />
+      <g fill="var(--dracula-bg-light)">
+        <path d="M70 500 V400 l28 -44 28 44 v100 Z" />
+        <path d="M170 500 V420 l28 -44 28 44 v80 Z" />
+        <path d="M270 500 V410 l28 -44 28 44 v90 Z" />
+      </g>
+      <g fill="var(--dracula-yellow)">
+        <rect x="81" y="442" width="8" height="12" rx={2} />
+        <rect x="181" y="458" width="8" height="12" rx={2} />
+        <rect x="281" y="450" width="8" height="12" rx={2} />
+      </g>
+    </svg>
+  );
+}
+
+function BatFlightScene() {
+  return (
+    <svg
+      style={galleryImage}
+      viewBox="0 0 400 500"
+      role="img"
+      aria-label="Bats crossing a violet night sky">
+      <title>Bats over violet hills</title>
+      <rect width="400" height="500" fill="var(--dracula-bg-dark)" />
+      <circle cx="200" cy="140" r="60" fill="var(--dracula-purple)" />
+      <circle
+        cx="200"
+        cy="140"
+        r="60"
+        fill="none"
+        stroke="var(--dracula-pink)"
+        strokeWidth={3}
+        opacity={0.6}
+      />
+      <g fill="var(--dracula-cyan)">
+        <circle cx="60" cy="70" r="2" />
+        <circle cx="150" cy="40" r="2.5" />
+        <circle cx="260" cy="60" r="2" />
+        <circle cx="340" cy="110" r="2.5" />
+        <circle cx="100" cy="160" r="2" />
+      </g>
+      <g
+        fill="none"
+        stroke="var(--dracula-fg)"
+        strokeWidth={4}
+        strokeLinecap="round">
+        <path d="M110 220 q12 -12 24 0 q12 -12 24 0" />
+        <path d="M200 180 q12 -12 24 0 q12 -12 24 0" />
+        <path d="M250 260 q9 -9 18 0 q9 -9 18 0" />
+        <path d="M140 300 q9 -9 18 0 q9 -9 18 0" />
+        <path d="M290 320 q9 -9 18 0 q9 -9 18 0" />
+      </g>
+      <path
+        d="M0 370 Q140 310 270 355 T400 345 V500 H0 Z"
+        fill="var(--dracula-bg-lighter)"
+      />
+      <path
+        d="M0 430 Q180 375 400 415 V500 H0 Z"
+        fill="var(--dracula-selection)"
+      />
+      <g fill="var(--dracula-green)">
+        <circle cx="80" cy="440" r="6" />
+        <circle cx="200" cy="455" r="6" />
+        <circle cx="320" cy="445" r="6" />
+      </g>
+    </svg>
+  );
+}
+
+const SCENES = [
+  {alt: 'Moonlit castle on midnight hills', scene: <NightCastleScene />},
+  {alt: 'Harvest moon over midnight pines', scene: <HarvestMoonScene />},
+  {alt: 'Bats crossing a violet night sky', scene: <BatFlightScene />},
+];
+
+export default function GalleryHero() {
+  return (
+    <Layout
+      content={
+        <LayoutContent padding={6}>
+          <VStack gap={10}>
+            <VStack gap={6} hAlign="center">
+              <VStack gap={3} hAlign="center">
+                <Heading
+                  level={1}
+                  type="display-2"
+                  justify="center"
+                  textWrap="balance">
+                  Little haunts, everywhere you roam
+                </Heading>
+                <Text
+                  type="body"
+                  color="secondary"
+                  justify="center"
+                  textWrap="balance">
+                  Sometimes all it takes is one small shadow to turn the whole
+                  night around.
+                </Text>
+              </VStack>
+              <HStack gap={3} wrap="wrap" justify="center">
+                <Button
+                  label="Enter the gallery"
+                  variant="primary"
+                  endContent={
+                    <Icon icon={ArrowRight} size="sm" color="inherit" />
+                  }
+                />
+                <Button label="Read the lore" variant="secondary" />
+              </HStack>
+            </VStack>
+            <Grid columns={{minWidth: 200, repeat: 'fit'}} gap={4}>
+              {SCENES.map(item => (
+                <AspectRatio
+                  key={item.alt}
+                  ratio={4 / 5}
+                  style={galleryImageClip}>
+                  {item.scene}
+                </AspectRatio>
+              ))}
+            </Grid>
+          </VStack>
+        </LayoutContent>
+      }
+    />
+  );
+}

package/templates/ide.template.mjs

@@ -0,0 +1,6 @@
+export default {
+  type: 'page',
+  name: 'IDE Workspace',
+  description: 'Tabbed editor with terminal and properties',
+  category: 'tooling',
+};