@refraction-ui/astro 0.13.0 → 0.14.0

package/dist/astro-audience-feature-card/AudienceFeatureCard.astro

@@ -0,0 +1,53 @@
+---
+import {
+  createAudienceFeatureCard,
+  audienceFeatureCardVariants,
+  audienceFeatureCardKickerClass,
+  audienceFeatureCardTitleClass,
+  audienceFeatureCardBodyClass,
+  audienceFeatureCardFooterClass,
+} from '../audience-feature-card/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Kicker text displayed above the title (e.g. "For teams"). */
+  kicker?: string
+  /** Main title — required (or pass content via default slot). */
+  title?: string
+  /** Body copy. */
+  body?: string
+  /** Footer string (alternative to the named footer slot). */
+  footer?: string
+  class?: string
+}
+
+const {
+  kicker,
+  title,
+  body,
+  footer,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createAudienceFeatureCard()
+---
+
+<div
+  class={cn(audienceFeatureCardVariants(), className)}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {kicker && <p class={audienceFeatureCardKickerClass}>{kicker}</p>}
+  {title
+    ? <p class={audienceFeatureCardTitleClass}>{title}</p>
+    : <p class={audienceFeatureCardTitleClass}><slot /></p>
+  }
+  {body && <p class={audienceFeatureCardBodyClass}>{body}</p>}
+  {(footer || Astro.slots.has('footer')) && (
+    <div class={audienceFeatureCardFooterClass}>
+      {footer ?? <slot name="footer" />}
+    </div>
+  )}
+</div>

package/dist/astro-audience-feature-card/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-brand-network-cell/BrandNetworkCell.astro

@@ -0,0 +1,77 @@
+---
+import {
+  createBrandNetworkCell,
+  brandNetworkCellVariants,
+  brandNetworkCellGlyphClass,
+  brandNetworkCellDomainClass,
+  brandNetworkCellCurrentBadgeClass,
+  brandNetworkCellBodyClass,
+  brandNetworkCellLinkClass,
+} from '../brand-network-cell/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Single character or short string used as the brand monogram. */
+  glyph: string
+  /** CSS colour value for the glyph box background (brand tint). Applied via inline style. */
+  glyphBg?: string
+  /** CSS colour value for the glyph text (brand tint). Applied via inline style. */
+  glyphColor?: string
+  /** Primary identifier shown below the glyph (product domain or name). */
+  domain: string
+  /** Supporting description text. */
+  body: string
+  /** When provided, renders a link at the bottom of the card. */
+  href?: string
+  /** Label for the link. Defaults to "Visit →". */
+  linkLabel?: string
+  /** Marks this cell as the current/active product in the network. */
+  current?: boolean
+}
+
+const {
+  glyph,
+  glyphBg,
+  glyphColor,
+  domain,
+  body,
+  href,
+  linkLabel,
+  current = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createBrandNetworkCell({ current })
+const glyphStyle = `${glyphBg ? `background:${glyphBg};` : ''}${glyphColor ? `color:${glyphColor};` : ''}`
+---
+
+<div
+  class={cn(brandNetworkCellVariants({ current: current ? 'true' : 'false' }), className)}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  <!-- Glyph box — brand tint via inline style -->
+  <div class={brandNetworkCellGlyphClass} style={glyphStyle} aria-hidden="true">
+    {glyph}
+  </div>
+
+  <!-- Domain row -->
+  <div class="flex items-center gap-2">
+    <span class={brandNetworkCellDomainClass}>{domain}</span>
+    {current && (
+      <span class={brandNetworkCellCurrentBadgeClass}>You are here</span>
+    )}
+  </div>
+
+  <!-- Body -->
+  <p class={brandNetworkCellBodyClass}>{body}</p>
+
+  <!-- Optional link -->
+  {href && (
+    <a href={href} class={brandNetworkCellLinkClass}>
+      {linkLabel ?? 'Visit →'}
+    </a>
+  )}
+</div>

package/dist/astro-brand-network-cell/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-browser-chrome-mock/BrowserChromeMock.astro

@@ -0,0 +1,62 @@
+---
+import {
+  createBrowserChromeMock,
+  splitUrl,
+  browserChromeMockVariants,
+  chromeBarClass,
+  trafficDotClass,
+  urlBarClass,
+  urlDomainClass,
+  statusBadgeVariants,
+  contentAreaClass,
+  type BrowserChromeStatus,
+} from '../browser-chrome-mock/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** URL to display in the address bar. Bold domain + normal path. */
+  url: string
+  /** Optional status badge shown in the chrome bar. */
+  status?: BrowserChromeStatus
+}
+
+const { url, status, class: className, ...rest } = Astro.props
+
+const { ariaProps, dataAttributes } = createBrowserChromeMock({ status })
+const { domain, path } = splitUrl(url)
+
+const trafficDots = ['bg-red-400', 'bg-yellow-400', 'bg-green-400'] as const
+---
+
+<div class={cn(browserChromeMockVariants(), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  <!-- Chrome toolbar -->
+  <div class={chromeBarClass}>
+    <!-- Traffic-light dots -->
+    <div class="flex items-center gap-1.5 shrink-0">
+      {trafficDots.map((color) => (
+        <span class={`${trafficDotClass} ${color}`} />
+      ))}
+    </div>
+
+    <!-- URL bar -->
+    <div class={urlBarClass}>
+      <span class={urlDomainClass}>{domain}</span>
+      {path && <span>{path}</span>}
+    </div>
+
+    <!-- Status badge -->
+    {status && (
+      <div class={statusBadgeVariants({ status })}>
+        {status === 'rec' && (
+          <span class="size-1.5 rounded-full bg-destructive animate-pulse" />
+        )}
+        {status}
+      </div>
+    )}
+  </div>
+
+  <!-- Content area -->
+  <div class={contentAreaClass}>
+    <slot />
+  </div>
+</div>

package/dist/astro-browser-chrome-mock/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-marquee-strip/MarqueeStrip.astro

@@ -0,0 +1,63 @@
+---
+import {
+  createMarqueeStrip,
+  marqueeStripVariants,
+  marqueeStripInnerClass,
+  marqueeStripScrollOuterClass,
+  marqueeStripScrollTrackClass,
+  marqueeStripLabelClass,
+  marqueeStripItemClass,
+} from '../marquee-strip/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Eyebrow label shown before the items (static mode only). */
+  label?: string
+  /** List of text items to display. */
+  items: string[]
+  /**
+   * When `true` the items scroll continuously using a CSS `marquee` keyframe.
+   * Define the keyframe in your global CSS:
+   *
+   * ```css
+   * @keyframes marquee {
+   *   from { transform: translateX(0); }
+   *   to   { transform: translateX(-50%); }
+   * }
+   * ```
+   *
+   * @default false
+   */
+  scroll?: boolean
+}
+
+const {
+  label,
+  items,
+  scroll = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createMarqueeStrip({ scroll })
+const scrollVariant = scroll ? 'true' : 'false'
+---
+
+<div class={cn(marqueeStripVariants({ scroll: scrollVariant }), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  {scroll ? (
+    <div class={marqueeStripScrollOuterClass}>
+      <div class={marqueeStripScrollTrackClass}>
+        {[...items, ...items].map((item) => (
+          <span class={marqueeStripItemClass}>{item}</span>
+        ))}
+      </div>
+    </div>
+  ) : (
+    <div class={marqueeStripInnerClass}>
+      {label && <span class={marqueeStripLabelClass}>{label}</span>}
+      {items.map((item) => (
+        <span class={marqueeStripItemClass}>{item}</span>
+      ))}
+    </div>
+  )}
+</div>

package/dist/astro-marquee-strip/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-mastery-bar/MasteryBar.astro

@@ -0,0 +1,56 @@
+---
+import {
+  clampPercent,
+  createMasteryBar,
+  masteryBarVariants,
+  masteryBarFillVariants,
+  masteryBarLabelClass,
+  masteryBarLeadingLabelClass,
+  masteryBarHeaderClass,
+  type MasteryBarSize,
+} from '../mastery-bar/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Progress value (0–100). Values outside this range are clamped. */
+  value: number
+  /** Label shown on the right side of the header row. */
+  label?: string
+  /** Label shown on the left side of the header row. */
+  leadingLabel?: string
+  /** Visual size of the track. */
+  size?: MasteryBarSize
+  /** Renders the fill at reduced opacity to indicate a muted/secondary state. */
+  muted?: boolean
+}
+
+const {
+  value,
+  label,
+  leadingLabel,
+  size = 'md',
+  muted = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+const clamped = clampPercent(value)
+const { ariaProps, dataAttributes } = createMasteryBar({ value })
+const hasHeader = leadingLabel != null || label != null
+const fillWidth = `${clamped}%`
+---
+
+<div class={cn('w-full', className)} {...rest}>
+  {hasHeader && (
+    <div class={masteryBarHeaderClass}>
+      {leadingLabel != null && <span class={masteryBarLeadingLabelClass}>{leadingLabel}</span>}
+      {label != null && <span class={masteryBarLabelClass}>{label}</span>}
+    </div>
+  )}
+  <div class={masteryBarVariants({ size })} {...ariaProps} {...dataAttributes}>
+    <div
+      class={masteryBarFillVariants({ muted: muted ? 'true' : 'false' })}
+      style={`width:${fillWidth}`}
+    />
+  </div>
+</div>

package/dist/astro-mastery-bar/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-numbered-steps/NumberedSteps.astro

@@ -0,0 +1,47 @@
+---
+import {
+  createNumberedSteps,
+  padOrdinal,
+  stepColumns,
+  numberedStepsItemClass,
+  numberedStepsOrdinalClass,
+  numberedStepsTitleClass,
+  numberedStepsBodyClass,
+  type NumberedStepItem,
+} from '../numbered-steps/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The step items to display (3–5 recommended). */
+  items: NumberedStepItem[]
+  /**
+   * Override the number of grid columns. Defaults to clamping item count to
+   * 2–5 via `stepColumns`.
+   */
+  columns?: number
+}
+
+const { items, columns, class: className, ...rest } = Astro.props
+
+const cols = columns ?? stepColumns(items.length)
+const gridStyle = `grid-template-columns:repeat(${cols},minmax(0,1fr))`
+const { ariaProps, dataAttributes } = createNumberedSteps()
+---
+
+<div
+  class={cn('grid gap-6', className)}
+  style={gridStyle}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {
+    items.map((item, index) => (
+      <div role="listitem" class={numberedStepsItemClass}>
+        <span class={numberedStepsOrdinalClass}>{padOrdinal(index + 1)}</span>
+        <p class={numberedStepsTitleClass}>{item.title}</p>
+        <p class={numberedStepsBodyClass}>{item.body}</p>
+      </div>
+    ))
+  }
+</div>

package/dist/astro-numbered-steps/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-pricing-card/PricingCard.astro

@@ -0,0 +1,114 @@
+---
+import {
+  createPricingCard,
+  pricingCardVariants,
+  pricingCardBadgeClass,
+  pricingCardNameClass,
+  pricingCardPriceClass,
+  pricingCardPeriodClass,
+  pricingCardDescriptionClass,
+  pricingCardFeatureListClass,
+  pricingCardFeatureRowClass,
+  pricingCardFeatureTickClass,
+  pricingCtaVariants,
+  type PricingCtaVariant,
+} from '../pricing-card/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Optional badge label shown above the plan name (e.g. "Most popular"). */
+  badge?: string
+  /** Plan name (e.g. "Pro", "Starter"). */
+  name: string
+  /** Price string (e.g. "$29", "Free"). */
+  price: string
+  /** Billing period or qualifier (e.g. "/ month"). */
+  period?: string
+  /** Short marketing description. */
+  description?: string
+  /** List of included features to render as a checklist. */
+  features: string[]
+  /** CTA button/link label. */
+  cta: string
+  /** Visual variant for the CTA. */
+  ctaVariant?: PricingCtaVariant
+  /** When provided, the CTA renders as an `<a>` tag. */
+  ctaHref?: string
+  /** Highlights the card with a primary ring. */
+  featured?: boolean
+}
+
+const {
+  badge,
+  name,
+  price,
+  period,
+  description,
+  features,
+  cta,
+  ctaVariant = 'default',
+  ctaHref,
+  featured = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createPricingCard({ featured })
+const ctaClass = pricingCtaVariants({ variant: ctaVariant })
+---
+
+<div
+  class={cn(pricingCardVariants({ featured: featured ? 'true' : 'false' }), className)}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {badge && <span class={pricingCardBadgeClass}>{badge}</span>}
+
+  <p class={pricingCardNameClass}>{name}</p>
+
+  <div class="mt-4 flex items-baseline gap-1">
+    <span class={pricingCardPriceClass}>{price}</span>
+    {period && <span class={pricingCardPeriodClass}>{period}</span>}
+  </div>
+
+  {description && <p class={`mt-2 ${pricingCardDescriptionClass}`}>{description}</p>}
+
+  <ul class={`mt-6 ${pricingCardFeatureListClass}`}>
+    {
+      features.map((feature) => (
+        <li class={pricingCardFeatureRowClass}>
+          <svg
+            class={pricingCardFeatureTickClass}
+            viewBox="0 0 16 16"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path
+              d="M3 8l3.5 3.5L13 4.5"
+              stroke="currentColor"
+              stroke-width="1.75"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          {feature}
+        </li>
+      ))
+    }
+  </ul>
+
+  <div class="mt-6">
+    {
+      ctaHref ? (
+        <a href={ctaHref} class={ctaClass}>
+          {cta}
+        </a>
+      ) : (
+        <button type="button" class={ctaClass}>
+          {cta}
+        </button>
+      )
+    }
+  </div>
+</div>

package/dist/astro-pricing-card/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-section-head/SectionHead.astro

@@ -0,0 +1,44 @@
+---
+import {
+  createSectionHead,
+  sectionHeadVariants,
+  sectionHeadKickerClass,
+  sectionHeadTitleClass,
+  sectionHeadLedeClass,
+  type SectionHeadAlign,
+} from '../section-head/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Optional eyebrow / kicker rendered above the title. */
+  kicker?: string
+  /** Primary heading content. Falls back to the default slot when not set. */
+  title?: string
+  /** Optional lede paragraph rendered below the title. */
+  lede?: string
+  /** Horizontal alignment of the cluster. */
+  align?: SectionHeadAlign
+  /** Override the heading element rendered for the title. Defaults to `h2`. */
+  as?: 'h1' | 'h2' | 'h3'
+}
+
+const {
+  kicker,
+  title,
+  lede,
+  align = 'center',
+  as: Tag = 'h2',
+  class: className,
+  ...rest
+} = Astro.props
+
+const { dataAttributes } = createSectionHead({ align })
+---
+
+<div class={cn(sectionHeadVariants({ align }), className)} {...dataAttributes} {...rest}>
+  {kicker && <p class={sectionHeadKickerClass}>{kicker}</p>}
+  <Tag class={sectionHeadTitleClass}>
+    {title ?? <slot />}
+  </Tag>
+  {lede && <p class={sectionHeadLedeClass}>{lede}</p>}
+</div>

package/dist/astro-section-head/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-stat-grid/StatGrid.astro

@@ -0,0 +1,46 @@
+---
+import {
+  createStatGrid,
+  statColumns,
+  statGridVariants,
+  statItemClass,
+  statValueClass,
+  statLabelClass,
+  type StatItem,
+} from '../stat-grid/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The stat items to display in the grid (value and label as strings). */
+  items: StatItem[]
+  /**
+   * Number of columns. Defaults to statColumns(items.length):
+   * 1 item → 1, 2 items → 2, 3+ items → 3.
+   */
+  columns?: number
+}
+
+const { items, columns, class: className, ...rest } = Astro.props
+
+const cols = columns ?? statColumns(items.length)
+const colsKey = String(cols) as '1' | '2' | '3'
+const { ariaProps, dataAttributes } = createStatGrid()
+const gridStyle = `grid-template-columns:repeat(${cols}, 1fr)`
+---
+
+<div
+  class={cn(statGridVariants({ columns: colsKey }), className)}
+  style={gridStyle}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {
+    items.map((item) => (
+      <div role="listitem" class={statItemClass}>
+        <span class={statValueClass}>{item.value}</span>
+        <span class={statLabelClass}>{item.label}</span>
+      </div>
+    ))
+  }
+</div>

package/dist/astro-stat-grid/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/audience-feature-card/audience-feature-card.styles.ts

@@ -0,0 +1,23 @@
+import { cva } from '../shared/index.ts'
+
+/** Container — full-height flex column so footers align across a row. */
+export const audienceFeatureCardVariants = cva({
+  base: 'flex h-full flex-col rounded-xl border border-border bg-card p-5',
+  variants: {},
+  defaultVariants: {},
+})
+
+/** Kicker text above the title. */
+export const audienceFeatureCardKickerClass =
+  'text-[10px] uppercase tracking-widest text-primary font-semibold'
+
+/** Main title. */
+export const audienceFeatureCardTitleClass =
+  'mt-2 text-lg font-bold text-foreground'
+
+/** Body copy. */
+export const audienceFeatureCardBodyClass =
+  'mt-1 text-sm text-muted-foreground leading-relaxed'
+
+/** Footer area — pushed to bottom via mt-auto. */
+export const audienceFeatureCardFooterClass = 'mt-auto pt-4 text-xs'

package/dist/audience-feature-card/audience-feature-card.ts

@@ -0,0 +1,39 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export interface AudienceFeatureCardProps {
+  /** Kicker text displayed above the title (e.g. "For teams"). */
+  kicker?: string
+  /** Main title — required. */
+  title: string
+  /** Body copy. */
+  body: string
+  /** Footer content (optional). */
+  footer?: string
+}
+
+export interface AudienceFeatureCardAPI {
+  /** ARIA attributes to spread on the group element (`role="group"`). */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic group props for an audience feature card.
+ *
+ * Returns `role="group"` plus data attributes; adapters spread these onto
+ * their container and render the kicker, title, body, and footer slots.
+ */
+export function createAudienceFeatureCard(
+  _props: Partial<AudienceFeatureCardProps> = {},
+): AudienceFeatureCardAPI {
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'group',
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-component': 'audience-feature-card',
+  }
+
+  return { ariaProps, dataAttributes }
+}

package/dist/audience-feature-card/index.ts

@@ -0,0 +1,13 @@
+export {
+  createAudienceFeatureCard,
+  type AudienceFeatureCardProps,
+  type AudienceFeatureCardAPI,
+} from './audience-feature-card.js'
+
+export {
+  audienceFeatureCardVariants,
+  audienceFeatureCardKickerClass,
+  audienceFeatureCardTitleClass,
+  audienceFeatureCardBodyClass,
+  audienceFeatureCardFooterClass,
+} from './audience-feature-card.styles.js'