@santi020k/lumen-astro 0.1.0

package/components/ScrollReveal.astro

@@ -0,0 +1,50 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  animation?: 'fade' | 'slide-up' | 'scale'
+  class?: string
+  className?: string
+  delay?: number
+  duration?: 'fast' | 'standard' | 'slow'
+  once?: boolean
+  threshold?: number
+}
+
+const {
+  animation = 'fade',
+  class: classProp = '',
+  className = '',
+  delay = 0,
+  duration = 'slow',
+  once = true,
+  style,
+  threshold = 0.15,
+  ...rest
+} = Astro.props
+
+const safeDelay = Math.max(0, delay)
+const safeThreshold = Math.min(1, Math.max(0, threshold))
+const motionStyle = [
+  typeof style === 'string' ? style : '',
+  `--ui-reveal-delay:${safeDelay}ms`
+].filter(Boolean).join(';')
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-scroll-reveal',
+  `ui-scroll-reveal-${animation}`,
+  `ui-motion-duration-${duration}`
+], classProp, className)
+---
+
+<div
+  class:list={classList}
+  data-ui-reveal-once={String(once)}
+  data-ui-reveal-threshold={safeThreshold}
+  data-ui-scroll-reveal
+  style={motionStyle}
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/SearchField.astro

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

package/components/Segmented.astro

@@ -0,0 +1,56 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type SegmentedOption = string | { disabled?: boolean; label: string; value: string }
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  className?: string
+  defaultValue?: string
+  name?: string
+  options?: SegmentedOption[]
+  size?: 'default' | 'sm' | 'lg'
+  value?: string
+}
+
+const {
+  'aria-label': ariaLabel,
+  class: classProp = '',
+  className = '',
+  defaultValue,
+  name = 'segmented',
+  options = [],
+  size = 'default',
+  value = defaultValue,
+  ...rest
+} = Astro.props
+
+const normalized = options.map(option =>
+  typeof option === 'string' ? { disabled: false, label: option, value: option } : option
+)
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-segmented',
+  size === 'sm' && 'ui-segmented--sm',
+  size === 'lg' && 'ui-segmented--lg'
+], classProp, className)
+---
+
+<div aria-label={ariaLabel} class:list={classList} role="group" {...passthrough}>
+  {normalized.map(option => (
+    <label class="ui-segmented__option">
+      <input
+        checked={value === option.value}
+        class="ui-segmented__input"
+        disabled={option.disabled}
+        name={name}
+        type="radio"
+        value={option.value}
+      />
+      <span class="ui-segmented__label">{option.label}</span>
+    </label>
+  ))}
+  <slot />
+</div>

package/components/Select.astro

