@refraction-ui/astro 0.4.0 → 0.4.4

package/dist/checkbox/checkbox.ts

@@ -0,0 +1,73 @@
+import type { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.ts'
+import { Keys } from '../shared/index.ts'
+
+export type CheckedState = boolean | 'indeterminate'
+
+export interface CheckboxProps {
+  checked?: CheckedState
+  disabled?: boolean
+  required?: boolean
+  name?: string
+  value?: string
+}
+
+export interface CheckboxAPI {
+  /** ARIA attributes to spread on the element */
+  ariaProps: Partial<AccessibilityProps>
+  /** Keyboard handlers to attach */
+  keyboardHandlers: KeyboardHandlerMap
+  /** Whether interaction should be blocked */
+  isInteractive: boolean
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+  /** Current state */
+  state: {
+    checked: CheckedState
+    disabled: boolean
+  }
+}
+
+export function createCheckbox(props: CheckboxProps = {}): CheckboxAPI {
+  const { checked = false, disabled = false } = props
+  const isInteractive = !disabled
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'checkbox',
+    'aria-checked': checked === 'indeterminate' ? 'mixed' : checked,
+  }
+
+  if (disabled) {
+    ariaProps['aria-disabled'] = true
+  }
+
+  const dataAttributes: Record<string, string> = {}
+  if (checked === 'indeterminate') {
+    dataAttributes['data-state'] = 'indeterminate'
+  } else if (checked) {
+    dataAttributes['data-state'] = 'checked'
+  } else {
+    dataAttributes['data-state'] = 'unchecked'
+  }
+  if (disabled) {
+    dataAttributes['data-disabled'] = ''
+  }
+
+  const keyboardHandlers: KeyboardHandlerMap = {}
+  if (!isInteractive) {
+    keyboardHandlers[Keys.Space] = (e) => e.preventDefault()
+  }
+
+  return {
+    ariaProps,
+    keyboardHandlers,
+    isInteractive,
+    dataAttributes,
+    state: { checked, disabled },
+  }
+}
+
+/** SVG path data for the check icon */
+export const checkIconPath = 'M20 6L9 17l-5-5'
+
+/** SVG path data for the indeterminate/minus icon */
+export const indeterminateIconPath = 'M5 12h14'

package/dist/checkbox/index.ts

@@ -0,0 +1,10 @@
+export {
+  createCheckbox,
+  checkIconPath,
+  indeterminateIconPath,
+  type CheckboxProps,
+  type CheckboxAPI,
+  type CheckedState,
+} from './checkbox.js'
+
+export { checkboxVariants, checkboxTokens } from './checkbox.styles.js'

package/dist/code-block/code-block.ts

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

package/dist/code-block/index.ts

@@ -0,0 +1 @@
+export * from './code-block';

package/dist/code-editor/code-editor.styles.ts

@@ -0,0 +1,32 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const codeEditorTokens: TokenContract = {
+  name: 'code-editor',
+  tokens: {
+    bg: { variable: '--rfr-code-editor-bg', fallback: 'hsl(var(--background))' },
+    fg: { variable: '--rfr-code-editor-fg', fallback: 'hsl(var(--foreground))' },
+    headerBg: { variable: '--rfr-code-editor-header-bg', fallback: 'hsl(var(--muted))' },
+    border: { variable: '--rfr-code-editor-border', fallback: 'hsl(var(--border))' },
+    lineNumberFg: { variable: '--rfr-code-editor-line-number', fallback: 'hsl(var(--muted-foreground))' },
+  },
+}
+
+export const codeEditorVariants = cva({
+  base: 'flex flex-col rounded-lg border overflow-hidden font-mono text-sm',
+  variants: {
+    theme: {
+      light: 'bg-white text-gray-900 border-gray-200',
+      dark: 'bg-gray-900 text-gray-100 border-gray-700',
+    },
+    size: {
+      sm: 'text-xs',
+      default: 'text-sm',
+      lg: 'text-base',
+    },
+  },
+  defaultVariants: {
+    theme: 'light',
+    size: 'default',
+  },
+})

package/dist/code-editor/code-editor.ts

