@santi020k/lumen-astro 0.1.0

package/components/Autocomplete.astro

@@ -0,0 +1,24 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'input'> {
+  class?: string
+  className?: string
+  list: string
+}
+
+const { class: classProp = '', className = '', type = 'search', ...rest } = Astro.props
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-input', 'ui-autocomplete'
+], classProp, className)
+---
+
+{/* No explicit role: an input with a `list` attribute already has native combobox
+    semantics, and the browser manages aria-expanded for the datalist popup. */}
+<input
+  aria-autocomplete="list"
+  class:list={classList}
+  type={type}
+  {...passthrough}
+/>

package/components/Avatar.astro

@@ -0,0 +1,36 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'span'> {
+  class?: string
+  className?: string
+  alt?: string
+  fallback?: string
+  src?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  alt = '',
+  fallback,
+  src,
+  ...rest
+} = Astro.props
+
+const hasDefaultSlot = Astro.slots.has('default')
+const fallbackText = fallback ?? (!src && !hasDefaultSlot ? '?' : undefined)
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-avatar'
+], classProp, className)
+---
+
+<span
+  class:list={classList}
+  {...passthrough}
+>
+  {src ? <img alt={alt} src={src} /> : fallbackText && <span aria-hidden={fallback ? undefined : 'true'}>{fallbackText}</span>}
+  <slot />
+</span>

package/components/BackToTop.astro

@@ -0,0 +1,30 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'button'> {
+  class?: string
+  className?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  type = 'button',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-back-to-top'
+], classProp, className)
+---
+
+<button
+  type={type}
+  class:list={classList}
+  data-ui-back-to-top
+  {...passthrough}
+>
+  <slot />
+</button>

package/components/Badge.astro

@@ -0,0 +1,36 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'span'> {
+  class?: string
+  className?: string
+  variant?: 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning'
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  variant = 'default',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-badge',
+    variant === 'default' && 'ui-badge--default',
+    variant === 'secondary' && 'ui-badge--secondary',
+    variant === 'outline' && 'ui-badge--outline',
+    variant === 'destructive' && 'ui-badge--destructive',
+    variant === 'success' && 'ui-badge--success',
+    variant === 'warning' && 'ui-badge--warning'
+], classProp, className)
+---
+
+<span
+  data-variant={variant}
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</span>

package/components/Breadcrumb.astro

@@ -0,0 +1,28 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'nav'> {
+  class?: string
+  className?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-breadcrumb'
+], classProp, className)
+---
+
+<nav
+  aria-label="Breadcrumb"
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</nav>

package/components/Bubble.astro

@@ -0,0 +1,36 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'article'> {
+  class?: string
+  className?: string
+  from?: 'user' | 'assistant'
+  glass?: boolean | 'subtle' | 'strong'
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  from = 'assistant',
+  glass = false,
+  ...rest
+} = 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'
+], classProp, className)
+---
+
+<article
+  data-from={from}
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</article>

package/components/Button.astro

@@ -0,0 +1,52 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'button'> {
+  class?: string
+  className?: string
+  loading?: boolean
+  size?: 'default' | 'sm' | 'lg' | 'icon'
+  variant?: 'default' | 'destructive' | 'ghost' | 'link' | 'outline' | 'secondary'
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  disabled,
+  loading = false,
+  size = 'default',
+  type = 'button',
+  variant = 'default',
+  ...rest
+} = 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'
+], classProp, className)
+---
+
+<button
+  class:list={classList}
+  aria-busy={loading || undefined}
+  disabled={isDisabled || undefined}
+  type={type}
+  {...passthrough}
+>
+  {loading && <span aria-hidden="true" class="ui-spinner"></span>}
+  <slot />
+</button>

package/components/ButtonGroup.astro

@@ -0,0 +1,27 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  className?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-button-group'
+], classProp, className)
+---
+
+<div
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/ButtonLink.astro

@@ -0,0 +1,58 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import Icon from './Icon.astro'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'a'> {
+  ariaLabel?: string
+  class?: string
+  className?: string
+  href: string
+  newTab?: boolean
+  shape?: 'default' | 'icon'
+  showArrow?: boolean
+  variant?: 'ghost' | 'inline' | 'primary' | 'secondary'
+}
+
+const {
+  ariaLabel,
+  class: classProp = '',
+  className = '',
+  href,
+  newTab = false,
+  shape = 'default',
+  showArrow = false,
+  variant = 'primary',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-button-link',
+  'group inline-flex cursor-pointer items-center justify-center gap-2 text-sm font-semibold tracking-[0.01em]',
+  variant !== 'inline' && 'min-h-11 rounded-full border',
+  variant === 'primary' && 'ui-button ui-button--primary',
+  variant === 'secondary' && 'ui-button ui-button--secondary',
+  variant === 'ghost' && 'ui-button ui-button--ghost',
+  variant === 'inline' && 'ui-button ui-button--inline',
+  shape === 'icon' && variant !== 'inline' && 'ui-button-link--icon'
+], classProp, className)
+---
+
+<a
+  aria-label={ariaLabel}
+  class:list={classList}
+  href={href}
+  rel={newTab ? 'noreferrer noopener' : undefined}
+  target={newTab ? '_blank' : undefined}
+  {...passthrough}
+>
+  <slot />
+  {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"
+      name={newTab ? 'arrow-up-right' : 'arrow-right'}
+    />
+  )}
+</a>

package/components/Calendar.astro

