@refraction-ui/astro 0.11.1 → 0.12.0

package/dist/index.ts

@@ -2,6 +2,7 @@
 export * from './astro-accordion/index.ts';
 export * from './shared/index.ts';
 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-auth/index.ts';
@@ -12,14 +13,19 @@ export * from './astro-bottom-nav/index.ts';
 export * from './astro-breadcrumbs/index.ts';
 export * from './astro-button/index.ts';
 export * from './astro-calendar/index.ts';
+export * from './astro-callout/index.ts';
 export * from './astro-card/index.ts';
+export * from './astro-card-grid/index.ts';
+export * from './astro-carousel/index.ts';
 export * from './astro-charts/index.ts';
 export * from './astro-checkbox/index.ts';
+export * from './astro-code-block/index.ts';
 export * from './astro-code-editor/index.ts';
 export * from './astro-collapsible/index.ts';
 export * from './astro-command/index.ts';
-export * from './astro-conversation/index.ts';
+export * from './astro-command-input/index.ts';
 export * from './astro-content-protection/index.ts';
+export * from './astro-conversation/index.ts';
 export * from './astro-cookie-consent/index.ts';
 export * from './astro-data-table/index.ts';
 export * from './astro-date-picker/index.ts';
@@ -28,19 +34,27 @@ export * from './astro-dialog/index.ts';
 export * from './astro-diff-viewer/index.ts';
 export * from './astro-dropdown-menu/index.ts';
 export * from './astro-emoji-picker/index.ts';
+export * from './astro-empty-state/index.ts';
 export * from './astro-feedback-dialog/index.ts';
+export * from './astro-file-tree/index.ts';
 export * from './astro-file-upload/index.ts';
 export * from './astro-footer/index.ts';
+export * from './astro-icon-system/index.ts';
 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-keyboard-shortcut/index.ts';
 export * from './astro-language-selector/index.ts';
+export * from './astro-link-card/index.ts';
+export * from './astro-logger/index.ts';
 export * from './astro-markdown-renderer/index.ts';
 export * from './astro-mobile-nav/index.ts';
 export * from './astro-navbar/index.ts';
 export * from './astro-otp-input/index.ts';
+export * from './astro-pagination/index.ts';
+export * from './astro-password-input/index.ts';
+export * from './astro-payment/index.ts';
 export * from './astro-popover/index.ts';
 export * from './astro-presence-indicator/index.ts';
 export * from './astro-progress-display/index.ts';
@@ -49,12 +63,19 @@ 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-segmented-control/index.ts';
 export * from './astro-select/index.ts';
+export * from './astro-separator/index.ts';
 export * from './astro-sidebar/index.ts';
 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-social-auth-button/index.ts';
 export * from './astro-status-indicator/index.ts';
+export * from './astro-steps/index.ts';
 export * from './astro-switch/index.ts';
+export * from './astro-table-of-contents/index.ts';
 export * from './astro-tabs/index.ts';
 export * from './astro-textarea/index.ts';
 export * from './astro-theme/index.ts';
@@ -65,19 +86,3 @@ export * from './astro-version-selector/index.ts';
 export * from './astro-video-player/index.ts';
 export * from './astro-voice-pill/index.ts';
 export * from './astro-waveform/index.ts';
-export * from './astro-table-of-contents/index.ts';
-export * from './astro-carousel/index.ts';
-export * from './astro-slider/index.ts';
-export * from './astro-pagination/index.ts';
-export * from './astro-callout/index.ts';
-export * from './astro-steps/index.ts';
-export * from './astro-file-tree/index.ts';
-export * from './astro-icon-system/index.ts';
-export * from './astro-skip-to-content/index.ts';
-export * from './astro-code-block/index.ts';
-export * from './astro-link-card/index.ts';
-export * from './astro-card-grid/index.ts';
-export * from './astro-payment/index.ts';
-export * from './astro-command-input/index.ts';
-export * from './astro-logger/index.ts';
-export * from './astro-analytics/index.ts';

package/dist/input/index.ts

@@ -1,7 +1,9 @@
 export {
   createInput,
   getInputAriaProps,
+  resolveAriaInvalid,
   type InputType,
+  type InputValidationState,
   type InputProps,
   type InputAPI,
 } from './input.js'

package/dist/input/input.styles.ts

