@manyducks.co/dolla-styled 0.0.1 → 0.0.2

package/bun.lock

@@ -3,7 +3,7 @@
   "configVersion": 1,
   "workspaces": {
     "": {
-      "name": "dolla-lucide",
+      "name": "@manyducks.co/dolla-styled",
       "dependencies": {
         "jsdom": "^29.1.1",
         "stylis": "^4.4.0",
@@ -14,7 +14,6 @@
         "@types/node": "^25.8.0",
         "@types/stylis": "^4.2.7",
         "lodash-es": "^4.18.1",
-        "nanoid": "^5.1.11",
         "vite": "^8.0.14",
         "vitest": "^4.1.7",
       },
@@ -57,7 +56,7 @@
 
     "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
 
-    "@manyducks.co/dolla": ["@manyducks.co/dolla@4.0.0", "", {}, "sha512-zRj544aYIudS6vbf5om92YkcfvRy5NhwZceKLt5ZI+aoN4wnpBMSPviC/ms8+8SfUy2/mjHTw0MO0QwcnFbx6w=="],
+    "@manyducks.co/dolla": ["@manyducks.co/dolla@4.3.0", "", {}, "sha512-+gc3kzagDIgR1IBIPRln1dl8aVrY5/ByVc3WyRP6zSDnfmbZPSlcjnc8mLYQLhihEV5raVnsl/Z2hDpqvRsBWg=="],
 
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
 
@@ -111,7 +110,7 @@
 
     "@types/lodash-es": ["@types/lodash-es@4.17.12", "", { "dependencies": { "@types/lodash": "*" } }, "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ=="],
 
-    "@types/node": ["@types/node@25.8.0", "", { "dependencies": { "undici-types": ">=7.24.0 <7.24.7" } }, "sha512-TCFSk8IZh+iLX1xtksoBVtdmgL+1IX0fC9BeU4QqFSuNdN/K+HUlhqOzEmSYYpZUVsLYcPqc9KX+60iDuninSQ=="],
+    "@types/node": ["@types/node@25.9.1", "", { "dependencies": { "undici-types": ">=7.24.0 <7.24.7" } }, "sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg=="],
 
     "@types/stylis": ["@types/stylis@4.2.7", "", {}, "sha512-VgDNokpBoKF+wrdvhAAfS55OMQpL6QRglwTwNC3kIgBrzZxA4WsFj+2eLfEA/uMUDzBcEhYmjSbwQakn/i3ajA=="],
 
@@ -197,7 +196,7 @@
 
     "mdn-data": ["mdn-data@2.27.1", "", {}, "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ=="],
 
-    "nanoid": ["nanoid@5.1.11", "", { "bin": { "nanoid": "bin/nanoid.js" } }, "sha512-v+KEsUv2ps74PaSKv0gHTxTCgMXOIfBEbaqa6w6ISIGC7ZsvHN4N9oJ8d4cmf0n5oTzQz2SLmThbQWhjd/8eKg=="],
+    "nanoid": ["nanoid@3.3.12", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ=="],
 
     "obug": ["obug@2.1.1", "", {}, "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ=="],
 
@@ -272,7 +271,5 @@
     "xml-name-validator": ["xml-name-validator@5.0.0", "", {}, "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg=="],
 
     "xmlchars": ["xmlchars@2.2.0", "", {}, "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="],
-
-    "postcss/nanoid": ["nanoid@3.3.12", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ=="],
   }
 }

package/dist/index.mjs

@@ -1,87 +1,93 @@
-import { ViewNode as e, compose as t, createMarkup as n, onMount as r, unwrap as i } from "@manyducks.co/dolla";
-import { compile as a, middleware as o, prefixer as s, serialize as c, stringify as l } from "stylis";
-//#region node_modules/nanoid/url-alphabet/index.js
-var u = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", d = (e = 21) => {
-	let t = "", n = crypto.getRandomValues(new Uint8Array(e |= 0));
-	for (; e--;) t += u[n[e] & 63];
-	return t;
-}, f = new class {
+import { compose as e, createMarkup as t, onEffect as n, unwrap as r } from "@manyducks.co/dolla";
+import { compile as i, middleware as a, prefixer as o, serialize as s, stringify as c } from "stylis";
+//#region src/registry.ts
+var l = class {
 	el;
 	sheet;
 	cache;
 	constructor() {
-		this.el = document.createElement("style"), this.el.id = "dolla-styles", document.head.appendChild(this.el), this.sheet = this.el.sheet, this.cache = /* @__PURE__ */ new Set();
+		this.el = document.createElement("style"), this.el.id = "dolla-styled-static", document.head.appendChild(this.el), this.sheet = this.el.sheet, this.cache = /* @__PURE__ */ new Set();
 	}
 	insert(e, t) {
 		if (this.cache.has(e)) return;
-		let n = c(a(`.${e}{${t}}`), o([s, l]));
-		{
-			let e = n.split(/(?<=\})\s*(?=[.#@a-zA-Z:\*])/g).map((e) => e.trim()).filter(Boolean);
-			for (let t of e) try {
-				this.sheet.insertRule(t, this.sheet.cssRules.length);
-			} catch {
-				console.warn("[Dolla] Failed to inject rule:", t);
-			}
-		}
+		let n = s(i(`.${e}{${t}}`), a([o, c])).split(/(?<=\})\s*(?=[.#@a-zA-Z:\*])/g).map((e) => e.trim()).filter(Boolean);
+		for (let e of n) try {
+			this.sheet.insertRule(e, this.sheet.cssRules.length);
+		} catch {}
 		this.cache.add(e);
 	}
-}(), p = /* @__PURE__ */ new Set();
-function m(e) {
+}, u = class {
+	sheet = new CSSStyleSheet();
+	ruleIndex = 0;
+	constructor() {
+		document.adoptedStyleSheets = [...document.adoptedStyleSheets, this.sheet];
+	}
+	createInstanceRule(e) {
+		let t = this.ruleIndex++;
+		return this.sheet.insertRule(`.${e} {}`, t), this.sheet.cssRules[t].style;
+	}
+}, d = class {
+	registered = /* @__PURE__ */ new Set();
+	register(e, t, n) {
+		if (!(this.registered.has(e) || t === "*")) try {
+			CSS.registerProperty({
+				name: e,
+				syntax: t,
+				inherits: !1,
+				initialValue: n
+			}), this.registered.add(e);
+		} catch (t) {
+			console.warn(`[Dolla] Failed to register @property ${e}:`, t);
+		}
+	}
+}, f = new l(), p = new u(), m = new d();
+//#endregion
+//#region src/styled.ts
+function h(e) {
 	let t = 0;
 	for (let n = 0; n < e.length; n++) t = Math.imul(31, t) + e.charCodeAt(n) | 0;
 	return "styled-" + Math.abs(t).toString(36);
 }
-function h(a) {
-	return (o, ...s) => {
-		let c = d(), l = "", u = [];
-		o.forEach((e, t) => {
+var g = 0;
+function _(i, a = {}) {
+	let o = {}, s = (a, ...s) => {
+		let c = h(a.join("||")), l = "", u = [];
+		return a.forEach((e, t) => {
 			if (l += e, t < s.length) {
-				let e = s[t], n = "*", r = "initial";
-				if (Array.isArray(e) && ([e, n, r = "initial"] = e), typeof e == "function") {
-					let i = `--styled-${c}-${t}`;
-					l += `var(${i})`, u.push({
+				let e = s[t], n = "*", r = null;
+				if (Array.isArray(e) && ([e, n, r = null] = e), typeof e == "function") {
+					let i = `--${c}-${t}`;
+					r === null ? l += `var(${i})` : (l += `var(${i}, ${r})`, n !== "*" && m.register(i, n, r)), u.push({
 						varName: i,
-						fn: e
-					}), n !== "*" && !p.has(i) && (CSS.registerProperty({
-						name: i,
-						syntax: n,
-						initialValue: r,
-						inherits: !1
-					}), p.add(i));
+						fn: e,
+						initialValue: r
+					});
 				} else l += e;
 			}
-		});
-		let h = m(l);
-		return (o, s) => {
-			let c = t(() => {
-				let e = {};
-				return u.forEach(({ varName: t, fn: n }) => {
-					let r = n(o);
-					r != null && (e[t] = r);
-				}), e;
-			}), d = {
+		}), f.insert(c, l), (a, s) => {
+			let l = [c];
+			if (u.length > 0) {
+				let e = `styled-inst-${(g++).toString(36)}`;
+				l.push(e);
+				let t = p.createInstanceRule(e);
+				n(s, () => {
+					u.forEach(({ varName: e, fn: n, initialValue: r }) => {
+						let i = n(a);
+						i == null || i === r ? t.removeProperty(e) : t.setProperty(e, i);
+					});
+				});
+			}
+			return t(typeof i == "string" && a.as || i, {
 				...o,
-				style: t(() => ({
-					...i(o.style),
-					...c()
-				})),
-				class: t(() => [o.class && i(o.class), h])
-			};
-			if (typeof a == "string") return s.name = `Styled(${a.toLowerCase()})`, n(o.as || a, {
-				...d,
-				ref: (e) => (f.insert(h, l), d.ref?.(e))
+				...a,
+				class: e(() => [a.class && r(a.class), ...l])
 			});
-			{
-				let t = new e(s, a, d);
-				return r(t.context, () => {
-					f.insert(h, l);
-				}), t;
-			}
 		};
 	};
+	return s.with = () => s, s.defaults = (e) => _(i, Object.assign({}, a, e)), s;
 }
-var g = new Proxy(h, { get(e, t) {
-	return typeof t == "string" ? h(t) : e[t];
+var v = new Proxy(_, { get(e, t) {
+	return _(t);
 } });
 //#endregion
-export { g as styled };
+export { v as styled };

package/dist/registry.d.ts

@@ -0,0 +1,21 @@
+declare class StaticRegistry {
+    el: HTMLStyleElement;
+    sheet: CSSStyleSheet;
+    cache: Set<string>;
+    constructor();
+    insert(className: string, rawCss: string): void;
+}
+declare class DynamicRegistry {
+    sheet: CSSStyleSheet;
+    ruleIndex: number;
+    constructor();
+    createInstanceRule(instanceClass: string): CSSStyleDeclaration;
+}
+declare class PropertyRegistry {
+    registered: Set<string>;
+    register(name: string, syntax: string, initialValue: any): void;
+}
+export declare const staticRegistry: StaticRegistry;
+export declare const dynamicRegistry: DynamicRegistry;
+export declare const propertyRegistry: PropertyRegistry;
+export {};

package/dist/styled.d.ts

@@ -3,10 +3,28 @@ type StyledProps = {
     as?: keyof JSX.IntrinsicElements | string;
 };
 type StyledView<Props> = View<Props & StyledProps>;
-declare function styled<Tag extends keyof JSX.IntrinsicElements>(tag: Tag): (...args: any[]) => StyledView<JSX.IntrinsicElements[Tag]>;
-declare function styled<Props>(view: View<Props>): (...args: any[]) => StyledView<Props>;
-type Styled = typeof styled & {
-    [Tag in keyof JSX.IntrinsicElements]: <Props = {}>(...args: any[]) => StyledView<JSX.IntrinsicElements[Tag] & Props>;
+type ApplyDefaults<Base, Defaults> = Omit<Base, keyof Defaults> & Partial<Pick<Base, Extract<keyof Base, keyof Defaults>>>;
+type Flatten<T> = {
+    [K in keyof T]: T[K];
+} & {};
+interface TypedTemplateFn<Props> {
+    (strings: TemplateStringsArray, ...interpolations: any[]): StyledView<Props>;
+    /**
+     * Provides default props that are passed to all instances unless overridden.
+     */
+    defaults<D extends Partial<Props>>(defaultProps: D): (strings: TemplateStringsArray, ...interpolations: any[]) => StyledView<Flatten<ApplyDefaults<Props, D>>>;
+}
+interface TemplateFn<BaseProps = {}> {
+    (strings: TemplateStringsArray, ...interpolations: any[]): StyledView<BaseProps>;
+    /**
+     * Defines additional props the resulting view takes.
+     */
+    with<T>(): TypedTemplateFn<BaseProps & T>;
+}
+declare function createBuilder<Tag extends keyof JSX.IntrinsicElements>(tag: Tag, boundDefaults?: Partial<JSX.IntrinsicElements[Tag]>): TemplateFn<JSX.IntrinsicElements[Tag]>;
+declare function createBuilder<Props>(view: View<Props>, boundDefaults?: Partial<Props>): TemplateFn<Props>;
+type Styled = typeof createBuilder & {
+    [Tag in keyof JSX.IntrinsicElements]: TemplateFn<JSX.IntrinsicElements[Tag]>;
 };
 declare const _default: Styled;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manyducks.co/dolla-styled",
   "description": "Styled Components for Dolla",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -26,7 +26,6 @@
     "@types/node": "^25.8.0",
     "@types/stylis": "^4.2.7",
     "lodash-es": "^4.18.1",
-    "nanoid": "^5.1.11",
     "vite": "^8.0.14",
     "vitest": "^4.1.7"
   },

package/dist/sheet.d.ts

@@ -1,9 +0,0 @@
-declare class Stylesheet {
-    el: HTMLStyleElement;
-    sheet: CSSStyleSheet;
-    cache: Set<string>;
-    constructor();
-    insert(className: string, rawCss: string): void;
-}
-export declare const sheet: Stylesheet;
-export {};