@santi020k/lumen-astro 0.4.0 → 1.0.0

package/components/BarChart.astro

@@ -1,28 +1,33 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
+
 import {
   createLumenBarGeometry,
   getLumenChartTicks,
+  getLumenChartToneClassName,
   hasLumenChartData,
   type LumenBarChartLayout,
   type LumenChartOrientation,
   type LumenChartSeries,
-  resolveLumenChartTone,
   scaleLumenChartValue
 } from '@santi020k/lumen-core'
 
-import type { HTMLAttributes } from 'astro/types'
-
 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
@@ -30,9 +35,13 @@ interface Props extends HTMLAttributes<'figure'> {
 
 const {
   caption,
+  categoryWidth,
   class: classProp = '',
   className = '',
   description,
+  emptyLabel = 'No chart data available.',
+  formatCategory = String,
+  formatValue = String,
   glass = false,
   heading,
   layout = 'grouped',
@@ -42,17 +51,39 @@ const {
   showTable = true,
   ...rest
 } = Astro.props
-const geometry = createLumenBarGeometry(series, { layout, orientation })
+
+const geometry = createLumenBarGeometry(series, { categoryWidth, layout, orientation })
 const hasData = hasLumenChartData(series)
 const ticks = getLumenChartTicks(geometry.domain)
-const categories = geometry.categories.map(category => category.label)
-const valueFor = (item: LumenChartSeries, category: number | string) =>
-  item.data.find(datum => datum.x === category)?.y ?? null
-const labelFor = (item: LumenChartSeries, category: number | string) =>
-  item.data.find(datum => datum.x === category)?.label
-const margin = orientation === 'horizontal'
-  ? { bottom: 24, left: 112, right: 20, top: 16 }
-  : { bottom: 52, left: 52, right: 16, top: 16 }
+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
@@ -67,7 +98,7 @@ const margin = orientation === 'horizontal'
     showLegend && hasData && (
       <ul class="ui-chart__legend" aria-label="Chart legend">
         {series.map((item, index) => (
-          <li class={`ui-chart-tone--${resolveLumenChartTone(item.tone, index)}`}>
+          <li class={getLumenChartToneClassName(item.tone, index)}>
             <span aria-hidden="true" />
             {item.label}
           </li>
@@ -75,7 +106,7 @@ const margin = orientation === 'horizontal'
       </ul>
     )
   }
-  {!hasData && <p class="ui-chart__empty" role="status">No chart data available.</p>}
+  {!hasData && <p class="ui-chart__empty" role="status">{emptyLabel}</p>}
   <div class="ui-chart__plot" hidden={!hasData}>
     <svg
       aria-hidden="true"
@@ -84,43 +115,39 @@ const margin = orientation === 'horizontal'
     >
       <g class="ui-chart__grid">
         {
-          ticks.map((tick) => {
+          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
-                  )
+              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}
-              />
-            )
+            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) => (
+          geometry.categories.map(category => (
             <text
               dominant-baseline={orientation === 'horizontal' ? 'middle' : undefined}
               text-anchor={orientation === 'horizontal' ? 'end' : 'middle'}
@@ -134,9 +161,9 @@ const margin = orientation === 'horizontal'
       </g>
       <g class="ui-bar-chart__marks">
         {
-          geometry.marks.map((mark) => (
+          geometry.marks.map(mark => (
             <rect
-              class={`ui-chart-tone--${mark.tone}`}
+              class={getLumenChartToneClassName(mark.tone)}
               height={mark.height}
               rx="4"
               width={mark.width}
@@ -144,7 +171,7 @@ const margin = orientation === 'horizontal'
               y={mark.y}
             >
               <title>
-                {`${String(mark.category)} · ${mark.seriesLabel}: ${mark.value}`}
+                {`${categoryLabelFor(mark.category)} · ${mark.seriesLabel}: ${formatValue(mark.value)}`}
               </title>
             </rect>
           ))
@@ -167,11 +194,10 @@ const margin = orientation === 'horizontal'
             <tbody>
               {categories.map(category => (
                 <tr>
-                  <th scope="row">{String(category)}</th>
+                  <th scope="row">{categoryLabelFor(category)}</th>
                   {series.map(item => (
                     <td>
-                      {labelFor(item, category) ??
-                        String(valueFor(item, category) ?? 'Not available')}
+                      {labelFor(item, category) ?? formattedValueFor(item, category)}
                     </td>
                   ))}
                 </tr>

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>