@refraction-ui/astro 0.13.0 → 0.15.0

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/slot-picker/index.ts

@@ -0,0 +1,18 @@
+export {
+  slotsForDay,
+  isSlotSelected,
+  createSlotPicker,
+  type SlotDay,
+  type SlotSelection,
+  type SlotPickerAPI,
+} from './slot-picker.js'
+
+export {
+  slotPickerVariants,
+  slotPickerDayRowClass,
+  slotPickerDayVariants,
+  slotPickerGridClass,
+  slotPickerSlotVariants,
+  slotPickerSectionLabelClass,
+  slotPickerTimezoneClass,
+} from './slot-picker.styles.js'

package/dist/slot-picker/slot-picker.styles.ts

@@ -0,0 +1,70 @@
+import { cva } from '../shared/index.ts'
+
+/** Root wrapper for the entire slot picker (day row + slots grid). */
+export const slotPickerVariants = cva({
+  base: 'flex flex-col gap-4',
+  variants: {},
+  defaultVariants: {},
+})
+
+/** Scrollable row of day chips. */
+export const slotPickerDayRowClass = 'flex items-center gap-2 overflow-x-auto pb-1'
+
+/**
+ * Individual day chip.
+ *
+ * `selected` → primary treatment; `unselected` → card with border.
+ */
+export const slotPickerDayVariants = cva({
+  base: [
+    'inline-flex flex-col items-center justify-center rounded-lg px-3 py-2 min-w-[3.5rem]',
+    'text-sm font-medium cursor-pointer transition-colors',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    'disabled:pointer-events-none disabled:opacity-50',
+  ].join(' '),
+  variants: {
+    selected: {
+      true: 'bg-primary text-primary-foreground',
+      false: 'bg-card border border-input text-foreground hover:bg-muted',
+    },
+  },
+  defaultVariants: {
+    selected: 'false',
+  },
+})
+
+/** Grid that holds the time-slot buttons. */
+export const slotPickerGridClass = 'grid grid-cols-3 gap-2 sm:grid-cols-4'
+
+/**
+ * Individual time-slot button.
+ *
+ * `selected` → primary; `disabled` → dimmed regardless of selection.
+ */
+export const slotPickerSlotVariants = cva({
+  base: [
+    'inline-flex items-center justify-center rounded-md border px-3 py-2 text-sm font-medium',
+    'transition-colors cursor-pointer',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+  ].join(' '),
+  variants: {
+    selected: {
+      true: 'bg-primary text-primary-foreground border-primary',
+      false: 'bg-card border-input text-foreground hover:bg-muted',
+    },
+    disabled: {
+      true: 'opacity-40 pointer-events-none',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    selected: 'false',
+    disabled: 'false',
+  },
+})
+
+/** Section label above the day row or slot grid (e.g. "Pick a day"). */
+export const slotPickerSectionLabelClass = 'text-sm font-semibold text-foreground'
+
+/** Timezone label rendered beside the "Pick a time" heading. */
+export const slotPickerTimezoneClass = 'text-xs text-muted-foreground ml-2'

package/dist/slot-picker/slot-picker.ts

@@ -0,0 +1,64 @@
+/** A single day chip shown in the day-selector row. */
+export type SlotDay = {
+  /** Unique identifier for the day (e.g. "2024-06-14"). */
+  id: string
+  /** Short weekday label (e.g. "Fri"). */
+  weekday: string
+  /** Day-of-month label (e.g. "14" or 14). */
+  dayNum: string | number
+}
+
+/** The currently-selected day + time slot pair. */
+export type SlotSelection = {
+  /** The `id` of the selected day. */
+  dayId: string
+  /** The selected time slot string (e.g. "10:00 AM"). */
+  slot: string
+}
+
+/**
+ * Return the list of available time slots for a given day.
+ * Returns an empty array when `dayId` has no entry in `slotsByDay`.
+ */
+export function slotsForDay(
+  slotsByDay: Record<string, string[]>,
+  dayId: string,
+): string[] {
+  return slotsByDay[dayId] ?? []
+}
+
+/**
+ * Check whether a specific slot in a specific day is currently selected.
+ */
+export function isSlotSelected(
+  value: SlotSelection | undefined,
+  dayId: string,
+  slot: string,
+): boolean {
+  return value?.dayId === dayId && value?.slot === slot
+}
+
+export interface SlotPickerAPI {
+  /** ARIA attributes to spread on the root group element. */
+  ariaProps: { role: 'group'; 'aria-label': string }
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic root props for a slot picker.
+ *
+ * Returns `role="group"` with an accessible label and data attributes.
+ * Adapters spread these onto their container element.
+ */
+export function createSlotPicker(): SlotPickerAPI {
+  return {
+    ariaProps: {
+      role: 'group',
+      'aria-label': 'Pick a time',
+    },
+    dataAttributes: {
+      'data-component': 'slot-picker',
+    },
+  }
+}

package/dist/sortable-list/index.ts

@@ -0,0 +1,13 @@
+export {
+  reorder,
+  getNextOrderIndex,
+  createSortableList,
+  type SortableListAPI,
+} from './sortable-list.js'
+
+export {
+  sortableListVariants,
+  sortableListRowVariants,
+  sortableListGripClass,
+  sortableListContentClass,
+} from './sortable-list.styles.js'

package/dist/sortable-list/sortable-list.styles.ts

@@ -0,0 +1,42 @@
+import { cva } from '../shared/index.ts'
+
+/** The outer list container. */
+export const sortableListVariants = cva({
+  base: 'flex flex-col gap-1 w-full',
+  variants: {
+    disabled: {
+      true: 'opacity-50 pointer-events-none',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    disabled: 'false',
+  },
+})
+
+/**
+ * A single row in the list. The `dragging` variant visually lifts the row
+ * while it is being dragged.
+ */
+export const sortableListRowVariants = cva({
+  base: [
+    'flex items-center gap-3 rounded-md border border-border bg-card px-3 py-2',
+    'transition-opacity',
+  ].join(' '),
+  variants: {
+    dragging: {
+      true: 'opacity-50 ring-2 ring-ring',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    dragging: 'false',
+  },
+})
+
+/** The drag-grip handle button/icon area. */
+export const sortableListGripClass =
+  'cursor-grab text-muted-foreground shrink-0 flex items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded'
+
+/** Wraps the caller-supplied row content (fills remaining space). */
+export const sortableListContentClass = 'flex-1 min-w-0'

package/dist/sortable-list/sortable-list.ts

@@ -0,0 +1,90 @@
+/**
+ * Pure, JSX-free headless logic for a drag-to-reorder vertical list.
+ *
+ * Three exports:
+ *   - `reorder`           — immutable array move, clamped
+ *   - `getNextOrderIndex` — keyboard navigation rule (clamped, no wrap)
+ *   - `createSortableList` — builds ARIA props for the list container
+ */
+
+export interface SortableListAPI {
+  /** ARIA attributes to spread on the list element. */
+  ariaProps: Record<string, string | number | boolean>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Move an item from index `from` to index `to` in `items`, returning a new
+ * array. Out-of-range indices return a shallow copy of the original array
+ * (no mutation, no throw).
+ */
+export function reorder<T>(items: T[], from: number, to: number): T[] {
+  const len = items.length
+  if (
+    len === 0 ||
+    from < 0 ||
+    from >= len ||
+    to < 0 ||
+    to >= len ||
+    from === to
+  ) {
+    return [...items]
+  }
+  const result = [...items]
+  const [moved] = result.splice(from, 1)
+  result.splice(to, 0, moved)
+  return result
+}
+
+/**
+ * Keyboard reorder navigation — returns the next index for a given key.
+ *
+ * - ArrowUp / ArrowLeft   → max(0, current - 1)
+ * - ArrowDown / ArrowRight → min(count - 1, current + 1)
+ * - Home → 0
+ * - End → count - 1
+ * - All other keys / empty list → current (clamped to valid range)
+ *
+ * Never wraps.
+ */
+export function getNextOrderIndex(
+  current: number,
+  key: string,
+  count: number,
+): number {
+  if (count <= 0) return current
+  const clamped = Math.max(0, Math.min(current, count - 1))
+
+  switch (key) {
+    case 'ArrowUp':
+    case 'ArrowLeft':
+      return Math.max(0, clamped - 1)
+    case 'ArrowDown':
+    case 'ArrowRight':
+      return Math.min(count - 1, clamped + 1)
+    case 'Home':
+      return 0
+    case 'End':
+      return count - 1
+    default:
+      return clamped
+  }
+}
+
+/**
+ * Build the framework-agnostic props for a sortable list container.
+ *
+ * Returns `role="list"` so screen readers announce the number of items
+ * correctly, plus a `data-component` hook for styling.
+ */
+export function createSortableList(): SortableListAPI {
+  return {
+    ariaProps: {
+      role: 'list',
+    },
+    dataAttributes: {
+      'data-component': 'sortable-list',
+    },
+  }
+}

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.15.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:*",
@@ -73,6 +76,7 @@
     "@refraction-ui/astro-input": "workspace:*",
     "@refraction-ui/astro-input-group": "workspace:*",
     "@refraction-ui/astro-install-prompt": "workspace:*",
+    "@refraction-ui/astro-kanban-board": "workspace:*",
     "@refraction-ui/astro-keyboard-shortcut": "workspace:*",
     "@refraction-ui/astro-language-selector": "workspace:*",
     "@refraction-ui/astro-link-card": "workspace:*",
@@ -81,9 +85,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 +98,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 +107,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:*",
@@ -107,7 +116,10 @@
     "@refraction-ui/astro-skip-to-content": "workspace:*",
     "@refraction-ui/astro-slide-viewer": "workspace:*",
     "@refraction-ui/astro-slider": "workspace:*",
+    "@refraction-ui/astro-slot-picker": "workspace:*",
     "@refraction-ui/astro-social-auth-button": "workspace:*",
+    "@refraction-ui/astro-sortable-list": "workspace:*",
+    "@refraction-ui/astro-stat-grid": "workspace:*",
     "@refraction-ui/astro-status-indicator": "workspace:*",
     "@refraction-ui/astro-steps": "workspace:*",
     "@refraction-ui/astro-sticky-note": "workspace:*",