@refraction-ui/astro 0.17.3 → 0.18.0

package/dist/analytics-sink-app-insights/app-insights-sink.ts

@@ -98,6 +98,18 @@ const DEFAULT_INGEST_ENDPOINT = 'https://dc.services.visualstudio.com'
 const NO_RETRY = new Set([400, 401, 403, 413])
 const sleep = (ms: number) => new Promise<void>((r) => setTimeout(r, ms))
 
+// `@microsoft/applicationinsights-web` is an OPTIONAL peer — installed only by
+// consumers who opt into client-sdk mode. The specifier must stay
+// non-statically-analyzable: the meta packages (`@refraction-ui/astro`,
+// `@refraction-ui/react`) re-export this module from their entry, so a literal
+// `import('@microsoft/applicationinsights-web')` makes consumer bundlers
+// (vite/rollup) fail the whole build trying to resolve a package that is not
+// installed — long before tree-shaking can drop the module. Routing the
+// specifier through a const keeps the import runtime-only. (The previous
+// `/* @vite-ignore */` annotation did NOT suffice — vite still resolves
+// literal dynamic-import specifiers in SSR builds.)
+const appInsightsWebSpecifier = '@microsoft/applicationinsights-web'
+
 /* ------------------------------------------------------------------ */
 /*  client-sdk mode                                                    */
 /* ------------------------------------------------------------------ */
@@ -119,9 +131,7 @@ function createClientSdkSink(opts: ClientSdkOptions): AnalyticsSink {
         return instance
       }
       // Lazy, dynamic, optional — never a static/hard dependency.
