@refraction-ui/astro 0.11.0 → 0.12.0

package/dist/astro-empty-state/EmptyState.astro

@@ -0,0 +1,57 @@
+---
+import { cn } from '../shared/index.ts'
+import {
+  createEmptyState,
+  emptyStateVariants,
+  emptyStateIconChipVariants,
+  emptyStateTitleClass,
+  emptyStateDescriptionClass,
+  emptyStateActionsClass,
+  type EmptyStateTone,
+} from '../empty-state/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Tone that tints the icon chip. Defaults to `neutral`. */
+  tone?: EmptyStateTone
+  /** Wrap the content in a bordered card surface. */
+  bordered?: boolean
+}
+
+const {
+  tone = 'neutral',
+  bordered = false,
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createEmptyState({ tone })
+const classes = cn(
+  emptyStateVariants({ bordered: bordered ? 'true' : 'false' }),
+  className,
+)
+---
+
+<div class={classes} {...api.dataAttributes} {...props}>
+  {
+    Astro.slots.has('icon') && (
+      <div aria-hidden="true" class={emptyStateIconChipVariants({ tone })}>
+        <slot name="icon" />
+      </div>
+    )
+  }
+  <h3 class={emptyStateTitleClass}><slot name="title" /></h3>
+  {
+    Astro.slots.has('description') && (
+      <p class={emptyStateDescriptionClass}>
+        <slot name="description" />
+      </p>
+    )
+  }
+  {
+    Astro.slots.has('actions') && (
+      <div class={emptyStateActionsClass}>
+        <slot name="actions" />
+      </div>
+    )
+  }
+</div>

package/dist/astro-empty-state/index.ts

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

package/dist/astro-input/Input.astro

@@ -3,6 +3,7 @@ import {
   createInput,
   inputVariants,
   type InputType,
+  type InputValidationState,
 } from '../input/index.ts'
 import { cn } from '../shared/index.ts'
 
@@ -13,6 +14,7 @@ interface Props extends astroHTML.JSX.HTMLAttributes {
   readonly?: boolean
   required?: boolean
   'aria-invalid'?: boolean
+  validationState?: InputValidationState
 }
 
 const {
@@ -23,6 +25,7 @@ const {
   readonly,
   required,
   'aria-invalid': ariaInvalid,
+  validationState,
   ...props
 } = Astro.props
 
@@ -32,9 +35,10 @@ const api = createInput({
   readOnly: readonly,
   required,
   'aria-invalid': ariaInvalid === true ? true : undefined,
+  validationState,
 })
 
-const classes = cn(inputVariants({ size }), className)
+const classes = cn(inputVariants({ size, validationState }), className)
 ---
 
 <input

package/dist/astro-password-input/PasswordInput.astro

@@ -0,0 +1,102 @@
+---
+import { inputVariants, type InputValidationState } from '../input/index.ts'
+import {
+  createPasswordInput,
+  passwordToggleVariants,
+} from '../password-input/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  size?: 'sm' | 'default' | 'lg'
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  validationState?: InputValidationState
+  revealLabel?: string
+  hideLabel?: string
+}
+
+const {
+  size,
+  class: className,
+  disabled,
+  readonly,
+  required,
+  validationState,
+  revealLabel = 'Show password',
+  hideLabel = 'Hide password',
+  ...props
+} = Astro.props
+
+// Render masked initially; progressive enhancement toggles it client-side.
+const { inputType, toggleLabel, togglePressed } = createPasswordInput({
+  revealed: false,
+  revealLabel,
+  hideLabel,
+})
+
+const inputClasses = cn(inputVariants({ size, validationState }), 'pr-10', className)
+const ariaInvalid =
+  validationState === 'invalid' ? true : validationState === 'valid' ? false : undefined
+---
+
+<div class="relative" data-rfr-password-input>
+  <input
+    type={inputType}
+    class={inputClasses}
+    disabled={disabled}
+    readonly={readonly}
+    required={required}
+    aria-invalid={ariaInvalid}
+    data-rfr-password-field
+    {...props}
+  />
+  <button
+    type="button"
+    aria-label={toggleLabel}
+    aria-pressed={togglePressed}
+    class={passwordToggleVariants()}
+    data-rfr-password-toggle
+    data-reveal-label={revealLabel}
+    data-hide-label={hideLabel}
+  >
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="size-4"
+    >
+      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
+      <circle cx="12" cy="12" r="3"></circle>
+    </svg>
+  </button>
+</div>
+
+<script>
+  document
+    .querySelectorAll<HTMLElement>('[data-rfr-password-input]')
+    .forEach((root) => {
+      const field = root.querySelector<HTMLInputElement>(
+        '[data-rfr-password-field]',
+      )
+      const toggle = root.querySelector<HTMLButtonElement>(
+        '[data-rfr-password-toggle]',
+      )
+      if (!field || !toggle) return
+
+      const revealLabel = toggle.dataset.revealLabel ?? 'Show password'
+      const hideLabel = toggle.dataset.hideLabel ?? 'Hide password'
+
+      toggle.addEventListener('click', () => {
+        const revealed = field.type === 'text'
+        const next = !revealed
+        field.type = next ? 'text' : 'password'
+        toggle.setAttribute('aria-pressed', String(next))
+        toggle.setAttribute('aria-label', next ? hideLabel : revealLabel)
+      })
+    })
+</script>

package/dist/astro-password-input/index.ts

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

package/dist/astro-segmented-control/SegmentedControl.astro

@@ -0,0 +1,106 @@
+---
+import { segmentedControlVariants, createSegmentedControl } from '../segmented-control/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value?: string
+  size?: 'sm' | 'md'
+  name?: string
+}
+
+const { value, size = 'md', name, class: className, ...props } = Astro.props
+
+const api = createSegmentedControl({ value, size })
+---
+
+<div
+  class={cn(segmentedControlVariants({ size }), className)}
+  data-rfr-segmented-group
+  data-rfr-segmented-size={size}
+  data-rfr-segmented-value={value || ''}
+  {...api.ariaProps}
+  {...props}
+>
+  <slot />
+  {name && <input type="hidden" name={name} value={value || ''} data-rfr-segmented-input />}
+</div>
+
+<script>
+  function getNextSegmentIndex(current: number, key: string, count: number): number {
+    if (count <= 0) return current
+    switch (key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        return (current + 1) % count
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        return (current - 1 + count) % count
+      case 'Home':
+        return 0
+      case 'End':
+        return count - 1
+      default:
+        return current
+    }
+  }
+
+  document.querySelectorAll<HTMLElement>('[data-rfr-segmented-group]').forEach((group) => {
+    const items = () => group.querySelectorAll<HTMLButtonElement>('[data-rfr-segmented-item]')
+
+    function selectItem(item: HTMLButtonElement) {
+      if (item.disabled) return
+      const value = item.getAttribute('data-rfr-segmented-item-value') || ''
+
+      items().forEach((btn) => {
+        const btnValue = btn.getAttribute('data-rfr-segmented-item-value') || ''
+        const isSelected = btnValue === value
+        btn.setAttribute('aria-checked', String(isSelected))
+        btn.setAttribute('tabindex', isSelected ? '0' : '-1')
+        btn.setAttribute('data-state', isSelected ? 'checked' : 'unchecked')
+
+        if (isSelected) {
+          btn.classList.add('bg-background', 'text-foreground', 'shadow-sm')
+          btn.classList.remove('text-muted-foreground', 'hover:text-foreground')
+        } else {
+          btn.classList.remove('bg-background', 'text-foreground', 'shadow-sm')
+          btn.classList.add('text-muted-foreground', 'hover:text-foreground')
+        }
+      })
+
+      group.setAttribute('data-rfr-segmented-value', value)
+
+      const input = group.querySelector('[data-rfr-segmented-input]') as HTMLInputElement | null
+      if (input) input.value = value
+
+      group.dispatchEvent(new CustomEvent('change', { detail: { value } }))
+    }
+
+    group.addEventListener('click', (e) => {
+      const item = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-rfr-segmented-item]')
+      if (item) selectItem(item)
+    })
+
+    group.addEventListener('keydown', (e) => {
+      const target = e.target as HTMLElement
+      if (!target.hasAttribute('data-rfr-segmented-item')) return
+
+      const allItems = Array.from(items()).filter((i) => !i.disabled)
+      const currentIndex = allItems.indexOf(target as HTMLButtonElement)
+      if (currentIndex === -1) return
+
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault()
+        selectItem(target as HTMLButtonElement)
+        return
+      }
+
+      const nextIndex = getNextSegmentIndex(currentIndex, e.key, allItems.length)
+      if (nextIndex !== currentIndex) {
+        e.preventDefault()
+        const nextItem = allItems[nextIndex]
+        nextItem.focus()
+        selectItem(nextItem)
+      }
+    })
+  })
+</script>

