@refraction-ui/astro 0.4.0 → 0.4.2

package/dist/astro-code-editor/CodeEditor.astro

@@ -0,0 +1,123 @@
+---
+import {
+  createCodeEditor,
+  codeEditorVariants,
+  type CodeEditorTheme,
+} from '@refraction-ui/code-editor'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value?: string
+  language?: string
+  readOnly?: boolean
+  theme?: CodeEditorTheme
+  placeholder?: string
+  /** Action button labels — click events are dispatched as custom events */
+  actions?: Array<{ label: string }>
+}
+
+const {
+  value = '',
+  language = 'plaintext',
+  readOnly = false,
+  theme = 'light',
+  placeholder,
+  actions,
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createCodeEditor({ value, language, readOnly, theme })
+const containerClasses = cn(codeEditorVariants({ theme }), className)
+---
+
+<div
+  data-rfr-code-editor
+  class={containerClasses}
+  {...api.dataAttributes}
+  {...props}
+>
+  <div class="flex items-center justify-between px-3 py-2 border-b bg-muted/50 text-xs text-muted-foreground">
+    <span data-rfr-code-editor-lang>{api.getLanguageLabel()}</span>
+    {actions && actions.length > 0 && (
+      <div class="flex gap-1" data-rfr-code-editor-actions>
+        {actions.map((action) => (
+          <button
+            type="button"
+            data-rfr-code-editor-action={action.label}
+            class="px-2 py-1 rounded text-xs hover:bg-muted transition-colors"
+          >
+            {action.label}
+          </button>
+        ))}
+      </div>
+    )}
+  </div>
+  <textarea
+    data-rfr-code-editor-textarea
+    value={value}
+    readonly={readOnly}
+    placeholder={placeholder}
+    class="flex-1 w-full p-4 bg-transparent resize-none outline-none font-mono min-h-[200px]"
+    spellcheck="false"
+    autocapitalize="off"
+    autocomplete="off"
+    autocorrect="off"
+    role={api.ariaProps.role}
+    aria-multiline={api.ariaProps['aria-multiline']}
+    aria-label={api.ariaProps['aria-label']}
+    aria-readonly={readOnly ? true : undefined}
+  />
+</div>
+
+<script>
+  function initCodeEditors() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-code-editor]').forEach((root) => {
+      if (root.hasAttribute('data-rfr-code-editor-init')) return
+      root.setAttribute('data-rfr-code-editor-init', '')
+
+      const textarea = root.querySelector<HTMLTextAreaElement>('[data-rfr-code-editor-textarea]')
+      if (!textarea) return
+
+      // Dispatch change events when textarea value changes
+      textarea.addEventListener('input', () => {
+        root.dispatchEvent(
+          new CustomEvent('rfr-code-editor-change', {
+            detail: { value: textarea.value },
+            bubbles: true,
+          }),
+        )
+      })
+
+      // Tab key support: insert tab character instead of moving focus
+      textarea.addEventListener('keydown', (e) => {
+        if (e.key === 'Tab') {
+          e.preventDefault()
+          const start = textarea.selectionStart
+          const end = textarea.selectionEnd
+          const value = textarea.value
+          textarea.value = value.substring(0, start) + '  ' + value.substring(end)
+          textarea.selectionStart = textarea.selectionEnd = start + 2
+          textarea.dispatchEvent(new Event('input', { bubbles: true }))
+        }
+      })
+
+      // Action button click handlers
+      const actionBtns = root.querySelectorAll<HTMLButtonElement>('[data-rfr-code-editor-action]')
+      actionBtns.forEach((btn) => {
+        btn.addEventListener('click', () => {
+          const label = btn.getAttribute('data-rfr-code-editor-action')
+          root.dispatchEvent(
+            new CustomEvent('rfr-code-editor-action', {
+              detail: { label },
+              bubbles: true,
+            }),
+          )
+        })
+      })
+    })
+  }
+
+  initCodeEditors()
+  document.addEventListener('astro:after-swap', initCodeEditors)
+</script>

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

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

package/dist/astro-collapsible/Collapsible.astro

