@santi020k/lumen-astro 1.3.0 → 1.6.0

package/components/Backdrop.astro

@@ -0,0 +1,35 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string | null
+  className?: string
+  intensity?: 'medium' | 'strong' | 'subtle'
+  tone?: 'accent' | 'brand' | 'neutral'
+  variant?: 'aurora' | 'dots' | 'grid' | 'rays'
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  intensity = 'medium',
+  tone = 'brand',
+  variant = 'aurora',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-backdrop',
+  `ui-backdrop--${variant}`,
+  `ui-backdrop--${tone}`,
+  `ui-backdrop--${intensity}`
+], classProp, className)
+---
+
+<div class:list={classList} {...passthrough}>
+  <div class="ui-backdrop__content">
+    <slot />
+  </div>
+</div>

package/components/Graphic.astro

@@ -0,0 +1,43 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string | null
+  className?: string
+  label?: string
+  size?: 'lg' | 'md' | 'sm'
+  tone?: 'accent' | 'brand' | 'neutral'
+  variant?: 'glow' | 'grid' | 'orbit'
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  label,
+  size = 'md',
+  tone = 'brand',
+  variant = 'orbit',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-graphic',
+  `ui-graphic--${variant}`,
+  `ui-graphic--${tone}`,
+  `ui-graphic--${size}`
+], classProp, className)
+---
+
+<div
+  aria-hidden={label ? undefined : 'true'}
+  aria-label={label}
+  class:list={classList}
+  role={label ? 'img' : undefined}
+  {...passthrough}
+>
+  <div class="ui-graphic__content">
+    <slot />
+  </div>
+</div>

package/components/Illustration.astro

@@ -0,0 +1,67 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'span'> {
+  class?: string | null
+  className?: string
+  label?: string
+  size?: 'lg' | 'md' | 'sm'
+  tone?: 'accent' | 'auto' | 'brand' | 'neutral'
+  variant?: 'empty' | 'error' | 'offline' | 'success'
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  label,
+  size = 'md',
+  tone = 'auto',
+  variant = 'empty',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-illustration',
+  `ui-illustration--${variant}`,
+  `ui-illustration--${tone}`,
+  `ui-illustration--${size}`
+], classProp, className)
+---
+
+<span
+  aria-hidden={label ? undefined : 'true'}
+  aria-label={label}
+  class:list={classList}
+  role={label ? 'img' : undefined}
+  {...passthrough}
+>
+  <svg aria-hidden="true" fill="none" viewBox="0 0 120 120">
+    <circle class="ui-illustration__wash" cx="60" cy="60" r="48" />
+    {variant === 'empty' && (
+      <g>
+        <path d="M32 48h56l-7 35H39l-7-35Z" />
+        <path d="M43 48 49 36h22l6 12M47 66h26" />
+      </g>
+    )}
+    {variant === 'success' && (
+      <g>
+        <circle cx="60" cy="60" r="28" />
+        <path d="m45 60 10 10 21-23" />
+      </g>
+    )}
+    {variant === 'error' && (
+      <g>
+        <circle cx="60" cy="60" r="28" />
+        <path d="m49 49 22 22m0-22L49 71" />
+      </g>
+    )}
+    {variant === 'offline' && (
+      <g>
+        <path d="M37 74h44a14 14 0 0 0 1-28 23 23 0 0 0-42-4 16 16 0 0 0-3 32Z" />
+        <path d="m38 34 44 52" />
+      </g>
+    )}
+  </svg>
+</span>

package/index.ts

@@ -11,6 +11,7 @@ export { default as AspectRatio } from './components/AspectRatio.astro'
 export { default as Attachment } from './components/Attachment.astro'
 export { default as Autocomplete } from './components/Autocomplete.astro'
 export { default as Avatar } from './components/Avatar.astro'
+export { default as Backdrop } from './components/Backdrop.astro'
 export { default as BackToTop } from './components/BackToTop.astro'
 export { default as Badge } from './components/Badge.astro'
 export { default as BarChart } from './components/BarChart.astro'
@@ -65,9 +66,11 @@ export { default as FloatingBadge } from './components/FloatingBadge.astro'
 export { default as Form } from './components/Form.astro'
 export { default as FormattedDate } from './components/FormattedDate.astro'
 export { default as GradientDivider } from './components/GradientDivider.astro'