package/dist/astro-segmented-control/SegmentedControlItem.astro

@@ -0,0 +1,32 @@
+---
+import { segmentedControlItemVariants } from '../segmented-control/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value: string
+  size?: 'sm' | 'md'
+  checked?: boolean
+  disabled?: boolean
+}
+
+const { value, size = 'md', checked = false, disabled = false, class: className, ...props } = Astro.props
+---
+
+<button
+  type="button"
+  role="radio"
+  aria-checked={checked}
+  aria-disabled={disabled || undefined}
+  tabindex={checked ? 0 : -1}
+  disabled={disabled || undefined}
+  data-state={checked ? 'checked' : 'unchecked'}
+  data-rfr-segmented-item
+  data-rfr-segmented-item-value={value}
+  class={cn(
+    segmentedControlItemVariants({ size, state: checked ? 'checked' : 'unchecked' }),
+    className,
+  )}
+  {...props}
+>
+  <slot />
+</button>

package/dist/astro-segmented-control/index.ts

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

package/dist/astro-separator/Separator.astro

@@ -0,0 +1,49 @@
+---
+import {
+  createSeparator,
+  separatorVariants,
+  separatorLineClass,
+  separatorLabelClass,
+  type SeparatorOrientation,
+} from '../separator/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  orientation?: SeparatorOrientation
+  /**
+   * Optional centered label (horizontal only). Renders a flanking line on
+   * each side — the "labeled divider" variant. May also be supplied via the
+   * default slot.
+   */
+  label?: string
+  decorative?: boolean
+}
+
+const {
+  orientation = 'horizontal',
+  label,
+  decorative = true,
+  class: className,
+  ...props
+} = Astro.props
+
+const hasLabel = orientation === 'horizontal' && (label != null || Astro.slots.has('default'))
+const { ariaProps, dataAttributes } = createSeparator({ orientation, decorative })
+---
+
+{
+  hasLabel ? (
+    <div role="none" class={cn(separatorVariants({ labeled: 'true' }), className)} {...props}>
+      <span class={separatorLineClass} />
+      <span class={separatorLabelClass}>{label}<slot /></span>
+      <span class={separatorLineClass} />
+    </div>
+  ) : (
+    <div
+      class={cn(separatorVariants({ orientation }), className)}
+      {...ariaProps}
+      {...dataAttributes}
+      {...props}
+    />
+  )
+}

