@santi020k/lumen-astro 0.1.0

package/components/Note.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import { composeClassName } from '@santi020k/lumen-core'
+
+export interface Props extends HTMLAttributes<'div'> {
+  label?: string
+  borderPosition?: 'left' | 'right' | 'none'
+}
+
+const { class: className, label, borderPosition = 'left', ...props } = Astro.props
+
+const borderClass = `ui-note--border-${borderPosition}`
+---
+
+<div
+  class={composeClassName('ui-note', borderClass, className)}
+  {...props}
+>
+  {label && <p class="ui-note__label">{label}</p>}
+  <div class="ui-note__content">
+    <slot />
+  </div>
+</div>

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

package/components/Pagination.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-pagination'
+], classProp, className)
+---
+
+<nav
+  aria-label="Pagination"
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</nav>

package/components/Particles.astro

@@ -0,0 +1,31 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  className?: string
+  density?: 'low' | 'medium' | 'high'
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  density = 'medium',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-particles'
+], classProp, className)
+---
+
+<div
+  aria-hidden="true"
+  class:list={classList}
+  data-ui-particles={density}
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/PhoneInput.astro

@@ -0,0 +1,86 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface CountryOption {
+  disabled?: boolean
+  label: string
+  value: string
+}
+
+type Country = CountryOption | string
+
+interface Props extends Omit<HTMLAttributes<'div'>, 'size'> {
+  class?: string
+  className?: string
+  countries?: Country[]
+  countryLabel?: string
+  countryName?: string
+  countryValue?: string
+  name?: string
+  placeholder?: string
+  size?: 'default' | 'lg' | 'sm'
+  value?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  countries = [],
+  countryLabel = 'Country code',
+  countryName = 'country',
+  countryValue,
+  name = 'phone',
+  placeholder = 'Phone number',
+  size = 'default',
+  value,
+  ...rest
+} = Astro.props
+
+const normalizedCountries = countries.map(country =>
+  typeof country === 'string' ? { label: country, value: country } : country
+)
+
+const hasCountryValue = countryValue !== undefined
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-phone-input',
+  'ui-input-group'
+], classProp, className)
+---
+
+<div class:list={classList} {...passthrough}>
+  <select
+    aria-label={countryLabel}
+    class:list={[
+      'ui-select',
+      'ui-phone-input__country',
+      size === 'sm' && 'ui-select--sm',
+      size === 'lg' && 'ui-select--lg'
+    ]}
+    name={countryName}
+  >
+    {normalizedCountries.map(country => (
+      <option
+        disabled={country.disabled}
+        selected={hasCountryValue && country.value === countryValue}
+        value={country.value}
+      >{country.label}</option>
+    ))}
+  </select>
+  <input
+    autocomplete="tel"
+    class:list={[
+      'ui-input',
+      'ui-phone-input__number',
+      size === 'sm' && 'ui-input--sm',
+      size === 'lg' && 'ui-input--lg'
+    ]}
+    inputmode="tel"
+    name={name}
+    placeholder={placeholder}
+    type="tel"
+    value={value}
+  />
+</div>

package/components/Pill.astro

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

package/components/Popconfirm.astro

@@ -0,0 +1,40 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  cancelLabel?: string
+  class?: string
+  className?: string
+  confirmLabel?: string
+  title?: string
+}
+
+const {
+  cancelLabel = 'Cancel',
+  class: classProp = '',
+  className = '',
+  confirmLabel = 'Confirm',
+  title = 'Are you sure?',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-popover',
+  'ui-popconfirm'
+], classProp, className)
+---
+
+<div class:list={classList} data-surface="default" data-ui-popconfirm data-ui-popover {...passthrough}>
+  <span aria-expanded="false" aria-haspopup="dialog" class="ui-popconfirm__trigger" data-ui-trigger>
+    <slot />
+  </span>
+  <div class="ui-popover__panel ui-popconfirm__panel" data-ui-panel hidden role="dialog">
+    <p class="ui-popconfirm__message">{title}</p>
+    <div class="ui-popconfirm__actions">
+      <button class="ui-button ui-button--ghost ui-button--sm" data-ui-popconfirm-cancel type="button">{cancelLabel}</button>
+      <button class="ui-button ui-button--destructive ui-button--sm" data-ui-popconfirm-confirm type="button">{confirmLabel}</button>
+    </div>
+  </div>
+</div>

package/components/Popover.astro

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

package/components/Progress.astro

@@ -0,0 +1,30 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  className?: string
+  max?: number
+  value?: number
+}
+
+const { class: classProp = '', className = '', max = 100, value = 0, ...rest } = Astro.props
+const safeMax = max > 0 ? max : 100
+const safeValue = Math.min(safeMax, Math.max(0, value))
+const percentage = (safeValue / safeMax) * 100
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-progress'
+], classProp, className)
+---
+
+<div
+  aria-valuemax={safeMax}
+  aria-valuemin="0"
+  aria-valuenow={safeValue}
+  class:list={classList}
+  role="progressbar"
+  {...passthrough}
+>
+  <span class="ui-progress__bar" style={`width: ${percentage}%`}></span>
+</div>

package/components/Prose.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-prose'
+], classProp, className)
+---
+
+<div
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/QRCode.astro

