@papack/csr 0.0.2 → 1.0.0

package/dist/index.d.cts

@@ -1,174 +1,880 @@
-//#region core/destroy.d.ts
-declare function destroy(root: Element): Promise<void>;
-//#endregion
 //#region core/signal.d.ts
 type UUID = string;
-type ReadFn<T> = ((cb?: (value: unknown) => Promise<void>) => Promise<T>) & {
+type ReadFn<T> = ((cb?: (value: T) => void) => T) & {
   type: "signal";
 };
-declare function signal<T>(value: T): readonly [ReadFn<T>, (cb: (prev: T) => Promise<T> | T) => Promise<void>];
+declare function signal<T>(initialValue: T): readonly [ReadFn<T>, (fn: (prev: T) => T | Promise<T>) => Promise<void>];
 interface ConnectorInterface {
-  update: (uuid: UUID, value: unknown) => void;
-  addTopic: (uuid: UUID) => void;
-  removeTopic: (uuid: UUID) => void;
-  registerClbk: (uuid: UUID, cb: (value: unknown) => void) => void;
-  removeClbk: (uuid: UUID, cb: (value: unknown) => void) => void;
-  getUuidByClbk: (cb: (value: unknown) => void) => UUID;
+  addTopic(uuid: UUID): void;
+  removeTopic(uuid: UUID): void;
+  registerClbk<T>(uuid: UUID, cb: (value: T) => void): void;
+  removeClbk<T>(uuid: UUID, cb: (value: T) => void): void;
+  update<T>(uuid: UUID, value: T): void;
+  getUuidByClbk<T>(cb: (value: T) => void): UUID;
 }
 declare class Connector implements ConnectorInterface {
-  private topic;
-  private clbkMapping;
+  private topics;
+  private callbackMap;
   addTopic(uuid: UUID): void;
   removeTopic(uuid: UUID): void;
-  registerClbk<T>(uuid: string, cb: (value: T) => void): void;
+  registerClbk<T>(uuid: UUID, cb: (value: T) => void): void;
   removeClbk<T>(uuid: UUID, cb: (value: T) => void): void;
   update<T>(uuid: UUID, value: T): void;
-  getUuidByClbk(fn: (value: unknown) => void): string;
+  getUuidByClbk<T>(cb: (value: T) => void): UUID;
 }
 declare const connector: Connector;
 //#endregion
 //#region core/effect.d.ts
-declare function effect<T>(readFn: ReadFn<T>, fn: (value: T) => Promise<unknown> | unknown): Promise<void>;
+declare function effect<T>(readFn: ReadFn<T>, fn: (value: T) => void | Promise<void>): void;
+//#endregion
+//#region core/for.d.ts
+type Uuid = string;
+interface Keyed {
+  uuid: Uuid;
+}
+interface ForProps<T extends Keyed> {
+  each: ReadFn<T[]>;
+}
+declare function For<T extends Keyed>(p: ForProps<T>, [child]: any): null;
 //#endregion
 //#region core/fragment.d.ts
 declare function fragment(p: null, ...childs: any): any;
 //#endregion
+//#region core/jsx.d.ts
+type JsxNode = VElement | VText | VSignal;
+interface VElement {
+  kind: "element";
+  tag: string | ComponentFn;
+  props: Record<string, any>;
+  children: JsxNode[];
+}
+interface VText {
+  kind: "text";
+  value: string;
+}
+interface VSignal {
+  kind: "signal";
+  read: ReadFn<any>;
+}
+interface PropsInterface {
+  ctx?: any;
+}
+type ComponentFn = (props: PropsInterface, children: JsxNode[]) => JsxNode | null;
+declare function jsx(tag: string | ComponentFn, props: any, ...rawChildren: any[]): VElement;
+//#endregion
+//#region core/lifecycle.d.ts
+type MountCallback = (el: Element) => void | Promise<void>;
+type UnmountCallback = () => void | Promise<void>;
+declare function hasActiveMountSession(): boolean;
+declare function beginMountSession(): void;
+declare function endMountSession(root: Element): void;
+declare function mount(cb: MountCallback): void;
+declare function unmount(cb: UnmountCallback): void;
+declare function runUnmountsForElement(el: Element): void;
+//#endregion
 //#region core/render.d.ts
 interface RenderCtx {
   parent: Node & ParentNode;
+  self?: Node;
   [k: string]: any;
 }
 interface RenderResult {
   el: Node;
 }
-declare function render(node: JsxChild | Promise<JsxChild> | null | Promise<null>, ctx: RenderCtx): Promise<RenderResult>;
+declare function render(node: JsxNode | null, ctx: RenderCtx): RenderResult;
+//#endregion
+//#region core/show.d.ts
+interface ShowPropsInterface {
+  when: ReadFn<boolean>;
+}
+declare function Show(p: ShowPropsInterface, children: any): null;
+//#endregion
+//#region helper/repeat.d.ts
+type MaybeSignal$1<T> = T | ReadFn<T>;
+interface RepeatPropsInterface {
+  n: MaybeSignal$1<number>;
+}
+declare function Repeat(p: RepeatPropsInterface, children: any[]): any;
+//#endregion
+//#region style/breakpoint.d.ts
+declare const breakpoint: {
+  mobile: number;
+  tablet: number;
+  laptop: number;
+  desktop: number;
+  large: number;
+};
+//#endregion
+//#region hooks/use-breakpoint.d.ts
+type BreakpointName = keyof typeof breakpoint;
+declare function useBreakpoint(): ReadFn<BreakpointName>;
+//#endregion
+//#region hooks/use-custom-event.d.ts
+type Handler<T> = (data: T) => void;
+/**
+ * Creates a custom browser event emitter.
+ * If a handler is provided, it is automatically
+ * cleaned up on component unmount.
+ */
+declare function useCustomEvent<T = any>(topic: string, handler?: Handler<T>): (data: T) => void;
+//#endregion
+//#region hooks/use-locale.d.ts
+interface LocaleController {
+  locale: ReadFn<string>;
+  setLocale: (next: string) => void;
+}
+declare function useLocale(): LocaleController;
+//#endregion
+//#region dist/index.d.mts
+type ReadFn$1<T$1> = ((cb?: (value: T$1) => void) => T$1) & {
+  type: "signal";
+};
 //#endregion
 //#region core/jsx.d.ts
-type EventHandler<E extends Event = Event> = (event: E) => void;
-interface DOMEvents {
-  onClick?: EventHandler<MouseEvent>;
-  onDblClick?: EventHandler<MouseEvent>;
-  onMouseDown?: EventHandler<MouseEvent>;
-  onMouseUp?: EventHandler<MouseEvent>;
-  onMouseMove?: EventHandler<MouseEvent>;
-  onMouseEnter?: EventHandler<MouseEvent>;
-  onMouseLeave?: EventHandler<MouseEvent>;
-  onKeyDown?: EventHandler<KeyboardEvent>;
-  onKeyUp?: EventHandler<KeyboardEvent>;
-  onInput?: EventHandler<InputEvent>;
-  onChange?: EventHandler<Event>;
-  onFocus?: EventHandler<FocusEvent>;
-  onBlur?: EventHandler<FocusEvent>;
-}
-interface StyleProps {
-  [key: string]: string | number | ReadFn<string | number>;
+type JsxNode$1 = VElement$1 | VText$1 | VSignal$1;
+interface VElement$1 {
+  kind: "element";
+  tag: string | ComponentFn$1;
+  props: Record<string, any>;
+  children: JsxNode$1[];
+}
+interface VText$1 {
+  kind: "text";
+  value: string;
 }
+interface VSignal$1 {
+  kind: "signal";
+  read: ReadFn$1<any>;
+}
+interface PropsInterface$1 {
+  ctx?: any;
+}
+type ComponentFn$1 = (props: PropsInterface$1, children: JsxNode$1[]) => JsxNode$1 | null;
+//#endregion
+//#region hooks/use-router.d.ts
+type Route = string;
+declare function useRouter(): {
+  route: ReadFn$1<string>;
+  navigate: (to: Route) => void;
+};
+//#endregion
+//#region core/dom.d.ts
+type CSSValue = string | number;
 type MaybeSignal<T> = T | ReadFn<T>;
-interface HTMLAttributes extends DOMEvents {
+interface DOMEvents {
+  onClick?: (e: MouseEvent) => void;
+  onDblClick?: (e: MouseEvent) => void;
+  onMouseDown?: (e: MouseEvent) => void;
+  onMouseUp?: (e: MouseEvent) => void;
+  onMouseMove?: (e: MouseEvent) => void;
+  onMouseEnter?: (e: MouseEvent) => void;
+  onMouseLeave?: (e: MouseEvent) => void;
+  onMouseOver?: (e: MouseEvent) => void;
+  onMouseOut?: (e: MouseEvent) => void;
+  onPointerDown?: (e: PointerEvent) => void;
+  onPointerUp?: (e: PointerEvent) => void;
+  onPointerMove?: (e: PointerEvent) => void;
+  onPointerEnter?: (e: PointerEvent) => void;
+  onPointerLeave?: (e: PointerEvent) => void;
+  onPointerOver?: (e: PointerEvent) => void;
+  onPointerOut?: (e: PointerEvent) => void;
+  onKeyDown?: (e: KeyboardEvent) => void;
+  onKeyUp?: (e: KeyboardEvent) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+  onInput?: (e: InputEvent) => void;
+  onChange?: (e: Event) => void;
+  onSubmit?: (e: SubmitEvent) => void;
+  onDragStart?: (e: DragEvent) => void;
+  onDragEnd?: (e: DragEvent) => void;
+  onDragOver?: (e: DragEvent) => void;
+  onDrop?: (e: DragEvent) => void;
+}
+interface DOMAttrs {
   id?: string;
   class?: string;
   className?: string;
   title?: string;
-  style?: StyleProps;
-  value?: MaybeSignal<string | number>;
-  checked?: MaybeSignal<boolean>;
-  disabled?: MaybeSignal<boolean>;
-  children?: any;
+  role?: string;
+  tabIndex?: number;
+  [key: string]: any;
 }
-interface SVGAttributes extends DOMEvents {
-  id?: string;
-  class?: string;
-  style?: StyleProps;
-  viewBox?: MaybeSignal<string>;
-  fill?: MaybeSignal<string>;
-  stroke?: MaybeSignal<string>;
-  strokeWidth?: MaybeSignal<number>;
-  d?: MaybeSignal<string>;
-  cx?: MaybeSignal<string | number>;
-  cy?: MaybeSignal<string | number>;
-  r?: MaybeSignal<string | number>;
-  x?: MaybeSignal<string | number>;
-  y?: MaybeSignal<string | number>;
-  width?: MaybeSignal<string | number>;
-  height?: MaybeSignal<string | number>;
+//#endregion
+//#region layout/box.d.ts
+interface BoxProps extends DOMEvents, DOMAttrs {
+  /**
+   * Child nodes rendered inside the box
+   */
   children?: any;
+  /** Margin (all sides) */
+  m?: MaybeSignal<CSSValue>;
+  /** Margin-bottom */
+  mb?: MaybeSignal<CSSValue>;
+  /** Margin-left */
+  ml?: MaybeSignal<CSSValue>;
+  /** Margin-right */
+  mr?: MaybeSignal<CSSValue>;
+  /** Margin-top */
+  mt?: MaybeSignal<CSSValue>;
+  /** Margin horizontal (left + right) */
+  mx?: MaybeSignal<CSSValue>;
+  /** Margin vertical (top + bottom) */
+  my?: MaybeSignal<CSSValue>;
+  /** Padding (all sides) */
+  p?: MaybeSignal<CSSValue>;
+  /** Padding-bottom */
+  pb?: MaybeSignal<CSSValue>;
+  /** Padding-left */
+  pl?: MaybeSignal<CSSValue>;
+  /** Padding-right */
+  pr?: MaybeSignal<CSSValue>;
+  /** Padding-top */
+  pt?: MaybeSignal<CSSValue>;
+  /** Padding horizontal (left + right) */
+  px?: MaybeSignal<CSSValue>;
+  /** Padding vertical (top + bottom) */
+  py?: MaybeSignal<CSSValue>;
+  /** Border (all sides) */
+  b?: MaybeSignal<CSSValue>;
+  /** Border-top */
+  bt?: MaybeSignal<CSSValue>;
+  /** Border-right */
+  br?: MaybeSignal<CSSValue>;
+  /** Border-bottom */
+  bb?: MaybeSignal<CSSValue>;
+  /** Border-left */
+  bl?: MaybeSignal<CSSValue>;
+  /** Border horizontal (left + right) */
+  bx?: MaybeSignal<CSSValue>;
+  /** Border vertical (top + bottom) */
+  by?: MaybeSignal<CSSValue>;
+  /** Border radius (all corners) */
+  r?: MaybeSignal<CSSValue>;
+  /** Border-top radius */
+  rt?: MaybeSignal<CSSValue>;
+  /** Border-right radius */
+  rr?: MaybeSignal<CSSValue>;
+  /** Border-bottom radius */
+  rb?: MaybeSignal<CSSValue>;
+  /** Border-left radius */
+  rl?: MaybeSignal<CSSValue>;
+  /** Border-top-right radius */
+  rtr?: MaybeSignal<CSSValue>;
+  /** Border-top-left radius */
+  rtl?: MaybeSignal<CSSValue>;
+  /** Border-bottom-right radius */
+  rbr?: MaybeSignal<CSSValue>;
+  /** Border-bottom-left radius */
+  rbl?: MaybeSignal<CSSValue>;
+  /** Size shortcut (width + height) */
+  s?: MaybeSignal<CSSValue>;
+  /** Height */
+  h?: MaybeSignal<CSSValue>;
+  /** Width */
+  w?: MaybeSignal<CSSValue>;
+  /** Max height */
+  maxH?: MaybeSignal<CSSValue>;
+  /** Max width */
+  maxW?: MaybeSignal<CSSValue>;
+  /** Min height */
+  minH?: MaybeSignal<CSSValue>;
+  /** Min width */
+  minW?: MaybeSignal<CSSValue>;
+  /** Opacity (0–1) */
+  o?: MaybeSignal<CSSValue>;
+  /** Box shadow */
+  sh?: MaybeSignal<CSSValue>;
+  /** Background */
+  bg?: MaybeSignal<CSSValue>;
+  /**
+   * Additional inline styles (merged last)
+   * Values support signals
+   */
+  style?: Record<string, MaybeSignal<CSSValue> | undefined>;
 }
-declare global {
-  namespace JSX {
-    type Element = JsxNode | Promise<JsxNode> | null | Promise<null>;
-    interface ElementType {
-      (props: any, ...children: any[]): any;
-    }
-    interface IntrinsicElements {
-      div: HTMLAttributes;
-      li: HTMLAttributes;
-      ul: HTMLAttributes;
-      h1: HTMLAttributes;
-      h2: HTMLAttributes;
-      h3: HTMLAttributes;
-      h4: HTMLAttributes;
-      h5: HTMLAttributes;
-      h6: HTMLAttributes;
-      span: HTMLAttributes;
-      p: HTMLAttributes;
-      button: HTMLAttributes;
-      input: HTMLAttributes & {
-        type?: string;
-        placeholder?: string;
-      };
-      textarea: HTMLAttributes;
-      form: HTMLAttributes;
-      label: HTMLAttributes;
-      svg: SVGAttributes;
-      path: SVGAttributes;
-      circle: SVGAttributes;
-      rect: SVGAttributes;
-      g: SVGAttributes;
-      line: SVGAttributes;
-      polyline: SVGAttributes;
-      polygon: SVGAttributes;
-      text: SVGAttributes;
-      tspan: SVGAttributes;
-    }
-  }
-}
-type JsxChild = JsxNode | JsxText | JsxSignal;
-interface JsxText {
-  kind: "text";
-  value: string;
+declare function Box(p: BoxProps, children: any[]): any;
+//#endregion
+//#region layout/absolute.d.ts
+/**
+ * Absolute positioned component
+ * Positions element absolutely within the nearest positioned ancestor
+ */
+interface AbsolutePropertiesInterface extends BoxProps {
+  /**
+   * Distance from top edge of containing block
+   * (e.g. "10px", "1rem", "5%")
+   */
+  top?: string;
+  /**
+   * Distance from right edge of containing block
+   * (e.g. "10px", "1rem", "5%")
+   */
+  right?: string;
+  /**
+   * Distance from bottom edge of containing block
+   * (e.g. "10px", "1rem", "5%")
+   */
+  bottom?: string;
+  /**
+   * Distance from left edge of containing block
+   * (e.g. "10px", "1rem", "5%")
+   */
+  left?: string;
 }
-interface JsxSignal {
-  kind: "signal";
-  value: any;
+declare function Absolute(p: AbsolutePropertiesInterface, children: any[]): any;
+//#endregion
+//#region layout/flex-item.d.ts
+/**
+ * Flex item component
+ * Controls individual item behavior in flex containers
+ */
+interface FlexItemPropertiesInterface extends BoxProps {
+  /**
+   * Flex shorthand (grow, shrink, basis)
+   * e.g. "1", "none", "0 1 auto"
+   */
+  flx?: string;
+  /**
+   * Align-self (cross-axis alignment)
+   */
+  as?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+  /**
+   * Flex grow factor
+   */
+  flxGrow?: string;
+  /**
+   * Flex shrink factor
+   */
+  flxShrink?: string;
+  /**
+   * Flex basis
+   */
+  flxBasis?: string;
 }
-interface JsxNode {
-  kind: "host" | "component" | "signal";
-  tag: string | ComponentFn;
-  props: any;
-  children: JsxChild[];
+declare function FlexItem(p: FlexItemPropertiesInterface, children: any[]): any;
+//#endregion
+//#region layout/flex.d.ts
+/**
+ * Flex container component
+ * Core flexbox layout primitive
+ */
+interface FlexPropertiesInterface extends FlexItemPropertiesInterface {
+  /**
+   * Justify-content (main axis alignment)
+   */
+  jc?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+  /**
+   * Align-items (cross axis alignment)
+   */
+  ai?: "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
+  /**
+   * Align-content (multi-line alignment)
+   */
+  ac?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "stretch";
+  /**
+   * Gap between items
+   */
+  g?: string;
+  /**
+   * Flex direction
+   */
+  flxDirection?: "row" | "row-reverse" | "column" | "column-reverse";
+  /**
+   * Flex wrap
+   */
+  flxWrap?: "nowrap" | "wrap" | "wrap-reverse";
+  /**
+   * Flex-flow shorthand
+   */
+  flxFlow?: `${"row" | "row-reverse" | "column" | "column-reverse"} ${"nowrap" | "wrap" | "wrap-reverse"}`;
 }
-interface PropsInterface {
-  ctx?: RenderCtx;
+declare function Flex(p: FlexPropertiesInterface, children: any[]): any;
+//#endregion
+//#region layout/center.d.ts
+/**
+ * Center component
+ * Centers children horizontally and vertically using flexbox
+ */
+interface CenterPropertiesInterface extends FlexPropertiesInterface {}
+declare function Center(p: CenterPropertiesInterface, children: any[]): any;
+//#endregion
+//#region layout/fixed.d.ts
+/**
+ * Fixed positioned component
+ * Positions element relative to the viewport
+ */
+interface FixedPropertiesInterface extends BoxProps {
+  /** Top offset (e.g. "10px") */
+  top?: string;
+  /** Right offset */
+  right?: string;
+  /** Bottom offset */
+  bottom?: string;
+  /** Left offset */
+  left?: string;
+  /** Stacking order (z-index) */
+  zIndex?: string;
 }
-type ComponentFn = (props: PropsInterface, children: JsxChild[]) => JsxNode | null;
-declare function jsx(tag: string | ComponentFn, props: any, ...rawChildren: any[]): JsxNode;
+declare function Fixed(p: FixedPropertiesInterface, children: any[]): any;
 //#endregion
-//#region core/mount.d.ts
-type MountCallback = (el: Element) => void | Promise<void>;
-type UnmountCallback = () => void | Promise<void>;
-declare function beginComponentMountSession(): void;
-declare function endComponentMountSession(el: Element): void;
-declare function mount(cb: MountCallback): void;
-declare function registerUnmount(cb: UnmountCallback): void;
-declare function runUnmountsForElement(el: Element): Promise<void>;
+//#region layout/grid-item.d.ts
+/**
+ * Grid item component
+ * Controls individual item placement inside CSS Grid containers
+ */
+interface GridItemPropertiesInterface extends BoxProps {
+  /**
+   * Grid area name or shorthand
+   * (e.g. "header", "1 / 1 / 3 / 2")
+   */
+  grdArea?: string;
+  /**
+   * Grid column placement
+   * (e.g. "1 / span 2", "sidebar")
+   */
+  grdColumn?: string;
+  /**
+   * Grid row placement
+   * (e.g. "1 / span 3", "content")
+   */
+  grdRow?: string;
+}
+declare function GridItem(p: GridItemPropertiesInterface, children: any[]): any;
 //#endregion
-//#region core/show.d.ts
-interface ShowPropsInterface {
-  when: ReadFn<boolean>;
+//#region layout/grid.d.ts
+/**
+ * Grid container component
+ * Core CSS Grid layout primitive
+ */
+interface GridPropertiesInterface extends GridItemPropertiesInterface {
+  /** Gap between grid items */
+  g?: string;
+  /** Align-items (block axis) */
+  ai?: "stretch" | "start" | "end" | "center" | "baseline";
+  /** Justify-items (inline axis) */
+  ji?: "stretch" | "start" | "end" | "center" | "baseline";
+  /** Align-self (container as grid item) */
+  as?: "auto" | "normal" | "stretch" | "center" | "start" | "end" | "self-start" | "self-end" | "flex-start" | "flex-end" | "left" | "right";
+  grdTemplateColumns?: string;
+  grdTemplateRows?: string;
+  grdTemplateAreas?: string;
+  grdTemplate?: string;
+  grdAutoColumns?: string;
+  grdAutoRows?: string;
+  grdAutoFlow?: "row" | "column" | "row dense" | "column dense";
+  grd?: string;
+  grdRowStart?: string;
+  grdColumnStart?: string;
+  grdRowEnd?: string;
+  grdColumnEnd?: string;
+  grdRow?: string;
+  grdColumn?: string;
+  grdRowGap?: string;
+  grdColumnGap?: string;
 }
-declare function Show(p: ShowPropsInterface, children: any): Promise<null>;
+declare function Grid(p: GridPropertiesInterface, children: any[]): any;
 //#endregion
-//#region core/unmount.d.ts
-declare function unmount(cb: UnmountCallback): void;
+//#region layout/relative.d.ts
+/**
+ * Relative positioned component
+ * Establishes a positioning context for absolute children
+ */
+interface RelativePropertiesInterface extends BoxProps {
+  /**
+   * Stacking order (z-index)
+   * (e.g. "1", "auto", "var(--z-index-modal)")
+   */
+  zIndex?: string;
+}
+declare function Relative(p: RelativePropertiesInterface, children: any[]): any;
+//#endregion
+//#region layout/scroll.d.ts
+/**
+ * Scroll component
+ * Creates a scrollable container filling its parent
+ */
+interface ScrollPropertiesInterface extends BoxProps {}
+declare function Scroll(p: ScrollPropertiesInterface, children: any[]): any;
+//#endregion
+//#region layout/stack.d.ts
+/**
+ * Stack component
+ * Vertical layout primitive (flex-direction: column by default)
+ */
+interface StackPropertiesInterface extends FlexPropertiesInterface {}
+declare function Stack(p: StackPropertiesInterface, children: any[]): any;
+//#endregion
+//#region layout/sticky.d.ts
+/**
+ * Sticky positioned component
+ * Sticks to a position within its scroll container
+ */
+interface StickyPropertiesInterface extends BoxProps {
+  /** Top offset (e.g. "10px") */
+  top?: string;
+  /** Right offset */
+  right?: string;
+  /** Bottom offset */
+  bottom?: string;
+  /** Left offset */
+  left?: string;
+  /** Stacking order (z-index) */
+  zIndex?: string;
+}
+declare function Sticky(p: StickyPropertiesInterface, children: any[]): any;
+//#endregion
+//#region layout/text.d.ts
+/**
+ * Text component
+ * Typographic primitive for rendering text elements
+ */
+interface TextPropertiesInterface extends DOMAttrs, DOMEvents {
+  /** Text content */
+  children?: any;
+  /**
+   * HTML tag to render
+   * @default "p"
+   */
+  tag?: "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  /** Text alignment */
+  a?: "left" | "right" | "center" | "justify";
+  /** Font family */
+  ff?: string;
+  /** Font weight */
+  fw?: number;
+  /** Font size */
+  fs?: string;
+  /** Line height */
+  lh?: string;
+  /** Letter spacing */
+  ls?: string;
+  /** Font style */
+  s?: "normal" | "italic";
+  /** Text color */
+  c?: string;
+  m?: string;
+  mb?: string;
+  ml?: string;
+  mr?: string;
+  mt?: string;
+  mx?: string;
+  my?: string;
+  p?: string;
+  pb?: string;
+  pl?: string;
+  pr?: string;
+  pt?: string;
+  px?: string;
+  py?: string;
+  /** Background */
+  bg?: string;
+}
+declare function Text(p: TextPropertiesInterface, children: any[]): VElement$1;
+//#endregion
+//#region style/color.d.ts
+declare const color: {
+  brand: string;
+  onBrand: string;
+  gray0: string;
+  gray100: string;
+  gray200: string;
+  gray300: string;
+  gray400: string;
+  gray500: string;
+  gray600: string;
+  gray700: string;
+  gray800: string;
+  gray900: string;
+  red0: string;
+  red100: string;
+  red200: string;
+  red300: string;
+  red400: string;
+  red500: string;
+  red600: string;
+  red700: string;
+  red800: string;
+  red900: string;
+  pink0: string;
+  pink100: string;
+  pink200: string;
+  pink300: string;
+  pink400: string;
+  pink500: string;
+  pink600: string;
+  pink700: string;
+  pink800: string;
+  pink900: string;
+  grape0: string;
+  grape100: string;
+  grape200: string;
+  grape300: string;
+  grape400: string;
+  grape500: string;
+  grape600: string;
+  grape700: string;
+  grape800: string;
+  grape900: string;
+  violet0: string;
+  violet100: string;
+  violet200: string;
+  violet300: string;
+  violet400: string;
+  violet500: string;
+  violet600: string;
+  violet700: string;
+  violet800: string;
+  violet900: string;
+  indigo0: string;
+  indigo100: string;
+  indigo200: string;
+  indigo300: string;
+  indigo400: string;
+  indigo500: string;
+  indigo600: string;
+  indigo700: string;
+  indigo800: string;
+  indigo900: string;
+  blue0: string;
+  blue100: string;
+  blue200: string;
+  blue300: string;
+  blue400: string;
+  blue500: string;
+  blue600: string;
+  blue700: string;
+  blue800: string;
+  blue900: string;
+  cyan0: string;
+  cyan100: string;
+  cyan200: string;
+  cyan300: string;
+  cyan400: string;
+  cyan500: string;
+  cyan600: string;
+  cyan700: string;
+  cyan800: string;
+  cyan900: string;
+  teal0: string;
+  teal100: string;
+  teal200: string;
+  teal300: string;
+  teal400: string;
+  teal500: string;
+  teal600: string;
+  teal700: string;
+  teal800: string;
+  teal900: string;
+  green0: string;
+  green100: string;
+  green200: string;
+  green300: string;
+  green400: string;
+  green500: string;
+  green600: string;
+  green700: string;
+  green800: string;
+  green900: string;
+  lime0: string;
+  lime100: string;
+  lime200: string;
+  lime300: string;
+  lime400: string;
+  lime500: string;
+  lime600: string;
+  lime700: string;
+  lime800: string;
+  lime900: string;
+  yellow0: string;
+  yellow100: string;
+  yellow200: string;
+  yellow300: string;
+  yellow400: string;
+  yellow500: string;
+  yellow600: string;
+  yellow700: string;
+  yellow800: string;
+  yellow900: string;
+  orange0: string;
+  orange100: string;
+  orange200: string;
+  orange300: string;
+  orange400: string;
+  orange500: string;
+  orange600: string;
+  orange700: string;
+  orange800: string;
+  orange900: string;
+};
+//#endregion
+//#region style/font.d.ts
+declare const font: {
+  family: {
+    sans: string;
+    serif: string;
+    mono: string;
+  };
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+    "5xl": string;
+    "6xl": string;
+    "7xl": string;
+    "8xl": string;
+    "9xl": string;
+  };
+  weight: {
+    thin: number;
+    extralight: number;
+    light: number;
+    normal: number;
+    medium: number;
+    semibold: number;
+    bold: number;
+    extrabold: number;
+    black: number;
+  };
+  style: {
+    normal: string;
+    italic: string;
+  };
+  lineHeight: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+    "5xl": string;
+    "6xl": string;
+    "7xl": string;
+    "8xl": string;
+    "9xl": string;
+  };
+  letterSpacing: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+    "5xl": string;
+    "6xl": string;
+    "7xl": string;
+    "8xl": string;
+    "9xl": string;
+  };
+};
+//#endregion
+//#region style/radius.d.ts
+declare const radius: {
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  "2xl": string;
+  "3xl": string;
+  full: string;
+};
+//#endregion
+//#region style/shadow.d.ts
+declare const shadow: {
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  "2xl": string;
+  inner: string;
+};
+//#endregion
+//#region style/size.d.ts
+declare const size: {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  "2xl": string;
+  "3xl": string;
+  "4xl": string;
+  "5xl": string;
+  "6xl": string;
+  "7xl": string;
+  "8xl": string;
+  "9xl": string;
+  "1/12": string;
+  "2/12": string;
+  "3/12": string;
+  "4/12": string;
+  "5/12": string;
+  "6/12": string;
+  "7/12": string;
+  "8/12": string;
+  "9/12": string;
+  "10/12": string;
+  "11/12": string;
+  "1/5": string;
+  "2/5": string;
+  "3/5": string;
+  "4/5": string;
+  "1/4": string;
+  "3/4": string;
+  "1/3": string;
+  "2/3": string;
+  "1/2": string;
+  full: string;
+};
+//#endregion
+//#region style/space.d.ts
+declare const space: {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  xxl: string;
+  "3xl": string;
+  "4xl": string;
+  "5xl": string;
+  "6xl": string;
+  "7xl": string;
+  "8xl": string;
+};
+//#endregion
+//#region style/style.d.ts
+declare const style: {
+  normal: string;
+  italic: string;
+};
+//#endregion
+//#region style/weight.d.ts
+declare const weight: {
+  thin: number;
+  extralight: number;
+  light: number;
+  normal: number;
+  medium: number;
+  semibold: number;
+  bold: number;
+  extrabold: number;
+  black: number;
+};
+//#endregion
+//#region style/z-index.d.ts
+declare const zIndex: {
+  base: string;
+  background: string;
+  menu: string;
+};
 //#endregion
-export { ComponentFn, ConnectorInterface, JsxChild, JsxNode, JsxSignal, JsxText, MountCallback, PropsInterface, ReadFn, RenderCtx, RenderResult, Show, type UnmountCallback, beginComponentMountSession, connector, destroy, effect, endComponentMountSession, fragment, jsx, mount, registerUnmount, render, runUnmountsForElement, signal, unmount };
+export { Absolute, AbsolutePropertiesInterface, Box, BoxProps, BreakpointName, Center, CenterPropertiesInterface, ComponentFn, ConnectorInterface, Fixed, FixedPropertiesInterface, Flex, FlexItem, FlexItemPropertiesInterface, FlexPropertiesInterface, For, Grid, GridItem, GridItemPropertiesInterface, GridPropertiesInterface, JsxNode, LocaleController, MountCallback, PropsInterface, ReadFn, Relative, RelativePropertiesInterface, RenderCtx, RenderResult, Repeat, Scroll, ScrollPropertiesInterface, Show, Stack, StackPropertiesInterface, Sticky, StickyPropertiesInterface, Text, TextPropertiesInterface, UnmountCallback, VElement, VSignal, VText, beginMountSession, breakpoint, color, connector, effect, endMountSession, font, fragment, hasActiveMountSession, jsx, mount, radius, render, runUnmountsForElement, shadow, signal, size, space, style, unmount, useBreakpoint, useCustomEvent, useLocale, useRouter, weight, zIndex };