@a4ui/core 0.11.1 → 0.12.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export declare const A4UI_VERSION = "0.11.1";
+export declare const A4UI_VERSION = "0.12.0";
 export { cn } from './lib/cn';
 export { useTheme, toggleTheme, setTheme, storedTheme, applyTheme, toggled, type Theme } from './lib/theme';
 export { useEffects, isCalm, setEffects } from './lib/effects';

package/dist/index.js

@@ -5623,7 +5623,7 @@ function Pc() {
     }
   ks(e && or(e) || nt);
 }
-const Bc = "0.11.1";
+const Bc = "0.12.0";
 export {
   Bc as A4UI_VERSION,
   id as Accordion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",
@@ -29,6 +29,9 @@
   ],
   "files": [
     "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
     "preset.js"
   ],
   "main": "./dist/index.js",
@@ -37,16 +40,19 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "solid": "./src/index.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./commerce": {
       "types": "./dist/commerce/index.d.ts",
+      "solid": "./src/commerce/index.ts",
       "import": "./dist/commerce.js",
       "default": "./dist/commerce.js"
     },
     "./charts": {
       "types": "./dist/charts/index.d.ts",
+      "solid": "./src/charts/index.ts",
       "import": "./dist/charts.js",
       "default": "./dist/charts.js"
     },
@@ -55,6 +61,7 @@
       "default": "./preset.js"
     },
     "./styles.css": "./dist/styles.css",
