softable-pixels-web 1.1.1 → 1.1.2

package/dist/{Button-CwK9nssQ.js → Button-BOHY-7P-.js}

@@ -86,7 +86,6 @@ function createButtonStyles({ size, color, variant, disabled, fullWidth, textAli
 	const finalVariant = variant ?? "filled";
 	return styled({
 		container: {
-			minHeight: "2rem",
 			...getSize(size || "md"),
 			width: fullWidth ? "100%" : "fit-content",
 			position: "relative",
@@ -100,6 +99,7 @@ function createButtonStyles({ size, color, variant, disabled, fullWidth, textAli
 			transition: "background-color 0.5s",
 			border: getBorder(finalVariant, outlineColor || color),
 			backgroundColor: getBackgroundColor(finalVariant, color),
+			boxShadow: "0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D121A inset",
 			__rules: { "&:hover": { opacity: "0.85 !important" } }
 		},
 		content: {
@@ -115,11 +115,11 @@ function createButtonStyles({ size, color, variant, disabled, fullWidth, textAli
 }
 function getSize(size) {
 	switch (size) {
-		case "lg": return { height: "3.25rem" };
-		case "md": return { height: "2.75rem" };
-		case "sm": return { height: "2.25rem" };
-		case "xs": return { height: "1.75rem" };
-		default: return { height: size };
+		case "lg": return { minHeight: "3.25rem" };
+		case "md": return { minHeight: "2.75rem" };
+		case "sm": return { minHeight: "2.25rem" };
+		case "xs": return { minHeight: "1.75rem" };
+		default: return { minHeight: size };
 	}
 }
 function getBackgroundColor(variant, color) {
@@ -196,4 +196,4 @@ const Button = ({ type = "button", variant = "filled", ...rest }) => {
 
 //#endregion
 export { Button as t };
-//# sourceMappingURL=Button-CwK9nssQ.js.map
+//# sourceMappingURL=Button-BOHY-7P-.js.map

package/dist/Button-BOHY-7P-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-BOHY-7P-.js","names":["getBorder","createButtonLoaderStyles","getBorder","Loader: React.FC<LoaderProps>","createButtonLoaderStyles","ButtonLoader: React.FC<Props>","Button: React.FC<ButtonProps>"],"sources":["../src/utils/animations/spiner.ts","../src/components/toolkit/Loader/constants.ts","../src/components/toolkit/Loader/utils.ts","../src/components/toolkit/Loader/styles.ts","../src/components/toolkit/Loader/index.tsx","../src/components/commons/buttons/Button/components/ButtonLoader/styles.ts","../src/components/commons/buttons/Button/components/ButtonLoader/index.tsx","../src/components/commons/buttons/Button/styles.ts","../src/components/commons/buttons/Button/index.tsx"],"sourcesContent":["export const SPINNER_ANIMATION = {\n  animate: { rotate: 360 },\n  transition: {\n    repeat: Infinity,\n    duration: 1,\n    ease: 'linear'\n  }\n}\n","const DEFAULT_SIZE = '20px'\nconst DEFAULT_THICKNESS = '2px'\n\nconst DEFAULT_COLOR = 'white'\nconst DEFAULT_EMPTY_COLOR = 'transparent'\n\nexport { DEFAULT_SIZE, DEFAULT_THICKNESS, DEFAULT_COLOR, DEFAULT_EMPTY_COLOR }\n","// Utils\nimport { DEFAULT_THICKNESS, DEFAULT_EMPTY_COLOR } from './constants'\n\n// Types\nimport type { LoaderProps } from './types'\n\nexport function getBorder(props: LoaderProps) {\n  const thickness = props.thickness || DEFAULT_THICKNESS\n  const emptyColor = props.emptyColor || DEFAULT_EMPTY_COLOR\n\n  return `${thickness} solid ${emptyColor}`\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\nimport type { LoaderProps } from './types'\nimport { getBorder } from './utils'\nimport { DEFAULT_COLOR, DEFAULT_SIZE } from './constants'\n\nexport function createButtonLoaderStyles(props: LoaderProps): StyleMap {\n  return styled({\n    container: {\n      display: ' inline-block',\n\n      width: props.size || DEFAULT_SIZE,\n      height: props.size || DEFAULT_SIZE,\n\n      borderRadius: '50%',\n      border: getBorder(props),\n      borderLeftColor: props.color || DEFAULT_COLOR\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { SPINNER_ANIMATION } from '@utils/animations'\n\n// Types\nimport type { LoaderProps } from './types'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\nexport const Loader: React.FC<LoaderProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createButtonLoaderStyles, {})\n\n  return (\n    <motion.div\n      role=\"status\"\n      aria-label=\"Loading\"\n      style={styles.container}\n      {...SPINNER_ANIMATION}\n    />\n  )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createButtonLoaderStyles(): StyleMap {\n  return styled({\n    container: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      borderRadius: 'var(--px-border-radius-button)'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Loader } from '@components/toolkit/Loader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\ntype Props = {\n  color: string\n}\n\nexport const ButtonLoader: React.FC<Props> = ({ color }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createButtonLoaderStyles, {})\n\n  return (\n    <motion.div\n      style={styles.container}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n    >\n      <Loader color={color} />\n    </motion.div>\n  )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { ButtonProps, ButtonSize, ButtonVariant } from './types'\nimport type { CSSProperties } from 'react'\n\nexport function createButtonStyles({\n  size,\n  color,\n  variant,\n  disabled,\n  fullWidth,\n  textAlign,\n  outlineColor\n}: ButtonProps): ReturnType<typeof styled> {\n  const finalVariant = variant ?? 'filled'\n\n  return styled({\n    container: {\n      ...getSize(size || 'md'),\n\n      width: fullWidth ? '100%' : 'fit-content',\n\n      position: 'relative',\n      display: 'flex',\n      justifyContent: textAlign || 'center',\n\n      padding: '10px var(--px-space-xl)',\n      gap: 'var(--px-space-sm)',\n\n      borderRadius: 'var(--px-radius-md)',\n\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      opacity: disabled ? 0.5 : 1,\n      transition: 'background-color 0.5s',\n\n      border: getBorder(finalVariant, outlineColor || color),\n      backgroundColor: getBackgroundColor(finalVariant, color),\n\n      boxShadow:\n        '0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D121A inset',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        }\n      }\n    },\n\n    content: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n\n      padding: '0',\n      borderRadius: 'inherit',\n\n      whiteSpace: 'nowrap',\n      columnGap: 'var(--px-space-sm)'\n    }\n  })\n}\n\nfunction getSize(size: ButtonSize | string): CSSProperties {\n  switch (size) {\n    case 'lg':\n      return { minHeight: '3.25rem' }\n    case 'md':\n      return { minHeight: '2.75rem' }\n    case 'sm':\n      return { minHeight: '2.25rem' }\n    case 'xs':\n      return { minHeight: '1.75rem' }\n    default:\n      return { minHeight: size }\n  }\n}\n\nfunction getBackgroundColor(variant: ButtonVariant, color?: string): string {\n  if (color) return color\n\n  if (variant === 'filled') return 'var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return 'transparent'\n\n  if (variant === 'ghost') return 'transparent'\n\n  return 'var(--px-btn-filled-bg)'\n}\n\nfunction getBorder(variant: ButtonVariant, color?: string): string {\n  if (color) return `1px solid ${color}`\n\n  if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return '1px solid var(--px-btn-outlined-border)'\n\n  if (variant === 'ghost') return 'none'\n\n  return '1px solid var(--px-color-primary)'\n}\n\nexport function getTextColor({ variant, labelColor }: ButtonProps) {\n  if (labelColor) return labelColor\n\n  if (variant === 'filled') return 'var(--px-btn-filled-label)'\n\n  if (variant === 'outlined') return 'var(--px-btn-outlined-label)'\n\n  if (variant === 'ghost') return '--px-btn-ghost-label'\n\n  return 'var(--px-btn-filled-label)'\n}\n","// External Libraries\nimport type React from 'react'\nimport { AnimatePresence } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\nimport { ButtonLoader } from './components/ButtonLoader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ButtonProps } from './types'\n\n// Styles\nimport { createButtonStyles, getTextColor } from './styles'\n\nexport const Button: React.FC<ButtonProps> = ({\n  type = 'button',\n  variant = 'filled',\n  ...rest\n}) => {\n  // Constants\n  const disabled = rest.disabled || rest.loading\n  const resolvedProps = { type, variant, disabled, ...rest }\n  const textColor = getTextColor(resolvedProps)\n  const { label, endIcon, startIcon, loading } = resolvedProps\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    resolvedProps,\n    createButtonStyles,\n    {\n      override: rest.styles,\n      applyCommonProps: true,\n      commonSlot: 'container',\n      pick: p => [p.disabled, p.loading, p.label, p.color]\n    }\n  )\n\n  // Functions\n  function handleButtonClick() {\n    if (disabled) return\n\n    if (rest.onClick) rest.onClick()\n  }\n\n  return (\n    <button\n      type={type}\n      disabled={disabled}\n      aria-busy={rest.loading}\n      style={styles.container}\n      className={classes.container}\n      onClick={handleButtonClick}\n    >\n      <div style={styles.content}>\n        {startIcon ?? null}\n\n        <Typography variant=\"b1\" color={textColor}>\n          {label}\n        </Typography>\n\n        {endIcon ?? null}\n\n        {loading ? (\n          <AnimatePresence>\n            <ButtonLoader color={textColor} />\n          </AnimatePresence>\n        ) : null}\n      </div>\n    </button>\n  )\n}\n"],"mappings":"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"}

package/dist/{IconButton-IhShUhfe.js → IconButton-BBdkzg3b.js}

@@ -14,6 +14,7 @@ function createIconButtonStyles(props) {
 		alignItems: "center",
 		cursor: "pointer",
 		userSelect: "none",
+		boxShadow: "0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D121A inset",
 		__rules: {
 			"&:hover": { opacity: "0.85 !important" },
 			"&:disabled": {
@@ -26,32 +27,32 @@ function createIconButtonStyles(props) {
 function getSize(size) {
 	switch (size) {
 		case "lg": return {
-			height: "3.25rem",
-			width: "3.25rem"
+			minHeight: "3.25rem",
+			minWidth: "3.25rem"
 		};
 		case "md": return {
-			height: "2.75rem",
-			width: "2.75rem"
+			minHeight: "2.75rem",
+			minWidth: "2.75rem"
 		};
 		case "sm": return {
-			height: "2.25rem",
-			width: "2.25rem"
+			minHeight: "2.25rem",
+			minWidth: "2.25rem"
 		};
 		case "xs": return {
-			height: "1.75rem",
-			width: "1.75rem"
+			minHeight: "1.75rem",
+			minWidth: "1.75rem"
 		};
 		default: return {
-			height: size,
-			width: size
+			minHeight: size,
+			minWidth: size
 		};
 	}
 }
 function getBackgroundColor(variant, color) {
 	if (color) return color;
-	if (variant === "filled") return "var(--px-btn-filled-bg)";
+	if (variant === "filled") return "var(--px-btn-outlined-bg)";
 	if (variant === "outlined") return "var(--px-btn-outlined-bg)";
-	return "var(--px-btn-filled-bg)";
+	return "var(--px-btn-outlined-bg)";
 }
 function getBorder(variant, color) {
 	if (color) return `1px solid ${color}`;
@@ -88,4 +89,4 @@ const IconButton = (props) => {
 
 //#endregion
 export { IconButton as t };
-//# sourceMappingURL=IconButton-IhShUhfe.js.map
+//# sourceMappingURL=IconButton-BBdkzg3b.js.map

package/dist/IconButton-BBdkzg3b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton-BBdkzg3b.js","names":["IconButton: React.FC<IconButtonProps>"],"sources":["../src/components/commons/buttons/IconButton/styles.ts","../src/components/commons/buttons/IconButton/index.tsx"],"sourcesContent":["// Types\nimport type { CSSProperties } from 'react'\nimport type {\n  IconButtonProps,\n  IconButtonSize,\n  IconButtonVariant\n} from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createIconButtonStyles(props: IconButtonProps): StyleMap {\n  const {\n    variant = 'outlined',\n    size = 'md',\n    borderColor,\n    backgroundColor\n  } = props\n\n  return styled({\n    button: {\n      ...getSize(size),\n      backgroundColor: getBackgroundColor(variant, backgroundColor),\n      border: getBorder(variant, borderColor),\n      borderRadius: 'var(--px-radius-lg)',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n\n      boxShadow:\n        '0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D121A inset',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n        '&:disabled': {\n          opacity: '0.5',\n          cursor: 'not-allowed'\n        }\n      }\n    }\n  })\n}\n\nfunction getSize(size: IconButtonSize | string): CSSProperties {\n  switch (size) {\n    case 'lg':\n      return { minHeight: '3.25rem', minWidth: '3.25rem' }\n    case 'md':\n      return { minHeight: '2.75rem', minWidth: '2.75rem' }\n    case 'sm':\n      return { minHeight: '2.25rem', minWidth: '2.25rem' }\n    case 'xs':\n      return { minHeight: '1.75rem', minWidth: '1.75rem' }\n    default:\n      return { minHeight: size, minWidth: size }\n  }\n}\n\nfunction getBackgroundColor(\n  variant?: IconButtonVariant,\n  color?: string\n): string {\n  if (color) return color\n\n  if (variant === 'filled') return 'var(--px-btn-outlined-bg)'\n\n  if (variant === 'outlined') return 'var(--px-btn-outlined-bg)'\n\n  return 'var(--px-btn-outlined-bg)'\n}\n\nfunction getBorder(variant?: IconButtonVariant, color?: string): string {\n  if (color) return `1px solid ${color}`\n\n  if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return '1px solid var(--px-btn-outlined-border)'\n\n  return '1px solid var(--px-color-primary)'\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { IconButtonProps } from './types'\n\n// Styles\nimport { createIconButtonStyles } from './styles'\n\nexport const IconButton: React.FC<IconButtonProps> = props => {\n  // Constants\n  const disabled = props.isDisabled || props.isLoading\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createIconButtonStyles, {\n    pick: p => [p.size, p.variant, p.borderColor, p.backgroundColor],\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'button'\n  })\n\n  return (\n    <button\n      disabled={disabled}\n      aria-busy={props.isLoading}\n      type=\"button\"\n      className={classes.button}\n      style={styles.button}\n      onClick={props.onClick}\n    >\n      {props.icon}\n    </button>\n  )\n}\n"],"mappings":";;;;AASA,SAAgB,uBAAuB,OAAkC;CACvE,MAAM,EACJ,UAAU,YACV,OAAO,MACP,aACA,oBACE;AAEJ,QAAO,OAAO,EACZ,QAAQ;EACN,GAAG,QAAQ,KAAK;EAChB,iBAAiB,mBAAmB,SAAS,gBAAgB;EAC7D,QAAQ,UAAU,SAAS,YAAY;EACvC,cAAc;EACd,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,QAAQ;EACR,YAAY;EAEZ,WACE;EAEF,SAAS;GACP,WAAW,EACT,SAAS,mBACV;GACD,cAAc;IACZ,SAAS;IACT,QAAQ;IACT;GACF;EACF,EACF,CAAC;;AAGJ,SAAS,QAAQ,MAA8C;AAC7D,SAAQ,MAAR;EACE,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,QACE,QAAO;GAAE,WAAW;GAAM,UAAU;GAAM;;;AAIhD,SAAS,mBACP,SACA,OACQ;AACR,KAAI,MAAO,QAAO;AAElB,KAAI,YAAY,SAAU,QAAO;AAEjC,KAAI,YAAY,WAAY,QAAO;AAEnC,QAAO;;AAGT,SAAS,UAAU,SAA6B,OAAwB;AACtE,KAAI,MAAO,QAAO,aAAa;AAE/B,KAAI,YAAY,SAAU,QAAO;AAEjC,KAAI,YAAY,WAAY,QAAO;AAEnC,QAAO;;;;;ACvET,MAAaA,cAAwC,UAAS;CAE5D,MAAM,WAAW,MAAM,cAAc,MAAM;CAG3C,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,wBAAwB;EACzE,OAAM,MAAK;GAAC,EAAE;GAAM,EAAE;GAAS,EAAE;GAAa,EAAE;GAAgB;EAChE,UAAU,MAAM;EAChB,kBAAkB;EAClB,YAAY;EACb,CAAC;AAEF,QACE,oBAAC;EACW;EACV,aAAW,MAAM;EACjB,MAAK;EACL,WAAW,QAAQ;EACnB,OAAO,OAAO;EACd,SAAS,MAAM;YAEd,MAAM;GACA"}

package/dist/{ThemeContext-BsU2ZyE5.js → ThemeContext-BE6u_eYD.js}

@@ -96,8 +96,8 @@ const defaultThemes = {
 					background: "#0EB24C"
 				},
 				outlined: {
-					label: "#0EB24C",
-					borderColor: "#0EB24C"
+					label: "#222222",
+					borderColor: "#DDDDDD"
 				},
 				ghost: { label: "#6C6C6C" }
 			},
@@ -145,8 +145,8 @@ const defaultThemes = {
 					background: "#0EB24C"
 				},
 				outlined: {
-					label: "#0EB24C",
-					borderColor: "#0EB24C"
+					label: "#ECECEC",
+					borderColor: "#DDDDDD"
 				},
 				ghost: { label: "#6C6C6C" }
 			},
@@ -519,4 +519,4 @@ function useTheme() {
 
 //#endregion
 export { useTheme as n, ThemeProvider as t };
-//# sourceMappingURL=ThemeContext-BsU2ZyE5.js.map
+//# sourceMappingURL=ThemeContext-BE6u_eYD.js.map

package/dist/{ThemeContext-BsU2ZyE5.js.map → ThemeContext-BE6u_eYD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext-BsU2ZyE5.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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"}
+{"version":3,"file":"ThemeContext-BE6u_eYD.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: '#222222',\n          borderColor: '#DDDDDD'\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: '#ECECEC',\n          borderColor: '#DDDDDD'\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/button.js

@@ -1,5 +1,5 @@
 import "./useThemedStyles-3rUXJYgS.js";
 import "./Typography-BE-vQSfx.js";
-import { t as Button } from "./Button-CwK9nssQ.js";
+import { t as Button } from "./Button-BOHY-7P-.js";
 
 export { Button };

package/dist/icon-button.d.ts

@@ -1,2 +1,2 @@
-import { t as IconButton } from "./index-CyvtOmP2.js";
+import { t as IconButton } from "./index-DQ6UO9nm.js";
 export { IconButton };

package/dist/icon-button.js

@@ -1,4 +1,4 @@
 import "./useThemedStyles-3rUXJYgS.js";
-import { t as IconButton } from "./IconButton-IhShUhfe.js";
+import { t as IconButton } from "./IconButton-BBdkzg3b.js";
 
 export { IconButton };

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

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

package/dist/{index-CyvtOmP2.d.ts → index-DQ6UO9nm.d.ts}

@@ -14,7 +14,7 @@ interface IconButtonProps {
   backgroundColor?: string;
   borderColor?: string;
   styles?: Partial<ReturnType<typeof createIconButtonStyles>>;
-  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;
 }
 type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 type IconButtonVariant = 'filled' | 'outlined' | 'ghost';
@@ -23,4 +23,4 @@ type IconButtonVariant = 'filled' | 'outlined' | 'ghost';
 declare const IconButton: React.FC<IconButtonProps>;
 //#endregion
 export { IconButton as t };
-//# sourceMappingURL=index-CyvtOmP2.d.ts.map
+//# sourceMappingURL=index-DQ6UO9nm.d.ts.map

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import "./types-CDUx-y9q.js";
 import { t as Button } from "./index-DOwpBVkM.js";
-import { t as IconButton } from "./index-CyvtOmP2.js";
+import { t as IconButton } from "./index-DQ6UO9nm.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-DUrGjyKy.js";
+import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-CncL-rgW.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-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

@@ -2,12 +2,12 @@ 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 { n as useTheme, t as ThemeProvider } from "./ThemeContext-BE6u_eYD.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 { t as Button } from "./Button-BOHY-7P-.js";
+import { t as IconButton } from "./IconButton-BBdkzg3b.js";
 import "./Label-QQpNWSeV.js";
 import { t as Input } from "./Input-C7WKOO_t.js";
 import { t as TextArea } from "./TextArea-jpLThSHP.js";

package/dist/tab-switch.d.ts

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

package/dist/theme-context.js

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

package/dist/typography.d.ts

@@ -1,8 +1,8 @@
 import { t as TypographyProps } from "./types-CDUx-y9q.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/components/toolkit/Typography/index.d.ts
-declare function Typography(props: TypographyProps): react_jsx_runtime0.JSX.Element;
+declare function Typography(props: TypographyProps): react_jsx_runtime1.JSX.Element;
 //#endregion
 export { Typography };
 //# sourceMappingURL=typography.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softable-pixels-web",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "",
   "keywords": [],
   "author": "softable",

package/dist/Button-CwK9nssQ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button-CwK9nssQ.js","names":["getBorder","createButtonLoaderStyles","getBorder","Loader: React.FC<LoaderProps>","createButtonLoaderStyles","ButtonLoader: React.FC<Props>","Button: React.FC<ButtonProps>"],"sources":["../src/utils/animations/spiner.ts","../src/components/toolkit/Loader/constants.ts","../src/components/toolkit/Loader/utils.ts","../src/components/toolkit/Loader/styles.ts","../src/components/toolkit/Loader/index.tsx","../src/components/commons/buttons/Button/components/ButtonLoader/styles.ts","../src/components/commons/buttons/Button/components/ButtonLoader/index.tsx","../src/components/commons/buttons/Button/styles.ts","../src/components/commons/buttons/Button/index.tsx"],"sourcesContent":["export const SPINNER_ANIMATION = {\n  animate: { rotate: 360 },\n  transition: {\n    repeat: Infinity,\n    duration: 1,\n    ease: 'linear'\n  }\n}\n","const DEFAULT_SIZE = '20px'\nconst DEFAULT_THICKNESS = '2px'\n\nconst DEFAULT_COLOR = 'white'\nconst DEFAULT_EMPTY_COLOR = 'transparent'\n\nexport { DEFAULT_SIZE, DEFAULT_THICKNESS, DEFAULT_COLOR, DEFAULT_EMPTY_COLOR }\n","// Utils\nimport { DEFAULT_THICKNESS, DEFAULT_EMPTY_COLOR } from './constants'\n\n// Types\nimport type { LoaderProps } from './types'\n\nexport function getBorder(props: LoaderProps) {\n  const thickness = props.thickness || DEFAULT_THICKNESS\n  const emptyColor = props.emptyColor || DEFAULT_EMPTY_COLOR\n\n  return `${thickness} solid ${emptyColor}`\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\nimport type { LoaderProps } from './types'\nimport { getBorder } from './utils'\nimport { DEFAULT_COLOR, DEFAULT_SIZE } from './constants'\n\nexport function createButtonLoaderStyles(props: LoaderProps): StyleMap {\n  return styled({\n    container: {\n      display: ' inline-block',\n\n      width: props.size || DEFAULT_SIZE,\n      height: props.size || DEFAULT_SIZE,\n\n      borderRadius: '50%',\n      border: getBorder(props),\n      borderLeftColor: props.color || DEFAULT_COLOR\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { SPINNER_ANIMATION } from '@utils/animations'\n\n// Types\nimport type { LoaderProps } from './types'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\nexport const Loader: React.FC<LoaderProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createButtonLoaderStyles, {})\n\n  return (\n    <motion.div\n      role=\"status\"\n      aria-label=\"Loading\"\n      style={styles.container}\n      {...SPINNER_ANIMATION}\n    />\n  )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createButtonLoaderStyles(): StyleMap {\n  return styled({\n    container: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      borderRadius: 'var(--px-border-radius-button)'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Loader } from '@components/toolkit/Loader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\ntype Props = {\n  color: string\n}\n\nexport const ButtonLoader: React.FC<Props> = ({ color }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createButtonLoaderStyles, {})\n\n  return (\n    <motion.div\n      style={styles.container}\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      exit={{ opacity: 0 }}\n    >\n      <Loader color={color} />\n    </motion.div>\n  )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { ButtonProps, ButtonSize, ButtonVariant } from './types'\nimport type { CSSProperties } from 'react'\n\nexport function createButtonStyles({\n  size,\n  color,\n  variant,\n  disabled,\n  fullWidth,\n  textAlign,\n  outlineColor\n}: ButtonProps): ReturnType<typeof styled> {\n  const finalVariant = variant ?? 'filled'\n\n  return styled({\n    container: {\n      minHeight: '2rem',\n      ...getSize(size || 'md'),\n\n      width: fullWidth ? '100%' : 'fit-content',\n\n      position: 'relative',\n      display: 'flex',\n      justifyContent: textAlign || 'center',\n\n      padding: '10px var(--px-space-xl)',\n      gap: 'var(--px-space-sm)',\n\n      borderRadius: 'var(--px-radius-md)',\n\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      opacity: disabled ? 0.5 : 1,\n      transition: 'background-color 0.5s',\n\n      border: getBorder(finalVariant, outlineColor || color),\n      backgroundColor: getBackgroundColor(finalVariant, color),\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        }\n      }\n    },\n\n    content: {\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n\n      padding: '0',\n      borderRadius: 'inherit',\n\n      whiteSpace: 'nowrap',\n      columnGap: 'var(--px-space-sm)'\n    }\n  })\n}\n\nfunction getSize(size: ButtonSize | string): CSSProperties {\n  switch (size) {\n    case 'lg':\n      return { height: '3.25rem' }\n    case 'md':\n      return { height: '2.75rem' }\n    case 'sm':\n      return { height: '2.25rem' }\n    case 'xs':\n      return { height: '1.75rem' }\n    default:\n      return { height: size }\n  }\n}\n\nfunction getBackgroundColor(variant: ButtonVariant, color?: string): string {\n  if (color) return color\n\n  if (variant === 'filled') return 'var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return 'transparent'\n\n  if (variant === 'ghost') return 'transparent'\n\n  return 'var(--px-btn-filled-bg)'\n}\n\nfunction getBorder(variant: ButtonVariant, color?: string): string {\n  if (color) return `1px solid ${color}`\n\n  if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return '1px solid var(--px-btn-outlined-border)'\n\n  if (variant === 'ghost') return 'none'\n\n  return '1px solid var(--px-color-primary)'\n}\n\nexport function getTextColor({ variant, labelColor }: ButtonProps) {\n  if (labelColor) return labelColor\n\n  if (variant === 'filled') return 'var(--px-btn-filled-label)'\n\n  if (variant === 'outlined') return 'var(--px-btn-outlined-label)'\n\n  if (variant === 'ghost') return '--px-btn-ghost-label'\n\n  return 'var(--px-btn-filled-label)'\n}\n","// External Libraries\nimport type React from 'react'\nimport { AnimatePresence } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\nimport { ButtonLoader } from './components/ButtonLoader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ButtonProps } from './types'\n\n// Styles\nimport { createButtonStyles, getTextColor } from './styles'\n\nexport const Button: React.FC<ButtonProps> = ({\n  type = 'button',\n  variant = 'filled',\n  ...rest\n}) => {\n  // Constants\n  const disabled = rest.disabled || rest.loading\n  const resolvedProps = { type, variant, disabled, ...rest }\n  const textColor = getTextColor(resolvedProps)\n  const { label, endIcon, startIcon, loading } = resolvedProps\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    resolvedProps,\n    createButtonStyles,\n    {\n      override: rest.styles,\n      applyCommonProps: true,\n      commonSlot: 'container',\n      pick: p => [p.disabled, p.loading, p.label, p.color]\n    }\n  )\n\n  // Functions\n  function handleButtonClick() {\n    if (disabled) return\n\n    if (rest.onClick) rest.onClick()\n  }\n\n  return (\n    <button\n      type={type}\n      disabled={disabled}\n      aria-busy={rest.loading}\n      style={styles.container}\n      className={classes.container}\n      onClick={handleButtonClick}\n    >\n      <div style={styles.content}>\n        {startIcon ?? null}\n\n        <Typography variant=\"b1\" color={textColor}>\n          {label}\n        </Typography>\n\n        {endIcon ?? null}\n\n        {loading ? (\n          <AnimatePresence>\n            <ButtonLoader color={textColor} />\n          </AnimatePresence>\n        ) : null}\n      </div>\n    </button>\n  )\n}\n"],"mappings":"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"}

package/dist/IconButton-IhShUhfe.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton-IhShUhfe.js","names":["IconButton: React.FC<IconButtonProps>"],"sources":["../src/components/commons/buttons/IconButton/styles.ts","../src/components/commons/buttons/IconButton/index.tsx"],"sourcesContent":["// Types\nimport type { CSSProperties } from 'react'\nimport type {\n  IconButtonProps,\n  IconButtonSize,\n  IconButtonVariant\n} from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createIconButtonStyles(props: IconButtonProps): StyleMap {\n  const {\n    variant = 'outlined',\n    size = 'md',\n    borderColor,\n    backgroundColor\n  } = props\n\n  return styled({\n    button: {\n      ...getSize(size),\n      backgroundColor: getBackgroundColor(variant, backgroundColor),\n      border: getBorder(variant, borderColor),\n      borderRadius: 'var(--px-radius-lg)',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n        '&:disabled': {\n          opacity: '0.5',\n          cursor: 'not-allowed'\n        }\n      }\n    }\n  })\n}\n\nfunction getSize(size: IconButtonSize | string): CSSProperties {\n  switch (size) {\n    case 'lg':\n      return { height: '3.25rem', width: '3.25rem' }\n    case 'md':\n      return { height: '2.75rem', width: '2.75rem' }\n    case 'sm':\n      return { height: '2.25rem', width: '2.25rem' }\n    case 'xs':\n      return { height: '1.75rem', width: '1.75rem' }\n    default:\n      return { height: size, width: size }\n  }\n}\n\nfunction getBackgroundColor(\n  variant?: IconButtonVariant,\n  color?: string\n): string {\n  if (color) return color\n\n  if (variant === 'filled') return 'var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return 'var(--px-btn-outlined-bg)'\n\n  return 'var(--px-btn-filled-bg)'\n}\n\nfunction getBorder(variant?: IconButtonVariant, color?: string): string {\n  if (color) return `1px solid ${color}`\n\n  if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return '1px solid var(--px-btn-outlined-border)'\n\n  return '1px solid var(--px-color-primary)'\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { IconButtonProps } from './types'\n\n// Styles\nimport { createIconButtonStyles } from './styles'\n\nexport const IconButton: React.FC<IconButtonProps> = props => {\n  // Constants\n  const disabled = props.isDisabled || props.isLoading\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createIconButtonStyles, {\n    pick: p => [p.size, p.variant, p.borderColor, p.backgroundColor],\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'button'\n  })\n\n  return (\n    <button\n      disabled={disabled}\n      aria-busy={props.isLoading}\n      type=\"button\"\n      className={classes.button}\n      style={styles.button}\n      onClick={props.onClick}\n    >\n      {props.icon}\n    </button>\n  )\n}\n"],"mappings":";;;;AASA,SAAgB,uBAAuB,OAAkC;CACvE,MAAM,EACJ,UAAU,YACV,OAAO,MACP,aACA,oBACE;AAEJ,QAAO,OAAO,EACZ,QAAQ;EACN,GAAG,QAAQ,KAAK;EAChB,iBAAiB,mBAAmB,SAAS,gBAAgB;EAC7D,QAAQ,UAAU,SAAS,YAAY;EACvC,cAAc;EACd,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,QAAQ;EACR,YAAY;EAEZ,SAAS;GACP,WAAW,EACT,SAAS,mBACV;GACD,cAAc;IACZ,SAAS;IACT,QAAQ;IACT;GACF;EACF,EACF,CAAC;;AAGJ,SAAS,QAAQ,MAA8C;AAC7D,SAAQ,MAAR;EACE,KAAK,KACH,QAAO;GAAE,QAAQ;GAAW,OAAO;GAAW;EAChD,KAAK,KACH,QAAO;GAAE,QAAQ;GAAW,OAAO;GAAW;EAChD,KAAK,KACH,QAAO;GAAE,QAAQ;GAAW,OAAO;GAAW;EAChD,KAAK,KACH,QAAO;GAAE,QAAQ;GAAW,OAAO;GAAW;EAChD,QACE,QAAO;GAAE,QAAQ;GAAM,OAAO;GAAM;;;AAI1C,SAAS,mBACP,SACA,OACQ;AACR,KAAI,MAAO,QAAO;AAElB,KAAI,YAAY,SAAU,QAAO;AAEjC,KAAI,YAAY,WAAY,QAAO;AAEnC,QAAO;;AAGT,SAAS,UAAU,SAA6B,OAAwB;AACtE,KAAI,MAAO,QAAO,aAAa;AAE/B,KAAI,YAAY,SAAU,QAAO;AAEjC,KAAI,YAAY,WAAY,QAAO;AAEnC,QAAO;;;;;ACpET,MAAaA,cAAwC,UAAS;CAE5D,MAAM,WAAW,MAAM,cAAc,MAAM;CAG3C,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,wBAAwB;EACzE,OAAM,MAAK;GAAC,EAAE;GAAM,EAAE;GAAS,EAAE;GAAa,EAAE;GAAgB;EAChE,UAAU,MAAM;EAChB,kBAAkB;EAClB,YAAY;EACb,CAAC;AAEF,QACE,oBAAC;EACW;EACV,aAAW,MAAM;EACjB,MAAK;EACL,WAAW,QAAQ;EACnB,OAAO,OAAO;EACd,SAAS,MAAM;YAEd,MAAM;GACA"}