@@ -0,0 +1,140 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type CodeEditorTheme = 'light' | 'dark'
+
+export interface CodeEditorProps {
+  value?: string
+  onChange?: (value: string) => void
+  language?: string
+  readOnly?: boolean
+  theme?: CodeEditorTheme
+}
+
+export interface CodeEditorState {
+  value: string
+  language: string
+  theme: CodeEditorTheme
+}
+
+export interface CodeEditorAPI {
+  /** Current editor state */
+  state: CodeEditorState
+  /** ARIA attributes for the editor element */
+  ariaProps: Partial<AccessibilityProps> & { 'aria-multiline'?: boolean }
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+  /** Update the editor value */
+  setValue: (value: string) => void
+  /** Get a human-readable label for the current language */
+  getLanguageLabel: () => string
+}
+
+/** Map of language identifiers to human-readable labels */
+const languageLabels: Record<string, string> = {
+  js: 'JavaScript',
+  javascript: 'JavaScript',
+  ts: 'TypeScript',
+  typescript: 'TypeScript',
+  jsx: 'JSX',
+  tsx: 'TSX',
+  py: 'Python',
+  python: 'Python',
+  rb: 'Ruby',
+  ruby: 'Ruby',
+  go: 'Go',
+  rust: 'Rust',
+  rs: 'Rust',
+  java: 'Java',
+  cpp: 'C++',
+  c: 'C',
+  cs: 'C#',
+  csharp: 'C#',
+  html: 'HTML',
+  css: 'CSS',
+  json: 'JSON',
+  yaml: 'YAML',
+  yml: 'YAML',
+  md: 'Markdown',
+  markdown: 'Markdown',
+  sql: 'SQL',
+  sh: 'Shell',
+  bash: 'Bash',
+  zsh: 'Zsh',
+  xml: 'XML',
+  toml: 'TOML',
+  swift: 'Swift',
+  kotlin: 'Kotlin',
+  dart: 'Dart',
+  php: 'PHP',
+  lua: 'Lua',
+  r: 'R',
+  scala: 'Scala',
+}
+
+/**
+ * Create a headless code editor API.
+ *
+ * This provides the headless interface for a code editor — state management,
+ * ARIA props, and data attributes. Actual rendering (Monaco, CodeMirror, or
+ * a simple textarea) is handled by framework-specific wrappers.
+ */
+export function createCodeEditor(props: CodeEditorProps = {}): CodeEditorAPI {
+  const {
+    value = '',
+    onChange,
+    language = 'plaintext',
+    readOnly = false,
+    theme = 'light',
+  } = props
+
+  let currentValue = value
+
+  const state: CodeEditorState = {
+    value: currentValue,
+    language,
+    theme,
+  }
+
+  const ariaProps: Partial<AccessibilityProps> & { 'aria-multiline'?: boolean; 'aria-readonly'?: boolean } = {
+    role: 'textbox',
+    'aria-multiline': true,
+    'aria-label': `Code editor - ${getLabel(language)}`,
+  }
+
+  if (readOnly) {
+    ariaProps['aria-readonly'] = true
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-language': language,
+    'data-theme': theme,
+  }
+
+  if (readOnly) {
+    dataAttributes['data-readonly'] = ''
+  }
+
+  function setValue(newValue: string) {
+    currentValue = newValue
+    state.value = newValue
+    if (onChange) {
+      onChange(newValue)
+    }
+  }
+
+  function getLabel(lang: string): string {
+    return languageLabels[lang.toLowerCase()] ?? lang.charAt(0).toUpperCase() + lang.slice(1)
+  }
+
+  function getLanguageLabel(): string {
+    return getLabel(language)
+  }
+
+  return {
+    state,
+    ariaProps,
+    dataAttributes,
+    setValue,
+    getLanguageLabel,
+  }
+}

package/dist/code-editor/index.ts

@@ -0,0 +1,9 @@
+export {
+  createCodeEditor,
+  type CodeEditorProps,
+  type CodeEditorAPI,
+  type CodeEditorState,
+  type CodeEditorTheme,
+} from './code-editor.js'
+
+export { codeEditorVariants, codeEditorTokens } from './code-editor.styles.js'

package/dist/collapsible/collapsible.styles.ts

@@ -0,0 +1,14 @@
+import { cva } from '../shared/index.ts'
+
+export const collapsibleContentVariants = cva({
+  base: 'overflow-hidden transition-all',
+  variants: {
+    state: {
+      open: 'animate-accordion-down',
+      closed: 'animate-accordion-up',
+    },
+  },
+  defaultVariants: {
+    state: 'closed',
+  },
+})

package/dist/collapsible/collapsible.ts

