@pyreon/ui-core 0.11.0 → 0.11.2

package/src/html/htmlElementAttrs.ts

@@ -0,0 +1,106 @@
+type Base = HTMLElement
+
+export interface HTMLElementAttrs {
+  a: HTMLAnchorElement
+  abbr: Base
+  address: Base
+  area: HTMLAreaElement
+  article: Base
+  aside: Base
+  audio: HTMLAudioElement
+  b: Base
+  bdi: Base
+  bdo: Base
+  big: Base
+  blockquote: HTMLQuoteElement
+  body: HTMLBodyElement
+  br: HTMLBRElement
+  button: HTMLButtonElement
+  canvas: HTMLCanvasElement
+  caption: Base
+  cite: HTMLQuoteElement
+  code: Base
+  col: HTMLTableColElement
+  colgroup: HTMLTableColElement
+  data: HTMLDataElement
+  datalist: HTMLDataListElement
+  dd: Base
+  del: HTMLModElement
+  details: HTMLDetailsElement
+  dfn: Base
+  dialog: HTMLDialogElement
+  div: HTMLDivElement
+  dl: HTMLDListElement
+  dt: Base
+  em: Base
+  embed: HTMLEmbedElement
+  fieldset: HTMLFieldSetElement
+  figcaption: Base
+  figure: Base
+  footer: Base
+  form: HTMLFormElement
+  h1: HTMLHeadingElement
+  h2: HTMLHeadingElement
+  h3: HTMLHeadingElement
+  h4: HTMLHeadingElement
+  h5: HTMLHeadingElement
+  h6: HTMLHeadingElement
+  header: Base
+  hr: HTMLHRElement
+  html: HTMLHtmlElement
+  i: Base
+  iframe: HTMLIFrameElement
+  img: HTMLImageElement
+  input: HTMLInputElement
+  ins: HTMLModElement
+  kbd: Base
+  label: HTMLLabelElement
+  legend: HTMLLegendElement
+  li: HTMLLIElement
+  main: Base
+  map: HTMLMapElement
+  mark: Base
+  meter: HTMLMeterElement
+  nav: Base
+  object: HTMLObjectElement
+  ol: HTMLOListElement
+  optgroup: HTMLOptGroupElement
+  option: HTMLOptionElement
+  output: HTMLOutputElement
+  p: HTMLParagraphElement
+  picture: Base
+  pre: HTMLPreElement
+  progress: HTMLProgressElement
+  q: HTMLQuoteElement
+  rp: Base
+  rt: Base
+  ruby: Base
+  s: Base
+  samp: Base
+  section: Base
+  select: HTMLSelectElement
+  small: Base
+  source: HTMLSourceElement
+  span: HTMLSpanElement
+  strong: Base
+  sub: Base
+  summary: Base
+  sup: Base
+  svg: SVGSVGElement
+  table: HTMLTableElement
+  tbody: HTMLTableSectionElement
+  td: HTMLTableCellElement
+  template: HTMLTemplateElement
+  textarea: HTMLTextAreaElement
+  tfoot: HTMLTableSectionElement
+  th: HTMLTableCellElement
+  thead: HTMLTableSectionElement
+  time: HTMLTimeElement
+  tr: HTMLTableRowElement
+  track: HTMLTrackElement
+  u: Base
+  ul: HTMLUListElement
+  var: Base
+  video: HTMLVideoElement
+  wbr: Base
+}

package/src/html/htmlTags.ts

@@ -0,0 +1,151 @@
+const HTML_TAGS = [
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "bdi",
+  "bdo",
+  "big",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "header",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "main",
+  "map",
+  "mark",
+  "meter",
+  "nav",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rp",
+  "rt",
+  "ruby",
+  "s",
+  "samp",
+  "section",
+  "select",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "sub",
+  "summary",
+  "sup",
+  "svg",
+  "table",
+  "tbody",
+  "td",
+  "template",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr",
+] as const
+
+const HTML_TEXT_TAGS = [
+  "abbr",
+  "b",
+  "bdi",
+  "bdo",
+  "big",
+  "blockquote",
+  "cite",
+  "code",
+  "del",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "figcaption",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "i",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "p",
+  "pre",
+  "q",
+  "rp",
+  "rt",
+  "s",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "summary",
+  "sup",
+  "time",
+  "u",
+] as const
+
+export type HTMLTags = (typeof HTML_TAGS)[number]
+export type HTMLTextTags = (typeof HTML_TEXT_TAGS)[number]
+export { HTML_TAGS, HTML_TEXT_TAGS }

