@refraction-ui/astro 0.3.1 → 0.4.2

package/dist/astro-file-upload/FileUpload.astro

@@ -0,0 +1,306 @@
+---
+import {
+  createFileUpload,
+  formatFileSize,
+  fileUploadDropZoneVariants,
+  fileUploadFileListStyles,
+  fileUploadFileItemStyles,
+  fileUploadProgressStyles,
+  fileUploadProgressBarStyles,
+  fileUploadRemoveButtonStyles,
+} from '@refraction-ui/file-upload'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  accept?: string
+  maxSize?: number
+  maxFiles?: number
+  multiple?: boolean
+}
+
+const {
+  accept,
+  maxSize,
+  maxFiles,
+  multiple = false,
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createFileUpload({ accept, maxSize, maxFiles, multiple })
+---
+
+<div
+  data-rfr-file-upload
+  data-rfr-file-upload-accept={accept}
+  data-rfr-file-upload-max-size={maxSize ? String(maxSize) : undefined}
+  data-rfr-file-upload-max-files={maxFiles ? String(maxFiles) : undefined}
+  data-rfr-file-upload-multiple={multiple ? 'true' : undefined}
+  class={className}
+  {...props}
+>
+  {/* Hidden file input */}
+  <input
+    data-rfr-file-upload-input
+    type="file"
+    accept={accept}
+    multiple={multiple}
+    aria-hidden="true"
+    tabindex="-1"
+    style="display: none;"
+  />
+
+  {/* Drop zone */}
+  <div
+    data-rfr-file-upload-dropzone
+    role="button"
+    aria-label="Drop files here or click to upload"
+    tabindex="0"
+    class={fileUploadDropZoneVariants({ state: 'idle' })}
+  >
+    <slot>
+      <div class="text-2xl mb-2">&#x1F4C1;</div>
+      <p class="text-sm text-muted-foreground">
+        Drag & drop files here, or click to select
+      </p>
+      {accept && (
+        <p class="text-xs text-muted-foreground mt-1">
+          Accepted: {accept}
+        </p>
+      )}
+      {maxSize && (
+        <p class="text-xs text-muted-foreground">
+          Max size: {formatFileSize(maxSize)}
+        </p>
+      )}
+    </slot>
+  </div>
+
+  {/* File list (populated client-side) */}
+  <div data-rfr-file-upload-list class={fileUploadFileListStyles} hidden></div>
+</div>
+
+<script>
+  function initFileUploads() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-file-upload]').forEach((root) => {
+      if (root.hasAttribute('data-rfr-file-upload-init')) return
+      root.setAttribute('data-rfr-file-upload-init', '')
+
+      const input = root.querySelector<HTMLInputElement>('[data-rfr-file-upload-input]')
+      const dropzone = root.querySelector<HTMLElement>('[data-rfr-file-upload-dropzone]')
+      const fileListEl = root.querySelector<HTMLElement>('[data-rfr-file-upload-list]')
+      if (!input || !dropzone || !fileListEl) return
+
+      const accept = root.getAttribute('data-rfr-file-upload-accept') || ''
+      const maxSize = parseInt(root.getAttribute('data-rfr-file-upload-max-size') || '0', 10) || 0
+      const maxFiles = parseInt(root.getAttribute('data-rfr-file-upload-max-files') || '0', 10) || 0
+      const multiple = root.getAttribute('data-rfr-file-upload-multiple') === 'true'
+
+      interface FileItem {
+        id: string
+        name: string
+        size: number
+        type: string
+      }
+
+      let files: FileItem[] = []
+      let idCounter = 0
+
+      function formatSize(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]}`
+      }
+
+      function matchesAccept(fileType: string, fileName: string): boolean {
+        if (!accept) return true
+        const types = accept.split(',').map((t: string) => t.trim())
+        for (const a of types) {
+          if (a.startsWith('.')) {
+            if (fileName.toLowerCase().endsWith(a.toLowerCase())) return true
+          } else if (a.endsWith('/*')) {
+            if (fileType.startsWith(a.slice(0, -2))) return true
+          } else {
+            if (fileType === a) return true
+          }
+        }
+        return false
+      }
+
+      function addFiles(incoming: Array<{ name: string; size: number; type: string }>) {
+        const errors: Array<{ file: string; message: string }> = []
+        const validFiles: FileItem[] = []
+
+        let toProcess = multiple ? incoming : [incoming[0]]
+        const available = maxFiles ? maxFiles - files.length : Infinity
+
+        for (const file of toProcess) {
+          if (validFiles.length >= available) {
+            errors.push({ file: file.name, message: `Maximum of ${maxFiles} files allowed` })
+            continue
+          }
+          if (accept && !matchesAccept(file.type, file.name)) {
+            errors.push({ file: file.name, message: `File type not accepted` })
+            continue
+          }
+          if (maxSize && file.size > maxSize) {
+            errors.push({ file: file.name, message: `File too large (max ${formatSize(maxSize)})` })
+            continue
+          }
+          validFiles.push({
+            id: `rfr-file-${++idCounter}`,
+            name: file.name,
+            size: file.size,
+            type: file.type,
+          })
+        }
+
+        if (errors.length > 0) {
+          root.dispatchEvent(
+            new CustomEvent('rfr-file-upload-error', {
+              detail: { errors },
+              bubbles: true,
+            }),
+          )
+        }
+
+        if (validFiles.length > 0) {
+          if (!multiple) {
+            files = validFiles.slice(0, 1)
+          } else {
+            files = [...files, ...validFiles]
+          }
+          renderFileList()
+          root.dispatchEvent(
+            new CustomEvent('rfr-file-upload-change', {
+              detail: { files: [...files] },
+              bubbles: true,
+            }),
+          )
+        }
+      }
+
+      function removeFile(id: string) {
+        files = files.filter((f) => f.id !== id)
+        renderFileList()
+        root.dispatchEvent(
+          new CustomEvent('rfr-file-upload-change', {
+            detail: { files: [...files] },
+            bubbles: true,
+          }),
+        )
+      }
+
+      function renderFileList() {
+        if (files.length === 0) {
+          fileListEl!.hidden = true
+          fileListEl!.innerHTML = ''
+          return
+        }
+
+        fileListEl!.hidden = false
+        fileListEl!.innerHTML = ''
+
+        for (const file of files) {
+          const item = document.createElement('div')
+          item.className = 'flex items-center gap-3 rounded-md border p-3 text-sm'
+
+          const info = document.createElement('div')
+          info.className = 'flex-1 min-w-0'
+
+          const nameEl = document.createElement('div')
+          nameEl.className = 'font-medium truncate'
+          nameEl.textContent = file.name
+
+          const sizeEl = document.createElement('div')
+          sizeEl.className = 'text-xs text-muted-foreground'
+          sizeEl.textContent = formatSize(file.size)
+
+          info.appendChild(nameEl)
+          info.appendChild(sizeEl)
+          item.appendChild(info)
+
+          const removeBtn = document.createElement('button')
+          removeBtn.type = 'button'
+          removeBtn.className = 'ml-auto text-muted-foreground hover:text-foreground cursor-pointer'
+          removeBtn.setAttribute('aria-label', `Remove ${file.name}`)
+          removeBtn.textContent = '\u00D7'
+          removeBtn.addEventListener('click', (e) => {
+            e.stopPropagation()
+            removeFile(file.id)
+          })
+
+          item.appendChild(removeBtn)
+          fileListEl!.appendChild(item)
+        }
+      }
+
+      // Drop zone click -> open file dialog
+      dropzone.addEventListener('click', () => input!.click())
+      dropzone.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          input!.click()
+        }
+      })
+
+      // Drag events
+      const idleClass = 'border-muted-foreground/25'
+      const dragClass = 'border-primary'
+      const dragBgClass = 'bg-primary/5'
+
+      dropzone.addEventListener('dragenter', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        dropzone.classList.add(dragClass, dragBgClass)
+        dropzone.classList.remove(idleClass)
+      })
+
+      dropzone.addEventListener('dragleave', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        dropzone.classList.remove(dragClass, dragBgClass)
+        dropzone.classList.add(idleClass)
+      })
+
+      dropzone.addEventListener('dragover', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      })
+
+      dropzone.addEventListener('drop', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        dropzone.classList.remove(dragClass, dragBgClass)
+        dropzone.classList.add(idleClass)
+
+        const droppedFiles = Array.from(e.dataTransfer?.files || []).map((f) => ({
+          name: f.name,
+          size: f.size,
+          type: f.type,
+        }))
+        if (droppedFiles.length > 0) {
+          addFiles(droppedFiles)
+        }
+      })
+
+      // File input change
+      input.addEventListener('change', () => {
+        const selected = Array.from(input!.files || []).map((f) => ({
+          name: f.name,
+          size: f.size,
+          type: f.type,
+        }))
+        if (selected.length > 0) {
+          addFiles(selected)
+        }
+        input!.value = ''
+      })
+    })
+  }
+
+  initFileUploads()
+  document.addEventListener('astro:after-swap', initFileUploads)
+</script>

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

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

package/dist/astro-footer/Footer.astro

@@ -0,0 +1,61 @@
+---
+import {
+  createFooter,
+  footerVariants,
+  type FooterColumn,
+  type SocialLink,
+} from '@refraction-ui/footer'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  copyright?: string
+  socialLinks?: SocialLink[]
+  columns?: FooterColumn[]
+}
+
+const { copyright, socialLinks = [], columns = [], class: className, ...props } = Astro.props
+const api = createFooter({ copyright, socialLinks, columns })
+const classes = cn(footerVariants(), className)
+---
+
+<footer class={classes} {...api.ariaProps} {...props}>
+  <div class="mx-auto max-w-7xl px-4">
+    {columns.length > 0 && (
+      <div class="grid grid-cols-2 gap-8 md:grid-cols-4">
+        {columns.map((column) => (
+          <div>
+            <h3 class="mb-3 text-sm font-semibold">{column.title}</h3>
+            <ul class="space-y-2">
+              {column.links.map((link) => (
+                <li>
+                  <a
+                    href={link.href}
+                    class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    )}
+    <div class="flex items-center justify-between pt-8">
+      <p class="text-sm text-muted-foreground">{api.copyrightText}</p>
+      {socialLinks.length > 0 && (
+        <div class="flex items-center gap-4">
+          {socialLinks.map((link) => (
+            <a
+              href={link.href}
+              class="text-muted-foreground transition-colors hover:text-foreground"
+              aria-label={link.label}
+            >
+              {link.icon ?? link.label}
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  </div>
+</footer>

package/dist/astro-footer/index.ts

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

package/dist/astro-icon-system/astro-icon-system.astro

@@ -0,0 +1,4 @@
+---
+// Astro component
+---
+<div></div>

package/dist/astro-icon-system/index.ts

@@ -0,0 +1 @@
+export * from './astro-icon-system';

package/dist/astro-inline-editor/InlineEditor.astro

@@ -0,0 +1,169 @@
+---
+import {
+  createInlineEditor,
+  editorVariants,
+  toolbarVariants,
+  previewVariants,
+} from '@refraction-ui/inline-editor'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value: string
+}
+
+const { value, class: className, ...props } = Astro.props
+
+const api = createInlineEditor({ value })
+---
+
+<div
+  data-rfr-inline-editor
+  data-rfr-inline-editor-value={value}
+  class={cn('contents', className)}
+  {...props}
+>
+  {/* View mode (shown by default) */}
+  <div
+    data-rfr-inline-editor-view
+    class={editorVariants({ state: 'viewing' })}
+    role="button"
+    tabindex="0"
+    aria-label="Click to edit"
+  >
+    <div class={previewVariants()} data-rfr-inline-editor-display>
+      {value}
+    </div>
+  </div>
+
+  {/* Edit mode (hidden by default) */}
+  <div
+    data-rfr-inline-editor-edit
+    class={editorVariants({ state: 'editing' })}
+    hidden
+  >
+    {/* Toolbar */}
+    <div class={toolbarVariants()} role="toolbar" aria-label="Formatting toolbar">
+      {api.toolbarActions.map((action) => (
+        <button
+          type="button"
+          data-rfr-inline-editor-toolbar-action={action.syntax}
+          aria-label={action.name}
+          class="px-2 py-1 rounded text-xs hover:bg-muted transition-colors"
+        >
+          {action.name}
+        </button>
+      ))}
+    </div>
+
+    {/* Editor area: side-by-side textarea + preview */}
+    <div class="flex gap-2 p-2">
+      <textarea
+        data-rfr-inline-editor-textarea
+        class="flex-1 min-h-[100px] resize-y border rounded p-2"
+        aria-label="Editor content"
+      >{value}</textarea>
+      <div
+        class={cn('flex-1', previewVariants())}
+        aria-label="Preview"
+        data-rfr-inline-editor-preview
+      >
+        {value}
+      </div>
+    </div>
+
+    {/* Action buttons */}
+    <div class="flex justify-end gap-2 p-2 border-t">
+      <button type="button" data-rfr-inline-editor-cancel>Cancel</button>
+      <button type="button" data-rfr-inline-editor-save>Save</button>
+    </div>
+  </div>
+</div>
+
+<script>
+  function initInlineEditors() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-inline-editor]').forEach((root) => {
+      if (root.hasAttribute('data-rfr-inline-editor-init')) return
+      root.setAttribute('data-rfr-inline-editor-init', '')
+
+      const viewEl = root.querySelector<HTMLElement>('[data-rfr-inline-editor-view]')
+      const editEl = root.querySelector<HTMLElement>('[data-rfr-inline-editor-edit]')
+      const textarea = root.querySelector<HTMLTextAreaElement>('[data-rfr-inline-editor-textarea]')
+      const preview = root.querySelector<HTMLElement>('[data-rfr-inline-editor-preview]')
+      const display = root.querySelector<HTMLElement>('[data-rfr-inline-editor-display]')
+      const cancelBtn = root.querySelector<HTMLButtonElement>('[data-rfr-inline-editor-cancel]')
+      const saveBtn = root.querySelector<HTMLButtonElement>('[data-rfr-inline-editor-save]')
+      const toolbarBtns = root.querySelectorAll<HTMLButtonElement>('[data-rfr-inline-editor-toolbar-action]')
+
+      if (!viewEl || !editEl || !textarea || !preview || !display) return
+
+      let originalValue = root.getAttribute('data-rfr-inline-editor-value') || ''
+
+      function enterEditMode() {
+        viewEl!.hidden = true
+        editEl!.removeAttribute('hidden')
+        textarea!.value = originalValue
+        preview!.textContent = originalValue
+        textarea!.focus()
+      }
+
+      function exitEditMode() {
+        editEl!.hidden = true
+        viewEl!.removeAttribute('hidden')
+      }
+
+      // Click or keyboard to enter edit mode
+      viewEl.addEventListener('click', enterEditMode)
+      viewEl.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          enterEditMode()
+        }
+      })
+
+      // Live preview as user types
+      textarea.addEventListener('input', () => {
+        preview!.textContent = textarea!.value
+      })
+
+      // Toolbar buttons insert syntax at cursor
+      toolbarBtns.forEach((btn) => {
+        btn.addEventListener('click', () => {
+          const syntax = btn.getAttribute('data-rfr-inline-editor-toolbar-action') || ''
+          const start = textarea!.selectionStart
+          const end = textarea!.selectionEnd
+          const val = textarea!.value
+          textarea!.value = val.substring(0, start) + syntax + val.substring(end)
+          textarea!.selectionStart = textarea!.selectionEnd = start + syntax.length
+          textarea!.focus()
+          preview!.textContent = textarea!.value
+        })
+      })
+
+      // Cancel button
+      cancelBtn?.addEventListener('click', () => {
+        exitEditMode()
+        root.dispatchEvent(
+          new CustomEvent('rfr-inline-editor-cancel', { bubbles: true }),
+        )
+      })
+
+      // Save button
+      saveBtn?.addEventListener('click', () => {
+        const newValue = textarea!.value
+        originalValue = newValue
+        display!.textContent = newValue
+        root.setAttribute('data-rfr-inline-editor-value', newValue)
+        exitEditMode()
+        root.dispatchEvent(
+          new CustomEvent('rfr-inline-editor-save', {
+            detail: { value: newValue },
+            bubbles: true,
+          }),
+        )
+      })
+    })
+  }
+
+  initInlineEditors()
+  document.addEventListener('astro:after-swap', initInlineEditors)
+</script>

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

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

package/dist/astro-input/Input.astro

@@ -0,0 +1,49 @@
+---
+import {
+  createInput,
+  inputVariants,
+  type InputType,
+} from '@refraction-ui/input'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  type?: string
+  size?: 'sm' | 'default' | 'lg'
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  'aria-invalid'?: boolean
+}
+
+const {
+  type = 'text',
+  size,
+  class: className,
+  disabled,
+  readonly,
+  required,
+  'aria-invalid': ariaInvalid,
+  ...props
+} = Astro.props
+
+const api = createInput({
+  type: type as InputType,
+  disabled,
+  readOnly: readonly,
+  required,
+  'aria-invalid': ariaInvalid === true ? true : undefined,
+})
+
+const classes = cn(inputVariants({ size }), className)
+---
+
+<input
+  type={type}
+  class={classes}
+  disabled={disabled}
+  readonly={readonly}
+  required={required}
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...props}
+/>

package/dist/astro-input/index.ts

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

package/dist/astro-input-group/InputGroup.astro

@@ -0,0 +1,29 @@
+---
+import {
+  createInputGroup,
+  inputGroupVariants,
+  type InputGroupOrientation,
+} from '@refraction-ui/input-group'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  orientation?: InputGroupOrientation
+}
+
+const { orientation = 'horizontal', class: className, ...props } = Astro.props
+const api = createInputGroup({
+  orientation,
+  id: props.id,
+  'aria-label': props['aria-label'],
+  'aria-labelledby': props['aria-labelledby'],
+})
+---
+
+<div
+  class={cn(inputGroupVariants({ orientation }), className)}
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-input-group/InputGroupAddon.astro

@@ -0,0 +1,14 @@
+---
+import { inputGroupAddonVariants, type InputGroupOrientation } from '@refraction-ui/input-group'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  orientation?: InputGroupOrientation
+}
+
+const { orientation = 'horizontal', class: className, ...props } = Astro.props
+---
+
+<div class={cn(inputGroupAddonVariants({ orientation }), className)} {...props}>
+  <slot />
+</div>

package/dist/astro-input-group/InputGroupButton.astro

@@ -0,0 +1,19 @@
+---
+import { inputGroupButtonVariants, type InputGroupOrientation } from '@refraction-ui/input-group'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  orientation?: InputGroupOrientation
+  type?: string
+}
+
+const { orientation = 'horizontal', type, class: className, ...props } = Astro.props
+---
+
+<button
+  type={(type ?? 'button') as any}
+  class={cn(inputGroupButtonVariants({ orientation }), className)}
+  {...props}
+>
+  <slot />
+</button>

package/dist/astro-input-group/InputGroupText.astro

@@ -0,0 +1,11 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<span class={cn('flex items-center px-3 text-sm text-muted-foreground', className)} {...props}>
+  <slot />
+</span>

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

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