@santi020k/lumen-astro 0.1.0

package/components/Cascader.astro

@@ -0,0 +1,109 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface CascaderOption {
+  children?: CascaderOption[]
+  label: string
+  value: string
+}
+
+export interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  className?: string
+  name?: string
+  options?: CascaderOption[]
+  placeholder?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  name,
+  options = [],
+  placeholder = 'Select…',
+  ...rest
+} = Astro.props
+
+interface RenderedColumn {
+  id: string
+  options: { label: string; nextId?: string | undefined; value: string }[]
+  root: boolean
+}
+
+const cascaderId = `ui-cascader-${Math.random().toString(36).slice(2)}`
+const panelId = `${cascaderId}-panel`
+let columnCount = 0
+const columns: RenderedColumn[] = []
+
+const buildColumn = (items: CascaderOption[], root: boolean): string => {
+  columnCount += 1
+
+  const id = `${cascaderId}-column-${columnCount}`
+
+  const rendered: RenderedColumn['options'] = items.map(item => ({
+    label: item.label,
+    value: item.value
+  }))
+
+  columns.push({ id, options: rendered, root })
+
+  for (const [index, item] of items.entries()) {
+    const renderedOption = rendered[index]
+
+    if (item.children && item.children.length > 0 && renderedOption) {
+      renderedOption.nextId = buildColumn(item.children, false)
+    }
+  }
+
+  return id
+}
+
+if (options.length > 0) {
+  buildColumn(options, true)
+}
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-cascader'
+], classProp, className)
+---
+
+<div class:list={classList} data-surface="default" data-ui-cascader data-ui-popover {...passthrough}>
+  <button
+    aria-controls={panelId}
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    class="ui-select ui-select__trigger ui-cascader__trigger"
+    data-ui-trigger
+    role="combobox"
+    type="button"
+  >
+    <span data-ui-cascader-placeholder={placeholder} data-ui-cascader-value>{placeholder}</span>
+  </button>
+  <div class="ui-cascader__panel" data-ui-panel hidden id={panelId}>
+    {columns.map(column => (
+      <ol aria-label={column.root ? 'Options' : 'Sub-options'} class="ui-cascader__column" hidden={!column.root} id={column.id} role="listbox">
+        {column.options.map(option => (
+          <li role="presentation">
+            <button
+              aria-selected="false"
+              class="ui-cascader__option"
+              data-label={option.label}
+              data-ui-cascader-next={option.nextId ? `#${option.nextId}` : undefined}
+              data-ui-cascader-option
+              data-value={option.value}
+              role="option"
+              type="button"
+            >
+              <span>{option.label}</span>
+              {option.nextId && <span aria-hidden="true">&rsaquo;</span>}
+            </button>
+          </li>
+        ))}
+      </ol>
+    ))}
+    <slot />
+  </div>
+  {name && <input data-ui-cascader-input name={name} type="hidden" />}
+</div>

package/components/Chart.astro

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

package/components/Checkbox.astro

@@ -0,0 +1,22 @@
+---
+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 = '', ...rest } = Astro.props
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-checkbox'
+], classProp, className)
+---
+
+<input
+  class:list={classList}
+  type="checkbox"
+  {...passthrough}
+/>

package/components/Code.astro

@@ -0,0 +1,96 @@
+---
+import { renderLumenCodeHtml, renderLumenIconSvg, resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type CodeTheme = 'auto' | 'lumen' | 'santi020k'
+type CodeVariant = 'block' | 'inline'
+
+interface Props extends HTMLAttributes<'code'> {
+  class?: string
+  className?: string
+  code?: string
+  copy?: boolean
+  highlighted?: boolean
+  label?: string
+  language?: string
+  theme?: CodeTheme
+  variant?: CodeVariant
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  code,
+  copy = false,
+  highlighted = false,
+  label,
+  language,
+  theme = 'auto',
+  variant = 'inline',
+  ...rest
+} = Astro.props
+
+const { classList: blockClassList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-code',
+  'ui-code--block'
+], classProp, className)
+const { classList: inlineClassList } = resolveLumenAstroProps(rest, [
+  'ui-code',
+  'ui-code--inline'
+], classProp, className)
+const shouldShowHeader = variant === 'block' && Boolean(copy || label || language)
+const hasCode = code !== undefined
+const renderedCode = hasCode ? renderLumenCodeHtml(code, language) : ''
+---
+
+{variant === 'block' ? (
+  <figure
+    class:list={blockClassList}
+    data-code-theme={theme}
+    data-language={language}
+    data-ui-code
+    {...passthrough}
+  >
+    {shouldShowHeader && (
+      <figcaption class="ui-code__header">
+        <span class="ui-code__dots" aria-hidden="true">
+          <span class="ui-code__dot ui-code__dot--red"></span>
+          <span class="ui-code__dot ui-code__dot--yellow"></span>
+          <span class="ui-code__dot ui-code__dot--green"></span>
+        </span>
+        <span class="ui-code__meta">
+          {language && <span class="ui-code__language">{language}</span>}
+          {label && <span class="ui-code__label">{label}</span>}
+        </span>
+        {copy && (
+          <button
+            aria-label="Copy code to clipboard"
+            class="ui-code__copy"
+            data-ui-code-copy
+            type="button"
+          >
+            <Fragment set:html={renderLumenIconSvg('copy', { className: 'ui-code__copy-icon' })} />
+            <Fragment set:html={renderLumenIconSvg('check', { className: 'ui-code__check-icon' })} />
+          </button>
+        )}
+      </figcaption>
+    )}
+    {highlighted ? (
+      <slot />
+    ) : hasCode ? (
+      <pre><code set:html={renderedCode}></code></pre>
+    ) : (
+      <pre><code><slot /></code></pre>
+    )}
+  </figure>
+) : (
+  <code
+    class:list={inlineClassList}
+    data-code-theme={theme}
+    data-language={language}
+    {...passthrough}
+  >
+    {hasCode ? code : <slot />}
+  </code>
+)}

