softable-pixels-web 1.0.0 → 1.0.2

package/dist/Typography-Dn1vnPBy.js

@@ -0,0 +1,528 @@
+import { useInsertionEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/hooks/useThemedStyles/utils/hasString.ts
+/**
+* Small deterministic hash for strings (djb2 variant).
+* Used to generate stable class ids and cache keys.
+*/
+function hashStr(str) {
+	let h = 5381;
+	for (let i = 0; i < str.length; i++) h = h * 33 ^ str.charCodeAt(i);
+	return (h >>> 0).toString(36);
+}
+
+//#endregion
+//#region src/hooks/useThemedStyles/utils/stableStringfy.ts
+/**
+* Stable stringify (order-independent) for hashing.
+* Sorts object keys to keep output deterministic.
+*/
+function stableStringify(obj) {
+	if (obj == null || typeof obj !== "object") return String(obj);
+	if (Array.isArray(obj)) return `[${obj.map(stableStringify).join(",")}]`;
+	return `{${Object.keys(obj).sort().map((k) => `${k}:${stableStringify(obj[k])}`).join(",")}}`;
+}
+
+//#endregion
+//#region src/hooks/useThemedStyles/utils/injectSlotsRule.ts
+/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */
+/**
+* Single <style> tag used for all runtime rules.
+*/
+const STYLE_ID = "__px_runtime_rules__";
+/**
+* Prevents injecting identical rules multiple times.
+*/
+const CACHE = /* @__PURE__ */ new Set();
+/**
+* Ensures the runtime <style> element exists and returns it.
+*/
+function ensureStyleEl() {
+	if (typeof document === "undefined") return null;
+	let el = document.getElementById(STYLE_ID);
+	if (!el) {
+		el = document.createElement("style");
+		el.id = STYLE_ID;
+		document.head.appendChild(el);
+	}
+	return el;
+}
+/**
+* CSS properties that should NOT automatically receive "px" when given a number.
+*
+* Example:
+* - opacity: 0.5  (NOT 0.5px)
+* - zIndex: 10    (NOT 10px)
+* - lineHeight: 1.2 (NOT 1.2px)
+*/
+const UNITLESS = new Set([
+	"opacity",
+	"zIndex",
+	"fontWeight",
+	"flex",
+	"flexGrow",
+	"flexShrink",
+	"order",
+	"lineHeight"
+]);
+/**
+* Converts camelCase CSS property names to kebab-case.
+* Keeps CSS variables intact (e.g. "--px-bg").
+*/
+function toKebab(prop) {
+	if (prop.startsWith("--")) return prop;
+	return prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+/**
+* Converts a JS value to a CSS value.
+*
+* - `number` => `"${n}px"` for most properties
+* - `number` => `"${n}"` for unitless properties
+* - `string` => string as-is
+*/
+function toCssValue(prop, value) {
+	if (value == null) return null;
+	if (typeof value === "number" && !UNITLESS.has(prop)) return `${value}px`;
+	return String(value);
+}
+/**
+* Converts a declaration object to CSS string.
+*
+* Example:
+* `{ backgroundColor: "red", padding: 8 }`
+* => `"background-color:red;padding:8px;"`
+*/
+function declToCss(decl) {
+	const parts = [];
+	for (const [k, v] of Object.entries(decl)) {
+		const cssValue = toCssValue(k, v);
+		if (cssValue == null) continue;
+		parts.push(`${toKebab(k)}:${cssValue};`);
+	}
+	return parts.join("");
+}
+/**
+* Scopes a selector to a generated slot class.
+*
+* Rules:
+* - selectors containing "&" are replaced: "&:hover" => ".slot:hover"
+* - selectors starting with ":" become pseudo: ":hover" => ".slot:hover"
+* - otherwise it's treated as descendant: "p" => ".slot p"
+*/
+function scopeSelector(selector, baseClass) {
+	const base = `.${baseClass}`;
+	if (selector.includes("&")) return selector.replaceAll("&", base);
+	if (selector.startsWith(":")) return `${base}${selector}`;
+	return `${base} ${selector}`;
+}
+/**
+* Injects CSS rules for one slot class into the runtime <style> tag.
+*
+* The injected CSS is cached using a hash of (slotClass + rules).
+*/
+function injectSlotRules(slotClass, rules) {
+	if (!rules || Object.keys(rules).length === 0) return;
+	if (typeof document === "undefined") return;
+	const key = hashStr(`${slotClass}:${stableStringify(rules)}`);
+	if (CACHE.has(key)) return;
+	const css = Object.entries(rules).map(([sel, decl]) => `${scopeSelector(sel, slotClass)}{${declToCss(decl)}}`).join("\n");
+	const el = ensureStyleEl();
+	if (!el) return;
+	el.appendChild(document.createTextNode(`\n${css}\n`));
+	CACHE.add(key);
+}
+
+//#endregion
+//#region src/hooks/useThemedStyles/utils/mergeStyleMaps.ts
+/**
+* Shallow-merge style maps slot-by-slot.
+* Warns when override contains unknown slots (developer UX).
+*/
+/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */
+function mergeStyleMaps(base, override) {
+	if (!override) return base;
+	const out = { ...base };
+	for (const key in override) {
+		if (!(key in base)) console.warn(`[useThemedStyles] Unknown style slot "${key}". Available slots: ${Object.keys(base).join(", ")}`);
+		out[key] = {
+			...base[key] ?? {},
+			...override[key] ?? {}
+		};
+	}
+	return out;
+}
+
+//#endregion
+//#region src/hooks/useThemedStyles/utils/resolveCommonStyleProps.ts
+function toCss(v) {
+	return typeof v === "number" ? `${v}rem` : v;
+}
+/**
+* Source of truth: common prop -> how it maps into CSSProperties.
+* Add new common props ONLY here.
+*/
+const COMMON_MAP = {
+	m: (v, o) => {
+		o.margin = toCss(v);
+	},
+	mx: (v, o) => {
+		o.marginLeft = toCss(v);
+		o.marginRight = toCss(v);
+	},
+	my: (v, o) => {
+		o.marginTop = toCss(v);
+		o.marginBottom = toCss(v);
+	},
+	mt: (v, o) => {
+		o.marginTop = toCss(v);
+	},
+	mr: (v, o) => {
+		o.marginRight = toCss(v);
+	},
+	mb: (v, o) => {
+		o.marginBottom = toCss(v);
+	},
+	ml: (v, o) => {
+		o.marginLeft = toCss(v);
+	},
+	p: (v, o) => {
+		o.padding = toCss(v);
+	},
+	px: (v, o) => {
+		o.paddingLeft = toCss(v);
+		o.paddingRight = toCss(v);
+	},
+	py: (v, o) => {
+		o.paddingTop = toCss(v);
+		o.paddingBottom = toCss(v);
+	},
+	pt: (v, o) => {
+		o.paddingTop = toCss(v);
+	},
+	pr: (v, o) => {
+		o.paddingRight = toCss(v);
+	},
+	pb: (v, o) => {
+		o.paddingBottom = toCss(v);
+	},
+	pl: (v, o) => {
+		o.paddingLeft = toCss(v);
+	},
+	fontSize: (v, o) => {
+		o.fontSize = toCss(v);
+	},
+	fontWeight: (v, o) => {
+		o.fontWeight = v;
+	},
+	lineHeight: (v, o) => {
+		o.lineHeight = toCss(v);
+	},
+	textAlign: (v, o) => {
+		o.textAlign = v;
+	},
+	w: (v, o) => {
+		o.width = toCss(v);
+	},
+	h: (v, o) => {
+		o.height = toCss(v);
+	},
+	minW: (v, o) => {
+		o.minWidth = toCss(v);
+	},
+	maxW: (v, o) => {
+		o.maxWidth = toCss(v);
+	},
+	minH: (v, o) => {
+		o.minHeight = toCss(v);
+	},
+	maxH: (v, o) => {
+		o.maxHeight = toCss(v);
+	}
+};
+const COMMON_KEYS = Object.keys(COMMON_MAP);
+function hasAnyCommonStyleProps(props) {
+	for (const k of COMMON_KEYS) if (props[k] != null) return true;
+	return false;
+}
+function resolveCommonStyleProps(props) {
+	const out = {};
+	for (const k of COMMON_KEYS) {
+		const value = props[k];
+		if (value != null) COMMON_MAP[k](value, out);
+	}
+	return out;
+}
+/**
+* Applies common style props (if present) to a chosen slot.
+* Common props are resolved by `resolveCommonStyleProps`.
+*/
+function applyCommonsToStyles(styles, props, slotOverride) {
+	if (!hasAnyCommonStyleProps(props)) return styles;
+	const keys = Object.keys(styles);
+	if (keys.length === 0) return styles;
+	const slot = slotOverride ?? ("container" in styles ? "container" : keys[0]);
+	const common = resolveCommonStyleProps(props);
+	return {
+		...styles,
+		[slot]: {
+			...styles[slot] ?? {},
+			...common
+		}
+	};
+}
+
+//#endregion
+//#region src/hooks/useThemedStyles/utils/splitRules.ts
+/**
+* Splits the style map into:
+* - `inline`: slot styles without `__rules`
+* - `rulesBySlot`: extracted `__rules` grouped by slot
+*
+* This lets us:
+* - apply inline styles directly via `style={...}`
+* - inject selectors/pseudos via generated CSS classes
+*/
+function splitRules(styles) {
+	const inline = {};
+	const rulesBySlot = {};
+	for (const key in styles) {
+		const slot = styles[key];
+		if (!slot) continue;
+		const { __rules, ...rest } = slot;
+		inline[key] = rest;
+		if (__rules && Object.keys(__rules).length > 0) rulesBySlot[key] = __rules;
+	}
+	return {
+		inline,
+		rulesBySlot
+	};
+}
+
+//#endregion
+//#region src/hooks/useThemedStyles/utils/stripCommonProps.ts
+const COMMON_KEY_SET = new Set(COMMON_KEYS);
+
+//#endregion
+//#region src/hooks/useThemedStyles/index.ts
+/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */
+/**
+* useThemedStyles
+*
+* A React-Native-like style factory hook for React Web that also supports:
+* - CSS variables in inline styles
+* - Pseudo selectors, nested selectors, and vendor selectors via `__rules`
+*
+* It returns two maps:
+* - `styles`: inline styles for each slot
+* - `classes`: generated classes for each slot (needed for `__rules`)
+*
+* Usage:
+* ```tsx
+* const { styles, classes } = useThemedStyles(props, createStyles)
+*
+* return (
+*   <button style={styles.item} className={classes.item}>
+*     <p style={styles.label} className={classes.label}>Hello</p>
+*   </button>
+* )
+* ```
+*
+* Notes:
+* - If a slot has no `__rules`, you can omit `className` for that slot.
+* - If you use `__rules`, you MUST apply the corresponding class for scoping.
+*/
+function useThemedStyles(props, factory, options) {
+	const raw = useMemo(() => factory(props), [factory, ...options?.deps ?? (options?.pick ? options.pick(props) : [props])]);
+	const { inline, rulesBySlot } = useMemo(() => splitRules(raw), [raw]);
+	const merged = useMemo(() => mergeStyleMaps(inline, options?.override), [inline, options?.override]);
+	const withCommons = useMemo(() => {
+		if (!options?.applyCommonProps) return merged;
+		return applyCommonsToStyles(merged, props, options.commonSlot);
+	}, [
+		merged,
+		props,
+		options?.applyCommonProps,
+		options?.commonSlot
+	]);
+	/**
+	* Base id is derived only from the rules signature.
+	* This keeps class names stable whenever rules don't change.
+	*/
+	const baseId = useMemo(() => {
+		const key = hashStr(stableStringify(rulesBySlot));
+		return options?.debugName ? `pxr-${options.debugName}-${key}` : `pxr-${key}`;
+	}, [rulesBySlot, options?.debugName]);
+	/**
+	* Generated class per slot.
+	* Example: pxr-<hash>__item
+	*/
+	const classes = useMemo(() => {
+		const out = {};
+		for (const slotKey of Object.keys(withCommons)) out[slotKey] = `${baseId}__${slotKey}`;
+		return out;
+	}, [baseId, withCommons]);
+	/**
+	* Inject rules into the runtime <style> tag.
+	*
+	* We use `useInsertionEffect` so styles are inserted before layout/paint
+	* when supported (best for CSS-in-JS style injection).
+	*/
+	useInsertionEffect(() => {
+		for (const slotKey of Object.keys(rulesBySlot)) {
+			const rules = rulesBySlot[slotKey];
+			if (!rules) continue;
+			injectSlotRules(classes[slotKey], rules);
+		}
+	}, [rulesBySlot, classes]);
+	return {
+		styles: withCommons,
+		classes
+	};
+}
+
+//#endregion
+//#region src/components/toolkit/Typography/config.ts
+const primaryColor = "var(--px-text-primary)";
+const secondaryColor = "var(--px-text-secondary)";
+const typographyVariants = {
+	h1: {
+		fontSize: "3rem",
+		fontWeight: "700",
+		lineHeight: "1.25",
+		color: primaryColor
+	},
+	h2: {
+		fontSize: "2.25rem",
+		fontWeight: "600",
+		lineHeight: "1.35",
+		color: primaryColor
+	},
+	h3: {
+		fontSize: "1.875rem",
+		fontWeight: "600",
+		color: primaryColor
+	},
+	h4: {
+		fontSize: "1.5rem",
+		fontWeight: "500",
+		color: primaryColor
+	},
+	h5: {
+		fontSize: "1.25rem",
+		fontWeight: "500",
+		color: primaryColor
+	},
+	b1: {
+		fontSize: "1rem",
+		fontWeight: "500",
+		color: primaryColor
+	},
+	b2: {
+		fontSize: "0.875rem",
+		color: secondaryColor
+	},
+	b3: {
+		fontSize: "0.75rem",
+		color: secondaryColor
+	},
+	caption: {
+		fontSize: "0.75rem",
+		color: secondaryColor
+	},
+	legal: {
+		fontSize: "0.65rem",
+		textTransform: "uppercase",
+		letterSpacing: "0.025em",
+		color: secondaryColor
+	}
+};
+const variantToElement = {
+	h1: "h1",
+	h2: "h2",
+	h3: "h3",
+	h4: "h4",
+	h5: "h5",
+	b1: "p",
+	b2: "p",
+	b3: "p",
+	caption: "span",
+	legal: "span"
+};
+const alignText = {
+	left: { textAlign: "left" },
+	center: { textAlign: "center" },
+	right: { textAlign: "right" },
+	justify: { textAlign: "justify" }
+};
+
+//#endregion
+//#region src/components/toolkit/Typography/style.ts
+function createTypographyStyles(props) {
+	const { isLoading, variant, align = "left" } = props;
+	return {
+		base: {
+			display: "flex",
+			flexDirection: "row",
+			alignItems: "center",
+			borderBottom: "1px solid var(--pixel-border, #e5e7eb)",
+			gap: 0,
+			animation: isLoading ? "animate-pulse 1.5s infinite" : void 0
+		},
+		loading: {
+			width: "50%",
+			height: "1em",
+			display: "inline-block",
+			backgroundColor: "var(--pixel-gray-300, #d1d5db)",
+			borderRadius: "0.25rem"
+		},
+		text: {
+			...alignText[align],
+			...typographyVariants[variant]
+		}
+	};
+}
+
+//#endregion
+//#region src/components/toolkit/Typography/index.tsx
+function Typography(props) {
+	const { id, as, href, variant, children, placeholder, isLoading = false, styles: styleTypography } = props;
+	const { styles } = useThemedStyles(props, createTypographyStyles, {
+		pick: (p) => [
+			p.isLoading,
+			p.variant,
+			p.align
+		],
+		commonSlot: "text",
+		applyCommonProps: true,
+		override: styleTypography
+	});
+	const Component = as ?? variantToElement[variant];
+	if (isLoading) return /* @__PURE__ */ jsx("span", {
+		id,
+		"aria-hidden": "true",
+		role: "presentation",
+		style: {
+			...styles.text,
+			...styles.loading
+		}
+	});
+	const sharedProps = {
+		id,
+		style: styles.text,
+		"aria-label": placeholder
+	};
+	if (href) return /* @__PURE__ */ jsx("a", {
+		href,
+		...sharedProps,
+		children
+	});
+	return /* @__PURE__ */ jsx(Component, {
+		...sharedProps,
+		children
+	});
+}
+
+//#endregion
+export { useThemedStyles as n, Typography as t };
+//# sourceMappingURL=Typography-Dn1vnPBy.js.map

package/dist/Typography-Dn1vnPBy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography-Dn1vnPBy.js","names":["parts: string[]","COMMON_MAP: Record<\n  keyof CommonStyleProps,\n  (value: any, out: React.CSSProperties) => void\n>","out: React.CSSProperties","inline: any","rulesBySlot: any","out: any","typographyVariants: Record<TypographyVariant, CSSProperties>","variantToElement: Record<\n  TypographyVariant,\n  keyof JSX.IntrinsicElements\n>","alignText: Record<TextAlign, CSSProperties>"],"sources":["../src/hooks/useThemedStyles/utils/hasString.ts","../src/hooks/useThemedStyles/utils/stableStringfy.ts","../src/hooks/useThemedStyles/utils/injectSlotsRule.ts","../src/hooks/useThemedStyles/utils/mergeStyleMaps.ts","../src/hooks/useThemedStyles/utils/resolveCommonStyleProps.ts","../src/hooks/useThemedStyles/utils/splitRules.ts","../src/hooks/useThemedStyles/utils/stripCommonProps.ts","../src/hooks/useThemedStyles/index.ts","../src/components/toolkit/Typography/config.ts","../src/components/toolkit/Typography/style.ts","../src/components/toolkit/Typography/index.tsx"],"sourcesContent":["/**\n * Small deterministic hash for strings (djb2 variant).\n * Used to generate stable class ids and cache keys.\n */\nexport function hashStr(str: string) {\n  let h = 5381\n  for (let i = 0; i < str.length; i++) h = (h * 33) ^ str.charCodeAt(i)\n  return (h >>> 0).toString(36)\n}\n","/**\n * Stable stringify (order-independent) for hashing.\n * Sorts object keys to keep output deterministic.\n */\nexport function stableStringify(obj: any): string {\n  if (obj == null || typeof obj !== 'object') return String(obj)\n  if (Array.isArray(obj)) return `[${obj.map(stableStringify).join(',')}]`\n  const keys = Object.keys(obj).sort()\n  return `{${keys.map(k => `${k}:${stableStringify(obj[k])}`).join(',')}}`\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// Utils\nimport { hashStr } from './hasString'\nimport { stableStringify } from './stableStringfy'\n\n// Types\nimport type { RuleMap } from '../types'\n\n/**\n * Single <style> tag used for all runtime rules.\n */\nconst STYLE_ID = '__px_runtime_rules__'\n\n/**\n * Prevents injecting identical rules multiple times.\n */\nconst CACHE = new Set<string>()\n\n/**\n * Ensures the runtime <style> element exists and returns it.\n */\nfunction ensureStyleEl(): HTMLStyleElement | null {\n  if (typeof document === 'undefined') return null\n  let el = document.getElementById(STYLE_ID) as HTMLStyleElement | null\n  if (!el) {\n    el = document.createElement('style')\n    el.id = STYLE_ID\n    document.head.appendChild(el)\n  }\n  return el\n}\n\n/**\n * CSS properties that should NOT automatically receive \"px\" when given a number.\n *\n * Example:\n * - opacity: 0.5  (NOT 0.5px)\n * - zIndex: 10    (NOT 10px)\n * - lineHeight: 1.2 (NOT 1.2px)\n */\nconst UNITLESS = new Set([\n  'opacity',\n  'zIndex',\n  'fontWeight',\n  'flex',\n  'flexGrow',\n  'flexShrink',\n  'order',\n  'lineHeight'\n])\n\n/**\n * Converts camelCase CSS property names to kebab-case.\n * Keeps CSS variables intact (e.g. \"--px-bg\").\n */\nfunction toKebab(prop: string) {\n  if (prop.startsWith('--')) return prop\n  return prop.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`)\n}\n\n/**\n * Converts a JS value to a CSS value.\n *\n * - `number` => `\"${n}px\"` for most properties\n * - `number` => `\"${n}\"` for unitless properties\n * - `string` => string as-is\n */\nfunction toCssValue(prop: string, value: any) {\n  if (value == null) return null\n  if (typeof value === 'number' && !UNITLESS.has(prop)) return `${value}px`\n  return String(value)\n}\n\n/**\n * Converts a declaration object to CSS string.\n *\n * Example:\n * `{ backgroundColor: \"red\", padding: 8 }`\n * => `\"background-color:red;padding:8px;\"`\n */\nfunction declToCss(decl: Record<string, any>) {\n  const parts: string[] = []\n  for (const [k, v] of Object.entries(decl)) {\n    const cssValue = toCssValue(k, v)\n    if (cssValue == null) continue\n    parts.push(`${toKebab(k)}:${cssValue};`)\n  }\n  return parts.join('')\n}\n\n/**\n * Scopes a selector to a generated slot class.\n *\n * Rules:\n * - selectors containing \"&\" are replaced: \"&:hover\" => \".slot:hover\"\n * - selectors starting with \":\" become pseudo: \":hover\" => \".slot:hover\"\n * - otherwise it's treated as descendant: \"p\" => \".slot p\"\n */\nfunction scopeSelector(selector: string, baseClass: string) {\n  const base = `.${baseClass}`\n\n  if (selector.includes('&')) return selector.replaceAll('&', base)\n  if (selector.startsWith(':')) return `${base}${selector}`\n  return `${base} ${selector}`\n}\n\n/**\n * Injects CSS rules for one slot class into the runtime <style> tag.\n *\n * The injected CSS is cached using a hash of (slotClass + rules).\n */\nexport function injectSlotRules(slotClass: string, rules?: RuleMap) {\n  if (!rules || Object.keys(rules).length === 0) return\n  if (typeof document === 'undefined') return\n\n  const signature = `${slotClass}:${stableStringify(rules)}`\n  const key = hashStr(signature)\n  if (CACHE.has(key)) return\n\n  const css = Object.entries(rules)\n    .map(\n      ([sel, decl]) => `${scopeSelector(sel, slotClass)}{${declToCss(decl)}}`\n    )\n    .join('\\n')\n\n  const el = ensureStyleEl()\n  if (!el) return\n\n  el.appendChild(document.createTextNode(`\\n${css}\\n`))\n  CACHE.add(key)\n}\n","/**\n * Shallow-merge style maps slot-by-slot.\n * Warns when override contains unknown slots (developer UX).\n */\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nexport function mergeStyleMaps<T extends Record<string, any>>(\n  base: T,\n  override?: Partial<T>\n): T {\n  if (!override) return base\n  const out = { ...base } as T\n\n  for (const key in override) {\n    if (!(key in base)) {\n      console.warn(\n        `[useThemedStyles] Unknown style slot \"${key}\". Available slots: ${Object.keys(base).join(', ')}`\n      )\n    }\n\n    out[key] = { ...(base[key] ?? {}), ...(override[key] ?? {}) } as any\n  }\n\n  return out\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// Types\nimport type { CommonStyleProps } from '../types'\n\nfunction toCss(v: number | string | undefined) {\n  return typeof v === 'number' ? `${v}rem` : v\n}\n\n/**\n * Source of truth: common prop -> how it maps into CSSProperties.\n * Add new common props ONLY here.\n */\nconst COMMON_MAP: Record<\n  keyof CommonStyleProps,\n  (value: any, out: React.CSSProperties) => void\n> = {\n  // margin\n  m: (v, o) => {\n    o.margin = toCss(v)\n  },\n  mx: (v, o) => {\n    o.marginLeft = toCss(v)\n    o.marginRight = toCss(v)\n  },\n  my: (v, o) => {\n    o.marginTop = toCss(v)\n    o.marginBottom = toCss(v)\n  },\n  mt: (v, o) => {\n    o.marginTop = toCss(v)\n  },\n  mr: (v, o) => {\n    o.marginRight = toCss(v)\n  },\n  mb: (v, o) => {\n    o.marginBottom = toCss(v)\n  },\n  ml: (v, o) => {\n    o.marginLeft = toCss(v)\n  },\n\n  // padding\n  p: (v, o) => {\n    o.padding = toCss(v)\n  },\n  px: (v, o) => {\n    o.paddingLeft = toCss(v)\n    o.paddingRight = toCss(v)\n  },\n  py: (v, o) => {\n    o.paddingTop = toCss(v)\n    o.paddingBottom = toCss(v)\n  },\n  pt: (v, o) => {\n    o.paddingTop = toCss(v)\n  },\n  pr: (v, o) => {\n    o.paddingRight = toCss(v)\n  },\n  pb: (v, o) => {\n    o.paddingBottom = toCss(v)\n  },\n  pl: (v, o) => {\n    o.paddingLeft = toCss(v)\n  },\n\n  // text\n  fontSize: (v, o) => {\n    o.fontSize = toCss(v)\n  },\n  fontWeight: (v, o) => {\n    o.fontWeight = v\n  },\n  lineHeight: (v, o) => {\n    o.lineHeight = toCss(v)\n  },\n  textAlign: (v, o) => {\n    o.textAlign = v\n  },\n\n  // layout\n  w: (v, o) => {\n    o.width = toCss(v)\n  },\n  h: (v, o) => {\n    o.height = toCss(v)\n  },\n  minW: (v, o) => {\n    o.minWidth = toCss(v)\n  },\n  maxW: (v, o) => {\n    o.maxWidth = toCss(v)\n  },\n  minH: (v, o) => {\n    o.minHeight = toCss(v)\n  },\n  maxH: (v, o) => {\n    o.maxHeight = toCss(v)\n  }\n}\n\nexport const COMMON_KEYS = Object.keys(COMMON_MAP) as Array<\n  keyof CommonStyleProps\n>\n\nexport function hasAnyCommonStyleProps(props: Partial<CommonStyleProps>) {\n  for (const k of COMMON_KEYS) {\n    if (props[k] != null) return true\n  }\n  return false\n}\n\nexport function resolveCommonStyleProps(\n  props: Partial<CommonStyleProps>\n): React.CSSProperties {\n  const out: React.CSSProperties = {}\n\n  for (const k of COMMON_KEYS) {\n    const value = props[k]\n    if (value != null) COMMON_MAP[k](value, out)\n  }\n\n  return out\n}\n\n/**\n * Applies common style props (if present) to a chosen slot.\n * Common props are resolved by `resolveCommonStyleProps`.\n */\nexport function applyCommonsToStyles<TStyles extends Record<string, any>>(\n  styles: TStyles,\n  props: Partial<CommonStyleProps>,\n  slotOverride?: keyof TStyles\n): TStyles {\n  if (!hasAnyCommonStyleProps(props)) return styles\n\n  const keys = Object.keys(styles)\n  if (keys.length === 0) return styles\n\n  const slot =\n    slotOverride ??\n    (('container' in styles ? 'container' : keys[0]) as keyof TStyles)\n\n  const common = resolveCommonStyleProps(props)\n\n  return {\n    ...styles,\n    [slot]: { ...(styles[slot] ?? {}), ...common }\n  } as TStyles\n}\n","// Types\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nimport type { SplitResult, StyleMap } from '../types'\n\n/**\n * Splits the style map into:\n * - `inline`: slot styles without `__rules`\n * - `rulesBySlot`: extracted `__rules` grouped by slot\n *\n * This lets us:\n * - apply inline styles directly via `style={...}`\n * - inject selectors/pseudos via generated CSS classes\n */\nexport function splitRules<TStyles extends StyleMap>(\n  styles: TStyles\n): SplitResult<TStyles> {\n  const inline: any = {}\n  const rulesBySlot: any = {}\n\n  for (const key in styles) {\n    const slot = styles[key]\n    if (!slot) continue\n\n    const { __rules, ...rest } = slot as any\n    inline[key] = rest\n\n    if (__rules && Object.keys(__rules).length > 0) {\n      rulesBySlot[key] = __rules\n    }\n  }\n\n  return { inline, rulesBySlot }\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\nimport type { CommonStyleProps } from '../types'\n\nimport { COMMON_KEYS } from './resolveCommonStyleProps'\n\nconst COMMON_KEY_SET = new Set<string>(COMMON_KEYS as readonly string[])\n\nexport function stripCommonProps<T extends object>(\n  props: T\n): Omit<T, keyof CommonStyleProps> {\n  const out: Record<string, unknown> = {}\n\n  for (const key of Object.keys(props as any)) {\n    if (!COMMON_KEY_SET.has(key)) {\n      out[key] = (props as any)[key]\n    }\n  }\n\n  return out as Omit<T, keyof CommonStyleProps>\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// External Libraries\nimport { useMemo, useInsertionEffect } from 'react'\n\n// Utils\nimport {\n  hashStr,\n  splitRules,\n  mergeStyleMaps,\n  injectSlotRules,\n  stableStringify,\n  applyCommonsToStyles\n} from './utils'\n\n// Types\nimport type {\n  CSSVars,\n  RuleMap,\n  StyleMap,\n  StylesFactory,\n  UseThemedStylesOptions\n} from './types'\n\n/**\n * useThemedStyles\n *\n * A React-Native-like style factory hook for React Web that also supports:\n * - CSS variables in inline styles\n * - Pseudo selectors, nested selectors, and vendor selectors via `__rules`\n *\n * It returns two maps:\n * - `styles`: inline styles for each slot\n * - `classes`: generated classes for each slot (needed for `__rules`)\n *\n * Usage:\n * ```tsx\n * const { styles, classes } = useThemedStyles(props, createStyles)\n *\n * return (\n *   <button style={styles.item} className={classes.item}>\n *     <p style={styles.label} className={classes.label}>Hello</p>\n *   </button>\n * )\n * ```\n *\n * Notes:\n * - If a slot has no `__rules`, you can omit `className` for that slot.\n * - If you use `__rules`, you MUST apply the corresponding class for scoping.\n */\nexport function useThemedStyles<TProps, TStyles extends StyleMap>(\n  props: TProps,\n  factory: StylesFactory<TProps, TStyles>,\n  options?: UseThemedStylesOptions<TProps, TStyles>\n): {\n  styles: Record<keyof TStyles, React.CSSProperties | CSSVars>\n  classes: Record<keyof TStyles, string>\n} {\n  /**\n   * Memoization priority:\n   * 1) deps (manual)\n   * 2) pick(props) (recommended)\n   * 3) props reference (default behavior)\n   */\n  const memoKey =\n    options?.deps ?? (options?.pick ? options.pick(props) : [props])\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: controlled by deps/pick\n  const raw = useMemo(() => factory(props), [factory, ...memoKey])\n\n  const { inline, rulesBySlot } = useMemo(() => splitRules(raw), [raw])\n\n  const merged = useMemo(\n    () => mergeStyleMaps(inline as any, options?.override),\n    [inline, options?.override]\n  )\n\n  const withCommons = useMemo(() => {\n    if (!options?.applyCommonProps) return merged\n    return applyCommonsToStyles(merged as any, props as any, options.commonSlot)\n  }, [merged, props, options?.applyCommonProps, options?.commonSlot])\n\n  /**\n   * Base id is derived only from the rules signature.\n   * This keeps class names stable whenever rules don't change.\n   */\n  const baseId = useMemo(() => {\n    const sig = stableStringify(rulesBySlot)\n    const key = hashStr(sig)\n    return options?.debugName ? `pxr-${options.debugName}-${key}` : `pxr-${key}`\n  }, [rulesBySlot, options?.debugName])\n\n  /**\n   * Generated class per slot.\n   * Example: pxr-<hash>__item\n   */\n  const classes = useMemo(() => {\n    const out: any = {}\n    for (const slotKey of Object.keys(withCommons)) {\n      out[slotKey] = `${baseId}__${slotKey}`\n    }\n    return out as Record<keyof TStyles, string>\n  }, [baseId, withCommons])\n\n  /**\n   * Inject rules into the runtime <style> tag.\n   *\n   * We use `useInsertionEffect` so styles are inserted before layout/paint\n   * when supported (best for CSS-in-JS style injection).\n   */\n  useInsertionEffect(() => {\n    for (const slotKey of Object.keys(rulesBySlot as any)) {\n      const rules = (rulesBySlot as any)[slotKey] as RuleMap | undefined\n      if (!rules) continue\n      injectSlotRules((classes as any)[slotKey], rules)\n    }\n  }, [rulesBySlot, classes])\n\n  return { styles: withCommons as any, classes }\n}\n","// External Libraries\nimport type { CSSProperties, JSX } from 'react'\n\n// Types\nimport type { TextAlign, TypographyVariant } from './types'\n\nconst primaryColor = 'var(--px-text-primary)'\nconst secondaryColor = 'var(--px-text-secondary)'\n\nexport const typographyVariants: Record<TypographyVariant, CSSProperties> = {\n  h1: {\n    fontSize: '3rem',\n    fontWeight: '700',\n    lineHeight: '1.25',\n    color: primaryColor\n  },\n  h2: {\n    fontSize: '2.25rem',\n    fontWeight: '600',\n    lineHeight: '1.35',\n    color: primaryColor\n  },\n  h3: {\n    fontSize: '1.875rem',\n    fontWeight: '600',\n    color: primaryColor\n  },\n  h4: {\n    fontSize: '1.5rem',\n    fontWeight: '500',\n    color: primaryColor\n  },\n  h5: {\n    fontSize: '1.25rem',\n    fontWeight: '500',\n    color: primaryColor\n  },\n  b1: {\n    fontSize: '1rem',\n    fontWeight: '500',\n    color: primaryColor\n  },\n  b2: {\n    fontSize: '0.875rem',\n    color: secondaryColor\n  },\n  b3: {\n    fontSize: '0.75rem',\n    color: secondaryColor\n  },\n  caption: {\n    fontSize: '0.75rem',\n    color: secondaryColor\n  },\n  legal: {\n    fontSize: '0.65rem',\n    textTransform: 'uppercase',\n    letterSpacing: '0.025em',\n    color: secondaryColor\n  }\n}\n\nexport const variantToElement: Record<\n  TypographyVariant,\n  keyof JSX.IntrinsicElements\n> = {\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  b1: 'p',\n  b2: 'p',\n  b3: 'p',\n  caption: 'span',\n  legal: 'span'\n}\n\nexport const alignText: Record<TextAlign, CSSProperties> = {\n  left: { textAlign: 'left' },\n  center: { textAlign: 'center' },\n  right: { textAlign: 'right' },\n  justify: { textAlign: 'justify' }\n}\n","// Utils\nimport { alignText, typographyVariants } from './config'\n\n// Types\nimport type { TypographyProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createTypographyStyles(props: TypographyProps): StyleMap {\n  const { isLoading, variant, align = 'left' } = props\n\n  return {\n    base: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      borderBottom: '1px solid var(--pixel-border, #e5e7eb)',\n      gap: 0,\n      animation: isLoading ? 'animate-pulse 1.5s infinite' : undefined\n    },\n\n    loading: {\n      width: '50%',\n      height: '1em',\n      display: 'inline-block',\n      backgroundColor: 'var(--pixel-gray-300, #d1d5db)',\n      borderRadius: '0.25rem'\n    },\n\n    text: {\n      ...alignText[align],\n      ...typographyVariants[variant]\n    }\n  }\n}\n","// Utils\nimport { variantToElement } from './config'\n\n// Types\nimport type { TypographyProps } from './types'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTypographyStyles } from './style'\n\nexport function Typography(props: TypographyProps) {\n  const {\n    id,\n    as,\n    href,\n    variant,\n    children,\n    placeholder,\n    isLoading = false,\n    styles: styleTypography\n  } = props\n\n  const { styles } = useThemedStyles(props, createTypographyStyles, {\n    pick: p => [p.isLoading, p.variant, p.align],\n    commonSlot: 'text',\n    applyCommonProps: true,\n    override: styleTypography\n  })\n\n  const Component = as ?? variantToElement[variant]\n\n  if (isLoading) {\n    return (\n      <span\n        id={id}\n        aria-hidden=\"true\"\n        role=\"presentation\"\n        style={{ ...styles.text, ...styles.loading }}\n      />\n    )\n  }\n\n  const sharedProps = {\n    id,\n    style: styles.text,\n    'aria-label': placeholder\n  }\n\n  if (href) {\n    return (\n      <a href={href} {...sharedProps}>\n        {children}\n      </a>\n    )\n  }\n\n  return <Component {...sharedProps}>{children}</Component>\n}\n"],"mappings":"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"}

package/dist/index--nD5Wzza.d.ts

@@ -0,0 +1,32 @@
+import { n as CommonStyleProps, t as StyleMap } from "./useThemedStyles-DyrejrCM.js";
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/toolkit/TabSwitch/styles.d.ts
+declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): StyleMap;
+//#endregion
+//#region src/components/toolkit/TabSwitch/types.d.ts
+interface SwitchOption<T> {
+  value: T;
+  label: string;
+  disabled?: boolean;
+  icon?: ReactNode;
+}
+interface TabSwitchProps<T> extends CommonStyleProps {
+  currentValue: T;
+  options: SwitchOption<T>[];
+  disabled?: boolean;
+  fitContent?: boolean;
+  layoutId?: string;
+  selectedColor?: string;
+  selectedLabelColor?: string;
+  variant?: 'default' | 'underline';
+  styles?: Partial<ReturnType<typeof createTabSwitchStyles>>;
+  onChange: (value: T) => void;
+}
+//#endregion
+//#region src/components/toolkit/TabSwitch/index.d.ts
+declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SwitchOption as n, TabSwitchProps as r, TabSwitch as t };
+//# sourceMappingURL=index--nD5Wzza.d.ts.map

package/dist/{index-jFi4YRO5.d.ts → index-B0CCFNqx.d.ts}

@@ -99,15 +99,15 @@ interface ThemeTokens {
    * Spacing scale (in px numbers, usually converted to `px` in styles).
    * Keeps spacing consistent across components.
    */
-  spacing: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl', number>;
+  spacing: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl', number | string>;
   /**
    * Border radius scale (in px numbers).
    */
-  borderRadius: Record<'none' | 'sm' | 'md' | 'lg' | 'full', number>;
+  borderRadius: Record<'none' | 'sm' | 'md' | 'lg' | 'full', number | string>;
   /**
    * Font size scale (in px numbers).
    */
-  fontSize: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl', number>;
+  fontSize: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl', number | string>;
   /**
    * Font weight scale (numeric values).
    */
@@ -274,4 +274,4 @@ declare const ThemeProvider: React.FC<ThemeProviderProps>;
 declare function useTheme(): ThemeContextData;
 //#endregion
 export { ThemeName as a, ThemeRegistry as c, ThemeMode as i, ThemeTokens as l, useTheme as n, ThemePersistence as o, ThemeContextData as r, ThemeProviderProps as s, ThemeProvider as t };
-//# sourceMappingURL=index-jFi4YRO5.d.ts.map
+//# sourceMappingURL=index-B0CCFNqx.d.ts.map

package/dist/index-C_T04IuG.d.ts

@@ -0,0 +1,27 @@
+import { r as TextProps, t as StyleMap } from "./useThemedStyles-DyrejrCM.js";
+import { ElementType, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/toolkit/Typography/style.d.ts
+declare function createTypographyStyles(props: TypographyProps): StyleMap;
+//#endregion
+//#region src/components/toolkit/Typography/types.d.ts
+interface TypographyProps extends TextProps {
+  variant: TypographyVariant;
+  id?: string;
+  href?: string;
+  as?: ElementType;
+  children: ReactNode;
+  align?: TextAlign;
+  isLoading?: boolean;
+  placeholder?: string;
+  styles?: Partial<ReturnType<typeof createTypographyStyles>>;
+}
+type TextAlign = 'left' | 'center' | 'right' | 'justify';
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'caption' | 'legal';
+//#endregion
+//#region src/components/toolkit/Typography/index.d.ts
+declare function Typography(props: TypographyProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Typography as t };
+//# sourceMappingURL=index-C_T04IuG.d.ts.map

package/dist/index.d.ts

@@ -1,3 +1,4 @@
-import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-CZOu4S--.js";
-import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-jFi4YRO5.js";
-export { SwitchOption, TabSwitch, TabSwitchProps, ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, useTheme };
+import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index--nD5Wzza.js";
+import { t as Typography } from "./index-C_T04IuG.js";
+import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-B0CCFNqx.js";
+export { SwitchOption, TabSwitch, TabSwitchProps, ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, Typography, useTheme };