softable-pixels-web 1.1.19 → 1.1.20

package/dist/{Button-DiBsoNFU.js → Button-Cbt1knrt.js}

@@ -82,7 +82,7 @@ const ButtonLoader = ({ color }) => {
 
 //#endregion
 //#region src/components/commons/buttons/Button/styles.ts
-function createButtonStyles({ size, color, variant, disabled, fullWidth, textAlign, outlineColor }) {
+function createButtonStyles({ size, color, variant, fullWidth, textAlign, outlineColor }) {
 	const finalVariant = variant ?? "filled";
 	return styled({
 		container: {
@@ -93,12 +93,12 @@ function createButtonStyles({ size, color, variant, disabled, fullWidth, textAli
 			justifyContent: textAlign || "center",
 			padding: "10px var(--px-space-xl)",
 			gap: "var(--px-space-sm)",
-			borderRadius: "var(--px-radius-md)",
+			borderRadius: "var(--px-radius-lg)",
 			cursor: "pointer",
 			transition: "background-color 0.5s",
 			border: getBorder(finalVariant, outlineColor || color),
 			backgroundColor: getBackgroundColor(finalVariant, color),
-			boxShadow: variant === "outlined" ? `0px -1px 0px #0A0D120D inset, 0px 1px 2px #0A0D120D` : "none",
+			boxShadow: variant === "outlined" ? "var(--px-shadow-xs)" : "none",
 			__rules: {
 				"&:hover": { opacity: "0.85 !important" },
 				"&:disabled": {
@@ -202,4 +202,4 @@ const Button = ({ type = "button", variant = "filled", ...rest }) => {
 
 //#endregion
 export { Button as t };
-//# sourceMappingURL=Button-DiBsoNFU.js.map
+//# sourceMappingURL=Button-Cbt1knrt.js.map

package/dist/Button-Cbt1knrt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-Cbt1knrt.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/commons/toolkit/Loader/constants.ts","../src/components/commons/toolkit/Loader/utils.ts","../src/components/commons/toolkit/Loader/styles.ts","../src/components/commons/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/commons/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'\n\nexport function createButtonStyles({\n  size,\n  color,\n  variant,\n  fullWidth,\n  textAlign,\n  outlineColor\n}: ButtonProps) {\n  const finalVariant = variant ?? 'filled'\n\n  return styled({\n    container: {\n      minHeight: getSize(size ?? 'md'),\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-lg)',\n\n      cursor: 'pointer',\n\n      transition: 'background-color 0.5s',\n\n      border: getBorder(finalVariant, outlineColor || color),\n      backgroundColor: getBackgroundColor(finalVariant, color),\n      boxShadow: variant === 'outlined' ? 'var(--px-shadow-xs)' : 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !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): string {\n  switch (size) {\n    case 'lg':\n      return '3.25rem'\n    case 'md':\n      return '2.75rem'\n    case 'sm':\n      return '2.25rem'\n    case 'xs':\n      return '1.75rem'\n    default:\n      return 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-border-primary)'\n\n  if (variant === 'ghost') return 'none'\n\n  return '1px solid var(--px-color-primary)'\n}\n\nexport function getTextColor({ variant, labelColor }: ButtonProps): string {\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 type { MouseEvent } from 'react'\nimport { AnimatePresence } from 'framer-motion'\n\n// Components\nimport { ButtonLoader } from './components/ButtonLoader'\nimport { Typography } from '@components/commons/toolkit/Typography'\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(event: MouseEvent<HTMLButtonElement>) {\n    if (disabled) return\n\n    if (rest.onClick) rest.onClick(event)\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\n          color={textColor}\n          fontSize={resolvedProps.fontSize}\n          variant={rest.labelVariant || 'b1'}\n        >\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-DAZvE8i5.js → IconButton-B_yAoSQR.js}

@@ -6,15 +6,15 @@ function createIconButtonStyles(props) {
 	const { variant = "outlined", size = "md", borderColor, backgroundColor } = props;
 	return styled({ button: {
 		...getSize(size),
-		backgroundColor: getBackgroundColor(variant, backgroundColor),
-		border: getBorder(variant, borderColor),
-		borderRadius: "var(--px-radius-lg)",
 		display: "flex",
-		justifyContent: "center",
 		alignItems: "center",
+		justifyContent: "center",
 		cursor: "pointer",
 		userSelect: "none",
-		boxShadow: "0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D121A inset",
+		borderRadius: "var(--px-radius-lg)",
+		border: getBorder(variant, borderColor),
+		backgroundColor: getBackgroundColor(variant, backgroundColor),
+		boxShadow: "var(--px-shadow-xs)",
 		__rules: {
 			"&:hover": { opacity: "0.85 !important" },
 			"&:disabled": {
@@ -50,14 +50,16 @@ function getSize(size) {
 }
 function getBackgroundColor(variant, color) {
 	if (color) return color;
-	if (variant === "filled") return "var(--px-btn-outlined-bg)";
-	if (variant === "outlined") return "var(--px-btn-outlined-bg)";
+	if (variant === "filled") return "var(--px-btn-filled-bg)";
+	if (variant === "outlined") return "transparent";
+	if (variant === "ghost") return "transparent";
 	return "var(--px-btn-outlined-bg)";
 }
 function getBorder(variant, color) {
 	if (color) return `1px solid ${color}`;
 	if (variant === "filled") return "1px solid var(--px-btn-filled-bg)";
-	if (variant === "outlined") return "1px solid var(--px-btn-outlined-border)";
+	if (variant === "outlined") return "1px solid var(--px-border-primary)";
+	if (variant === "ghost") return "none";
 	return "1px solid var(--px-color-primary)";
 }
 
@@ -89,4 +91,4 @@ const IconButton = (props) => {
 
 //#endregion
 export { IconButton as t };
-//# sourceMappingURL=IconButton-DAZvE8i5.js.map
+//# sourceMappingURL=IconButton-B_yAoSQR.js.map

package/dist/IconButton-B_yAoSQR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton-B_yAoSQR.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 {\n  IconButtonSize,\n  IconButtonProps,\n  IconButtonVariant\n} from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createIconButtonStyles(props: IconButtonProps) {\n  const {\n    variant = 'outlined',\n    size = 'md',\n    borderColor,\n    backgroundColor\n  } = props\n\n  return styled({\n    button: {\n      ...getSize(size),\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      cursor: 'pointer',\n      userSelect: 'none',\n\n      borderRadius: 'var(--px-radius-lg)',\n      border: getBorder(variant, borderColor),\n      backgroundColor: getBackgroundColor(variant, backgroundColor),\n      boxShadow: 'var(--px-shadow-xs)',\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) {\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-filled-bg)'\n\n  if (variant === 'outlined') return 'transparent'\n\n  if (variant === 'ghost') return 'transparent'\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-border-primary)'\n\n  if (variant === 'ghost') return 'none'\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":";;;;AAQA,SAAgB,uBAAuB,OAAwB;CAC7D,MAAM,EACJ,UAAU,YACV,OAAO,MACP,aACA,oBACE;AAEJ,QAAO,OAAO,EACZ,QAAQ;EACN,GAAG,QAAQ,KAAK;EAEhB,SAAS;EACT,YAAY;EACZ,gBAAgB;EAEhB,QAAQ;EACR,YAAY;EAEZ,cAAc;EACd,QAAQ,UAAU,SAAS,YAAY;EACvC,iBAAiB,mBAAmB,SAAS,gBAAgB;EAC7D,WAAW;EAEX,SAAS;GACP,WAAW,EACT,SAAS,mBACV;GACD,cAAc;IACZ,SAAS;IACT,QAAQ;IACT;GACF;EACF,EACF,CAAC;;AAGJ,SAAS,QAAQ,MAAsB;AACrC,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,KAAI,YAAY,QAAS,QAAO;AAEhC,QAAO;;AAGT,SAAS,UAAU,SAA6B,OAAwB;AACtE,KAAI,MAAO,QAAO,aAAa;AAE/B,KAAI,YAAY,SAAU,QAAO;AAEjC,KAAI,YAAY,WAAY,QAAO;AAEnC,KAAI,YAAY,QAAS,QAAO;AAEhC,QAAO;;;;;AC3ET,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/button.d.ts

@@ -1,3 +1,3 @@
 import "./types-Ck6jQYTO.js";
-import { t as Button } from "./index-E0ifwXgE.js";
+import { t as Button } from "./index-BLsNfmom.js";
 export { Button };

package/dist/button.js

@@ -1,5 +1,5 @@
 import "./useThemedStyles-CrarDyWc.js";
 import "./Typography-BkFV7BhK.js";
-import { t as Button } from "./Button-DiBsoNFU.js";
+import { t as Button } from "./Button-Cbt1knrt.js";
 
 export { Button };

package/dist/icon-button.d.ts

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

package/dist/icon-button.js

@@ -1,4 +1,4 @@
 import "./useThemedStyles-CrarDyWc.js";
-import { t as IconButton } from "./IconButton-DAZvE8i5.js";
+import { t as IconButton } from "./IconButton-B_yAoSQR.js";
 
 export { IconButton };

package/dist/{index-E0ifwXgE.d.ts → index-BLsNfmom.d.ts}

@@ -8,7 +8,6 @@ declare function createButtonStyles({
   size,
   color,
   variant,
-  disabled,
   fullWidth,
   textAlign,
   outlineColor
@@ -26,7 +25,7 @@ declare function createButtonStyles({
     transition: "background-color 0.5s";
     border: string;
     backgroundColor: string;
-    boxShadow: "none" | "0px -1px 0px #0A0D120D inset, 0px 1px 2px #0A0D120D";
+    boxShadow: "none" | "var(--px-shadow-xs)";
     __rules: {
       '&:hover': {
         opacity: "0.85 !important";
@@ -116,4 +115,4 @@ interface ButtonProps extends PaddingProps {
 declare const Button: React.FC<ButtonProps>;
 //#endregion
 export { Button as t };
-//# sourceMappingURL=index-E0ifwXgE.d.ts.map
+//# sourceMappingURL=index-BLsNfmom.d.ts.map

package/dist/{index-BszVk1Tx.d.ts → index-ROp2paYJ.d.ts}

@@ -2,13 +2,34 @@ import { MouseEvent, ReactNode } from "react";
 
 //#region src/components/commons/buttons/IconButton/styles.d.ts
 declare function createIconButtonStyles(props: IconButtonProps): {
-  button: any;
+  button: {
+    display: "flex";
+    alignItems: "center";
+    justifyContent: "center";
+    cursor: "pointer";
+    userSelect: "none";
+    borderRadius: string;
+    border: string;
+    backgroundColor: string;
+    boxShadow: "var(--px-shadow-xs)";
+    __rules: {
+      '&:hover': {
+        opacity: "0.85 !important";
+      };
+      '&:disabled': {
+        opacity: "0.5";
+        cursor: "not-allowed";
+      };
+    };
+    minHeight: string;
+    minWidth: string;
+  };
 };
 //#endregion
 //#region src/components/commons/buttons/IconButton/types.d.ts
 interface IconButtonProps {
   icon: ReactNode;
-  size?: IconButtonSize | (string & {});
+  size?: IconButtonSize;
   isLoading?: boolean;
   isDisabled?: boolean;
   variant?: IconButtonVariant;
@@ -17,11 +38,11 @@ interface IconButtonProps {
   styles?: Partial<ReturnType<typeof createIconButtonStyles>>;
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 }
-type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg' | (string & {});
 type IconButtonVariant = 'filled' | 'outlined' | 'ghost';
 //#endregion
 //#region src/components/commons/buttons/IconButton/index.d.ts
 declare const IconButton: React.FC<IconButtonProps>;
 //#endregion
 export { IconButton as t };
-//# sourceMappingURL=index-BszVk1Tx.d.ts.map
+//# sourceMappingURL=index-ROp2paYJ.d.ts.map

package/dist/{index-D-9XHxWM.d.ts → index-v04O7Gs-.d.ts}

@@ -1,6 +1,6 @@
 import { t as CommonStyleProps } from "./styleProps-B2pBEf9N.js";
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/components/commons/toolkit/TabSwitch/styles.d.ts
 declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): {
@@ -41,7 +41,7 @@ interface TabSwitchProps<T> extends CommonStyleProps {
 }
 //#endregion
 //#region src/components/commons/toolkit/TabSwitch/index.d.ts
-declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime0.JSX.Element;
+declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime2.JSX.Element;
 //#endregion
 export { SwitchOption as n, TabSwitchProps as r, TabSwitch as t };
-//# sourceMappingURL=index-D-9XHxWM.d.ts.map
+//# sourceMappingURL=index-v04O7Gs-.d.ts.map

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import "./types-Ck6jQYTO.js";
-import { t as Button } from "./index-E0ifwXgE.js";
-import { t as IconButton } from "./index-BszVk1Tx.js";
+import { t as Button } from "./index-BLsNfmom.js";
+import { t as IconButton } from "./index-ROp2paYJ.js";
 import { t as Input } from "./index-B1QUSkjv.js";
 import { n as types_d_exports$2, t as Select } from "./index-9BlZnPff.js";
 import { n as types_d_exports$1 } from "./types-699enaOL.js";
@@ -12,7 +12,7 @@ import { t as Checkbox } from "./index-BymgvkBq.js";
 import { n as types_d_exports, t as ContextMenu } from "./index-B6V8Bhgk.js";
 import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
 import { t as Switch } from "./index-aQIW73fh.js";
-import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-D-9XHxWM.js";
+import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-v04O7Gs-.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-BD5ThARj.js";
 import { useDismiss } from "./use-dismiss.js";

package/dist/index.js

@@ -12,8 +12,8 @@ import { t as CheckItem } from "./CheckItem-CJqWCE1W.js";
 import { t as InfoSummary } from "./InfoSummary-Cf2ein9V.js";
 import { n as types_exports, t as ContextMenu } from "./ContextMenu-vFIUXgP8.js";
 import { t as BasePopover } from "./BasePopover-UzOryrTn.js";
-import { t as Button } from "./Button-DiBsoNFU.js";
-import { t as IconButton } from "./IconButton-DAZvE8i5.js";
+import { t as Button } from "./Button-Cbt1knrt.js";
+import { t as IconButton } from "./IconButton-B_yAoSQR.js";
 import "./Label-BHq2knad.js";
 import { t as Input } from "./Input-B6a6mXsZ.js";
 import { n as types_exports$2, t as Select } from "./Select-CVcQGxjv.js";

package/dist/tab-switch.d.ts

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

package/dist/typography.d.ts

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

package/package.json

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

package/dist/Button-DiBsoNFU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button-DiBsoNFU.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/commons/toolkit/Loader/constants.ts","../src/components/commons/toolkit/Loader/utils.ts","../src/components/commons/toolkit/Loader/styles.ts","../src/components/commons/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/commons/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'\n\nexport function createButtonStyles({\n  size,\n  color,\n  variant,\n  disabled,\n  fullWidth,\n  textAlign,\n  outlineColor\n}: ButtonProps) {\n  const finalVariant = variant ?? 'filled'\n\n  return styled({\n    container: {\n      minHeight: getSize(size ?? 'md'),\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: 'pointer',\n\n      transition: 'background-color 0.5s',\n\n      border: getBorder(finalVariant, outlineColor || color),\n      backgroundColor: getBackgroundColor(finalVariant, color),\n\n      boxShadow:\n        variant === 'outlined'\n          ? `0px -1px 0px #0A0D120D inset, 0px 1px 2px #0A0D120D`\n          : 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !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): string {\n  switch (size) {\n    case 'lg':\n      return '3.25rem'\n    case 'md':\n      return '2.75rem'\n    case 'sm':\n      return '2.25rem'\n    case 'xs':\n      return '1.75rem'\n    default:\n      return 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-border-primary)'\n\n  if (variant === 'ghost') return 'none'\n\n  return '1px solid var(--px-color-primary)'\n}\n\nexport function getTextColor({ variant, labelColor }: ButtonProps): string {\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 type { MouseEvent } from 'react'\nimport { AnimatePresence } from 'framer-motion'\n\n// Components\nimport { ButtonLoader } from './components/ButtonLoader'\nimport { Typography } from '@components/commons/toolkit/Typography'\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(event: MouseEvent<HTMLButtonElement>) {\n    if (disabled) return\n\n    if (rest.onClick) rest.onClick(event)\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\n          color={textColor}\n          fontSize={resolvedProps.fontSize}\n          variant={rest.labelVariant || 'b1'}\n        >\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-DAZvE8i5.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton-DAZvE8i5.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  IconButtonSize,\n  IconButtonProps,\n  IconButtonVariant\n} from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createIconButtonStyles(props: IconButtonProps) {\n  const {\n    variant = 'outlined',\n    size = 'md',\n    borderColor,\n    backgroundColor\n  } = props\n\n  return styled({\n    button: {\n      ...(getSize(size) as any),\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,OAAwB;CAC7D,MAAM,EACJ,UAAU,YACV,OAAO,MACP,aACA,oBACE;AAEJ,QAAO,OAAO,EACZ,QAAQ;EACN,GAAI,QAAQ,KAAK;EACjB,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"}