package/dist/astro-separator/index.ts

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

package/dist/astro-social-auth-button/SocialAuthButton.astro

@@ -0,0 +1,110 @@
+---
+import {
+  createSocialAuthButton,
+  socialAuthButtonVariants,
+  lastUsedBadgeVariants,
+  type SocialProvider,
+} from '../social-auth-button/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  provider: SocialProvider
+  lastUsed?: boolean
+  loading?: boolean
+  disabled?: boolean
+}
+
+const {
+  provider,
+  lastUsed,
+  loading,
+  disabled,
+  class: className,
+  ...props
+} = Astro.props
+
+const { label, mono, dataAttributes } = createSocialAuthButton({ provider })
+
+// Mirrors the react-button outline variant base + outline classes so the Astro
+// and React buttons render identically.
+const buttonClasses = cn(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+  'w-full justify-center gap-2',
+  className,
+)
+
+const iconFill = (color: string) => (mono ? 'currentColor' : color)
+---
+
+<div class={socialAuthButtonVariants()}>
+  <button
+    type="button"
+    class={buttonClasses}
+    disabled={disabled || loading}
+    {...dataAttributes}
+    {...props}
+  >
+    {loading ? (
+      <svg
+        class="animate-spin h-4 w-4"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      >
+        <circle
+          class="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="4"
+        />
+        <path
+          class="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    ) : (
+      <svg
+        class="shrink-0"
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+      >
+        {provider === 'google' && (
+          <path
+            fill={iconFill('#4285F4')}
+            d="M21.35 11.1H12v2.92h5.35c-.23 1.4-1.65 4.1-5.35 4.1a5.99 5.99 0 0 1 0-11.98c1.71 0 2.86.73 3.52 1.36l2.4-2.31C16.46 3.7 14.43 2.8 12 2.8a9.2 9.2 0 1 0 0 18.4c5.31 0 8.82-3.73 8.82-8.99 0-.6-.07-1.06-.17-1.51Z"
+          />
+        )}
+        {provider === 'github' && (
+          <path
+            fill="currentColor"
+            d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.46-1.11-1.46-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.9 1.53 2.36 1.09 2.94.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.6 9.6 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.85l-.01 2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2Z"
+          />
+        )}
+        {provider === 'microsoft' && (
+          <Fragment>
+            <path fill={iconFill('#F25022')} d="M3 3h8v8H3z" />
+            <path fill={iconFill('#7FBA00')} d="M13 3h8v8h-8z" />
+            <path fill={iconFill('#00A4EF')} d="M3 13h8v8H3z" />
+            <path fill={iconFill('#FFB900')} d="M13 13h8v8h-8z" />
+          </Fragment>
+        )}
+        {provider === 'apple' && (
+          <path
+            fill="currentColor"
+            d="M16.37 12.78c-.03-2.62 2.14-3.88 2.24-3.94-1.22-1.79-3.12-2.03-3.79-2.06-1.61-.16-3.15.95-3.97.95-.82 0-2.08-.93-3.42-.9-1.76.03-3.39 1.02-4.29 2.6-1.83 3.18-.47 7.88 1.31 10.46.87 1.26 1.91 2.67 3.27 2.62 1.31-.05 1.81-.85 3.4-.85 1.58 0 2.03.85 3.42.82 1.41-.02 2.31-1.28 3.17-2.55.99-1.46 1.4-2.88 1.42-2.95-.03-.01-2.73-1.05-2.76-4.15M13.9 5.1c.72-.88 1.21-2.09 1.08-3.3-1.04.04-2.3.69-3.04 1.56-.66.77-1.24 2.01-1.09 3.19 1.16.09 2.34-.59 3.05-1.45"
+          />
+        )}
+      </svg>
+    )}
+    {label}
+  </button>
+  {lastUsed && <span class={lastUsedBadgeVariants()}>Last used</span>}
+</div>