@@ -0,0 +1,93 @@
+import { generateId, Keys, createKeyboardHandler } from '../shared/index.ts'
+
+export interface CollapsibleProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  disabled?: boolean
+}
+
+export interface CollapsibleAPI {
+  /** Current open state */
+  state: { open: boolean }
+  /** Props to spread on the trigger element */
+  triggerProps: {
+    'aria-expanded': boolean
+    'aria-controls': string
+    'data-state': 'open' | 'closed'
+    'data-disabled': string | undefined
+  }
+  /** Props to spread on the content element */
+  contentProps: {
+    id: string
+    role: 'region'
+    'data-state': 'open' | 'closed'
+    hidden: boolean
+  }
+  /** Toggle the open state */
+  toggle: () => void
+  /** Open the collapsible */
+  open: () => void
+  /** Close the collapsible */
+  close: () => void
+  /** Keyboard event handler for Enter/Space toggle */
+  keyboardHandler: (event: KeyboardEvent) => void
+}
+
+export function createCollapsible(props: CollapsibleProps = {}): CollapsibleAPI {
+  const {
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    disabled = false,
+  } = props
+
+  const isControlled = controlledOpen !== undefined
+  let internalOpen = isControlled ? controlledOpen : defaultOpen
+  const contentId = generateId('rfr-collapsible')
+
+  const setOpen = (next: boolean) => {
+    if (disabled) return
+    if (!isControlled) {
+      internalOpen = next
+    }
+    onOpenChange?.(next)
+  }
+
+  const toggle = () => setOpen(!internalOpen)
+  const openFn = () => setOpen(true)
+  const closeFn = () => setOpen(false)
+
+  const keyboardHandler = createKeyboardHandler({
+    [Keys.Enter]: (event: KeyboardEvent) => {
+      event.preventDefault()
+      toggle()
+    },
+    [Keys.Space]: (event: KeyboardEvent) => {
+      event.preventDefault()
+      toggle()
+    },
+  })
+
+  const dataState = internalOpen ? 'open' : 'closed'
+
+  return {
+    state: { open: internalOpen },
+    triggerProps: {
+      'aria-expanded': internalOpen,
+      'aria-controls': contentId,
+      'data-state': dataState,
+      'data-disabled': disabled ? '' : undefined,
+    },
+    contentProps: {
+      id: contentId,
+      role: 'region',
+      'data-state': dataState,
+      hidden: !internalOpen,
+    },
+    toggle,
+    open: openFn,
+    close: closeFn,
+    keyboardHandler,
+  }
+}

package/dist/collapsible/index.ts

@@ -0,0 +1,7 @@
+export {
+  createCollapsible,
+  type CollapsibleProps,
+  type CollapsibleAPI,
+} from './collapsible.js'
+
+export { collapsibleContentVariants } from './collapsible.styles.js'

package/dist/command/command.styles.ts