@@ -0,0 +1,120 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Option {
+  disabled?: boolean
+  label: string
+  value: string
+}
+
+type SelectOption = Option | string
+
+interface Props extends Omit<HTMLAttributes<'select'>, 'size'> {
+  class?: string
+  className?: string
+  glass?: boolean | 'subtle' | 'strong'
+  options?: SelectOption[]
+  placeholder?: string
+  size?: 'default' | 'lg' | 'md' | 'sm'
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  disabled = false,
+  glass = false,
+  id,
+  name,
+  options = [],
+  placeholder,
+  required = false,
+  size = 'default',
+  value,
+  ...rest
+} = Astro.props
+
+const normalizedOptions = options.map(option =>
+  typeof option === 'string' ? { label: option, value: option } : option
+)
+const selectedValue = value === undefined || value === null ? undefined : String(value)
+const hasSelectedValue = selectedValue !== undefined && selectedValue !== ''
+const selectedOption = normalizedOptions.find(option => String(option.value) === selectedValue)
+const selectId = id ?? `ui-select-${Math.random().toString(36).slice(2)}`
+const triggerId = `${selectId}-trigger`
+const listId = `${selectId}-listbox`
+const placeholderText = placeholder ?? 'Select an option'
+const triggerText = hasSelectedValue ? selectedOption?.label ?? placeholderText : placeholderText
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-select-field',
+    glass && 'ui-select-field--glass',
+    glass === 'subtle' && 'ui-glass-subtle',
+    glass === 'strong' && 'ui-glass-strong'
+], classProp, className)
+---
+
+<div
+  class:list={classList}
+  data-placeholder={hasSelectedValue ? 'false' : 'true'}
+  data-ui-glass-track={glass ? true : undefined}
+  data-ui-select
+>
+  <select
+    class:list={[
+      'ui-select',
+      'ui-select__native',
+      size === 'sm' && 'ui-select--sm',
+      size === 'lg' && 'ui-select--lg'
+    ]}
+    data-ui-select-native
+    disabled={disabled}
+    id={selectId}
+    name={name}
+    required={required}
+    {...passthrough}
+  >
+    {placeholder && <option data-ui-select-placeholder disabled selected={!hasSelectedValue} value="">{placeholder}</option>}
+    <slot />
+    {normalizedOptions.map(option => (
+      <option disabled={option.disabled} selected={selectedValue === String(option.value)} value={option.value}>{option.label}</option>
+    ))}
+  </select>
+
+  <div class="ui-select__control" data-ui-select-control hidden>
+    <button
+      aria-controls={listId}
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class:list={[
+        'ui-select',
+        'ui-select__trigger',
+        size === 'sm' && 'ui-select--sm',
+        size === 'lg' && 'ui-select--lg'
+      ]}
+      data-ui-select-trigger
+      disabled={disabled}
+      id={triggerId}
+      role="combobox"
+      type="button"
+    >
+      <span data-ui-select-value>{triggerText}</span>
+    </button>
+
+    <div class="ui-select__list" data-state="closed" data-ui-select-list hidden id={listId} role="listbox">
+      {normalizedOptions.map(option => (
+        <button
+          aria-disabled={option.disabled ? 'true' : undefined}
+          aria-selected={selectedValue === String(option.value) ? 'true' : 'false'}
+          data-ui-select-option
+          data-value={option.value}
+          disabled={option.disabled}
+          role="option"
+          type="button"
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  </div>
+</div>

package/components/Separator.astro

@@ -0,0 +1,31 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'hr'> {
+  class?: string
+  className?: string
+  orientation?: 'horizontal' | 'vertical'
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  orientation = 'horizontal',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-separator',
+    orientation === 'horizontal' && 'ui-separator--horizontal',
+    orientation === 'vertical' && 'ui-separator--vertical'
+], classProp, className)
+---
+
+<hr
+  aria-orientation={orientation}
+  class:list={classList}
+  data-orientation={orientation}
+  {...passthrough}
+/>

package/components/Sheet.astro

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

package/components/Sidebar.astro

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

package/components/Skeleton.astro

@@ -0,0 +1,36 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  className?: string
+}
+
+const {
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  class: classProp = '',
+  className = '',
+  role,
+  ...rest
+} = Astro.props
+
+const isAccessible = Boolean(ariaLabel || ariaLabelledby)
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-skeleton'
+], classProp, className)
+---
+
+<div
+  aria-hidden={ariaHidden ?? (isAccessible ? undefined : 'true')}
+  aria-label={ariaLabel}
+  aria-labelledby={ariaLabelledby}
+  class:list={classList}
+  role={role ?? (isAccessible ? 'status' : undefined)}
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/SkipLink.astro

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

package/components/Slider.astro

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

package/components/Sonner.astro

@@ -0,0 +1,38 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  className?: string
+  maxCount?: number
+  placement?: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right'
+}
+
+const {
+  'aria-atomic': ariaAtomic = 'false',
+  'aria-live': ariaLive = 'polite',
+  class: classProp = '',
+  className = '',
+  maxCount,
+  placement = 'bottom-right',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-sonner'
+], classProp, className)
+---
+
+<div
+  aria-atomic={ariaAtomic}
+  aria-live={ariaLive}
+  data-ui-sonner
+  data-ui-toast-max={maxCount}
+  data-placement={placement}
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/SpeedDial.astro

