@santi020k/lumen-astro 0.1.0

package/components/DataTable.astro

@@ -0,0 +1,122 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type DataTableCell =
+  | boolean
+  | null
+  | number
+  | string
+  | undefined
+  | {
+    label?: boolean | null | number | string
+    sortValue?: boolean | null | number | string
+    value?: boolean | null | number | string
+  }
+
+interface DataTableColumn {
+  header?: string
+  key: string
+  label?: string
+  sort?: 'number' | 'string'
+  sortable?: boolean
+}
+
+type DataTableRow = Record<string, DataTableCell> & {
+  id?: number | string
+  rowValue?: number | string
+  value?: number | string
+}
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  className?: string
+  columns?: DataTableColumn[]
+  glass?: boolean | 'subtle' | 'strong'
+  name?: string
+  rows?: DataTableRow[]
+  selectable?: boolean
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  columns = [],
+  glass = false,
+  name,
+  rows = [],
+  selectable = false,
+  ...rest
+} = Astro.props
+
+const hasData = columns.length > 0
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-data-table',
+    glass && 'ui-data-table--glass',
+    glass === 'subtle' && 'ui-glass-subtle',
+    glass === 'strong' && 'ui-glass-strong'
+], classProp, className)
+
+const isCellObject = (cell: DataTableCell): cell is Exclude<DataTableCell, boolean | null | number | string | undefined> =>
+  typeof cell === 'object' && cell !== null
+
+const formatCell = (cell: DataTableCell): string => {
+  const value = isCellObject(cell) ? cell.label ?? cell.value : cell
+
+  return value === undefined || value === null ? '' : String(value)
+}
+
+const getSortValue = (cell: DataTableCell): string | undefined => {
+  if (!isCellObject(cell) || cell.sortValue === undefined || cell.sortValue === null) return undefined
+
+  return String(cell.sortValue)
+}
+
+const getRowValue = (row: DataTableRow, index: number): string =>
+  String(row.rowValue ?? row.value ?? row.id ?? index)
+---
+
+<div
+  class:list={classList}
+  data-ui-datatable
+  data-ui-datatable-name={name}
+  data-ui-datatable-selectable={selectable ? 'true' : undefined}
+  data-ui-glass-track={glass ? true : undefined}
+  {...passthrough}
+>
+  {hasData ? (
+    <table>
+      <thead>
+        <tr>
+          {columns.map(column => (
+            <th
+              data-ui-datatable-sort-type={column.sort}
+              data-ui-datatable-sortable={column.sortable ? 'true' : undefined}
+              scope="col"
+            >
+              {column.header ?? column.label ?? column.key}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, rowIndex) => (
+          <tr data-ui-datatable-row data-value={getRowValue(row, rowIndex)}>
+            {columns.map(column => {
+              const cell = row[column.key]
+
+              return (
+                <td data-sort-value={getSortValue(cell)}>
+                  {formatCell(cell)}
+                </td>
+              )
+            })}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ) : (
+    <slot />
+  )}
+</div>

package/components/DatePicker.astro

@@ -0,0 +1,108 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import Calendar from './Calendar.astro'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'input'> {
+  class?: string
+  className?: string
+  glass?: boolean | 'subtle' | 'strong'
+  placeholder?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  disabled = false,
+  glass = false,
+  id,
+  max,
+  min,
+  name,
+  placeholder,
+  required = false,
+  type = 'date',
+  value,
+  ...rest
+} = Astro.props
+
+const datePickerId = id ?? `ui-date-picker-${Math.random().toString(36).slice(2)}`
+const triggerId = `${datePickerId}-trigger`
+const popoverId = `${datePickerId}-popover`
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-date-picker-field',
+    glass && 'ui-date-picker-field--glass',
+    glass === 'subtle' && 'ui-glass-subtle',
+    glass === 'strong' && 'ui-glass-strong'
+], classProp, className)
+
+const selectedValue = value === undefined || value === null ? undefined : String(value)
+const hasSelectedValue = selectedValue !== undefined && selectedValue !== ''
+const placeholderText = placeholder ?? 'Choose a date'
+const selectedDate = hasSelectedValue
+  ? new Date(`${selectedValue}T00:00:00.000Z`)
+  : undefined
+const displayValue = selectedDate && !Number.isNaN(selectedDate.getTime())
+  ? new Intl.DateTimeFormat('en', {
+      day: 'numeric',
+      month: 'short',
+      timeZone: 'UTC',
+      year: 'numeric'
+    }).format(selectedDate)
+  : placeholderText
+---
+
+<div
+  class:list={classList}
+  data-placeholder={hasSelectedValue ? undefined : 'true'}
+  data-ui-date-picker
+  data-ui-glass-track={glass ? true : undefined}
+>
+  <input
+    class="ui-date-picker ui-date-picker__native"
+    data-ui-date-picker-native
+    disabled={disabled}
+    id={datePickerId}
+    max={max}
+    min={min}
+    name={name}
+    placeholder={placeholder}
+    required={required}
+    type={type}
+    value={value}
+    {...passthrough}
+  />
+
+  <div class="ui-date-picker__control" data-ui-date-picker-control hidden>
+    <button
+      aria-controls={popoverId}
+      aria-expanded="false"
+      aria-haspopup="dialog"
+      aria-required={required ? 'true' : undefined}
+      class="ui-input ui-date-picker ui-date-picker__trigger"
+      data-ui-date-picker-trigger
+      disabled={disabled}
+      id={triggerId}
+      type="button"
+    >
+      <span data-ui-date-picker-value>{displayValue}</span>
+      <svg aria-hidden="true" class="ui-date-picker__icon" fill="none" viewBox="0 0 24 24">
+        <path d="M7 2v3M17 2v3M3.5 9h17M5 4h14a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" />
+      </svg>
+    </button>
+
+    <div
+      aria-label="Choose date"
+      class="ui-date-picker__popover"
+      data-state="closed"
+      data-ui-date-picker-popover
+      hidden
+      id={popoverId}
+      role="dialog"
+    >
+      <Calendar max={typeof max === 'string' ? max : undefined} min={typeof min === 'string' ? min : undefined} value={selectedValue} />
+    </div>
+  </div>
+</div>

package/components/DateRangePicker.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-date-range-picker'
+], classProp, className)
+---
+
+<div class:list={classList} data-ui-date-range-picker {...passthrough}>
+  <slot />
+</div>