@@ -0,0 +1,27 @@
+import { cva } from '../shared/index.ts'
+
+export const commandVariants = cva({
+  base: 'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+})
+
+export const commandInputVariants = cva({
+  base: 'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+})
+
+export const commandItemVariants = cva({
+  base: 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+  variants: {
+    state: {
+      default: '',
+      selected: 'bg-accent text-accent-foreground',
+      disabled: 'pointer-events-none opacity-50',
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+})
+
+export const commandGroupVariants = cva({
+  base: 'overflow-hidden p-1 text-foreground',
+})

package/dist/command/command.ts

@@ -0,0 +1,179 @@
+import type { KeyboardHandlerMap } from '../shared/index.ts'
+import { Keys, generateId } from '../shared/index.ts'
+
+export interface CommandProps {
+  /** Whether the command palette is open (controlled) */
+  open?: boolean
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void
+  /** Custom filter function — receives item value and search query, returns true to include */
+  filter?: (value: string, search: string) => boolean
+}
+
+export interface CommandItemData {
+  /** Unique identifier for the item */
+  id: string
+  /** Display label */
+  label: string
+  /** Searchable value */
+  value: string
+  /** Whether the item is disabled */
+  disabled?: boolean
+  /** Optional group the item belongs to */
+  group?: string
+}
+
+export interface CommandState {
+  /** Current search query */
+  search: string
+  /** Items after filtering */
+  filteredItems: CommandItemData[]
+  /** Index of the currently highlighted item in filteredItems */
+  selectedIndex: number
+  /** Whether the palette is open */
+  open: boolean
+}
+
+export interface CommandAPI {
+  /** Current command state */
+  state: CommandState
+  /** Update the search query and re-filter items */
+  search(query: string): void
+  /** Select the item at the given index (or the currently highlighted item) */
+  select(index?: number): CommandItemData | undefined
+  /** Keyboard handlers for the command palette */
+  keyboardHandlers: KeyboardHandlerMap
+  /** ARIA attributes for the command root */
+  ariaProps: Record<string, unknown>
+  /** ARIA attributes for the input */
+  inputAriaProps: Record<string, unknown>
+  /** ARIA attributes for the list */
+  listAriaProps: Record<string, unknown>
+  /** Get ARIA attributes for a specific item */
+  getItemAriaProps(item: CommandItemData, index: number): Record<string, unknown>
+  /** Generated IDs */
+  ids: {
+    root: string
+    input: string
+    list: string
+  }
+}
+
+/** Default filter: case-insensitive includes */
+function defaultFilter(value: string, search: string): boolean {
+  return value.toLowerCase().includes(search.toLowerCase())
+}
+
+export function createCommand(
+  props: CommandProps = {},
+  items: CommandItemData[] = [],
+): CommandAPI {
+  const {
+    open: controlledOpen,
+    onOpenChange,
+    filter = defaultFilter,
+  } = props
+
+  const rootId = generateId('rfr-cmd')
+  const inputId = generateId('rfr-cmd-input')
+  const listId = generateId('rfr-cmd-list')
+
+  let searchQuery = ''
+  let selectedIndex = 0
+  let filteredItems = [...items]
+  const isOpen = controlledOpen ?? true
+
+  function applyFilter(query: string): CommandItemData[] {
+    if (!query) return [...items]
+    return items.filter((item) => filter(item.value, query))
+  }
+
+  function doSearch(query: string): void {
+    searchQuery = query
+    filteredItems = applyFilter(query)
+    selectedIndex = 0
+  }
+
+  function doSelect(index?: number): CommandItemData | undefined {
+    const idx = index ?? selectedIndex
+    const item = filteredItems[idx]
+    if (!item || item.disabled) return undefined
+    return item
+  }
+
+  const keyboardHandlers: KeyboardHandlerMap = {
+    [Keys.ArrowDown]: (e) => {
+      e.preventDefault()
+      if (filteredItems.length > 0) {
+        selectedIndex = (selectedIndex + 1) % filteredItems.length
+      }
+    },
+    [Keys.ArrowUp]: (e) => {
+      e.preventDefault()
+      if (filteredItems.length > 0) {
+        selectedIndex = (selectedIndex - 1 + filteredItems.length) % filteredItems.length
+      }
+    },
+    [Keys.Enter]: (e) => {
+      e.preventDefault()
+      doSelect()
+    },
+    [Keys.Escape]: (e) => {
+      e.preventDefault()
+      onOpenChange?.(false)
+    },
+  }
+
+  const ariaProps: Record<string, unknown> = {
+    role: 'combobox',
+    'aria-expanded': isOpen,
+    'aria-haspopup': 'listbox',
+    'aria-owns': listId,
+    id: rootId,
+  }
+
+  const inputAriaProps: Record<string, unknown> = {
+    role: 'searchbox',
+    'aria-autocomplete': 'list',
+    'aria-controls': listId,
+    id: inputId,
+  }
+
+  const listAriaProps: Record<string, unknown> = {
+    role: 'listbox',
+    id: listId,
+    'aria-label': 'Command suggestions',
+  }
+
+  function getItemAriaProps(item: CommandItemData, index: number): Record<string, unknown> {
+    return {
+      role: 'option',
+      'aria-selected': index === selectedIndex,
+      'aria-disabled': item.disabled ?? false,
+      id: `${listId}-item-${item.id}`,
+    }
+  }
+
+  return {
+    get state(): CommandState {
+      return {
+        search: searchQuery,
+        filteredItems,
+        selectedIndex,
+        open: isOpen,
+      }
+    },
+    search: doSearch,
+    select: doSelect,
+    keyboardHandlers,
+    ariaProps,
+    inputAriaProps,
+    listAriaProps,
+    getItemAriaProps,
+    ids: {
+      root: rootId,
+      input: inputId,
+      list: listId,
+    },
+  }
+}

package/dist/command/index.ts

@@ -0,0 +1,14 @@
+export {
+  createCommand,
+  type CommandProps,
+  type CommandItemData,
+  type CommandState,
+  type CommandAPI,
+} from './command.js'
+
+export {
+  commandVariants,
+  commandInputVariants,
+  commandItemVariants,
+  commandGroupVariants,
+} from './command.styles.js'