@santi020k/lumen-astro 0.3.0 → 1.0.0

package/components/Skeleton.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
@@ -19,8 +19,9 @@ const {
 } = Astro.props
 
 const isAccessible = Boolean(ariaLabel || ariaLabelledby)
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-skeleton'
+  'ui-skeleton'
 ], classProp, className)
 ---
 

package/components/SkipLink.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

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

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

package/components/Sparkline.astro

@@ -0,0 +1,72 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import {
+  composeClassName,
+  createLumenLineGeometry,
+  type LumenChartTone,
+  resolveLumenChartTone
+} from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'span'> {
+  area?: boolean
+  class?: string | null
+  className?: string
+  label: string
+  showEndpoint?: boolean
+  tone?: LumenChartTone
+  values: readonly number[]
+}
+
+const {
+  area = false,
+  class: classProp = '',
+  className = '',
+  label,
+  showEndpoint = true,
+  tone,
+  values,
+  ...rest
+} = Astro.props
+
+const data = values.map((value, index) => ({ x: index, y: value }))
+
+const geometry = createLumenLineGeometry(data, {
+  height: 40,
+  padding: 3,
+  width: 120
+})
+
+const resolvedTone = resolveLumenChartTone(tone)
+const endpoint = geometry.points[geometry.points.length - 1]
+---
+
+<span
+  aria-label={label}
+  class={composeClassName(
+    'ui-sparkline', `ui-chart-tone--${resolvedTone}`, classProp, className
+  )}
+  role="img"
+  {...rest}
+>
+  <svg aria-hidden="true" preserveAspectRatio="none" viewBox="0 0 120 40">
+    {
+      area &&
+      geometry.areaPaths.map(path => (
+        <path class="ui-sparkline__area" d={path} />
+      ))
+    }
+    <path class="ui-sparkline__line" d={geometry.path} />
+    {
+      showEndpoint && endpoint && (
+        <circle
+          class="ui-sparkline__endpoint"
+          cx={endpoint.xCoordinate}
+          cy={endpoint.yCoordinate}
+          r="2.5"
+        />
+      )
+    }
+  </svg>
+  <span class="ui-sr-only">{label}</span>
+</span>

package/components/SpeedDial.astro

@@ -1,12 +1,12 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
+
 import {
   renderLumenIconSvg,
   resolveLumenAstroProps
 } from '@santi020k/lumen-core'
 
-import type { HTMLAttributes } from 'astro/types'
-
-type SpeedDialAction = { icon?: string; label: string; value?: string }
+interface SpeedDialAction { icon?: string, label: string, value?: string }
 
 interface Props extends HTMLAttributes<'div'> {
   actions?: SpeedDialAction[]

package/components/Spinner.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<'span'> {
   class?: string | null
   className?: string
@@ -19,8 +19,9 @@ const {
 } = Astro.props
 
 const isAccessible = Boolean(ariaLabel || ariaLabelledby)
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-spinner'
+  'ui-spinner'
 ], classProp, className)
 ---
 

package/components/Stack.astro

@@ -0,0 +1,46 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  align?: 'center' | 'end' | 'start' | 'stretch'
+  as?: 'article' | 'div' | 'fieldset' | 'nav' | 'section'
+  class?: string | null
+  className?: string
+  direction?: 'horizontal' | 'vertical'
+  gap?: 'lg' | 'md' | 'none' | 'sm' | 'xl'
+  justify?: 'between' | 'center' | 'end' | 'start'
+  wrap?: boolean
+}
+
+const {
+  align = 'stretch',
+  as: Tag = 'div',
+  class: classProp = '',
+  className = '',
+  direction = 'vertical',
+  gap = 'md',
+  justify = 'start',
+  wrap = false,
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-stack',
+  `ui-stack--${direction}`,
+  `ui-stack--gap-${gap}`,
+  `ui-stack--align-${align}`,
+  `ui-stack--justify-${justify}`,
+  wrap && 'ui-stack--wrap'
+], classProp, className)
+---
+
+<Tag
+  class:list={classList}
+  data-direction={direction}
+  data-ui-stack
+  {...passthrough}
+>
+  <slot />
+</Tag>

package/components/Stat.astro

@@ -1,34 +1,40 @@
 ---
-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
   className?: string
   label?: string
   value?: string
+  variant?: 'accent' | 'bare' | 'default' | 'glass'
 }
 
 const {
+  as: Tag = 'div',
   class: classProp = '',
   className = '',
   label,
   value,
+  variant = 'default',
   ...rest
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-  'ui-stat'
+  'ui-stat',
+  variant !== 'default' && `ui-stat--${variant}`
 ], classProp, className)
 ---
 
-<div
+<Tag
   class:list={classList}
+  data-slot="stat"
+  data-variant={variant}
   {...passthrough}
 >
