@refraction-ui/astro 0.13.0 → 0.14.0

package/dist/brand-network-cell/brand-network-cell.styles.ts

@@ -0,0 +1,46 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Root card container. The `current` variant adds the primary ring that signals
+ * "You are here". Background and border come from semantic tokens so the card
+ * works in both light and dark themes without callers touching class names.
+ */
+export const brandNetworkCellVariants = cva({
+  base: [
+    'relative rounded-xl border border-border bg-card p-4',
+    'flex flex-col gap-3 transition-shadow',
+  ].join(' '),
+  variants: {
+    current: {
+      true: 'ring-1 ring-primary',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    current: 'false',
+  },
+})
+
+/**
+ * Square glyph box — the brand monogram or icon.
+ * Background and text colour are caller-provided via inline `style` (brand
+ * tints vary per product); this class only controls geometry and typography.
+ */
+export const brandNetworkCellGlyphClass =
+  'flex size-10 items-center justify-center rounded-lg text-sm font-bold'
+
+/** Domain / product name row. */
+export const brandNetworkCellDomainClass = 'font-semibold text-foreground'
+
+/**
+ * "You are here" badge shown beside the domain when `current` is true.
+ * Uses semantic token colours so it inherits the active theme automatically.
+ */
+export const brandNetworkCellCurrentBadgeClass =
+  'inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary'
+
+/** Supporting body text below the domain. */
+export const brandNetworkCellBodyClass = 'text-sm text-muted-foreground'
+
+/** Inline link row rendered at the bottom of the card. */
+export const brandNetworkCellLinkClass = 'text-sm text-primary'

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

@@ -0,0 +1,35 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export interface BrandNetworkCellProps {
+  /** Whether this cell represents the current/active product in the network. */
+  current?: boolean
+}
+
+export interface BrandNetworkCellAPI {
+  /** 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 a brand network card.
+ *
+ * Returns `role="group"` plus a `data-current` attribute so adapters and
+ * consumers can style the "You are here" state without coupling to class names.
+ */
+export function createBrandNetworkCell(
+  props: BrandNetworkCellProps = {},
+): BrandNetworkCellAPI {
+  const { current = false } = props
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'group',
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-current': String(current),
+  }
+
+  return { ariaProps, dataAttributes }
+}

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

@@ -0,0 +1,14 @@
+export {
+  createBrandNetworkCell,
+  type BrandNetworkCellProps,
+  type BrandNetworkCellAPI,
+} from './brand-network-cell.js'
+
+export {
+  brandNetworkCellVariants,
+  brandNetworkCellGlyphClass,
+  brandNetworkCellDomainClass,
+  brandNetworkCellCurrentBadgeClass,
+  brandNetworkCellBodyClass,
+  brandNetworkCellLinkClass,
+} from './brand-network-cell.styles.js'

package/dist/browser-chrome-mock/browser-chrome-mock.styles.ts

@@ -0,0 +1,43 @@
+import { cva } from '../shared/index.ts'
+
+/** Outer frame wrapping the chrome bar and content. */
+export const browserChromeMockVariants = cva({
+  base: 'rounded-xl border border-border overflow-hidden bg-card',
+  variants: {},
+  defaultVariants: {},
+})
+
+/** The chrome toolbar row containing dots, URL bar, and optional badge. */
+export const chromeBarClass =
+  'flex items-center gap-2 bg-muted/40 border-b border-border px-3 py-2'
+
+/** A single traffic-light dot. */
+export const trafficDotClass = 'size-2.5 rounded-full border border-border'
+
+/** Centered URL bar. */
+export const urlBarClass = 'flex-1 text-center font-mono text-[11px] text-muted-foreground'
+
+/** Bold domain segment inside the URL bar. */
+export const urlDomainClass = 'font-semibold text-foreground'
+
+/**
+ * Status badge shown in the chrome bar.
+ *
+ * live  → emerald tint (approved exception to semantic tokens)
+ * rec   → destructive tint with a pulsing dot
+ */
+export const statusBadgeVariants = cva({
+  base: 'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
+  variants: {
+    status: {
+      live: 'text-emerald-500 bg-emerald-500/10',
+      rec: 'text-destructive bg-destructive/10',
+    },
+  },
+  defaultVariants: {
+    status: 'live',
+  },
+})
+
+/** Inner content area that receives slotted/children content. */
+export const contentAreaClass = 'p-0'

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

@@ -0,0 +1,52 @@
+/** Recording or live stream status for the browser chrome mock. */
+export type BrowserChromeStatus = 'live' | 'rec'
+
+export interface BrowserChromeMockProps {
+  /** URL to display in the address bar. */
+  url: string
+  /** Optional status badge shown in the chrome bar. */
+  status?: BrowserChromeStatus
+}
+
+export interface BrowserChromeMockAPI {
+  /** ARIA attributes to spread on the group element. */
+  ariaProps: { role: 'group'; 'aria-label': string }
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/** Split a URL into bold domain and normal path segments. */
+export function splitUrl(url: string): { domain: string; path: string } {
+  const slashIndex = url.indexOf('/')
+  if (slashIndex === -1) {
+    return { domain: url, path: '' }
+  }
+  return {
+    domain: url.slice(0, slashIndex),
+    path: url.slice(slashIndex),
+  }
+}
+
+/**
+ * Build the framework-agnostic props for a BrowserChromeMock.
+ *
+ * Returns a `role="group"` aria label plus optional `data-status` so adapters
+ * can hook CSS without duplicating logic.
+ */
+export function createBrowserChromeMock(
+  props: Pick<BrowserChromeMockProps, 'status'> = {},
+): BrowserChromeMockAPI {
+  const { status } = props
+
+  const ariaProps = {
+    role: 'group' as const,
+    'aria-label': 'Browser preview',
+  }
+
+  const dataAttributes: Record<string, string> = {}
+  if (status !== undefined) {
+    dataAttributes['data-status'] = status
+  }
+
+  return { ariaProps, dataAttributes }
+}

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

@@ -0,0 +1,17 @@
+export {
+  createBrowserChromeMock,
+  splitUrl,
+  type BrowserChromeStatus,
+  type BrowserChromeMockProps,
+  type BrowserChromeMockAPI,
+} from './browser-chrome-mock.js'
+
+export {
+  browserChromeMockVariants,
+  chromeBarClass,
+  trafficDotClass,
+  urlBarClass,
+  urlDomainClass,
+  statusBadgeVariants,
+  contentAreaClass,
+} from './browser-chrome-mock.styles.js'

package/dist/index.ts

@@ -5,13 +5,16 @@ export * from './astro-ai/index.ts';
 export * from './astro-analytics/index.ts';
 export * from './astro-animated-text/index.ts';
 export * from './astro-app-shell/index.ts';
+export * from './astro-audience-feature-card/index.ts';
 export * from './astro-audio-room/index.ts';
 export * from './astro-auth/index.ts';
 export * from './astro-avatar/index.ts';
 export * from './astro-avatar-group/index.ts';
 export * from './astro-badge/index.ts';
 export * from './astro-bottom-nav/index.ts';
+export * from './astro-brand-network-cell/index.ts';
 export * from './astro-breadcrumbs/index.ts';
+export * from './astro-browser-chrome-mock/index.ts';
 export * from './astro-button/index.ts';
 export * from './astro-calendar/index.ts';
 export * from './astro-call-controls/index.ts';
@@ -61,9 +64,12 @@ export * from './astro-live-cursors/index.ts';
 export * from './astro-live-transcript/index.ts';
 export * from './astro-logger/index.ts';
 export * from './astro-markdown-renderer/index.ts';
+export * from './astro-marquee-strip/index.ts';
+export * from './astro-mastery-bar/index.ts';
 export * from './astro-mini-map/index.ts';
 export * from './astro-mobile-nav/index.ts';
 export * from './astro-navbar/index.ts';
+export * from './astro-numbered-steps/index.ts';
 export * from './astro-otp-input/index.ts';
 export * from './astro-pagination/index.ts';
 export * from './astro-password-input/index.ts';
@@ -71,6 +77,7 @@ export * from './astro-payment/index.ts';
 export * from './astro-popover/index.ts';
 export * from './astro-pre-call-lobby/index.ts';
 export * from './astro-presence-indicator/index.ts';
+export * from './astro-pricing-card/index.ts';
 export * from './astro-progress-display/index.ts';
 export * from './astro-radial-gauge/index.ts';
 export * from './astro-radio/index.ts';
@@ -79,6 +86,7 @@ export * from './astro-reaction-bar/index.ts';
 export * from './astro-resizable-layout/index.ts';
 export * from './astro-rich-editor/index.ts';
 export * from './astro-search-bar/index.ts';
+export * from './astro-section-head/index.ts';
 export * from './astro-segmented-control/index.ts';
 export * from './astro-select/index.ts';
 export * from './astro-separator/index.ts';
@@ -88,6 +96,7 @@ export * from './astro-skip-to-content/index.ts';
 export * from './astro-slide-viewer/index.ts';
 export * from './astro-slider/index.ts';
 export * from './astro-social-auth-button/index.ts';
+export * from './astro-stat-grid/index.ts';
 export * from './astro-status-indicator/index.ts';
 export * from './astro-steps/index.ts';
 export * from './astro-sticky-note/index.ts';

package/dist/marquee-strip/index.ts

@@ -0,0 +1,14 @@
+export {
+  createMarqueeStrip,
+  type MarqueeStripProps,
+  type MarqueeStripAPI,
+} from './marquee-strip.js'
+
+export {
+  marqueeStripVariants,
+  marqueeStripInnerClass,
+  marqueeStripScrollOuterClass,
+  marqueeStripScrollTrackClass,
+  marqueeStripLabelClass,
+  marqueeStripItemClass,
+} from './marquee-strip.styles.js'

package/dist/marquee-strip/marquee-strip.styles.ts

@@ -0,0 +1,61 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Container — a full-width band with a subtle muted background and border.
+ *
+ * The `scroll` variant switches the inner track from wrapping flex to an
+ * overflow-hidden marquee track. See {@link marqueeStripInnerClass} and
+ * {@link marqueeStripScrollTrackClass} for the corresponding track classes.
+ */
+export const marqueeStripVariants = cva({
+  base: 'w-full bg-muted/30 border-y border-border py-3',
+  variants: {
+    scroll: {
+      true: '',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    scroll: 'false',
+  },
+})
+
+/**
+ * Inner wrapper for static (non-scroll) mode.
+ *
+ * Items wrap naturally so they never overflow on narrow viewports.
+ */
+export const marqueeStripInnerClass =
+  'flex flex-wrap items-center gap-3 px-4'
+
+/**
+ * Outer clip track for scroll mode — hides overflow so the looping animation
+ * is invisible at the edges.
+ */
+export const marqueeStripScrollOuterClass = 'overflow-hidden px-4'
+
+/**
+ * Moving track for scroll mode.
+ *
+ * The `marquee` keyframe must be defined in the consuming app's global CSS
+ * (or via a Tailwind plugin). The canonical definition is:
+ *
+ * ```css
+ * @keyframes marquee {
+ *   from { transform: translateX(0); }
+ *   to   { transform: translateX(-50%); }
+ * }
+ * ```
+ *
+ * Items are duplicated once by the adapter so the strip appears seamless
+ * (the track is effectively 200 % wide and translates to –50 %).
+ */
+export const marqueeStripScrollTrackClass =
+  'flex items-center gap-3 w-max animate-[marquee_30s_linear_infinite]'
+
+/** Strip label — shown before the items (uppercase eyebrow style). */
+export const marqueeStripLabelClass =
+  'text-xs font-semibold uppercase tracking-widest text-muted-foreground shrink-0'
+
+/** Individual item text. */
+export const marqueeStripItemClass = 'text-sm text-foreground'

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

@@ -0,0 +1,35 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export interface MarqueeStripProps {
+  /** Whether to continuously scroll the items. */
+  scroll?: boolean
+}
+
+export interface MarqueeStripAPI {
+  /** ARIA attributes to spread on the container element (`role="group"`). */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic container props for a marquee strip.
+ *
+ * Returns `role="group"` plus a `data-scroll` attribute. Adapters spread these
+ * onto their container and render the label and items themselves. In scroll mode
+ * the adapter is responsible for duplicating items once to achieve a seamless
+ * loop (the CSS `marquee` keyframe translates from 0 to –50%).
+ */
+export function createMarqueeStrip(props: MarqueeStripProps = {}): MarqueeStripAPI {
+  const { scroll = false } = props
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'group',
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-scroll': String(scroll),
+  }
+
+  return { ariaProps, dataAttributes }
+}

package/dist/mastery-bar/index.ts

@@ -0,0 +1,15 @@
+export {
+  clampPercent,
+  createMasteryBar,
+  type MasteryBarSize,
+  type MasteryBarProps,
+  type MasteryBarAPI,
+} from './mastery-bar.js'
+
+export {
+  masteryBarVariants,
+  masteryBarFillVariants,
+  masteryBarLabelClass,
+  masteryBarLeadingLabelClass,
+  masteryBarHeaderClass,
+} from './mastery-bar.styles.js'

package/dist/mastery-bar/mastery-bar.styles.ts

@@ -0,0 +1,45 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Track (outer container): rounded, muted background.
+ * `size` variant controls the track height.
+ */
+export const masteryBarVariants = cva({
+  base: 'w-full overflow-hidden rounded-full bg-muted',
+  variants: {
+    size: {
+      sm: 'h-1.5',
+      md: 'h-2',
+      lg: 'h-3',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+/**
+ * Fill (inner bar): rounded, primary background.
+ * `muted` variant renders at reduced opacity for secondary/inactive states.
+ */
+export const masteryBarFillVariants = cva({
+  base: 'h-full rounded-full bg-primary',
+  variants: {
+    muted: {
+      true: 'bg-primary/70',
+      false: 'bg-primary',
+    },
+  },
+  defaultVariants: {
+    muted: 'false',
+  },
+})
+
+/** Class applied to each text label (leading or trailing). */
+export const masteryBarLabelClass = 'text-xs text-muted-foreground'
+
+/** Class for the leading (left-side) label. */
+export const masteryBarLeadingLabelClass = 'text-xs text-muted-foreground'
+
+/** Header row above the track: leading label on the left, label on the right. */
+export const masteryBarHeaderClass = 'flex justify-between items-baseline mb-1'

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

@@ -0,0 +1,55 @@
+/** Visual size of a mastery bar. */
+export type MasteryBarSize = 'sm' | 'md' | 'lg'
+
+export interface MasteryBarProps {
+  /** 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
+}
+
+export interface MasteryBarAPI {
+  /** ARIA attributes to spread on the progressbar element. */
+  ariaProps: Record<string, string | number | boolean>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Clamp a raw numeric value to the [0, 100] range.
+ *
+ * Values below 0 become 0; values above 100 become 100; NaN is treated as 0.
+ */
+export function clampPercent(value: number): number {
+  if (Number.isNaN(value)) return 0
+  return Math.min(100, Math.max(0, value))
+}
+
+/**
+ * Build the framework-agnostic progressbar props for a mastery bar.
+ *
+ * Returns `role="progressbar"` ARIA attributes plus data attributes; adapters
+ * spread these onto their track element.
+ */
+export function createMasteryBar({ value }: Pick<MasteryBarProps, 'value'>): MasteryBarAPI {
+  const clamped = clampPercent(value)
+
+  const ariaProps: Record<string, string | number | boolean> = {
+    role: 'progressbar',
+    'aria-valuenow': clamped,
+    'aria-valuemin': 0,
+    'aria-valuemax': 100,
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-value': String(clamped),
+  }
+
+  return { ariaProps, dataAttributes }
+}

package/dist/numbered-steps/index.ts

@@ -0,0 +1,16 @@
+export {
+  createNumberedSteps,
+  padOrdinal,
+  stepColumns,
+  type NumberedStepItem,
+  type NumberedStepsProps,
+  type NumberedStepsAPI,
+} from './numbered-steps.js'
+
+export {
+  numberedStepsVariants,
+  numberedStepsItemClass,
+  numberedStepsOrdinalClass,
+  numberedStepsTitleClass,
+  numberedStepsBodyClass,
+} from './numbered-steps.styles.js'

package/dist/numbered-steps/numbered-steps.styles.ts

@@ -0,0 +1,36 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Container grid for the numbered steps. The `columns` variant maps to a
+ * fixed Tailwind grid-cols class; adapters that need a dynamic column count
+ * use `gridTemplateColumns` inline style via {@link stepColumns} instead and
+ * omit this variant.
+ */
+export const numberedStepsVariants = cva({
+  base: 'grid gap-6',
+  variants: {
+    columns: {
+      '2': 'grid-cols-2',
+      '3': 'grid-cols-3',
+      '4': 'grid-cols-4',
+      '5': 'grid-cols-5',
+    },
+  },
+  defaultVariants: {
+    columns: '3',
+  },
+})
+
+/** Individual step card. */
+export const numberedStepsItemClass =
+  'rounded-xl border border-border bg-card p-5'
+
+/** Zero-padded ordinal badge above each step title. */
+export const numberedStepsOrdinalClass = 'font-mono text-sm text-primary'
+
+/** Step title. */
+export const numberedStepsTitleClass = 'mt-2 text-sm font-bold text-foreground'
+
+/** Step body copy. */
+export const numberedStepsBodyClass =
+  'mt-1 text-xs text-muted-foreground leading-relaxed'

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

@@ -0,0 +1,64 @@
+/** A single step item in the numbered steps grid. */
+export type NumberedStepItem = {
+  /** Step title displayed prominently below the ordinal badge. */
+  title: string
+  /** Step body copy displayed below the title. */
+  body: string
+}
+
+export interface NumberedStepsProps {
+  /** The step items to display. */
+  items: NumberedStepItem[]
+  /**
+   * Number of grid columns. When omitted, defaults to clamping the item count
+   * to the 2–5 range via {@link stepColumns}.
+   */
+  columns?: number
+}
+
+export interface NumberedStepsAPI {
+  /** ARIA attributes to spread on the container element (`role="list"`). */
+  ariaProps: { role: 'list' }
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Zero-pad a 1-indexed ordinal to at least two digits.
+ *
+ * @example
+ * padOrdinal(1)  // '01'
+ * padOrdinal(10) // '10'
+ */
+export function padOrdinal(n: number): string {
+  return String(n).padStart(2, '0')
+}
+
+/**
+ * Derive the number of grid columns from the item count.
+ * Clamps the count to the 2–5 range.
+ *
+ * @example
+ * stepColumns(3) // 3
+ * stepColumns(1) // 2
+ * stepColumns(6) // 5
+ */
+export function stepColumns(count: number): number {
+  return Math.min(5, Math.max(2, count))
+}
+
+/**
+ * Build the framework-agnostic container props for a numbered-steps grid.
+ *
+ * Returns `role="list"` plus data attributes; adapters spread these onto their
+ * container and render each step as a `role="listitem"`.
+ */
+export function createNumberedSteps(): NumberedStepsAPI {
+  const ariaProps = { role: 'list' } as const
+
+  const dataAttributes: Record<string, string> = {
+    'data-component': 'numbered-steps',
+  }
+
+  return { ariaProps, dataAttributes }
+}

package/dist/pricing-card/index.ts

@@ -0,0 +1,19 @@
+export {
+  createPricingCard,
+  type PricingCtaVariant,
+  type PricingCardOptions,
+  type PricingCardAPI,
+} from './pricing-card.js'
+
+export {
+  pricingCardVariants,
+  pricingCardBadgeClass,
+  pricingCardNameClass,
+  pricingCardPriceClass,
+  pricingCardPeriodClass,
+  pricingCardDescriptionClass,
+  pricingCardFeatureListClass,
+  pricingCardFeatureRowClass,
+  pricingCardFeatureTickClass,
+  pricingCtaVariants,
+} from './pricing-card.styles.js'