@santi020k/lumen-astro 0.1.0

package/components/Switch.astro

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

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

package/components/Tabs.astro

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

package/components/TagGroup.astro

@@ -0,0 +1,18 @@
+---
+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-tag-group'
+], classProp, className)
+---
+
+<div class:list={classList} role="list" {...passthrough}>
+  <slot />
+</div>

package/components/Textarea.astro

@@ -0,0 +1,17 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'textarea'> {
+  class?: string
+  className?: string
+}
+
+const { class: classProp = '', className = '', rows = 4, ...rest } = Astro.props
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-textarea'
+], classProp, className)
+---
+
+{/* Slot must stay inline: whitespace inside <textarea> becomes its value and hides the placeholder. */}
+<textarea class:list={classList} rows={rows} {...passthrough}><slot /></textarea>

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

package/components/ThemeToggle.astro

@@ -0,0 +1,41 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import Icon from './Icon.astro'
+
+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-theme-toggle'
+], classProp, className)
+---
+
+<button
+  type={type}
+  class:list={classList}
+  data-ui-theme-toggle
+  {...passthrough}
+>
+  <span class="ui-sr-only">Toggle color theme</span>
+  <Icon
+    aria-hidden="true"
+    class="ui-theme-toggle__sun"
+    name="sun"
+  />
+  <Icon
+    aria-hidden="true"
+    class="ui-theme-toggle__moon"
+    name="moon"
+  />
+</button>

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

package/components/Timeline.astro

@@ -0,0 +1,12 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import { composeClassName } from '@santi020k/lumen-core'
+
+export interface Props extends HTMLAttributes<'ol'> {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<ol class={composeClassName('ui-timeline', className)} {...props}>
+  <slot />
+</ol>

package/components/TimelineItem.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import { composeClassName } from '@santi020k/lumen-core'
+
+export interface Props extends HTMLAttributes<'li'> {}
+
+const { class: className, ...props } = Astro.props
+const hasDot = Astro.slots.has('dot')
+---
+
+<li class={composeClassName('ui-timeline-item', className)} {...props}>
+  <div class="ui-timeline-item__tail"></div>
+  <div class="ui-timeline-item__dot">
+    {hasDot ? <slot name="dot" /> : null}
+  </div>
+  <div class="ui-timeline-item__content">
+    <slot />
+  </div>
+</li>

package/components/Toast.astro

@@ -0,0 +1,50 @@
+---
+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'
+  variant?: 'default' | 'destructive' | 'success' | 'warning'
+}
+
+const {
+  'aria-live': ariaLive,
+  class: classProp = '',
+  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'
+], classProp, className)
+---
+
+<aside
+  data-surface={resolvedGlass ? 'glass' : 'default'}
+  data-ui-toast
+  data-variant={variant}
+  aria-live={ariaLive ?? (variant === 'destructive' ? 'assertive' : 'polite')}
+  class:list={classList}
+  role={role ?? (variant === 'destructive' ? 'alert' : 'status')}
+  {...passthrough}
+>
+  <slot />
+</aside>

package/components/Toggle.astro

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

package/components/ToggleGroup.astro

@@ -0,0 +1,28 @@
+---
+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-toggle-group'
+], classProp, className)
+---
+
+<div
+  data-ui-toggle-group
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/Toolbar.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
+  orientation?: 'horizontal' | 'vertical'
+}
+
+const {
+  'aria-label': ariaLabel = 'Toolbar',
+  class: classProp = '',
+  className = '',
+  orientation = 'horizontal',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-toolbar',
+  orientation === 'vertical' && 'ui-toolbar--vertical'
+], classProp, className)
+---
+
+<div
+  aria-label={ariaLabel}
+  aria-orientation={orientation}
+  class:list={classList}
+  data-ui-toolbar
+  data-orientation={orientation}
+  role="toolbar"
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/Tooltip.astro

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

package/components/Tour.astro

@@ -0,0 +1,52 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type TourStep = { content: string; target: string; title?: string }
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  className?: string
+  closeLabel?: string
+  nextLabel?: string
+  steps?: TourStep[]
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  closeLabel = 'Done',
+  nextLabel = 'Next',
+  steps = [],
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-tour'
+], classProp, className)
+---
+
+<div
+  class:list={classList}
+  data-ui-tour
+  hidden
+  {...passthrough}
+>
+  <div aria-hidden="true" class="ui-tour__backdrop" data-ui-tour-backdrop></div>
+  <div class="ui-tour__popover" data-ui-tour-popover role="dialog" aria-modal="false">
+    {steps.map((step, index) => (
+      <div class="ui-tour__step" data-target={step.target} data-ui-tour-step hidden={index !== 0}>
+        {step.title && <p class="ui-tour__title">{step.title}</p>}
+        <p class="ui-tour__content">{step.content}</p>
+        <div class="ui-tour__actions">
+          <button class="ui-button ui-button--ghost ui-button--sm" data-ui-tour-close type="button">{closeLabel}</button>
+          {index < steps.length - 1 && (
+            <button class="ui-button ui-button--default ui-button--sm" data-ui-tour-next type="button">{nextLabel}</button>
+          )}
+        </div>
+      </div>
+    ))}
+    <slot />
+  </div>
+</div>