package/components/Collapsible.astro

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

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

package/components/Combobox.astro

@@ -0,0 +1,67 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'input'> {
+  class?: string
+  className?: string
+  label?: string
+  list: string
+  options?: ComboboxOption[]
+}
+
+interface Option {
+  disabled?: boolean
+  label: string
+  value: string
+}
+
+type ComboboxOption = Option | string
+
+const {
+  class: classProp = '',
+  className = '',
+  id,
+  label,
+  list,
+  options = [],
+  type = 'text',
+  ...rest
+} = Astro.props
+
+const inputId = id ?? `${list}-input`
+const normalizedOptions = options.map(option =>
+  typeof option === 'string' ? { label: option, value: option } : option
+)
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-combobox'
+], classProp, className)
+---
+
+<div class:list={classList} data-ui-combobox>
+  {label && <label class="ui-label" for={inputId}>{label}</label>}
+  <input
+    aria-autocomplete="list"
+    aria-controls={list}
+    aria-expanded="false"
+    class="ui-input"
+    id={inputId}
+    role="combobox"
+    type={type}
+    {...passthrough}
+  />
+  <div class="ui-combobox__list" hidden id={list} role="listbox">
+    {normalizedOptions.map(option => (
+      <button
+        aria-disabled={option.disabled ? 'true' : undefined}
+        data-ui-combobox-option
+        data-value={option.value}
+        disabled={option.disabled}
+        role="option"
+        type="button"
+      >
+        {option.label}
+      </button>
+    ))}
+  </div>
+</div>

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

package/components/ContextMenu.astro

@@ -0,0 +1,44 @@
+---
+import { resolveLumenAstroProps, resolveLumenGlass } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'menu'> {
+  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-menu',
+    resolvedGlass && 'ui-menu--glass',
+    glass === 'subtle' && 'ui-glass-subtle',
+    glass === 'strong' && 'ui-glass-strong'
+], classProp, className)
+---
+
+{/* Point an element at this menu with data-ui-context-menu-trigger="<menu id>"
+    to get right-click / Shift+F10 open behavior from the runtime. Without a
+    trigger the menu renders statically. */}
+<menu
+  data-surface={resolvedGlass ? 'glass' : 'default'}
+  data-ui-context-menu
+  role="menu"
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</menu>

package/components/CoverImage.astro

