@refraction-ui/astro 0.4.0 → 0.4.2

package/dist/astro-device-frame/DeviceFrame.astro

@@ -0,0 +1,44 @@
+---
+import {
+  createDeviceFrame,
+  deviceFrameVariants,
+  type DeviceType,
+  type DeviceOrientation,
+} from '@refraction-ui/device-frame'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  device: DeviceType
+  orientation?: DeviceOrientation
+}
+
+const { device, orientation = 'portrait', class: className, ...props } = Astro.props
+const api = createDeviceFrame({ device, orientation })
+const classes = cn(deviceFrameVariants({ device, orientation }), className)
+---
+
+<div
+  class={classes}
+  style={`width: ${api.dimensions.width}px; height: ${api.dimensions.height}px;`}
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...props}
+>
+  {api.dimensions.notch && (
+    <div
+      class="absolute top-0 left-1/2 -translate-x-1/2 w-[40%] h-[30px] bg-black rounded-b-2xl z-10"
+      aria-hidden="true"
+      data-part="notch"
+    ></div>
+  )}
+  <div class="relative w-full h-full overflow-hidden bg-white" data-part="screen">
+    <slot />
+  </div>
+  {api.dimensions.homeIndicator && (
+    <div
+      class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[35%] h-[5px] bg-gray-300 rounded-full z-10"
+      aria-hidden="true"
+      data-part="home-indicator"
+    ></div>
+  )}
+</div>

package/dist/astro-device-frame/index.ts

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

package/dist/astro-dialog/Dialog.astro

@@ -0,0 +1,138 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Whether the dialog starts open */
+  defaultOpen?: boolean
+  /** Whether the dialog is modal (default: true) */
+  modal?: boolean
+}
+
+const { defaultOpen = false, modal = true, class: className, ...props } = Astro.props
+---
+
+<div
+  data-rfr-dialog
+  data-rfr-dialog-modal={modal}
+  data-rfr-dialog-default-open={defaultOpen}
+  data-state={defaultOpen ? 'open' : 'closed'}
+  class={cn('contents', className)}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  function initDialogs() {
+    const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+    document.querySelectorAll<HTMLElement>('[data-rfr-dialog]').forEach((root) => {
+      // Prevent re-init
+      if (root.hasAttribute('data-rfr-dialog-init')) return
+      root.setAttribute('data-rfr-dialog-init', '')
+
+      const isModal = root.getAttribute('data-rfr-dialog-modal') !== 'false'
+      const defaultOpen = root.getAttribute('data-rfr-dialog-default-open') === 'true'
+      let isOpen = defaultOpen
+
+      const trigger = root.querySelector<HTMLElement>('[data-rfr-dialog-trigger]')
+      const overlay = root.querySelector<HTMLElement>('[data-rfr-dialog-overlay]')
+      const content = root.querySelector<HTMLElement>('[data-rfr-dialog-content]')
+      const closeBtns = root.querySelectorAll<HTMLElement>('[data-rfr-dialog-close]')
+
+      function setState(open: boolean) {
+        isOpen = open
+        const state = open ? 'open' : 'closed'
+        root.setAttribute('data-state', state)
+        trigger?.setAttribute('aria-expanded', String(open))
+        overlay?.setAttribute('data-state', state)
+        content?.setAttribute('data-state', state)
+
+        if (open) {
+          overlay?.removeAttribute('hidden')
+          content?.removeAttribute('hidden')
+          // Focus the content or first focusable element
+          if (content) {
+            const firstFocusable = content.querySelector<HTMLElement>(FOCUSABLE)
+            if (firstFocusable) {
+              firstFocusable.focus()
+            } else {
+              content.focus()
+            }
+          }
+          // Prevent body scroll for modal
+          if (isModal) {
+            document.body.style.overflow = 'hidden'
+          }
+        } else {
+          overlay?.setAttribute('hidden', '')
+          content?.setAttribute('hidden', '')
+          if (isModal) {
+            document.body.style.overflow = ''
+          }
+          // Return focus to trigger
+          trigger?.focus()
+        }
+
+        root.dispatchEvent(new CustomEvent('rfr-dialog-change', { detail: { open }, bubbles: true }))
+      }
+
+      // Trigger click
+      trigger?.addEventListener('click', () => setState(!isOpen))
+
+      // Close button clicks
+      closeBtns.forEach((btn) => {
+        btn.addEventListener('click', () => setState(false))
+      })
+
+      // Overlay click-to-close
+      overlay?.addEventListener('click', (e) => {
+        if (e.target === overlay) {
+          setState(false)
+        }
+      })
+
+      // Keyboard: Escape to close, Tab trapping for modal
+      root.addEventListener('keydown', (e) => {
+        if (!isOpen) return
+
+        if (e.key === 'Escape') {
+          e.preventDefault()
+          setState(false)
+          return
+        }
+
+        // Focus trap for modal dialogs
+        if (isModal && e.key === 'Tab' && content) {
+          const focusables = content.querySelectorAll<HTMLElement>(FOCUSABLE)
+          if (focusables.length === 0) return
+
+          const first = focusables[0]
+          const last = focusables[focusables.length - 1]
+
+          if (e.shiftKey) {
+            if (document.activeElement === first) {
+              e.preventDefault()
+              last.focus()
+            }
+          } else {
+            if (document.activeElement === last) {
+              e.preventDefault()
+              first.focus()
+            }
+          }
+        }
+      })
+
+      // Set initial state
+      if (!defaultOpen) {
+        overlay?.setAttribute('hidden', '')
+        content?.setAttribute('hidden', '')
+      }
+    })
+  }
+
+  // Run on initial load and after Astro page transitions
+  initDialogs()
+  document.addEventListener('astro:after-swap', initDialogs)
+</script>

