npm - @vanijs/vani - Versions diffs - 0.1.0 → 0.2.0 - Mend

@vanijs/vani 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/lib/index.d.mts CHANGED Viewed

@@ -81,18 +81,24 @@ type ComponentMetaProps = {
 };
 type VChild = VNode | ComponentInstance<any> | string | number | null | undefined | false;
 type DataAttribute = `data-${string}`;
-type HtmlProps<T extends keyof HTMLElementTagNameMap> = Partial<Omit<HTMLElementTagNameMap[T], 'children' | 'className' | 'style'>> & {
+type ElementTagName = keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap;
+type ElementByTag<T extends ElementTagName> = T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : T extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[T] : Element;
+type SvgProps = {
+  [key: string]: string | number | boolean | undefined | null | ((...args: any[]) => any);
+};
+type BaseProps<T extends ElementTagName> = {
   className?: ClassName;
   style?: string;
-  ref?: DomRef<HTMLElementTagNameMap[T]>;
+  ref?: DomRef<ElementByTag<T>>;
 } & { [key in DataAttribute]?: string | number | boolean | undefined | null };
+type HtmlProps<T extends ElementTagName> = T extends keyof SVGElementTagNameMap ? BaseProps<T> & SvgProps : BaseProps<T> & Partial<Omit<ElementByTag<T>, 'children' | 'className' | 'style'>>;
 type ClassName = string | undefined | null | {
   [key: string]: boolean | undefined | null;
 } | ClassName[];
 type ComponentRef = {
   current: Handle | null;
 };
-type DomRef<T extends HTMLElement = HTMLElement> = {
+type DomRef<T extends Element = Element> = {
   current: T | null;
 };
 type RenderMode = 'dom' | 'ssr';
@@ -103,7 +109,7 @@ declare function getRenderMode(): RenderMode;
 declare function renderToDOM(components: Array<Component<any> | ComponentInstance<any>>, root: HTMLElement): Handle[];
 declare function isComponentInstance(child: VChild): child is ComponentInstance<any>;
 declare function classNames(...classes: ClassName[]): string;
-declare function el<E extends keyof HTMLElementTagNameMap>(tag: E, props?: HtmlProps<E> | VChild | null, ...children: VChild[]): VNode;
+declare function el<E extends keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap>(tag: E, props?: HtmlProps<E> | VChild | null, ...children: VChild[]): VNode;
 declare const fragment: (...children: VChild[]) => {
   type: "fragment";
   children: SSRNode[];
@@ -153,88 +159,689 @@ declare function hydrateToDOM(components: Array<Component<any> | ComponentInstan
 declare function isDevMode(): boolean;
 //#endregion
 //#region src/vani/html.d.ts
-declare const div: (propsOrChild?: VChild | HtmlProps<"div">, ...children: VChild[]) => VNode;
-declare const span: (propsOrChild?: VChild | HtmlProps<"span">, ...children: VChild[]) => VNode;
-declare const ul: (propsOrChild?: VChild | HtmlProps<"ul">, ...children: VChild[]) => VNode;
-declare const li: (propsOrChild?: VChild | HtmlProps<"li">, ...children: VChild[]) => VNode;
-declare const ol: (propsOrChild?: VChild | HtmlProps<"ol">, ...children: VChild[]) => VNode;
-declare const dl: (propsOrChild?: VChild | HtmlProps<"dl">, ...children: VChild[]) => VNode;
-declare const dt: (propsOrChild?: VChild | HtmlProps<"dt">, ...children: VChild[]) => VNode;
-declare const dd: (propsOrChild?: VChild | HtmlProps<"dd">, ...children: VChild[]) => VNode;
-declare const main: (propsOrChild?: VChild | HtmlProps<"main">, ...children: VChild[]) => VNode;
-declare const header: (propsOrChild?: VChild | HtmlProps<"header">, ...children: VChild[]) => VNode;
-declare const footer: (propsOrChild?: VChild | HtmlProps<"footer">, ...children: VChild[]) => VNode;
-declare const section: (propsOrChild?: VChild | HtmlProps<"section">, ...children: VChild[]) => VNode;
-declare const article: (propsOrChild?: VChild | HtmlProps<"article">, ...children: VChild[]) => VNode;
-declare const aside: (propsOrChild?: VChild | HtmlProps<"aside">, ...children: VChild[]) => VNode;
-declare const nav: (propsOrChild?: VChild | HtmlProps<"nav">, ...children: VChild[]) => VNode;
-declare const details: (propsOrChild?: VChild | HtmlProps<"details">, ...children: VChild[]) => VNode;
-declare const summary: (propsOrChild?: VChild | HtmlProps<"summary">, ...children: VChild[]) => VNode;
-declare const a: (propsOrChild?: VChild | HtmlProps<"a">, ...children: VChild[]) => VNode;
-declare const button: (propsOrChild?: VChild | HtmlProps<"button">, ...children: VChild[]) => VNode;
-declare const input: (propsOrChild?: VChild | HtmlProps<"input">, ...children: VChild[]) => VNode;
-declare const output: (propsOrChild?: VChild | HtmlProps<"output">, ...children: VChild[]) => VNode;
-declare const textarea: (propsOrChild?: VChild | HtmlProps<"textarea">, ...children: VChild[]) => VNode;
-declare const select: (propsOrChild?: VChild | HtmlProps<"select">, ...children: VChild[]) => VNode;
-declare const option: (propsOrChild?: VChild | HtmlProps<"option">, ...children: VChild[]) => VNode;
-declare const optgroup: (propsOrChild?: VChild | HtmlProps<"optgroup">, ...children: VChild[]) => VNode;
-declare const label: (propsOrChild?: VChild | HtmlProps<"label">, ...children: VChild[]) => VNode;
-declare const form: (propsOrChild?: VChild | HtmlProps<"form">, ...children: VChild[]) => VNode;
-declare const progress: (propsOrChild?: VChild | HtmlProps<"progress">, ...children: VChild[]) => VNode;
-declare const meter: (propsOrChild?: VChild | HtmlProps<"meter">, ...children: VChild[]) => VNode;
-declare const fieldset: (propsOrChild?: VChild | HtmlProps<"fieldset">, ...children: VChild[]) => VNode;
-declare const legend: (propsOrChild?: VChild | HtmlProps<"legend">, ...children: VChild[]) => VNode;
-declare const datalist: (propsOrChild?: VChild | HtmlProps<"datalist">, ...children: VChild[]) => VNode;
-declare const figure: (propsOrChild?: VChild | HtmlProps<"figure">, ...children: VChild[]) => VNode;
-declare const figcaption: (propsOrChild?: VChild | HtmlProps<"figcaption">, ...children: VChild[]) => VNode;
-declare const img: (propsOrChild?: VChild | HtmlProps<"img">, ...children: VChild[]) => VNode;
-declare const picture: (propsOrChild?: VChild | HtmlProps<"picture">, ...children: VChild[]) => VNode;
-declare const source: (propsOrChild?: VChild | HtmlProps<"source">, ...children: VChild[]) => VNode;
-declare const video: (propsOrChild?: VChild | HtmlProps<"video">, ...children: VChild[]) => VNode;
-declare const audio: (propsOrChild?: VChild | HtmlProps<"audio">, ...children: VChild[]) => VNode;
-declare const iframe: (propsOrChild?: VChild | HtmlProps<"iframe">, ...children: VChild[]) => VNode;
-declare const embed: (propsOrChild?: VChild | HtmlProps<"embed">, ...children: VChild[]) => VNode;
-declare const time: (propsOrChild?: VChild | HtmlProps<"time">, ...children: VChild[]) => VNode;
-declare const mark: (propsOrChild?: VChild | HtmlProps<"mark">, ...children: VChild[]) => VNode;
-declare const p: (propsOrChild?: VChild | HtmlProps<"p">, ...children: VChild[]) => VNode;
-declare const h1: (propsOrChild?: VChild | HtmlProps<"h1">, ...children: VChild[]) => VNode;
-declare const h2: (propsOrChild?: VChild | HtmlProps<"h2">, ...children: VChild[]) => VNode;
-declare const h3: (propsOrChild?: VChild | HtmlProps<"h3">, ...children: VChild[]) => VNode;
-declare const h4: (propsOrChild?: VChild | HtmlProps<"h4">, ...children: VChild[]) => VNode;
-declare const h5: (propsOrChild?: VChild | HtmlProps<"h5">, ...children: VChild[]) => VNode;
-declare const h6: (propsOrChild?: VChild | HtmlProps<"h6">, ...children: VChild[]) => VNode;
-declare const code: (propsOrChild?: VChild | HtmlProps<"code">, ...children: VChild[]) => VNode;
-declare const pre: (propsOrChild?: VChild | HtmlProps<"pre">, ...children: VChild[]) => VNode;
-declare const blockquote: (propsOrChild?: VChild | HtmlProps<"blockquote">, ...children: VChild[]) => VNode;
-declare const var_: (propsOrChild?: VChild | HtmlProps<"var">, ...children: VChild[]) => VNode;
-declare const kbd: (propsOrChild?: VChild | HtmlProps<"kbd">, ...children: VChild[]) => VNode;
-declare const samp: (propsOrChild?: VChild | HtmlProps<"samp">, ...children: VChild[]) => VNode;
-declare const cite: (propsOrChild?: VChild | HtmlProps<"cite">, ...children: VChild[]) => VNode;
-declare const dfn: (propsOrChild?: VChild | HtmlProps<"dfn">, ...children: VChild[]) => VNode;
-declare const abbr: (propsOrChild?: VChild | HtmlProps<"abbr">, ...children: VChild[]) => VNode;
-declare const small: (propsOrChild?: VChild | HtmlProps<"small">, ...children: VChild[]) => VNode;
-declare const strong: (propsOrChild?: VChild | HtmlProps<"strong">, ...children: VChild[]) => VNode;
-declare const em: (propsOrChild?: VChild | HtmlProps<"em">, ...children: VChild[]) => VNode;
-declare const br: (propsOrChild?: VChild | HtmlProps<"br">, ...children: VChild[]) => VNode;
-declare const hr: (propsOrChild?: VChild | HtmlProps<"hr">, ...children: VChild[]) => VNode;
-declare const table: (propsOrChild?: VChild | HtmlProps<"table">, ...children: VChild[]) => VNode;
-declare const caption: (propsOrChild?: VChild | HtmlProps<"caption">, ...children: VChild[]) => VNode;
-declare const colgroup: (propsOrChild?: VChild | HtmlProps<"colgroup">, ...children: VChild[]) => VNode;
-declare const col: (propsOrChild?: VChild | HtmlProps<"col">, ...children: VChild[]) => VNode;
-declare const tbody: (propsOrChild?: VChild | HtmlProps<"tbody">, ...children: VChild[]) => VNode;
-declare const thead: (propsOrChild?: VChild | HtmlProps<"thead">, ...children: VChild[]) => VNode;
-declare const tfoot: (propsOrChild?: VChild | HtmlProps<"tfoot">, ...children: VChild[]) => VNode;
-declare const tr: (propsOrChild?: VChild | HtmlProps<"tr">, ...children: VChild[]) => VNode;
-declare const td: (propsOrChild?: VChild | HtmlProps<"td">, ...children: VChild[]) => VNode;
-declare const th: (propsOrChild?: VChild | HtmlProps<"th">, ...children: VChild[]) => VNode;
-declare const style: (propsOrChild?: VChild | HtmlProps<"style">, ...children: VChild[]) => VNode;
-declare const script: (propsOrChild?: VChild | HtmlProps<"script">, ...children: VChild[]) => VNode;
-declare const noscript: (propsOrChild?: VChild | HtmlProps<"noscript">, ...children: VChild[]) => VNode;
-declare const template: (propsOrChild?: VChild | HtmlProps<"template">, ...children: VChild[]) => VNode;
-declare const slot: (propsOrChild?: VChild | HtmlProps<"slot">, ...children: VChild[]) => VNode;
+declare const div: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLDivElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLDivElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const span: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLSpanElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLSpanElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const ul: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLUListElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLUListElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const li: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLLIElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLLIElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const ol: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLOListElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLOListElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const dl: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLDListElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLDListElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const dt: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const dd: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const main: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const header: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const footer: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const section: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const article: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const aside: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const nav: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const details: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLDetailsElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLDetailsElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const summary: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const a: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLAnchorElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const button: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLButtonElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLButtonElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const input: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLInputElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLInputElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const output: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLOutputElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLOutputElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const textarea: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLTextAreaElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLTextAreaElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const select: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLSelectElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLSelectElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const option: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLOptionElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLOptionElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const optgroup: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLOptGroupElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLOptGroupElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const label: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLLabelElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLLabelElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const form: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLFormElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLFormElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const progress: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLProgressElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLProgressElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const meter: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLMeterElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLMeterElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const fieldset: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLFieldSetElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLFieldSetElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const legend: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLLegendElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLLegendElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const datalist: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLDataListElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLDataListElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const figure: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const figcaption: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const img: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLImageElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLImageElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const picture: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLPictureElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLPictureElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const source: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLSourceElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLSourceElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const video: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLVideoElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLVideoElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const audio: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLAudioElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLAudioElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const iframe: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLIFrameElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLIFrameElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const embed: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLEmbedElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLEmbedElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const time: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLTimeElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLTimeElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const mark: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const p: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLParagraphElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLParagraphElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const h1: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLHeadingElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLHeadingElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const h2: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLHeadingElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLHeadingElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const h3: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLHeadingElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLHeadingElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const h4: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLHeadingElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLHeadingElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const h5: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLHeadingElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLHeadingElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const h6: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLHeadingElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLHeadingElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const code: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const pre: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLPreElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLPreElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const blockquote: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLQuoteElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLQuoteElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const var_: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const kbd: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const samp: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const cite: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const dfn: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const abbr: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const small: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const strong: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const em: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const br: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLBRElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLBRElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const hr: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLHRElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLHRElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const table: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLTableElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLTableElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const caption: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLTableCaptionElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLTableCaptionElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const colgroup: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLTableColElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLTableColElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const col: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLTableColElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLTableColElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const tbody: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLTableSectionElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLTableSectionElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const thead: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLTableSectionElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLTableSectionElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const tfoot: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLTableSectionElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLTableSectionElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const tr: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLTableRowElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLTableRowElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const td: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLTableCellElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLTableCellElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const th: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLTableCellElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLTableCellElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const style: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLStyleElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const script: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLScriptElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const noscript: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const template: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLTemplateElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLTemplateElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const slot: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<HTMLSlotElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & Partial<Omit<HTMLSlotElement, "style" | "children" | "className">>), ...children: VChild[]) => VNode;
+declare const svg: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGSVGElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const g: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGGElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const path: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGPathElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const circle: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGCircleElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const rect: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGRectElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const line: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGLineElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const polyline: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGPolylineElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const polygon: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGPolygonElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const ellipse: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGEllipseElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const defs: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGDefsElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const clipPath: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGClipPathElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const mask: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGMaskElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const pattern: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGPatternElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const linearGradient: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGLinearGradientElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const radialGradient: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGRadialGradientElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const stop: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGStopElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
+declare const use: (propsOrChild?: VChild | ({
+  className?: ClassName;
+  style?: string;
+  ref?: DomRef<SVGUseElement> | undefined;
+} & {
+  [x: `data-${string}`]: string | number | boolean | null | undefined;
+} & SvgProps), ...children: VChild[]) => VNode;
 //#endregion
 //#region src/vani/ssr.d.ts
 type Renderable = Component<any> | ComponentInstance<any>;
 declare function renderToString(components: Renderable[]): Promise<string>;
 //#endregion
-export { ClassName, Component, ComponentInput, ComponentInstance, ComponentRef, DataAttribute, DomRef, Handle, HtmlProps, RenderFn, SSRNode, VChild, VNode, a, abbr, article, aside, audio, blockquote, br, button, caption, cite, classNames, code, col, colgroup, component, datalist, dd, details, dfn, div, dl, dt, el, em, embed, fieldset, figcaption, figure, footer, form, fragment, getRenderMode, h1, h2, h3, h4, h5, h6, header, hr, hydrateToDOM, iframe, img, input, isComponentInstance, isDevMode, kbd, label, legend, li, main, mark, meter, mount, nav, noscript, ol, optgroup, option, output, p, picture, pre, progress, renderToDOM, renderToString, samp, script, section, select, slot, small, source, span, startTransition, strong, style, summary, table, tbody, td, template, textarea, tfoot, th, thead, time, tr, ul, var_, video, withRenderMode };
+//#region src/vani/svg.d.ts
+type SvgRenderOptions = {
+  size?: number;
+  className?: string;
+  attributes?: SvgProps;
+};
+declare const renderSvgString: (svg: string, options?: SvgRenderOptions) => VNode;
+//#endregion
+export { ClassName, Component, ComponentInput, ComponentInstance, ComponentRef, DataAttribute, DomRef, Handle, HtmlProps, RenderFn, SSRNode, SvgProps, SvgRenderOptions, VChild, VNode, a, abbr, article, aside, audio, blockquote, br, button, caption, circle, cite, classNames, clipPath, code, col, colgroup, component, datalist, dd, defs, details, dfn, div, dl, dt, el, ellipse, em, embed, fieldset, figcaption, figure, footer, form, fragment, g, getRenderMode, h1, h2, h3, h4, h5, h6, header, hr, hydrateToDOM, iframe, img, input, isComponentInstance, isDevMode, kbd, label, legend, li, line, linearGradient, main, mark, mask, meter, mount, nav, noscript, ol, optgroup, option, output, p, path, pattern, picture, polygon, polyline, pre, progress, radialGradient, rect, renderSvgString, renderToDOM, renderToString, samp, script, section, select, slot, small, source, span, startTransition, stop, strong, style, summary, svg, table, tbody, td, template, textarea, tfoot, th, thead, time, tr, ul, use, var_, video, withRenderMode };