@refraction-ui/astro 0.13.0 → 0.15.0

package/dist/astro-slot-picker/SlotPicker.astro

@@ -0,0 +1,105 @@
+---
+import {
+  createSlotPicker,
+  slotsForDay,
+  isSlotSelected,
+  slotPickerVariants,
+  slotPickerDayRowClass,
+  slotPickerDayVariants,
+  slotPickerGridClass,
+  slotPickerSlotVariants,
+  slotPickerSectionLabelClass,
+  slotPickerTimezoneClass,
+  type SlotDay,
+  type SlotSelection,
+} from '../slot-picker/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The list of days to show as chips. */
+  days: SlotDay[]
+  /** Map of dayId → available time slot strings. */
+  slotsByDay: Record<string, string[]>
+  /** The currently-selected day (determines which slots are shown). */
+  selectedDayId?: string
+  /** The full selection (day + slot) used to highlight the selected slot. */
+  value?: SlotSelection
+  /** Label shown beside the "Pick a time" heading (e.g. "Eastern Time"). */
+  timezoneLabel?: string
+  /** Slot strings that should be rendered as disabled. */
+  disabledSlots?: string[]
+}
+
+const {
+  days,
+  slotsByDay,
+  selectedDayId,
+  value,
+  timezoneLabel,
+  disabledSlots = [],
+  class: className,
+  ...rest
+} = Astro.props
+
+const currentSlots = selectedDayId ? slotsForDay(slotsByDay, selectedDayId) : []
+const { ariaProps, dataAttributes } = createSlotPicker()
+---
+
+<div class={cn(slotPickerVariants(), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  <!-- Day row -->
+  <div>
+    <p class={slotPickerSectionLabelClass}>Pick a day</p>
+    <div role="radiogroup" aria-label="Pick a day" class={`${slotPickerDayRowClass} mt-2`}>
+      {
+        days.map((day) => {
+          const isSelected = selectedDayId === day.id
+          return (
+            <button
+              type="button"
+              role="radio"
+              aria-checked={isSelected}
+              data-state={isSelected ? 'checked' : 'unchecked'}
+              class={slotPickerDayVariants({ selected: isSelected ? 'true' : 'false' })}
+            >
+              <span class="text-xs">{day.weekday}</span>
+              <span class="text-base font-bold leading-none">{day.dayNum}</span>
+            </button>
+          )
+        })
+      }
+    </div>
+  </div>
+
+  <!-- Slot grid (only when a day is selected) -->
+  {selectedDayId && currentSlots.length > 0 && (
+    <div>
+      <p class={slotPickerSectionLabelClass}>
+        Pick a time
+        {timezoneLabel && <span class={slotPickerTimezoneClass}>{timezoneLabel}</span>}
+      </p>
+      <div role="radiogroup" aria-label="Pick a time" class={`${slotPickerGridClass} mt-2`}>
+        {
+          currentSlots.map((slot) => {
+            const isSlotActive = isSlotSelected(value, selectedDayId, slot)
+            const isDisabled = disabledSlots.includes(slot)
+            return (
+              <button
+                type="button"
+                role="radio"
+                aria-checked={isSlotActive}
+                aria-disabled={isDisabled || undefined}
+                data-state={isSlotActive ? 'checked' : 'unchecked'}
+                class={slotPickerSlotVariants({
+                  selected: isSlotActive ? 'true' : 'false',
+                  disabled: isDisabled ? 'true' : 'false',
+                })}
+              >
+                {slot}
+              </button>
+            )
+          })
+        }
+      </div>
+    </div>
+  )}
+</div>

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

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

package/dist/astro-sortable-list/SortableList.astro

@@ -0,0 +1,68 @@
+---
+import {
+  createSortableList,
+  sortableListVariants,
+  sortableListRowVariants,
+  sortableListGripClass,
+  sortableListContentClass,
+} from '../sortable-list/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Item {
+  /** Unique key for the item. */
+  id: string | number
+  /** Display label rendered as the row content. */
+  label: string
+}
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The ordered list of items to render. */
+  items: Item[]
+  /** Disables drag affordances visually. */
+  disabled?: boolean
+}
+
+const {
+  items,
+  disabled = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createSortableList()
+---
+
+<div
+  class={cn(sortableListVariants({ disabled: disabled ? 'true' : 'false' }), className)}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {
+    items.map((item) => (
+      <div
+        role="listitem"
+        class={sortableListRowVariants({ dragging: 'false' })}
+      >
+        {/* Grip handle — static in SSR; interactivity is React-only */}
+        <span class={sortableListGripClass} aria-hidden="true">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path
+              d="M2 4h12M2 8h12M2 12h12"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+            />
+          </svg>
+        </span>
+        <span class={sortableListContentClass}>{item.label}</span>
+      </div>
+    ))
+  }
+</div>

package/dist/astro-sortable-list/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'

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';
@@ -53,6 +56,7 @@ export * from './astro-inline-editor/index.ts';
 export * from './astro-input/index.ts';
 export * from './astro-input-group/index.ts';
 export * from './astro-install-prompt/index.ts';
+export * from './astro-kanban-board/index.ts';
 export * from './astro-keyboard-shortcut/index.ts';
 export * from './astro-language-selector/index.ts';
 export * from './astro-link-card/index.ts';
@@ -61,9 +65,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 +78,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 +87,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';
@@ -87,7 +96,10 @@ export * from './astro-skeleton/index.ts';
 export * from './astro-skip-to-content/index.ts';
 export * from './astro-slide-viewer/index.ts';
 export * from './astro-slider/index.ts';
+export * from './astro-slot-picker/index.ts';
 export * from './astro-social-auth-button/index.ts';
+export * from './astro-sortable-list/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/kanban-board/index.ts

@@ -0,0 +1,20 @@
+export {
+  createKanbanBoard,
+  cardsByColumn,
+  visibleAndOverflow,
+  type KanbanColumnDef,
+  type KanbanBoardAPI,
+} from './kanban-board.js'
+
+export {
+  kanbanBoardVariants,
+  kanbanColumnVariants,
+  kanbanColumnHeaderClass,
+  kanbanColumnTitleClass,
+  kanbanColumnCountClass,
+  kanbanAccentBarClass,
+  kanbanNoteBarClass,
+  kanbanColumnBodyClass,
+  kanbanOverflowButtonClass,
+  kanbanCardVariants,
+} from './kanban-board.styles.js'