+    "./full.css": "./dist/full.css",
     "./elements": {
       "import": "./dist/elements.js",
       "default": "./dist/elements.js"

package/src/charts/BarChart.tsx

@@ -0,0 +1,55 @@
+// BarChart — a simple vertical bar chart built from plain flex `div`s (no
+// SVG, no charting library). Bar heights are percentages of the tallest
+// value so the whole chart reflows with its container, and height changes
+// animate via `transition-all`. Colors come from theme tokens only.
+import { For, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface BarDatum {
+  label: string
+  value: number
+}
+
+export interface BarChartProps {
+  data: BarDatum[]
+  /** Height of the plot area in px. Default 160. */
+  height?: number
+  /** Fill color token. Default 'primary'. */
+  tone?: 'primary' | 'accent'
+  class?: string
+}
+
+/**
+ * Vertical bar chart rendered with flexbox: each bar's height is `value /
+ * max` of the plot area, filled with a theme token, with its label truncated
+ * beneath it and its raw value available via a native tooltip.
+ *
+ * @example
+ * ```tsx
+ * <BarChart data={[{ label: 'Mon', value: 12 }, { label: 'Tue', value: 30 }]} tone="accent" />
+ * ```
+ */
+export function BarChart(props: BarChartProps): JSX.Element {
+  const height = () => props.height ?? 160
+  const tone = () => props.tone ?? 'primary'
+  const max = () => Math.max(...props.data.map((d) => d.value), 0) || 1
+  const barClass = () => (tone() === 'accent' ? 'bg-accent' : 'bg-primary')
+
+  return (
+    <div class={cn('flex w-full items-end gap-2', props.class)} style={{ height: `${height()}px` }}>
+      <For each={props.data}>
+        {(datum) => (
+          <div class="flex h-full min-w-0 flex-1 flex-col items-center justify-end gap-1">
+            <div
+              title={`${datum.label}: ${datum.value}`}
+              class={cn('w-full rounded-t transition-all', barClass())}
+              style={{ height: `${Math.max((datum.value / max()) * 100, 0)}%` }}
+            />
+            <span class="w-full truncate text-center text-xs text-muted-foreground">{datum.label}</span>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}

package/src/charts/DonutChart.tsx

@@ -0,0 +1,127 @@
+// DonutChart — a native SVG donut/ring chart (no charting library). Each
+// segment is a `<circle>` stroked with `stroke-dasharray`/`stroke-dashoffset`
+// to draw an arc proportional to `value / total`; the whole group is rotated
+// so the first segment starts at 12 o'clock and segments run clockwise in
+// order. Colors come from theme tokens, either per-segment `tone` or, when
+// omitted, cycled across the `--data-*` series tokens by index.
+import { For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export type DonutTone = 'primary' | 'accent' | 'destructive' | 'emit' | 'received' | 'net'
+
+export interface DonutSegment {
+  label: string
+  value: number
+  tone?: DonutTone
+}
+
+export interface DonutChartProps {
+  data: DonutSegment[]
+  /** Overall SVG width/height in px. Default 160. */
+  size?: number
+  /** Ring stroke width in px. Default 20. */
+  thickness?: number
+  /** Show the summed total in the center. Default true. */
+  showTotal?: boolean
+  class?: string
+}
+
+// Explicit tone -> CSS custom property name.
+const TONE_TOKENS: Record<DonutTone, string> = {
+  primary: '--primary',
+  accent: '--accent',
+  destructive: '--destructive',
+  emit: '--data-emit',
+  received: '--data-received',
+  net: '--data-net',
+}
+
+// Fallback rotation used when a segment has no explicit `tone`.
+const CYCLE_TOKENS = ['--data-emit', '--data-received', '--data-net'] as const
+
+/** Resolve the CSS custom property a segment should stroke with. */
+function tokenFor(segment: DonutSegment, index: number): string {
+  if (segment.tone) return TONE_TOKENS[segment.tone]
+  return CYCLE_TOKENS[index % CYCLE_TOKENS.length]
+}
+
+/**
+ * SVG donut chart: one arc per segment, sized by `value / total` of the
+ * circle's circumference, starting at 12 o'clock and running clockwise.
+ * Segment colors come from each datum's `tone`, or cycle through the
+ * `--data-*` series tokens by index when omitted.
+ *
+ * @example
+ * ```tsx
+ * <DonutChart
+ *   data={[
+ *     { label: 'Sent', value: 62, tone: 'emit' },
+ *     { label: 'Received', value: 38, tone: 'received' },
+ *   ]}
+ * />
+ * ```
+ */
+export function DonutChart(props: DonutChartProps): JSX.Element {
+  const size = () => props.size ?? 160
+  const thickness = () => props.thickness ?? 20
+  const showTotal = () => props.showTotal ?? true
+  const center = () => size() / 2
+  const radius = () => Math.max(size() / 2 - thickness() / 2, 0)
+  const circumference = () => 2 * Math.PI * radius()
+  const total = () => props.data.reduce((sum, d) => sum + d.value, 0)
+
+  const arcs = () => {
+    const grandTotal = total() || 1
+    let cumulative = 0
+    return props.data.map((segment, index) => {
+      const fraction = segment.value / grandTotal
+      const arcLength = fraction * circumference()
+      const offset = cumulative
+      cumulative += arcLength
+      return { segment, index, arcLength, offset }
+    })
+  }
+
+  return (
+    <div
+      class={cn('relative inline-flex items-center justify-center', props.class)}
+      style={{ width: `${size()}px`, height: `${size()}px` }}
+    >
+      <svg width={size()} height={size()} viewBox={`0 0 ${size()} ${size()}`} role="img">
+        <g transform={`rotate(-90 ${center()} ${center()})`}>
+          <circle
+            cx={center()}
+            cy={center()}
+            r={radius()}
+            fill="none"
+            stroke="hsl(var(--muted))"
+            stroke-width={thickness()}
+          />
+          <For each={arcs()}>
+            {(arc) => (
+              <circle
+                cx={center()}
+                cy={center()}
+                r={radius()}
+                fill="none"
+                stroke={`hsl(var(${tokenFor(arc.segment, arc.index)}))`}
+                stroke-width={thickness()}
+                stroke-linecap="butt"
+                stroke-dasharray={`${arc.arcLength} ${Math.max(circumference() - arc.arcLength, 0)}`}
+                stroke-dashoffset={-arc.offset}
+              >
+                <title>{`${arc.segment.label}: ${arc.segment.value}`}</title>
+              </circle>
+            )}
+          </For>
+        </g>
+      </svg>
+      <Show when={showTotal()}>
+        <div class="absolute inset-0 flex items-center justify-center text-lg font-semibold tabular-nums text-foreground">
+          {total()}
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/charts/Sparkline.tsx

@@ -0,0 +1,101 @@
+// Sparkline — a tiny inline trend line rendered as a native SVG polyline (no
+// charting library). Values are scaled to fill the viewBox (min -> bottom,
+// max -> top, with a couple px of padding so the line never clips), stroked
+// with a theme token so it recolors with the active palette. An optional
+// faint area fill traces the same points down to the baseline.
+import { Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface SparklineProps {
+  data: number[]
+  /** SVG viewBox width in px. Default 120. */
+  width?: number
+  /** SVG viewBox height in px. Default 32. */
+  height?: number
+  /** Stroke color token. Default 'primary'. */
+  tone?: 'primary' | 'accent' | 'destructive'
+  /** Fill the area under the line faintly. Default false. */
+  area?: boolean
+  class?: string
+}
+
+const PAD = 2
+
+/** Build the `x,y` point list for `data` scaled into `w`×`h` (with padding). */
+function pointsFor(data: number[], w: number, h: number): { x: number; y: number }[] {
+  if (data.length === 0) return []
+  if (data.length === 1) {
+    return [{ x: w / 2, y: h / 2 }]
+  }
+  const min = Math.min(...data)
+  const max = Math.max(...data)
+  const span = max - min || 1
+  const innerH = Math.max(h - PAD * 2, 0)
+  const stepX = w / (data.length - 1)
+  return data.map((value, i) => ({
+    x: i * stepX,
+    y: PAD + innerH - ((value - min) / span) * innerH,
+  }))
+}
+
+/**
+ * Minimal inline trend line: an SVG polyline scaled to fit `width`×`height`,
+ * stroked with a theme token so it recolors with the active palette. Pass
+ * `area` for a faint fill under the line.
+ *
+ * @example
+ * ```tsx
+ * <Sparkline data={[3, 5, 4, 8, 6, 9, 7]} tone="accent" area />
+ * ```
+ */
+export function Sparkline(props: SparklineProps): JSX.Element {
+  const width = () => props.width ?? 120
+  const height = () => props.height ?? 32
+  const tone = () => props.tone ?? 'primary'
+  const points = () => pointsFor(props.data, width(), height())
+
+  const polylinePoints = () =>
+    points()
+      .map((p) => `${p.x},${p.y}`)
+      .join(' ')
+
+  const areaPath = () => {
+    const pts = points()
+    if (pts.length === 0) return ''
+    const line = pts.map((p) => `${p.x},${p.y}`).join(' L ')
+    const first = pts[0]
+    const last = pts[pts.length - 1]
+    return `M ${first.x},${height()} L ${line} L ${last.x},${height()} Z`
+  }
+
+  return (
+    <svg
+      class={cn('overflow-visible', props.class)}
+      width={width()}
+      height={height()}
+      viewBox={`0 0 ${width()} ${height()}`}
+      preserveAspectRatio="none"
+      role="img"
+    >
+      <Show when={points().length > 0}>
+        <Show when={props.area}>
+          <path d={areaPath()} fill={`hsl(var(--${tone()}) / 0.15)`} stroke="none" />
+        </Show>
+        <Show
+          when={points().length > 1}
+          fallback={<circle cx={points()[0]?.x} cy={points()[0]?.y} r={2} fill={`hsl(var(--${tone()}))`} />}
+        >
+          <polyline
+            points={polylinePoints()}
+            fill="none"
+            stroke={`hsl(var(--${tone()}))`}
+            stroke-width={2}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </Show>
+      </Show>
+    </svg>
+  )
+}

package/src/charts/index.ts

@@ -0,0 +1,5 @@
+// Barrel for the native-SVG chart set: theme-tokened, no external chart
+// library. Re-exports each component alongside its prop types.
+export { Sparkline, type SparklineProps } from './Sparkline'
+export { BarChart, type BarDatum, type BarChartProps } from './BarChart'
+export { DonutChart, type DonutSegment, type DonutChartProps } from './DonutChart'

package/src/commerce/CartLine.tsx

@@ -0,0 +1,84 @@
+// A single cart row: thumbnail, title + unit price, quantity stepper, line
+// total, and an optional remove button.
+import { Trash2 } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { PriceTag } from './PriceTag'
+import { QuantityStepper } from './QuantityStepper'
+
+export interface CartLineProps {
+  title: string
+  /** Unit price. */
+  price: number
+  quantity: number
+  image?: string
+  /** ISO 4217 currency code. Defaults to `'USD'`. */
+  currency?: string
+  /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+  locale?: string
+  onQuantityChange?: (quantity: number) => void
+  onRemove?: () => void
+  class?: string
+}
+
+/**
+ * One line item in a shopping cart: thumbnail, title with unit price, a
+ * {@link QuantityStepper}, the line total, and an optional remove action.
+ *
+ * @example
+ * ```tsx
+ * <CartLine
+ *   title="Wireless Mouse"
+ *   price={29.99}
+ *   quantity={2}
+ *   image="/mouse.jpg"
+ *   onQuantityChange={setQty}
+ *   onRemove={() => removeLine(id)}
+ * />
+ * ```
+ */
+export function CartLine(props: CartLineProps): JSX.Element {
+  const lineTotal = () => props.price * props.quantity
+
+  const format = (value: number) =>
+    new Intl.NumberFormat(props.locale ?? 'en-US', {
+      style: 'currency',
+      currency: props.currency ?? 'USD',
+    }).format(value)
+
+  return (
+    <div class={cn('flex flex-wrap items-center gap-4', props.class)}>
+      <Show when={props.image}>
+        <img
+          src={props.image}
+          alt={props.title}
+          class="h-16 w-16 shrink-0 rounded-md bg-muted object-cover"
+        />
+      </Show>
+      <div class="min-w-[8rem] flex-1">
+        <p class="line-clamp-1 font-medium text-foreground">{props.title}</p>
+        <PriceTag amount={props.price} currency={props.currency} locale={props.locale} size="sm" />
+      </div>
+      <QuantityStepper
+        value={props.quantity}
+        onChange={(quantity) => props.onQuantityChange?.(quantity)}
+        min={1}
+      />
+      <span class="min-w-[4rem] text-right font-medium tabular-nums text-foreground">
+        {format(lineTotal())}
+      </span>
+      <Show when={props.onRemove}>
+        <button
+          type="button"
+          aria-label="Remove item"
+          class="text-muted-foreground hover:text-foreground"
+          onClick={() => props.onRemove?.()}
+        >
+          <Trash2 class="h-4 w-4" />
+        </button>
+      </Show>
+    </div>
+  )
+}

package/src/commerce/CartSummary.tsx

@@ -0,0 +1,70 @@
+// Order summary panel: itemized lines (subtotal, shipping, tax, ...), a
+// divider, a bold total row, and an optional checkout button.
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Button } from '../ui/Button'
+
+export interface CartSummaryItem {
+  label: string
+  amount: number
+}
+
+export interface CartSummaryProps {
+  /** Itemized rows, e.g. Subtotal, Shipping, Tax. */
+  lines: CartSummaryItem[]
+  total: number
+  /** ISO 4217 currency code. Defaults to `'USD'`. */
+  currency?: string
+  /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+  locale?: string
+  /** Label for the checkout button. Defaults to `'Checkout'`. */
+  checkoutLabel?: string
+  onCheckout?: () => void
+  class?: string
+}
+
+/**
+ * Order summary panel listing itemized amounts (subtotal, shipping, tax,
+ * ...), a bold total, and an optional full-width checkout button.
+ *
+ * @example
+ * ```tsx
+ * <CartSummary
+ *   lines={[{ label: 'Subtotal', amount: 59.98 }, { label: 'Shipping', amount: 4.99 }]}
+ *   total={64.97}
+ *   onCheckout={() => goToCheckout()}
+ * />
+ * ```
+ */
+export function CartSummary(props: CartSummaryProps): JSX.Element {
+  const format = (value: number) =>
+    new Intl.NumberFormat(props.locale ?? 'en-US', {
+      style: 'currency',
+      currency: props.currency ?? 'USD',
+    }).format(value)
+
+  return (
+    <div class={cn('card glow-edge rounded-xl p-5 text-card-foreground', props.class)}>
+      <For each={props.lines}>
+        {(line) => (
+          <div class="flex items-center justify-between py-1 text-sm">
+            <span class="text-muted-foreground">{line.label}</span>
+            <span class="tabular-nums text-foreground">{format(line.amount)}</span>
+          </div>
+        )}
+      </For>
+      <div class="my-3 border-t border-border" />
+      <div class="flex items-center justify-between text-base font-bold text-foreground">
+        <span>Total</span>
+        <span class="tabular-nums">{format(props.total)}</span>
+      </div>
+      <Show when={props.onCheckout}>
+        <Button class="mt-4 w-full" onClick={() => props.onCheckout?.()}>
+          {props.checkoutLabel ?? 'Checkout'}
+        </Button>
+      </Show>
+    </div>
+  )
+}

package/src/commerce/FilterGroup.tsx

@@ -0,0 +1,70 @@
+// Titled group of checkbox facet options (e.g. size, color, brand) with
+// optional result counts, for faceted search/filter sidebars.
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Checkbox } from '../ui/Checkbox'
+
+export interface FacetOption {
+  value: string
+  label: string
+  count?: number
+}
+
+export interface FilterGroupProps {
+  title: string
+  options: FacetOption[]
+  selected: string[]
+  onChange: (selected: string[]) => void
+  class?: string
+}
+
+/**
+ * Titled group of checkbox facet options (e.g. size, color, brand), each with
+ * an optional result count, for faceted search/filter sidebars.
+ *
+ * @example
+ * ```tsx
+ * <FilterGroup
+ *   title="Size"
+ *   options={[{ value: 'sm', label: 'Small', count: 12 }, { value: 'md', label: 'Medium', count: 8 }]}
+ *   selected={selected()}
+ *   onChange={setSelected}
+ * />
+ * ```
+ */
+export function FilterGroup(props: FilterGroupProps): JSX.Element {
+  const toggle = (value: string, checked: boolean) => {
+    const next = props.selected.slice()
+    const index = next.indexOf(value)
+    if (checked) {
+      if (index === -1) next.push(value)
+    } else if (index !== -1) {
+      next.splice(index, 1)
+    }
+    props.onChange(next)
+  }
+
+  return (
+    <div class={cn('space-y-2', props.class)}>
+      <p class="text-sm font-semibold text-foreground">{props.title}</p>
+      <div class="space-y-1.5">
+        <For each={props.options}>
+          {(option) => (
+            <div class="flex items-center justify-between gap-2">
+              <Checkbox
+                checked={props.selected.includes(option.value)}
+                onChange={(checked) => toggle(option.value, checked)}
+                label={option.label}
+              />
+              <Show when={option.count != null}>
+                <span class="text-xs text-muted-foreground">{option.count}</span>
+              </Show>
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

package/src/commerce/PriceTag.tsx

@@ -0,0 +1,62 @@
+// Price display: current amount, optional struck-through compare-at price, and
+// a danger Badge showing the discount percent when the item is on sale.
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Badge } from '../ui/Badge'
+
+/** Text size of a {@link PriceTag}'s main amount. Defaults to `'md'`. */
+export type PriceTagSize = 'sm' | 'md' | 'lg'
+
+const SIZE_CLASSES: Record<PriceTagSize, string> = {
+  sm: 'text-sm',
+  md: 'text-lg',
+  lg: 'text-2xl',
+}
+
+export interface PriceTagProps {
+  amount: number
+  /** Original price; shown struck-through when greater than `amount`. */
+  compareAt?: number
+  /** ISO 4217 currency code. Defaults to `'USD'`. */
+  currency?: string
+  /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+  locale?: string
+  /** Text size of the main price. Defaults to `'md'`. */
+  size?: PriceTagSize
+  class?: string
+}
+
+/**
+ * Formatted price display with an optional struck-through compare-at price
+ * and a discount-percent badge when the item is on sale.
+ *
+ * @example
+ * ```tsx
+ * <PriceTag amount={29.99} compareAt={39.99} currency="USD" />
+ * ```
+ */
+export function PriceTag(props: PriceTagProps): JSX.Element {
+  const format = (value: number) =>
+    new Intl.NumberFormat(props.locale ?? 'en-US', {
+      style: 'currency',
+      currency: props.currency ?? 'USD',
+    }).format(value)
+
+  const onSale = () => (props.compareAt ?? 0) > props.amount
+
+  const discountPercent = () => Math.round((1 - props.amount / (props.compareAt as number)) * 100)
+
+  return (
+    <div class={cn('inline-flex items-center gap-2', props.class)}>
+      <span class={cn('font-bold text-foreground', SIZE_CLASSES[props.size ?? 'md'])}>
+        {format(props.amount)}
+      </span>
+      <Show when={onSale()}>
+        <span class="text-muted-foreground line-through">{format(props.compareAt as number)}</span>
+        <Badge tone="danger">-{discountPercent()}%</Badge>
+      </Show>
+    </div>
+  )
+}