@refraction-ui/astro 0.4.0 → 0.4.4

package/dist/inline-editor/inline-editor.ts

@@ -0,0 +1,96 @@
+export interface InlineEditorProps {
+  /** Current value */
+  value: string
+  /** Callback when saving */
+  onSave?: (value: string) => void
+  /** Callback when cancelling */
+  onCancel?: () => void
+}
+
+export interface ToolbarAction {
+  name: string
+  syntax: string
+}
+
+export interface InlineEditorState {
+  isEditing: boolean
+  value: string
+  preview: string
+}
+
+export interface InlineEditorAPI {
+  /** Current editor state */
+  state: InlineEditorState
+  /** Enter editing mode */
+  startEditing(): void
+  /** Cancel editing, revert to original value */
+  cancel(): void
+  /** Save the current value */
+  save(): void
+  /** Update the editing value */
+  updateValue(value: string): void
+  /** Insert syntax at cursor position */
+  insertAtCursor(syntax: string): void
+  /** Available toolbar actions */
+  toolbarActions: ToolbarAction[]
+}
+
+export function createInlineEditor(props: InlineEditorProps): InlineEditorAPI {
+  const { value: initialValue, onSave, onCancel } = props
+
+  let isEditing = false
+  let currentValue = initialValue
+
+  const toolbarActions: ToolbarAction[] = [
+    { name: 'bold', syntax: '**' },
+    { name: 'heading', syntax: '# ' },
+    { name: 'list', syntax: '- ' },
+    { name: 'link', syntax: '[text](url)' },
+  ]
+
+  function startEditing(): void {
+    isEditing = true
+    currentValue = initialValue
+  }
+
+  function cancel(): void {
+    isEditing = false
+    currentValue = initialValue
+    onCancel?.()
+  }
+
+  function save(): void {
+    isEditing = false
+    onSave?.(currentValue)
+  }
+
+  function updateValue(value: string): void {
+    currentValue = value
+  }
+
+  function insertAtCursor(syntax: string): void {
+    currentValue = currentValue + syntax
+  }
+
+  return {
+    get state(): InlineEditorState {
+      return {
+        get isEditing() {
+          return isEditing
+        },
+        get value() {
+          return currentValue
+        },
+        get preview() {
+          return currentValue
+        },
+      }
+    },
+    startEditing,
+    cancel,
+    save,
+    updateValue,
+    insertAtCursor,
+    toolbarActions,
+  }
+}

package/dist/input/index.ts

@@ -0,0 +1,9 @@
+export {
+  createInput,
+  getInputAriaProps,
+  type InputType,
+  type InputProps,
+  type InputAPI,
+} from './input.js'
+
+export { inputVariants } from './input.styles.js'

package/dist/input/input.styles.ts

