@refraction-ui/astro 0.4.2 → 0.4.4

package/dist/emoji-picker/index.ts

@@ -0,0 +1,25 @@
+export {
+  createEmojiPicker,
+  type EmojiPickerProps,
+  type EmojiPickerState,
+  type EmojiPickerAPI,
+} from './emoji-picker.js'
+
+export {
+  EMOJI_DATA,
+  EMOJI_CATEGORIES,
+  CATEGORY_LABELS,
+  getAllEmojis,
+  type EmojiCategory,
+  type EmojiEntry,
+} from './emoji-data.js'
+
+export {
+  emojiPickerContainerStyles,
+  emojiPickerSearchStyles,
+  emojiPickerCategoryBarStyles,
+  emojiPickerCategoryTabVariants,
+  emojiPickerGridStyles,
+  emojiPickerEmojiButtonStyles,
+  emojiPickerSectionLabelStyles,
+} from './emoji-picker.styles.js'

package/dist/feedback-dialog/feedback-dialog.styles.ts

@@ -0,0 +1,15 @@
+import { cva } from '../shared/index.ts'
+
+export const feedbackDialogVariants = cva({
+  base: 'fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border bg-background p-6 shadow-lg',
+  variants: {
+    type: {
+      text: 'max-w-md',
+      video: 'max-w-lg',
+      general: 'max-w-md',
+    },
+  },
+  defaultVariants: {
+    type: 'general',
+  },
+})

package/dist/feedback-dialog/feedback-dialog.ts

@@ -0,0 +1,147 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+import { createDialog, type DialogAPI } from '../dialog/index.ts'
+import { generateId } from '../shared/index.ts'
+
+export type FeedbackType = 'text' | 'video' | 'general'
+
+export interface FeedbackDialogProps {
+  /** Whether the dialog is open (controlled) */
+  open?: boolean
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void
+  /** Callback when feedback is submitted */
+  onSubmit?: (data: FeedbackData) => void | Promise<void>
+  /** Feedback type */
+  type?: FeedbackType
+}
+
+export interface FeedbackData {
+  comment: string
+  email?: string
+  type: FeedbackType
+  selectedText?: string
+}
+
+export interface FeedbackFormState {
+  comment: string
+  email: string
+  honeypot: string
+}
+
+export interface FeedbackDialogState {
+  open: boolean
+  isSubmitting: boolean
+  isSubmitted: boolean
+}
+
+export interface FeedbackDialogAPI {
+  /** Current state */
+  state: FeedbackDialogState
+  /** Dialog props from the underlying createDialog */
+  dialogProps: DialogAPI
+  /** Form field values */
+  formState: FeedbackFormState
+  /** Set a form field value */
+  setField(field: keyof FeedbackFormState, value: string): void
+  /** Submit the feedback form */
+  submit(): Promise<void>
+  /** Reset form to initial state */
+  reset(): void
+  /** ARIA props for the feedback dialog */
+  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+}
+
+export function createFeedbackDialog(props: FeedbackDialogProps = {}): FeedbackDialogAPI {
+  const {
+    open: controlledOpen,
+    onOpenChange,
+    onSubmit,
+    type = 'general',
+  } = props
+
+  const dialog = createDialog({
+    open: controlledOpen,
+    onOpenChange,
+    modal: true,
+  })
+
+  let isSubmitting = false
+  let isSubmitted = false
+
+  const formState: FeedbackFormState = {
+    comment: '',
+    email: '',
+    honeypot: '',
+  }
+
+  const feedbackId = generateId('rfr-feedback')
+
+  function setField(field: keyof FeedbackFormState, value: string): void {
+    formState[field] = value
+  }
+
+  async function submit(): Promise<void> {
+    // Honeypot check — bots fill this hidden field
+    if (formState.honeypot) {
+      return
+    }
+
+    if (!formState.comment.trim()) {
+      return
+    }
+
+    isSubmitting = true
+
+    const data: FeedbackData = {
+      comment: formState.comment,
+      type,
+      ...(formState.email ? { email: formState.email } : {}),
+    }
+
+    try {
+      await onSubmit?.(data)
+      isSubmitting = false
+      isSubmitted = true
+    } catch {
+      isSubmitting = false
+    }
+  }
+
+  function reset(): void {
+    formState.comment = ''
+    formState.email = ''
+    formState.honeypot = ''
+    isSubmitting = false
+    isSubmitted = false
+  }
+
+  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'dialog',
+    'aria-modal': true,
+    'aria-labelledby': `${feedbackId}-title`,
+    'aria-describedby': `${feedbackId}-desc`,
+    id: feedbackId,
+  }
+
+  return {
+    get state() {
+      return {
+        get open() {
+          return dialog.state.open
+        },
+        get isSubmitting() {
+          return isSubmitting
+        },
+        get isSubmitted() {
+          return isSubmitted
+        },
+      }
+    },
+    dialogProps: dialog,
+    formState,
+    setField,
+    submit,
+    reset,
+    ariaProps,
+  }
+}