package/dist/astro-social-auth-button/SocialAuthRow.astro

@@ -0,0 +1,13 @@
+---
+import { socialAuthRowVariants } from '../social-auth-button/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+const classes = cn(socialAuthRowVariants(), className)
+---
+
+<div class={classes} {...props}>
+  <slot />
+</div>

package/dist/astro-social-auth-button/index.ts

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

package/dist/astro-theme/ThemeScript.astro

@@ -1,13 +1,26 @@
 ---
-import { getThemeScript } from '../theme/index.ts'
+import { getThemeScript, type ThemeMode } from '../theme/index.ts'
 
 interface Props {
   storageKey?: string
   attribute?: 'class' | 'data-theme'
+  /**
+   * Theme to apply when nothing is stored. Match this to the `<ThemeProvider>`
+   * client component's `defaultMode` so first-paint and hydration agree. Issue #317.
+   */
+  defaultMode?: ThemeMode
+  /** When `false`, never fall through to `prefers-color-scheme`. Default `true`. */
+  enableSystem?: boolean
 }
 
-const { storageKey = 'rfr-theme', attribute = 'class' } = Astro.props
-const scriptContent = getThemeScript(storageKey, attribute)
+const {
+  storageKey = 'rfr-theme',
+  attribute = 'class',
+  defaultMode = 'system',
+  enableSystem = true,
+} = Astro.props
+
+const scriptContent = getThemeScript({ storageKey, attribute, defaultMode, enableSystem })
 ---
 
 <script set:html={scriptContent} />

