@santi020k/lumen-astro 0.3.0 → 1.0.0

package/components/Carousel.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'section'> {
   class?: string | null
   className?: string
@@ -17,10 +17,10 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-carousel',
-    glass && 'ui-carousel--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-carousel',
+  glass && 'ui-carousel--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 

package/components/Cascader.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface CascaderOption {
   children?: CascaderOption[]
   label: string
@@ -28,7 +28,7 @@ const {
 
 interface RenderedColumn {
   id: string
-  options: { label: string; nextId?: string | undefined; value: string }[]
+  options: { label: string, nextId?: string | undefined, value: string }[]
   root: boolean
 }
 
@@ -83,7 +83,13 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   </button>
   <div class="ui-cascader__panel" data-ui-panel hidden id={panelId}>
     {columns.map(column => (
-      <ol aria-label={column.root ? 'Options' : 'Sub-options'} class="ui-cascader__column" hidden={!column.root} id={column.id} role="listbox">
+      <ol
+        aria-label={column.root ? 'Options' : 'Sub-options'}
+        class="ui-cascader__column"
+        hidden={!column.root}
+        id={column.id}
+        role="listbox"
+      >
         {column.options.map(option => (
           <li role="presentation">
             <button

package/components/Chart.astro

@@ -1,26 +1,37 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'figure'> {
+  caption?: string
   class?: string | null
   className?: string
+  description?: string
   glass?: boolean | 'subtle' | 'strong'
+  heading?: string
+  presentation?: 'bare' | 'default'
+  value?: string
 }
 
 const {
+  caption,
   class: classProp = '',
   className = '',
+  description,
   glass = false,
+  heading,
+  presentation = 'default',
+  value,
   ...rest
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-chart',
-    glass && 'ui-chart--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-chart',
+  presentation === 'bare' && 'ui-chart--bare',
+  glass && 'ui-chart--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 
@@ -28,5 +39,20 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   class:list={classList}
   {...passthrough}
 >
+  {
+    (heading || description || value || Astro.slots.has('header')) && (
+      <header>
+        <slot name="header">
+          <div class="ui-chart__heading">
+            {heading && <h3>{heading}</h3>}
+            {description && <p>{description}</p>}
+          </div>
+          {value && <strong data-ui-chart-value>{value}</strong>}
+        </slot>
+        <slot name="actions" />
+      </header>
+    )
+  }
   <slot />
+  {caption && <figcaption>{caption}</figcaption>}
 </figure>

package/components/Checkbox.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 type HTMLInputAttributes = HTMLAttributes<'input'>
 
 interface Props extends Omit<HTMLInputAttributes, 'type'> {
@@ -11,6 +11,7 @@ interface Props extends Omit<HTMLInputAttributes, 'type'> {
 }
 
 const { class: classProp = '', className = '', ...rest } = Astro.props
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-checkbox'
 ], classProp, className)
 ---

package/components/CheckboxGroup.astro

@@ -0,0 +1,39 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'fieldset'> {
+  class?: string | null
+  className?: string
+  invalid?: boolean
+  legend?: string
+  orientation?: 'horizontal' | 'vertical'
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  invalid = false,
+  legend,
+  orientation = 'vertical',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-checkbox-group',
+  `ui-checkbox-group--${orientation}`
+], classProp, className)
+---
+
+<fieldset
+  aria-invalid={invalid ? 'true' : undefined}
+  class:list={classList}
+  data-invalid={invalid ? 'true' : undefined}
+  data-orientation={orientation}
+  data-ui-checkbox-group
+  {...passthrough}
+>
+  {legend && <legend>{legend}</legend>}
+  <slot />
+</fieldset>

package/components/Code.astro

@@ -1,9 +1,10 @@
 ---
-import { renderLumenCodeHtml, renderLumenIconSvg, resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { renderLumenCodeHtml, renderLumenIconSvg, resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 type CodeTheme = 'auto' | 'lumen' | 'santi020k'
+
 type CodeVariant = 'block' | 'inline'
 
 interface Props extends HTMLAttributes<'code'> {
@@ -38,62 +39,64 @@ const { classList: blockClassList, passthrough } = resolveLumenAstroProps(rest,
   'ui-code--block',
   wrap && 'ui-code--wrap'
 ], classProp, className)
+
 const { classList: inlineClassList } = resolveLumenAstroProps(rest, [
   'ui-code',
   'ui-code--inline'
 ], classProp, className)
+
 const shouldShowHeader = variant === 'block' && Boolean(copy || label || language)
 const hasCode = code !== undefined
 const renderedCode = hasCode ? renderLumenCodeHtml(code, language) : ''
 ---
 
-{variant === 'block' ? (
-  <figure
-    class:list={blockClassList}
-    data-code-theme={theme}
-    data-language={language}
-    data-ui-code
-    {...passthrough}
-  >
-    {shouldShowHeader && (
-      <figcaption class="ui-code__header">
-        <span class="ui-code__dots" aria-hidden="true">
-          <span class="ui-code__dot ui-code__dot--red"></span>
-          <span class="ui-code__dot ui-code__dot--yellow"></span>
-          <span class="ui-code__dot ui-code__dot--green"></span>
-        </span>
-        <span class="ui-code__meta">
-          {language && <span class="ui-code__language">{language}</span>}
-          {label && <span class="ui-code__label">{label}</span>}
-        </span>
-        {copy && (
-          <button
-            aria-label="Copy code to clipboard"
-            class="ui-code__copy"
-            data-ui-code-copy
-            type="button"
-          >
-            <Fragment set:html={renderLumenIconSvg('copy', { className: 'ui-code__copy-icon' })} />
-            <Fragment set:html={renderLumenIconSvg('check', { className: 'ui-code__check-icon' })} />
-          </button>
-        )}
-      </figcaption>
-    )}
-    {highlighted ? (
-      <slot />
-    ) : hasCode ? (
-      <pre><code set:html={renderedCode}></code></pre>
-    ) : (
-      <pre><code><slot /></code></pre>
-    )}
-  </figure>
-) : (
-  <code
-    class:list={inlineClassList}
-    data-code-theme={theme}
-    data-language={language}
-    {...passthrough}
-  >
-    {hasCode ? code : <slot />}
-  </code>
-)}
+{variant === 'block' ?
+  (
+    <figure
+      class:list={blockClassList}
+      data-code-theme={theme}
+      data-language={language}
+      data-slot="code"
+      data-ui-code
+      {...passthrough}
+    >
+      {shouldShowHeader && (
+        <figcaption class="ui-code__header">
+          <span class="ui-code__dots" aria-hidden="true">
+            <span class="ui-code__dot ui-code__dot--red"></span>
+            <span class="ui-code__dot ui-code__dot--yellow"></span>
+            <span class="ui-code__dot ui-code__dot--green"></span>
+          </span>
+          <span class="ui-code__meta">
+            {language && <span class="ui-code__language">{language}</span>}
+            {label && <span class="ui-code__label">{label}</span>}
+          </span>
+          {copy && (
+            <button
+              aria-label="Copy code to clipboard"
+              class="ui-code__copy"
+              data-ui-code-copy
+              type="button"
+            >
+              <Fragment set:html={renderLumenIconSvg('copy', { className: 'ui-code__copy-icon' })} />
+              <Fragment set:html={renderLumenIconSvg('check', { className: 'ui-code__check-icon' })} />
+            </button>
+          )}
+        </figcaption>
+      )}
+      {highlighted && <slot />}
+      {!highlighted && hasCode && <pre><code set:html={renderedCode}></code></pre>}
+      {!highlighted && !hasCode && <pre><code><slot /></code></pre>}
+    </figure>
+  ) :
+  (
+    <code
+      class:list={inlineClassList}
+      data-code-theme={theme}
+      data-language={language}
+      data-slot="code"
+      {...passthrough}
+    >
+      {hasCode ? code : <slot />}
+    </code>
+  )}

package/components/CodeTabs.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 import Code from './Code.astro'
 import Tabs from './Tabs.astro'
 
@@ -41,20 +41,20 @@ const {
 } = Astro.props
 
 const selectedValue = initialValue ?? items[0]?.value
+
 const tabsStateProps = {
   ...(selectedValue === undefined ? {} : { initialValue: selectedValue }),
   ...(storageKey === undefined ? {} : { storageKey })
 }
+
 const { classList, passthrough } = resolveLumenAstroProps(
-  rest,
-  ['ui-code-tabs'],
-  classProp ?? '',
-  className
+  rest, ['ui-code-tabs'], classProp ?? '', className
 )
 ---
 
 <Tabs
   class:list={classList}
+  data-slot="code-tabs"
   {...tabsStateProps}
   {...passthrough}
 >

package/components/Collapsible.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'details'> {
   class?: string | null
   className?: string
@@ -15,7 +15,7 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-collapsible'
+  'ui-collapsible'
 ], classProp, className)
 ---
 

package/components/ColorPicker.astro

@@ -1,14 +1,15 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'input'> {
   class?: string | null
   className?: string
 }
 
 const { class: classProp = '', className = '', type = 'color', ...rest } = Astro.props
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-color-picker'
 ], classProp, className)
 ---

package/components/Combobox.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'input'> {
   class?: string | null
   className?: string
@@ -31,9 +31,8 @@ const {
 } = Astro.props
 
 const inputId = id ?? `${list}-input`
-const normalizedOptions = options.map(option =>
-  typeof option === 'string' ? { label: option, value: option } : option
-)
+const normalizedOptions = options.map(option => typeof option === 'string' ? { label: option, value: option } : option)
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-combobox'
 ], classProp, className)
 ---

package/components/Command.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string
@@ -17,10 +17,10 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-command',
-    glass && 'ui-command--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-command',
+  glass && 'ui-command--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 

package/components/Container.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: 'article' | 'div' | 'main' | 'section'
+  class?: string | null
+  className?: string
+  size?: 'full' | 'lg' | 'md' | 'sm'
+}
+
+const {
+  as: Tag = 'div',
+  class: classProp = '',
+  className = '',
+  size = 'lg',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-container',
+  `ui-container--${size}`
+], classProp, className)
+---
+
+<Tag class:list={classList} data-size={size} data-ui-container {...passthrough}>
+  <slot />
+</Tag>

package/components/ContextMenu.astro

@@ -1,32 +1,26 @@
 ---
-import { resolveLumenAstroProps, resolveLumenGlass } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'menu'> {
   class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
-  /**
-   * @deprecated Use `glass` instead. `surface="glass"` maps to `glass={true}`.
-   */
-  surface?: 'default' | 'glass'
 }
 
 const {
   class: classProp = '',
   className = '',
   glass = false,
-  surface = 'default',
   ...rest
 } = Astro.props
 
-const resolvedGlass = resolveLumenGlass(glass, surface)
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-menu',
-    resolvedGlass && 'ui-menu--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-menu',
+  glass && 'ui-menu--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 
@@ -34,7 +28,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
     to get right-click / Shift+F10 open behavior from the runtime. Without a
     trigger the menu renders statically. */}
 <menu
-  data-surface={resolvedGlass ? 'glass' : 'default'}
+  data-surface={glass ? 'glass' : 'default'}
   data-ui-context-menu
   role="menu"
   class:list={classList}

package/components/CopyButton.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'button'> {
+  class?: string | null
+  className?: string
+  copiedLabel?: string
+  errorLabel?: string
+  label?: string
+  resetAfter?: number
+  target?: string
+  toast?: boolean
+  value?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  copiedLabel = 'Copied to clipboard',
+  errorLabel = 'Could not copy to clipboard',
+  label = 'Copy to clipboard',
+  resetAfter = 2000,
+  target,
+  toast = false,
+  type = 'button',
+  value,
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-button',
+  'ui-button--outline',
+  'ui-copy-button'
+], classProp, className)
+---
+
+<button
+  aria-label={label}
+  class:list={classList}
+  data-copy-copied-label={copiedLabel}
+  data-copy-error-label={errorLabel}
+  data-copy-label={label}
+  data-copy-reset-after={Math.max(0, resetAfter)}
+  data-copy-target={target}
+  data-copy-toast={toast ? 'true' : undefined}
+  data-copy-value={value}
+  data-state="idle"
+  data-ui-copy-button
+  type={type}
+  {...passthrough}
+>
+  <slot>Copy</slot>
+</button>

package/components/CoverImage.astro

@@ -1,9 +1,10 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import type { ImageMetadata } from 'astro'
+import type { HTMLAttributes } from 'astro/types'
+
 import { Picture } from 'astro:assets'
 
-import type { HTMLAttributes } from 'astro/types'
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 
 interface Props extends HTMLAttributes<'div'> {
   alt: string
@@ -64,19 +65,22 @@ if (orientation === 'portrait') {
 let cardWrapperClass = `${cardAspectClass} rounded-t-[1.75rem] border-b border-line/45`
 
 if (featured && orientation === 'landscape') {
-  cardWrapperClass = `aspect-16/10 rounded-t-[1.75rem] border-b border-line/45`
+  cardWrapperClass = 'aspect-16/10 rounded-t-[1.75rem] border-b border-line/45'
 } else if (useContainedFrame) {
-  cardWrapperClass = `${cardAspectClass} rounded-t-[1.75rem] flex items-center justify-center border-b border-line/45 bg-linear-to-br from-surface-muted via-surface to-brand-soft/30 p-4 sm:p-5`
+  cardWrapperClass = [
+    `${cardAspectClass} rounded-t-[1.75rem] flex items-center justify-center`,
+    'border-b border-line/45 bg-linear-to-br from-surface-muted',
+    'via-surface to-brand-soft/30 p-4 sm:p-5'
+  ].join(' ')
 }
 
 let detailWrapperClass = 'w-full'
 let detailImageClass = 'size-full object-contain'
 let detailWrapperStyle: string | undefined
-
-let cardImageClass = `size-full object-cover motion-safe:group-hover:scale-[1.03]`
+let cardImageClass = 'size-full object-cover motion-safe:group-hover:scale-[1.03]'
 
 if (useContainedFrame) {
-  detailWrapperClass = `flex min-h-[22rem] items-center justify-center bg-linear-to-br from-surface-muted via-surface to-brand-soft/35 p-4 sm:min-h-[28rem] sm:p-6 lg:min-h-[34rem] lg:p-8`
+  detailWrapperClass = 'flex min-h-[22rem] items-center justify-center bg-linear-to-br from-surface-muted via-surface to-brand-soft/35 p-4 sm:min-h-[28rem] sm:p-6 lg:min-h-[34rem] lg:p-8'
 
   if (orientation === 'portrait') {
     detailImageClass = 'mx-auto h-full w-auto max-w-full object-contain'
@@ -84,7 +88,7 @@ if (useContainedFrame) {
     detailImageClass = 'mx-auto h-full w-full max-w-[34rem] object-contain'
   }
 
-  cardImageClass = `mx-auto h-full w-full object-contain motion-safe:group-hover:scale-[1.02]`
+  cardImageClass = 'mx-auto h-full w-full object-contain motion-safe:group-hover:scale-[1.02]'
 } else {
   detailWrapperStyle = `aspect-ratio: ${image.width} / ${image.height};`
 }
@@ -114,14 +118,17 @@ let targetHeight = 800
 
 if (mode === 'detail') {
   targetWidth = 1600
+
   targetHeight = 1000
 }
 
 if (orientation === 'portrait') {
   targetHeight = mode === 'detail' ? 1500 : 1280
+
   targetWidth = Math.round(targetHeight * 0.8)
 } else if (orientation === 'square') {
   targetHeight = mode === 'detail' ? 1200 : 1024
+
   targetWidth = targetHeight
 }
 
@@ -167,7 +174,10 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   {mode === 'card' && !useContainedFrame && showCardOverlay && (
     <div
       aria-hidden="true"
-      class="absolute inset-0 bg-linear-to-t from-canvas/55 via-canvas/10 to-transparent"
+      class="
+        from-canvas/55 via-canvas/10 absolute inset-0 bg-linear-to-t
+        to-transparent
+      "
     />
   )}