@@ -0,0 +1,15 @@
+import { cva } from '../shared/index.ts'
+
+export const inputVariants = cva({
+  base: 'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+  variants: {
+    size: {
+      sm: 'h-8 text-xs',
+      default: 'h-9',
+      lg: 'h-10 text-base',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+})

package/dist/input/input.ts

@@ -0,0 +1,84 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search'
+
+export interface InputProps {
+  type?: InputType
+  disabled?: boolean
+  readOnly?: boolean
+  required?: boolean
+  placeholder?: string
+  'aria-invalid'?: boolean
+}
+
+export interface InputAPI {
+  /** ARIA attributes to spread on the element */
+  ariaProps: Partial<AccessibilityProps> & { 'aria-invalid'?: boolean; 'aria-required'?: boolean }
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+}
+
+export function createInput(props: InputProps = {}): InputAPI {
+  const {
+    disabled = false,
+    readOnly = false,
+    required = false,
+    'aria-invalid': ariaInvalid,
+  } = props
+
+  const ariaProps: InputAPI['ariaProps'] = {}
+
+  if (disabled) {
+    ariaProps['aria-disabled'] = true
+  }
+
+  if (ariaInvalid) {
+    ariaProps['aria-invalid'] = true
+  }
+
+  if (required) {
+    ariaProps['aria-required'] = true
+  }
+
+  const dataAttributes: Record<string, string> = {}
+
+  if (disabled) {
+    dataAttributes['data-disabled'] = ''
+  }
+
+  if (readOnly) {
+    dataAttributes['data-readonly'] = ''
+  }
+
+  if (ariaInvalid) {
+    dataAttributes['data-invalid'] = ''
+  }
+
+  return {
+    ariaProps,
+    dataAttributes,
+  }
+}
+
+export function getInputAriaProps(state: {
+  disabled?: boolean
+  readOnly?: boolean
+  required?: boolean
+  invalid?: boolean
+}): Partial<AccessibilityProps> & { 'aria-invalid'?: boolean; 'aria-required'?: boolean } {
+  const ariaProps: Partial<AccessibilityProps> & { 'aria-invalid'?: boolean; 'aria-required'?: boolean } = {}
+
+  if (state.disabled) {
+    ariaProps['aria-disabled'] = true
+  }
+
+  if (state.invalid) {
+    ariaProps['aria-invalid'] = true
+  }
+
+  if (state.required) {
+    ariaProps['aria-required'] = true
+  }
+
+  return ariaProps
+}

package/dist/input-group/index.ts

@@ -0,0 +1,13 @@
+export {
+  createInputGroup,
+  type InputGroupProps,
+  type InputGroupAPI,
+  type InputGroupOrientation,
+} from './input-group.js'
+
+export {
+  inputGroupVariants,
+  inputGroupAddonVariants,
+  inputGroupButtonVariants,
+  inputGroupTokens,
+} from './input-group.styles.js'

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

@@ -0,0 +1,50 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const inputGroupTokens: TokenContract = {
+  name: 'input-group',
+  tokens: {
+    bg: { variable: '--rfr-input-group-bg', fallback: 'hsl(var(--background))' },
+    border: { variable: '--rfr-input-group-border', fallback: 'hsl(var(--border))' },
+    radius: { variable: '--rfr-input-group-radius', fallback: 'var(--radius)' },
+  },
+}
+
+export const inputGroupVariants = cva({
+  base: 'flex items-stretch [&>*:not(:first-child):not(:last-child)]:rounded-none',
+  variants: {
+    orientation: {
+      horizontal: 'flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none',
+      vertical: 'flex-col [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+})
+
+export const inputGroupAddonVariants = cva({
+  base: 'flex items-center justify-center border bg-muted px-3 text-sm text-muted-foreground',
+  variants: {
+    orientation: {
+      horizontal: 'border-y border-x first:border-r-0 last:border-l-0',
+      vertical: 'border-x border-y first:border-b-0 last:border-t-0',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+})
+
+export const inputGroupButtonVariants = cva({
+  base: 'relative inline-flex items-center justify-center whitespace-nowrap 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',
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: '',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+})

package/dist/input-group/input-group.ts

@@ -0,0 +1,44 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+import { generateId } from '../shared/index.ts'
+
+export type InputGroupOrientation = 'horizontal' | 'vertical'
+
+export interface InputGroupProps {
+  orientation?: InputGroupOrientation
+  id?: string
+  'aria-label'?: string
+  'aria-labelledby'?: string
+}
+
+export interface InputGroupAPI {
+  /** ARIA attributes to spread on the group container */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+}
+
+export function createInputGroup(props: InputGroupProps = {}): InputGroupAPI {
+  const { orientation = 'horizontal' } = props
+  const id = props.id ?? generateId('rfr-input-group')
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'group',
+  }
+
+  if (props['aria-label']) {
+    ariaProps['aria-label'] = props['aria-label']
+  }
+  if (props['aria-labelledby']) {
+    ariaProps['aria-labelledby'] = props['aria-labelledby']
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-orientation': orientation,
+    id,
+  }
+
+  return {
+    ariaProps,
+    dataAttributes,
+  }
+}

package/dist/install-prompt/index.ts

@@ -0,0 +1,9 @@
+export {
+  createInstallPrompt,
+  type StorageAdapter,
+  type InstallPromptProps,
+  type InstallPromptState,
+  type InstallPromptAPI,
+} from './install-prompt.js'
+
+export { installPromptVariants } from './install-prompt.styles.js'

package/dist/install-prompt/install-prompt.styles.ts

@@ -0,0 +1,5 @@
+import { cva } from '../shared/index.ts'
+
+export const installPromptVariants = cva({
+  base: 'fixed bottom-0 left-0 right-0 z-50 flex items-center justify-between gap-4 border-t bg-background px-4 py-3 shadow-lg',
+})

package/dist/install-prompt/install-prompt.ts

@@ -0,0 +1,68 @@
+export interface StorageAdapter {
+  get(key: string): string | null
+  set(key: string, value: string): void
+}
+
+export interface InstallPromptProps {
+  /** Delay in ms before showing prompt. Default: 3000 */
+  delay?: number
+  /** Key used to persist dismissed state. Default: 'rfr-install-dismissed' */
+  storageKey?: string
+}
+
+export interface InstallPromptState {
+  canShow: boolean
+  isDismissed: boolean
+}
+
+export interface InstallPromptAPI {
+  state: InstallPromptState
+  /** Mark the prompt as showable (call after delay + event fire) */
+  show(): void
+  /** Dismiss and persist */
+  dismiss(): void
+  /** Trigger the browser install prompt */
+  install(promptEvent?: { prompt(): void }): void
+  /** ARIA attributes for the banner */
+  ariaProps: Record<string, string>
+}
+
+export function createInstallPrompt(
+  props: InstallPromptProps = {},
+  storage?: StorageAdapter,
+): InstallPromptAPI {
+  const { storageKey = 'rfr-install-dismissed' } = props
+
+  const dismissed = storage?.get(storageKey) === 'true'
+
+  const state: InstallPromptState = {
+    canShow: false,
+    isDismissed: dismissed,
+  }
+
+  return {
+    state,
+
+    show() {
+      if (!state.isDismissed) {
+        state.canShow = true
+      }
+    },
+
+    dismiss() {
+      state.canShow = false
+      state.isDismissed = true
+      storage?.set(storageKey, 'true')
+    },
+
+    install(promptEvent?: { prompt(): void }) {
+      promptEvent?.prompt()
+      state.canShow = false
+    },
+
+    ariaProps: {
+      role: 'banner',
+      'aria-label': 'Install application',
+    },
+  }
+}

package/dist/keyboard-shortcut/index.ts

@@ -0,0 +1,12 @@
+export {
+  createKeyboardShortcut,
+  formatShortcut,
+  type ShortcutProps,
+  type KeyboardShortcutAPI,
+} from './keyboard-shortcut.js'
+
+export {
+  shortcutBadgeStyles,
+  shortcutKeyStyles,
+  shortcutSeparatorStyles,
+} from './keyboard-shortcut.styles.js'

package/dist/keyboard-shortcut/keyboard-shortcut.styles.ts

@@ -0,0 +1,8 @@
+export const shortcutBadgeStyles =
+  'inline-flex items-center gap-0.5 rounded border bg-muted px-1.5 py-0.5 text-xs font-mono text-muted-foreground'
+
+export const shortcutKeyStyles =
+  'inline-flex items-center justify-center min-w-[1.25rem] rounded bg-background px-1 py-0.5 text-xs font-mono border shadow-sm'
+
+export const shortcutSeparatorStyles =
+  'text-muted-foreground text-xs'

package/dist/keyboard-shortcut/keyboard-shortcut.ts

@@ -0,0 +1,153 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export interface ShortcutProps {
+  /** Key combination (e.g., ['Ctrl', 'K'] or ['Meta', 'Shift', 'P']) */
+  keys: string[]
+  /** Callback when the shortcut is triggered */
+  onTrigger: () => void
+  /** Whether the shortcut is enabled */
+  enabled?: boolean
+  /** Prevent default browser behavior */
+  preventDefault?: boolean
+}
+
+export interface KeyboardShortcutAPI {
+  /** Handle a keyboard event (returns true if it matched) */
+  handler(event: KeyboardEvent): boolean
+  /** Human-readable display of the shortcut */
+  display: string
+  /** Platform-aware display (uses command symbol on Mac) */
+  platformDisplay: string
+  /** Whether the shortcut is currently enabled */
+  enabled: boolean
+  /** The key combination */
+  keys: string[]
+  /** ARIA props for a visual shortcut badge */
+  badgeAriaProps: Record<string, unknown>
+}
+
+const MODIFIER_KEYS = new Set(['Ctrl', 'Control', 'Alt', 'Shift', 'Meta', 'Cmd', 'Command'])
+
+const KEY_DISPLAY: Record<string, string> = {
+  'Ctrl': 'Ctrl',
+  'Control': 'Ctrl',
+  'Alt': 'Alt',
+  'Shift': 'Shift',
+  'Meta': 'Meta',
+  'Cmd': 'Cmd',
+  'Command': 'Cmd',
+  'Enter': '\u21B5',
+  'Backspace': '\u232B',
+  'Delete': 'Del',
+  'Escape': 'Esc',
+  'ArrowUp': '\u2191',
+  'ArrowDown': '\u2193',
+  'ArrowLeft': '\u2190',
+  'ArrowRight': '\u2192',
+  'Tab': 'Tab',
+  ' ': 'Space',
+}
+
+const MAC_KEY_DISPLAY: Record<string, string> = {
+  'Ctrl': '\u2303',
+  'Control': '\u2303',
+  'Alt': '\u2325',
+  'Shift': '\u21E7',
+  'Meta': '\u2318',
+  'Cmd': '\u2318',
+  'Command': '\u2318',
+  'Enter': '\u21B5',
+  'Backspace': '\u232B',
+  'Delete': '\u2326',
+  'Escape': '\u238B',
+  'ArrowUp': '\u2191',
+  'ArrowDown': '\u2193',
+  'ArrowLeft': '\u2190',
+  'ArrowRight': '\u2192',
+  'Tab': '\u21E5',
+  ' ': '\u2423',
+}
+
+function normalizeKey(key: string): string {
+  // Normalize modifier variants
+  if (key === 'Command' || key === 'Cmd') return 'Meta'
+  if (key === 'Control') return 'Ctrl'
+  return key
+}
+
+function isMac(): boolean {
+  if (typeof navigator !== 'undefined') {
+    return navigator.platform?.includes('Mac') || navigator.userAgent?.includes('Mac')
+  }
+  return false
+}
+
+export function formatShortcut(keys: string[], mac?: boolean): string {
+  const displayMap = mac ? MAC_KEY_DISPLAY : KEY_DISPLAY
+  return keys.map((key) => displayMap[key] ?? key.toUpperCase()).join(mac ? '' : '+')
+}
+
+export function createKeyboardShortcut(props: ShortcutProps): KeyboardShortcutAPI {
+  const {
+    keys,
+    onTrigger,
+    enabled: enabledProp = true,
+    preventDefault: preventDefaultProp = true,
+  } = props
+
+  const normalizedKeys = keys.map(normalizeKey)
+  const modifiers = normalizedKeys.filter((k) => MODIFIER_KEYS.has(k))
+  const regularKeys = normalizedKeys.filter((k) => !MODIFIER_KEYS.has(k))
+
+  function handler(event: KeyboardEvent): boolean {
+    if (!enabledProp) return false
+
+    // Check modifiers
+    const ctrlRequired = modifiers.includes('Ctrl')
+    const altRequired = modifiers.includes('Alt')
+    const shiftRequired = modifiers.includes('Shift')
+    const metaRequired = modifiers.includes('Meta')
+
+    if (ctrlRequired !== (event.ctrlKey || event.metaKey && !metaRequired)) {
+      // For Ctrl, also accept Meta on Mac
+    }
+
+    const ctrlMatch = ctrlRequired ? event.ctrlKey : !event.ctrlKey
+    const altMatch = altRequired ? event.altKey : !event.altKey
+    const shiftMatch = shiftRequired ? event.shiftKey : !event.shiftKey
+    const metaMatch = metaRequired ? event.metaKey : !event.metaKey
+
+    if (!ctrlMatch || !altMatch || !shiftMatch || !metaMatch) return false
+
+    // Check regular key
+    if (regularKeys.length > 0) {
+      const eventKey = event.key.length === 1 ? event.key.toUpperCase() : event.key
+      const targetKey = regularKeys[0].length === 1 ? regularKeys[0].toUpperCase() : regularKeys[0]
+      if (eventKey !== targetKey) return false
+    }
+
+    if (preventDefaultProp) {
+      event.preventDefault()
+    }
+    onTrigger()
+    return true
+  }
+
+  const mac = isMac()
+  const display = formatShortcut(keys, false)
+  const platformDisplay = formatShortcut(keys, mac)
+
+  const badgeAriaProps: Record<string, unknown> = {
+    'aria-hidden': true,
+    role: 'presentation',
+  }
+
+  return {
+    handler,
+    display,
+    platformDisplay,
+    enabled: enabledProp,
+    keys,
+    badgeAriaProps,
+  }
+}

package/dist/language-selector/index.ts

@@ -0,0 +1,8 @@
+export {
+  createLanguageSelector,
+  type LanguageSelectorProps,
+  type LanguageSelectorAPI,
+  type LanguageOption,
+} from './language-selector.js'
+
+export { selectorVariants, optionVariants } from './language-selector.styles.js'

package/dist/language-selector/language-selector.styles.ts

@@ -0,0 +1,28 @@
+import { cva } from '../shared/index.ts'
+
+export const selectorVariants = cva({
+  base: 'relative inline-flex items-center justify-between rounded-md border bg-background text-foreground cursor-pointer',
+  variants: {
+    size: {
+      sm: 'h-8 text-sm px-2 min-w-[120px]',
+      md: 'h-10 text-base px-3 min-w-[160px]',
+      lg: 'h-12 text-lg px-4 min-w-[200px]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const optionVariants = cva({
+  base: 'flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-accent',
+  variants: {
+    selected: {
+      true: 'bg-accent/50 font-medium',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    selected: 'false',
+  },
+})