@santi020k/lumen-astro 0.3.0 → 1.0.0

package/components/BarChart.astro

@@ -0,0 +1,211 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import {
+  createLumenBarGeometry,
+  getLumenChartTicks,
+  getLumenChartToneClassName,
+  hasLumenChartData,
+  type LumenBarChartLayout,
+  type LumenChartOrientation,
+  type LumenChartSeries,
+  scaleLumenChartValue
+} from '@santi020k/lumen-core'
+
+import Chart from './Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'> {
+  caption?: string
+  categoryWidth?: number
+  class?: string | null
+  className?: string
+  description?: string
+  emptyLabel?: string
+  formatCategory?: (category: number | string) => string
+  formatValue?: (value: number) => string
+  glass?: boolean | 'subtle' | 'strong'
+  heading?: string
+  layout?: LumenBarChartLayout
+  orientation?: LumenChartOrientation
+  presentation?: 'bare' | 'default'
+  series: readonly LumenChartSeries[]
+  showLegend?: boolean
+  showTable?: boolean
+}
+
+const {
+  caption,
+  categoryWidth,
+  class: classProp = '',
+  className = '',
+  description,
+  emptyLabel = 'No chart data available.',
+  formatCategory = String,
+  formatValue = String,
+  glass = false,
+  heading,
+  layout = 'grouped',
+  orientation = 'vertical',
+  series,
+  showLegend = series.length > 1,
+  showTable = true,
+  ...rest
+} = Astro.props
+
+const geometry = createLumenBarGeometry(series, { categoryWidth, layout, orientation })
+const hasData = hasLumenChartData(series)
+const ticks = getLumenChartTicks(geometry.domain)
+const categories = geometry.categories.map(category => category.category)
+
+const datumFor = (item: LumenChartSeries, category: number | string) => (
+  item.data.find(datum => datum.x === category)
+)
+
+const valueFor = (item: LumenChartSeries, category: number | string) => (
+  datumFor(item, category)?.y ?? null
+)
+
+const labelFor = (item: LumenChartSeries, category: number | string) => (
+  datumFor(item, category)?.label
+)
+
+const formattedValueFor = (item: LumenChartSeries, category: number | string) => {
+  const value = valueFor(item, category)
+
+  return value === null ? 'Not available' : formatValue(value)
+}
+
+const categoryLabelFor = (category: number | string) => {
+  const label = series.flatMap(item => item.data).find(datum => datum.x === category)?.xLabel
+
+  return label ?? formatCategory(category)
+}
+
+const margin = orientation === 'horizontal' ?
+  { bottom: 24, left: Math.max(64, Math.min(240, categoryWidth ?? 112)), right: 20, top: 16 } :
+  { bottom: 52, left: 52, right: 16, top: 16 }
+---
+
+<Chart
+  class:list={['ui-bar-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 ${geometry.width} ${geometry.height}`}
+    >
+      <g class="ui-chart__grid">
+        {
+          ticks.map(tick => {
+            const coordinate =
+              orientation === 'horizontal' ?
+                scaleLumenChartValue(
+                  tick, geometry.domain, margin.left, geometry.width - margin.right
+                ) :
+                scaleLumenChartValue(
+                  tick, geometry.domain, geometry.height - margin.bottom, margin.top
+                )
+
+            return orientation === 'horizontal' ?
+              (
+                <line
+                  x1={coordinate}
+                  x2={coordinate}
+                  y1={margin.top}
+                  y2={geometry.height - margin.bottom}
+                />
+              ) :
+              (
+                <line
+                  x1={margin.left}
+                  x2={geometry.width - margin.right}
+                  y1={coordinate}
+                  y2={coordinate}
+                />
+              )
+          })
+        }
+      </g>
+      <g class="ui-chart__axis-labels">
+        {
+          geometry.categories.map(category => (
+            <text
+              dominant-baseline={orientation === 'horizontal' ? 'middle' : undefined}
+              text-anchor={orientation === 'horizontal' ? 'end' : 'middle'}
+              x={category.x}
+              y={category.y}
+            >
+              {String(category.label)}
+            </text>
+          ))
+        }
+      </g>
+      <g class="ui-bar-chart__marks">
+        {
+          geometry.marks.map(mark => (
+            <rect
+              class={getLumenChartToneClassName(mark.tone)}
+              height={mark.height}
+              rx="4"
+              width={mark.width}
+              x={mark.x}
+              y={mark.y}
+            >
+              <title>
+                {`${categoryLabelFor(mark.category)} · ${mark.seriesLabel}: ${formatValue(mark.value)}`}
+              </title>
+            </rect>
+          ))
+        }
+      </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 => (
+                    <td>
+                      {labelFor(item, category) ?? formattedValueFor(item, category)}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </details>
+    )
+  }
+</Chart>

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

package/components/Bubble.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<'article'> {
   class?: string | null
   className?: string
@@ -19,11 +19,11 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-bubble',
-    from === 'user' && 'ui-bubble--user',
-    glass && 'ui-bubble--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-bubble',
+  from === 'user' && 'ui-bubble--user',
+  glass && 'ui-bubble--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 

package/components/Button.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
@@ -23,26 +23,28 @@ const {
 } = Astro.props
 
 const isDisabled = Boolean(disabled) || loading
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-button',
-    variant === 'default' && 'ui-button--default',
-    variant === 'destructive' && 'ui-button--destructive',
-    variant === 'ghost' && 'ui-button--ghost',
-    variant === 'link' && 'ui-button--link',
-    variant === 'outline' && 'ui-button--outline',
-    variant === 'secondary' && 'ui-button--secondary',
-    size === 'default' && 'ui-button--default-size',
-    size === 'sm' && 'ui-button--sm',
-    size === 'lg' && 'ui-button--lg',
-    size === 'icon' && 'ui-button--icon',
-    isDisabled && 'ui-button--disabled',
-    loading && 'ui-button--loading'
+  'ui-button',
+  variant === 'default' && 'ui-button--default',
+  variant === 'destructive' && 'ui-button--destructive',
+  variant === 'ghost' && 'ui-button--ghost',
+  variant === 'link' && 'ui-button--link',
+  variant === 'outline' && 'ui-button--outline',
+  variant === 'secondary' && 'ui-button--secondary',
+  size === 'default' && 'ui-button--default-size',
+  size === 'sm' && 'ui-button--sm',
+  size === 'lg' && 'ui-button--lg',
+  size === 'icon' && 'ui-button--icon',
+  isDisabled && 'ui-button--disabled',
+  loading && 'ui-button--loading'
 ], classProp, className)
 ---
 
 <button
