@santi020k/lumen-astro 1.6.0 → 1.7.0

package/components/PhoneInput.astro

@@ -1,7 +1,15 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 
-import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+import {
+  getLumenPhoneCountries,
+  getLumenPhoneCountry,
+  type LumenPhoneCountry,
+  type LumenPhoneCountryOptions,
+  type LumenPhoneNumber,
+  resolveLumenAstroProps,
+  resolveLumenPhoneNumber
+} from '@santi020k/lumen-core'
 
 interface CountryOption {
   disabled?: boolean
@@ -11,13 +19,20 @@ interface CountryOption {
 
 type Country = CountryOption | string
 
+interface NormalizedCountryOption extends CountryOption {
+  regionCode?: string
+}
+
 interface Props extends Omit<HTMLAttributes<'div'>, 'size'> {
   class?: string | null
   className?: string
   countries?: Country[]
+  countryOptions?: readonly LumenPhoneCountry[]
   countryLabel?: string
   countryName?: string
   countryValue?: string
+  invalidNumberMessage?: string
+  locale?: LumenPhoneCountryOptions['locale']
   name?: string
   placeholder?: string
   size?: 'default' | 'lg' | 'sm'
@@ -28,9 +43,12 @@ const {
   class: classProp = '',
   className = '',
   countries = [],
+  countryOptions,
   countryLabel = 'Country code',
   countryName = 'country',
-  countryValue,
+  countryValue = 'US',
+  invalidNumberMessage = 'Enter a complete phone number.',
+  locale,
   name = 'phone',
   placeholder = 'Phone number',
   size = 'default',
@@ -38,8 +56,45 @@ const {
   ...rest
 } = Astro.props
 
-const normalizedCountries = countries.map(country => typeof country === 'string' ? { label: country, value: country } : country)
-const hasCountryValue = countryValue !== undefined
+const phoneOptions = locale === undefined ? {} : { locale }
+const metadataCountries = countryOptions ?? getLumenPhoneCountries(phoneOptions)
+const usesMetadata = countries.length === 0
+
+const normalizedCountries: NormalizedCountryOption[] = usesMetadata ?
+  metadataCountries.map(country => ({
+  label: country.pickerLabel,
+  regionCode: country.regionCode,
+  value: country.regionCode
+  })) :
+  countries.map(country => typeof country === 'string' ? { label: country, value: country } : country)
+
+const selectedCountry = metadataCountries.find(country => (
+  country.regionCode === countryValue || country.callingCode === countryValue
+)) ?? metadataCountries[0] ?? getLumenPhoneCountry('US', phoneOptions)
+
+const detectedPhoneValue = selectedCountry && value ?
+  resolveLumenPhoneNumber(selectedCountry, value, phoneOptions) :
+  null
+
+const normalizePhoneValue = (detectedValue: LumenPhoneNumber | null): LumenPhoneNumber | null => {
+  if (!detectedValue || !selectedCountry) return detectedValue
+
+  const detectedCountryIsAllowed = metadataCountries.some(country => (
+    country.regionCode === detectedValue.country.regionCode
+  ))
+
+  if (detectedCountryIsAllowed) return detectedValue
+
+  const allowedCountryValue = detectedValue.nationalNumber.startsWith('+') ?
+    detectedValue.nationalNumber.slice(1) :
+    detectedValue.nationalNumber
+
+  return resolveLumenPhoneNumber(selectedCountry, allowedCountryValue, phoneOptions)
+}
+
+const phoneValue = normalizePhoneValue(detectedPhoneValue)
+const selectedCountryValue = usesMetadata ? phoneValue?.country.regionCode ?? selectedCountry?.regionCode : countryValue
+const renderedValue = usesMetadata ? phoneValue?.nationalNumber ?? value : value
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
   'ui-phone-input',
@@ -47,7 +102,14 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
 ], classProp, className)
 ---
 
-<div class:list={classList} {...passthrough}>
+<div
+  class:list={classList}
+  data-e164={phoneValue?.e164}
+  data-invalid-number-message={invalidNumberMessage}
+  data-ui-phone-input={usesMetadata ? '' : undefined}
+  data-valid={phoneValue ? String(phoneValue.isValid) : undefined}
+  {...passthrough}
+>
   <select
     aria-label={countryLabel}
     class:list={[
@@ -61,7 +123,8 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
     {normalizedCountries.map(country => (
       <option
         disabled={country.disabled}
-        selected={hasCountryValue && country.value === countryValue}
+        data-region={country.regionCode}
+        selected={country.value === selectedCountryValue}
         value={country.value}
       >{country.label}
       </option>
@@ -79,6 +142,6 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
     name={name}
     placeholder={placeholder}
     type="tel"
-    value={value}
+    value={renderedValue}
   />
 </div>

package/components/PieChart.astro

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'astro/types'
 
 import {
   createLumenPieGeometry,
+  formatLumenChartSummary,
   getLumenChartToneClassName,
   getLumenPieChartVariantClassName,
   hasLumenPieData,
@@ -24,6 +25,7 @@ interface Props extends HTMLAttributes<'figure'> {
   series: LumenChartSeries
   showLegend?: boolean
   showTable?: boolean
+  summary?: string
   valueFormatter?: (value: number) => string
   variant?: LumenPieChartVariant
 }
@@ -41,6 +43,7 @@ const {
   showLegend = true,
   showTable = true,
   valueFormatter = String,
+  summary: summaryProp,
   variant = 'donut',
   ...rest
 } = Astro.props
@@ -48,6 +51,13 @@ const {
 const geometry = createLumenPieGeometry(series.data, { variant })
 const hasData = hasLumenPieData(series.data)
 
+const renderedSeries = {
+  ...series,
+  data: series.data.filter(datum => datum.y !== null && Number.isFinite(datum.y) && datum.y > 0)
+}
+
+const summary = summaryProp ?? formatLumenChartSummary([renderedSeries], valueFormatter)
+
 const percentageFor = (percentage: number) => new Intl.NumberFormat(undefined, {
   maximumFractionDigits: percentage < 0.01 ? 1 : 0,
   style: 'percent'
@@ -60,6 +70,7 @@ const percentageFor = (percentage: number) => new Intl.NumberFormat(undefined, {
   {description}
   {glass}
   {heading}
+  {summary}
   {...rest}
 >
   {

package/components/RangeChart.astro

@@ -0,0 +1,58 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { createLumenRangeGeometry, getLumenChartTicks, getLumenChartToneClassName, type LumenChartTone, type LumenRangeDatum, scaleLumenChartValue } from '@santi020k/lumen-core'
+
+import Chart from './Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'> {
+  caption?: string
+  class?: string | null
+  className?: string
+  data: readonly LumenRangeDatum[]
+  description?: string
+  formatValue?: (value: number) => string
+  heading?: string
+  showTable?: boolean
+  summary?: string
+  tone?: LumenChartTone
+}
+
+const { caption, class: classProp = '', className = '', data, description, formatValue = String, heading, showTable = true, summary: summaryProp, tone = 'series-1', ...rest } = Astro.props
+const width = 640
+const height = 320
+const padding = 44
+const geometry = createLumenRangeGeometry(data, { height, padding, width })
+
+const summary = summaryProp ?? (
+  geometry.points.length === 0 ?
+    'No chart data available.' :
+    `${geometry.points.length} available ranges.`
+)
+
+const ticks = getLumenChartTicks(geometry.domain)
+---
+
+<Chart class:list={['ui-range-chart', getLumenChartToneClassName(tone), classProp, className]} {caption} {description} {heading} {summary} {...rest}>
+  {geometry.points.length === 0 && <p class="ui-chart__empty" role="status">No chart data available.</p>}
+  <div class="ui-chart__plot" hidden={geometry.points.length === 0}><svg aria-hidden="true" viewBox={`0 0 ${width} ${height}`}><g class="
+    ui-chart__grid
+  "
+                                                                                                                               >{ticks.map(tick => {
+ const y = scaleLumenChartValue(tick, geometry.domain, height - padding, padding)
+
+ return <><line x1={padding} x2={width - padding} y1={y} y2={y}/><text x={padding - 8} y={y}>{formatValue(tick)}</text></>
+})}</g><path
+class="ui-range-chart__area"
+d={geometry.areaPath}
+       />{geometry.points.map(point => (
+<line
+class="ui-range-chart__interval"
+x1={point.xCoordinate}
+x2={point.xCoordinate}
+y1={point.highCoordinate}
+y2={point.lowCoordinate}
+><title>{`${point.xLabel ?? point.x}: ${point.label ?? `${formatValue(point.low ?? 0)}–${formatValue(point.high ?? 0)}`}`}</title></line>
+))}</svg></div>
+  {showTable && <details class="ui-chart__data"><summary>View chart data</summary><div><table><thead><tr><th scope="col">Category</th><th scope="col">Low</th><th scope="col">High</th></tr></thead><tbody>{data.map(item => <tr><th scope="row">{item.xLabel ?? item.x}</th><td>{item.low === null || !Number.isFinite(item.low) ? 'Not available' : formatValue(item.low)}</td><td>{item.high === null || !Number.isFinite(item.high) ? 'Not available' : formatValue(item.high)}</td></tr>)}</tbody></table></div></details>}
+</Chart>

package/components/ScatterChart.astro

@@ -0,0 +1,78 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import {
+  createLumenScatterGeometry,
+  formatLumenChartSummary,
+  getLumenChartTicks,
+  getLumenChartToneClassName,
+  type LumenChartScaleType,
+  type LumenChartSeries,
+  scaleLumenChartValue } from '@santi020k/lumen-core'
+
+import Chart from './Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'> {
+  caption?: string
+  class?: string | null
+  className?: string
+  description?: string
+  emptyLabel?: string
+  formatValue?: (value: number) => string
+  heading?: string
+  series: readonly LumenChartSeries[]
+  showLegend?: boolean
+  showTable?: boolean
+  summary?: string
+  xScale?: Exclude<LumenChartScaleType, 'categorical'>
+}
+
+const {
+  caption,
+  class: classProp = '',
+  className = '',
+  description,
+  emptyLabel = 'No chart data available.',
+  formatValue = String,
+  heading,
+  series,
+  showLegend = series.length > 1,
+  showTable = true,
+  summary: summaryProp,
+  xScale = 'linear',
+  ...rest
+} = Astro.props
+
+const geometry = createLumenScatterGeometry(series, { xScale })
+
+const projectedSeries = series.map(item => ({
+  ...item,
+  data: geometry.points.filter(point => point.seriesId === item.id)
+})).filter(item => item.data.length > 0)
+
+const hasData = geometry.points.length > 0
+const summary = summaryProp ?? formatLumenChartSummary(projectedSeries, formatValue)
+const xTicks = getLumenChartTicks(geometry.xDomain)
+const yTicks = getLumenChartTicks(geometry.domain)
+---
+
+<Chart class:list={['ui-scatter-chart', classProp, className]} {caption} {description} {heading} {summary} {...rest}>
+  {showLegend && hasData && <ul class="ui-chart__legend" aria-label="Chart legend">{series.map((item, index) => <li class={getLumenChartToneClassName(item.tone, index)}><span aria-hidden="true" />{item.label}</li>)}</ul>}
+  {!hasData && <p class="ui-chart__empty" role="status">{emptyLabel}</p>}
+  <div class="ui-chart__plot" hidden={!hasData}>
+    <svg aria-hidden="true" viewBox={`0 0 ${geometry.width} ${geometry.height}`}>
+      <g class="ui-chart__grid">{yTicks.map(tick => {
+ const y = scaleLumenChartValue(tick, geometry.domain, geometry.height - 44, 44)
+
+ return <><line x1="44" x2={geometry.width - 44} y1={y} y2={y}/><text x="36" y={y}>{formatValue(tick)}</text></>
+})}</g>
+      <g class="ui-chart__axis-labels">{xTicks.map(tick => {
+ const x = scaleLumenChartValue(tick, geometry.xDomain, 44, geometry.width - 44)
+
+ return <text text-anchor="middle" x={x} y={geometry.height - 14}>{formatValue(tick)}</text>
+})}</g>
+      <g class="ui-scatter-chart__marks">{geometry.points.map(point => <circle class={getLumenChartToneClassName(point.tone)} cx={point.xCoordinate} cy={point.yCoordinate} r={point.radius}><title>{`${point.xLabel ?? point.x} · ${point.seriesLabel}: ${point.label ?? formatValue(point.y ?? 0)}`}</title></circle>)}</g>
+    </svg>
+  </div>
+  {showTable && hasData && <details class="ui-chart__data"><summary>View chart data</summary><div><table><thead><tr><th scope="col">X</th><th scope="col">Series</th><th scope="col">Value</th><th scope="col">Size</th></tr></thead><tbody>{geometry.points.map(point => <tr><th scope="row">{point.xLabel ?? point.x}</th><td>{point.seriesLabel}</td><td>{point.label ?? formatValue(point.y ?? 0)}</td><td>{point.size === undefined || point.size === null || !Number.isFinite(point.size) ? 'Not available' : formatValue(point.size)}</td></tr>)}</tbody></table></div></details>}
+</Chart>

package/components/Sonner.astro

@@ -21,7 +21,8 @@ const {
 } = Astro.props
 
 const { classList, passthrough } = resolveLumenAstroProps(rest, [
-  'ui-sonner'
+  'ui-sonner',
+  'ui-tvp'
 ], classProp, className)
 ---
 
@@ -29,6 +30,7 @@ const { classList, passthrough } = resolveLumenAstroProps(rest, [
   aria-atomic={ariaAtomic}
   aria-live={ariaLive}
   data-ui-sonner
+  data-ui-toast-viewport
   data-ui-toast-max={maxCount}
   data-placement={placement}
   class:list={classList}

package/components/ToastViewport.astro

@@ -0,0 +1,38 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { resolveLumenAstroProps } from '@santi020k/lumen-core'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string | null
+  className?: string
+  maxCount?: number
+  placement?: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right'
+}
+
+const {
+  'aria-atomic': ariaAtomic = 'false',
+  'aria-live': ariaLive = 'polite',
+  class: classProp = '',
+  className = '',
+  maxCount,
+  placement = 'bottom-right',
+  ...rest
+} = Astro.props
+
+const { classList, passthrough } = resolveLumenAstroProps(rest, [
+  'ui-tvp'
+], classProp, className)
+---
+
+<div
+  aria-atomic={ariaAtomic}
+  aria-live={ariaLive}
+  data-ui-toast-viewport
+  data-ui-toast-max={maxCount}
+  data-placement={placement}
+  class:list={classList}
+  {...passthrough}
+>
+  <slot />
+</div>

package/index.ts

@@ -38,6 +38,7 @@ export { default as CodeTabs } from './components/CodeTabs.astro'
 export { default as Collapsible } from './components/Collapsible.astro'
 export { default as ColorPicker } from './components/ColorPicker.astro'
 export { default as Combobox } from './components/Combobox.astro'
+export { default as ComboChart } from './components/ComboChart.astro'
 export { default as Command } from './components/Command.astro'
 export { default as Container } from './components/Container.astro'
 export { default as ContextMenu } from './components/ContextMenu.astro'
@@ -57,6 +58,7 @@ export { default as DropdownMenuItem } from './components/DropdownMenuItem.astro
 export { default as DropdownMenuSeparator } from './components/DropdownMenuSeparator.astro'
 export { default as DropdownMenuTrigger } from './components/DropdownMenuTrigger.astro'
 export { default as Empty } from './components/Empty.astro'
+export { default as ErrorState } from './components/ErrorState.astro'
 export { default as ErrorSummary } from './components/ErrorSummary.astro'
 export { default as Eyebrow } from './components/Eyebrow.astro'
 export { default as Field } from './components/Field.astro'
@@ -68,6 +70,7 @@ export { default as FormattedDate } from './components/FormattedDate.astro'
 export { default as GradientDivider } from './components/GradientDivider.astro'
 export { default as Graphic } from './components/Graphic.astro'
 export { default as Grid } from './components/Grid.astro'
+export { default as Heatmap } from './components/Heatmap.astro'
 export { default as HoverCard } from './components/HoverCard.astro'
 export { default as Icon } from './components/Icon.astro'
 export { default as Illustration } from './components/Illustration.astro'
@@ -108,10 +111,12 @@ export { default as Progress } from './components/Progress.astro'
 export { default as Prose } from './components/Prose.astro'
 export { default as QRCode } from './components/QRCode.astro'
 export { default as RadioGroup } from './components/RadioGroup.astro'
+export { default as RangeChart } from './components/RangeChart.astro'
 export { default as Rating } from './components/Rating.astro'
 export { default as Resizable } from './components/Resizable.astro'
 export { default as RevealGroup } from './components/RevealGroup.astro'
 export { default as RichTextEditor } from './components/RichTextEditor.astro'
+export { default as ScatterChart } from './components/ScatterChart.astro'
 export { default as Schedule } from './components/Schedule.astro'
 export { default as ScrollArea } from './components/ScrollArea.astro'
 export { default as ScrollProgress } from './components/ScrollProgress.astro'
@@ -125,7 +130,6 @@ export { default as Sidebar } from './components/Sidebar.astro'
 export { default as Skeleton } from './components/Skeleton.astro'
 export { default as SkipLink } from './components/SkipLink.astro'
 export { default as Slider } from './components/Slider.astro'
-export { default as Sonner } from './components/Sonner.astro'
 export { default as Sparkline } from './components/Sparkline.astro'
 export { default as SpeedDial } from './components/SpeedDial.astro'
 export { default as Spinner } from './components/Spinner.astro'
@@ -151,6 +155,9 @@ export { default as TimeField } from './components/TimeField.astro'
 export { default as Timeline } from './components/Timeline.astro'
 export { default as TimelineItem } from './components/TimelineItem.astro'
 export { default as Toast } from './components/Toast.astro'
+/** @deprecated Import ToastViewport instead. */
+export { default as Sonner } from './components/Sonner.astro'
+export { default as ToastViewport } from './components/ToastViewport.astro'
 export { default as Toggle } from './components/Toggle.astro'
 export { default as ToggleGroup } from './components/ToggleGroup.astro'
 export { default as Toolbar } from './components/Toolbar.astro'
@@ -170,4 +177,9 @@ export {
   type LumenControlIdMap,
   normalizeAstroActionErrors
 } from './forms.ts'
+/** @deprecated Import the default export from @santi020k/lumen-astro/runtime instead. */
 export { default as UIPrimitives } from './runtime/UIPrimitives.astro'
+export type {
+  LumenTabsChangeDetail,
+  LumenTabsChangeEvent
+} from '@santi020k/lumen-core'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen-astro",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "publishConfig": {
     "access": "public"
   },
@@ -8,6 +8,7 @@
   "type": "module",
   "sideEffects": [
     "./styles/lumen.css",
+    "./styles/critical.css",
     "./styles.css"
   ],
   "types": "./index.ts",
@@ -24,9 +25,11 @@
     "./runtime": "./runtime/UIPrimitives.astro",
     "./layers.css": "./styles/layers.css",
     "./styles.css": "./styles/lumen.css",
+    "./styles/critical.css": "./styles/critical.css",
     "./package.json": "./package.json"
   },
   "files": [
+    "bin",
     "components",
     "runtime",
     "styles",
@@ -35,10 +38,13 @@
     "README.md",
     "LICENSE"
   ],
+  "bin": {
+    "lumen": "./bin/lumen.mjs"
+  },
   "dependencies": {
     "uqr": "^0.1.3",
-    "@santi020k/lumen-core": "^1.4.0",
-    "@santi020k/lumen": "^1.6.0"
+    "@santi020k/lumen": "^1.7.0",
+    "@santi020k/lumen-core": "^1.7.0"
   },
   "devDependencies": {
     "@astrojs/ts-plugin": "^1.10.11",