package/dist/feedback-dialog/index.ts

@@ -0,0 +1,11 @@
+export {
+  createFeedbackDialog,
+  type FeedbackType,
+  type FeedbackDialogProps,
+  type FeedbackData,
+  type FeedbackFormState,
+  type FeedbackDialogState,
+  type FeedbackDialogAPI,
+} from './feedback-dialog.js'
+
+export { feedbackDialogVariants } from './feedback-dialog.styles.js'

package/dist/file-upload/file-upload.styles.ts

@@ -0,0 +1,30 @@
+import { cva } from '../shared/index.ts'
+
+export const fileUploadDropZoneVariants = cva({
+  base: 'flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 text-center transition-colors cursor-pointer',
+  variants: {
+    state: {
+      idle: 'border-muted-foreground/25 hover:border-muted-foreground/50',
+      dragging: 'border-primary bg-primary/5',
+      disabled: 'opacity-50 cursor-not-allowed',
+    },
+  },
+  defaultVariants: {
+    state: 'idle',
+  },
+})
+
+export const fileUploadFileListStyles =
+  'mt-4 space-y-2'
+
+export const fileUploadFileItemStyles =
+  'flex items-center gap-3 rounded-md border p-3 text-sm'
+
+export const fileUploadProgressStyles =
+  'h-1.5 w-full rounded-full bg-secondary overflow-hidden'
+
+export const fileUploadProgressBarStyles =
+  'h-full rounded-full bg-primary transition-all duration-300'
+
+export const fileUploadRemoveButtonStyles =
+  'ml-auto text-muted-foreground hover:text-foreground cursor-pointer'

package/dist/file-upload/file-upload.ts

