nuclo 0.1.46 → 0.1.48

package/dist/utility/renderables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderables.d.ts","sourceRoot":"","sources":["../../src/utility/renderables.ts"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB,CAAC,QAAQ,SAAS,cAAc,GAAG,cAAc,EAChF,MAAM,EAAE,OAAO,EACf,IAAI,EAAE,eAAe,CAAC,QAAQ,CAAC,EAC/B,KAAK,EAAE,MAAM,GACZ,eAAe,CAAC,QAAQ,CAAC,GAAG,IAAI,CAclC"}
+{"version":3,"file":"renderables.d.ts","sourceRoot":"","sources":["../../src/utility/renderables.ts"],"names":[],"mappings":"AAEA,KAAK,eAAe,CAAC,QAAQ,SAAS,cAAc,GAAG,cAAc,IACjE,SAAS,CAAC,QAAQ,CAAC,GACnB,eAAe,CAAC,QAAQ,CAAC,GACzB,IAAI,GACJ,IAAI,GACJ,SAAS,CAAC;AAEd,wBAAgB,iBAAiB,CAAC,QAAQ,SAAS,cAAc,GAAG,cAAc,EAChF,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,EACjC,IAAI,EAAE,eAAe,CAAC,QAAQ,CAAC,EAC/B,KAAK,EAAE,MAAM,GACZ,eAAe,CAAC,QAAQ,CAAC,GAAG,IAAI,CAclC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuclo",
   "private": false,
-  "version": "0.1.46",
+  "version": "0.1.48",
   "type": "module",
   "main": "./dist/nuclo.cjs",
   "module": "./dist/nuclo.js",

package/types/core/base.d.ts

@@ -33,8 +33,8 @@ declare global {
     | (() => Primitive)
     | ExpandedElementAttributes<TTagName>
     | ExpandedElement<TTagName>
-    | SVGElement  // Allow SVG elements as children of HTML elements
-    | ((parent?: any, index?: number) => SVGElement);  // Allow SVG element builders
+    | Node  // Allow any DOM Node (including Comment, Text, SVGElement, etc.)
+    | ((parent: ExpandedElement<TTagName>, index: number) => Node);  // Allow Node builders
 
   export type NodeModFn<TTagName extends ElementTagName = ElementTagName> = (
     parent: ExpandedElement<TTagName>,

package/types/features/style.d.ts

@@ -0,0 +1,126 @@
+// Style utility functions type definitions
+
+/**
+ * Creates a CSS class with the given styles and injects it into the document
+ */
+declare global {
+	function createCSSClass(className: string, styles: Record<string, string>): void;
+
+	/**
+	 * Creates a breakpoint-aware class name generator
+	 */
+	function createBreakpoints<T extends string>(
+		breakpoints: Record<T, string>
+	): (styles?: Partial<Record<T, StyleBuilder>>) => string;
+
+	/**
+	 * Style builder class for chaining CSS properties
+	 */
+	class StyleBuilder {
+		getStyles(): Record<string, string>;
+		add(property: string, value: string): this;
+
+		// Display
+		display(value: string): this;
+		flex(value?: string): this;
+		grid(): this;
+
+		// Colors
+		bg(color: string): this;
+		color(color: string): this;
+		accentColor(value: string): this;
+
+		// Typography
+		fontSize(size: string): this;
+		fontWeight(value: string): this;
+		fontFamily(value: string): this;
+		lineHeight(value: string): this;
+		letterSpacing(value: string): this;
+		textAlign(value: string): this;
+		textDecoration(value: string): this;
+		bold(): this;
+
+		// Layout
+		position(value: string): this;
+		padding(value: string): this;
+		margin(value: string): this;
+		width(value: string): this;
+		height(value: string): this;
+		minWidth(value: string): this;
+		maxWidth(value: string): this;
+		minHeight(value: string): this;
+
+		// Flexbox
+		flexDirection(value: string): this;
+		alignItems(value: string): this;
+		justifyContent(value: string): this;
+		center(): this;
+		gap(value: string): this;
+
+		// Borders
+		border(value: string): this;
+		borderRadius(value: string): this;
+		outline(value: string): this;
+
+		// Effects
+		boxShadow(value: string): this;
+		opacity(value: string): this;
+		transition(value: string): this;
+
+		// Interaction
+		cursor(value: string): this;
+	}
+
+	// Utility functions that return StyleBuilders
+	// Display
+	function display(value: string): StyleBuilder;
+	function flex(value?: string): StyleBuilder;
+	function grid(): StyleBuilder;
+
+	// Colors
+	function bg(color: string): StyleBuilder;
+	function color(colorValue: string): StyleBuilder;
+	function accentColor(value: string): StyleBuilder;
+
+	// Typography
+	function fontSize(size: string): StyleBuilder;
+	function fontWeight(value: string): StyleBuilder;
+	function fontFamily(value: string): StyleBuilder;
+	function lineHeight(value: string): StyleBuilder;
+	function letterSpacing(value: string): StyleBuilder;
+	function textAlign(value: string): StyleBuilder;
+	function textDecoration(value: string): StyleBuilder;
+	function bold(): StyleBuilder;
+
+	// Layout
+	function position(value: string): StyleBuilder;
+	function padding(value: string): StyleBuilder;
+	function margin(value: string): StyleBuilder;
+	function width(value: string): StyleBuilder;
+	function height(value: string): StyleBuilder;
+	function minWidth(value: string): StyleBuilder;
+	function maxWidth(value: string): StyleBuilder;
+	function minHeight(value: string): StyleBuilder;
+
+	// Flexbox
+	function flexDirection(value: string): StyleBuilder;
+	function alignItems(value: string): StyleBuilder;
+	function justifyContent(value: string): StyleBuilder;
+	function center(): StyleBuilder;
+	function gap(value: string): StyleBuilder;
+
+	// Borders
+	function border(value: string): StyleBuilder;
+	function borderRadius(value: string): StyleBuilder;
+	function outline(value: string): StyleBuilder;
+
+	// Effects
+	function boxShadow(value: string): StyleBuilder;
+	function opacity(value: string): StyleBuilder;
+	function transition(value: string): StyleBuilder;
+
+	// Interaction
+	function cursor(value: string): StyleBuilder;
+}
+
+export {};

package/types/index.d.ts

@@ -8,17 +8,18 @@ import "./features/when";
 import "./features/update";
 import "./features/on";
 import "./features/render";
+import "./features/style";
 
 // Re-export on() helper for module-style consumers (import { on } from "nuclo")
-export function on<K extends keyof HTMLElementEventMap>(
+export function on<K extends keyof HTMLElementEventMap, TTagName extends ElementTagName = ElementTagName>(
   type: K,
-  listener: (ev: HTMLElementEventMap[K]) => any,
+  listener: (ev: HTMLElementEventMap[K]) => unknown,
   options?: boolean | AddEventListenerOptions
-): NodeModFn<any>;
-export function on<K extends string, E extends Event = Event>(
+): NodeModFn<TTagName>;
+export function on<K extends string, E extends Event = Event, TTagName extends ElementTagName = ElementTagName>(
   type: K,
-  listener: (ev: E) => any,
+  listener: (ev: E) => unknown,
   options?: boolean | AddEventListenerOptions
-): NodeModFn<any>;
+): NodeModFn<TTagName>;
 
 export {};

package/types/svg/base.d.ts

@@ -77,20 +77,22 @@ declare global {
     | SVGAttributes
     | SVGElementTagNameMap[TTagName]
     | SVGElement  // Allow any SVG element as a child
-    | ((parent?: any, index?: number) => SVGElement);  // Allow SVG element builders as children
+    | ((parent: SVGElementTagNameMap[TTagName], index: number) => SVGElement);  // Allow SVG element builders as children
 
   export type SVGElementModifierFn<TTagName extends keyof SVGElementTagNameMap = keyof SVGElementTagNameMap> = (
     parent: SVGElementTagNameMap[TTagName],
     index: number,
   ) => SVGElementModifier<TTagName> | void;
 
-  // SVG builder type
+  // SVG builder type - returns a NodeModFn-compatible function
+  // Parameters are optional to allow standalone usage (e.g., svg()() for creating detached SVG)
+  // but the function signature is compatible with NodeModFn when used as a child
   export type ExpandedSVGElementBuilder<
     TTagName extends keyof SVGElementTagNameMap = keyof SVGElementTagNameMap,
   > = (
     ...rawMods: Array<SVGElementModifier<TTagName> | SVGElementModifierFn<TTagName>>
   ) => (
-    parent?: SVGElementTagNameMap[TTagName],
+    parent?: SVGElementTagNameMap[TTagName] | ExpandedElement<ElementTagName>,
     index?: number,
   ) => SVGElementTagNameMap[TTagName];
 }