@santi020k/lumen-astro 0.1.0

package/components/HoverCard.astro

@@ -0,0 +1,40 @@
+---
+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-hover-card',
+    resolvedGlass && 'ui-hover-card--glass',
+    glass === 'subtle' && 'ui-glass-subtle',
+    glass === 'strong' && 'ui-glass-strong'
+], classProp, className)
+---
+
+<aside
+  data-surface={resolvedGlass ? 'glass' : 'default'}
+  data-ui-hover-card
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</aside>

package/components/Icon.astro

@@ -0,0 +1,50 @@
+---
+import {
+  renderLumenIconSvg,
+  resolveLumenAstroProps,
+  type LumenIconName
+} from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type IconSize = 'default' | 'lg' | 'sm' | 'xl'
+
+interface Props extends HTMLAttributes<'span'> {
+  class?: string
+  className?: string
+  decorative?: boolean
+  label?: string
+  name?: LumenIconName
+  size?: IconSize
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  decorative,
+  label,
+  name,
+  size = 'default',
+  ...rest
+} = Astro.props
+
+const isDecorative = decorative ?? !label
+const iconSvg = name ? renderLumenIconSvg(name) : ''
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-icon',
+  size === 'sm' && 'ui-icon--sm',
+  size === 'lg' && 'ui-icon--lg',
+  size === 'xl' && 'ui-icon--xl'
+], classProp, className)
+---
+
+<span
+  aria-hidden={isDecorative ? 'true' : undefined}
+  aria-label={!isDecorative ? label : undefined}
+  class:list={classList}
+  role={!isDecorative ? 'img' : undefined}
+  {...passthrough}
+>
+  {name ? <Fragment set:html={iconSvg} /> : <slot />}
+</span>

package/components/Image.astro

@@ -0,0 +1,33 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import {
+  Image as AstroImage,
+  type LocalImageProps,
+  type RemoteImageProps
+} from 'astro:assets'
+
+type Props = (LocalImageProps | RemoteImageProps) & {
+  class?: string
+  className?: string
+  invertOnDark?: boolean
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  invertOnDark = false,
+  loading = 'lazy',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-image',
+  invertOnDark && 'ui-image--invert-dark'
+], classProp, className)
+---
+
+<AstroImage
+  loading={loading}
+  class:list={classList}
+  {...passthrough}
+/>

package/components/Input.astro

@@ -0,0 +1,24 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends Omit<HTMLAttributes<'input'>, 'size'> {
+  class?: string
+  className?: string
+  size?: 'default' | 'lg' | 'sm'
+}
+
+const { class: classProp = '', className = '', size = 'default', type = 'text', ...rest } = Astro.props
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-input',
+    size === 'sm' && 'ui-input--sm',
+    size === 'lg' && 'ui-input--lg'
+], classProp, className)
+---
+
+<input
+  class:list={classList}
+  type={type}
+  {...passthrough}
+/>

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

package/components/InputOTP.astro

@@ -0,0 +1,60 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends Omit<HTMLAttributes<'input'>, 'size'> {
+  class?: string
+  className?: string
+  length?: number
+}
+
+const {
+  autocomplete = 'one-time-code',
+  class: classProp = '',
+  className = '',
+  disabled = false,
+  inputmode = 'numeric',
+  length = 6,
+  maxlength = length,
+  pattern = '[0-9]*',
+  ...rest
+} = Astro.props
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-input-otp-field'
+], classProp, className)
+const segments = Array.from({ length: Math.max(1, Number(length) || 6) }, (_, index) => index)
+---
+
+<div
+  class:list={classList}
+  data-ui-input-otp
+  data-ui-input-otp-length={segments.length}
+>
+  <input
+    autocomplete={autocomplete}
+    class="ui-input-otp ui-input-otp__native"
+    data-ui-input-otp-native
+    disabled={disabled}
+    inputmode={inputmode}
+    maxlength={maxlength}
+    pattern={pattern}
+    type="text"
+    {...passthrough}
+  />
+
+  <div class="ui-input-otp__segments" data-ui-input-otp-segments hidden>
+    {segments.map(index => (
+      <button
+        aria-hidden="true"
+        class="ui-input-otp__segment"
+        data-index={index}
+        data-ui-input-otp-segment
+        disabled={disabled}
+        tabindex="-1"
+        type="button"
+      >
+        <span data-ui-input-otp-char>&nbsp;</span>
+      </button>
+    ))}
+  </div>
+</div>