@@ -0,0 +1,58 @@
+---
+import { createCollapsible } from '@refraction-ui/collapsible'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  open?: boolean
+  disabled?: boolean
+}
+
+const { open = false, disabled = false, class: className, ...props } = Astro.props
+const api = createCollapsible({ open, disabled })
+---
+
+<div
+  data-state={open ? 'open' : 'closed'}
+  data-disabled={disabled ? '' : undefined}
+  data-rfr-collapsible
+  data-rfr-collapsible-content-id={api.contentProps.id}
+  class={className}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-rfr-collapsible]').forEach((root) => {
+    const contentId = root.getAttribute('data-rfr-collapsible-content-id') || ''
+
+    root.addEventListener('click', (e) => {
+      const trigger = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-rfr-collapsible-trigger]')
+      if (!trigger) return
+      if (trigger.disabled) return
+
+      const isOpen = root.getAttribute('data-state') === 'open'
+      const newOpen = !isOpen
+
+      root.setAttribute('data-state', newOpen ? 'open' : 'closed')
+      trigger.setAttribute('aria-expanded', String(newOpen))
+      trigger.setAttribute('data-state', newOpen ? 'open' : 'closed')
+
+      const content = root.querySelector('[data-rfr-collapsible-content]') as HTMLElement | null
+      if (content) {
+        content.setAttribute('data-state', newOpen ? 'open' : 'closed')
+        content.hidden = !newOpen
+      }
+
+      root.dispatchEvent(new CustomEvent('toggle', { detail: { open: newOpen } }))
+    })
+
+    root.addEventListener('keydown', (e) => {
+      const trigger = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-rfr-collapsible-trigger]')
+      if (!trigger) return
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        trigger.click()
+      }
+    })
+  })
+</script>

package/dist/astro-collapsible/CollapsibleContent.astro

@@ -0,0 +1,21 @@
+---
+import { collapsibleContentVariants } from '@refraction-ui/collapsible'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  open?: boolean
+}
+
+const { open = false, class: className, ...props } = Astro.props
+---
+
+<div
+  role="region"
+  data-state={open ? 'open' : 'closed'}
+  data-rfr-collapsible-content
+  hidden={!open}
+  class={cn(collapsibleContentVariants({ state: open ? 'open' : 'closed' }), className)}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-collapsible/CollapsibleTrigger.astro

@@ -0,0 +1,17 @@
+---
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  disabled?: boolean
+}
+
+const { disabled, class: className, ...props } = Astro.props
+---
+
+<button
+  type="button"
+  data-rfr-collapsible-trigger
+  disabled={disabled || undefined}
+  class={className}
+  {...props}
+>
+  <slot />
+</button>

package/dist/astro-collapsible/index.ts

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

package/dist/astro-command/Command.astro