@@ -0,0 +1,77 @@
+---
+import {
+  renderLumenIconSvg,
+  resolveLumenAstroProps
+} from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type SpeedDialAction = { icon?: string; label: string; value?: string }
+
+interface Props extends HTMLAttributes<'div'> {
+  actions?: SpeedDialAction[]
+  class?: string
+  className?: string
+  defaultOpen?: boolean
+  direction?: 'up' | 'down' | 'left' | 'right'
+  label?: string
+}
+
+const {
+  actions = [],
+  class: classProp = '',
+  className = '',
+  defaultOpen = false,
+  direction = 'up',
+  label = 'Actions',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-speed-dial',
+  `ui-speed-dial--${direction}`
+], classProp, className)
+---
+
+<div
+  class:list={classList}
+  data-direction={direction}
+  data-state={defaultOpen ? 'open' : 'closed'}
+  data-ui-speed-dial
+  {...passthrough}
+>
+  <button
+    aria-expanded={defaultOpen ? 'true' : 'false'}
+    aria-haspopup="menu"
+    aria-label={label}
+    class="ui-speed-dial__trigger"
+    data-ui-speed-dial-trigger
+    type="button"
+  >
+    <span aria-hidden="true" class="ui-speed-dial__icon"></span>
+  </button>
+  <menu aria-label={label} class="ui-speed-dial__actions" data-ui-speed-dial-actions role="menu">
+    {actions.map((action, index) => (
+      <li role="presentation" style={`--ui-speed-dial-index: ${index}`}>
+        <button
+          aria-label={action.label}
+          class="ui-speed-dial__action"
+          data-icon={action.icon}
+          data-value={action.value ?? action.label}
+          role="menuitem"
+          type="button"
+        >
+          {action.icon && (
+            <span
+              aria-hidden="true"
+              class="ui-speed-dial__action-icon ui-icon"
+              set:html={renderLumenIconSvg(action.icon)}
+            />
+          )}
+          <span class="ui-speed-dial__action-label">{action.label}</span>
+        </button>
+      </li>
+    ))}
+    <slot />
+  </menu>
+</div>

package/components/Spinner.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
+}
+
+const {
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  class: classProp = '',
+  className = '',
+  role,
+  ...rest
+} = Astro.props
+
+const isAccessible = Boolean(ariaLabel || ariaLabelledby)
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-spinner'
+], classProp, className)
+---
+
+<span
+  aria-hidden={ariaHidden ?? (isAccessible ? undefined : 'true')}
+  aria-label={ariaLabel}
+  aria-labelledby={ariaLabelledby}
+  class:list={classList}
+  role={role ?? (isAccessible ? 'status' : undefined)}
+  {...passthrough}
+>
+  <slot />
+</span>

package/components/Stat.astro

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

package/components/Stepper.astro

@@ -0,0 +1,57 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type StepItem = string | { description?: string; title: string }
+
+interface Props extends HTMLAttributes<'ol'> {
+  class?: string
+  className?: string
+  currentStep?: number
+  orientation?: 'horizontal' | 'vertical'
+  steps?: StepItem[]
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  currentStep = 0,
+  orientation = 'horizontal',
+  steps = [],
+  ...rest
+} = Astro.props
+
+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 { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-stepper',
+  orientation === 'vertical' && 'ui-stepper--vertical'
+], classProp, className)
+---
+
+<ol
+  class:list={classList}
+  data-orientation={orientation}
+  {...passthrough}
+>
+  {normalized.map((step, index) => (
+    <li
+      aria-current={stepState(index) === 'current' ? 'step' : undefined}
+      class="ui-stepper__step"
+      data-state={stepState(index)}
+    >
+      <span class="ui-stepper__marker">{index + 1}</span>
+      <span class="ui-stepper__content">
+        <span class="ui-stepper__title">{step.title}</span>
+        {step.description && <span class="ui-stepper__description">{step.description}</span>}
+      </span>
+    </li>
+  ))}
+  <slot />
+</ol>