@santi020k/lumen-astro 0.3.0 → 1.0.0

package/components/HoverCard.astro

@@ -1,37 +1,31 @@
 ---
-import { resolveLumenAstroProps, resolveLumenGlass } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'aside'> {
   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-hover-card',
-    resolvedGlass && 'ui-hover-card--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-hover-card',
+  glass && 'ui-hover-card--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 
 <aside
-  data-surface={resolvedGlass ? 'glass' : 'default'}
+  data-surface={glass ? 'glass' : 'default'}
   data-ui-hover-card
   class:list={classList}
   {...passthrough}

package/components/Icon.astro

@@ -1,11 +1,10 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
+
 import {
+  type LumenIconName,
   renderLumenIconSvg,
-  resolveLumenAstroProps,
-  type LumenIconName
-} from '@santi020k/lumen-core'
-
-import type { HTMLAttributes } from 'astro/types'
+  resolveLumenAstroProps } from '@santi020k/lumen-core'
 
 type IconSize = 'default' | 'lg' | 'sm' | 'xl'
 
@@ -32,7 +31,10 @@ const isDecorative = decorative ?? !label
 const iconSvg = name ? renderLumenIconSvg(name) : ''
 
 if (name && !iconSvg && import.meta.env.DEV) {
-  console.warn(`[Lumen Icon] Unknown Lucide icon "${name}". Use the default slot for brand or project-specific SVGs.`)
+  console.warn(
+    `[Lumen Icon] Unknown icon "${name}". ` +
+    'Register an icon pack or use the default slot for project-specific SVGs.'
+  )
 }
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [

package/components/Image.astro

@@ -1,11 +1,12 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
 import {
   Image as AstroImage,
   type LocalImageProps,
   type RemoteImageProps
 } from 'astro:assets'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 type Props = (LocalImageProps | RemoteImageProps) & {
   class?: string | null
   className?: string

package/components/Input.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 Omit<HTMLAttributes<'input'>, 'size'> {
   class?: string | null
   className?: string
@@ -10,10 +10,11 @@ interface Props extends Omit<HTMLAttributes<'input'>, 'size'> {
 }
 
 const { class: classProp = '', className = '', size = 'default', type = 'text', ...rest } = Astro.props
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-input',
-    size === 'sm' && 'ui-input--sm',
-    size === 'lg' && 'ui-input--lg'
+  'ui-input',
+  size === 'sm' && 'ui-input--sm',
+  size === 'lg' && 'ui-input--lg'
 ], classProp, className)
 ---
 

package/components/InputGroup.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
@@ -15,7 +15,7 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-input-group'
+  'ui-input-group'
 ], classProp, className)
 ---
 

package/components/InputOTP.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 Omit<HTMLAttributes<'input'>, 'size'> {
   class?: string | null
   className?: string
@@ -20,9 +20,11 @@ const {
   pattern = '[0-9]*',
   ...rest
 } = Astro.props
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-input-otp-field'
 ], classProp, className)
-const segments = Array.from({ length: Math.max(1, Number(length) || 6) }, (_, index) => index)
+
+const segments = Array.from({ length: Math.max(1, length || 6) }, (_, index) => index)
 ---
 
 <div

package/components/Item.astro

@@ -1,15 +1,17 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'div'> {
+  as?: 'article' | 'div' | 'li' | 'section'
   class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
 }
 
 const {
+  as: Tag = 'div',
   class: classProp = '',
   className = '',
   glass = false,
@@ -17,16 +19,17 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-item',
-    glass && 'ui-item--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-item',
+  glass && 'ui-item--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 
-<div
+<Tag
   class:list={classList}
+  data-slot="item"
   {...passthrough}
 >
   <slot />
-</div>
+</Tag>

package/components/Kbd.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<'kbd'> {
   class?: string | null
   className?: string
@@ -15,7 +15,7 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-kbd'
+  'ui-kbd'
 ], classProp, className)
 ---
 

package/components/Label.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<'label'> {
   class?: string | null
   className?: string
 }
 
 const { class: classProp = '', className = '', ...rest } = Astro.props
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-label'
 ], classProp, className)
 ---