package/components/Item.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-item',
+    glass && 'ui-item--glass',
+    glass === 'subtle' && 'ui-glass-subtle',
+    glass === 'strong' && 'ui-glass-strong'
+], classProp, className)
+---
+
+<div
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/Kbd.astro

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

package/components/Label.astro

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

package/components/LanguageToggle.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-language-toggle'
+], classProp, className)
+---
+
+<button
+  type={type}
+  class:list={classList}
+  data-ui-language-toggle
+  {...passthrough}
+>
+  <slot />
+</button>

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

package/components/Marker.astro

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

package/components/Mentions.astro

@@ -0,0 +1,47 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type MentionOption = string | { label: string; value: string }
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  className?: string
+  name?: string
+  options?: MentionOption[]
+  placeholder?: string
+  trigger?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  name,
+  options = [],
+  placeholder,
+  trigger = '@',
+  ...rest
+} = Astro.props
+
+const normalized = options.map(option =>
+  typeof option === 'string' ? { label: option, value: option } : option
+)
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-mentions'
+], classProp, className)
+---
+
+<div class:list={classList} data-ui-mentions data-ui-mentions-trigger={trigger} {...passthrough}>
+  <textarea class="ui-textarea ui-mentions__input" data-ui-mentions-input name={name} placeholder={placeholder} rows={3}></textarea>
+  <ul class="ui-mentions__list" data-ui-mentions-list hidden role="listbox">
+    {normalized.map(option => (
+      <li>
+        <button class="ui-mentions__option" data-ui-mentions-option data-value={option.value} role="option" type="button">
+          {option.label}
+        </button>
+      </li>
+    ))}
+  </ul>
+</div>

package/components/Menubar.astro

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

package/components/Message.astro

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

package/components/MessageScroller.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-message-scroller',
+    glass && 'ui-message-scroller--glass',
+    glass === 'subtle' && 'ui-glass-subtle',
+    glass === 'strong' && 'ui-glass-strong'
+], classProp, className)
+---
+
+<div
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/Meter.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import { composeClassName } from '@santi020k/lumen-core'
+
+export interface Props extends HTMLAttributes<'meter'> {
+  value: number
+  min?: number
+  max?: number
+  low?: number
+  high?: number
+  optimum?: number
+}
+
+const {
+  class: className,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+} = Astro.props
+---
+
+<meter
+  class={composeClassName('ui-meter', className)}
+  value={value}
+  min={min}
+  max={max}
+  {...props}
+>
+  <slot>{value}</slot>
+</meter>

package/components/NativeSelect.astro

@@ -0,0 +1,37 @@
+---
+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
+  size?: 'default' | 'lg' | 'sm'
+  options?: SelectOption[]
+  placeholder?: string
+}
+
+const { class: classProp = '', className = '', options = [], placeholder, size = 'default', ...rest } = Astro.props
+const hasValue = Object.hasOwn(rest, 'value')
+const normalizedOptions = options.map(option =>
+  typeof option === 'string' ? { label: option, value: option } : option
+)
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-select', size === 'sm' && 'ui-select--sm', size === 'lg' && 'ui-select--lg'
+], classProp, className)
+---
+
+<select class:list={classList} {...passthrough}>
+  {placeholder && <option disabled selected={!hasValue} value="">{placeholder}</option>}
+  <slot />
+  {normalizedOptions.map(option => (
+    <option disabled={option.disabled} value={option.value}>{option.label}</option>
+  ))}
+</select>

package/components/NavigationMenu.astro

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