@@ -0,0 +1,197 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends Omit<HTMLAttributes<'div'>, 'value'> {
+  class?: string
+  className?: string
+  disabled?: boolean
+  glass?: boolean | 'subtle' | 'strong'
+  max?: string
+  min?: string
+  month?: string
+  name?: string
+  value?: string
+}
+
+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',
+  timeZone: 'UTC',
+  weekday: 'long',
+  year: 'numeric'
+})
+
+const parseIsoDate = (date: string | undefined): Date | undefined => {
+  if (!date || !isoDatePattern.test(date)) return undefined
+
+  const [year, month, day] = date.split('-').map(Number)
+  const parsed = new Date(Date.UTC(year, month - 1, day))
+
+  return parsed.getUTCFullYear() === year &&
+    parsed.getUTCMonth() === month - 1 &&
+    parsed.getUTCDate() === day
+    ? parsed
+    : undefined
+}
+
+const parseIsoMonth = (date: string | undefined): Date | undefined => {
+  if (!date || !isoMonthPattern.test(date)) return 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
+}
+
+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 =>
+  Boolean(limit && formatIsoDate(date) < formatIsoDate(limit))
+const isAfter = (date: Date, limit: Date | undefined): boolean =>
+  Boolean(limit && formatIsoDate(date) > formatIsoDate(limit))
+
+const {
+  class: classProp = '',
+  className = '',
+  disabled = false,
+  glass = false,
+  id,
+  max,
+  min,
+  month,
+  name,
+  value,
+  ...rest
+} = Astro.props
+
+const today = new Date()
+const todayUtc = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()))
+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)
+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() &&
+  !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)))
+)
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-calendar',
+    glass && 'ui-calendar--glass',
+    glass === 'subtle' && 'ui-glass-subtle',
+    glass === 'strong' && 'ui-glass-strong'
+], classProp, className)
+---
+
+<div
+  aria-disabled={disabled ? 'true' : undefined}
+  class:list={classList}
+  data-ui-calendar
+  data-ui-calendar-initial-month={monthIso}
+  data-ui-calendar-max={maxDate ? formatIsoDate(maxDate) : undefined}
+  data-ui-calendar-min={minDate ? formatIsoDate(minDate) : undefined}
+  data-ui-calendar-month={monthIso}
+  data-ui-calendar-value={selectedIso || undefined}
+  data-disabled={disabled ? 'true' : undefined}
+  data-ui-glass-track={glass ? true : undefined}
+  id={calendarId}
+  {...passthrough}
+>
+  <input
+    data-ui-calendar-input
+    disabled={disabled || undefined}
+    name={name}
+    type="hidden"
+    value={selectedIso}
+  />
+
+  <div class="ui-calendar__header">
+    <button
+      aria-label="Previous month"
+      class="ui-calendar__nav"
+      data-ui-calendar-prev
+      disabled={disabled || undefined}
+      type="button"
+    >
+      <span aria-hidden="true">&lsaquo;</span>
+    </button>
+    <strong class="ui-calendar__label" data-ui-calendar-label id={labelId}>{monthFormatter.format(monthDate)}</strong>
+    <button
+      aria-label="Next month"
+      class="ui-calendar__nav"
+      data-ui-calendar-next
+      disabled={disabled || undefined}
+      type="button"
+    >
+      <span aria-hidden="true">&rsaquo;</span>
+    </button>
+  </div>
+
+  <table aria-labelledby={labelId} class="ui-calendar__grid" data-ui-calendar-grid role="grid">
+    <thead>
+      <tr role="row">
+        {weekdays.map(weekday => <th role="columnheader" scope="col">{weekday}</th>)}
+      </tr>
+    </thead>
+    <tbody>
+      {Array.from({ length: 6 }, (_, rowIndex) => (
+        <tr role="row">
+          {visibleDates.slice(rowIndex * 7, rowIndex * 7 + 7).map(date => {
+            const dateIso = formatIsoDate(date)
+            const outside = date.getUTCMonth() !== monthDate.getUTCMonth()
+            const unavailable = disabled || isBefore(date, minDate) || isAfter(date, maxDate)
+
+            return (
+              <td
+                aria-disabled={unavailable ? 'true' : undefined}
+                aria-label={dayFormatter.format(date)}
+                aria-selected={selectedIso === dateIso ? 'true' : 'false'}
+                data-date={dateIso}
+                data-outside={outside ? 'true' : undefined}
+                data-selected={selectedIso === dateIso ? 'true' : undefined}
+                data-today={todayIso === dateIso ? 'true' : undefined}
+                data-ui-calendar-day
+                role="gridcell"
+                tabindex={!unavailable && focusIso === dateIso ? '0' : '-1'}
+              >
+                {date.getUTCDate()}
+              </td>
+            )
+          })}
+        </tr>
+      ))}
+    </tbody>
+  </table>
+</div>

package/components/Callout.astro

@@ -0,0 +1,27 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'aside'> {
+  class?: string
+  className?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-callout'
+], classProp, className)
+---
+
+<aside
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</aside>

package/components/Card.astro

@@ -0,0 +1,40 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: 'article' | 'div' | 'section'
+  class?: string
+  className?: string
+  glass?: boolean | 'subtle' | 'strong'
+  variant?: 'default' | 'glass' | 'interactive' | 'muted'
+}
+
+const {
+  as: Tag = 'div',
+  class: classProp = '',
+  className = '',
+  glass = false,
+  variant = 'default',
+  ...rest
+} = Astro.props
+
+const isGlass = glass || variant === 'glass'
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-card',
+    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}
+  {...passthrough}
+>
+  <slot />
+</Tag>

package/components/Carousel.astro

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