@@ -0,0 +1,170 @@
+---
+import { commandVariants } from '@refraction-ui/command'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Whether the command palette is open */
+  open?: boolean
+}
+
+const { open = true, class: className, ...props } = Astro.props
+---
+
+<div
+  data-rfr-command
+  data-rfr-command-open={open}
+  role="combobox"
+  aria-expanded={open}
+  aria-haspopup="listbox"
+  class={cn(commandVariants(), className)}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  function initCommands() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-command]').forEach((root) => {
+      if (root.hasAttribute('data-rfr-command-init')) return
+      root.setAttribute('data-rfr-command-init', '')
+
+      const input = root.querySelector<HTMLInputElement>('[data-rfr-command-input]')
+      const list = root.querySelector<HTMLElement>('[data-rfr-command-list]')
+      const emptyEl = root.querySelector<HTMLElement>('[data-rfr-command-empty]')
+
+      let selectedIndex = 0
+
+      function getItems(): HTMLElement[] {
+        return Array.from(root.querySelectorAll<HTMLElement>('[data-rfr-command-item]:not([data-disabled])'))
+      }
+
+      function getAllItems(): HTMLElement[] {
+        return Array.from(root.querySelectorAll<HTMLElement>('[data-rfr-command-item]'))
+      }
+
+      function updateSelection() {
+        const items = getItems()
+        items.forEach((item, i) => {
+          const isSelected = i === selectedIndex
+          item.setAttribute('aria-selected', String(isSelected))
+          item.setAttribute('data-selected', isSelected ? '' : 'false')
+          if (isSelected) {
+            item.scrollIntoView({ block: 'nearest' })
+          }
+        })
+      }
+
+      function filterItems() {
+        const query = (input?.value || '').toLowerCase()
+        const allItems = getAllItems()
+        let visibleCount = 0
+
+        // Track which groups have visible items
+        const groupsWithVisible = new Set<HTMLElement>()
+
+        allItems.forEach((item) => {
+          const value = (item.getAttribute('data-value') || item.textContent || '').toLowerCase()
+          const matches = !query || value.includes(query)
+          item.hidden = !matches
+          if (matches && !item.hasAttribute('data-disabled')) {
+            visibleCount++
+          }
+          if (matches) {
+            const group = item.closest<HTMLElement>('[data-rfr-command-group]')
+            if (group) groupsWithVisible.add(group)
+          }
+        })
+
+        // Show/hide groups based on whether they have visible items
+        root.querySelectorAll<HTMLElement>('[data-rfr-command-group]').forEach((group) => {
+          group.hidden = !groupsWithVisible.has(group)
+        })
+
+        // Show/hide empty state
+        if (emptyEl) {
+          emptyEl.hidden = visibleCount > 0 || !query
+        }
+
+        // Reset selection
+        selectedIndex = 0
+        updateSelection()
+      }
+
+      // Input filtering
+      input?.addEventListener('input', () => {
+        filterItems()
+      })
+
+      // Keyboard navigation
+      root.addEventListener('keydown', (e) => {
+        const items = getItems()
+        if (items.length === 0 && e.key !== 'Escape') return
+
+        switch (e.key) {
+          case 'ArrowDown': {
+            e.preventDefault()
+            if (items.length > 0) {
+              selectedIndex = (selectedIndex + 1) % items.length
+              updateSelection()
+            }
+            break
+          }
+          case 'ArrowUp': {
+            e.preventDefault()
+            if (items.length > 0) {
+              selectedIndex = (selectedIndex - 1 + items.length) % items.length
+              updateSelection()
+            }
+            break
+          }
+          case 'Enter': {
+            e.preventDefault()
+            const items = getItems()
+            const selected = items[selectedIndex]
+            if (selected) {
+              selected.click()
+              root.dispatchEvent(
+                new CustomEvent('rfr-command-select', {
+                  detail: { value: selected.getAttribute('data-value') || selected.textContent?.trim() },
+                  bubbles: true,
+                })
+              )
+            }
+            break
+          }
+          case 'Escape': {
+            e.preventDefault()
+            root.dispatchEvent(new CustomEvent('rfr-command-close', { bubbles: true }))
+            break
+          }
+        }
+      })
+
+      // Click on items
+      root.addEventListener('click', (e) => {
+        const item = (e.target as HTMLElement).closest<HTMLElement>('[data-rfr-command-item]')
+        if (item && !item.hasAttribute('data-disabled')) {
+          const items = getItems()
+          const index = items.indexOf(item)
+          if (index >= 0) {
+            selectedIndex = index
+            updateSelection()
+          }
+          root.dispatchEvent(
+            new CustomEvent('rfr-command-select', {
+              detail: { value: item.getAttribute('data-value') || item.textContent?.trim() },
+              bubbles: true,
+            })
+          )
+        }
+      })
+
+      // Initial state
+      if (emptyEl) emptyEl.hidden = true
+      updateSelection()
+    })
+  }
+
+  initCommands()
+  document.addEventListener('astro:after-swap', initCommands)
+</script>

package/dist/astro-command/CommandEmpty.astro

@@ -0,0 +1,17 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-rfr-command-empty
+  role="presentation"
+  hidden
+  class={cn('py-6 text-center text-sm', className)}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-command/CommandGroup.astro

@@ -0,0 +1,25 @@
+---
+import { commandGroupVariants } from '@refraction-ui/command'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  heading?: string
+}
+
+const { heading, class: className, ...props } = Astro.props
+---
+
+<div
+  data-rfr-command-group
+  role="group"
+  aria-label={heading}
+  class={cn(commandGroupVariants(), className)}
+  {...props}
+>
+  {heading && (
+    <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {heading}
+    </div>
+  )}
+  <slot />
+</div>

package/dist/astro-command/CommandInput.astro

@@ -0,0 +1,21 @@
+---
+import { commandInputVariants } from '@refraction-ui/command'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  placeholder?: string
+}
+
+const { placeholder = 'Type a command or search...', class: className, ...props } = Astro.props
+---
+
+<input
+  data-rfr-command-input
+  type="text"
+  role="searchbox"
+  aria-autocomplete="list"
+  aria-label="Command input"
+  placeholder={placeholder}
+  class={cn(commandInputVariants(), className)}
+  {...props}
+/>