package/components/LanguageToggle.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<'button'> {
   class?: string | null
   className?: string

package/components/LineChart.astro

@@ -0,0 +1,244 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import {
+  alignLumenChartSeries,
+  createLumenLineGeometry,
+  getLumenChartCategories,
+  getLumenChartDomain,
+  getLumenChartTicks,
+  getLumenChartToneClassName,
+  hasLumenChartData,
+  type LumenChartSeries,
+  resolveLumenChartTone,
+  scaleLumenChartValue
+} from '@santi020k/lumen-core'
+
+import Chart from './Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'> {
+  area?: boolean
+  caption?: string
+  class?: string | null
+  className?: string
+  description?: string
+  emptyLabel?: string
+  formatCategory?: (category: number | string) => string
+  formatValue?: (value: number) => string
+  glass?: boolean | 'subtle' | 'strong'
+  heading?: string
+  markers?: 'all' | 'auto' | 'none' | boolean | number
+  presentation?: 'bare' | 'default'
+  referenceValue?: number
+  series: readonly LumenChartSeries[]
+  showLegend?: boolean
+  showTable?: boolean
+}
+
+const {
+  area = false,
+  caption,
+  class: classProp = '',
+  className = '',
+  description,
+  emptyLabel = 'No chart data available.',
+  formatCategory = String,
+  formatValue = String,
+  glass = false,
+  heading,
+  markers = 'auto',
+  referenceValue,
+  series,
+  showLegend = series.length > 1,
+  showTable = true,
+  ...rest
+} = Astro.props
+
+const width = 640
+const height = 320
+const padding = 44
+const categories = getLumenChartCategories(series)
+const hasData = hasLumenChartData(series)
+const alignedSeries = series.map(item => alignLumenChartSeries(item, categories))
+
+const domain = getLumenChartDomain([
+  ...alignedSeries.flatMap(item => item.data.map(datum => datum.y)),
+  referenceValue ?? null
+], false)
+
+const geometries = alignedSeries.map(item => createLumenLineGeometry(item.data, {
+  domain,
+  height,
+  includeZero: false,
+  padding,
+  width
+}))
+
+const ticks = getLumenChartTicks(domain)
+const labelStep = Math.max(1, Math.ceil(categories.length / 8))
+let markerStep = 1
+
+if (markers === false || markers === 'none') markerStep = Number.POSITIVE_INFINITY
+else if (typeof markers === 'number') markerStep = Math.max(1, Math.round(markers))
+else if (markers === 'auto') markerStep = Math.max(1, Math.ceil(categories.length / 24))
+
+const valueFor = (item: LumenChartSeries, category: number | string) => item.data.find(datum => datum.x === category)
+
+const categoryLabelFor = (category: number | string) => series.flatMap(item => item.data)
+  .find(datum => datum.x === category)?.xLabel ?? formatCategory(category)
+
+const referenceY =
+  referenceValue === undefined ?
+    undefined :
+    scaleLumenChartValue(referenceValue, domain, height - padding, padding)
+---
+
+<Chart
+  class:list={['ui-line-chart', classProp, className]}
+  {caption}
+  {description}
+  {glass}
+  {heading}
+  {...rest}
+>
+  {
+    showLegend && hasData && (
+      <ul class="ui-chart__legend" aria-label="Chart legend">
+        {series.map((item, index) => (
+          <li class={getLumenChartToneClassName(item.tone, index)}>
+            <span aria-hidden="true" />
+            {item.label}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+  {!hasData && <p class="ui-chart__empty" role="status">{emptyLabel}</p>}
+  <div class="ui-chart__plot" hidden={!hasData}>
+    <svg
+      aria-hidden="true"
+      preserveAspectRatio="xMidYMid meet"
+      viewBox={`0 0 ${width} ${height}`}
+    >
+      <g class="ui-chart__grid">
+        {
+          ticks.map(tick => {
+            const y = scaleLumenChartValue(
+              tick, domain, height - padding, padding
+            )
+
+            return (
+              <>
+                <line x1={padding} x2={width - padding} y1={y} y2={y} />
+                <text x={padding - 8} y={y}>
+                  {formatValue(tick)}
+                </text>
+              </>
+            )
+          })
+        }
+      </g>
+      <g class="ui-chart__axis-labels">
+        {
+          categories.map((category, index) => {
+            if (
+              index % labelStep !== 0 &&
+              index !== categories.length - 1
+            )
+              return null
+
+            const denominator = Math.max(1, categories.length - 1)
+
+            const x =
+              padding + (index / denominator) * (width - padding * 2)
+
+            return (
+              <text text-anchor="middle" x={x} y={height - 14}>
+                {categoryLabelFor(category)}
+              </text>
+            )
+          })
+        }
+      </g>
+      {
+        referenceY !== undefined && (
+          <line
+            class="ui-chart__reference"
+            x1={padding}
+            x2={width - padding}
+            y1={referenceY}
+            y2={referenceY}
+          />
+        )
+      }
+      {
+        geometries.map((geometry, index) => {
+          const item = series[index]
+
+          if (!item) return null
+
+          const tone = resolveLumenChartTone(item.tone, index)
+
+          return (
+            <g class:list={['ui-line-chart__series', getLumenChartToneClassName(tone)]}>
+              {area &&
+                geometry.areaPaths.map(path => (
+                  <path class="ui-line-chart__area" d={path} />
+                ))}
+              <path class="ui-line-chart__line" d={geometry.path} />
+              {Number.isFinite(markerStep) &&
+                geometry.points.map((point, pointIndex) => pointIndex % markerStep === 0 && (
+                  <circle
+                    class="ui-line-chart__point"
+                    cx={point.xCoordinate}
+                    cy={point.yCoordinate}
+                    r="3"
+                  >
+                    <title>
+                      {`${point.xLabel ?? formatCategory(point.x)} · ${item.label}: ${formatValue(point.y ?? 0)}`}
+                    </title>
+                  </circle>
+                ))}
+            </g>
+          )
+        })
+      }
+    </svg>
+  </div>
+  {
+    showTable && hasData && (
+      <details class="ui-chart__data">
+        <summary>View chart data</summary>
+        <div>
+          <table>
+            <thead>
+              <tr>
+                <th scope="col">Category</th>
+                {series.map(item => <th scope="col">{item.label}</th>)}
+              </tr>
+            </thead>
+            <tbody>
+              {categories.map(category => (
+                <tr>
+                  <th scope="row">{categoryLabelFor(category)}</th>
+                  {series.map(item => {
+                    const datum = valueFor(item, category)
+
+                    return (
+                      <td>
+                        {datum?.label ??
+                          (datum?.y === null || datum === undefined ?
+                            'Not available' :
+                            formatValue(datum.y))}
+                      </td>
+                    )
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </details>
+    )
+  }
+</Chart>

package/components/Link.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<'a'> {
   class?: string | null
   className?: string
@@ -25,13 +25,14 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   variant === 'inherit' && 'ui-link--inherit'
 ], classProp, className)
 
-const safeRel = newTab
-  ? [...new Set(`${rel ?? ''} noopener noreferrer`.trim().split(/\s+/))].join(' ')
-  : rel
+const safeRel = newTab ?
+  [...new Set(`${rel ?? ''} noopener noreferrer`.trim().split(/\s+/))].join(' ') :
+  rel
 ---
 
 <a
   class:list={classList}
+  data-slot="link"
   data-variant={variant}
   rel={safeRel}
   target={newTab ? '_blank' : target}

package/components/ListBox.astro

@@ -0,0 +1,154 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface ListBoxOption {
+  disabled?: boolean
+  label: string
+  section?: string
+  value: string
+}
+
+interface Props extends Omit<HTMLAttributes<'select'>, 'size' | 'value'> {
+  class?: string | null
+  className?: string
+  emptyMessage?: string
+  label?: string
+  loading?: boolean
+  loadingMessage?: string
+  multiple?: boolean
+  options?: (ListBoxOption | string)[]
+  selectionFollowsFocus?: boolean
+  value?: string | string[]
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  disabled = false,
+  emptyMessage = 'No options available',
+  id,
+  label,
+  loading = false,
+  loadingMessage = 'Loading options',
+  multiple = false,
+  name,
+  options = [],
+  required = false,
+  selectionFollowsFocus = false,
+  value,
+  ...rest
+} = Astro.props
+
+const normalizedOptions = options.map(option => typeof option === 'string' ? { label: option, value: option } : option)
+const optionGroups: { label?: string, options: ListBoxOption[] }[] = []
+
+for (const option of normalizedOptions) {
+  const currentGroup = optionGroups.at(-1)
+
+  if (!currentGroup || currentGroup.label !== option.section) {
+    optionGroups.push({
+      ...(option.section ? { label: option.section } : {}),
+      options: [option]
+    })
+  } else {
+    currentGroup.options.push(option)
+  }
+}
+
+let initialValues: string[] = []
+
+if (Array.isArray(value)) initialValues = value
+else if (value !== undefined) initialValues = [value]
+
+const selectedValues = new Set(initialValues)
+const controlId = id ?? `ui-list-box-${name ?? 'field'}`
+const listId = `${controlId}-list`
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-list-box'], classProp, className)
+---
+
+<div
+  class:list={classList}
+  data-loading={loading ? 'true' : undefined}
+  data-multiple={multiple ? 'true' : undefined}
+  data-selection-follows-focus={selectionFollowsFocus ? 'true' : undefined}
+  data-ui-list-box
+>
+  {label && <label class="ui-label" for={controlId}>{label}</label>}
+  <select
+    class="ui-list-box__native"
+    data-ui-list-box-native
+    disabled={disabled || loading}
+    id={controlId}
+    multiple={multiple}
+    name={name}
+    required={required}
+    size={Math.min(Math.max(normalizedOptions.length, 2), 8)}
+    {...passthrough}
+  >
+    {optionGroups.map(group => group.label ?
+      (
+        <optgroup label={group.label}>
+          {group.options.map(option => (
+            <option
+              disabled={option.disabled}
+              selected={selectedValues.has(option.value)}
+              value={option.value}
+            >
+              {option.label}
+            </option>
+          ))}
+        </optgroup>
+      ) :
+      group.options.map(option => (
+        <option
+          disabled={option.disabled}
+          selected={selectedValues.has(option.value)}
+          value={option.value}
+        >
+          {option.label}
+        </option>
+      )))}
+  </select>
+  <div
+    aria-busy={loading ? 'true' : undefined}
+    aria-disabled={disabled || loading ? 'true' : undefined}
+    aria-multiselectable={multiple ? 'true' : undefined}
+    class="ui-list-box__list"
+    data-ui-list-box-list
+    hidden
+    id={listId}
+    role="listbox"
+    tabindex={disabled || loading ? undefined : '0'}
+  >
+    {!loading && !normalizedOptions.length && (
+      <div aria-disabled="true" class="ui-list-box__empty" role="option">{emptyMessage}</div>
+    )}
+    {!loading && optionGroups.map((group, groupIndex) => {
+      const groupLabelId = group.label ? `${controlId}-group-${groupIndex}` : undefined
+
+      const renderedOptions = group.options.map(option => (
+        <div
+          aria-disabled={option.disabled ? 'true' : undefined}
+          aria-selected={selectedValues.has(option.value) ? 'true' : 'false'}
+          data-ui-list-box-option
+          data-value={option.value}
+          role="option"
+        >
+          {option.label}
+        </div>
+      ))
+
+      return group.label ?
+        (
+          <div aria-labelledby={groupLabelId} role="group">
+            <div class="ui-list-box__section" id={groupLabelId}>{group.label}</div>
+            {renderedOptions}
+          </div>
+        ) :
+        renderedOptions
+    })}
+  </div>
+  {loading && <p class="ui-list-box__status" role="status">{loadingMessage}</p>}
+</div>