+export { default as Graphic } from './components/Graphic.astro'
 export { default as Grid } from './components/Grid.astro'
 export { default as HoverCard } from './components/HoverCard.astro'
 export { default as Icon } from './components/Icon.astro'
+export { default as Illustration } from './components/Illustration.astro'
 export { default as Image } from './components/Image.astro'
 export { default as Input } from './components/Input.astro'
 export { default as InputGroup } from './components/InputGroup.astro'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen-astro",
-  "version": "1.3.0",
+  "version": "1.6.0",
   "publishConfig": {
     "access": "public"
   },
@@ -37,14 +37,14 @@
   ],
   "dependencies": {
     "uqr": "^0.1.3",
-    "@santi020k/lumen": "^1.3.0",
-    "@santi020k/lumen-core": "^1.3.0"
+    "@santi020k/lumen-core": "^1.4.0",
+    "@santi020k/lumen": "^1.6.0"
   },
   "devDependencies": {
-    "@astrojs/ts-plugin": "^1.10.10",
-    "astro": "^7.2.0",
+    "@astrojs/ts-plugin": "^1.10.11",
+    "astro": "^7.2.6",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.11"
   },
   "peerDependencies": {
     "astro": ">=5"

package/runtime/UIPrimitives.astro

@@ -3375,13 +3375,13 @@ const kanbanColumnSelector = '[data-ui-kanban-column]'
 
 const initKanbanBoards = (scope: ParentNode): void => {
   for (const root of scope.querySelectorAll<HTMLElement>('[data-ui-kanban]')) {
+    for (const handle of root.querySelectorAll<HTMLElement>('[data-ui-kanban-handle]'))
+      handle.draggable = true
+
     if (root.dataset.uiKanbanBound === 'true') continue
 
     root.dataset.uiKanbanBound = 'true'
 
-    for (const handle of root.querySelectorAll<HTMLElement>('[data-ui-kanban-handle]'))
-      handle.draggable = true
-
     let pointer: {
       active: boolean
       handle: HTMLElement
@@ -3391,13 +3391,21 @@ const initKanbanBoards = (scope: ParentNode): void => {
       startY: number
     } | undefined
 
-    const itemFor = (target: EventTarget | null): HTMLElement | null => target instanceof Element ?
-      target.closest<HTMLElement>('[data-ui-kanban-item]') :
-      null
+    const itemFor = (target: EventTarget | null): HTMLElement | null => {
+      const item = target instanceof Element ?
+        target.closest<HTMLElement>('[data-ui-kanban-item]') :
+        null
+
+      return item?.closest<HTMLElement>('[data-ui-kanban]') === root ? item : null
+    }
 
-    const columnFor = (target: EventTarget | null): HTMLElement | null => target instanceof Element ?
-      target.closest<HTMLElement>(kanbanColumnSelector) :
-      null
+    const columnFor = (target: EventTarget | null): HTMLElement | null => {
+      const column = target instanceof Element ?
+        target.closest<HTMLElement>(kanbanColumnSelector) :
+        null
+
+      return column?.closest<HTMLElement>('[data-ui-kanban]') === root ? column : null
+    }
 
     const clearState = (): void => {
       pointer = undefined
@@ -3580,8 +3588,7 @@ const initKanbanBoards = (scope: ParentNode): void => {
 
       pointer.item.dataset.state = 'dragging'
 
-      const target = document.elementFromPoint(event.clientX, event.clientY)
-        ?.closest<HTMLElement>(kanbanColumnSelector)
+      const target = columnFor(document.elementFromPoint(event.clientX, event.clientY))
 
       for (const column of root.querySelectorAll<HTMLElement>(kanbanColumnSelector)) {
         if (column === target) column.dataset.state = 'drop-target'
@@ -3592,8 +3599,7 @@ const initKanbanBoards = (scope: ParentNode): void => {
     root.addEventListener('pointerup', event => {
       if (!pointer || pointer.pointerId !== event.pointerId) return
 
-      const target = document.elementFromPoint(event.clientX, event.clientY)
-        ?.closest<HTMLElement>(kanbanColumnSelector)
+      const target = columnFor(document.elementFromPoint(event.clientX, event.clientY))
 
       if (pointer.active && target) requestMove(pointer.item, target, 'pointer')