@santi020k/lumen-astro 0.3.0 → 1.0.0

package/components/DataTable.astro

@@ -1,15 +1,15 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 type DataTableCell =
-  | boolean
-  | null
-  | number
-  | string
-  | undefined
-  | {
+  | boolean |
+  null |
+  number |
+  string |
+  undefined |
+  {
     label?: boolean | null | number | string
     sortValue?: boolean | null | number | string
     value?: boolean | null | number | string
@@ -51,15 +51,15 @@ const {
 } = 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'
+  '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 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
@@ -73,8 +73,7 @@ const getSortValue = (cell: DataTableCell): string | undefined => {
   return String(cell.sortValue)
 }
 
-const getRowValue = (row: DataTableRow, index: number): string =>
-  String(row.rowValue ?? row.value ?? row.id ?? index)
+const getRowValue = (row: DataTableRow, index: number): string => String(row.rowValue ?? row.value ?? row.id ?? index)
 ---
 
 <div
@@ -85,38 +84,40 @@ const getRowValue = (row: DataTableRow, index: number): string =>
   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>
-              )
-            })}
+  {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>
-        ))}
-      </tbody>
-    </table>
-  ) : (
-    <slot />
-  )}
+        </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

@@ -1,8 +1,9 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
+
 import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-import Calendar from './Calendar.astro'
 
-import type { HTMLAttributes } from 'astro/types'
+import Calendar from './Calendar.astro'
 
 interface Props extends HTMLAttributes<'input'> {
   class?: string | null
@@ -32,26 +33,28 @@ 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'
+  '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
+
+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

package/components/DateRangePicker.astro

@@ -1,14 +1,15 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string
 }
 
 const { class: classProp = '', className = '', ...rest } = Astro.props
+
 const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-date-range-picker'
 ], classProp, className)
 ---

package/components/Descriptions.astro

@@ -1,9 +1,9 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
-type DescriptionItem = { label: string; value: string }
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface DescriptionItem { label: string, value: string }
 
 interface Props extends HTMLAttributes<'dl'> {
   class?: string | null

package/components/Dialog.astro

@@ -1,17 +1,13 @@
 ---
-import { resolveLumenAstroProps, resolveLumenGlass } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'dialog'> {
   class?: string | null
   className?: string
   glass?: boolean | 'subtle' | 'strong'
   layout?: 'centered' | 'fullscreen'
-  /**
-   * @deprecated Use `glass` instead. `surface="glass"` maps to `glass={true}`.
-   */
-  surface?: 'default' | 'glass'
 }
 
 const {
@@ -19,22 +15,20 @@ const {
   className = '',
   glass = false,
   layout = 'centered',
-  surface = 'default',
   ...rest
 } = Astro.props
 
-const resolvedGlass = resolveLumenGlass(glass, surface)
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-dialog',
-    layout === 'fullscreen' && 'ui-dialog--fullscreen',
-    resolvedGlass && 'ui-dialog--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-dialog',
+  layout === 'fullscreen' && 'ui-dialog--fullscreen',
+  glass && 'ui-dialog--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 
 <dialog
-  data-surface={resolvedGlass ? 'glass' : 'default'}
+  data-surface={glass ? 'glass' : 'default'}
   data-layout={layout}
   data-ui-dialog
   class:list={classList}

package/components/Direction.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string
@@ -17,7 +17,7 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-direction'
+  'ui-direction'
 ], classProp, className)
 ---
 

package/components/Drawer.astro

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

package/components/DropdownMenu.astro

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

package/components/Empty.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'section'> {
   class?: string | null
   className?: string
@@ -17,10 +17,10 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-empty',
-    glass && 'ui-empty--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  'ui-empty',
+  glass && 'ui-empty--glass',
+  glass === 'subtle' && 'ui-glass-subtle',
+  glass === 'strong' && 'ui-glass-strong'
 ], classProp, className)
 ---
 

package/components/ErrorSummary.astro