-  {label && <div class="ui-stat-label">{label}</div>}
-  {value && <div class="ui-stat-value">{value}</div>}
+  {label && <div class="ui-stat-label" data-slot="stat-label">{label}</div>}
+  {value && <div class="ui-stat-value" data-slot="stat-value">{value}</div>}
   <slot />
-</div>
-
+</Tag>

package/components/StatDescription.astro

@@ -0,0 +1,16 @@
+---
+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-stat-description'], classProp, className)
+---
+
+<Tag class:list={classList} data-slot="stat-description" {...passthrough}><slot /></Tag>

package/components/StatIcon.astro

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

package/components/StatLabel.astro

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

package/components/StatTrend.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+type StatTrendTone = 'danger' | 'neutral' | 'success' | 'warning'
+
+interface Props extends HTMLAttributes<'span'> {
+  class?: string | null
+  className?: string
+  tone?: StatTrendTone
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  tone = 'neutral',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(
+  rest, ['ui-stat-trend', `ui-stat-trend--${tone}`], classProp, className
+)
+---
+
+<span class:list={classList} data-slot="stat-trend" data-tone={tone} {...passthrough}>
+  <slot />
+</span>

package/components/StatValue.astro

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

package/components/Stepper.astro

@@ -1,9 +1,9 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
-type StepItem = string | { description?: string; title: string }
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+type StepItem = string | { description?: string, title: string }
 
 interface Props extends HTMLAttributes<'ol'> {
   class?: string | null
@@ -22,12 +22,15 @@ const {
   ...rest
 } = Astro.props
 
-const normalized = steps.map(step =>
-  typeof step === 'string' ? { description: undefined, title: step } : step
-)
+const normalized = steps.map(step => typeof step === 'string' ? { description: undefined, title: step } : step)
 
-const stepState = (index: number) =>
-  index < currentStep ? 'complete' : index === currentStep ? 'current' : 'upcoming'
+const stepState = (index: number) => {
+  if (index < currentStep) return 'complete'
+
+  if (index === currentStep) return 'current'
+
+  return 'upcoming'
+}
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-stepper',

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

package/components/Table.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,15 +17,16 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-table-wrap',
-    glass && 'ui-table-wrap--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-table-wrap',
+  glass && 'ui-table-wrap--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 
 <div
   class:list={classList}
+  data-slot="table"
   {...passthrough}
 >
   <slot />

package/components/Tabs.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
@@ -21,10 +21,10 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-tabs',
-    glass && 'ui-tabs--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-tabs',
+  glass && 'ui-tabs--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 

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

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

package/components/ThemeBuilder.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
@@ -10,6 +10,7 @@ interface Props extends HTMLAttributes<'section'> {
 }
 
 const { class: classProp = '', className = '', glass = false, ...rest } = Astro.props
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-theme-builder', glass && 'ui-theme-builder--glass', glass === 'subtle' && 'ui-glass-subtle', glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---

package/components/ThemeToggle.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<'button'> {
   class?: string | null
@@ -30,13 +31,14 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 ---
 
 <button
-  type={type}
   class:list={classList}
   data-dark-theme={darkTheme}
   data-light-theme={lightTheme}
+  data-slot="theme-toggle"
   data-storage-key={storageKey}
   data-ui-controlled={controlled || undefined}
   data-ui-theme-toggle
+  type={type}
   {...passthrough}
 >
   <span class="ui-sr-only">Toggle color theme</span>

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

package/components/Timeline.astro

@@ -1,8 +1,9 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
+
 import { composeClassName } from '@santi020k/lumen-core'
 
-export interface Props extends HTMLAttributes<'ol'> {}
+export type Props = HTMLAttributes<'ol'>
 
 const { class: className, ...props } = Astro.props
 ---

package/components/TimelineItem.astro

@@ -1,8 +1,9 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
+
 import { composeClassName } from '@santi020k/lumen-core'
 
-export interface Props extends HTMLAttributes<'li'> {}
+export type Props = HTMLAttributes<'li'>
 
 const { class: className, ...props } = Astro.props
 const hasDot = Astro.slots.has('dot')

package/components/Toast.astro

@@ -1,16 +1,12 @@
 ---
-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'
   variant?: 'default' | 'destructive' | 'success' | 'warning'
 }
 
@@ -20,25 +16,23 @@ const {
   className = '',
   glass = false,
   role,
-  surface = 'default',
   variant = 'default',
   ...rest
 } = Astro.props
 
-const resolvedGlass = resolveLumenGlass(glass, surface)
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-toast',
-    variant === 'destructive' && 'ui-toast--destructive',
-    variant === 'success' && 'ui-toast--success',
-    variant === 'warning' && 'ui-toast--warning',
-    resolvedGlass && 'ui-toast--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-toast',
+  variant === 'destructive' && 'ui-toast--destructive',
+  variant === 'success' && 'ui-toast--success',
+  variant === 'warning' && 'ui-toast--warning',
+  glass && 'ui-toast--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-toast
   data-variant={variant}
   aria-live={ariaLive ?? (variant === 'destructive' ? 'assertive' : 'polite')}