@@ -0,0 +1,44 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import { renderSVG } from 'uqr'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'figure'> {
+  class?: string
+  className?: string
+  size?: number
+  src?: string
+  value?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  size = 160,
+  src,
+  value,
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-qr-code'
+], classProp, className)
+
+const qrSvg = !src && value ? renderSVG(value) : null
+const qrSrc = qrSvg ? `data:image/svg+xml;utf8,${encodeURIComponent(qrSvg)}` : src
+---
+
+<figure
+  class:list={classList}
+  data-ui-qr-code
+  style={`--ui-qr-code-size:${size}px`}
+  {...passthrough}
+>
+  <div class="ui-qr-code__frame">
+    {qrSrc
+      ? <img alt={value ? `QR code for ${value}` : 'QR code'} class="ui-qr-code__image" height={size} src={qrSrc} width={size} />
+      : <slot />}
+  </div>
+  {value && <figcaption class="ui-qr-code__value">{value}</figcaption>}
+</figure>

package/components/RadioGroup.astro

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

package/components/Rating.astro

@@ -0,0 +1,42 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import { composeClassName } from '@santi020k/lumen-core'
+import Icon from './Icon.astro'
+
+export interface Props extends HTMLAttributes<'div'> {
+  value?: number
+  max?: number
+  readonly?: boolean
+}
+
+const {
+  class: className,
+  value = 0,
+  max = 5,
+  readonly = false,
+  ...props
+} = Astro.props
+
+const stars = Array.from({ length: max }, (_, i) => i + 1)
+---
+
+<lumen-rating
+  class={composeClassName('ui-rating', readonly && 'ui-rating--readonly', className)}
+  data-ui-rating
+  data-value={value}
+  data-max={max}
+  data-readonly={readonly ? 'true' : 'false'}
+  {...props}
+>
+  {stars.map((star) => (
+    <button
+      type="button"
+      class="ui-rating__star"
+      data-active={star <= value ? 'true' : 'false'}
+      disabled={readonly}
+      aria-label={`Rate ${star} out of ${max}`}
+    >
+      <Icon name="star" />
+    </button>
+  ))}
+</lumen-rating>

package/components/Resizable.astro

@@ -0,0 +1,55 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  className?: string
+  defaultSizes?: number[]
+  direction?: 'horizontal' | 'vertical'
+  maxSize?: number | number[]
+  minSize?: number | number[]
+  resetOnDoubleClick?: boolean
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  defaultSizes,
+  direction = 'horizontal',
+  maxSize,
+  minSize,
+  resetOnDoubleClick = true,
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-resizable',
+    direction === 'vertical' && 'ui-resizable--vertical'
+], classProp, className)
+const serializeSize = (value: number | number[] | undefined) =>
+  Array.isArray(value) ? value.join(',') : value
+---
+
+<div
+  class:list={classList}
+  data-orientation={direction}
+  data-ui-resizable
+  data-ui-resizable-default-sizes={defaultSizes?.join(',')}
+  data-ui-resizable-max-size={serializeSize(maxSize)}
+  data-ui-resizable-min-size={serializeSize(minSize)}
+  data-ui-resizable-reset={resetOnDoubleClick ? 'true' : undefined}
+  {...passthrough}
+>
+  <slot />
+  <template data-ui-resizable-handle-template>
+    <button
+      class="ui-resizable__handle"
+      data-ui-resizable-handle
+      role="separator"
+      tabindex="0"
+      type="button"
+    ></button>
+  </template>
+</div>

package/components/RevealGroup.astro

@@ -0,0 +1,54 @@
+---
+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
+  stagger?: number
+  threshold?: number
+}
+
+const {
+  animation = 'slide-up',
+  class: classProp = '',
+  className = '',
+  delay = 0,
+  duration = 'slow',
+  once = true,
+  stagger = 80,
+  style,
+  threshold = 0.15,
+  ...rest
+} = Astro.props
+
+const safeDelay = Math.max(0, delay)
+const safeStagger = Math.max(0, stagger)
+const safeThreshold = Math.min(1, Math.max(0, threshold))
+const motionStyle = [
+  typeof style === 'string' ? style : '',
+  `--ui-reveal-delay:${safeDelay}ms`,
+  `--ui-reveal-stagger:${safeStagger}ms`
+].filter(Boolean).join(';')
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-reveal-group',
+  `ui-reveal-group-${animation}`,
+  `ui-motion-duration-${duration}`
+], classProp, className)
+---
+
+<div
+  class:list={classList}
+  data-ui-reveal-group
+  data-ui-reveal-once={String(once)}
+  data-ui-reveal-threshold={safeThreshold}
+  style={motionStyle}
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/RichTextEditor.astro

@@ -0,0 +1,19 @@
+---
+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-rich-text-editor', glass && 'ui-rich-text-editor--glass', glass === 'subtle' && 'ui-glass-subtle', glass === 'strong' && 'ui-glass-strong'
+], classProp, className)
+---
+
+<section class:list={classList} data-ui-rich-text-editor {...passthrough}>
+  <slot />
+</section>

package/components/Schedule.astro

@@ -0,0 +1,19 @@
+---
+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-schedule', glass && 'ui-schedule--glass', glass === 'subtle' && 'ui-glass-subtle', glass === 'strong' && 'ui-glass-strong'
+], classProp, className)
+---
+
+<section class:list={classList} data-ui-schedule {...passthrough}>
+  <slot />
+</section>

package/components/ScrollArea.astro

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