package/src/html/index.ts

@@ -0,0 +1,11 @@
+import type { HTMLElementAttrs } from "./htmlElementAttrs"
+import type { HTMLTags, HTMLTextTags } from "./htmlTags"
+import { HTML_TAGS, HTML_TEXT_TAGS } from "./htmlTags"
+
+type HTMLTagAttrsByTag<T extends HTMLTags> = T extends HTMLTags
+  ? HTMLElementAttrs[T]
+  : Record<string, never>
+
+export type { HTMLElementAttrs, HTMLTagAttrsByTag, HTMLTags, HTMLTextTags }
+
+export { HTML_TAGS, HTML_TEXT_TAGS }

package/src/index.ts

@@ -0,0 +1,55 @@
+import compose from "./compose"
+import config, { init } from "./config"
+import Provider, { context } from "./context"
+import hoistNonReactStatics from "./hoistNonReactStatics"
+import type { HTMLElementAttrs, HTMLTagAttrsByTag, HTMLTags, HTMLTextTags } from "./html"
+import { HTML_TAGS, HTML_TEXT_TAGS } from "./html"
+import type { IsEmpty } from "./isEmpty"
+import isEmpty from "./isEmpty"
+import isEqual from "./isEqual"
+import type { PyreonUIProps, ThemeMode, ThemeModeInput } from "./PyreonUI"
+import { PyreonUI, useMode } from "./PyreonUI"
+import type { Render } from "./render"
+import render from "./render"
+import type { BreakpointKeys, Breakpoints } from "./types"
+import useStableValue from "./useStableValue"
+import { get, merge, omit, pick, set, throttle } from "./utils"
+
+export type { CSSEngineConnector } from "./config"
+
+export type {
+  BreakpointKeys,
+  Breakpoints,
+  HTMLElementAttrs,
+  HTMLTagAttrsByTag,
+  HTMLTags,
+  HTMLTextTags,
+  IsEmpty,
+  PyreonUIProps,
+  Render,
+  ThemeMode,
+  ThemeModeInput,
+}
+
+export {
+  compose,
+  config,
+  context,
+  get,
+  HTML_TAGS,
+  HTML_TEXT_TAGS,
+  hoistNonReactStatics,
+  init,
+  isEmpty,
+  isEqual,
+  merge,
+  omit,
+  Provider,
+  PyreonUI,
+  pick,
+  render,
+  set,
+  throttle,
+  useMode,
+  useStableValue,
+}

package/src/isEmpty.ts

@@ -0,0 +1,20 @@
+export type IsEmpty = <T extends Record<number | string, any> | any[] | null | undefined>(
+  param: T,
+) => T extends null | undefined
+  ? true
+  : keyof T extends never
+    ? true
+    : T extends T[]
+      ? T[number] extends never
+        ? true
+        : false
+      : false
+
+const isEmpty = (<T extends Record<number | string, any> | any[] | null | undefined>(param: T) => {
+  if (!param) return true
+  if (typeof param !== "object") return true
+  if (Array.isArray(param)) return param.length === 0
+  return Object.keys(param).length === 0
+}) as IsEmpty
+
+export default isEmpty

package/src/isEqual.ts

