softable-pixels-web 1.0.8 → 1.1.1

package/dist/{index-CDUVPVvZ.d.ts → index-DUrGjyKy.d.ts}

@@ -1,6 +1,7 @@
-import { r as CommonStyleProps, t as StyleMap } from "./useThemedStyles-CniQ6zDU.js";
+import { t as CommonStyleProps } from "./styleProps-D405c8KF.js";
+import { n as StyleMap } from "./useThemedStyles-B7irjShy.js";
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/components/toolkit/TabSwitch/styles.d.ts
 declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): StyleMap;
@@ -26,7 +27,7 @@ interface TabSwitchProps<T> extends CommonStyleProps {
 }
 //#endregion
 //#region src/components/toolkit/TabSwitch/index.d.ts
-declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime0.JSX.Element;
+declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime1.JSX.Element;
 //#endregion
 export { SwitchOption as n, TabSwitchProps as r, TabSwitch as t };
-//# sourceMappingURL=index-CDUVPVvZ.d.ts.map
+//# sourceMappingURL=index-DUrGjyKy.d.ts.map

package/dist/{index-CADs9cEh.d.ts → index-akSk71wZ.d.ts}

@@ -10,4 +10,4 @@ interface CheckItemProps {
 declare const CheckItem: React.FC<CheckItemProps>;
 //#endregion
 export { CheckItem as t };
-//# sourceMappingURL=index-CADs9cEh.d.ts.map
+//# sourceMappingURL=index-akSk71wZ.d.ts.map

package/dist/{index-Dkyy3OOB.d.ts → index-pnnP9M22.d.ts}

@@ -1,5 +1,6 @@
-import { i as LayoutProps, o as PaddingProps, t as StyleMap } from "./useThemedStyles-CniQ6zDU.js";
-import { n as TypographyVariant } from "./types-WcPOnA5M.js";
+import { i as PaddingProps, n as LayoutProps } from "./styleProps-D405c8KF.js";
+import { n as StyleMap } from "./useThemedStyles-B7irjShy.js";
+import { n as TypographyVariant } from "./types-CDUx-y9q.js";
 import React, { ReactNode } from "react";
 
 //#region src/components/commons/inputs/Input/styles.d.ts
@@ -45,4 +46,4 @@ interface InputProps extends LayoutProps, PaddingProps {
 declare const Input: React.FC<InputProps>;
 //#endregion
 export { Input as t };
-//# sourceMappingURL=index-Dkyy3OOB.d.ts.map
+//# sourceMappingURL=index-pnnP9M22.d.ts.map

package/dist/index.d.ts

@@ -1,11 +1,12 @@
-import "./types-WcPOnA5M.js";
-import { t as Button } from "./index-NpIJSn1Q.js";
-import { t as Input } from "./index-Dkyy3OOB.js";
-import { t as TextArea } from "./index-feodN4N9.js";
-import { t as CheckItem } from "./index-CADs9cEh.js";
-import { t as Checkbox } from "./index-DuKjuLFf.js";
+import "./types-CDUx-y9q.js";
+import { t as Button } from "./index-DOwpBVkM.js";
+import { t as IconButton } from "./index-CyvtOmP2.js";
+import { t as Input } from "./index-pnnP9M22.js";
+import { t as TextArea } from "./index-BspBF3Mv.js";
+import { t as CheckItem } from "./index-akSk71wZ.js";
+import { t as Checkbox } from "./index-DH2bD-Yj.js";
 import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
-import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-CDUVPVvZ.js";
+import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-DUrGjyKy.js";
 import { Typography } from "./typography.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-B33Qb8xC.js";
-export { Button, CheckItem, Checkbox, InfoSummary, InfoSummaryItem, InfoSummaryProps, Input, SwitchOption, TabSwitch, TabSwitchProps, TextArea, ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, Typography, useTheme };
+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-CIxyqe-m.js";
+export { Button, CheckItem, Checkbox, IconButton, InfoSummary, InfoSummaryItem, InfoSummaryProps, Input, SwitchOption, TabSwitch, TabSwitchProps, TextArea, ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, Typography, useTheme };

package/dist/index.js

@@ -1,13 +1,15 @@
-import "./Icon-T_2VPPNe.js";
-import { t as Typography } from "./Typography-ZFnL1M33.js";
-import { t as Checkbox } from "./Checkbox-DdPF40bm.js";
-import { n as useTheme, t as ThemeProvider } from "./ThemeContext-CMCP5Hqz.js";
-import { t as TabSwitch } from "./TabSwitch-CHS3g1CP.js";
-import { t as InfoSummary } from "./InfoSummary-D4GgSlQ0.js";
-import { t as CheckItem } from "./CheckItem-OVa0nZlJ.js";
-import { t as Button } from "./Button-rI1zyBIr.js";
-import "./Label-DFcePle9.js";
-import { t as Input } from "./Input-9E5L4S5O.js";
-import { t as TextArea } from "./TextArea-CrJs9f5t.js";
+import "./Icon-Djde8oXI.js";
+import "./useThemedStyles-3rUXJYgS.js";
+import { t as Typography } from "./Typography-BE-vQSfx.js";
+import { t as Checkbox } from "./Checkbox-DErw2zDe.js";
+import { n as useTheme, t as ThemeProvider } from "./ThemeContext-BsU2ZyE5.js";
+import { t as TabSwitch } from "./TabSwitch-De30bFX2.js";
+import { t as InfoSummary } from "./InfoSummary-BwrLkEfC.js";
+import { t as CheckItem } from "./CheckItem-DuJvhDP_.js";
+import { t as Button } from "./Button-CwK9nssQ.js";
+import { t as IconButton } from "./IconButton-IhShUhfe.js";
+import "./Label-QQpNWSeV.js";
+import { t as Input } from "./Input-C7WKOO_t.js";
+import { t as TextArea } from "./TextArea-jpLThSHP.js";
 
-export { Button, CheckItem, Checkbox, InfoSummary, Input, TabSwitch, TextArea, ThemeProvider, Typography, useTheme };
+export { Button, CheckItem, Checkbox, IconButton, InfoSummary, Input, TabSwitch, TextArea, ThemeProvider, Typography, useTheme };

package/dist/info-summary.js

@@ -1,4 +1,5 @@
-import "./Typography-ZFnL1M33.js";
-import { t as InfoSummary } from "./InfoSummary-D4GgSlQ0.js";
+import "./useThemedStyles-3rUXJYgS.js";
+import "./Typography-BE-vQSfx.js";
+import { t as InfoSummary } from "./InfoSummary-BwrLkEfC.js";
 
 export { InfoSummary };

package/dist/input.d.ts

@@ -1,3 +1,3 @@
-import "./types-WcPOnA5M.js";
-import { t as Input } from "./index-Dkyy3OOB.js";
+import "./types-CDUx-y9q.js";
+import { t as Input } from "./index-pnnP9M22.js";
 export { Input };

package/dist/input.js

@@ -1,6 +1,7 @@
-import "./Icon-T_2VPPNe.js";
-import "./Typography-ZFnL1M33.js";
-import "./Label-DFcePle9.js";
-import { t as Input } from "./Input-9E5L4S5O.js";
+import "./Icon-Djde8oXI.js";
+import "./useThemedStyles-3rUXJYgS.js";
+import "./Typography-BE-vQSfx.js";
+import "./Label-QQpNWSeV.js";
+import { t as Input } from "./Input-C7WKOO_t.js";
 
 export { Input };

package/dist/styleProps-D405c8KF.d.ts

@@ -0,0 +1,46 @@
+//#region src/hooks/useThemedStyles/types/styleProps.d.ts
+type Space = number | string;
+type Size = number | string;
+interface MarginProps {
+  m?: Space;
+  mx?: Space;
+  my?: Space;
+  mt?: Space;
+  mr?: Space;
+  mb?: Space;
+  ml?: Space;
+}
+interface PaddingProps {
+  p?: Space;
+  px?: Space;
+  py?: Space;
+  pt?: Space;
+  pr?: Space;
+  pb?: Space;
+  pl?: Space;
+}
+interface FontWeights {
+  light: number;
+  regular: number;
+  medium: number;
+  bold: number;
+  black: number;
+}
+interface TextProps {
+  fontSize?: number | string;
+  lineHeight?: number | string;
+  fontWeight?: keyof FontWeights | (number & {});
+  textAlign?: React.CSSProperties['textAlign'];
+}
+interface LayoutProps {
+  w?: Size;
+  h?: Size;
+  minW?: Size;
+  maxW?: Size;
+  minH?: Size;
+  maxH?: Size;
+}
+type CommonStyleProps = MarginProps & PaddingProps & TextProps & LayoutProps;
+//#endregion
+export { TextProps as a, PaddingProps as i, LayoutProps as n, MarginProps as r, CommonStyleProps as t };
+//# sourceMappingURL=styleProps-D405c8KF.d.ts.map

package/dist/tab-switch.d.ts

@@ -1,2 +1,2 @@
-import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-CDUVPVvZ.js";
+import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-DUrGjyKy.js";
 export { SwitchOption, TabSwitch, TabSwitchProps };

package/dist/tab-switch.js

@@ -1,4 +1,5 @@
-import "./Typography-ZFnL1M33.js";
-import { t as TabSwitch } from "./TabSwitch-CHS3g1CP.js";
+import "./useThemedStyles-3rUXJYgS.js";
+import "./Typography-BE-vQSfx.js";
+import { t as TabSwitch } from "./TabSwitch-De30bFX2.js";
 
 export { TabSwitch };

package/dist/text-area.d.ts

@@ -1,3 +1,3 @@
-import "./types-WcPOnA5M.js";
-import { t as TextArea } from "./index-feodN4N9.js";
+import "./types-CDUx-y9q.js";
+import { t as TextArea } from "./index-BspBF3Mv.js";
 export { TextArea };

package/dist/text-area.js

@@ -1,6 +1,7 @@
-import "./Icon-T_2VPPNe.js";
-import "./Typography-ZFnL1M33.js";
-import "./Label-DFcePle9.js";
-import { t as TextArea } from "./TextArea-CrJs9f5t.js";
+import "./Icon-Djde8oXI.js";
+import "./useThemedStyles-3rUXJYgS.js";
+import "./Typography-BE-vQSfx.js";
+import "./Label-QQpNWSeV.js";
+import { t as TextArea } from "./TextArea-jpLThSHP.js";
 
 export { TextArea };

package/dist/theme-context.d.ts

@@ -1,2 +1,2 @@
-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-B33Qb8xC.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-CIxyqe-m.js";
 export { ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, useTheme };

package/dist/theme-context.js

@@ -1,5 +1,5 @@
 'use client';
 
-import { n as useTheme, t as ThemeProvider } from "./ThemeContext-CMCP5Hqz.js";
+import { n as useTheme, t as ThemeProvider } from "./ThemeContext-BsU2ZyE5.js";
 
 export { ThemeProvider, useTheme };

package/dist/{types-WcPOnA5M.d.ts → types-CDUx-y9q.d.ts}

@@ -1,8 +1,26 @@
-import { a as MarginProps, s as TextProps, t as StyleMap } from "./useThemedStyles-CniQ6zDU.js";
+import { a as TextProps, r as MarginProps } from "./styleProps-D405c8KF.js";
+import { r as TypeStyles, t as SlotStyle } from "./useThemedStyles-B7irjShy.js";
 import { ElementType, ReactNode } from "react";
 
 //#region src/components/toolkit/Typography/style.d.ts
-declare function createTypographyStyles(props: TypographyProps): StyleMap;
+declare function createTypographyStyles(props: TypographyProps): {
+  base: {
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    borderBottom: string;
+    gap: number;
+    animation: "animate-pulse 1.5s infinite" | undefined;
+  };
+  loading: {
+    width: string;
+    height: string;
+    display: "inline-block";
+    backgroundColor: "var(--pixel-gray-300, #d1d5db)";
+    borderRadius: string;
+  };
+  text: SlotStyle;
+};
 //#endregion
 //#region src/components/toolkit/Typography/types.d.ts
 interface TypographyProps extends TextProps, MarginProps {
@@ -15,10 +33,11 @@ interface TypographyProps extends TextProps, MarginProps {
   color?: string;
   isLoading?: boolean;
   placeholder?: string;
-  styles?: Partial<ReturnType<typeof createTypographyStyles>>;
+  className?: string;
+  styles?: TypeStyles<typeof createTypographyStyles>;
 }
 type TextAlign = 'left' | 'center' | 'right' | 'justify';
 type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'b1' | 'b2' | 'b3' | 'caption' | 'legal';
 //#endregion
 export { TypographyVariant as n, TypographyProps as t };
-//# sourceMappingURL=types-WcPOnA5M.d.ts.map
+//# sourceMappingURL=types-CDUx-y9q.d.ts.map

package/dist/typography.d.ts

@@ -1,4 +1,4 @@
-import { t as TypographyProps } from "./types-WcPOnA5M.js";
+import { t as TypographyProps } from "./types-CDUx-y9q.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/toolkit/Typography/index.d.ts

package/dist/typography.js

@@ -1,3 +1,4 @@
-import { t as Typography } from "./Typography-ZFnL1M33.js";
+import "./useThemedStyles-3rUXJYgS.js";
+import { t as Typography } from "./Typography-BE-vQSfx.js";
 
 export { Typography };

package/dist/{Typography-ZFnL1M33.js → useThemedStyles-3rUXJYgS.js}

@@ -1,5 +1,4 @@
 import { useInsertionEffect, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
 
 //#region src/hooks/useThemedStyles/utils/hasString.ts
 /**
@@ -145,8 +144,26 @@ function mergeStyleMaps(base, override) {
 	return out;
 }
 
+//#endregion
+//#region src/hooks/useThemedStyles/types/styleProps.ts
+const WEIGHTS = {
+	light: 300,
+	regular: 400,
+	medium: 500,
+	bold: 700,
+	black: 900
+};
+
+//#endregion
+//#region src/hooks/useThemedStyles/types/useThemedStyles.ts
+/**
+* Creates a style map from a plain object.
+*/
+const styled = (styles) => styles;
+
 //#endregion
 //#region src/hooks/useThemedStyles/utils/resolveCommonStyleProps.ts
+/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */
 function toCss(v) {
 	return typeof v === "number" ? `${v}rem` : v;
 }
@@ -205,7 +222,7 @@ const COMMON_MAP = {
 		o.fontSize = toCss(v);
 	},
 	fontWeight: (v, o) => {
-		o.fontWeight = v;
+		o.fontWeight = v in WEIGHTS ? WEIGHTS[v] : v;
 	},
 	lineHeight: (v, o) => {
 		o.lineHeight = toCss(v);
@@ -390,155 +407,5 @@ function useThemedStyles(props, factory, options) {
 }
 
 //#endregion
-//#region src/hooks/useThemedStyles/types/useThemedStyles.ts
-/**
-* Creates a style map from a plain object.
-*/
-const styled = (styles) => styles;
-
-//#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", color } = props;
-	return styled({
-		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],
-			color: color ?? typographyVariants[variant].color
-		}
-	});
-}
-
-//#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 { styled as n, useThemedStyles as r, Typography as t };
-//# sourceMappingURL=Typography-ZFnL1M33.js.map
+export { styled as n, WEIGHTS as r, useThemedStyles as t };
+//# sourceMappingURL=useThemedStyles-3rUXJYgS.js.map

package/dist/useThemedStyles-3rUXJYgS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemedStyles-3rUXJYgS.js","names":["parts: string[]","WEIGHTS: FontWeights","COMMON_MAP: Record<\n  keyof CommonStyleProps,\n  (value: any, out: React.CSSProperties) => void\n>","out: React.CSSProperties","inline: any","rulesBySlot: any","out: any"],"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/types/styleProps.ts","../src/hooks/useThemedStyles/types/useThemedStyles.ts","../src/hooks/useThemedStyles/utils/resolveCommonStyleProps.ts","../src/hooks/useThemedStyles/utils/splitRules.ts","../src/hooks/useThemedStyles/utils/stripCommonProps.ts","../src/hooks/useThemedStyles/index.ts"],"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\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\nimport type { SlotStyle, StyleMap } from '../types'\n\nexport function mergeStyleMaps<\n  T extends StyleMap,\n  X extends Partial<Record<keyof T, SlotStyle>>\n>(base: T, override?: X): T {\n  if (!override) return base\n  const out = { ...base } as T\n\n  for (const key in override) {\n    out[key] = { ...(base[key] ?? {}), ...(override[key] ?? {}) } as any\n  }\n\n  return out\n}\n","type Space = number | string\ntype Size = number | string\n\nexport interface MarginProps {\n  m?: Space\n  mx?: Space\n  my?: Space\n  mt?: Space\n  mr?: Space\n  mb?: Space\n  ml?: Space\n}\n\nexport interface PaddingProps {\n  p?: Space\n  px?: Space\n  py?: Space\n  pt?: Space\n  pr?: Space\n  pb?: Space\n  pl?: Space\n}\n\nexport interface FontWeights {\n  light: number\n  regular: number\n  medium: number\n  bold: number\n  black: number\n}\n\nexport interface TextProps {\n  fontSize?: number | string\n  lineHeight?: number | string\n  fontWeight?: keyof FontWeights | (number & {})\n  textAlign?: React.CSSProperties['textAlign']\n}\n\nexport interface LayoutProps {\n  w?: Size\n  h?: Size\n  minW?: Size\n  maxW?: Size\n  minH?: Size\n  maxH?: Size\n}\n\nexport type CommonStyleProps = MarginProps &\n  PaddingProps &\n  TextProps &\n  LayoutProps\n\nexport const WEIGHTS: FontWeights = {\n  light: 300,\n  regular: 400,\n  medium: 500,\n  bold: 700,\n  black: 900\n}\n","/**\n * Allows CSS Variables to be used in inline styles.\n *\n * Example:\n * ```ts\n * const style: CSSVars = { \"--btn-bg\": \"#111\", background: \"var(--btn-bg)\" }\n * ```\n */\nexport type CSSVars = React.CSSProperties &\n  Record<`--${string}`, string | number>\n\n/**\n * A rule declaration is like CSSProperties, but also supports CSS variables.\n * Used inside `__rules`.\n */\nexport type RuleDecl = React.CSSProperties &\n  Record<`--${string}`, string | number>\n\n/**\n * Map of selectors to declarations.\n *\n * Key examples:\n * - \"&:hover\"\n * - \"& > p\"\n * - \":focus-visible\"        (auto-scoped to the slot class)\n * - \"::before\"             (auto-scoped)\n * - \"span\"                 (scoped as descendant)\n * - \"&::-webkit-scrollbar\" (scoped)\n */\nexport type RuleMap = Record<string, RuleDecl>\n\n/**\n * Slot style supports a reserved `__rules` key.\n *\n * - Everything EXCEPT `__rules` is applied as inline style.\n * - `__rules` is converted into runtime CSS and injected into a <style> tag.\n *\n * This enables hover, pseudo-elements, descendant selectors, and vendor selectors.\n */\nexport type SlotStyle = (React.CSSProperties | CSSVars) & {\n  __rules?: RuleMap\n}\n\n/**\n * A map of \"slots\" to styles.\n *\n * Example:\n * ```ts\n * {\n *   container: {\n *    ...,\n *\n *    __rules: {\n *      '&:hover': { ... },\n *      ...\n *    }\n *   },\n *   label: { ... },\n *   icon: { ... }\n * }\n * ```\n */\nexport type StyleMap = Record<string, SlotStyle>\n\n/**\n * A style factory receives component props and returns a slot style map.\n */\nexport type StylesFactory<TProps, TStyles extends StyleMap> = (\n  props: TProps\n) => TStyles\n\n/**\n * Options for `useThemedStyles`.\n */\nexport type UseThemedStylesOptions<TProps, TStyles extends StyleMap> = {\n  /**\n   * Optional optimization.\n   *\n   * When provided, the hook memoizes using the returned values instead of depending\n   * on the entire `props` object reference.\n   *\n   * Recommended: create a `pickXStyleProps` per component.\n   *\n   * Example:\n   * ```ts\n   * pick: (p) => [p.variant, p.size, p.disabled, p.color]\n   * ```\n   */\n  pick?: (props: TProps) => readonly unknown[]\n\n  /**\n   * Optional manual dependencies (highest priority).\n   * If provided, `deps` is used instead of `pick` or `props`.\n   */\n  deps?: readonly unknown[]\n\n  /**\n   * Optional per-slot override.\n   *\n   * The override is shallow-merged per slot:\n   *   mergedSlot = { ...baseSlot, ...overrideSlot }\n   *\n   * Example:\n   * ```ts\n   * override: { container: { padding: \"0 24px\" } }\n   * ```\n   */\n  override?: Partial<Record<keyof TStyles, SlotStyle>>\n\n  /**\n   * When true, reads \"common style props\" from `props`\n   * and applies them on top of the chosen slot (default: \"container\").\n   */\n  applyCommonProps?: boolean\n\n  /**\n   * Where to apply common style props.\n   *\n   * Defaults to:\n   *  - \"container\" if that slot exists\n   *  - otherwise the first slot key returned by the style factory\n   */\n  commonSlot?: keyof TStyles\n\n  /**\n   * Optional debug label to make generated class names more readable.\n   * Example: \"Button\" => \"pxr-Button-<hash>__container\"\n   */\n  debugName?: string\n}\n\nexport type SplitResult<TStyles extends StyleMap> = {\n  /**\n   * Inline styles only (slot styles with `__rules` removed).\n   */\n  inline: Record<keyof TStyles, Omit<TStyles[keyof TStyles], '__rules'>>\n\n  /**\n   * Extracted rule maps by slot.\n   */\n  rulesBySlot: Partial<Record<keyof TStyles, RuleMap>>\n}\n\n/**\n * Creates a style map from a plain object.\n */\nexport const styled = <T extends Record<string, SlotStyle>>(styles: T) => styles\n\n/**\n * A function that returns a style map.\n */\ntype StylesFactoryAny = (...args: any[]) => StyleMap\n\n/**\n * A map of partial style maps.\n */\nexport type TypeStyles<TFactory extends StylesFactoryAny> = Partial<{\n  [K in keyof ReturnType<TFactory>]: SlotStyle\n}>\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// Types\nimport { WEIGHTS, 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 in WEIGHTS ? WEIGHTS[v as keyof typeof WEIGHTS] : 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  /**\n   * `override` is often passed inline (`{ container: {...} }`), which changes reference\n   * every render and would break memoization.\n   *\n   * We create a stable signature string from the override and use it as the dependency.\n   * This makes the merge re-run only when override *content* changes.\n   */\n  const overrideSig = useMemo(\n    () => stableStringify(options?.override ?? {}),\n    // biome-ignore lint/correctness/useExhaustiveDependencies: we intentionally depend on reference here to recompute signature\n    [options?.override] as readonly unknown[]\n  )\n\n  /**\n   * Merge inline styles with optional override (shallow merge per slot).\n   *\n   * Dependency is `overrideSig` (content), not the object reference.\n   */\n  const merged = useMemo(\n    () => {\n      return mergeStyleMaps(\n        inline as unknown as StyleMap,\n        options?.override as any\n      ) as any\n    },\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n    [inline, overrideSig] as readonly unknown[]\n  )\n\n  /**\n   * Optionally apply common style props (spacing/typography/layout) on top of a slot.\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   *\n   * Important:\n   * - It must be stable unless slots or rule-signature changes.\n   * - It should NOT depend on `withCommons` (since commons may change frequently).\n   * - Use `inline` keys (slots returned by the factory) as the source of truth.\n   *\n   * Example: pxr-<hash>__item\n   */\n  const classes = useMemo(() => {\n    const out: any = {}\n    for (const slotKey of Object.keys(inline)) {\n      out[slotKey] = `${baseId}__${slotKey}`\n    }\n    return out as Record<keyof TStyles, string>\n  }, [baseId, inline])\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"],"mappings":"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"}

package/dist/{useThemedStyles-CniQ6zDU.d.ts → useThemedStyles-B7irjShy.d.ts}

@@ -1,40 +1,3 @@
-//#region src/hooks/useThemedStyles/types/styleProps.d.ts
-type Space = number | string;
-type Size = number | string;
-interface MarginProps {
-  m?: Space;
-  mx?: Space;
-  my?: Space;
-  mt?: Space;
-  mr?: Space;
-  mb?: Space;
-  ml?: Space;
-}
-interface PaddingProps {
-  p?: Space;
-  px?: Space;
-  py?: Space;
-  pt?: Space;
-  pr?: Space;
-  pb?: Space;
-  pl?: Space;
-}
-interface TextProps {
-  fontSize?: number | string;
-  fontWeight?: React.CSSProperties['fontWeight'];
-  lineHeight?: number | string;
-  textAlign?: React.CSSProperties['textAlign'];
-}
-interface LayoutProps {
-  w?: Size;
-  h?: Size;
-  minW?: Size;
-  maxW?: Size;
-  minH?: Size;
-  maxH?: Size;
-}
-type CommonStyleProps = MarginProps & PaddingProps & TextProps & LayoutProps;
-//#endregion
 //#region src/hooks/useThemedStyles/types/useThemedStyles.d.ts
 /**
  * Allows CSS Variables to be used in inline styles.
@@ -93,6 +56,10 @@ type SlotStyle = (React.CSSProperties | CSSVars) & {
  * ```
  */
 type StyleMap = Record<string, SlotStyle>;
+/**
+ * Creates a style map from a plain object.
+ */
+declare const styled: <T extends Record<string, SlotStyle>>(styles: T) => T;
 /**
  * A function that returns a style map.
  */
@@ -102,5 +69,5 @@ type StylesFactoryAny = (...args: any[]) => StyleMap;
  */
 type TypeStyles<TFactory extends StylesFactoryAny> = Partial<{ [K in keyof ReturnType<TFactory>]: SlotStyle }>;
 //#endregion
-export { MarginProps as a, LayoutProps as i, TypeStyles as n, PaddingProps as o, CommonStyleProps as r, TextProps as s, StyleMap as t };
-//# sourceMappingURL=useThemedStyles-CniQ6zDU.d.ts.map
+export { styled as i, StyleMap as n, TypeStyles as r, SlotStyle as t };
+//# sourceMappingURL=useThemedStyles-B7irjShy.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softable-pixels-web",
-  "version": "1.0.8",
+  "version": "1.1.1",
   "description": "",
   "keywords": [],
   "author": "softable",
@@ -61,6 +61,10 @@
       "types": "./dist/button.d.ts",
       "import": "./dist/button.js"
     },
+    "./icon-button": {
+      "types": "./dist/icon-button.d.ts",
+      "import": "./dist/icon-button.js"
+    },
     "./check-item": {
       "types": "./dist/check-item.d.ts",
       "import": "./dist/check-item.js"
@@ -111,6 +115,9 @@
       ],
       "button": [
         "dist/button/index.d.ts"
+      ],
+      "icon-button": [
+        "dist/icon-button/index.d.ts"
       ]
     }
   },