softable-pixels-web 1.0.7 → 1.0.8

package/dist/{TabSwitch-DRs6-76U.js → TabSwitch-CHS3g1CP.js}

@@ -1,11 +1,11 @@
-import { n as useThemedStyles, t as Typography } from "./Typography-BaE9Y1O8.js";
+import { n as styled, r as useThemedStyles, t as Typography } from "./Typography-ZFnL1M33.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
 
 //#region src/components/toolkit/TabSwitch/components/TabSwitchItem/styles.ts
 function createTabSwitchItemStyles({ variant, disabled, selected, selectedColor }) {
 	const accent = selectedColor ?? "var(--px-color-primary)";
-	return {
+	return styled({
 		item: {
 			minHeight: "1.25rem",
 			position: "relative",
@@ -36,7 +36,7 @@ function createTabSwitchItemStyles({ variant, disabled, selected, selectedColor
 			height: 2,
 			background: selected ? accent : "transparent"
 		}
-	};
+	});
 }
 
 //#endregion
@@ -78,7 +78,7 @@ const SwitchItem = (props) => {
 //#region src/components/toolkit/TabSwitch/styles.ts
 function createTabSwitchStyles(props) {
 	const { fitContent } = props;
-	return { container: {
+	return styled({ container: {
 		display: "flex",
 		flexDirection: "row",
 		alignItems: "center",
@@ -87,7 +87,7 @@ function createTabSwitchStyles(props) {
 		borderBottom: "1px solid var(--px-border-primaryder, #e5e7eb)",
 		gap: 0,
 		__rules: { "& svg": { zIndex: 1 } }
-	} };
+	} });
 }
 
 //#endregion
@@ -96,11 +96,7 @@ const TabSwitch = (props) => {
 	{
 		const { options, disabled, layoutId, currentValue, variant = "default", onChange } = props;
 		const { styles, classes } = useThemedStyles(props, createTabSwitchStyles, {
-			pick: (p) => [
-				p.fitContent,
-				p.selectedLabelColor,
-				p.variant
-			],
+			pick: (p) => [p.disabled, p.currentValue],
 			override: props.styles,
 			applyCommonProps: true
 		});
@@ -123,4 +119,4 @@ const TabSwitch = (props) => {
 
 //#endregion
 export { TabSwitch as t };
-//# sourceMappingURL=TabSwitch-DRs6-76U.js.map
+//# sourceMappingURL=TabSwitch-CHS3g1CP.js.map

package/dist/TabSwitch-CHS3g1CP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabSwitch-CHS3g1CP.js","names":[],"sources":["../src/components/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/toolkit/TabSwitch/styles.ts","../src/components/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n  disabled?: boolean\n  selected?: boolean\n  selectedColor?: string\n  variant: 'default' | 'underline'\n}\n\nexport function createTabSwitchItemStyles({\n  variant,\n  disabled,\n  selected,\n  selectedColor\n}: Params): StyleMap {\n  const accent = selectedColor ?? 'var(--px-color-primary)'\n\n  return styled({\n    item: {\n      minHeight: '1.25rem',\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 4,\n      background: 'transparent',\n      border: 0,\n      padding: '8px 10px',\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      opacity: disabled ? 0.5 : 1,\n      userSelect: 'none',\n      whiteSpace: 'nowrap',\n      __rules: { '& > p': { zIndex: 1 } }\n    },\n\n    selectedBg:\n      variant === 'default'\n        ? {\n            position: 'absolute',\n            inset: 0,\n            borderRadius: 6,\n            border: '1px solid var(--px-border-primary)',\n            background: selected ? accent : 'transparent'\n          }\n        : {\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: -2,\n            height: 2,\n            background: selected ? accent : 'transparent'\n          }\n  })\n}\n","// External Libraries\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchOption } from '../../types'\n\n// Styles\nimport { createTabSwitchItemStyles } from './styles'\n\ntype Props<T> = {\n  option: SwitchOption<T>\n  selected: boolean\n  layoutId?: string\n  disabled?: boolean\n  selectedColor?: string\n  selectedLabelColor?: string\n  variant: 'default' | 'underline'\n  onClick: (value: T) => void\n}\n\nexport const SwitchItem = <T,>(props: Props<T>) => {\n  const { option, disabled, selected, layoutId, onClick } = props\n\n  const { styles, classes } = useThemedStyles(\n    props,\n    createTabSwitchItemStyles,\n    {\n      pick: p => [p.variant, p.selectedColor, p.selectedLabelColor, p.selected]\n    }\n  )\n\n  const isDisabled = disabled || option.disabled\n\n  return (\n    <button\n      type=\"button\"\n      style={styles.item}\n      className={classes.item}\n      tabIndex={isDisabled ? -1 : 0}\n      onClick={() => !isDisabled && onClick(option.value)}\n    >\n      {selected ? (\n        <motion.div\n          layoutId={layoutId || 'pixel-tabswitch-selected'}\n          style={styles.selectedBg}\n        />\n      ) : null}\n\n      {option.icon ? (\n        <span style={{ display: 'inline-flex' }}>{option.icon}</span>\n      ) : null}\n\n      <Typography variant=\"b1\" fontWeight=\"bold\">\n        {option.label}\n      </Typography>\n    </button>\n  )\n}\n","// Types\nimport type { TabSwitchProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>): StyleMap {\n  const { fitContent } = props\n\n  return styled({\n    container: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      color: 'var(--px-text-primary, #4b5563)',\n      width: fitContent ? 'fit-content' : '100%',\n      borderBottom: '1px solid var(--px-border-primaryder, #e5e7eb)',\n      gap: 0,\n      __rules: { '& svg': { zIndex: 1 } }\n    }\n  })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Components\nimport { SwitchItem } from './components/TabSwitchItem'\n\n// Types\nimport type { TabSwitchProps } from './types'\n\n// Styles\nimport { createTabSwitchStyles } from './styles'\n\nexport * from './types'\n\nexport const TabSwitch = <T,>(props: TabSwitchProps<T>) => {\n  {\n    const {\n      options,\n      disabled,\n      layoutId,\n      currentValue,\n      variant = 'default',\n      onChange\n    } = props\n\n    const { styles, classes } = useThemedStyles(props, createTabSwitchStyles, {\n      pick: p => [p.disabled, p.currentValue],\n      override: props.styles,\n      applyCommonProps: true\n    })\n\n    return (\n      <div style={styles.container} className={classes.container}>\n        {options.map(opt => (\n          <SwitchItem\n            key={String(opt.value)}\n            option={opt}\n            variant={variant}\n            layoutId={layoutId}\n            disabled={disabled}\n            selectedColor={props.selectedColor}\n            selected={currentValue === opt.value}\n            selectedLabelColor={props.selectedLabelColor}\n            onClick={onChange}\n          />\n        ))}\n      </div>\n    )\n  }\n}\n"],"mappings":";;;;;AAUA,SAAgB,0BAA0B,EACxC,SACA,UACA,UACA,iBACmB;CACnB,MAAM,SAAS,iBAAiB;AAEhC,QAAO,OAAO;EACZ,MAAM;GACJ,WAAW;GACX,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,QAAQ,WAAW,gBAAgB;GACnC,SAAS,WAAW,KAAM;GAC1B,YAAY;GACZ,YAAY;GACZ,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;GACpC;EAED,YACE,YAAY,YACR;GACE,UAAU;GACV,OAAO;GACP,cAAc;GACd,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC,GACD;GACE,UAAU;GACV,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC;EACR,CAAC;;;;;AC3BJ,MAAa,cAAkB,UAAoB;CACjD,MAAM,EAAE,QAAQ,UAAU,UAAU,UAAU,YAAY;CAE1D,MAAM,EAAE,QAAQ,YAAY,gBAC1B,OACA,2BACA,EACE,OAAM,MAAK;EAAC,EAAE;EAAS,EAAE;EAAe,EAAE;EAAoB,EAAE;EAAS,EAC1E,CACF;CAED,MAAM,aAAa,YAAY,OAAO;AAEtC,QACE,qBAAC;EACC,MAAK;EACL,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,UAAU,aAAa,KAAK;EAC5B,eAAe,CAAC,cAAc,QAAQ,OAAO,MAAM;;GAElD,WACC,oBAAC,OAAO;IACN,UAAU,YAAY;IACtB,OAAO,OAAO;KACd,GACA;GAEH,OAAO,OACN,oBAAC;IAAK,OAAO,EAAE,SAAS,eAAe;cAAG,OAAO;KAAY,GAC3D;GAEJ,oBAAC;IAAW,SAAQ;IAAK,YAAW;cACjC,OAAO;KACG;;GACN;;;;;ACzDb,SAAgB,sBAAyB,OAAoC;CAC3E,MAAM,EAAE,eAAe;AAEvB,QAAO,OAAO,EACZ,WAAW;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,OAAO;EACP,OAAO,aAAa,gBAAgB;EACpC,cAAc;EACd,KAAK;EACL,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;EACpC,EACF,CAAC;;;;;ACJJ,MAAa,aAAiB,UAA6B;CACzD;EACE,MAAM,EACJ,SACA,UACA,UACA,cACA,UAAU,WACV,aACE;EAEJ,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,uBAAuB;GACxE,OAAM,MAAK,CAAC,EAAE,UAAU,EAAE,aAAa;GACvC,UAAU,MAAM;GAChB,kBAAkB;GACnB,CAAC;AAEF,SACE,oBAAC;GAAI,OAAO,OAAO;GAAW,WAAW,QAAQ;aAC9C,QAAQ,KAAI,QACX,oBAAC;IAEC,QAAQ;IACC;IACC;IACA;IACV,eAAe,MAAM;IACrB,UAAU,iBAAiB,IAAI;IAC/B,oBAAoB,MAAM;IAC1B,SAAS;MARJ,OAAO,IAAI,MAAM,CAStB,CACF;IACE"}

package/dist/{TextArea-ZKDCCx4I.js → TextArea-CrJs9f5t.js}

@@ -1,6 +1,6 @@
-import { t as Icon } from "./Icon-BrLGgg0w.js";
-import { n as useThemedStyles, t as Typography } from "./Typography-BaE9Y1O8.js";
-import { t as Label } from "./Label-BVteAeiK.js";
+import { t as Icon } from "./Icon-T_2VPPNe.js";
+import { n as styled, r as useThemedStyles, t as Typography } from "./Typography-ZFnL1M33.js";
+import { t as Label } from "./Label-DFcePle9.js";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -9,7 +9,7 @@ function createTextAreaStyles(props) {
 	const { height = "8rem", readOnly, startIcon } = props;
 	const focusRingColor = props.focusedRingColor || "var(--px-color-info)";
 	const placeHolderColor = props.placeholderColor || "var(--px-text-placeholder)";
-	return {
+	return styled({
 		iconContainer: {
 			position: "absolute",
 			left: "0.75rem",
@@ -35,7 +35,7 @@ function createTextAreaStyles(props) {
 				"&:focus": readOnly ? { outline: "none" } : { outline: `2px solid ${focusRingColor}` }
 			}
 		}
-	};
+	});
 }
 
 //#endregion
@@ -110,4 +110,4 @@ const TextArea = (props) => {
 
 //#endregion
 export { TextArea as t };
-//# sourceMappingURL=TextArea-ZKDCCx4I.js.map
+//# sourceMappingURL=TextArea-CrJs9f5t.js.map

package/dist/TextArea-CrJs9f5t.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea-CrJs9f5t.js","names":[],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps): StyleMap {\n  const { height = '8rem', readOnly, startIcon } = props\n\n  const focusRingColor = props.focusedRingColor || 'var(--px-color-info)'\n  const placeHolderColor =\n    props.placeholderColor || 'var(--px-text-placeholder)'\n\n  return styled({\n    iconContainer: {\n      position: 'absolute',\n      left: '0.75rem',\n      top: '1.375rem',\n      transform: 'translateY(-50%)'\n    },\n    textArea: {\n      height,\n      width: '100%',\n      paddingBlock: '0.75rem',\n      paddingInline: '0.875rem',\n      borderRadius: '0.5rem',\n      resize: 'none',\n\n      fontWeight: '400',\n      fontSize: '1rem',\n      color: 'var(--px-text-primary)',\n\n      border: '1px solid red',\n      outlineOffset: '-1px',\n\n      cursor: readOnly ? 'default' : undefined,\n      paddingLeft: startIcon ? '2.5rem' : undefined,\n\n      __rules: {\n        '&::placeholder': {\n          color: `${placeHolderColor}`\n        },\n        '&:focus': readOnly\n          ? { outline: 'none' }\n          : { outline: `2px solid ${focusRingColor}` }\n      }\n    }\n  })\n}\n","// External Libraries\nimport { useId } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/Label'\nimport { Icon } from '@components/toolkit/Icon'\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTextAreaStyles } from './styles'\n\nexport const TextArea = (props: TextAreaProps) => {\n  const {\n    value,\n    disabled,\n    readOnly,\n    maxLength,\n    hideMaxLength,\n    textMaxLength,\n    placeholder,\n\n    label,\n    required,\n    requiredColor,\n    labelColor,\n    labelWeight,\n    labelVariant,\n\n    startIcon,\n    iconColor\n  } = props\n\n  // Hooks\n  const inputId = useId()\n\n  const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n    pick: p => [\n      p.height,\n      p.readOnly,\n      p.startIcon,\n      p.placeholderColor,\n      p.focusedRingColor\n    ],\n    override: props.styles,\n    applyCommonProps: true\n  })\n\n  // Functions\n  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n    if (disabled || readOnly) return\n    props.onChange?.(e.target.value)\n  }\n\n  function renderLabel() {\n    if (!label) return null\n\n    return (\n      <div className=\"flex items-center gap-3\">\n        <Label\n          htmlFor={inputId}\n          label={label}\n          required={required}\n          requiredColor={requiredColor}\n          labelColor={labelColor}\n          labelWeight={labelWeight}\n          labelVariant={labelVariant}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div>\n      {renderLabel()}\n\n      <div style={{ position: 'relative' }}>\n        {startIcon && (\n          <div style={styles.iconContainer}>\n            <Icon\n              name={startIcon}\n              color={iconColor ? iconColor : 'var(--px-text-primary)'}\n            />\n          </div>\n        )}\n\n        <textarea\n          value={value}\n          disabled={disabled}\n          readOnly={readOnly}\n          maxLength={maxLength}\n          placeholder={placeholder}\n          style={styles.textArea}\n          className={classes.textArea}\n          onChange={handleChange}\n        />\n      </div>\n\n      {maxLength && !hideMaxLength ? (\n        <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n          {value.length}/{maxLength} {textMaxLength}\n        </Typography>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAIA,SAAgB,qBAAqB,OAAgC;CACnE,MAAM,EAAE,SAAS,QAAQ,UAAU,cAAc;CAEjD,MAAM,iBAAiB,MAAM,oBAAoB;CACjD,MAAM,mBACJ,MAAM,oBAAoB;AAE5B,QAAO,OAAO;EACZ,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GACP,cAAc;GACd,eAAe;GACf,cAAc;GACd,QAAQ;GAER,YAAY;GACZ,UAAU;GACV,OAAO;GAEP,QAAQ;GACR,eAAe;GAEf,QAAQ,WAAW,YAAY;GAC/B,aAAa,YAAY,WAAW;GAEpC,SAAS;IACP,kBAAkB,EAChB,OAAO,GAAG,oBACX;IACD,WAAW,WACP,EAAE,SAAS,QAAQ,GACnB,EAAE,SAAS,aAAa,kBAAkB;IAC/C;GACF;EACF,CAAC;;;;;AC5BJ,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,UACA,UACA,WACA,eACA,eACA,aAEA,OACA,UACA,eACA,YACA,aACA,cAEA,WACA,cACE;CAGJ,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GACT,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACH;EACD,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;AAC1B,QAAM,WAAW,EAAE,OAAO,MAAM;;CAGlC,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,SAAS;IACF;IACG;IACK;IACH;IACC;IACC;KACd;IACE;;AAIV,QACE,qBAAC;EACE,aAAa;EAEd,qBAAC;GAAI,OAAO,EAAE,UAAU,YAAY;cACjC,aACC,oBAAC;IAAI,OAAO,OAAO;cACjB,oBAAC;KACC,MAAM;KACN,OAAO,YAAY,YAAY;MAC/B;KACE,EAGR,oBAAC;IACQ;IACG;IACA;IACC;IACE;IACb,OAAO,OAAO;IACd,WAAW,QAAQ;IACnB,UAAU;KACV;IACE;EAEL,aAAa,CAAC,gBACb,qBAAC;GAAW,SAAQ;GAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;IAC9D,MAAM;IAAO;IAAE;IAAU;IAAE;;IACjB,GACX;KACA"}

package/dist/{ThemeContext-BQQnMo5F.js → ThemeContext-CMCP5Hqz.js}

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/utils/functions/deepMerge.ts
@@ -75,6 +75,7 @@ const defaultThemes = {
 	light: {
 		colors: {
 			scrollbar: "#0000001a",
+			disabled: "#D5D7DA",
 			primary: "#0EB24C",
 			secondary: "#6C6C6C",
 			success: "#0EB24C",
@@ -123,6 +124,7 @@ const defaultThemes = {
 	dark: {
 		colors: {
 			scrollbar: "#858585",
+			disabled: "#D5D7DA",
 			primary: "#0EB24C",
 			secondary: "#C7CFD8",
 			success: "#0EB24C",
@@ -361,7 +363,7 @@ function themeToCssVars(theme) {
 		"--px-color-error": theme.colors.error,
 		"--px-color-invalid": theme.colors.invalid,
 		"--px-color-info": theme.colors.info,
-		"--px-color-disabled": theme.colors.text.disabled,
+		"--px-color-disabled": theme.colors.disabled,
 		"--px-scrollbar": theme.colors.scrollbar,
 		"--px-bg": theme.colors.background.primary,
 		"--px-surface": theme.colors.surface,
@@ -409,84 +411,62 @@ function themeToCssVars(theme) {
 //#endregion
 //#region src/contexts/ThemeContext/index.tsx
 /** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */
-/**
-* Theme Context
-* -------------
-* Internal context used by `ThemeProvider` and consumed by `useTheme()`.
-*
-* The value is always non-null inside a `<ThemeProvider />`.
-*/
 const ThemeContext = createContext(null);
 /**
-* ThemeProvider
-* -------------
-* Provides theme state + resolved theme tokens to your app.
+* useIsomorphicLayoutEffect
+* - On client: runs before paint (layout effect)
+* - On server: falls back to useEffect (no warnings)
 */
-const ThemeProvider = ({ themes, children, override, persistence, persist = false, defaultMode = "system", storageKey = "px-theme" }) => {
-	/**
-	* Registry of user patches (stable unless `themes` changes).
-	*/
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const ThemeProvider = ({ themes, children, override, persistence, persist = false, defaultMode = "system", storageKey = "px-theme", fallback = null }) => {
 	const registry = useMemo(() => buildRegistry(themes), [themes]);
-	/**
-	* Selected mode (with optional persistence).
-	*
-	* Priority:
-	* 1) `persistence` adapter (advanced)
-	* 2) `persist === true` + localStorage (quick)
-	* 3) `defaultMode`
-	*/
+	function makeInitialMode() {
+		if (persistence) try {
+			return persistence.get() ?? defaultMode;
+		} catch {
+			return defaultMode;
+		}
+		if (persist) {
+			const ls = getLocalStorageSafe();
+			if (!ls) return defaultMode;
+			const raw = ls.getItem(storageKey);
+			return isThemeMode(raw) ? raw : defaultMode;
+		}
+		return defaultMode;
+	}
 	const [mode, setMode] = useState(makeInitialMode);
 	/**
-	* Loading flag (mainly useful if consumers want to wait for first mount).
-	*/
-	const [isLoading, setLoading] = useState(true);
-	useEffect(() => {
-		setLoading(false);
-	}, []);
-	/**
-	* Keep in sync with OS when mode === "system".
-	*/
-	useEffect(() => {
-		if (typeof window === "undefined") return;
-		if (mode !== "system") return;
-		return watchSystemTheme(() => {
-			setMode("system");
-		});
-	}, [mode]);
-	/**
-	* Resolved name is the actual currently applied theme name.
-	* If `mode === "system"`, it becomes "light" or "dark".
+	* Gate: only render children after we applied class + vars at least once.
+	* This prevents "unstyled flash" for your components.
 	*/
+	const [isReady, setReady] = useState(false);
 	const resolvedName = useMemo(() => {
 		if (typeof window === "undefined") return mode === "system" ? "light" : mode;
 		return resolveName(mode);
 	}, [mode]);
-	/**
-	* Build final resolved theme tokens (always complete).
-	*/
 	const theme = useMemo(() => buildTheme(registry, resolvedName, override), [
 		registry,
 		resolvedName,
 		override
 	]);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		if (mode !== "system") return;
+		return watchSystemTheme(() => {
+			setMode("system");
+		});
+	}, [mode]);
 	/**
-	* Apply theme effects:
-	* - toggles `.dark` class on <html> (Tailwind)
-	* - injects --px-* variables on <html>
+	* Apply theme BEFORE paint (client) and then unlock rendering.
 	*/
-	useEffect(() => {
+	useIsomorphicLayoutEffect(() => {
 		if (typeof window === "undefined") return;
 		applyThemeClass(resolvedName === "dark" ? "dark" : "light");
 		applyCssVars(themeToCssVars(theme));
+		setReady(true);
 	}, [resolvedName, theme]);
 	/**
 	* Persist mode changes (optional).
-	*
-	* We persist the selected `mode` (including "system"), not the resolvedName.
-	*
-	* Priority:
-	* - If `persistence` exists, use it.
-	* - Else if `persist === true`, use localStorage.
 	*/
 	useEffect(() => {
 		if (persistence) {
@@ -507,48 +487,30 @@ const ThemeProvider = ({ themes, children, override, persistence, persist = fals
 		storageKey,
 		persistence
 	]);
-	function makeInitialMode() {
-		if (persistence) try {
-			return persistence.get() ?? defaultMode;
-		} catch {
-			return defaultMode;
-		}
-		const ls = getLocalStorageSafe();
-		if (!ls) return defaultMode;
-		const raw = ls.getItem(storageKey);
-		return isThemeMode(raw) ? raw : defaultMode;
-	}
-	/**
-	* Sets the selected theme mode.
-	*/
 	function setTheme(next) {
 		setMode(next);
 	}
-	/**
-	* Toggles between two theme names (defaults to "light" and "dark").
-	*/
 	function toggleTheme(a = "light", b = "dark") {
 		setMode(resolvedName === a ? b : a);
 	}
+	const ctxValue = useMemo(() => ({
+		mode,
+		resolvedName,
+		theme,
+		isLoading: !isReady,
+		setTheme,
+		toggleTheme
+	}), [
+		mode,
+		resolvedName,
+		theme,
+		isReady
+	]);
 	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
-		value: {
-			mode,
-			resolvedName,
-			theme,
-			isLoading,
-			setTheme,
-			toggleTheme
-		},
-		children
+		value: ctxValue,
+		children: isReady ? children : fallback
 	});
 };
-/**
-* useTheme()
-*
-* Returns the current theme context.
-*
-* @throws If called outside of `<ThemeProvider />`.
-*/
 function useTheme() {
 	const ctx = useContext(ThemeContext);
 	if (!ctx) throw new Error("useTheme must be used within a ThemeProvider");
@@ -557,4 +519,4 @@ function useTheme() {
 
 //#endregion
 export { useTheme as n, ThemeProvider as t };
-//# sourceMappingURL=ThemeContext-BQQnMo5F.js.map
+//# sourceMappingURL=ThemeContext-CMCP5Hqz.js.map

package/dist/ThemeContext-CMCP5Hqz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext-CMCP5Hqz.js","names":["result: any","out: any","defaultThemes: ThemeRegistry","ThemeProvider: React.FC<ThemeProviderProps>"],"sources":["../src/utils/functions/deepMerge.ts","../src/contexts/ThemeContext/constants.ts","../src/contexts/ThemeContext/utils/general.ts","../src/contexts/ThemeContext/utils/themeToCSSVars.ts","../src/contexts/ThemeContext/index.tsx"],"sourcesContent":["/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nexport type DeepPartial<T> = {\n  [P in keyof T]?: T[P] extends Array<infer U>\n    ? Array<DeepPartial<U>>\n    : T[P] extends object\n      ? DeepPartial<T[P]>\n      : T[P]\n}\n\nexport function deepMerge<T>(base: T, override?: DeepPartial<T>): T {\n  if (override === undefined) return clone(base)\n\n  if (!isPlainObject(base) || !isPlainObject(override)) {\n    return clone(override as T)\n  }\n\n  const result: any = Array.isArray(base) ? [] : {}\n\n  const baseKeys = Object.keys(base as any) as (keyof T)[]\n  const overrideKeys = Object.keys(override as any) as (keyof T)[]\n\n  const allKeys = Array.from(new Set([...baseKeys, ...overrideKeys]))\n\n  for (const k of allKeys) {\n    const baseVal = (base as any)[k]\n    const overrideVal = (override as any)[k]\n\n    if (overrideVal === undefined) {\n      result[k] = clone(baseVal)\n      continue\n    }\n\n    if (isPlainObject(baseVal) && isPlainObject(overrideVal)) {\n      result[k] = deepMerge(baseVal, overrideVal)\n      continue\n    }\n\n    result[k] = clone(overrideVal)\n  }\n\n  return result as T\n}\n\nfunction isPlainObject(x: any): x is Record<string, any> {\n  return !!x && typeof x === 'object' && !Array.isArray(x)\n}\n\nfunction clone<T>(v: T): T {\n  if (v === undefined || v === null) return v\n  if (Array.isArray(v)) return v.map(item => clone(item)) as unknown as T\n  if (isPlainObject(v)) {\n    const out: any = {}\n    for (const k of Object.keys(v)) out[k] = clone((v as any)[k])\n    return out\n  }\n  return v\n}\n","// theme/defaultThemes.ts\nimport type { ThemeRegistry } from './types'\n\nconst COMMON_MAP = {\n  spacing: {\n    xs: '0.25rem', // 4px\n    sm: '0.5rem', // 8px\n    md: '1rem', // 16px\n    lg: '1.5rem', // 24px\n    xl: '2rem', // 32px\n    '2xl': '3rem' // 48px\n  },\n  borderRadius: {\n    none: '0rem', // 0px\n    sm: '0.25rem', // 4px\n    md: '0.375rem', // 6px\n    lg: '0.5rem', // 8px\n    full: '9999rem' // \"infinite\" radius equivalent\n  },\n  fontSize: {\n    xs: '0.75rem', // 12px\n    sm: '0.875rem', // 14px\n    md: '1rem', // 16px\n    lg: '1.125rem', // 18px\n    xl: '1.25rem', // 20px\n    '2xl': '1.5rem' // 24px\n  },\n  fontWeight: { normal: 400, medium: 500, semibold: 600, bold: 700 }\n} as const\n\nexport const defaultThemes: ThemeRegistry = {\n  light: {\n    colors: {\n      scrollbar: '#0000001a',\n      disabled: '#D5D7DA',\n\n      primary: '#0EB24C',\n      secondary: '#6C6C6C',\n      success: '#0EB24C',\n      warning: '#f59e0b',\n      error: '#ef4444',\n      invalid: '#f87171',\n      info: '#06b6d4',\n\n      background: {\n        primary: '#FFFFFF',\n        card: {\n          primary: '#F4F4F4',\n          secondary: '#F3F6F9'\n        }\n      },\n      button: {\n        filled: {\n          label: '#FFFFFF',\n          background: '#0EB24C'\n        },\n\n        outlined: {\n          label: '#0EB24C',\n          borderColor: '#0EB24C'\n        },\n\n        ghost: {\n          label: '#6C6C6C'\n        }\n      },\n\n      surface: '#FBFBFB',\n      border: {\n        primary: '#E8E8E9',\n        secondary: '#E8E8E9'\n      },\n\n      text: {\n        primary: '#222222',\n        secondary: '#6C6C6C',\n        disabled: '#A0A0A0',\n        inverse: '#FFFFFF'\n      }\n    },\n\n    ...COMMON_MAP,\n\n    shadows: {\n      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n      md: '0 4px 6px -1px rgba(0, 0, 0, 0.10)',\n      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.10)',\n      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.10)'\n    }\n  },\n\n  dark: {\n    colors: {\n      scrollbar: '#858585',\n      disabled: '#D5D7DA',\n\n      primary: '#0EB24C', // brand se mantém (ou pode clarear depois)\n      secondary: '#C7CFD8',\n      success: '#0EB24C',\n      warning: '#f59e0b',\n      error: '#ef4444',\n      invalid: '#f87171',\n      info: '#06b6d4',\n\n      background: {\n        primary: '#090909',\n        card: {\n          primary: '#F4F4F4',\n          secondary: '#202020'\n        }\n      },\n      button: {\n        filled: {\n          label: '#FFFFFF',\n          background: '#0EB24C'\n        },\n\n        outlined: {\n          label: '#0EB24C',\n          borderColor: '#0EB24C'\n        },\n\n        ghost: {\n          label: '#6C6C6C'\n        }\n      },\n\n      surface: '#090909',\n\n      border: {\n        primary: '#27282D',\n        secondary: '#27282D'\n      },\n\n      text: {\n        primary: '#ECECEC',\n        secondary: '#C7CFD8',\n        disabled: '#8B93A0',\n        inverse: '#090909'\n      }\n    },\n\n    ...COMMON_MAP,\n\n    shadows: {\n      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.35)',\n      md: '0 4px 6px -1px rgba(0, 0, 0, 0.45)',\n      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.50)',\n      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.55)'\n    }\n  }\n}\n","// Utils\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nimport { deepMerge } from '@utils/functions'\nimport { defaultThemes } from '../constants'\n\n// Types\nimport type { ThemeMode, ThemeRegistry, ThemeTokens } from '../types'\n\n/**\n * Theme Utilities\n * ===============\n * Small DOM utilities used by the ThemeProvider to:\n * - toggle dark mode class for Tailwind compatibility\n * - inject CSS variables (`--px-*`) into the document root\n * - read/watch the OS/browser theme preference (`prefers-color-scheme`)\n *\n * These helpers are:\n * - **client-safe** (guarded for SSR)\n * - **framework-agnostic** (only touch `documentElement`)\n * - **tiny** (no dependencies)\n */\n\n/**\n * CSSVarMap\n * ---------\n * A map of CSS custom properties to be applied on the document root.\n *\n * Notes:\n * - Keys must be valid CSS variable names (e.g. `\"--px-bg\"`, `\"--px-text-primary\"`).\n * - Values can be strings or numbers.\n *   - If you store numbers (e.g. 16), you decide at consumption time whether it means px.\n *\n * You can keep it generic:\n *   Record<`--${string}`, string | number>\n *\n * Or restrict to your library prefix:\n *   Record<`--px-${string}`, string | number>\n */\nexport type CSSVarMap = Partial<Record<`--${string}`, string | number>>\n\n/**\n * applyThemeClass(themeName)\n * -------------------------\n * Applies the light/dark mode class to the `<html>` element.\n *\n * Tailwind’s dark mode (in the common \"class\" strategy) typically relies on a\n * `.dark` class. This function toggles ONLY the `dark` class:\n *\n * - themeName `\"dark\"`  => adds `.dark`\n * - themeName `\"light\"` => removes `.dark`\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyThemeClass(themeName: 'light' | 'dark') {\n  if (typeof document === 'undefined') return\n  const root = document.documentElement\n  root.classList.toggle('dark', themeName === 'dark')\n}\n\n/**\n * applyCssVars(vars)\n * ------------------\n * Injects CSS variables into the document root (`<html>`).\n *\n * This is how the library exposes theme tokens as CSS variables.\n * Components can then use `var(--px-...)` in styles.\n *\n * Example:\n * ```ts\n * applyCssVars({ '--px-bg': '#fff', '--px-text-primary': '#111' })\n * ```\n *\n * Behavior:\n * - Ignores `null` / `undefined` values.\n * - Converts all values to string before applying.\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyCssVars(vars: CSSVarMap) {\n  if (typeof document === 'undefined') return\n  const root = document.documentElement\n\n  for (const [key, value] of Object.entries(vars)) {\n    if (value == null) continue\n    root.style.setProperty(key, String(value))\n  }\n}\n\n/**\n * getSystemThemeName()\n * --------------------\n * Returns the current OS/browser color scheme preference.\n *\n * It reads `prefers-color-scheme: dark` using `window.matchMedia`.\n *\n * Returns:\n * - `\"dark\"` if the user prefers dark mode\n * - `\"light\"` otherwise\n *\n * SSR:\n * - Returns `\"light\"` on the server (safe default).\n */\nexport function getSystemThemeName(): 'light' | 'dark' {\n  if (typeof window === 'undefined') return 'light'\n  const prefersDark =\n    window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false\n  return prefersDark ? 'dark' : 'light'\n}\n\n/**\n * watchSystemTheme(onChange)\n * --------------------------\n * Subscribes to changes in OS/browser theme preference.\n *\n * Use this when your selected mode is `\"system\"` so the app immediately reacts\n * when the user changes their OS theme.\n *\n * - Calls `onChange('light' | 'dark')` whenever the preference changes.\n * - Returns an `unsubscribe()` function.\n *\n * Implementation details:\n * - Uses `matchMedia('(prefers-color-scheme: dark)')`.\n * - Supports both modern `addEventListener('change', ...)` and legacy Safari\n *   `addListener(...)` APIs.\n *\n * SSR:\n * - Returns a no-op unsubscribe function on the server.\n */\nexport function watchSystemTheme(onChange: (name: 'light' | 'dark') => void) {\n  if (typeof window === 'undefined') return () => {}\n\n  const mq = window.matchMedia('(prefers-color-scheme: dark)')\n\n  const handler = () => onChange(mq.matches ? 'dark' : 'light')\n\n  // Optional: sync immediately on subscribe\n  handler()\n\n  // Modern browsers\n  if (mq.addEventListener) {\n    mq.addEventListener('change', handler)\n    return () => mq.removeEventListener('change', handler)\n  }\n\n  // Legacy Safari\n  mq.addListener(handler as any)\n  return () => mq.removeListener(handler as any)\n}\n\n/**\n * Resolves an effective theme name from a mode.\n */\nexport function resolveName(mode: ThemeMode): string {\n  if (mode !== 'system') return mode\n  return getSystemThemeName()\n}\n\n/**\n * Builds a registry of user theme patches.\n */\nexport function buildRegistry(\n  userThemes?: Partial<ThemeRegistry>\n): ThemeRegistry {\n  return {\n    light: {},\n    dark: {},\n    ...(userThemes ?? {})\n  } as ThemeRegistry\n}\n\n/**\n * Builds the final resolved theme tokens.\n */\nexport function buildTheme(\n  registry: ThemeRegistry,\n  resolvedName: string,\n  override?: Partial<ThemeTokens>\n): ThemeTokens {\n  const base: ThemeTokens =\n    resolvedName === 'dark'\n      ? (defaultThemes.dark as ThemeTokens)\n      : (defaultThemes.light as ThemeTokens)\n\n  const selectedPatch = (registry[resolvedName] ?? registry.light) as any\n\n  const merged = deepMerge(base, selectedPatch)\n  return deepMerge(merged, override)\n}\n\nexport function isThemeMode(value: unknown): value is ThemeMode {\n  return typeof value === 'string' && value.length > 0\n}\n\nexport function getLocalStorageSafe(): Storage | null {\n  if (typeof window === 'undefined') return null\n  try {\n    return window.localStorage\n  } catch {\n    return null\n  }\n}\n","// Types\nimport type { CSSVarMap } from './general'\nimport type { ThemeTokens } from '../types'\n\n/**\n * themeToCssVars(theme)\n * ---------------------\n * Converts a resolved `ThemeTokens` object into a CSS variable map (`CSSVarMap`).\n *\n * The ThemeProvider uses this function to inject `--px-*` variables into the\n * document root (`<html>`). Components can then rely on stable CSS variables,\n * making them framework-agnostic and compatible with Tailwind (via `.dark`).\n *\n * Why CSS variables?\n * - They are fast (native to the browser)\n * - They work across any styling strategy (inline styles, CSS modules, Tailwind, etc.)\n * - They enable dynamic theme switching without rerendering every component\n *\n * Requirements / Assumptions:\n * - The input `theme` must be **fully resolved** (i.e. complete `ThemeTokens`).\n *   The ThemeProvider is responsible for merging partial theme patches on top\n *   of a complete base theme (light/dark defaults).\n *\n * Variable naming:\n * - All variables are prefixed with `--px-` to avoid collisions.\n * - Tokens are grouped by category (colors, surfaces, borders, text, spacing, radius, typography, shadows).\n *\n * Notes:\n * - Spacing/radius/fontSize tokens are stored as numbers (e.g. `16`), which is valid\n *   for CSS variables. When consuming them, you can:\n *   - append `px` in JS (`${var}px`), or\n *   - store them as strings here (e.g. `\"16px\"`) if you prefer.\n *\n * Example usage (component styles):\n * ```ts\n * const styles = {\n *   background: 'var(--px-bg)',\n *   color: 'var(--px-text-primary)',\n *   borderColor: 'var(--px-border-primary)',\n * }\n * ```\n *\n * Example usage (Tailwind config / CSS):\n * ```css\n * .card {\n *   background: var(--px-surface);\n *   color: var(--px-text-primary);\n *   border: 1px solid var(--px-border-primary);\n * }\n * ```\n */\nexport function themeToCssVars(theme: ThemeTokens): CSSVarMap {\n  return {\n    /**\n     * Brand & intent colors\n     */\n    '--px-color-primary': theme.colors.primary,\n    '--px-color-secondary': theme.colors.secondary,\n    '--px-color-success': theme.colors.success,\n    '--px-color-warning': theme.colors.warning,\n    '--px-color-error': theme.colors.error,\n    '--px-color-invalid': theme.colors.invalid,\n    '--px-color-info': theme.colors.info,\n    '--px-color-disabled': theme.colors.disabled,\n\n    /**\n     * Scrollbar\n     */\n    '--px-scrollbar': theme.colors.scrollbar,\n\n    /**\n     * Surfaces / backgrounds\n     */\n    '--px-bg': theme.colors.background.primary,\n    '--px-surface': theme.colors.surface,\n    '--px-background-card-primary': theme.colors.background.card.primary,\n    '--px-background-card-secondary': theme.colors.background.card.secondary,\n\n    /**\n     * Borders\n     * -------\n     * Divider and outline colors.\n     */\n    '--px-border-primary': theme.colors.border.primary,\n    '--px-border-secondary': theme.colors.border.secondary,\n\n    /**\n     * Text\n     * ----\n     * Text colors for different emphasis levels.\n     */\n    '--px-text-primary': theme.colors.text.primary,\n    '--px-text-secondary': theme.colors.text.secondary,\n    '--px-text-disabled': theme.colors.text.disabled,\n    '--px-text-inverse': theme.colors.text.inverse,\n\n    /**\n     * Buttons – Filled\n     * ----------------\n     * Filled button colors\n     */\n    '--px-btn-filled-bg': theme.colors.button.filled.background,\n    '--px-btn-filled-label': theme.colors.button.filled.label,\n\n    /**\n     * Buttons – Outlined\n     * ------------------\n     * Outlined button colors\n     */\n    '--px-btn-outlined-border': theme.colors.button.outlined.borderColor,\n    '--px-btn-outlined-label': theme.colors.button.outlined.label,\n\n    /**\n     * Buttons – Ghost\n     * --------------\n     * Ghost button colors\n     */\n    '--px-btn-ghost-label': theme.colors.button.ghost.label,\n    /**\n     * Spacing\n     * -------------\n     * Numeric spacing tokens (commonly used as px).\n     */\n    '--px-space-xs': theme.spacing.xs,\n    '--px-space-sm': theme.spacing.sm,\n    '--px-space-md': theme.spacing.md,\n    '--px-space-lg': theme.spacing.lg,\n    '--px-space-xl': theme.spacing.xl,\n    '--px-space-2xl': theme.spacing['2xl'],\n\n    /**\n     * Border radius scale\n     * -------------------\n     * Numeric radius tokens (commonly used as px).\n     */\n    '--px-radius-none': theme.borderRadius.none,\n    '--px-radius-sm': theme.borderRadius.sm,\n    '--px-radius-md': theme.borderRadius.md,\n    '--px-radius-lg': theme.borderRadius.lg,\n    '--px-radius-full': theme.borderRadius.full,\n\n    /**\n     * Typography scale\n     * ----------------\n     * Font sizes and font weights.\n     */\n    '--px-fs-xs': theme.fontSize.xs,\n    '--px-fs-sm': theme.fontSize.sm,\n    '--px-fs-md': theme.fontSize.md,\n    '--px-fs-lg': theme.fontSize.lg,\n    '--px-fs-xl': theme.fontSize.xl,\n    '--px-fs-2xl': theme.fontSize['2xl'],\n\n    '--px-fw-normal': theme.fontWeight.normal,\n    '--px-fw-medium': theme.fontWeight.medium,\n    '--px-fw-semibold': theme.fontWeight.semibold,\n    '--px-fw-bold': theme.fontWeight.bold,\n\n    /**\n     * Shadows\n     * -------\n     * CSS shadow strings for elevation.\n     */\n    '--px-shadow-sm': theme.shadows.sm,\n    '--px-shadow-md': theme.shadows.md,\n    '--px-shadow-lg': theme.shadows.lg,\n    '--px-shadow-xl': theme.shadows.xl\n  }\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n'use client'\n\n// External Libraries\nimport {\n  useMemo,\n  useState,\n  useEffect,\n  useContext,\n  createContext,\n  useLayoutEffect\n} from 'react'\n\n// Utils\nimport {\n  buildTheme,\n  isThemeMode,\n  resolveName,\n  applyCssVars,\n  buildRegistry,\n  themeToCssVars,\n  applyThemeClass,\n  watchSystemTheme,\n  getLocalStorageSafe\n} from './utils'\n\n// Types\nimport type { ThemeMode, ThemeContextData, ThemeProviderProps } from './types'\n\nexport * from './types'\n\nconst ThemeContext = createContext<ThemeContextData | null>(null)\n\n/**\n * useIsomorphicLayoutEffect\n * - On client: runs before paint (layout effect)\n * - On server: falls back to useEffect (no warnings)\n */\nconst useIsomorphicLayoutEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n  themes,\n  children,\n  override,\n  persistence,\n  persist = false,\n  defaultMode = 'system',\n  storageKey = 'px-theme',\n  fallback = null\n}) => {\n  const registry = useMemo(() => buildRegistry(themes), [themes])\n\n  function makeInitialMode(): ThemeMode {\n    // 1) advanced adapter\n    if (persistence) {\n      try {\n        const saved = persistence.get()\n        return (saved ?? defaultMode) as ThemeMode\n      } catch {\n        return defaultMode\n      }\n    }\n\n    // 2) quick localStorage mode\n    if (persist) {\n      const ls = getLocalStorageSafe()\n      if (!ls) return defaultMode\n      const raw = ls.getItem(storageKey)\n      return isThemeMode(raw) ? raw : defaultMode\n    }\n\n    // 3) fallback\n    return defaultMode\n  }\n\n  const [mode, setMode] = useState<ThemeMode>(makeInitialMode)\n\n  /**\n   * Gate: only render children after we applied class + vars at least once.\n   * This prevents \"unstyled flash\" for your components.\n   */\n  const [isReady, setReady] = useState(false)\n\n  const resolvedName = useMemo(() => {\n    if (typeof window === 'undefined') return mode === 'system' ? 'light' : mode\n    return resolveName(mode)\n  }, [mode])\n\n  const theme = useMemo(\n    () => buildTheme(registry, resolvedName, override),\n    [registry, resolvedName, override]\n  )\n\n  // keep in sync with OS when mode === \"system\"\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n    if (mode !== 'system') return\n\n    return watchSystemTheme(() => {\n      setMode('system')\n    })\n  }, [mode])\n\n  /**\n   * Apply theme BEFORE paint (client) and then unlock rendering.\n   */\n  useIsomorphicLayoutEffect(() => {\n    if (typeof window === 'undefined') return\n\n    applyThemeClass(resolvedName === 'dark' ? 'dark' : 'light')\n    applyCssVars(themeToCssVars(theme))\n\n    // unlock after first successful application\n    setReady(true)\n  }, [resolvedName, theme])\n\n  /**\n   * Persist mode changes (optional).\n   */\n  useEffect(() => {\n    if (persistence) {\n      try {\n        persistence.set(mode)\n      } catch {}\n      return\n    }\n\n    if (!persist) return\n    const ls = getLocalStorageSafe()\n    if (!ls) return\n\n    try {\n      ls.setItem(storageKey, mode)\n    } catch {}\n  }, [mode, persist, storageKey, persistence])\n\n  function setTheme(next: ThemeMode) {\n    setMode(next)\n  }\n\n  function toggleTheme(a: string = 'light', b: string = 'dark') {\n    setMode(resolvedName === a ? b : a)\n  }\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n  const ctxValue = useMemo(\n    () => ({\n      mode,\n      resolvedName,\n      theme,\n      isLoading: !isReady,\n      setTheme,\n      toggleTheme\n    }),\n    [mode, resolvedName, theme, isReady]\n  )\n\n  return (\n    <ThemeContext.Provider value={ctxValue}>\n      {isReady ? children : fallback}\n    </ThemeContext.Provider>\n  )\n}\n\nexport function useTheme(): ThemeContextData {\n  const ctx = useContext(ThemeContext)\n  if (!ctx) throw new Error('useTheme must be used within a ThemeProvider')\n  return ctx\n}\n"],"mappings":"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"}

package/dist/{Typography-BaE9Y1O8.js → Typography-ZFnL1M33.js}

@@ -135,21 +135,13 @@ function injectSlotRules(slotClass, rules) {
 
 //#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] ?? {}
-		};
-	}
+	for (const key in override) out[key] = {
+		...base[key] ?? {},
+		...override[key] ?? {}
+	};
 	return out;
 }
 
@@ -335,7 +327,17 @@ const COMMON_KEY_SET = new Set(COMMON_KEYS);
 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]);
+	/**
+	* Merge inline styles with optional override (shallow merge per slot).
+	*
+	* Dependency is `overrideSig` (content), not the object reference.
+	*/
+	const merged = useMemo(() => {
+		return mergeStyleMaps(inline, options?.override);
+	}, [inline, useMemo(() => stableStringify(options?.override ?? {}), [options?.override])]);
+	/**
+	* Optionally apply common style props (spacing/typography/layout) on top of a slot.
+	*/
 	const withCommons = useMemo(() => {
 		if (!options?.applyCommonProps) return merged;
 		return applyCommonsToStyles(merged, props, options.commonSlot);
@@ -355,13 +357,19 @@ function useThemedStyles(props, factory, options) {
 	}, [rulesBySlot, options?.debugName]);
 	/**
 	* Generated class per slot.
+	*
+	* Important:
+	* - It must be stable unless slots or rule-signature changes.
+	* - It should NOT depend on `withCommons` (since commons may change frequently).
+	* - Use `inline` keys (slots returned by the factory) as the source of truth.
+	*
 	* Example: pxr-<hash>__item
 	*/
 	const classes = useMemo(() => {
 		const out = {};
-		for (const slotKey of Object.keys(withCommons)) out[slotKey] = `${baseId}__${slotKey}`;
+		for (const slotKey of Object.keys(inline)) out[slotKey] = `${baseId}__${slotKey}`;
 		return out;
-	}, [baseId, withCommons]);
+	}, [baseId, inline]);
 	/**
 	* Inject rules into the runtime <style> tag.
 	*
@@ -381,6 +389,13 @@ 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)";
@@ -460,7 +475,7 @@ const alignText = {
 //#region src/components/toolkit/Typography/style.ts
 function createTypographyStyles(props) {
 	const { isLoading, variant, align = "left", color } = props;
-	return {
+	return styled({
 		base: {
 			display: "flex",
 			flexDirection: "row",
@@ -481,7 +496,7 @@ function createTypographyStyles(props) {
 			...typographyVariants[variant],
 			color: color ?? typographyVariants[variant].color
 		}
-	};
+	});
 }
 
 //#endregion
@@ -525,5 +540,5 @@ function Typography(props) {
 }
 
 //#endregion
-export { useThemedStyles as n, Typography as t };
-//# sourceMappingURL=Typography-BaE9Y1O8.js.map
+export { styled as n, useThemedStyles as r, Typography as t };
+//# sourceMappingURL=Typography-ZFnL1M33.js.map

package/dist/Typography-ZFnL1M33.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography-ZFnL1M33.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/hooks/useThemedStyles/types/useThemedStyles.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\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","/** 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  /**\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","/**\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","// 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 { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createTypographyStyles(props: TypographyProps): StyleMap {\n  const { isLoading, variant, align = 'left', color } = props\n\n  return styled({\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      color: color ?? typographyVariants[variant].color\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/button.d.ts

@@ -1,3 +1,3 @@
-import "./types-_ZbgGCjb.js";
-import { t as Button } from "./index-x_PYKZgv.js";
+import "./types-WcPOnA5M.js";
+import { t as Button } from "./index-NpIJSn1Q.js";
 export { Button };

package/dist/button.js

@@ -1,4 +1,4 @@
-import "./Typography-BaE9Y1O8.js";
-import { t as Button } from "./Button-B9tDbn4Q.js";
+import "./Typography-ZFnL1M33.js";
+import { t as Button } from "./Button-rI1zyBIr.js";
 
 export { Button };

package/dist/check-item.js

@@ -1,5 +1,5 @@
-import "./Icon-BrLGgg0w.js";
-import "./Typography-BaE9Y1O8.js";
-import { t as CheckItem } from "./CheckItem-CBzbinCc.js";
+import "./Icon-T_2VPPNe.js";
+import "./Typography-ZFnL1M33.js";
+import { t as CheckItem } from "./CheckItem-OVa0nZlJ.js";
 
 export { CheckItem };

package/dist/checkbox.d.ts

@@ -1,3 +1,3 @@
-import "./types-_ZbgGCjb.js";
-import { t as Checkbox } from "./index-CqAWI5LI.js";
+import "./types-WcPOnA5M.js";
+import { t as Checkbox } from "./index-DuKjuLFf.js";
 export { Checkbox };

package/dist/checkbox.js

@@ -1,5 +1,5 @@
-import "./Icon-BrLGgg0w.js";
-import "./Typography-BaE9Y1O8.js";
-import { t as Checkbox } from "./Checkbox-l_SA4qUE.js";
+import "./Icon-T_2VPPNe.js";
+import "./Typography-ZFnL1M33.js";
+import { t as Checkbox } from "./Checkbox-DdPF40bm.js";
 
 export { Checkbox };