@@ -0,0 +1,27 @@
+const isArrayEqual = (a: unknown[], b: unknown[]): boolean => {
+  if (a.length !== b.length) return false
+  for (let i = 0; i < a.length; i++) {
+    if (!isEqual(a[i], b[i])) return false
+  }
+  return true
+}
+
+const isObjectEqual = (a: Record<string, unknown>, b: Record<string, unknown>): boolean => {
+  const aKeys = Object.keys(a)
+  if (aKeys.length !== Object.keys(b).length) return false
+  for (const key of aKeys) {
+    if (!Object.hasOwn(b, key)) return false
+    if (!isEqual(a[key], b[key])) return false
+  }
+  return true
+}
+
+const isEqual = (a: unknown, b: unknown): boolean => {
+  if (Object.is(a, b)) return true
+  if (typeof a !== typeof b || a == null || b == null || typeof a !== "object") return false
+  if (Array.isArray(a)) return Array.isArray(b) && isArrayEqual(a, b)
+  if (Array.isArray(b)) return false
+  return isObjectEqual(a as Record<string, unknown>, b as Record<string, unknown>)
+}
+
+export default isEqual

package/src/render.tsx

@@ -0,0 +1,44 @@
+import type { ComponentFn, Props, VNodeChild } from "@pyreon/core"
+import { h } from "@pyreon/core"
+
+type RenderProps<T extends Record<string, unknown> | undefined> = (props: Partial<T>) => VNodeChild
+
+/**
+ * Flexible element renderer that handles multiple content types:
+ * - Primitives (string, number) — returned as-is
+ * - Arrays — returned as-is
+ * - Component functions — created via h()
+ * - VNode objects — returned as-is (with props merged if provided)
+ * - Render props (functions) — called with attachProps
+ * - Falsy values — return null
+ */
+export type Render = <T extends Record<string, any> | undefined>(
+  content?: ComponentFn | string | VNodeChild | VNodeChild[] | RenderProps<T>,
+  attachProps?: T,
+) => VNodeChild
+
+const render: Render = (content, attachProps) => {
+  if (!content) return null
+
+  const t = typeof content
+  if (t === "string" || t === "number" || t === "boolean" || t === "bigint") {
+    return content as VNodeChild
+  }
+
+  if (Array.isArray(content)) {
+    return content as VNodeChild
+  }
+
+  if (typeof content === "function") {
+    return h(content as string | ComponentFn, (attachProps ?? {}) as Props)
+  }
+
+  // VNode object — return directly
+  if (typeof content === "object") {
+    return content as VNodeChild
+  }
+
+  return content as VNodeChild
+}
+
+export default render

package/src/types.ts

@@ -0,0 +1,5 @@
+export interface Breakpoints {
+  [key: string]: number
+}
+
+export type BreakpointKeys = keyof Breakpoints

package/src/useStableValue.ts

@@ -0,0 +1,21 @@
+import { signal } from "@pyreon/reactivity"
+import isEqual from "./isEqual"
+
+/**
+ * Returns a referentially stable version of `value`. The returned reference
+ * only changes when the value is no longer deeply equal to the previous one.
+ *
+ * Pyreon equivalent of the React useStableValue hook — uses a signal
+ * internally to hold the stable reference.
+ */
+const useStableValue = <T>(value: T): T => {
+  const ref = signal(value)
+
+  if (!isEqual(ref.peek(), value)) {
+    ref.set(value)
+  }
+
+  return ref.peek()
+}
+
+export default useStableValue

package/src/utils.ts