-  class:list={classList}
   aria-busy={loading || undefined}
+  class:list={classList}
+  data-slot="button"
   disabled={isDisabled || undefined}
   type={type}
   {...passthrough}

package/components/ButtonGroup.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-button-group'
+  'ui-button-group'
 ], classProp, className)
 ---
 

package/components/ButtonLink.astro

@@ -1,8 +1,9 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
+
 import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-import Icon from './Icon.astro'
 
-import type { HTMLAttributes } from 'astro/types'
+import Icon from './Icon.astro'
 
 interface Props extends HTMLAttributes<'a'> {
   ariaLabel?: string
@@ -43,6 +44,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 <a
   aria-label={ariaLabel}
   class:list={classList}
+  data-slot="button-link"
   href={href}
   rel={newTab ? 'noreferrer noopener' : undefined}
   target={newTab ? '_blank' : undefined}
@@ -52,7 +54,11 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   {showArrow && (
     <Icon
       aria-hidden="true"
-      class="size-4 shrink-0 transition-transform duration-200 motion-safe:group-hover:translate-x-0.5 motion-reduce:transition-none"
+      class="
+        size-4 shrink-0 transition-transform duration-200
+        motion-safe:group-hover:translate-x-0.5
+        motion-reduce:transition-none
+      "
       name={newTab ? 'arrow-up-right' : 'arrow-right'}
     />
   )}

package/components/Calendar.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<'div'>, 'value'> {
   class?: string | null
   className?: string
@@ -19,6 +19,7 @@ const isoDatePattern = /^\d{4}-\d{2}-\d{2}$/
 const isoMonthPattern = /^\d{4}-\d{2}$/
 const weekdayFormatter = new Intl.DateTimeFormat('en', { timeZone: 'UTC', weekday: 'short' })
 const monthFormatter = new Intl.DateTimeFormat('en', { month: 'long', timeZone: 'UTC', year: 'numeric' })
+
 const dayFormatter = new Intl.DateTimeFormat('en', {
   day: 'numeric',
   month: 'long',
@@ -35,9 +36,9 @@ const parseIsoDate = (date: string | undefined): Date | undefined => {
 
   return parsed.getUTCFullYear() === year &&
     parsed.getUTCMonth() === month - 1 &&
-    parsed.getUTCDate() === day
-    ? parsed
-    : undefined
+    parsed.getUTCDate() === day ?
+    parsed :
+    undefined
 }
 
 const parseIsoMonth = (date: string | undefined): Date | undefined => {
@@ -46,21 +47,27 @@ const parseIsoMonth = (date: string | undefined): Date | undefined => {
   const [year, month] = date.split('-').map(Number)
   const parsed = new Date(Date.UTC(year, month - 1, 1))
 
-  return parsed.getUTCFullYear() === year && parsed.getUTCMonth() === month - 1
-    ? parsed
-    : undefined
+  return parsed.getUTCFullYear() === year && parsed.getUTCMonth() === month - 1 ?
+    parsed :
+    undefined
 }
 
 const formatIsoDate = (date: Date): string => date.toISOString().slice(0, 10)
 const formatIsoMonth = (date: Date): string => date.toISOString().slice(0, 7)
-const addDays = (date: Date, days: number): Date =>
-  new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + days))
-const getDaysInMonth = (date: Date): number =>
-  new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0)).getUTCDate()
-const isBefore = (date: Date, limit: Date | undefined): boolean =>
+
+const addDays = (date: Date, days: number): Date => {
+  const utc = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + days)
+
+  return new Date(utc)
+}
+
+const isBefore = (date: Date, limit: Date | undefined): boolean => (
   Boolean(limit && formatIsoDate(date) < formatIsoDate(limit))
-const isAfter = (date: Date, limit: Date | undefined): boolean =>
+)
+
+const isAfter = (date: Date, limit: Date | undefined): boolean => (
   Boolean(limit && formatIsoDate(date) > formatIsoDate(limit))
+)
 
 const {
   class: classProp = '',
@@ -82,9 +89,11 @@ const selectedDate = parseIsoDate(value)
 const minDate = parseIsoDate(min)
 const maxDate = parseIsoDate(max)
 const selectedIso = selectedDate ? formatIsoDate(selectedDate) : ''
+
 const monthDate = parseIsoMonth(month) ??
   (selectedDate ? new Date(Date.UTC(selectedDate.getUTCFullYear(), selectedDate.getUTCMonth(), 1)) : undefined) ??
   new Date(Date.UTC(todayUtc.getUTCFullYear(), todayUtc.getUTCMonth(), 1))
+
 const calendarId = id ?? `ui-calendar-${Math.random().toString(36).slice(2)}`
 const labelId = `${calendarId}-label`
 const monthIso = formatIsoMonth(monthDate)
@@ -92,26 +101,29 @@ const todayIso = formatIsoDate(todayUtc)
 const firstWeekday = (monthDate.getUTCDay() + 6) % 7
 const firstCell = addDays(monthDate, -firstWeekday)
 const visibleDates = Array.from({ length: 42 }, (_, index) => addDays(firstCell, index))
-const firstSelectableDate = visibleDates.find(date =>
-  date.getUTCMonth() === monthDate.getUTCMonth() &&
+
+const firstSelectableDate = visibleDates.find(date => date.getUTCMonth() === monthDate.getUTCMonth() &&
   !isBefore(date, minDate) &&
-  !isAfter(date, maxDate)
-)
-const focusIso = selectedDate && formatIsoMonth(selectedDate) === monthIso
-  ? selectedIso
-  : todayUtc.getUTCMonth() === monthDate.getUTCMonth() && todayUtc.getUTCFullYear() === monthDate.getUTCFullYear()
-    ? todayIso
-    : firstSelectableDate
-      ? formatIsoDate(firstSelectableDate)
-      : formatIsoDate(monthDate)
-const weekdays = Array.from({ length: 7 }, (_, index) =>
-  weekdayFormatter.format(new Date(Date.UTC(2026, 0, 5 + index)))
+  !isAfter(date, maxDate))
+
+let focusIso = formatIsoDate(monthDate)
+
+if (selectedDate && formatIsoMonth(selectedDate) === monthIso) focusIso = selectedIso
+else if (
+  todayUtc.getUTCMonth() === monthDate.getUTCMonth() &&
+  todayUtc.getUTCFullYear() === monthDate.getUTCFullYear()
+) focusIso = todayIso
+else if (firstSelectableDate) focusIso = formatIsoDate(firstSelectableDate)
+
+const weekdays = Array.from(
+  { length: 7 }, (_, index) => weekdayFormatter.format(new Date(Date.UTC(2026, 0, 5 + index)))
 )
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-calendar',
-    glass && 'ui-calendar--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-calendar',
+  glass && 'ui-calendar--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 

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

package/components/Card.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'> {
   as?: 'article' | 'div' | 'section'
   class?: string | null
@@ -21,20 +21,22 @@ const {
 } = Astro.props
 
 const isGlass = glass || variant === 'glass'
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-card',
-    variant === 'unstyled' && 'ui-card--unstyled',
-    variant === 'muted' && 'ui-card--muted',
-    variant === 'interactive' && 'ui-card--interactive',
-    isGlass && 'ui-card--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-card',
+  variant === 'unstyled' && 'ui-card--unstyled',
+  variant === 'muted' && 'ui-card--muted',
+  variant === 'interactive' && 'ui-card--interactive',
+  isGlass && 'ui-card--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 
 <Tag
-  data-variant={variant}
   class:list={classList}
+  data-slot="card"
+  data-variant={variant}
   {...passthrough}
 >
   <slot />

package/components/CardContent.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: 'div' | 'section'
+  class?: string | null
+  className?: string
+}
+
+const {
+  as: Tag = 'div',
+  class: classProp = '',
+  className = '',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest, ['ui-card__content'], classProp, className
+)
+---
+
+<Tag class:list={classList} data-slot="card-content" {...passthrough}>
+  <slot />
+</Tag>

package/components/CardDescription.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: 'div' | 'p'
+  class?: string | null
+  className?: string
+}
+
+const {
+  as: Tag = 'div',
+  class: classProp = '',
+  className = '',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest, ['ui-card__description'], classProp, className
+)
+---
+
+<Tag class:list={classList} data-slot="card-description" {...passthrough}>
+  <slot />
+</Tag>

package/components/CardFooter.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: 'div' | 'footer'
+  class?: string | null
+  className?: string
+}
+
+const {
+  as: Tag = 'div',
+  class: classProp = '',
+  className = '',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest, ['ui-card__footer'], classProp, className
+)
+---
+
+<Tag class:list={classList} data-slot="card-footer" {...passthrough}>
+  <slot />
+</Tag>

package/components/CardHeader.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: 'div' | 'header'
+  class?: string | null
+  className?: string
+}
+
+const {
+  as: Tag = 'div',
+  class: classProp = '',
+  className = '',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest, ['ui-card__header'], classProp, className
+)
+---
+
+<Tag class:list={classList} data-slot="card-header" {...passthrough}>
+  <slot />
+</Tag>

package/components/CardTitle.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: 'div' | 'h2' | 'h3' | 'h4'
+  class?: string | null
+  className?: string
+}
+
+const {
+  as: Tag = 'div',
+  class: classProp = '',
+  className = '',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest, ['ui-card__title'], classProp, className
+)
+---
+
+<Tag class:list={classList} data-slot="card-title" {...passthrough}>
+  <slot />
+</Tag>