@santi020k/lumen-astro 1.3.0 → 1.4.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.4.0",
   "publishConfig": {
     "access": "public"
   },
@@ -37,8 +37,8 @@
   ],
   "dependencies": {
     "uqr": "^0.1.3",
-    "@santi020k/lumen": "^1.3.0",
-    "@santi020k/lumen-core": "^1.3.0"
+    "@santi020k/lumen": "^1.4.0",
+    "@santi020k/lumen-core": "^1.4.0"
   },
   "devDependencies": {
     "@astrojs/ts-plugin": "^1.10.10",