@@ -0,0 +1,180 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import type { ImageMetadata } from 'astro'
+import { Picture } from 'astro:assets'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  alt: string
+  ariaHidden?: boolean
+  class?: string
+  className?: string
+  featured?: boolean
+  featuredMinHeightClass?: string
+  fetchpriority?: 'auto' | 'high' | 'low'
+  hover?: boolean
+  image: ImageMetadata
+  loading?: 'eager' | 'lazy'
+  mode?: 'card' | 'detail'
+  showBottomGradient?: boolean
+  showCardOverlay?: boolean
+  sizes?: string
+  transitionName?: string
+}
+
+const {
+  alt,
+  ariaHidden = false,
+  class: classProp = '',
+  className = '',
+  featured = false,
+  featuredMinHeightClass = 'lg:min-h-88',
+  fetchpriority = 'auto',
+  hover = false,
+  image,
+  loading = 'lazy',
+  mode = 'card',
+  showBottomGradient = false,
+  showCardOverlay = true,
+  sizes = '(min-width: 1024px) 800px, 100vw',
+  transitionName,
+  ...rest
+} = Astro.props
+
+const effectiveTransitionName = transitionName ?? `cover:${image.src}`
+const aspectRatio = image.width / image.height
+let orientation: 'landscape' | 'portrait' | 'square' = 'landscape'
+
+if (aspectRatio < 0.92) {
+  orientation = 'portrait'
+} else if (aspectRatio <= 1.08) {
+  orientation = 'square'
+}
+
+const useContainedFrame = orientation !== 'landscape'
+let cardAspectClass = 'aspect-16/10'
+
+if (orientation === 'portrait') {
+  cardAspectClass = 'aspect-4/5'
+} else if (orientation === 'square') {
+  cardAspectClass = 'aspect-square'
+}
+
+let cardWrapperClass = `${cardAspectClass} rounded-t-[1.75rem] border-b border-line/45`
+
+if (featured && orientation === 'landscape') {
+  cardWrapperClass = `aspect-16/10 rounded-t-[1.75rem] border-b border-line/45`
+} else if (useContainedFrame) {
+  cardWrapperClass = `${cardAspectClass} rounded-t-[1.75rem] flex items-center justify-center border-b border-line/45 bg-linear-to-br from-surface-muted via-surface to-brand-soft/30 p-4 sm:p-5`
+}
+
+let detailWrapperClass = 'w-full'
+let detailImageClass = 'size-full object-contain'
+let detailWrapperStyle: string | undefined
+
+let cardImageClass = `size-full object-cover motion-safe:group-hover:scale-[1.03]`
+
+if (useContainedFrame) {
+  detailWrapperClass = `flex min-h-[22rem] items-center justify-center bg-linear-to-br from-surface-muted via-surface to-brand-soft/35 p-4 sm:min-h-[28rem] sm:p-6 lg:min-h-[34rem] lg:p-8`
+
+  if (orientation === 'portrait') {
+    detailImageClass = 'mx-auto h-full w-auto max-w-full object-contain'
+  } else {
+    detailImageClass = 'mx-auto h-full w-full max-w-[34rem] object-contain'
+  }
+
+  cardImageClass = `mx-auto h-full w-full object-contain motion-safe:group-hover:scale-[1.02]`
+} else {
+  detailWrapperStyle = `aspect-ratio: ${image.width} / ${image.height};`
+}
+
+const wrapperClasses =
+  mode === 'card' ?
+    [
+      'relative overflow-hidden bg-surface-muted',
+      cardWrapperClass,
+      featured && orientation === 'landscape' && featuredMinHeightClass
+    ] :
+    [
+      'relative overflow-hidden bg-surface-muted',
+      detailWrapperClass
+    ]
+
+const imageClasses = ['relative z-10 transition duration-500 motion-reduce:transition-none']
+
+if (mode === 'detail') {
+  imageClasses.push(detailImageClass)
+} else {
+  imageClasses.push(cardImageClass)
+}
+
+let targetWidth = 1280
+let targetHeight = 800
+
+if (mode === 'detail') {
+  targetWidth = 1600
+  targetHeight = 1000
+}
+
+if (orientation === 'portrait') {
+  targetHeight = mode === 'detail' ? 1500 : 1280
+  targetWidth = Math.round(targetHeight * 0.8)
+} else if (orientation === 'square') {
+  targetHeight = mode === 'detail' ? 1200 : 1024
+  targetWidth = targetHeight
+}
+
+const widths =
+  mode === 'detail' ?
+    [400, 800, 1200, 1600] :
+    [320, 400, 560, 740, 960, 1280]
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-cover-image',
+  hover && 'ui-cover-image--hover',
+  ...wrapperClasses
+], classProp, className)
+---
+
+<div
+  class:list={classList}
+  style={mode === 'detail' ? detailWrapperStyle : undefined}
+  transition:name={effectiveTransitionName}
+  {...passthrough}
+>
+  {mode === 'detail' && useContainedFrame && (
+    <div
+      aria-hidden="true"
+      class="grid-fade absolute inset-0 opacity-45"
+    />
+  )}
+
+  <Picture
+    alt={ariaHidden ? '' : alt}
+    aria-hidden={ariaHidden ? 'true' : undefined}
+    class:list={imageClasses}
+    fetchpriority={fetchpriority}
+    formats={['avif', 'webp']}
+    height={targetHeight}
+    loading={loading}
+    sizes={sizes}
+    src={image}
+    width={targetWidth}
+    widths={widths}
+  />
+
+  {mode === 'card' && !useContainedFrame && showCardOverlay && (
+    <div
+      aria-hidden="true"
+      class="absolute inset-0 bg-linear-to-t from-canvas/55 via-canvas/10 to-transparent"
+    />
+  )}
+
+  {showBottomGradient && (
+    <div
+      aria-hidden="true"
+      class="ui-cover-image__bottom-gradient"
+    />
+  )}
+</div>