@refraction-ui/astro 0.4.0 → 0.4.2

package/dist/astro-emoji-picker/EmojiPicker.astro

@@ -0,0 +1,255 @@
+---
+import {
+  createEmojiPicker,
+  EMOJI_DATA,
+  EMOJI_CATEGORIES,
+  CATEGORY_LABELS,
+  getAllEmojis,
+  emojiPickerContainerStyles,
+  emojiPickerSearchStyles,
+  emojiPickerCategoryBarStyles,
+  emojiPickerCategoryTabVariants,
+  emojiPickerGridStyles,
+  emojiPickerEmojiButtonStyles,
+  emojiPickerSectionLabelStyles,
+  type EmojiCategory,
+} from '@refraction-ui/emoji-picker'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Initial active category */
+  category?: EmojiCategory
+}
+
+const { category = 'smileys', class: className, ...props } = Astro.props
+
+const api = createEmojiPicker()
+const initialEmojis = EMOJI_DATA[category]
+
+// Serialize all emoji data for client-side search
+const allEmojisJson = JSON.stringify(
+  getAllEmojis().map((e) => ({
+    e: e.emoji,
+    n: e.name,
+    c: e.category,
+    k: e.keywords,
+  })),
+)
+---
+
+<div
+  data-rfr-emoji-picker
+  data-rfr-emoji-category={category}
+  data-rfr-emoji-all-data={allEmojisJson}
+  class={cn(emojiPickerContainerStyles, className)}
+  role="dialog"
+  aria-labelledby={api.ids.label}
+  {...props}
+>
+  <!-- Hidden label for screen readers -->
+  <span id={api.ids.label} class="sr-only">Emoji Picker</span>
+
+  <!-- Search input -->
+  <input
+    type="search"
+    role="searchbox"
+    aria-label="Search emojis"
+    placeholder="Search emojis..."
+    autocomplete="off"
+    data-rfr-emoji-search
+    class={emojiPickerSearchStyles}
+  />
+
+  <!-- Category tabs -->
+  <div class={emojiPickerCategoryBarStyles} data-rfr-emoji-categories>
+    {api.categoryTabs.map((tab) => (
+      <button
+        type="button"
+        class={emojiPickerCategoryTabVariants({
+          state: tab.category === category ? 'active' : 'inactive',
+        })}
+        data-rfr-emoji-category-tab={tab.category}
+        title={tab.label}
+        aria-label={tab.label}
+      >{tab.emoji}</button>
+    ))}
+  </div>
+
+  <!-- Section label -->
+  <div class={emojiPickerSectionLabelStyles} data-rfr-emoji-section-label>
+    {CATEGORY_LABELS[category]}
+  </div>
+
+  <!-- Emoji grid -->
+  <div class={emojiPickerGridStyles} data-rfr-emoji-grid>
+    {initialEmojis.map((emoji) => (
+      <button
+        type="button"
+        class={emojiPickerEmojiButtonStyles}
+        data-rfr-emoji-btn
+        data-emoji={emoji.emoji}
+        data-name={emoji.name}
+        data-emoji-category={emoji.category}
+        role="button"
+        aria-label={`${emoji.name} ${emoji.emoji}`}
+        title={emoji.name}
+      >{emoji.emoji}</button>
+    ))}
+  </div>
+
+  <!-- No results message -->
+  <div
+    class="col-span-8 text-center text-sm text-muted-foreground py-4 hidden"
+    data-rfr-emoji-empty
+  >No emojis found</div>
+</div>
+
+<script>
+  const CATEGORY_LABELS: Record<string, string> = {
+    smileys: 'Smileys & Emotion',
+    people: 'People & Body',
+    nature: 'Animals & Nature',
+    food: 'Food & Drink',
+    travel: 'Travel & Places',
+    activities: 'Activities',
+    objects: 'Objects',
+    symbols: 'Symbols',
+    flags: 'Flags',
+  }
+
+  const BUTTON_CLASS = 'flex items-center justify-center h-8 w-8 rounded cursor-pointer text-lg hover:bg-accent transition-colors'
+  const TAB_ACTIVE = 'flex-1 py-1.5 text-center text-lg cursor-pointer hover:bg-accent rounded-md transition-colors bg-accent'
+  const TAB_INACTIVE = 'flex-1 py-1.5 text-center text-lg cursor-pointer hover:bg-accent rounded-md transition-colors'
+
+  interface EmojiData {
+    emoji: string
+    name: string
+    category: string
+    keywords: string[]
+  }
+
+  function initEmojiPickers() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-emoji-picker]').forEach((root) => {
+      if (root.hasAttribute('data-rfr-emoji-init')) return
+      root.setAttribute('data-rfr-emoji-init', '')
+
+      let activeCategory = root.getAttribute('data-rfr-emoji-category') || 'smileys'
+      let searchQuery = ''
+
+      // Parse all emoji data from the serialized attribute
+      let allEmojis: EmojiData[] = []
+      const allDataAttr = root.getAttribute('data-rfr-emoji-all-data')
+      if (allDataAttr) {
+        try {
+          allEmojis = JSON.parse(allDataAttr).map((e: { e: string; n: string; c: string; k: string[] }) => ({
+            emoji: e.e,
+            name: e.n,
+            category: e.c,
+            keywords: e.k,
+          }))
+        } catch {}
+      }
+
+      // Group by category
+      const emojisByCategory: Record<string, EmojiData[]> = {}
+      allEmojis.forEach((e) => {
+        if (!emojisByCategory[e.category]) emojisByCategory[e.category] = []
+        emojisByCategory[e.category].push(e)
+      })
+
+      const searchInput = root.querySelector<HTMLInputElement>('[data-rfr-emoji-search]')
+      const grid = root.querySelector<HTMLElement>('[data-rfr-emoji-grid]')
+      const sectionLabel = root.querySelector<HTMLElement>('[data-rfr-emoji-section-label]')
+      const emptyMsg = root.querySelector<HTMLElement>('[data-rfr-emoji-empty]')
+      const categoriesBar = root.querySelector<HTMLElement>('[data-rfr-emoji-categories]')
+      const categoryTabs = root.querySelectorAll<HTMLElement>('[data-rfr-emoji-category-tab]')
+
+      function renderEmojis(emojis: EmojiData[]) {
+        if (!grid) return
+        grid.innerHTML = ''
+        emojis.forEach((emoji) => {
+          const btn = document.createElement('button')
+          btn.type = 'button'
+          btn.className = BUTTON_CLASS
+          btn.setAttribute('data-rfr-emoji-btn', '')
+          btn.setAttribute('data-emoji', emoji.emoji)
+          btn.setAttribute('data-name', emoji.name)
+          btn.setAttribute('data-emoji-category', emoji.category)
+          btn.setAttribute('role', 'button')
+          btn.setAttribute('aria-label', `${emoji.name} ${emoji.emoji}`)
+          btn.setAttribute('title', emoji.name)
+          btn.textContent = emoji.emoji
+          grid.appendChild(btn)
+        })
+
+        if (emptyMsg) {
+          emptyMsg.classList.toggle('hidden', emojis.length > 0)
+        }
+      }
+
+      function updateCategoryTabs() {
+        categoryTabs.forEach((tab) => {
+          const cat = tab.getAttribute('data-rfr-emoji-category-tab')
+          tab.className = cat === activeCategory ? TAB_ACTIVE : TAB_INACTIVE
+        })
+      }
+
+      // Search handler
+      searchInput?.addEventListener('input', () => {
+        searchQuery = searchInput.value
+        if (searchQuery.trim()) {
+          const query = searchQuery.toLowerCase().trim()
+          const results = allEmojis.filter(
+            (e) => e.name.toLowerCase().includes(query) || e.keywords.some((kw) => kw.toLowerCase().includes(query)),
+          )
+          if (sectionLabel) sectionLabel.classList.add('hidden')
+          categoriesBar?.classList.add('hidden')
+          renderEmojis(results)
+        } else {
+          if (sectionLabel) {
+            sectionLabel.classList.remove('hidden')
+            sectionLabel.textContent = CATEGORY_LABELS[activeCategory] || activeCategory
+          }
+          categoriesBar?.classList.remove('hidden')
+          renderEmojis(emojisByCategory[activeCategory] || [])
+        }
+      })
+
+      // Category tab clicks
+      categoryTabs.forEach((tab) => {
+        tab.addEventListener('click', () => {
+          const cat = tab.getAttribute('data-rfr-emoji-category-tab')
+          if (!cat) return
+          activeCategory = cat
+          root.setAttribute('data-rfr-emoji-category', cat)
+          searchQuery = ''
+          if (searchInput) searchInput.value = ''
+          updateCategoryTabs()
+          if (sectionLabel) {
+            sectionLabel.classList.remove('hidden')
+            sectionLabel.textContent = CATEGORY_LABELS[cat] || cat
+          }
+          categoriesBar?.classList.remove('hidden')
+          renderEmojis(emojisByCategory[cat] || [])
+        })
+      })
+
+      // Emoji click (delegated)
+      grid?.addEventListener('click', (e) => {
+        const btn = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-rfr-emoji-btn]')
+        if (!btn) return
+        const emoji = btn.getAttribute('data-emoji') || ''
+        const name = btn.getAttribute('data-name') || ''
+        const category = btn.getAttribute('data-emoji-category') || ''
+
+        root.dispatchEvent(new CustomEvent('rfr-emoji-select', {
+          detail: { emoji, name, category },
+          bubbles: true,
+        }))
+      })
+    })
+  }
+
+  initEmojiPickers()
+  document.addEventListener('astro:after-swap', initEmojiPickers)
+</script>

