@refraction-ui/astro 0.13.0 → 0.14.0

package/dist/pricing-card/pricing-card.styles.ts

@@ -0,0 +1,71 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Root pricing card container. The `featured` variant adds a primary-coloured
+ * ring to draw the eye to the recommended plan.
+ */
+export const pricingCardVariants = cva({
+  base: [
+    'relative flex flex-col rounded-2xl border border-border bg-card p-6',
+    'transition-shadow',
+  ].join(' '),
+  variants: {
+    featured: {
+      true: 'ring-1 ring-primary',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    featured: 'false',
+  },
+})
+
+/** "Best value" / "Most popular" badge above the plan name. */
+export const pricingCardBadgeClass =
+  'mb-3 inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary'
+
+/** Plan name (e.g. "Pro", "Starter"). */
+export const pricingCardNameClass = 'text-lg font-bold text-foreground'
+
+/** Main price figure (e.g. "$29", "Free"). */
+export const pricingCardPriceClass = 'text-3xl font-bold text-foreground'
+
+/** Billing period or qualifier (e.g. "/ month", "forever"). */
+export const pricingCardPeriodClass = 'text-sm text-muted-foreground'
+
+/** Short marketing description beneath the price. */
+export const pricingCardDescriptionClass = 'text-sm text-muted-foreground'
+
+/** Unordered list of included features. */
+export const pricingCardFeatureListClass = 'flex flex-col gap-2'
+
+/** A single feature row — tick icon + text. */
+export const pricingCardFeatureRowClass = 'flex items-start gap-2 text-sm text-foreground'
+
+/** Inline check SVG rendered before each feature string. */
+export const pricingCardFeatureTickClass = 'mt-0.5 size-4 shrink-0 text-primary'
+
+/**
+ * CTA button/link that appears at the bottom of the card.
+ *
+ * `default` — filled primary style (call to action on featured plans).
+ * `outline` — bordered secondary style (for non-featured plans).
+ */
+export const pricingCtaVariants = cva({
+  base: [
+    'mt-auto inline-flex w-full items-center justify-center rounded-lg px-4 py-2',
+    'text-sm font-medium transition-colors',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+    'disabled:pointer-events-none disabled:opacity-50',
+  ].join(' '),
+  variants: {
+    variant: {
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      outline:
+        'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})

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

@@ -0,0 +1,37 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+/** CTA button/link visual variant. */
+export type PricingCtaVariant = 'default' | 'outline'
+
+export interface PricingCardOptions {
+  /** Whether this card is highlighted as the featured / recommended plan. */
+  featured?: boolean
+}
+
+export interface PricingCardAPI {
+  /** ARIA props to spread on the card container. */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for styling hooks and CSS selectors. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic props for a pricing plan card.
+ *
+ * Returns `role="group"` (semantically groups the plan's content without
+ * imposing listitem semantics on a standalone card) and a `data-featured`
+ * attribute that adapters can use for conditional ring/highlight styling.
+ */
+export function createPricingCard(options: PricingCardOptions = {}): PricingCardAPI {
+  const { featured = false } = options
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'group',
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-featured': String(featured),
+  }
+
+  return { ariaProps, dataAttributes }
+}

package/dist/section-head/index.ts

@@ -0,0 +1,13 @@
+export {
+  createSectionHead,
+  type SectionHeadAlign,
+  type SectionHeadProps,
+  type SectionHeadAPI,
+} from './section-head.js'
+
+export {
+  sectionHeadVariants,
+  sectionHeadKickerClass,
+  sectionHeadTitleClass,
+  sectionHeadLedeClass,
+} from './section-head.styles.js'

package/dist/section-head/section-head.styles.ts

@@ -0,0 +1,30 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Container variant that controls the alignment of the whole cluster.
+ * Center: auto-margins + text-center + constrained max-width for comfortable
+ * line length. Left: no margin constraint, flush left.
+ */
+export const sectionHeadVariants = cva({
+  base: 'flex flex-col',
+  variants: {
+    align: {
+      center: 'mx-auto text-center max-w-2xl',
+      left: 'text-left',
+    },
+  },
+  defaultVariants: {
+    align: 'center',
+  },
+})
+
+/** Small-caps eyebrow label above the title. */
+export const sectionHeadKickerClass =
+  'text-[11px] uppercase tracking-widest text-primary font-semibold'
+
+/** Primary h2 heading. */
+export const sectionHeadTitleClass =
+  'text-3xl sm:text-4xl font-bold tracking-tight text-foreground'
+
+/** Optional lede paragraph below the title. */
+export const sectionHeadLedeClass = 'mt-3 text-muted-foreground leading-relaxed'

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

@@ -0,0 +1,28 @@
+/** Horizontal alignment of the section head cluster. */
+export type SectionHeadAlign = 'center' | 'left'
+
+export interface SectionHeadProps {
+  /** Alignment of the kicker, title, and lede. */
+  align?: SectionHeadAlign
+}
+
+export interface SectionHeadAPI {
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic data attributes for a SectionHead.
+ *
+ * Returns data-align so adapters can apply styles via CSS or Tailwind
+ * variants. All visual logic (classes, cva) lives in `section-head.styles.ts`.
+ */
+export function createSectionHead(props: SectionHeadProps = {}): SectionHeadAPI {
+  const { align = 'center' } = props
+
+  const dataAttributes: Record<string, string> = {
+    'data-align': align,
+  }
+
+  return { dataAttributes }
+}

package/dist/stat-grid/index.ts

@@ -0,0 +1,13 @@
+export {
+  createStatGrid,
+  statColumns,
+  type StatItem,
+  type StatGridAPI,
+} from './stat-grid.js'
+
+export {
+  statGridVariants,
+  statItemClass,
+  statValueClass,
+  statLabelClass,
+} from './stat-grid.styles.js'

package/dist/stat-grid/stat-grid.styles.ts

@@ -0,0 +1,25 @@
+import { cva } from '../shared/index.ts'
+
+/** Grid container that lays out stat items. */
+export const statGridVariants = cva({
+  base: 'grid gap-8',
+  variants: {
+    columns: {
+      '1': 'grid-cols-1',
+      '2': 'grid-cols-2',
+      '3': 'grid-cols-3',
+    },
+  },
+  defaultVariants: {
+    columns: '3',
+  },
+})
+
+/** Individual stat item container (role="listitem"). */
+export const statItemClass = 'flex flex-col'
+
+/** The large bold value of the stat. */
+export const statValueClass = 'text-xl sm:text-2xl font-bold text-primary'
+
+/** The descriptive label below the value. */
+export const statLabelClass = 'mt-1 text-sm text-muted-foreground leading-snug'

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

@@ -0,0 +1,41 @@
+/** A single stat callout displayed in the grid. */
+export type StatItem = {
+  /** The primary value displayed prominently (e.g. "10k+", "$4.2M"). */
+  value: string
+  /** The descriptive label shown below the value. */
+  label: string
+}
+
+export interface StatGridAPI {
+  /** ARIA attributes to spread on the grid container element (`role="list"`). */
+  ariaProps: { role: 'list' }
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Compute the number of grid columns for a stat grid.
+ *
+ * - 1 item  → 1 column
+ * - 2 items → 2 columns
+ * - 3 or more items → capped at `max` (default 3)
+ */
+export function statColumns(count: number, max = 3): number {
+  if (count <= 0) return 1
+  if (count === 1) return 1
+  if (count === 2) return 2
+  return Math.min(count, max)
+}
+
+/**
+ * Build the framework-agnostic container props for a stat grid.
+ *
+ * Returns `role="list"` and data attributes; adapters spread these onto their
+ * container element and render the items themselves.
+ */
+export function createStatGrid(): StatGridAPI {
+  return {
+    ariaProps: { role: 'list' },
+    dataAttributes: {},
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/astro",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "All Refraction UI Astro components in one package",
   "type": "module",
   "exports": {
@@ -25,13 +25,16 @@
     "@refraction-ui/astro-analytics": "workspace:*",
     "@refraction-ui/astro-animated-text": "workspace:*",
     "@refraction-ui/astro-app-shell": "workspace:*",
+    "@refraction-ui/astro-audience-feature-card": "workspace:*",
     "@refraction-ui/astro-audio-room": "workspace:*",
     "@refraction-ui/astro-auth": "workspace:*",
     "@refraction-ui/astro-avatar": "workspace:*",
     "@refraction-ui/astro-avatar-group": "workspace:*",
     "@refraction-ui/astro-badge": "workspace:*",
     "@refraction-ui/astro-bottom-nav": "workspace:*",
+    "@refraction-ui/astro-brand-network-cell": "workspace:*",
     "@refraction-ui/astro-breadcrumbs": "workspace:*",
+    "@refraction-ui/astro-browser-chrome-mock": "workspace:*",
     "@refraction-ui/astro-button": "workspace:*",
     "@refraction-ui/astro-calendar": "workspace:*",
     "@refraction-ui/astro-call-controls": "workspace:*",
@@ -81,9 +84,12 @@
     "@refraction-ui/astro-live-transcript": "workspace:*",
     "@refraction-ui/astro-logger": "workspace:*",
     "@refraction-ui/astro-markdown-renderer": "workspace:*",
+    "@refraction-ui/astro-marquee-strip": "workspace:*",
+    "@refraction-ui/astro-mastery-bar": "workspace:*",
     "@refraction-ui/astro-mini-map": "workspace:*",
     "@refraction-ui/astro-mobile-nav": "workspace:*",
     "@refraction-ui/astro-navbar": "workspace:*",
+    "@refraction-ui/astro-numbered-steps": "workspace:*",
     "@refraction-ui/astro-otp-input": "workspace:*",
     "@refraction-ui/astro-pagination": "workspace:*",
     "@refraction-ui/astro-password-input": "workspace:*",
@@ -91,6 +97,7 @@
     "@refraction-ui/astro-popover": "workspace:*",
     "@refraction-ui/astro-pre-call-lobby": "workspace:*",
     "@refraction-ui/astro-presence-indicator": "workspace:*",
+    "@refraction-ui/astro-pricing-card": "workspace:*",
     "@refraction-ui/astro-progress-display": "workspace:*",
     "@refraction-ui/astro-radial-gauge": "workspace:*",
     "@refraction-ui/astro-radio": "workspace:*",
@@ -99,6 +106,7 @@
     "@refraction-ui/astro-resizable-layout": "workspace:*",
     "@refraction-ui/astro-rich-editor": "workspace:*",
     "@refraction-ui/astro-search-bar": "workspace:*",
+    "@refraction-ui/astro-section-head": "workspace:*",
     "@refraction-ui/astro-segmented-control": "workspace:*",
     "@refraction-ui/astro-select": "workspace:*",
     "@refraction-ui/astro-separator": "workspace:*",
@@ -108,6 +116,7 @@
     "@refraction-ui/astro-slide-viewer": "workspace:*",
     "@refraction-ui/astro-slider": "workspace:*",
     "@refraction-ui/astro-social-auth-button": "workspace:*",
+    "@refraction-ui/astro-stat-grid": "workspace:*",
     "@refraction-ui/astro-status-indicator": "workspace:*",
     "@refraction-ui/astro-steps": "workspace:*",
     "@refraction-ui/astro-sticky-note": "workspace:*",