@@ -0,0 +1,157 @@
+export const omit = <T extends Record<string, any>>(
+  obj: T | null | undefined,
+  keys?: readonly (string | keyof T)[],
+): Partial<T> => {
+  if (obj == null) return {} as Partial<T>
+  if (!keys || keys.length === 0) return { ...obj }
+  const result: Record<string, any> = {}
+  const keysSet = new Set(keys as readonly string[])
+  for (const key in obj) {
+    if (Object.hasOwn(obj, key) && !keysSet.has(key)) {
+      result[key] = obj[key]
+    }
+  }
+  return result as Partial<T>
+}
+
+export const pick = <T extends Record<string, any>>(
+  obj: T | null | undefined,
+  keys?: readonly (string | keyof T)[],
+): Partial<T> => {
+  if (obj == null) return {} as Partial<T>
+  if (!keys || keys.length === 0) return { ...obj }
+  const result: Record<string, any> = {}
+  for (const key of keys) {
+    const k = key as string
+    if (Object.hasOwn(obj, k)) {
+      result[k] = obj[k]
+    }
+  }
+  return result as Partial<T>
+}
+
+const PATH_RE = /[^.[\]]+/g
+
+const parsePath = (path: string | string[]): string[] => {
+  if (Array.isArray(path)) return path
+  const parts = path.match(PATH_RE)
+  return parts ?? []
+}
+
+const isUnsafeKey = (key: string): boolean =>
+  key === "__proto__" || key === "prototype" || key === "constructor"
+
+export const get = (obj: any, path: string | string[], defaultValue?: any): any => {
+  const keys = parsePath(path)
+  let result = obj
+  for (const key of keys) {
+    if (result == null || isUnsafeKey(key)) return defaultValue
+    result = result[key]
+  }
+  return result === undefined ? defaultValue : result
+}
+
+export const set = (
+  obj: Record<string, any>,
+  path: string | string[],
+  value: any,
+): Record<string, any> => {
+  const keys = parsePath(path)
+  let current = obj
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i] as string
+    if (isUnsafeKey(key)) return obj
+    const nextKey = keys[i + 1] as string
+    if (isUnsafeKey(nextKey)) return obj
+    if (current[key] == null) {
+      current[key] = /^\d+$/.test(nextKey) ? [] : {}
+    }
+    current = current[key]
+  }
+  const lastKey = keys[keys.length - 1]
+  if (lastKey != null && !isUnsafeKey(lastKey)) {
+    current[lastKey] = value
+  }
+  return obj
+}
+
+export const throttle = <T extends (...args: any[]) => any>(
+  fn: T,
+  wait: number = 0,
+  options?: { leading?: boolean; trailing?: boolean },
+): T & { cancel: () => void } => {
+  const leading = options?.leading !== false
+  const trailing = options?.trailing !== false
+  let lastCallTime: number | undefined
+  let timeoutId: ReturnType<typeof setTimeout> | undefined
+  let lastArgs: any[] | undefined
+
+  const invoke = (args: any[]) => {
+    lastCallTime = Date.now()
+    fn(...args)
+  }
+
+  const startTrailingTimer = (args: any[], delay: number) => {
+    lastArgs = args
+    if (timeoutId !== undefined) return
+    timeoutId = setTimeout(() => {
+      timeoutId = undefined
+      if (lastArgs) {
+        invoke(lastArgs)
+        lastArgs = undefined
+      }
+    }, delay)
+  }
+
+  const throttled = (...args: any[]) => {
+    const now = Date.now()
+    const elapsed = lastCallTime === undefined ? wait : now - lastCallTime
+    if (elapsed >= wait) {
+      if (leading) {
+        invoke(args)
+      } else {
+        lastCallTime = now
+        if (trailing) startTrailingTimer(args, wait)
+      }
+    } else if (trailing) {
+      startTrailingTimer(args, wait - elapsed)
+    }
+  }
+
+  throttled.cancel = () => {
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId)
+      timeoutId = undefined
+    }
+    lastArgs = undefined
+    lastCallTime = undefined
+  }
+
+  return throttled as T & { cancel: () => void }
+}
+
+const isPlainObject = (value: unknown): value is Record<string, any> =>
+  value !== null &&
+  typeof value === "object" &&
+  !Array.isArray(value) &&
+  Object.getPrototypeOf(value) === Object.prototype
+
+export const merge = <T extends Record<string, any>>(
+  target: T,
+  ...sources: Record<string, any>[]
+): T => {
+  for (const source of sources) {
+    if (source == null) continue
+    for (const key of Object.keys(source)) {
+      if (key === "__proto__" || key === "constructor" || key === "prototype") continue
+      const targetVal = (target as Record<string, unknown>)[key]
+      const sourceVal = source[key]
+      if (isPlainObject(targetVal) && isPlainObject(sourceVal)) {
+        ;(target as Record<string, unknown>)[key] = merge({ ...targetVal }, sourceVal)
+      } else {
+        ;(target as Record<string, unknown>)[key] = sourceVal
+      }
+    }
+  }
+  return target
+}