@gradial/aci 0.1.20-preview.3 → 0.1.21

package/templates/astro/template/src/components/chrome/Header.astro

@@ -0,0 +1,94 @@
+---
+import Button from '../elements/Button.astro';
+import Container from '../elements/Container.astro';
+import Icon from '../elements/Icon.astro';
+import Logo from '../elements/Logo.astro';
+
+interface NavItem {
+  id: string;
+  label: string;
+  href: string;
+}
+
+interface UtilityItem extends NavItem {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+}
+
+interface Props {
+  brandHref: string;
+  brandLabel?: string;
+  brandLogo?: { src: string; alt?: string } | null;
+  navigation?: NavItem[];
+  utilities?: UtilityItem[];
+}
+
+const {
+  brandHref,
+  brandLabel = 'Gradial',
+  brandLogo = null,
+  navigation = [],
+  utilities = []
+} = Astro.props;
+---
+
+<header class="bm-header sticky top-0 z-[var(--z-header)] [font-family:var(--font-family-base)] text-fg">
+  <a
+    href="#content-main"
+    class="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-10 focus:rounded-button focus:bg-white focus:px-4 focus:py-2 focus:text-black"
+  >
+    Skip to main content
+  </a>
+  <Container className="flex min-h-[var(--height-header)] items-center justify-between gap-4">
+    <a href={brandHref} class="shrink-0">
+      <Logo label={brandLabel} src={brandLogo?.src || ''} alt={brandLogo?.alt || brandLabel} />
+    </a>
+    <nav class="hidden items-center gap-9 text-[length:var(--text-size-body-small)] font-[var(--font-weight-semibold)] text-fg-muted lg:flex" aria-label="Primary">
+      {navigation.map((item) => (
+        <a class="transition hover:text-link-hover" href={item.href}>{item.label}</a>
+      ))}
+    </nav>
+    <div class="flex shrink-0 items-center gap-3">
+      <div class="hidden items-center gap-3 sm:flex">
+        {utilities.map((item) => (
+          <Button href={item.href} variant={item.variant || 'outline'}>{item.label}</Button>
+        ))}
+      </div>
+      <div class="lg:hidden">
+        <input id="site-mobile-nav" class="peer sr-only" type="checkbox" />
+        <label
+          for="site-mobile-nav"
+          class="inline-grid size-11 cursor-pointer place-items-center rounded-button border border-edge text-fg transition hover:text-link-hover"
+          aria-label="Open main navigation"
+        >
+          <Icon name="menu" className="size-6" />
+        </label>
+        <div class="bm-mobile-nav pointer-events-none fixed inset-0 z-[var(--z-overlay)] flex translate-x-full flex-col px-[var(--spacing-container)] py-5 text-fg opacity-0 transition duration-300 ease-out peer-checked:pointer-events-auto peer-checked:translate-x-0 peer-checked:opacity-100">
+          <div class="flex min-h-[var(--height-header)] items-center justify-between gap-4">
+            <a href={brandHref} class="shrink-0">
+              <Logo label={brandLabel} src={brandLogo?.src || ''} alt={brandLogo?.alt || brandLabel} />
+            </a>
+            <label
+              for="site-mobile-nav"
+              class="inline-grid size-11 cursor-pointer place-items-center rounded-button border border-edge text-fg transition hover:text-link-hover"
+              aria-label="Close main navigation"
+            >
+              <Icon name="close" className="size-6" />
+            </label>
+          </div>
+          <nav class="grid flex-1 content-center gap-4 py-10 font-[var(--font-weight-bold)] text-[length:var(--mobile-nav-link-size)] leading-[var(--mobile-nav-link-line-height)] text-fg" aria-label="Mobile main navigation">
+            {navigation.map((item) => (
+              <a class="transition hover:text-link-hover" href={item.href}>{item.label}</a>
+            ))}
+          </nav>
+          {utilities.length ? (
+            <div class="grid gap-3 border-t border-edge pt-5 sm:hidden">
+              {utilities.map((item) => (
+                <Button href={item.href} variant={item.variant || 'outline'} className="w-full">{item.label}</Button>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  </Container>
+</header>

package/templates/astro/template/src/components/elements/AtomicBlock.astro

@@ -0,0 +1,15 @@
+---
+import type { KernelAtomicBlock } from '@gradial/aci/content';
+import ButtonBlock from './ButtonBlock.astro';
+
+interface Props {
+  block: KernelAtomicBlock;
+}
+
+const { block } = Astro.props;
+const props = (block.props || {}) as any;
+---
+
+{block.component === 'button' ? (
+  <ButtonBlock {...props} />
+) : null}

package/templates/astro/template/src/components/elements/AtomicBlocks.astro

@@ -0,0 +1,16 @@
+---
+import type { KernelAtomicBlock } from '@gradial/aci/content';
+import AtomicBlock from './AtomicBlock.astro';
+
+interface Props {
+  blocks?: KernelAtomicBlock[];
+}
+
+const { blocks = [] } = Astro.props;
+---
+
+<div class="flex flex-wrap gap-4">
+  {blocks.map((block) => (
+    <AtomicBlock {block} />
+  ))}
+</div>

package/templates/astro/template/src/components/elements/Button.astro

@@ -0,0 +1,51 @@
+---
+interface Props {
+  href: string;
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'ghost';
+  className?: string;
+  target?: string;
+  rel?: string;
+}
+
+const { href, variant = 'primary', className = '', target, rel } = Astro.props;
+
+const variantTokens = {
+  primary: {
+    background: 'var(--button-primary-bg)',
+    border: 'var(--button-primary-border)',
+    color: 'var(--button-primary-text)'
+  },
+  secondary: {
+    background: 'var(--button-secondary-bg)',
+    border: 'var(--button-secondary-border)',
+    color: 'var(--button-secondary-text)'
+  },
+  outline: {
+    background: 'var(--button-outline-bg)',
+    border: 'var(--button-outline-border)',
+    color: 'var(--button-outline-text)'
+  },
+  tertiary: {
+    background: 'var(--button-tertiary-bg)',
+    border: 'var(--button-tertiary-border)',
+    color: 'var(--button-tertiary-text)'
+  },
+  ghost: {
+    background: 'transparent',
+    border: 'transparent',
+    color: 'var(--color-fg)'
+  }
+}[variant];
+
+const tokenStyle = `background-color: ${variantTokens.background}; border-color: ${variantTokens.border}; color: ${variantTokens.color};`;
+---
+
+<a
+  class={`inline-flex min-h-10 items-center justify-center rounded-button border px-[var(--spacing-button-x)] py-[var(--spacing-button-y)] [font-family:var(--font-family-base)] text-[length:var(--text-button)] font-[var(--font-weight-semibold)] leading-button transition duration-200 hover:opacity-85 ${className}`}
+  href={href}
+  target={target}
+  rel={rel}
+  style={tokenStyle}
+>
+  <slot />
+</a>

package/templates/astro/template/src/components/elements/ButtonBlock.astro

@@ -0,0 +1,25 @@
+---
+import Button from '../elements/Button.astro';
+import Icon from '../elements/Icon.astro';
+import type { ContentProps } from '../../cms/contracts/components/button.contract';
+
+type Props = ContentProps;
+
+const {
+  label,
+  href,
+  variant = 'primary',
+  newWindow = false,
+  icon = '',
+  iconPosition = 'before',
+  className = ''
+} = Astro.props;
+const target = newWindow ? '_blank' : undefined;
+const rel = newWindow ? 'noreferrer' : undefined;
+---
+
+<Button {href} {variant} {target} {rel} {className}>
+  {icon && iconPosition === 'before' ? <Icon name={icon} className="mr-2 size-4" /> : null}
+  <span>{label}</span>
+  {icon && iconPosition === 'after' ? <Icon name={icon} className="ml-2 size-4" /> : null}
+</Button>

package/templates/astro/template/src/components/elements/Container.astro

@@ -0,0 +1,11 @@
+---
+interface Props {
+  className?: string;
+}
+
+const { className = '' } = Astro.props;
+---
+
+<div class={`mx-auto w-full max-w-container px-[var(--spacing-container)] ${className}`}>
+  <slot />
+</div>

package/templates/astro/template/src/components/elements/Icon.astro

@@ -0,0 +1,31 @@
+---
+interface Props {
+  name: 'auto_awesome' | 'hub' | 'speed' | string;
+  className?: string;
+}
+
+const { name, className = '' } = Astro.props;
+
+const paths: Record<string, string> = {
+  arrow_forward: 'M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z',
+  auto_awesome: 'M480-80 376-376 80-480l296-104 104-296 104 296 296 104-296 104L480-80Zm0-167 64-177 177-64-177-64-64-177-64 177-177 64 177 64 64 177ZM760-560l-40-120-120-40 120-40 40-120 40 120 120 40-120 40-40 120Z',
+  close: 'm256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z',
+  globe: 'M480-80q-82 0-155-31.5t-127.5-86q-54.5-54.5-86-127.5T80-480q0-82 31.5-155t86-127.5q54.5-54.5 127.5-86T480-880q82 0 155 31.5t127.5 86q54.5 54.5 86 127.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127.5 86T480-80Zm0-80q139-36 209.5-131.5T760-480H520v-280q-64 8-117 38.5T320-640h-40q-54 77-87 153.5T160-480q0 131.5 69.5 227T480-160Zm0 80q-83 0-156-31.5t-127-86q-54.5-54.5-86-127T80-480q0-83 31.5-156t86-127q54.5-54.5 127-86T480-880q83 0 156 31.5t127 86q54.5 54.5 86 127T880-480q0 83-31.5 156t-86 127q-54.5 54.5-127 86T480-80Z',
+  hub: 'M200-120q-50 0-85-35t-35-85q0-39 22.5-70t57.5-43v-254q-35-12-57.5-43T80-720q0-50 35-85t85-35q39 0 70 22.5t43 57.5h334q12-35 43-57.5t70-22.5q50 0 85 35t35 85q0 39-22.5 70T800-607v254q35 12 57.5 43t22.5 70q0 50-35 85t-85 35q-39 0-70-22.5T647-200H313q-12 35-43 57.5T200-120Zm0-80q17 0 28.5-11.5T240-240q0-17-11.5-28.5T200-280q-17 0-28.5 11.5T160-240q0 17 11.5 28.5T200-200Zm0-480q17 0 28.5-11.5T240-720q0-17-11.5-28.5T200-760q-17 0-28.5 11.5T160-720q0 17 11.5 28.5T200-680Zm560 480q17 0 28.5-11.5T800-240q0-17-11.5-28.5T760-280q-17 0-28.5 11.5T720-240q0 17 11.5 28.5T760-200Zm0-480q17 0 28.5-11.5T800-720q0-17-11.5-28.5T760-760q-17 0-28.5 11.5T720-720q0 17 11.5 28.5T760-680ZM313-280h334q9-26 29-46t44-27v-254q-24-7-44-27t-29-46H313q-9 26-29 46t-44 27v254q24 7 44 27t29 46Z',
+  menu: 'M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z',
+  setup: 'M480-240 640-96l-40-200 160-120-200-80-80-200-80 200-200 80 160 120-40 200 160-144ZM160-280l120-72 72 120-192-48Z',
+  speed: 'M418-340q24 24 62 23.5t56-27.5l224-336-336 224q-27 18-28 55t22 61Zm62-460q59 0 113.5 16.5T696-734l-76 48q-32-17-68-25.5T480-720q-133 0-226.5 93.5T160-400q0 42 11.5 83t32.5 77h552q21-36 32.5-77t11.5-83q0-36-8.5-72T766-540l48-76q33 48 49.5 102.5T880-400q0 57-16.5 110T816-192q-11 17-30 24.5t-40 7.5H214q-21 0-40-7.5T144-192q-31-45-47.5-98T80-400q0-83 31.5-155.5t86-127Q252-737 324.5-768.5T480-800Z'
+};
+
+const path = paths[name] || paths.arrow_forward;
+---
+
+<svg
+  class={className}
+  viewBox="0 -960 960 960"
+  aria-hidden="true"
+  focusable="false"
+  fill="currentColor"
+>
+  <path d={path} />
+</svg>

package/templates/astro/template/src/components/elements/Logo.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+  label?: string;
+  src?: string;
+  alt?: string;
+  className?: string;
+}
+
+const { label = 'Gradial', src = '', alt = '', className = '' } = Astro.props;
+const imageClass = className || 'w-[var(--width-logo-mobile)] md:w-[var(--width-logo)]';
+---
+
+{src ? (
+  <img
+    class={`h-auto max-w-none object-contain ${imageClass}`}
+    src={src}
+    alt={alt || label}
+    loading="eager"
+    decoding="async"
+    style="filter: var(--logo-filter);"
+  />
+) : (
+  <span
+    class={`inline-flex items-center [font-family:var(--font-family-heading)] text-[length:var(--text-size-brand)] font-[var(--font-weight-bold)] leading-none text-fg ${className}`}
+    aria-label={label}
+  >
+    <span>{label}</span>
+  </span>
+)}

package/templates/astro/template/src/components/elements/RemoteImage.astro

@@ -0,0 +1,41 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+  src: string;
+  alt: string;
+  className?: string;
+  width?: number;
+  height?: number;
+  srcset?: string;
+  sizes?: string;
+  loading?: 'lazy' | 'eager';
+}
+
+const { src, alt, className = '', width, height, srcset, sizes, loading = 'lazy' } = Astro.props;
+const isStorybook = !!import.meta.env.STORYBOOK;
+---
+
+{isStorybook ? (
+  <img
+    class={className}
+    src={src}
+    alt={alt}
+    width={width}
+    height={height}
+    srcset={srcset}
+    sizes={sizes}
+    loading={loading}
+    decoding="async"
+  />
+) : (
+  <Image
+    class={className}
+    src={src}
+    alt={alt}
+    width={width || 1200}
+    height={height || 630}
+    sizes={sizes}
+    loading={loading}
+  />
+)}

package/templates/astro/template/src/components/sections/ContainerSection.astro

@@ -0,0 +1,32 @@
+---
+import Container from '../elements/Container.astro';
+import type { RenderChildren, RenderableBlock } from '@gradial/aci/astro';
+
+interface Props {
+  theme?: 'auto' | 'light' | 'dark';
+  className?: string;
+  content?: any[];
+  renderChildren?: RenderChildren;
+}
+
+const { theme = 'auto', className = '', content, renderChildren } = Astro.props;
+const children: RenderableBlock[] = content && renderChildren ? renderChildren(content) : [];
+const buttonCount = content?.filter((b: any) => b.component === 'button').length ?? 0;
+const layout = buttonCount === 1
+  ? 'flex-col items-center'
+  : 'flex-col items-center sm:flex-row sm:justify-center sm:gap-4';
+---
+
+<section class={`theme-${theme} relative overflow-hidden py-[var(--spacing-section-y)] ${className}`}>
+  {theme === 'dark' ? (
+    <div class="pointer-events-none absolute inset-0 bg-[image:var(--gradient-hero-base)] opacity-30"></div>
+  ) : null}
+  <Container className="relative">
+    <div class={`flex ${layout} gap-6 text-center`}>
+      {children.map((child) => {
+        const Comp = child.Component as any;
+        return Comp ? <Comp {...child.props} /> : null;
+      })}
+    </div>
+  </Container>
+</section>

package/templates/astro/template/src/components/sections/FeatureCard.astro

@@ -0,0 +1,23 @@
+---
+import Icon from '../elements/Icon.astro';
+
+interface Props {
+  icon?: string;
+  title: string;
+  description?: string;
+}
+
+const { icon = '', title = '', description = '' } = Astro.props;
+---
+
+<div class="rounded-card border border-[var(--color-edge-space)] bg-[var(--color-space-surface)] p-[var(--spacing-card)] transition-all duration-[var(--transition-duration-fast)] hover:border-[var(--color-edge-space-strong)] hover:bg-[var(--color-space-raised)] hover:shadow-[var(--shadow-card-default)]">
+  {icon ? (
+    <div class="mb-6 flex h-12 w-12 items-center justify-center rounded-button bg-[color-mix(in_srgb,var(--color-brand-blue)_12%,transparent)] text-[var(--color-brand-blue-light)]">
+      <Icon name={icon} className="h-6 w-6" />
+    </div>
+  ) : null}
+  <h3 class="text-[length:var(--text-size-h3)] font-[var(--font-weight-semibold)]">{title}</h3>
+  {description ? (
+    <p class="mt-3 text-[length:var(--text-size-body)] leading-relaxed text-[var(--color-fg-space-muted)]">{description}</p>
+  ) : null}
+</div>

package/templates/astro/template/src/components/sections/FeatureGrid.astro

@@ -0,0 +1,35 @@
+---
+import Container from '../elements/Container.astro';
+import type { RenderChildren, RenderableBlock } from '@gradial/aci/astro';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  features?: any[];
+  renderChildren?: RenderChildren;
+}
+
+const { title = '', subtitle = '', features, renderChildren } = Astro.props;
+const children: RenderableBlock[] = features && renderChildren ? renderChildren(features) : [];
+const count = features?.length ?? 0;
+const cols = count <= 2 ? 'sm:grid-cols-2' : 'sm:grid-cols-2 lg:grid-cols-3';
+---
+
+<section class="theme-dark py-[var(--spacing-section-y)] bg-[var(--color-space-deep)]">
+  <Container>
+    <div class="mb-12 max-w-[var(--max-width-container-narrow)]">
+      {title ? (
+        <h2 class="text-[length:var(--text-size-h2-mobile)] font-[var(--font-weight-bold)] leading-tight md:text-[length:var(--text-size-h2)]">{title}</h2>
+      ) : null}
+      {subtitle ? (
+        <p class="mt-4 text-[length:var(--text-size-body-large)] leading-relaxed text-[var(--color-fg-space-muted)]">{subtitle}</p>
+      ) : null}
+    </div>
+    <div class={`grid gap-6 ${cols}`}>
+      {children.map((child) => {
+        const Comp = child.Component as any;
+        return Comp ? <Comp {...child.props} /> : null;
+      })}
+    </div>
+  </Container>
+</section>

package/templates/astro/template/src/components/sections/HomeHero.astro

@@ -0,0 +1,51 @@
+---
+import Button from '../elements/Button.astro';
+import Container from '../elements/Container.astro';
+import { imageAttrs, type Image } from '@gradial/aci';
+
+interface Props {
+  eyebrow?: string;
+  headline: string;
+  description?: string;
+  ctaLabel: string;
+  ctaHref: string;
+  image?: Image;
+}
+
+const {
+  eyebrow = '',
+  headline,
+  description = '',
+  ctaLabel,
+  ctaHref,
+  image
+} = Astro.props;
+
+const imgAttrs = image ? imageAttrs(image, {
+  class: 'absolute inset-0 h-full w-full object-cover',
+  loading: 'eager',
+  decoding: 'async',
+}) : null;
+---
+
+<section
+  class="theme-dark relative min-h-[var(--height-hero-min)] overflow-hidden bg-black text-fg"
+  aria-label={image?.alt || headline}
+>
+  {imgAttrs && <img {...imgAttrs} />}
+  <div class="absolute inset-0 bg-[image:var(--gradient-hero-overlay)]"></div>
+  <Container className="relative flex min-h-[var(--height-hero-min)] items-center py-[var(--spacing-section-y)]">
+    <div class="max-w-[var(--width-hero-content)]">
+      {eyebrow ? (
+        <p class="mb-5 text-[length:var(--text-size-eyebrow)] font-[var(--font-weight-semibold)] uppercase tracking-[var(--letter-spacing-label)] text-accent-secondary">{eyebrow}</p>
+      ) : null}
+      <h1 class="[font-family:var(--font-family-heading)] text-[length:var(--text-size-h1-mobile)] font-[var(--font-weight-bold)] leading-tight md:text-[length:var(--text-size-h1)]">{headline}</h1>
+      {description ? (
+        <p class="mt-7 max-w-2xl text-[length:var(--text-size-body-large)] leading-body text-fg">{description}</p>
+      ) : null}
+      <div class="mt-9">
+        <Button href={ctaHref} variant="secondary">{ctaLabel}</Button>
+      </div>
+    </div>
+  </Container>
+</section>

package/templates/astro/template/src/components/sections/StatsBar.astro

@@ -0,0 +1,33 @@
+---
+import Container from '../elements/Container.astro';
+
+interface Stat {
+  label: string;
+  value: string;
+  suffix?: string;
+}
+
+interface Props {
+  stats?: Stat[];
+}
+
+const { stats = [] } = Astro.props;
+---
+
+<section class="theme-dark border-y border-[var(--color-edge-space)] bg-[var(--color-space-surface)] py-[var(--spacing-section-y)]">
+  <Container>
+    <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+      {stats.map((stat) => (
+        <div class="text-center">
+          <p class="text-[length:var(--text-size-h2-mobile)] font-[var(--font-weight-bold)] leading-tight text-[var(--color-brand-blue-light)] md:text-[length:var(--text-size-h2)]">
+            {stat.value}
+            {stat.suffix ? <span class="text-[var(--color-launch-orange)]">{stat.suffix}</span> : null}
+          </p>
+          <p class="mt-2 text-[length:var(--text-size-body-small)] font-[var(--font-weight-medium)] text-[var(--color-fg-space-muted)] uppercase tracking-[var(--letter-spacing-label)]">
+            {stat.label}
+          </p>
+        </div>
+      ))}
+    </div>
+  </Container>
+</section>