@@ -8,6 +8,10 @@ export const inputVariants = cva({
       default: 'h-9',
       lg: 'h-10 text-base',
     },
+    validationState: {
+      valid: 'border-green-500 focus-visible:ring-green-500',
+      invalid: 'border-destructive focus-visible:ring-destructive',
+    },
   },
   defaultVariants: {
     size: 'default',

package/dist/input/input.ts

@@ -2,6 +2,9 @@ import type { AccessibilityProps } from '../shared/index.ts'
 
 export type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search'
 
+/** High-level validation affordance for an input. */
+export type InputValidationState = 'valid' | 'invalid'
+
 export interface InputProps {
   type?: InputType
   disabled?: boolean
@@ -9,6 +12,14 @@ export interface InputProps {
   required?: boolean
   placeholder?: string
   'aria-invalid'?: boolean
+  /**
+   * Validation affordance. The core derives `aria-invalid` from this:
+   * - `'valid'` → `aria-invalid={false}`
+   * - `'invalid'` → `aria-invalid={true}`
+   *
+   * An explicit `aria-invalid` prop always takes precedence.
+   */
+  validationState?: InputValidationState
 }
 
 export interface InputAPI {
@@ -18,22 +29,47 @@ export interface InputAPI {
   dataAttributes: Record<string, string>
 }
 
+/**
+ * Resolve the effective `aria-invalid` value from an explicit `aria-invalid`
+ * prop and a high-level `validationState`. The explicit prop always wins;
+ * otherwise `validationState` maps `'invalid' → true`, `'valid' → false`, and
+ * an absent state leaves `aria-invalid` undefined (legacy behavior).
+ */
+export function resolveAriaInvalid(
+  ariaInvalid: boolean | undefined,
+  validationState: InputValidationState | undefined,
+): boolean | undefined {
+  if (ariaInvalid !== undefined) {
+    return ariaInvalid
+  }
+  if (validationState === 'invalid') {
+    return true
+  }
+  if (validationState === 'valid') {
+    return false
+  }
+  return undefined
+}
+
 export function createInput(props: InputProps = {}): InputAPI {
   const {
     disabled = false,
     readOnly = false,
     required = false,
     'aria-invalid': ariaInvalid,
+    validationState,
   } = props
 
+  const resolvedInvalid = resolveAriaInvalid(ariaInvalid, validationState)
+
   const ariaProps: InputAPI['ariaProps'] = {}
 
   if (disabled) {
     ariaProps['aria-disabled'] = true
   }
 
-  if (ariaInvalid) {
-    ariaProps['aria-invalid'] = true
+  if (resolvedInvalid !== undefined) {
+    ariaProps['aria-invalid'] = resolvedInvalid
   }
 
   if (required) {
@@ -50,7 +86,7 @@ export function createInput(props: InputProps = {}): InputAPI {
     dataAttributes['data-readonly'] = ''
   }
 
-  if (ariaInvalid) {
+  if (resolvedInvalid === true) {
     dataAttributes['data-invalid'] = ''
   }
 

package/dist/password-input/index.ts

@@ -0,0 +1,9 @@
+export {
+  createPasswordInput,
+  DEFAULT_REVEAL_LABEL,
+  DEFAULT_HIDE_LABEL,
+  type PasswordInputProps,
+  type PasswordInputAPI,
+} from './password-input.js'
+
+export { passwordToggleVariants } from './password-input.styles.js'

package/dist/password-input/password-input.styles.ts

@@ -0,0 +1,10 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Positioning classes for the reveal/hide toggle button rendered inside a
+ * password input's trailing padding. The wrapper must be `relative` and the
+ * input must reserve trailing space (e.g. `pr-10`).
+ */
+export const passwordToggleVariants = cva({
+  base: 'absolute right-2 top-1/2 flex size-7 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+})

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

@@ -0,0 +1,45 @@
+export interface PasswordInputProps {
+  /** Whether the password is currently revealed (shown as plain text). */
+  revealed?: boolean
+  /**
+   * Accessible label for the reveal (show password) action.
+   * @default 'Show password'
+   */
+  revealLabel?: string
+  /**
+   * Accessible label for the hide action.
+   * @default 'Hide password'
+   */
+  hideLabel?: string
+}
+
+export interface PasswordInputAPI {
+  /** The `type` attribute for the underlying input given the revealed state. */
+  inputType: 'text' | 'password'
+  /** The accessible label for the toggle button given the revealed state. */
+  toggleLabel: string
+  /** The `aria-pressed` value for the toggle button. */
+  togglePressed: boolean
+}
+
+export const DEFAULT_REVEAL_LABEL = 'Show password'
+export const DEFAULT_HIDE_LABEL = 'Hide password'
+
+/**
+ * State-free password-input helper. Given a `revealed` flag (owned by the
+ * framework adapter), it returns the input `type`, the toggle button's
+ * accessible label, and its `aria-pressed` value. It does not hold state.
+ */
+export function createPasswordInput(props: PasswordInputProps = {}): PasswordInputAPI {
+  const {
+    revealed = false,
+    revealLabel = DEFAULT_REVEAL_LABEL,
+    hideLabel = DEFAULT_HIDE_LABEL,
+  } = props
+
+  return {
+    inputType: revealed ? 'text' : 'password',
+    toggleLabel: revealed ? hideLabel : revealLabel,
+    togglePressed: revealed,
+  }
+}

package/dist/segmented-control/index.ts

@@ -0,0 +1,13 @@
+export {
+  createSegmentedControl,
+  getNextSegmentIndex,
+  type SegmentedControlSize,
+  type SegmentedControlValue,
+  type SegmentedControlProps,
+  type SegmentedControlAPI,
+} from './segmented-control.js'
+
+export {
+  segmentedControlVariants,
+  segmentedControlItemVariants,
+} from './segmented-control.styles.js'

package/dist/segmented-control/segmented-control.styles.ts

@@ -0,0 +1,42 @@
+import { cva } from '../shared/index.ts'
+
+/** Pill-shaped container that holds the segments (`role="radiogroup"`). */
+export const segmentedControlVariants = cva({
+  base: 'inline-flex items-center gap-1 rounded-lg bg-muted p-1',
+  variants: {
+    size: {
+      sm: '',
+      md: '',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+/**
+ * A single segment (`role="radio"`). The `state` variant carries the
+ * active vs inactive visual treatment so adapters never inline these classes.
+ */
+export const segmentedControlItemVariants = cva({
+  base: [
+    'inline-flex items-center justify-center gap-1.5 rounded-md font-medium',
+    'whitespace-nowrap transition-colors',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+    'focus-visible:ring-offset-2 focus-visible:ring-offset-muted',
+  ].join(' '),
+  variants: {
+    size: {
+      sm: 'px-2.5 py-1 text-xs',
+      md: 'px-3 py-1.5 text-sm',
+    },
+    state: {
+      checked: 'bg-background text-foreground shadow-sm',
+      unchecked: 'text-muted-foreground hover:text-foreground',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    state: 'unchecked',
+  },
+})

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

@@ -0,0 +1,80 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type SegmentedControlSize = 'sm' | 'md'
+
+/** Value identifying a single segment. */
+export type SegmentedControlValue = string
+
+export interface SegmentedControlProps {
+  /** Currently selected segment value (controlled). */
+  value?: SegmentedControlValue
+  /** Visual size of the control. */
+  size?: SegmentedControlSize
+}
+
+export interface SegmentedControlAPI {
+  /** ARIA attributes to spread on the group element. */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for CSS styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic group props for a segmented control.
+ *
+ * Returns `role="radiogroup"` plus data attributes; adapters spread these
+ * onto their group element and handle their own rendering/state.
+ */
+export function createSegmentedControl(
+  props: SegmentedControlProps = {},
+): SegmentedControlAPI {
+  const { value, size = 'md' } = props
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'radiogroup',
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-size': size,
+  }
+  if (value !== undefined) {
+    dataAttributes['data-value'] = value
+  }
+
+  return { ariaProps, dataAttributes }
+}
+
+/**
+ * Pure keyboard-navigation rule shared by every adapter.
+ *
+ * Given the current index, the pressed key, and the item count, returns the
+ * index that focus/selection should move to. Arrow keys wrap; Home/End jump
+ * to the ends. Unhandled keys (or an empty group) return `current` unchanged.
+ *
+ * - ArrowRight / ArrowDown → next (wraps to 0 past the end)
+ * - ArrowLeft  / ArrowUp   → previous (wraps to last before 0)
+ * - Home                   → first
+ * - End                    → last
+ */
+export 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
+  }
+}

package/dist/separator/index.ts

@@ -0,0 +1,12 @@
+export {
+  createSeparator,
+  type SeparatorOrientation,
+  type SeparatorProps,
+  type SeparatorAPI,
+} from './separator.js'
+
+export {
+  separatorVariants,
+  separatorLineClass,
+  separatorLabelClass,
+} from './separator.styles.js'

package/dist/separator/separator.styles.ts

@@ -0,0 +1,34 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Visual variants for the separator rule.
+ *
+ * - `orientation: horizontal` → a full-width 1px line.
+ * - `orientation: vertical` → a full-height 1px line.
+ * - `labeled` → flex layout used by the labeled-divider variant, which
+ *   arranges a centered label between two flanking lines.
+ */
+export const separatorVariants = cva({
+  base: '',
+  variants: {
+    orientation: {
+      horizontal: 'h-px w-full bg-border',
+      vertical: 'w-px h-full bg-border',
+    },
+    labeled: {
+      true: 'flex items-center',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    labeled: 'false',
+  },
+})
+
+/** Class for each flanking line in the labeled-divider variant. */
+export const separatorLineClass = 'h-px flex-1 bg-border'
+
+/** Class for the centered label in the labeled-divider variant. */
+export const separatorLabelClass =
+  'px-3 text-xs uppercase tracking-wide text-muted-foreground'

package/dist/separator/separator.ts

@@ -0,0 +1,53 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type SeparatorOrientation = 'horizontal' | 'vertical'
+
+export interface SeparatorProps {
+  /** Orientation of the separator. Defaults to `'horizontal'`. */
+  orientation?: SeparatorOrientation
+  /**
+   * When `true` (the default) the separator is purely visual and is hidden
+   * from assistive tech (`role="none"`). When `false` it is exposed as a
+   * semantic `role="separator"` with the appropriate `aria-orientation`.
+   */
+  decorative?: boolean
+}
+
+/**
+ * ARIA attributes for a separator. Extends the shared base with
+ * `aria-orientation`, which is specific to the `separator` role.
+ */
+export interface SeparatorAriaProps extends Partial<AccessibilityProps> {
+  'aria-orientation'?: SeparatorOrientation
+}
+
+export interface SeparatorAPI {
+  /** ARIA attributes to spread on the element. */
+  ariaProps: SeparatorAriaProps
+  /** Data attributes for CSS styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Headless separator core — computes ARIA semantics and data attributes for
+ * a separator rule. JSX-free so it can be shared across framework adapters.
+ *
+ * Per ARIA, a decorative separator must not be announced (`role="none"`),
+ * while a semantic one exposes `role="separator"` and `aria-orientation`.
+ */
+export function createSeparator(props: SeparatorProps = {}): SeparatorAPI {
+  const { orientation = 'horizontal', decorative = true } = props
+
+  const ariaProps: SeparatorAriaProps = decorative
+    ? { role: 'none' }
+    : { role: 'separator', 'aria-orientation': orientation }
+
+  const dataAttributes: Record<string, string> = {
+    'data-orientation': orientation,
+  }
+
+  return {
+    ariaProps,
+    dataAttributes,
+  }
+}

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

@@ -0,0 +1,14 @@
+export {
+  createSocialAuthButton,
+  PROVIDER_LABELS,
+  PROVIDER_MONO,
+  type SocialProvider,
+  type SocialAuthButtonProps,
+  type SocialAuthButtonAPI,
+} from './social-auth-button.js'
+
+export {
+  socialAuthButtonVariants,
+  socialAuthRowVariants,
+  lastUsedBadgeVariants,
+} from './social-auth-button.styles.js'

package/dist/social-auth-button/social-auth-button.styles.ts

@@ -0,0 +1,16 @@
+import { cva } from '../shared/index.ts'
+
+/** Wrapper around an individual social auth button (positions the lastUsed badge). */
+export const socialAuthButtonVariants = cva({
+  base: 'relative',
+})
+
+/** Responsive grid wrapper: one column on mobile, two columns from `sm` up. */
+export const socialAuthRowVariants = cva({
+  base: 'grid grid-cols-1 sm:grid-cols-2 gap-3',
+})
+
+/** Floating "Last used" badge anchored to the top-right of a button. */
+export const lastUsedBadgeVariants = cva({
+  base: 'absolute -top-2 -right-2 rounded-full bg-primary text-primary-foreground text-[10px] px-1.5',
+})

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

@@ -0,0 +1,51 @@
+export type SocialProvider = 'google' | 'github' | 'microsoft' | 'apple'
+
+/** "Continue with …" label shown on each provider's button. */
+export const PROVIDER_LABELS: Record<SocialProvider, string> = {
+  google: 'Continue with Google',
+  github: 'Continue with GitHub',
+  microsoft: 'Continue with Microsoft',
+  apple: 'Continue with Apple',
+}
+
+/**
+ * Which providers render their brand mark monochrome (currentColor). GitHub and
+ * Apple are monochrome by design so they read correctly on dark/outline
+ * surfaces; Google and Microsoft keep their full brand color.
+ */
+export const PROVIDER_MONO: Record<SocialProvider, boolean> = {
+  google: false,
+  github: true,
+  microsoft: false,
+  apple: true,
+}
+
+export interface SocialAuthButtonProps {
+  /** Identity provider this button authenticates against. */
+  provider: SocialProvider
+}
+
+export interface SocialAuthButtonAPI {
+  /** Data attributes for CSS styling hooks. */
+  dataAttributes: Record<string, string>
+  /** "Continue with …" label for the provider. */
+  label: string
+  /** Whether the brand mark should render monochrome. */
+  mono: boolean
+}
+
+/**
+ * Framework-agnostic core for a social sign-in button. Returns the provider
+ * label, monochrome hint, and the `data-provider` styling hook. No React/JSX.
+ */
+export function createSocialAuthButton(
+  props: SocialAuthButtonProps,
+): SocialAuthButtonAPI {
+  const { provider } = props
+
+  return {
+    dataAttributes: { 'data-provider': provider },
+    label: PROVIDER_LABELS[provider],
+    mono: PROVIDER_MONO[provider],
+  }
+}