@@ -0,0 +1,260 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+import { generateId } from '../shared/index.ts'
+
+export type FileStatus = 'pending' | 'uploading' | 'complete' | 'error'
+
+export interface FileEntry {
+  /** Unique ID for this file entry */
+  id: string
+  /** Original file name */
+  name: string
+  /** File size in bytes */
+  size: number
+  /** MIME type */
+  type: string
+  /** Upload progress 0-100 */
+  progress: number
+  /** Current status */
+  status: FileStatus
+  /** Error message if status is 'error' */
+  error?: string
+}
+
+export interface FileUploadProps {
+  /** Accepted file types (e.g., 'image/*,.pdf') */
+  accept?: string
+  /** Max file size in bytes */
+  maxSize?: number
+  /** Max number of files */
+  maxFiles?: number
+  /** Allow multiple file selection */
+  multiple?: boolean
+  /** Callback when files are selected/added */
+  onFilesSelected?: (files: FileEntry[]) => void
+  /** Callback when a validation error occurs */
+  onError?: (errors: FileUploadError[]) => void
+}
+
+export interface FileUploadError {
+  file: string
+  code: 'type' | 'size' | 'count'
+  message: string
+}
+
+export interface FileUploadState {
+  files: FileEntry[]
+  isDragging: boolean
+}
+
+export interface FileUploadAPI {
+  /** Current state */
+  state: FileUploadState
+  /** Add files (validates type, size, count) */
+  addFiles(files: Array<{ name: string; size: number; type: string }>): void
+  /** Remove a file by ID */
+  removeFile(id: string): void
+  /** Update a file's progress */
+  updateProgress(id: string, progress: number): void
+  /** Set a file's status */
+  setStatus(id: string, status: FileStatus, error?: string): void
+  /** ARIA props for the drop zone */
+  dropZoneProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** ARIA props for the file input */
+  inputProps: Record<string, unknown>
+  /** Drag event handlers (for headless use) */
+  dragHandlers: {
+    onDragEnter(): void
+    onDragLeave(): void
+    onDragOver(): void
+    onDrop(): void
+  }
+  /** Generated IDs */
+  ids: {
+    dropZone: string
+    input: string
+    label: string
+    fileList: string
+  }
+}
+
+function matchesAccept(fileType: string, fileName: string, accept: string): boolean {
+  if (!accept) return true
+  const acceptedTypes = accept.split(',').map((t) => t.trim())
+  for (const accepted of acceptedTypes) {
+    if (accepted.startsWith('.')) {
+      // Extension match
+      if (fileName.toLowerCase().endsWith(accepted.toLowerCase())) return true
+    } else if (accepted.endsWith('/*')) {
+      // Wildcard MIME match (e.g., 'image/*')
+      const prefix = accepted.slice(0, -2)
+      if (fileType.startsWith(prefix)) return true
+    } else {
+      // Exact MIME match
+      if (fileType === accepted) return true
+    }
+  }
+  return false
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(1024))
+  const size = bytes / Math.pow(1024, i)
+  return `${size.toFixed(i === 0 ? 0 : 1)} ${units[i]}`
+}
+
+export function createFileUpload(props: FileUploadProps = {}): FileUploadAPI {
+  const {
+    accept,
+    maxSize,
+    maxFiles,
+    multiple = false,
+    onFilesSelected,
+    onError,
+  } = props
+
+  let files: FileEntry[] = []
+  let isDragging = false
+
+  const dropZoneId = generateId('rfr-file-upload-zone')
+  const inputId = generateId('rfr-file-upload-input')
+  const labelId = generateId('rfr-file-upload-label')
+  const fileListId = generateId('rfr-file-upload-list')
+
+  function addFiles(incoming: Array<{ name: string; size: number; type: string }>): void {
+    const errors: FileUploadError[] = []
+    const validFiles: FileEntry[] = []
+
+    // Check count limit
+    const availableSlots = maxFiles ? maxFiles - files.length : Infinity
+    if (!multiple && incoming.length > 1) {
+      // Only take the first file if not multiple
+      incoming = [incoming[0]]
+    }
+
+    for (let i = 0; i < incoming.length; i++) {
+      const file = incoming[i]
+
+      if (validFiles.length >= availableSlots) {
+        errors.push({
+          file: file.name,
+          code: 'count',
+          message: `Maximum of ${maxFiles} files allowed`,
+        })
+        continue
+      }
+
+      // Validate type
+      if (accept && !matchesAccept(file.type, file.name, accept)) {
+        errors.push({
+          file: file.name,
+          code: 'type',
+          message: `File type "${file.type || 'unknown'}" is not accepted`,
+        })
+        continue
+      }
+
+      // Validate size
+      if (maxSize && file.size > maxSize) {
+        errors.push({
+          file: file.name,
+          code: 'size',
+          message: `File size ${formatFileSize(file.size)} exceeds limit of ${formatFileSize(maxSize)}`,
+        })
+        continue
+      }
+
+      validFiles.push({
+        id: generateId('rfr-file'),
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        progress: 0,
+        status: 'pending',
+      })
+    }
+
+    if (errors.length > 0) {
+      onError?.(errors)
+    }
+
+    if (validFiles.length > 0) {
+      if (!multiple) {
+        files = validFiles.slice(0, 1)
+      } else {
+        files = [...files, ...validFiles]
+      }
+      onFilesSelected?.(files)
+    }
+  }
+
+  function removeFile(id: string): void {
+    files = files.filter((f) => f.id !== id)
+  }
+
+  function updateProgress(id: string, progress: number): void {
+    files = files.map((f) =>
+      f.id === id ? { ...f, progress: Math.min(100, Math.max(0, progress)) } : f,
+    )
+  }
+
+  function setStatus(id: string, status: FileStatus, error?: string): void {
+    files = files.map((f) =>
+      f.id === id ? { ...f, status, error, progress: status === 'complete' ? 100 : f.progress } : f,
+    )
+  }
+
+  const dropZoneProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'button',
+    'aria-label': 'Drop files here or click to upload',
+    'aria-describedby': labelId,
+    id: dropZoneId,
+    tabIndex: 0,
+  }
+
+  const inputProps: Record<string, unknown> = {
+    type: 'file',
+    id: inputId,
+    accept: accept ?? undefined,
+    multiple,
+    'aria-hidden': true,
+    tabIndex: -1,
+    style: { display: 'none' },
+  }
+
+  const dragHandlers = {
+    onDragEnter() {
+      isDragging = true
+    },
+    onDragLeave() {
+      isDragging = false
+    },
+    onDragOver() {
+      isDragging = true
+    },
+    onDrop() {
+      isDragging = false
+    },
+  }
+
+  return {
+    state: {
+      get files() { return files },
+      get isDragging() { return isDragging },
+    },
+    addFiles,
+    removeFile,
+    updateProgress,
+    setStatus,
+    dropZoneProps,
+    inputProps,
+    dragHandlers,
+    ids: {
+      dropZone: dropZoneId,
+      input: inputId,
+      label: labelId,
+      fileList: fileListId,
+    },
+  }
+}