package/dist/astro-emoji-picker/index.ts

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

package/dist/astro-feedback-dialog/FeedbackDialog.astro

@@ -0,0 +1,152 @@
+---
+import {
+  createFeedbackDialog,
+  feedbackDialogVariants,
+  type FeedbackType,
+} from '@refraction-ui/feedback-dialog'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  open?: boolean
+  type?: FeedbackType
+}
+
+const {
+  open = false,
+  type = 'general',
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createFeedbackDialog({ open, type })
+---
+
+<div
+  class={cn(feedbackDialogVariants({ type }), className)}
+  role={api.ariaProps.role}
+  aria-modal={api.ariaProps['aria-modal'] as any}
+  aria-labelledby={api.ariaProps['aria-labelledby'] as string}
+  aria-describedby={api.ariaProps['aria-describedby'] as string}
+  id={api.ariaProps.id as string}
+  data-state={open ? 'open' : 'closed'}
+  data-rfr-feedback-dialog
+  data-rfr-feedback-type={type}
+  style={open ? undefined : 'display:none'}
+  {...props}
+>
+  <!-- Form view -->
+  <div data-rfr-feedback-form>
+    <h2 id={`${api.ariaProps.id}-title`}>Send Feedback</h2>
+
+    <textarea
+      aria-label="Feedback comment"
+      placeholder="Your feedback..."
+      data-rfr-feedback-comment
+      class="mt-3 w-full min-h-[100px] rounded-md border bg-background px-3 py-2 text-sm"
+    ></textarea>
+
+    <input
+      type="email"
+      aria-label="Email"
+      placeholder="Email (optional)"
+      data-rfr-feedback-email
+      class="mt-2 w-full rounded-md border bg-background px-3 py-2 text-sm"
+    />
+
+    <!-- Honeypot field - hidden from real users -->
+    <input
+      type="text"
+      aria-hidden="true"
+      tabindex="-1"
+      style="position: absolute; left: -9999px"
+      autocomplete="off"
+      name="website"
+      data-rfr-feedback-honeypot
+    />
+
+    <button
+      type="button"
+      data-rfr-feedback-submit
+      class="mt-3 w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+      disabled
+    >
+      Submit
+    </button>
+  </div>
+
+  <!-- Success view (hidden initially) -->
+  <div data-rfr-feedback-success style="display:none">
+    <p data-testid="success-message">Thank you for your feedback!</p>
+    <button
+      type="button"
+      data-rfr-feedback-close
+      class="mt-3 rounded-md border px-4 py-2 text-sm"
+    >
+      Close
+    </button>
+  </div>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-rfr-feedback-dialog]').forEach((root) => {
+    const formView = root.querySelector<HTMLElement>('[data-rfr-feedback-form]')!
+    const successView = root.querySelector<HTMLElement>('[data-rfr-feedback-success]')!
+    const commentInput = root.querySelector<HTMLTextAreaElement>('[data-rfr-feedback-comment]')!
+    const emailInput = root.querySelector<HTMLInputElement>('[data-rfr-feedback-email]')!
+    const honeypotInput = root.querySelector<HTMLInputElement>('[data-rfr-feedback-honeypot]')!
+    const submitBtn = root.querySelector<HTMLButtonElement>('[data-rfr-feedback-submit]')!
+    const closeBtn = root.querySelector<HTMLButtonElement>('[data-rfr-feedback-close]')!
+
+    function updateSubmitState() {
+      submitBtn.disabled = !commentInput.value.trim()
+    }
+
+    commentInput.addEventListener('input', updateSubmitState)
+
+    submitBtn.addEventListener('click', async () => {
+      // Honeypot check
+      if (honeypotInput.value) return
+      if (!commentInput.value.trim()) return
+
+      submitBtn.disabled = true
+      submitBtn.textContent = 'Submitting...'
+      commentInput.disabled = true
+      emailInput.disabled = true
+
+      const feedbackType = root.getAttribute('data-rfr-feedback-type') || 'general'
+
+      const detail: Record<string, string> = {
+        comment: commentInput.value,
+        type: feedbackType,
+      }
+      if (emailInput.value) {
+        detail.email = emailInput.value
+      }
+
+      const event = new CustomEvent('submit', { detail, bubbles: true, cancelable: true })
+      root.dispatchEvent(event)
+
+      // Show success state
+      formView.style.display = 'none'
+      successView.style.display = ''
+      root.setAttribute('data-state', 'submitted')
+    })
+
+    closeBtn.addEventListener('click', () => {
+      // Reset form
+      commentInput.value = ''
+      emailInput.value = ''
+      honeypotInput.value = ''
+      commentInput.disabled = false
+      emailInput.disabled = false
+      submitBtn.disabled = true
+      submitBtn.textContent = 'Submit'
+      formView.style.display = ''
+      successView.style.display = 'none'
+      root.setAttribute('data-state', 'closed')
+      root.style.display = 'none'
+
+      root.dispatchEvent(new CustomEvent('openchange', { detail: { open: false }, bubbles: true }))
+    })
+  })
+</script>

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

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

package/dist/astro-file-tree/astro-file-tree.astro

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

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

@@ -0,0 +1 @@
+export * from './astro-file-tree';