package/dist/astro-dialog/DialogClose.astro

@@ -0,0 +1,16 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<button
+  type="button"
+  data-rfr-dialog-close
+  class={cn(className)}
+  {...props}
+>
+  <slot />
+</button>

package/dist/astro-dialog/DialogContent.astro

@@ -0,0 +1,24 @@
+---
+import { dialogContentVariants } from '@refraction-ui/dialog'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Whether the dialog is modal (default: true) */
+  modal?: boolean
+}
+
+const { modal = true, class: className, ...props } = Astro.props
+---
+
+<div
+  data-rfr-dialog-content
+  data-state="closed"
+  role="dialog"
+  aria-modal={modal}
+  tabindex="-1"
+  hidden
+  class={cn(dialogContentVariants(), className)}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-dialog/DialogDescription.astro

@@ -0,0 +1,15 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<p
+  data-rfr-dialog-description
+  class={cn('text-sm text-muted-foreground', className)}
+  {...props}
+>
+  <slot />
+</p>

package/dist/astro-dialog/DialogFooter.astro

@@ -0,0 +1,14 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-dialog/DialogHeader.astro

@@ -0,0 +1,14 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-dialog/DialogOverlay.astro

@@ -0,0 +1,17 @@
+---
+import { overlayStyles } from '@refraction-ui/dialog'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-rfr-dialog-overlay
+  data-state="closed"
+  hidden
+  class={cn(overlayStyles, className)}
+  {...props}
+>
+</div>

package/dist/astro-dialog/DialogTitle.astro

@@ -0,0 +1,15 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<h2
+  data-rfr-dialog-title
+  class={cn('text-lg font-semibold leading-none tracking-tight', className)}
+  {...props}
+>
+  <slot />
+</h2>

package/dist/astro-dialog/DialogTrigger.astro

@@ -0,0 +1,18 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<button
+  type="button"
+  data-rfr-dialog-trigger
+  aria-haspopup="dialog"
+  aria-expanded="false"
+  class={cn(className)}
+  {...props}
+>
+  <slot />
+</button>

package/dist/astro-dialog/index.ts

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