package/dist/file-upload/index.ts

@@ -0,0 +1,19 @@
+export {
+  createFileUpload,
+  formatFileSize,
+  type FileUploadProps,
+  type FileUploadState,
+  type FileUploadAPI,
+  type FileUploadError,
+  type FileEntry,
+  type FileStatus,
+} from './file-upload.js'
+
+export {
+  fileUploadDropZoneVariants,
+  fileUploadFileListStyles,
+  fileUploadFileItemStyles,
+  fileUploadProgressStyles,
+  fileUploadProgressBarStyles,
+  fileUploadRemoveButtonStyles,
+} from './file-upload.styles.js'

package/dist/footer/footer.styles.ts

@@ -0,0 +1,5 @@
+import { cva } from '../shared/index.ts'
+
+export const footerVariants = cva({
+  base: 'border-t bg-background py-8',
+})

package/dist/footer/footer.ts

@@ -0,0 +1,32 @@
+export interface SocialLink {
+  label: string
+  href: string
+  icon?: string
+}
+
+export interface FooterColumn {
+  title: string
+  links: { label: string; href: string }[]
+}
+
+export interface FooterProps {
+  copyright?: string
+  socialLinks?: SocialLink[]
+  columns?: FooterColumn[]
+}
+
+export interface FooterAPI {
+  ariaProps: Record<string, string>
+  copyrightText: string
+}
+
+export function createFooter(props: FooterProps = {}): FooterAPI {
+  const { copyright } = props
+  const year = new Date().getFullYear()
+  const copyrightText = copyright ?? `© ${year} All rights reserved.`
+
+  return {
+    ariaProps: { role: 'contentinfo' },
+    copyrightText,
+  }
+}

package/dist/footer/index.ts

@@ -0,0 +1,9 @@
+export {
+  createFooter,
+  type SocialLink,
+  type FooterColumn,
+  type FooterProps,
+  type FooterAPI,
+} from './footer.js'
+
+export { footerVariants } from './footer.styles.js'

package/dist/index.ts

@@ -1,5 +1,6 @@
 // Auto-generated meta-package index
 export * from './astro-accordion/index.ts';
+export * from './shared/index.ts';
 export * from './astro-ai/index.ts';
 export * from './astro-animated-text/index.ts';
 export * from './astro-app-shell/index.ts';
@@ -60,7 +61,6 @@ export * from './astro-toast/index.ts';
 export * from './astro-tooltip/index.ts';
 export * from './astro-version-selector/index.ts';
 export * from './astro-video-player/index.ts';
-export * from './shared/index.ts';
 export * from './astro-table-of-contents/index.ts';
 export * from './astro-carousel/index.ts';
 export * from './astro-slider/index.ts';

package/dist/inline-editor/index.ts

@@ -0,0 +1,13 @@
+export {
+  createInlineEditor,
+  type InlineEditorProps,
+  type InlineEditorState,
+  type InlineEditorAPI,
+  type ToolbarAction,
+} from './inline-editor.js'
+
+export {
+  editorVariants,
+  toolbarVariants,
+  previewVariants,
+} from './inline-editor.styles.js'

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

@@ -0,0 +1,42 @@
+import { cva } from '../shared/index.ts'
+
+export const editorVariants = cva({
+  base: 'w-full rounded-md border bg-background',
+  variants: {
+    state: {
+      viewing: 'cursor-pointer hover:bg-muted/50 p-3',
+      editing: 'p-0',
+    },
+  },
+  defaultVariants: {
+    state: 'viewing',
+  },
+})
+
+export const toolbarVariants = cva({
+  base: 'flex items-center gap-1 border-b px-2 py-1',
+  variants: {
+    size: {
+      sm: 'gap-0.5 px-1 py-0.5',
+      md: 'gap-1 px-2 py-1',
+      lg: 'gap-2 px-3 py-2',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const previewVariants = cva({
+  base: 'prose prose-sm max-w-none p-3',
+  variants: {
+    size: {
+      sm: 'prose-xs p-2',
+      md: 'prose-sm p-3',
+      lg: 'prose-base p-4',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})