@vertz/ui 0.2.0

package/dist/css/public.d.ts

@@ -0,0 +1,157 @@
+/** A style entry in the array: either a shorthand string or an object for nested selectors. */
+type StyleEntry = string | Record<string, string[]>;
+/** Input to css(): a record of named style blocks. */
+type CSSInput = Record<string, StyleEntry[]>;
+/** Output of css(): a record of block names to class names, plus extracted CSS. */
+interface CSSOutput {
+	/** Map of block name → generated class name. */
+	classNames: Record<string, string>;
+	/** The extracted CSS string. */
+	css: string;
+}
+/**
+* Process a css() call and produce class names + extracted CSS.
+*
+* In production, the compiler replaces css() calls at build time.
+* This runtime implementation is used for:
+* - Development mode
+* - Testing
+* - SSR fallback
+*
+* @param input - Named style blocks.
+* @param filePath - Source file path for deterministic hashing.
+* @returns Class names map and extracted CSS.
+*/
+declare function css(input: CSSInput, filePath?: string): CSSOutput;
+/** Input to globalCss(): selector → property-value map. */
+type GlobalCSSInput = Record<string, Record<string, string>>;
+/** Output of globalCss(): extracted CSS string. */
+interface GlobalCSSOutput {
+	/** The extracted global CSS string. */
+	css: string;
+}
+/**
+* Process a globalCss() call and produce global CSS rules.
+*
+* Properties use camelCase and are converted to kebab-case.
+* CSS custom properties (--*) are passed through as-is.
+*
+* @param input - Selector-to-properties map.
+* @returns Extracted CSS.
+*/
+declare function globalCss(input: GlobalCSSInput): GlobalCSSOutput;
+/**
+* Convert an array of shorthand strings into a CSS properties object
+* suitable for inline styles.
+*
+* Note: Pseudo-states are not supported in inline styles and will
+* cause an error. Use css() for pseudo-states.
+*
+* @param entries - Array of shorthand strings.
+* @returns A Record of CSS property → value pairs (kebab-case keys).
+*/
+declare function s(entries: string[]): Record<string, string>;
+/** Color tokens: a map of color names to their raw/contextual values. */
+type ColorTokens = Record<string, Record<string, string>>;
+/** Spacing tokens: a flat map of names to CSS values. */
+type SpacingTokens = Record<string, string>;
+/** Input to defineTheme(). */
+interface ThemeInput {
+	/** Color design tokens (raw shades and contextual variants). */
+	colors: ColorTokens;
+	/** Spacing scale tokens. */
+	spacing?: SpacingTokens;
+}
+/** The structured theme object returned by defineTheme(). */
+interface Theme {
+	/** Color design tokens. */
+	colors: ColorTokens;
+	/** Spacing scale tokens. */
+	spacing?: SpacingTokens;
+}
+/** Output of compileTheme(). */
+interface CompiledTheme {
+	/** The generated CSS string with :root and [data-theme] blocks. */
+	css: string;
+	/** Flat list of token dot-paths (e.g., 'primary.500', 'background'). */
+	tokens: string[];
+}
+/**
+* Define a theme with raw and contextual design tokens.
+*
+* @param input - Theme token definitions.
+* @returns A structured theme object.
+*/
+declare function defineTheme(input: ThemeInput): Theme;
+/**
+* Compile a theme into CSS custom properties.
+*
+* Generates:
+* - `:root { ... }` block with default/raw token values
+* - `[data-theme="dark"] { ... }` block with dark overrides (if any)
+*
+* @param theme - A theme object from defineTheme().
+* @returns Compiled CSS and token list.
+*/
+declare function compileTheme(theme: Theme): CompiledTheme;
+/**
+* ThemeProvider — Sets `data-theme` attribute for contextual token switching.
+*
+* Creates a wrapper div element with the appropriate `data-theme` attribute
+* so that contextual CSS custom properties (generated by compileTheme) resolve
+* to the correct variant values.
+*
+* Usage:
+* ```ts
+* ThemeProvider({ theme: 'dark', children: [myApp] });
+* ```
+*/
+/** A child node: either a DOM Node or a string (text content). */
+type ThemeChild = Node | string;
+/** Props for ThemeProvider. */
+interface ThemeProviderProps {
+	/** The theme variant name (e.g., 'light', 'dark'). Defaults to 'light'. */
+	theme?: string;
+	/** Child elements to render inside the provider. */
+	children: ThemeChild[];
+}
+/**
+* Create a wrapper div with `data-theme` attribute for theme switching.
+*
+* @param props - Theme and children.
+* @returns A div element with `data-theme` set and children appended.
+*/
+declare function ThemeProvider(props: ThemeProviderProps): HTMLDivElement;
+/** A record of variant names to their possible values (each value maps to style entries). */
+type VariantDefinitions = Record<string, Record<string, StyleEntry[]>>;
+/** Extract the variant props type from a variant definitions object. */
+type VariantProps<V extends VariantDefinitions> = { [K in keyof V]? : keyof V[K] };
+/** A compound variant rule: matches when all specified variant values are active. */
+type CompoundVariant<V extends VariantDefinitions> = { [K in keyof V]? : keyof V[K] } & {
+	styles: StyleEntry[];
+};
+/** Configuration for the variants() function. */
+interface VariantsConfig<V extends VariantDefinitions> {
+	/** Base styles applied to all variants. */
+	base: StyleEntry[];
+	/** Variant definitions: each key is a variant name, each value is a map of option to styles. */
+	variants: V;
+	/** Default variant values used when no override is provided. */
+	defaultVariants?: { [K in keyof V]? : keyof V[K] };
+	/** Compound variants: styles applied when multiple variant values match simultaneously. */
+	compoundVariants?: CompoundVariant<V>[];
+}
+/** The function returned by variants(). Takes optional variant props and returns a className string. */
+interface VariantFunction<V extends VariantDefinitions> {
+	(props?: VariantProps<V>): string;
+	/** The extracted CSS for all variant combinations. */
+	css: string;
+}
+/**
+* Create a typed variant function from a config object.
+*
+* @param config - Variant configuration (base, variants, defaultVariants, compoundVariants).
+* @returns A function that accepts variant props and returns a className string.
+*/
+declare function variants<V extends VariantDefinitions>(config: VariantsConfig<V>): VariantFunction<V>;
+export { variants, s, globalCss, defineTheme, css, compileTheme, VariantsConfig, VariantProps, VariantFunction, ThemeProviderProps, ThemeProvider, ThemeInput, Theme, StyleEntry, GlobalCSSOutput, GlobalCSSInput, CompiledTheme, CSSOutput, CSSInput };

