@pyreon/core 0.7.5 → 0.7.7

package/src/jsx-runtime.ts

@@ -6,6 +6,7 @@
  *   <div class="x" />  →  jsx("div", { class: "x" })
  */
 import { Fragment, h } from "./h"
+import type { ClassValue } from "./style"
 import type { ComponentFn, Props, VNode, VNodeChild } from "./types"
 
 export { Fragment }
@@ -36,15 +37,20 @@ export const jsxs = jsx
 // ─── JSX types ────────────────────────────────────────────────────────────────
 
 type Booleanish = boolean | "true" | "false"
-type CSSProperties = { [K in keyof CSSStyleDeclaration]?: string | number }
-type StyleValue = string | CSSProperties
+export type CSSProperties = { [K in keyof CSSStyleDeclaration]?: string | number }
+export type StyleValue = string | CSSProperties
+
+/** Event with typed currentTarget — used in element-specific event handlers. */
+export type TargetedEvent<T extends Element, E extends Event = Event> = E & {
+  readonly currentTarget: T
+}
 
 /** Common HTML attributes accepted by all Pyreon elements */
-interface PyreonHTMLAttributes<E extends Element = HTMLElement> {
+export interface PyreonHTMLAttributes<E extends Element = HTMLElement> {
   // Identity
   id?: string | undefined
-  class?: string | (() => string) | undefined
-  className?: string | (() => string) | undefined
+  class?: ClassValue | (() => ClassValue) | undefined
+  className?: ClassValue | (() => ClassValue) | undefined
   style?: StyleValue | (() => StyleValue) | undefined
   // Accessible
   role?: string | undefined
@@ -100,62 +106,67 @@ interface PyreonHTMLAttributes<E extends Element = HTMLElement> {
   // innerHTML
   innerHTML?: string | undefined
   dangerouslySetInnerHTML?: { __html: string } | undefined
-  // Events
-  onClick?: ((e: MouseEvent) => void) | undefined
-  onDblClick?: ((e: MouseEvent) => void) | undefined
-  onMouseDown?: ((e: MouseEvent) => void) | undefined
-  onMouseUp?: ((e: MouseEvent) => void) | undefined
-  onMouseEnter?: ((e: MouseEvent) => void) | undefined
-  onMouseLeave?: ((e: MouseEvent) => void) | undefined
-  onMouseMove?: ((e: MouseEvent) => void) | undefined
-  onMouseOver?: ((e: MouseEvent) => void) | undefined
-  onMouseOut?: ((e: MouseEvent) => void) | undefined
-  onContextMenu?: ((e: MouseEvent) => void) | undefined
-  onKeyDown?: ((e: KeyboardEvent) => void) | undefined
-  onKeyUp?: ((e: KeyboardEvent) => void) | undefined
-  onKeyPress?: ((e: KeyboardEvent) => void) | undefined
-  onFocus?: ((e: FocusEvent) => void) | undefined
-  onBlur?: ((e: FocusEvent) => void) | undefined
-  onChange?: ((e: Event) => void) | undefined
-  onInput?: ((e: InputEvent) => void) | undefined
-  onSubmit?: ((e: SubmitEvent) => void) | undefined
-  onReset?: ((e: Event) => void) | undefined
-  onScroll?: ((e: Event) => void) | undefined
-  onWheel?: ((e: WheelEvent) => void) | undefined
-  onDragStart?: ((e: DragEvent) => void) | undefined
-  onDragEnd?: ((e: DragEvent) => void) | undefined
-  onDragOver?: ((e: DragEvent) => void) | undefined
-  onDragEnter?: ((e: DragEvent) => void) | undefined
-  onDragLeave?: ((e: DragEvent) => void) | undefined
-  onDrop?: ((e: DragEvent) => void) | undefined
-  onTouchStart?: ((e: TouchEvent) => void) | undefined
-  onTouchEnd?: ((e: TouchEvent) => void) | undefined
-  onTouchMove?: ((e: TouchEvent) => void) | undefined
-  onPointerDown?: ((e: PointerEvent) => void) | undefined
-  onPointerUp?: ((e: PointerEvent) => void) | undefined
-  onPointerMove?: ((e: PointerEvent) => void) | undefined
-  onPointerEnter?: ((e: PointerEvent) => void) | undefined
-  onPointerLeave?: ((e: PointerEvent) => void) | undefined
-  onPointerCancel?: ((e: PointerEvent) => void) | undefined
-  onPointerOver?: ((e: PointerEvent) => void) | undefined
-  onPointerOut?: ((e: PointerEvent) => void) | undefined
-  onTransitionEnd?: ((e: TransitionEvent) => void) | undefined
-  onAnimationStart?: ((e: AnimationEvent) => void) | undefined
-  onAnimationEnd?: ((e: AnimationEvent) => void) | undefined
-  onAnimationIteration?: ((e: AnimationEvent) => void) | undefined
-  onLoad?: ((e: Event) => void) | undefined
-  onError?: ((e: Event | string) => void) | undefined
-  onAbort?: ((e: Event) => void) | undefined
-  onSelect?: ((e: Event) => void) | undefined
-  onCopy?: ((e: ClipboardEvent) => void) | undefined
-  onCut?: ((e: ClipboardEvent) => void) | undefined
-  onPaste?: ((e: ClipboardEvent) => void) | undefined
-  // Catch-all for data-* and other arbitrary attributes
-  [key: string]: unknown
+  // Events — typed currentTarget via generic E
+  onClick?: ((e: TargetedEvent<E, MouseEvent>) => void) | undefined
+  onDblClick?: ((e: TargetedEvent<E, MouseEvent>) => void) | undefined
+  onMouseDown?: ((e: TargetedEvent<E, MouseEvent>) => void) | undefined
+  onMouseUp?: ((e: TargetedEvent<E, MouseEvent>) => void) | undefined
+  onMouseEnter?: ((e: TargetedEvent<E, MouseEvent>) => void) | undefined
+  onMouseLeave?: ((e: TargetedEvent<E, MouseEvent>) => void) | undefined
+  onMouseMove?: ((e: TargetedEvent<E, MouseEvent>) => void) | undefined
+  onMouseOver?: ((e: TargetedEvent<E, MouseEvent>) => void) | undefined
+  onMouseOut?: ((e: TargetedEvent<E, MouseEvent>) => void) | undefined
+  onContextMenu?: ((e: TargetedEvent<E, MouseEvent>) => void) | undefined
+  onKeyDown?: ((e: TargetedEvent<E, KeyboardEvent>) => void) | undefined
+  onKeyUp?: ((e: TargetedEvent<E, KeyboardEvent>) => void) | undefined
+  onKeyPress?: ((e: TargetedEvent<E, KeyboardEvent>) => void) | undefined
+  onFocus?: ((e: TargetedEvent<E, FocusEvent>) => void) | undefined
+  onBlur?: ((e: TargetedEvent<E, FocusEvent>) => void) | undefined
+  onChange?: ((e: TargetedEvent<E>) => void) | undefined
+  onInput?: ((e: TargetedEvent<E, InputEvent>) => void) | undefined
+  onBeforeInput?: ((e: TargetedEvent<E, InputEvent>) => void) | undefined
+  onSubmit?: ((e: TargetedEvent<E, SubmitEvent>) => void) | undefined
+  onReset?: ((e: TargetedEvent<E>) => void) | undefined
+  onInvalid?: ((e: TargetedEvent<E>) => void) | undefined
+  onScroll?: ((e: TargetedEvent<E>) => void) | undefined
+  onWheel?: ((e: TargetedEvent<E, WheelEvent>) => void) | undefined
+  onResize?: ((e: TargetedEvent<E>) => void) | undefined
+  onDragStart?: ((e: TargetedEvent<E, DragEvent>) => void) | undefined
+  onDragEnd?: ((e: TargetedEvent<E, DragEvent>) => void) | undefined
+  onDragOver?: ((e: TargetedEvent<E, DragEvent>) => void) | undefined
+  onDragEnter?: ((e: TargetedEvent<E, DragEvent>) => void) | undefined
+  onDragLeave?: ((e: TargetedEvent<E, DragEvent>) => void) | undefined
+  onDrop?: ((e: TargetedEvent<E, DragEvent>) => void) | undefined
+  onTouchStart?: ((e: TargetedEvent<E, TouchEvent>) => void) | undefined
+  onTouchEnd?: ((e: TargetedEvent<E, TouchEvent>) => void) | undefined
+  onTouchMove?: ((e: TargetedEvent<E, TouchEvent>) => void) | undefined
+  onPointerDown?: ((e: TargetedEvent<E, PointerEvent>) => void) | undefined
+  onPointerUp?: ((e: TargetedEvent<E, PointerEvent>) => void) | undefined
+  onPointerMove?: ((e: TargetedEvent<E, PointerEvent>) => void) | undefined
+  onPointerEnter?: ((e: TargetedEvent<E, PointerEvent>) => void) | undefined
+  onPointerLeave?: ((e: TargetedEvent<E, PointerEvent>) => void) | undefined
+  onPointerCancel?: ((e: TargetedEvent<E, PointerEvent>) => void) | undefined
+  onPointerOver?: ((e: TargetedEvent<E, PointerEvent>) => void) | undefined
+  onPointerOut?: ((e: TargetedEvent<E, PointerEvent>) => void) | undefined
+  onTransitionEnd?: ((e: TargetedEvent<E, TransitionEvent>) => void) | undefined
+  onAnimationStart?: ((e: TargetedEvent<E, AnimationEvent>) => void) | undefined
+  onAnimationEnd?: ((e: TargetedEvent<E, AnimationEvent>) => void) | undefined
+  onAnimationIteration?: ((e: TargetedEvent<E, AnimationEvent>) => void) | undefined
+  onToggle?: ((e: TargetedEvent<E>) => void) | undefined
+  onLoad?: ((e: TargetedEvent<E>) => void) | undefined
+  onError?: ((e: TargetedEvent<E> | string) => void) | undefined
+  onAbort?: ((e: TargetedEvent<E>) => void) | undefined
+  onSelect?: ((e: TargetedEvent<E>) => void) | undefined
+  onCopy?: ((e: TargetedEvent<E, ClipboardEvent>) => void) | undefined
+  onCut?: ((e: TargetedEvent<E, ClipboardEvent>) => void) | undefined
+  onPaste?: ((e: TargetedEvent<E, ClipboardEvent>) => void) | undefined
+  // data-* and aria-* catch-all (typed attributes above catch typos)
+  [key: `data-${string}`]: unknown
+  [key: `aria-${string}`]: unknown
 }
 
 /** Attributes specific to form inputs */
-interface InputAttributes extends PyreonHTMLAttributes<HTMLInputElement> {
+export interface InputAttributes extends PyreonHTMLAttributes<HTMLInputElement> {
   type?: string | (() => string) | undefined
   value?: string | number | (() => string | number) | undefined
   defaultValue?: string | number | undefined
@@ -185,14 +196,14 @@ interface InputAttributes extends PyreonHTMLAttributes<HTMLInputElement> {
   height?: number | string | undefined
 }
 
-interface AnchorAttributes extends PyreonHTMLAttributes<HTMLAnchorElement> {
+export interface AnchorAttributes extends PyreonHTMLAttributes<HTMLAnchorElement> {
   href?: string | (() => string) | undefined
   target?: "_blank" | "_self" | "_parent" | "_top" | string | undefined
   rel?: string | undefined
   download?: string | boolean | undefined
 }
 
-interface ButtonAttributes extends PyreonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonAttributes extends PyreonHTMLAttributes<HTMLButtonElement> {
   type?: "button" | "submit" | "reset" | undefined
   disabled?: boolean | (() => boolean) | undefined
   name?: string | undefined
@@ -205,7 +216,7 @@ interface ButtonAttributes extends PyreonHTMLAttributes<HTMLButtonElement> {
   formTarget?: string | undefined
 }
 
-interface TextareaAttributes extends PyreonHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaAttributes extends PyreonHTMLAttributes<HTMLTextAreaElement> {
   value?: string | (() => string) | undefined
   defaultValue?: string | undefined
   placeholder?: string | (() => string) | undefined
@@ -222,7 +233,7 @@ interface TextareaAttributes extends PyreonHTMLAttributes<HTMLTextAreaElement> {
   wrap?: "hard" | "soft" | undefined
 }
 
-interface SelectAttributes extends PyreonHTMLAttributes<HTMLSelectElement> {
+export interface SelectAttributes extends PyreonHTMLAttributes<HTMLSelectElement> {
   value?: string | string[] | (() => string | string[]) | undefined
   defaultValue?: string | string[] | undefined
   disabled?: boolean | (() => boolean) | undefined
@@ -241,7 +252,7 @@ interface OptionAttributes extends PyreonHTMLAttributes<HTMLOptionElement> {
   label?: string | undefined
 }
 
-interface FormAttributes extends PyreonHTMLAttributes<HTMLFormElement> {
+export interface FormAttributes extends PyreonHTMLAttributes<HTMLFormElement> {
   action?: string | undefined
   method?: "get" | "post" | undefined
   encType?: string | undefined
@@ -251,7 +262,7 @@ interface FormAttributes extends PyreonHTMLAttributes<HTMLFormElement> {
   autoComplete?: string | undefined
 }
 
-interface ImgAttributes extends PyreonHTMLAttributes<HTMLImageElement> {
+export interface ImgAttributes extends PyreonHTMLAttributes<HTMLImageElement> {
   src?: string | (() => string) | undefined
   alt?: string | (() => string) | undefined
   width?: number | string | (() => number | string) | undefined
@@ -391,7 +402,12 @@ interface OlAttributes extends PyreonHTMLAttributes<HTMLOListElement> {
   type?: "1" | "a" | "A" | "i" | "I" | undefined
 }
 
-interface SvgAttributes extends PyreonHTMLAttributes<SVGElement> {
+interface CanvasAttributes extends PyreonHTMLAttributes<HTMLCanvasElement> {
+  width?: number | string | undefined
+  height?: number | string | undefined
+}
+
+export interface SvgAttributes extends PyreonHTMLAttributes<SVGElement> {
   viewBox?: string | undefined
   xmlns?: string | undefined
   fill?: string | (() => string) | undefined
@@ -546,7 +562,7 @@ declare global {
       source: SourceAttributes
       track: PyreonHTMLAttributes
       picture: PyreonHTMLAttributes
-      canvas: PyreonHTMLAttributes
+      canvas: CanvasAttributes
       svg: SvgAttributes
       path: SvgAttributes
       circle: SvgAttributes

package/src/props.ts

@@ -0,0 +1,108 @@
+// Prop utilities for component authoring.
+
+/**
+ * Split props into two groups: keys you want and the rest.
+ * Unlike destructuring, this preserves reactivity (getters on the original object).
+ *
+ * @example
+ * const [own, html] = splitProps(props, ["label", "icon"])
+ * return <button {...html}><Icon name={own.icon} /> {own.label}</button>
+ */
+export function splitProps<T extends Record<string, unknown>, K extends (keyof T)[]>(
+  props: T,
+  keys: K,
+): [Pick<T, K[number]>, Omit<T, K[number]>] {
+  const picked = {} as Pick<T, K[number]>
+  const rest = {} as Omit<T, K[number]>
+  const keySet = new Set<string | symbol>(keys as (string | symbol)[])
+
+  for (const key of Object.keys(props)) {
+    const desc = Object.getOwnPropertyDescriptor(props, key)
+    if (!desc) continue
+    if (keySet.has(key)) {
+      Object.defineProperty(picked, key, desc)
+    } else {
+      Object.defineProperty(rest, key, desc)
+    }
+  }
+
+  return [picked, rest]
+}
+
+/**
+ * Merge default values with component props. Defaults are used when
+ * the prop is `undefined`. Preserves getter reactivity.
+ *
+ * @example
+ * const merged = mergeProps({ size: "md", variant: "primary" }, props)
+ * // merged.size is reactive — falls back to "md" when props.size is undefined
+ */
+export function mergeProps<T extends Record<string, unknown>>(...sources: T[]): T {
+  const result = {} as T
+  for (const source of sources) {
+    for (const key of Object.keys(source)) {
+      const desc = Object.getOwnPropertyDescriptor(source, key)
+      if (!desc) continue
+      // If the source has a getter, wrap it to check if the value is undefined
+      // and fall back to the previously defined value
+      const existing = Object.getOwnPropertyDescriptor(result, key)
+      if (desc.get && existing) {
+        const prevGet = existing.get ?? (() => existing.value)
+        const nextGet = desc.get
+        Object.defineProperty(result, key, {
+          get: () => {
+            const v = nextGet()
+            return v !== undefined ? v : prevGet()
+          },
+          enumerable: true,
+          configurable: true,
+        })
+      } else if (desc.get) {
+        Object.defineProperty(result, key, desc)
+      } else if (existing?.get) {
+        // New source has a static value, previous had a getter
+        const prevGet = existing.get
+        const staticVal = desc.value
+        if (staticVal !== undefined) {
+          Object.defineProperty(result, key, desc)
+        } else {
+          Object.defineProperty(result, key, {
+            get: prevGet,
+            enumerable: true,
+            configurable: true,
+          })
+        }
+      } else {
+        // Both static — later value wins if defined
+        if (desc.value !== undefined || !existing) {
+          Object.defineProperty(result, key, desc)
+        }
+      }
+    }
+  }
+  return result
+}
+
+// ─── Unique ID ───────────────────────────────────────────────────────────────
+
+let _idCounter = 0
+
+/**
+ * Generate a unique ID string for accessibility attributes (htmlFor, aria-describedby, etc.).
+ * SSR-safe: uses a deterministic counter that resets per request context.
+ *
+ * @example
+ * const id = createUniqueId()
+ * return <>
+ *   <label for={id}>Name</label>
+ *   <input id={id} />
+ * </>
+ */
+export function createUniqueId(): string {
+  return `pyreon-${++_idCounter}`
+}
+
+/** Reset the ID counter (called by SSR per-request). */
+export function _resetIdCounter(): void {
+  _idCounter = 0
+}

package/src/style.ts

@@ -49,6 +49,48 @@ export const CSS_UNITLESS = new Set([
   "strokeWidth",
 ])
 
+// ─── Class utilities ─────────────────────────────────────────────────────────
+
+/** Value accepted by the `class` prop — string, array, object, or nested mix. */
+export type ClassValue =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | ClassValue[]
+  | Record<string, boolean | null | undefined | (() => boolean)>
+
+function cxObject(obj: Record<string, boolean | null | undefined | (() => boolean)>): string {
+  let result = ""
+  for (const key in obj) {
+    const v = obj[key]
+    const truthy = typeof v === "function" ? v() : v
+    if (truthy) result = result ? `${result} ${key}` : key
+  }
+  return result
+}
+
+function cxArray(arr: ClassValue[]): string {
+  let result = ""
+  for (const item of arr) {
+    const resolved = cx(item)
+    if (resolved) result = result ? `${result} ${resolved}` : resolved
+  }
+  return result
+}
+
+/** Resolve a ClassValue into a flat class string (like clsx/cx). */
+export function cx(value: ClassValue): string {
+  if (value == null || value === false || value === true) return ""
+  if (typeof value === "string") return value
+  if (typeof value === "number") return String(value)
+  if (Array.isArray(value)) return cxArray(value)
+  return cxObject(value)
+}
+
+// ─── Style utilities ─────────────────────────────────────────────────────────
+
 /** Convert a camelCase CSS property name to kebab-case. */
 export function toKebabCase(str: string): string {
   return str.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)

package/src/tests/cx.test.ts

@@ -0,0 +1,41 @@
+import { cx } from "../style"
+
+describe("cx", () => {
+  test("returns empty string for falsy values", () => {
+    expect(cx(null)).toBe("")
+    expect(cx(undefined)).toBe("")
+    expect(cx(false)).toBe("")
+    expect(cx(true)).toBe("")
+  })
+
+  test("passes through strings", () => {
+    expect(cx("foo bar")).toBe("foo bar")
+  })
+
+  test("converts numbers to strings", () => {
+    expect(cx(42)).toBe("42")
+  })
+
+  test("filters and joins arrays", () => {
+    expect(cx(["foo", false, "bar", null, "baz"])).toBe("foo bar baz")
+  })
+
+  test("resolves object keys with truthy values", () => {
+    expect(cx({ active: true, hidden: false, bold: true })).toBe("active bold")
+  })
+
+  test("resolves object values that are functions", () => {
+    expect(cx({ active: () => true, hidden: () => false })).toBe("active")
+  })
+
+  test("handles nested arrays and objects", () => {
+    expect(cx(["base", { active: true }, ["nested", { deep: true }]])).toBe(
+      "base active nested deep",
+    )
+  })
+
+  test("handles empty inputs", () => {
+    expect(cx([])).toBe("")
+    expect(cx({})).toBe("")
+  })
+})

package/src/tests/props.test.ts

@@ -0,0 +1,77 @@
+import { createUniqueId, mergeProps, splitProps } from "../props"
+
+describe("splitProps", () => {
+  test("splits known keys from rest", () => {
+    const props = { label: "Hi", icon: "star", class: "btn", id: "x" }
+    const [own, html] = splitProps(props, ["label", "icon"])
+    expect(own).toEqual({ label: "Hi", icon: "star" })
+    expect(html).toEqual({ class: "btn", id: "x" })
+  })
+
+  test("preserves getters", () => {
+    let count = 0
+    const props = Object.defineProperty({} as Record<string, unknown>, "value", {
+      get: () => ++count,
+      enumerable: true,
+      configurable: true,
+    })
+    const [own] = splitProps(props, ["value"])
+    expect(own.value).toBe(1)
+    expect(own.value).toBe(2) // getter called again
+  })
+
+  test("handles empty keys array", () => {
+    const props = { a: 1, b: 2 }
+    const [own, rest] = splitProps(props, [])
+    expect(own).toEqual({})
+    expect(rest).toEqual({ a: 1, b: 2 })
+  })
+})
+
+describe("mergeProps", () => {
+  test("later sources override earlier", () => {
+    const result = mergeProps({ a: 1, b: 2 }, { b: 3, c: 4 })
+    expect(result).toEqual({ a: 1, b: 3, c: 4 })
+  })
+
+  test("undefined values don't override defined", () => {
+    const result = mergeProps({ size: "md" }, { size: undefined as string | undefined })
+    expect(result.size).toBe("md")
+  })
+
+  test("preserves getters from sources", () => {
+    let count = 0
+    const source = Object.defineProperty({} as Record<string, unknown>, "val", {
+      get: () => ++count,
+      enumerable: true,
+      configurable: true,
+    })
+    const result = mergeProps({ val: 0 }, source)
+    expect(result.val).toBe(1)
+    expect(result.val).toBe(2)
+  })
+
+  test("getter returning undefined falls back to previous value", () => {
+    let override: string | undefined
+    const source = Object.defineProperty({} as Record<string, unknown>, "size", {
+      get: () => override,
+      enumerable: true,
+      configurable: true,
+    })
+    const result = mergeProps({ size: "md" }, source)
+    expect(result.size).toBe("md") // getter returns undefined, fallback
+
+    override = "lg"
+    expect(result.size).toBe("lg") // getter returns value
+  })
+})
+
+describe("createUniqueId", () => {
+  test("returns incrementing IDs", () => {
+    const id1 = createUniqueId()
+    const id2 = createUniqueId()
+    expect(id1).toMatch(/^pyreon-\d+$/)
+    expect(id2).toMatch(/^pyreon-\d+$/)
+    expect(id1).not.toBe(id2)
+  })
+})