package/dist/button/button.styles.ts

@@ -17,6 +17,10 @@ export const buttonVariants = cva({
   variants: {
     variant: {
       default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+      // Alias for `default` — see resolveButtonVariant + issue #201. Same classes
+      // so styling stays identical even if a consumer reaches into `buttonVariants`
+      // directly without going through resolveButtonVariant.
+      primary: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
       destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
       outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
       secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',

package/dist/button/button.ts

@@ -1,7 +1,30 @@
 import type { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.ts'
 import { Keys } from '../shared/index.ts'
 
-export type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+/**
+ * `primary` is an alias of `default` — included so the universal React-ecosystem
+ * muscle-memory (`<Button variant="primary">`) renders as the most-emphasized
+ * button instead of falling through to the unstyled base. See issue #201.
+ */
+export type ButtonVariant =
+  | 'default'
+  | 'primary'
+  | 'destructive'
+  | 'outline'
+  | 'secondary'
+  | 'ghost'
+  | 'link'
+
+/** Variants that map to the same visual style as `default`. */
+export const BUTTON_VARIANT_ALIASES: Partial<Record<ButtonVariant, ButtonVariant>> = {
+  primary: 'default',
+}
+
+/** Resolve an alias to its canonical variant. Pass-through for unknown/undefined. */
+export function resolveButtonVariant(variant: ButtonVariant | undefined): ButtonVariant | undefined {
+  if (!variant) return variant
+  return BUTTON_VARIANT_ALIASES[variant] ?? variant
+}
 export type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon'
 
 export interface ButtonProps {

package/dist/button/index.ts

@@ -1,6 +1,8 @@
 export {
   createButton,
   getButtonType,
+  resolveButtonVariant,
+  BUTTON_VARIANT_ALIASES,
   type ButtonProps,
   type ButtonAPI,
   type ButtonVariant,

package/dist/empty-state/empty-state.styles.ts

@@ -0,0 +1,42 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Container for the EmptyState column. The `bordered` variant wraps the
+ * content in a card surface.
+ */
+export const emptyStateVariants = cva({
+  base: 'flex flex-col items-center text-center gap-3 p-8',
+  variants: {
+    bordered: {
+      true: 'rounded-xl border border-border bg-card',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    bordered: 'false',
+  },
+})
+
+/**
+ * Tone-tinted classes for the icon chip. Tone styling lives here as a single
+ * source of truth (no scattered inline literals in the adapters).
+ */
+export const emptyStateIconChipVariants = cva({
+  base: 'flex size-12 items-center justify-center rounded-full',
+  variants: {
+    tone: {
+      neutral: 'bg-muted text-muted-foreground',
+      success: 'bg-green-500/10 text-green-600',
+      warning: 'bg-yellow-500/10 text-yellow-600',
+      danger: 'bg-destructive/10 text-destructive',
+    },
+  },
+  defaultVariants: {
+    tone: 'neutral',
+  },
+})
+
+/** Layout class helpers for the title/description/actions slots. */
+export const emptyStateTitleClass = 'text-lg font-semibold text-foreground'
+export const emptyStateDescriptionClass = 'text-sm text-muted-foreground'
+export const emptyStateActionsClass = 'flex items-center justify-center gap-2'

package/dist/empty-state/empty-state.ts

@@ -0,0 +1,27 @@
+export type EmptyStateTone = 'neutral' | 'success' | 'warning' | 'danger'
+
+export interface EmptyStateOptions {
+  /** Tone that tints the icon chip. Defaults to `neutral`. */
+  tone?: EmptyStateTone
+}
+
+export interface EmptyStateAPI {
+  /** Data attributes for CSS styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Headless EmptyState core — JSX-free. Resolves the tone into the data
+ * attributes that adapters spread onto the root element.
+ */
+export function createEmptyState(options: EmptyStateOptions = {}): EmptyStateAPI {
+  const { tone = 'neutral' } = options
+
+  const dataAttributes: Record<string, string> = {
+    'data-tone': tone,
+  }
+
+  return {
+    dataAttributes,
+  }
+}