@@ -0,0 +1,54 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import type { LumenFormErrorInput } from '@santi020k/lumen-core'
+import { normalizeLumenFormErrors, resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'section'> {
+  class?: string | null
+  className?: string
+  errors?: LumenFormErrorInput
+  heading?: string
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  errors,
+  heading = 'There is a problem',
+  id,
+  ...rest
+} = Astro.props
+
+const normalizedErrors = normalizeLumenFormErrors(errors)
+
+const allErrors = [
+  ...normalizedErrors.form.map(message => ({ message })),
+  ...normalizedErrors.fields
+]
+
+const summaryId = id ?? 'ui-error-summary'
+const headingId = `${summaryId}-heading`
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-error-summary'], classProp, className)
+---
+
+<section
+  aria-labelledby={headingId}
+  class:list={classList}
+  data-ui-error-summary
+  hidden={allErrors.length === 0}
+  id={summaryId}
+  tabindex="-1"
+  {...passthrough}
+>
+  <h2 id={headingId}>{heading}</h2>
+  <ul>
+    {allErrors.map(error => (
+      <li>
+        {error.controlId ?
+          <a href={`#${error.controlId}`}>{error.message}</a> :
+          error.message}
+      </li>
+    ))}
+  </ul>
+</section>

package/components/Eyebrow.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'p'> {
   class?: string | null
   className?: string

package/components/Field.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string
@@ -22,11 +22,12 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-    'ui-field',
-    glass && 'ui-field--glass',
-    glass === 'subtle' && 'ui-glass-subtle',
-    glass === 'strong' && 'ui-glass-strong'
+  '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
 ---
 

package/components/FieldError.astro

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

package/components/FileUpload.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends Omit<HTMLAttributes<'input'>, 'type' | 'size'> {
   class?: string | null
   className?: string

package/components/FloatingBadge.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'span'> {
   class?: string | null
   className?: string

package/components/Form.astro

@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import type { LumenFormStatus } from '@santi020k/lumen-core'
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'form'> {
+  class?: string | null
+  className?: string
+  enhance?: boolean
+  status?: LumenFormStatus
+}
+
+const {
+  class: classProp = '',
+  className = '',
+  enhance = true,
+  status = 'idle',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, ['ui-form'], classProp, className)
+---
+
+<form
+  aria-busy={status === 'submitting' ? 'true' : undefined}
+  class:list={classList}
+  data-status={status}
+  data-ui-form={enhance ? true : undefined}
+  {...passthrough}
+>
+  <slot />
+</form>

package/components/FormattedDate.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'time'> {
   class?: string | null
   className?: string

package/components/GradientDivider.astro

@@ -1,8 +1,8 @@
 ---
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
-
 import type { HTMLAttributes } from 'astro/types'
 
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
 interface Props extends HTMLAttributes<'div'> {
   class?: string | null
   className?: string

package/components/Grid.astro

@@ -0,0 +1,46 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  as?: 'div' | 'ol' | 'section' | 'ul'
+  class?: string | null
+  className?: string
+  columns?: 1 | 2 | 3 | 4 | 6 | 12 | 'auto'
+  gap?: 'lg' | 'md' | 'none' | 'sm' | 'xl'
+  minItemWidth?: string
+}
+
+const {
+  as: Tag = 'div',
+  class: classProp = '',
+  className = '',
+  columns = 'auto',
+  gap = 'md',
+  minItemWidth,
+  style,
+  ...rest
+} = Astro.props
+
+const gridStyle = [
+  typeof style === 'string' ? style : '',
+  minItemWidth ? `--ui-grid-min:${minItemWidth}` : ''
+].filter(Boolean).join(';')
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-grid',
+  `ui-grid--columns-${columns}`,
+  `ui-grid--gap-${gap}`
+], classProp, className)
+---
+
+<Tag
+  class:list={classList}
+  data-columns={columns}
+  data-ui-grid
+  style={gridStyle || undefined}
+  {...passthrough}
+>
+  <slot />
+</Tag>