package/components/Transfer.astro

@@ -0,0 +1,70 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import Icon from './Icon.astro'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type TransferItem = { key: string; label: string }
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  className?: string
+  items?: TransferItem[]
+  name?: string
+  sourceTitle?: string
+  targetItems?: TransferItem[]
+  targetTitle?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  items = [],
+  name,
+  sourceTitle = 'Available',
+  targetItems = [],
+  targetTitle = 'Selected',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-transfer'
+], classProp, className)
+---
+
+<div class:list={classList} data-ui-transfer data-ui-transfer-name={name} {...passthrough}>
+  <div class="ui-transfer__panel">
+    <p class="ui-transfer__title">{sourceTitle}</p>
+    <ul class="ui-transfer__list" data-side="source" data-ui-transfer-list>
+      {items.map(item => (
+        <li class="ui-transfer__item">
+          <label class="ui-transfer__option">
+            <input class="ui-checkbox" data-ui-transfer-item type="checkbox" value={item.key} />
+            <span>{item.label}</span>
+          </label>
+        </li>
+      ))}
+    </ul>
+  </div>
+  <div class="ui-transfer__controls">
+    <button aria-label={`Move to ${targetTitle}`} class="ui-button ui-button--outline ui-button--icon" data-ui-transfer-move="target" type="button">
+      <Icon name="chevron-right" />
+    </button>
+    <button aria-label={`Move to ${sourceTitle}`} class="ui-button ui-button--outline ui-button--icon" data-ui-transfer-move="source" type="button">
+      <Icon name="chevron-left" />
+    </button>
+  </div>
+  <div class="ui-transfer__panel">
+    <p class="ui-transfer__title">{targetTitle}</p>
+    <ul class="ui-transfer__list" data-side="target" data-ui-transfer-list>
+      {targetItems.map(item => (
+        <li class="ui-transfer__item">
+          <label class="ui-transfer__option">
+            <input class="ui-checkbox" data-ui-transfer-item type="checkbox" value={item.key} />
+            <span>{item.label}</span>
+          </label>
+        </li>
+      ))}
+    </ul>
+  </div>
+</div>

package/components/Tree.astro

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

package/components/TreeGrid.astro

@@ -0,0 +1,19 @@
+---
+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-tree-grid', glass && 'ui-tree-grid--glass', glass === 'subtle' && 'ui-glass-subtle', glass === 'strong' && 'ui-glass-strong'
+], classProp, className)
+---
+
+<div class:list={classList} role="treegrid" {...passthrough}>
+  <slot />
+</div>

package/components/TreeSelect.astro

@@ -0,0 +1,69 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface TreeNode {
+  children?: TreeNode[]
+  label: string
+  value: string
+}
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  className?: string
+  name?: string
+  placeholder?: string
+  treeData?: TreeNode[]
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  name,
+  placeholder = 'Select…',
+  treeData = [],
+  ...rest
+} = Astro.props
+
+const flatten = (nodes: TreeNode[], depth = 0, acc: { depth: number; label: string; value: string }[] = []) => {
+  for (const node of nodes) {
+    acc.push({ depth, label: node.label, value: node.value })
+
+    if (node.children && node.children.length > 0) {
+      flatten(node.children, depth + 1, acc)
+    }
+  }
+
+  return acc
+}
+
+const rows = flatten(treeData)
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-tree-select'
+], classProp, className)
+---
+
+<div class:list={classList} data-surface="default" data-ui-popover data-ui-tree-select {...passthrough}>
+  <button aria-expanded="false" aria-haspopup="tree" class="ui-select ui-select__trigger ui-tree-select__trigger" data-ui-trigger type="button">
+    <span data-ui-tree-select-placeholder={placeholder} data-ui-tree-select-value>{placeholder}</span>
+  </button>
+  <div class="ui-tree-select__panel" data-ui-panel hidden>
+    <div class="ui-tree-select__tree" role="tree">
+      {rows.map(row => (
+        <button
+          class="ui-tree-select__option"
+          data-value={row.value}
+          role="treeitem"
+          style={`--ui-tree-depth:${row.depth}`}
+          type="button"
+        >
+          {row.label}
+        </button>
+      ))}
+    </div>
+    <slot />
+  </div>
+  {name && <input data-ui-tree-select-input name={name} type="hidden" />}
+</div>

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