package/components/Descriptions.astro

@@ -0,0 +1,41 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+type DescriptionItem = { label: string; value: string }
+
+interface Props extends HTMLAttributes<'dl'> {
+  class?: string
+  className?: string
+  columns?: number
+  items?: DescriptionItem[]
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  columns = 1,
+  items = [],
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-descriptions'
+], classProp, className)
+---
+
+<dl
+  class:list={classList}
+  data-columns={columns}
+  style={`--ui-descriptions-columns:${columns}`}
+  {...passthrough}
+>
+  {items.map(item => (
+    <div class="ui-descriptions__item">
+      <dt class="ui-descriptions__term">{item.label}</dt>
+      <dd class="ui-descriptions__detail">{item.value}</dd>
+    </div>
+  ))}
+  <slot />
+</dl>

package/components/Dialog.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-dialog',
+    resolvedGlass && 'ui-dialog--glass',
+    glass === 'subtle' && 'ui-glass-subtle',
+    glass === 'strong' && 'ui-glass-strong'
+], classProp, className)
+---
+
+<dialog
+  data-surface={resolvedGlass ? 'glass' : 'default'}
+  data-ui-dialog
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</dialog>

package/components/Direction.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
+  dir?: 'ltr' | 'rtl' | 'auto'
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  dir = 'ltr',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-direction'
+], classProp, className)
+---
+
+<div
+  dir={dir}
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/Drawer.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-drawer',
+    resolvedGlass && 'ui-drawer--glass',
+    glass === 'subtle' && 'ui-glass-subtle',
+    glass === 'strong' && 'ui-glass-strong'
+], classProp, className)
+---
+
+<dialog
+  data-surface={resolvedGlass ? 'glass' : 'default'}
+  data-ui-drawer
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</dialog>

package/components/DropdownMenu.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-menu',
+    resolvedGlass && 'ui-menu--glass',
+    glass === 'subtle' && 'ui-glass-subtle',
+    glass === 'strong' && 'ui-glass-strong'
+], classProp, className)
+---
+
+<div
+  data-surface={resolvedGlass ? 'glass' : 'default'}
+  data-ui-dropdown-menu
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/Empty.astro

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

package/components/Eyebrow.astro

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

package/components/Field.astro

@@ -0,0 +1,42 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  className?: string
+  controlId?: string
+  describedBy?: string
+  glass?: boolean | 'subtle' | 'strong'
+}
+
+const {
+  'aria-describedby': ariaDescribedby,
+  class: classProp = '',
+  className = '',
+  controlId,
+  describedBy,
+  glass = false,
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+    'ui-field',
+    glass && 'ui-field--glass',
+    glass === 'subtle' && 'ui-glass-subtle',
+    glass === 'strong' && 'ui-glass-strong'
+], classProp, className)
+const fieldDescribedBy = [ariaDescribedby, describedBy].filter(Boolean).join(' ') || undefined
+---
+
+<div
+  aria-describedby={ariaDescribedby}
+  class:list={classList}
+  data-ui-field
+  data-ui-field-control={controlId}
+  data-ui-field-describedby={fieldDescribedBy}
+  {...passthrough}
+>
+  <slot />
+</div>

package/components/FileUpload.astro

@@ -0,0 +1,44 @@
+---
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends Omit<HTMLAttributes<'input'>, 'type' | 'size'> {
+  class?: string
+  className?: string
+  label?: string
+  hint?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  label = 'Choose a file or drag it here',
+  hint,
+  id,
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-file-upload'
+], classProp, className)
+---
+
+<label class:list={classList} data-ui-file-upload for={id}>
+  <input class="ui-file-upload__input" data-ui-file-upload-input id={id} type="file" {...passthrough} />
+  <svg
+    aria-hidden="true"
+    class="ui-file-upload__icon"
+    fill="none"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <path d="M12 16V4m0 0L8 8m4-4 4 4"></path>
+    <path d="M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4"></path>
+  </svg>
+  <span class="ui-file-upload__prompt">
+    <slot>{label}</slot>
+  </span>
+  {hint && <span class="ui-file-upload__hint">{hint}</span>}
+  <span aria-live="polite" class="ui-file-upload__files" data-ui-file-upload-files></span>
+</label>

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

package/components/FormattedDate.astro

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

package/components/GradientDivider.astro

@@ -0,0 +1,24 @@
+---
+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-gradient-divider'
+], classProp, className)
+---
+
+<div aria-hidden="true" class:list={classList} {...passthrough}>
+  <div class="ui-gradient-divider__line"></div>
+</div>