-      const mod = (await import(
-        /* @vite-ignore */ '@microsoft/applicationinsights-web'
-      )) as {
+      const mod = (await import(appInsightsWebSpecifier)) as {
         ApplicationInsights: new (cfg: {
           config: {
             connectionString?: string

package/dist/analytics-sink-posthog/client-sdk-sink.ts

@@ -55,9 +55,20 @@ export interface PostHogClientSdkSinkOptions {
   loadPostHog?: () => Promise<{ default: PostHogJs } | PostHogJs>
 }
 
+// `posthog-js` is an OPTIONAL peer — installed only by consumers who opt into
+// client-sdk mode. The specifier must stay non-statically-analyzable: the meta
+// packages (`@refraction-ui/astro`, `@refraction-ui/react`) re-export this
+// module from their entry, so a literal `import('posthog-js')` makes consumer
+// bundlers (vite/rollup) fail the whole build trying to resolve a package that
+// is not installed — long before tree-shaking can drop the module. Routing the
+// specifier through a const keeps the import runtime-only. (A `/* @vite-ignore */`
+// annotation does NOT suffice — vite still resolves literal dynamic-import
+// specifiers in SSR builds.)
+const posthogJsSpecifier = 'posthog-js'
+
 async function defaultLoad(): Promise<PostHogJs> {
   // Dynamic import keeps `posthog-js` out of the graph until first delivery.
-  const mod = (await import('posthog-js')) as unknown as
+  const mod = (await import(posthogJsSpecifier)) as unknown as
     | { default: PostHogJs }
     | PostHogJs
   return 'default' in mod ? mod.default : mod

package/dist/analytics-sink-posthog/replay.ts

@@ -68,8 +68,17 @@ export interface SessionReplayHandle {
   stop(): void
 }
 
+// `posthog-js` is an OPTIONAL peer — installed only by consumers who opt into
+// session replay. The specifier must stay non-statically-analyzable: the meta
+// packages (`@refraction-ui/astro`, `@refraction-ui/react`) re-export this
+// module from their entry, so a literal `import('posthog-js')` makes consumer
+// bundlers (vite/rollup) fail the whole build trying to resolve a package that
+// is not installed — long before tree-shaking can drop the module. Routing the
+// specifier through a const keeps the import runtime-only.
+const posthogJsSpecifier = 'posthog-js'
+
 async function defaultLoad(): Promise<PostHogReplay> {
-  const mod = (await import('posthog-js')) as unknown as
+  const mod = (await import(posthogJsSpecifier)) as unknown as
     | { default: PostHogReplay }
     | PostHogReplay
   return 'default' in mod ? mod.default : mod

package/dist/astro-calendar/Calendar.astro

@@ -16,21 +16,26 @@ interface Props extends astroHTML.JSX.HTMLAttributes {
   maxDate?: string
   /** Disabled date ISO strings */
   disabledDates?: string[]
+  /** Reference "today" (ISO string) for isToday/aria-current and the initial
+   *  month — inject to keep SSR and client hydration in agreement. */
+  today?: string
 }
 
-const { value, minDate, maxDate, disabledDates = [], class: className, ...props } = Astro.props
+const { value, minDate, maxDate, disabledDates = [], today, class: className, ...props } = Astro.props
 
 const parsedValue = value ? new Date(value) : undefined
 const parsedMin = minDate ? new Date(minDate) : undefined
 const parsedMax = maxDate ? new Date(maxDate) : undefined
 const parsedDisabled = disabledDates.map((d: string) => new Date(d))
+const parsedToday = today ? new Date(today) : undefined
 
 const api = createCalendar({
   value: parsedValue,
-  month: parsedValue ?? new Date(),
+  month: parsedValue ?? parsedToday,
   minDate: parsedMin,
   maxDate: parsedMax,
   disabledDates: parsedDisabled,
+  today: parsedToday,
 })
 
 const MONTH_NAMES = [

package/dist/astro-date-picker/DatePicker.astro

@@ -1,6 +1,6 @@
 ---
 import { cn } from '../shared/index.ts'
-import { datePickerTriggerStyles } from '../date-picker/index.ts'
+import { datePickerTriggerStyles, formatDate } from '../date-picker/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {
   /** Selected date value (ISO string) */
@@ -11,7 +11,7 @@ interface Props extends astroHTML.JSX.HTMLAttributes {
   maxDate?: string
   /** Show time selection inputs */
   showTime?: boolean
-  /** Date format string (ignored by native input, but kept for interface compatibility) */
+  /** Display format for the selected-date text shown next to the input (e.g. 'DD/MM/YYYY'). The native input value itself stays ISO (`YYYY-MM-DD`). */
   format?: string
   /** Placeholder text */
   placeholder?: string
@@ -49,6 +49,11 @@ function formatDateStr(isoStr?: string) {
 const parsedValue = formatDateStr(value)
 const parsedMin = formatDateStr(minDate)
 const parsedMax = formatDateStr(maxDate)
+
+// A custom display format cannot be honored by the native input itself (the
+// browser locale controls its presentation), so the formatted date renders as
+// adjacent text via the core's formatter — mirroring the React adapter.
+const formattedDisplay = format && value ? formatDate(new Date(value), format, showTime) : undefined
 ---
 
 <input
@@ -62,6 +67,9 @@ const parsedMax = formatDateStr(maxDate)
   data-rfr-datepicker
   {...props}
 />
+{formattedDisplay && (
+  <span class="text-sm text-muted-foreground">{formattedDisplay}</span>
+)}
 
 <script>
   document.querySelectorAll<HTMLInputElement>('[data-rfr-datepicker]').forEach((input) => {

package/dist/astro-file-tree/FileTree.astro

@@ -0,0 +1,86 @@
+---
+import {
+  createFileTree,
+  fileTreeVariants,
+  type FileTreeNode,
+} from '../file-tree/index.ts'
+import { cn } from '../shared/index.ts'
+import FileTreeItems from './FileTreeItems.astro'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Root-level nodes of the tree. */
+  nodes?: FileTreeNode[]
+  /** Expanded node ids (static SSR expansion state). */
+  expandedIds?: string[]
+  /** Initial expanded node ids (alias of `expandedIds` for uncontrolled usage). */
+  defaultExpandedIds?: string[]
+  /** Selected node id (`null` = none). */
+  selectedId?: string | null
+  /** Initial selected node id (alias of `selectedId` for uncontrolled usage). */
+  defaultSelectedId?: string | null
+  /** Accessible label for the tree (default `'File tree'`). */
+  'aria-label'?: string
+}
+
+const {
+  nodes = [],
+  expandedIds,
+  defaultExpandedIds,
+  selectedId,
+  defaultSelectedId,
+  class: className,
+  'aria-label': ariaLabel,
+  ...props
+} = Astro.props
+
+// The headless core resolves the node model, expansion, selection, and the
+// treeview ARIA objects; SSR renders the resulting visible rows statically.
+const api = createFileTree({
+  nodes,
+  expandedIds: expandedIds ?? defaultExpandedIds,
+  selectedId: selectedId ?? defaultSelectedId,
+  'aria-label': ariaLabel,
+})
+
+const state = api.getState()
+const firstVisibleId = api.getVisibleItems()[0]?.node.id
+---
+
+<div class={cn(fileTreeVariants(), className)} {...props}>
+  <ul {...api.getTreeAria()} class="m-0 p-0" data-rfr-file-tree>
+    <FileTreeItems
+      nodes={state.nodes}
+      depth={1}
+      api={api}
+      expandedIds={state.expandedIds}
+      selectedId={state.selectedId}
+      firstVisibleId={firstVisibleId}
+    />
+  </ul>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-rfr-file-tree]').forEach((root) => {
+    if (root.hasAttribute('data-rfr-file-tree-init')) return
+    root.setAttribute('data-rfr-file-tree-init', '')
+
+    // SSR-static component: expansion/selection are props. Activation is
+    // delivered as bubbling CustomEvents (`rfr-file-tree-select` /
+    // `rfr-file-tree-toggle`); the consumer re-renders with the new state.
+    root.addEventListener('click', (e) => {
+      const item = (e.target as HTMLElement).closest<HTMLElement>('[data-rfr-file-tree-item]')
+      if (!item || item.getAttribute('data-disabled') === 'true') return
+      const id = item.getAttribute('data-rfr-node-id')
+      if (!id) return
+      root.dispatchEvent(new CustomEvent('rfr-file-tree-select', { detail: { id }, bubbles: true }))
+      if (item.getAttribute('data-rfr-has-children') === 'true') {
+        root.dispatchEvent(
+          new CustomEvent('rfr-file-tree-toggle', {
+            detail: { id, expanded: item.getAttribute('aria-expanded') !== 'true' },
+            bubbles: true,
+          }),
+        )
+      }
+    })
+  })
+</script>

package/dist/astro-file-tree/FileTree.stories.ts

@@ -1,14 +1,41 @@
-import Component from './astro-file-tree.astro'
+import Component from './FileTree.astro'
 
 const meta = {
   title: 'Astro/FileTree',
   component: Component,
+  argTypes: {
+    nodes: { control: 'object' },
+    expandedIds: { control: 'object' },
+    selectedId: { control: 'text' },
+  },
 }
 
 export default meta
 
+// Nodes must match the headless core's FileTreeNode shape
+// ({ id, label, children?, disabled? }) — see
+// packages/file-tree/src/file-tree.ts.
 export const Default = {
   args: {
-    
+    nodes: [
+      {
+        id: 'src',
+        label: 'src',
+        children: [
+          {
+            id: 'src-components',
+            label: 'components',
+            children: [
+              { id: 'src-components-button', label: 'Button.tsx' },
+              { id: 'src-components-input', label: 'Input.tsx' },
+            ],
+          },
+          { id: 'src-index', label: 'index.ts' },
+        ],
+      },
+      { id: 'package-json', label: 'package.json' },
+    ],
+    expandedIds: ['src', 'src-components'],
+    selectedId: 'src-components-button',
   }
 }

package/dist/astro-file-tree/FileTreeItems.astro

@@ -0,0 +1,77 @@
+---
+import {
+  fileTreeItemVariants,
+  fileTreeGlyphClass,
+  type FileTreeAPI,
+  type FileTreeNode,
+  type VisibleTreeItem,
+} from '../file-tree/index.ts'
+import FileTreeItems from './FileTreeItems.astro'
+
+/**
+ * Recursive partial for `<FileTree>` — renders one depth level of the tree
+ * (`role="none"` list items wrapping `role="treeitem"` rows) and nests
+ * `role="group"` lists for expanded parents, mirroring the React adapter's
+ * markup. Not exported from the package entry; use `<FileTree>`.
+ */
+
+interface Props {
+  nodes: FileTreeNode[]
+  /** 1-based nesting depth (ARIA `aria-level`). */
+  depth: number
+  api: FileTreeAPI
+  expandedIds: string[]
+  selectedId: string | null
+  firstVisibleId: string | undefined
+}
+
+const { nodes, depth, api, expandedIds, selectedId, firstVisibleId } = Astro.props
+---
+
+{nodes.map((node) => {
+  const hasChildren = Boolean(node.children && node.children.length > 0)
+  const isExpanded = hasChildren && expandedIds.includes(node.id)
+  const isSelected = selectedId === node.id
+  const item: VisibleTreeItem = {
+    node,
+    parentId: null, // unused by getItemAria; the core tracks real parents
+    depth,
+    hasChildren,
+    isExpanded,
+    isSelected,
+    isFocused: false, // SSR has no roving focus; the first visible item tabs in
+  }
+  const tabbable = node.id === firstVisibleId
+
+  return (
+    <li role="none" class="list-none">
+      <div
+        {...api.getItemAria(item)}
+        tabindex={tabbable ? 0 : -1}
+        data-disabled={node.disabled ? 'true' : undefined}
+        data-rfr-file-tree-item
+        data-rfr-node-id={node.id}
+        data-rfr-has-children={hasChildren ? 'true' : undefined}
+        style={`padding-left: ${(depth - 1) * 12}px`}
+        class={fileTreeItemVariants({ selected: isSelected ? 'true' : 'false' })}
+      >
+        <span aria-hidden="true" class={fileTreeGlyphClass}>
+          {hasChildren ? (isExpanded ? '▾' : '▸') : '·'}
+        </span>
+        <span class="truncate">{node.label}</span>
+      </div>
+      {hasChildren && isExpanded && (
+        <ul role="group" class="m-0 p-0">
+          <FileTreeItems
+            nodes={node.children!}
+            depth={depth + 1}
+            api={api}
+            expandedIds={expandedIds}
+            selectedId={selectedId}
+            firstVisibleId={firstVisibleId}
+          />
+        </ul>
+      )}
+    </li>
+  )
+})}

package/dist/astro-file-tree/index.ts

@@ -1,4 +1,2 @@
-// `.astro` single-file components have no wildcard surface — re-export the
-// default export by name. (The astro-meta build used to paper over the broken
-// `export { default as FileTree } from './astro-file-tree.astro'` by rewriting it to exactly this.)
-export { default as FileTree } from './astro-file-tree.astro'
+export { default as FileTree } from './FileTree.astro'
+export type { FileTreeNode } from '../file-tree/index.ts'

package/dist/astro-pagination/Pagination.astro

@@ -1,3 +1,102 @@
 ---
+import {
+  createPagination,
+  paginationVariants,
+  paginationItemVariants,
+  paginationEllipsisClass,
+} from '../pagination/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Current page, 1-based. Clamped into `[1, totalPages]` (default 1). */
+  page?: number
+  /** Total number of pages (default 1). */
+  totalPages?: number
+  /** Pages shown on each side of the current page (default 1). */
+  siblingCount?: number
+  /** Disables every control. */
+  disabled?: boolean
+}
+
+const {
+  page = 1,
+  totalPages = 1,
+  siblingCount = 1,
+  disabled = false,
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createPagination({ page, totalPages, siblingCount })
 ---
-<div></div>
+
+<div
+  data-rfr-pagination
+  data-rfr-pagination-disabled={disabled ? '' : undefined}
+  class={cn(paginationVariants(), className)}
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...props}
+>
+  {Astro.slots.has('default') ? (
+    <slot />
+  ) : (
+    <>
+      <button
+        type="button"
+        {...api.getPreviousAria()}
+        disabled={disabled || !api.canGoPrevious}
+        class={paginationItemVariants()}
+        data-rfr-page={api.previousPage}
+      >
+        Previous
+      </button>
+      {api.items.map((item) =>
+        item.type === 'ellipsis' ? (
+          <span aria-hidden="true" class={paginationEllipsisClass}>…</span>
+        ) : (
+          <button
+            type="button"
+            {...api.getPageAria(item.page)}
+            disabled={disabled}
+            data-state={item.page === api.page ? 'current' : 'default'}
+            class={paginationItemVariants({
+              state: item.page === api.page ? 'current' : 'default',
+            })}
+            data-rfr-page={item.page}
+          >
+            {item.page}
+          </button>
+        ),
+      )}
+      <button
+        type="button"
+        {...api.getNextAria()}
+        disabled={disabled || !api.canGoNext}
+        class={paginationItemVariants()}
+        data-rfr-page={api.nextPage}
+      >
+        Next
+      </button>
+    </>
+  )}
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-rfr-pagination]').forEach((root) => {
+    if (root.hasAttribute('data-rfr-pagination-init')) return
+    root.setAttribute('data-rfr-pagination-init', '')
+
+    // SSR-static component: activation is delivered as a bubbling
+    // `rfr-page-change` CustomEvent; the consumer re-renders (or navigates)
+    // with the requested page. The DOM is never mutated here.
+    root.addEventListener('click', (e) => {
+      if (root.hasAttribute('data-rfr-pagination-disabled')) return
+      const btn = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-rfr-page]')
+      if (!btn || btn.disabled) return
+      const page = parseInt(btn.getAttribute('data-rfr-page') || '', 10)
+      if (Number.isNaN(page) || String(page) === root.getAttribute('data-page')) return
+      root.dispatchEvent(new CustomEvent('rfr-page-change', { detail: { page }, bubbles: true }))
+    })
+  })
+</script>

package/dist/astro-pagination/Pagination.stories.ts

@@ -3,10 +3,20 @@ import Component from './Pagination.astro'
 const meta = {
   title: 'Astro/Pagination',
   component: Component,
+  argTypes: {
+    page: { control: 'number' },
+    totalPages: { control: 'number' },
+    siblingCount: { control: 'number' },
+    disabled: { control: 'boolean' },
+  },
 }
 
 export default meta
 
 export const Default = {
-  args: {},
+  args: {
+    page: 5,
+    totalPages: 20,
+    siblingCount: 1,
+  },
 }

package/dist/astro-pagination/index.ts

@@ -1 +1 @@
-export {}
+export { default as Pagination } from './Pagination.astro'

package/dist/astro-skip-to-content/SkipToContent.astro

@@ -1,3 +1,24 @@
 ---
+import {
+  createSkipToContent,
+  skipToContentVariants,
+} from '../skip-to-content/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The target element ID to skip to (without the #) */
+  targetId?: string
+}
+
+const { targetId = 'main-content', class: className, ...props } = Astro.props
+const api = createSkipToContent()
 ---
-<div></div>
+
+<a
+  href={`#${targetId}`}
+  class={cn(skipToContentVariants(), className)}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot>Skip to content</slot>
+</a>

package/dist/astro-skip-to-content/SkipToContent.stories.ts

@@ -3,10 +3,16 @@ import Component from './SkipToContent.astro'
 const meta = {
   title: 'Astro/SkipToContent',
   component: Component,
+  argTypes: {
+    targetId: { control: 'text' },
+  },
 }
 
 export default meta
 
 export const Default = {
-  args: {},
+  args: {
+    default: 'Skip to content',
+    targetId: 'main-content',
+  },
 }

package/dist/astro-skip-to-content/index.ts

@@ -1 +1 @@
-export {}
+export { default as SkipToContent } from './SkipToContent.astro'

package/dist/astro-slider/Slider.astro

@@ -0,0 +1,75 @@
+---
+import { createSlider } from '../slider/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Current value. Clamped into `[min, max]` and rounded to `step`. */
+  value?: number
+  /** Initial value when `value` is not given (defaults to `min`). */
+  defaultValue?: number
+  /** Minimum selectable value (default 0). */
+  min?: number
+  /** Maximum selectable value (default 100). */
+  max?: number
+  /** Granularity between selectable values (default 1). */
+  step?: number
+  /** Disables the control. */
+  disabled?: boolean
+  variant?: 'default'
+}
+
+const {
+  value,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled,
+  variant: _variant,
+  class: className,
+  ...props
+} = Astro.props
+
+// Native `<input type="range">` owns keyboard/pointer interaction; the core
+// normalizes the rendered value and supplies the slider ARIA object.
+const api = createSlider({
+  value: value ?? defaultValue ?? min,
+  min,
+  max,
+  step,
+  disabled,
+  'aria-label': props['aria-label'] as string | undefined,
+})
+---
+
+<input
+  type="range"
+  data-rfr-slider
+  min={min}
+  max={max}
+  step={step}
+  value={api.value}
+  disabled={disabled}
+  class={cn('w-full', className)}
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...props}
+/>
+
+<script>
+  document.querySelectorAll<HTMLInputElement>('input[data-rfr-slider]').forEach((input) => {
+    if (input.hasAttribute('data-rfr-slider-init')) return
+    input.setAttribute('data-rfr-slider-init', '')
+
+    // The native range input owns keyboard/pointer interaction and its own
+    // DOM value; the change is delivered as a bubbling `rfr-value-change`
+    // CustomEvent (SSR-static adapter — consumers re-render with the value).
+    input.addEventListener('input', () => {
+      input.setAttribute('data-value', input.value)
+      input.setAttribute('aria-valuenow', input.value)
+      input.dispatchEvent(
+        new CustomEvent('rfr-value-change', { detail: { value: Number(input.value) }, bubbles: true }),
+      )
+    })
+  })
+</script>

package/dist/astro-slider/Slider.stories.ts

@@ -0,0 +1,24 @@
+import Component from './Slider.astro'
+
+const meta = {
+  title: 'Astro/Slider',
+  component: Component,
+  argTypes: {
+    value: { control: 'number' },
+    min: { control: 'number' },
+    max: { control: 'number' },
+    step: { control: 'number' },
+    disabled: { control: 'boolean' },
+  },
+}
+
+export default meta
+
+export const Default = {
+  args: {
+    value: 40,
+    min: 0,
+    max: 100,
+    step: 1,
+  },
+}

package/dist/astro-slider/index.ts

@@ -1 +1 @@
-export {}
+export { default as Slider } from './Slider.astro'

package/dist/astro-steps/Step.astro

@@ -0,0 +1,20 @@
+---
+import { createStep, stepVariants } from '../steps/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  status?: 'completed' | 'active' | 'upcoming'
+}
+
+const { status, class: className, ...props } = Astro.props
+const api = createStep()
+---
+
+<div
+  class={cn(stepVariants({ status }), className)}
+  data-state={status ?? 'upcoming'}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</div>