package/dist/astro-command/CommandItem.astro

@@ -0,0 +1,26 @@
+---
+import { commandItemVariants } from '@refraction-ui/command'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value?: string
+  disabled?: boolean
+}
+
+const { value, disabled = false, class: className, ...props } = Astro.props
+const state = disabled ? 'disabled' : 'default'
+---
+
+<div
+  data-rfr-command-item
+  data-value={value}
+  data-disabled={disabled ? '' : undefined}
+  role="option"
+  aria-selected="false"
+  aria-disabled={disabled}
+  tabindex={-1}
+  class={cn(commandItemVariants({ state }), className)}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-command/CommandList.astro

@@ -0,0 +1,17 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-rfr-command-list
+  role="listbox"
+  aria-label="Command suggestions"
+  class={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-command/CommandSeparator.astro

@@ -0,0 +1,14 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-rfr-command-separator
+  role="separator"
+  class={cn('-mx-1 h-px bg-border', className)}
+  {...props}
+/>

package/dist/astro-command/index.ts

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

package/dist/astro-command-input/CommandInput.astro

@@ -0,0 +1,6 @@
+---
+import { CommandInputCore } from '@refraction-ui/command-input';
+---
+<div class="refraction-command-input">
+  <slot />
+</div>

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

@@ -0,0 +1 @@
+export { default as CommandInput } from './CommandInput.astro';

package/dist/astro-content-protection/ContentProtection.astro

@@ -0,0 +1,104 @@
+---
+import {
+  createContentProtection,
+  contentProtectionVariants,
+  watermarkVariants,
+} from '@refraction-ui/content-protection'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Enable content protection. Default: true */
+  enabled?: boolean
+  /** Disable copy/cut. Default: true */
+  disableCopy?: boolean
+  /** Disable right-click context menu. Default: true */
+  disableContextMenu?: boolean
+  /** Watermark text overlay */
+  watermarkText?: string
+}
+
+const {
+  enabled = true,
+  disableCopy = true,
+  disableContextMenu = true,
+  watermarkText,
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createContentProtection({ enabled, disableCopy, disableContextMenu, watermarkText })
+const classes = cn(contentProtectionVariants(), className)
+---
+
+<div
+  data-rfr-content-protection
+  data-rfr-cp-enabled={enabled}
+  data-rfr-cp-disable-copy={disableCopy}
+  data-rfr-cp-disable-context-menu={disableContextMenu}
+  class={classes}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+  {api.watermarkConfig && (
+    <div
+      class={watermarkVariants()}
+      aria-hidden="true"
+      style={`opacity: ${api.watermarkConfig.opacity}; transform: rotate(${api.watermarkConfig.angle}deg);`}
+    >
+      <svg width="100%" height="100%">
+        <defs>
+          <pattern
+            id="rfr-watermark"
+            x="0"
+            y="0"
+            width="200"
+            height="200"
+            patternUnits="userSpaceOnUse"
+            patternTransform={`rotate(${api.watermarkConfig.angle})`}
+          >
+            <text
+              x="0"
+              y="100"
+              fill="currentColor"
+              font-size="16"
+              font-family="sans-serif"
+            >
+              {api.watermarkConfig.text}
+            </text>
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#rfr-watermark)" />
+      </svg>
+    </div>
+  )}
+</div>
+
+<script>
+  function initContentProtection() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-content-protection]').forEach((el) => {
+      if (el.hasAttribute('data-rfr-cp-init')) return
+      el.setAttribute('data-rfr-cp-init', '')
+
+      const enabled = el.getAttribute('data-rfr-cp-enabled') !== 'false'
+      const disableCopy = el.getAttribute('data-rfr-cp-disable-copy') !== 'false'
+      const disableContextMenu = el.getAttribute('data-rfr-cp-disable-context-menu') !== 'false'
+
+      if (!enabled) return
+
+      if (disableCopy) {
+        const prevent = (e: Event) => e.preventDefault()
+        el.addEventListener('copy', prevent)
+        el.addEventListener('cut', prevent)
+        el.addEventListener('selectstart', prevent)
+      }
+
+      if (disableContextMenu) {
+        el.addEventListener('contextmenu', (e) => e.preventDefault())
+      }
+    })
+  }
+
+  initContentProtection()
+  document.addEventListener('astro:after-swap', initContentProtection)
+</script>

package/dist/astro-content-protection/index.ts

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