package/dist/css/public.js

@@ -0,0 +1,18 @@
+import {
+  ThemeProvider,
+  compileTheme,
+  css,
+  defineTheme,
+  globalCss,
+  s,
+  variants
+} from "../shared/chunk-f1ynwam4.js";
+export {
+  variants,
+  s,
+  globalCss,
+  defineTheme,
+  css,
+  compileTheme,
+  ThemeProvider
+};

package/dist/form/public.d.ts

@@ -0,0 +1,111 @@
+/**
+* A reactive signal that holds a value and notifies subscribers on change.
+*/
+interface Signal<T> {
+	/** Get the current value and subscribe to changes (when inside a tracking context). */
+	get value(): T;
+	/** Set the current value and notify subscribers if changed. */
+	set value(newValue: T);
+	/** Read the current value without subscribing (no tracking). */
+	peek(): T;
+	/** Manually notify all subscribers (useful after mutating the value in place). */
+	notify(): void;
+}
+/**
+* Minimal schema interface compatible with @vertz/schema.
+* Any object with a `parse(data: unknown): T` method satisfies this.
+*/
+interface FormSchema<T> {
+	parse(data: unknown): T;
+}
+/** Result of a validation attempt. */
+type ValidationResult<T> = {
+	success: true;
+	data: T;
+	errors: Record<string, never>;
+} | {
+	success: false;
+	data: undefined;
+	errors: Record<string, string>;
+};
+/**
+* Validate data against a schema.
+*
+* - On success, returns `{ success: true, data, errors: {} }`.
+* - On failure, extracts field errors from `error.fieldErrors` if present,
+*   otherwise falls back to a generic `_form` error.
+*/
+declare function validate<T>(schema: FormSchema<T>, data: unknown): ValidationResult<T>;
+/**
+* An SDK method with endpoint metadata attached.
+* Generated SDK methods expose `.url` and `.method` for progressive enhancement.
+*/
+interface SdkMethod<
+	TBody,
+	TResult
+> {
+	(body: TBody): Promise<TResult>;
+	url: string;
+	method: string;
+}
+/** Options for creating a form instance. */
+interface FormOptions<TBody> {
+	/** Explicit schema for client-side validation before submission. */
+	schema: FormSchema<TBody>;
+}
+/** Callbacks for form submission. Both are optional per spec. */
+interface SubmitCallbacks<TResult> {
+	onSuccess?: (result: TResult) => void;
+	onError?: (errors: Record<string, string>) => void;
+}
+/** A form instance bound to an SDK method. */
+interface FormInstance<
+	TBody,
+	TResult
+> {
+	/** Returns `{ action, method }` for progressive enhancement in HTML forms. */
+	attrs(): {
+		action: string;
+		method: string;
+	};
+	/** Reactive signal indicating whether a submission is in progress. */
+	submitting: Signal<boolean>;
+	/**
+	* Returns an event handler that extracts FormData, validates, and submits.
+	* Assignable to onSubmit: `onSubmit={userForm.handleSubmit({ onSuccess })}`.
+	*
+	* Can also be called directly with FormData for non-DOM usage:
+	* `userForm.handleSubmit({ onSuccess })(formData)`.
+	*/
+	handleSubmit(callbacks?: SubmitCallbacks<TResult>): (formDataOrEvent: FormData | Event) => Promise<void>;
+	/** Returns the error message for a field reactively, or undefined if no error. Type-safe field names. */
+	error(field: keyof TBody & string): string | undefined;
+}
+/**
+* Create a form instance bound to an SDK method with schema validation.
+*
+* The form provides:
+* - `attrs()` for progressive enhancement (returns action/method from SDK metadata)
+* - `handleSubmit()` returns an event handler for FormData extraction, validation, and SDK submission
+* - `error()` for reactive field-level error access
+* - `submitting` signal for loading state
+*/
+declare function form<
+	TBody,
+	TResult
+>(sdkMethod: SdkMethod<TBody, TResult>, options: FormOptions<TBody>): FormInstance<TBody, TResult>;
+/** Options for formDataToObject conversion. */
+interface FormDataOptions {
+	/** When true, coerces numeric strings to numbers and "true"/"false" to booleans. */
+	coerce?: boolean;
+}
+/**
+* Convert FormData to a plain object.
+*
+* - File entries are skipped (only string values are included).
+* - Duplicate keys use the last value.
+* - When `coerce` is true, numeric strings become numbers and
+*   "true"/"false" become booleans.
+*/
+declare function formDataToObject(formData: FormData, options?: FormDataOptions): Record<string, unknown>;
+export { validate, formDataToObject, form, ValidationResult, SubmitCallbacks, SdkMethod, FormSchema, FormOptions, FormInstance, FormDataOptions };

package/dist/form/public.js

@@ -0,0 +1,11 @@
+import {
+  form,
+  formDataToObject,
+  validate
+} from "../shared/chunk-tsdpgmks.js";
+import"../shared/chunk-pgymxpn1.js";
+export {
+  validate,
+  formDataToObject,
+  form
+};