softable-pixels-web 1.1.27 → 1.1.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/{Button-BP_w_ohI.js → Button-0m63Nyv9.js} +10 -3
  2. package/dist/Button-0m63Nyv9.js.map +1 -0
  3. package/dist/{IconButton-CYEJViqh.js → IconButton-iiLQQcYQ.js} +5 -1
  4. package/dist/IconButton-iiLQQcYQ.js.map +1 -0
  5. package/dist/{Input-DwYedsYg.js → Input-DD-ZOugU.js} +18 -5
  6. package/dist/Input-DD-ZOugU.js.map +1 -0
  7. package/dist/button.d.ts +1 -1
  8. package/dist/button.js +1 -1
  9. package/dist/icon-button.d.ts +1 -1
  10. package/dist/icon-button.js +1 -1
  11. package/dist/{index-DOH2_ypC.d.ts → index-C4JS9PSn.d.ts} +7 -1
  12. package/dist/{index-DI7_pAa-.d.ts → index-CfJRp6Z5.d.ts} +5 -1
  13. package/dist/index.d.ts +2 -2
  14. package/dist/index.js +3 -3
  15. package/dist/input.js +1 -1
  16. package/package.json +1 -1
  17. package/dist/Button-BP_w_ohI.js.map +0 -1
  18. package/dist/IconButton-CYEJViqh.js.map +0 -1
  19. package/dist/Input-DwYedsYg.js.map +0 -1
package/dist/{Button-BP_w_ohI.js → Button-0m63Nyv9.js} RENAMED
@@ -63,7 +63,8 @@ function createButtonLoaderStyles() {
63
63
  display: "flex",
64
64
  alignItems: "center",
65
65
  justifyContent: "center",
66
- borderRadius: "var(--px-border-radius-button)"
66
+ borderRadius: "var(--px-border-radius-button)",
67
+ backgroundColor: "inherit"
67
68
  } });
68
69
  }
69
70
 
@@ -95,6 +96,7 @@ function createButtonStyles({ size, color, variant, fullWidth, textAlign, outlin
95
96
  gap: "var(--px-space-sm)",
96
97
  borderRadius: "var(--px-radius-lg)",
97
98
  cursor: "pointer",
99
+ overflow: "hidden",
98
100
  transition: "background-color 0.5s",
99
101
  border: getBorder(finalVariant, outlineColor || color),
100
102
  backgroundColor: getBackgroundColor(finalVariant, color),
@@ -104,6 +106,10 @@ function createButtonStyles({ size, color, variant, fullWidth, textAlign, outlin
104
106
  "&:disabled": {
105
107
  opacity: "0.5 !important",
106
108
  cursor: "not-allowed !important"
109
+ },
110
+ "&:focus": {
111
+ outlineOffset: "2px",
112
+ outline: "2px solid var(--px-color-primary) !important"
107
113
  }
108
114
  }
109
115
  },
@@ -114,7 +120,8 @@ function createButtonStyles({ size, color, variant, fullWidth, textAlign, outlin
114
120
  padding: "0",
115
121
  borderRadius: "inherit",
116
122
  whiteSpace: "nowrap",
117
- columnGap: "var(--px-space-sm)"
123
+ columnGap: "var(--px-space-sm)",
124
+ backgroundColor: "inherit"
118
125
  }
119
126
  });
120
127
  }
@@ -203,4 +210,4 @@ const Button = ({ type = "button", variant = "filled", ...rest }) => {
203
210
 
204
211
  //#endregion
205
212
  export { Button as t };
206
- //# sourceMappingURL=Button-BP_w_ohI.js.map
213
+ //# sourceMappingURL=Button-0m63Nyv9.js.map
package/dist/Button-0m63Nyv9.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button-0m63Nyv9.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 backgroundColor: 'inherit'\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 overflow: 'hidden',\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\n '&:disabled': {\n opacity: '0.5 !important',\n cursor: 'not-allowed !important'\n },\n\n '&:focus': {\n outlineOffset: '2px',\n outline: '2px solid var(--px-color-primary) !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 backgroundColor: 'inherit'\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.variant, 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-CYEJViqh.js → IconButton-iiLQQcYQ.js} RENAMED
@@ -20,6 +20,10 @@ function createIconButtonStyles(props) {
20
20
  "&:disabled": {
21
21
  opacity: "0.5",
22
22
  cursor: "not-allowed"
23
+ },
24
+ "&:focus": {
25
+ outlineOffset: "2px",
26
+ outline: "2px solid var(--px-color-primary) !important"
23
27
  }
24
28
  }
25
29
  } });
@@ -91,4 +95,4 @@ const IconButton = (props) => {
91
95
 
92
96
  //#endregion
93
97
  export { IconButton as t };
94
- //# sourceMappingURL=IconButton-CYEJViqh.js.map
98
+ //# sourceMappingURL=IconButton-iiLQQcYQ.js.map
package/dist/IconButton-iiLQQcYQ.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconButton-iiLQQcYQ.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\n '&:disabled': {\n opacity: '0.5',\n cursor: 'not-allowed'\n },\n\n '&:focus': {\n outlineOffset: '2px',\n outline: '2px solid var(--px-color-primary) !important'\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;GAED,cAAc;IACZ,SAAS;IACT,QAAQ;IACT;GAED,WAAW;IACT,eAAe;IACf,SAAS;IACV;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;;;;;ACjFT,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/{Input-DwYedsYg.js → Input-DD-ZOugU.js} RENAMED
@@ -6,9 +6,20 @@ import { forwardRef, useId, useImperativeHandle, useMemo, useRef, useState } fro
6
6
  import { jsx, jsxs } from "react/jsx-runtime";
7
7
 
8
8
  //#region src/components/commons/inputs/Input/hooks/useInput/index.ts
9
- function useInput({ mask, onChange }) {
9
+ function useInput({ mask, onChange, ...rest }) {
10
10
  const inputRef = useRef(null);
11
11
  const [showPassword, setShowPassword] = useState(false);
12
+ const { minLength, maxLength } = useMemo(() => {
13
+ const appliedMask = mask ? MaskModule.getMask(Locale.BR, mask) : void 0;
14
+ return {
15
+ minLength: appliedMask ? appliedMask.minLength || rest.minLength : rest.minLength,
16
+ maxLength: appliedMask ? appliedMask.maxLength || rest.maxLength : rest.maxLength
17
+ };
18
+ }, [
19
+ mask,
20
+ rest.minLength,
21
+ rest.maxLength
22
+ ]);
12
23
  function togglePasswordVisibility() {
13
24
  setShowPassword((prev) => !prev);
14
25
  }
@@ -34,6 +45,8 @@ function useInput({ mask, onChange }) {
34
45
  }
35
46
  return {
36
47
  inputRef,
48
+ minLength,
49
+ maxLength,
37
50
  showPassword,
38
51
  handleChange,
39
52
  handleRefMethods,
@@ -102,7 +115,7 @@ const Input = forwardRef((props, ref) => {
102
115
  const inputId = useMemo(() => {
103
116
  return props.id || `input-${reactId}`;
104
117
  }, [props.id, reactId]);
105
- const { inputRef, showPassword, handleChange, handleRefMethods, togglePasswordVisibility } = useInput(props);
118
+ const { inputRef, minLength, maxLength, showPassword, handleChange, handleRefMethods, togglePasswordVisibility } = useInput(props);
106
119
  useImperativeHandle(ref, handleRefMethods);
107
120
  const { styles, classes } = useThemedStyles(props, createInputStyles, {
108
121
  pick: (p) => [p.disabled, p.errorMessage],
@@ -148,11 +161,11 @@ const Input = forwardRef((props, ref) => {
148
161
  type: getType(),
149
162
  value: props.value,
150
163
  style: styles.input,
164
+ minLength,
165
+ maxLength,
151
166
  required: props.required,
152
167
  disabled: props.disabled,
153
168
  className: classes.input,
154
- minLength: props.minLength,
155
- maxLength: props.maxLength,
156
169
  placeholder: props.placeholder,
157
170
  "aria-label": !props.hideLabel ? void 0 : props.label,
158
171
  onChange: handleChange
@@ -168,4 +181,4 @@ Input.displayName = "Input";
168
181
 
169
182
  //#endregion
170
183
  export { Input as t };
171
- //# sourceMappingURL=Input-DwYedsYg.js.map
184
+ //# sourceMappingURL=Input-DD-ZOugU.js.map
package/dist/Input-DD-ZOugU.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Input-DD-ZOugU.js","names":[],"sources":["../src/components/commons/inputs/Input/hooks/useInput/index.ts","../src/components/commons/inputs/Input/styles.ts","../src/components/commons/inputs/Input/index.tsx"],"sourcesContent":["// External Libraries\nimport { useState, useRef, useMemo } from 'react'\n\n// Services\nimport { Locale, MaskModule } from 'src/services/MaskModule'\n\n// Types\nimport type { InputProps } from '../../types'\n\nexport function useInput({ mask, onChange, ...rest }: InputProps) {\n // Refs\n const inputRef = useRef<HTMLInputElement>(null)\n\n // States\n const [showPassword, setShowPassword] = useState(false)\n\n // Constants\n const { minLength, maxLength } = useMemo(() => {\n const appliedMask = mask ? MaskModule.getMask(Locale.BR, mask) : undefined\n\n const minLength = appliedMask\n ? appliedMask.minLength || rest.minLength\n : rest.minLength\n\n const maxLength = appliedMask\n ? appliedMask.maxLength || rest.maxLength\n : rest.maxLength\n\n return { minLength, maxLength }\n }, [mask, rest.minLength, rest.maxLength])\n\n // Functions\n function togglePasswordVisibility() {\n setShowPassword(prev => !prev)\n }\n\n function handleRefMethods() {\n return { focus: handleFocus, blur: handleBlur }\n }\n\n function handleFocus() {\n inputRef.current?.focus()\n }\n\n function handleBlur() {\n inputRef.current?.blur()\n }\n\n function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n let value = e.target.value\n\n if (mask) {\n const module = MaskModule.getMask(Locale.BR, mask)\n if (module) value = module.format(value)\n }\n\n onChange?.(value)\n }\n\n return {\n inputRef,\n minLength,\n maxLength,\n showPassword,\n handleChange,\n handleRefMethods,\n togglePasswordVisibility\n }\n}\n","// Hooks\nimport { styled } from '@hooks/useThemedStyles/types'\n\n// Types\nimport type { InputProps } from './types'\n\nexport function createInputStyles(props: InputProps) {\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n\n rowGap: '0.375rem'\n },\n wrapper: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n\n borderWidth: 1,\n columnGap: '0.25rem',\n borderRadius: '0.5rem',\n padding: '0.625rem 0.875rem',\n\n opacity: props.disabled ? 0.5 : 1,\n boxShadow: 'var(--px-shadow-default)',\n borderColor: props.errorMessage\n ? 'var(--px-color-error)'\n : 'var(--px-border-primary)',\n\n __rules: {\n '&:focus-within': {\n outlineOffset: '-1px',\n outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n }\n }\n },\n\n input: {\n flex: 1,\n\n fontWeight: 500,\n fontSize: '1rem',\n lineHeight: '1.5rem',\n fontFamily: 'inherit',\n color: 'var(--px-text-primary)',\n\n __rules: {\n '&:disabled': {\n cursor: 'not-allowed'\n },\n\n '&:focus': {\n outline: 'none'\n },\n\n '&::placeholder': {\n fontWeight: 400,\n color: 'var(--px-text-secondary)'\n }\n }\n },\n\n button: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n cursor: 'pointer',\n padding: '0.25rem',\n borderRadius: '0.5rem',\n\n __rules: {\n '&:focus': {\n outline: '1px solid var(--px-border-primary)'\n }\n }\n }\n })\n}\n","// External Libraries\nimport { forwardRef, useId, useImperativeHandle, useMemo } from 'react'\n\n// Components\nimport { Label } from '../../toolkit/Label'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { ErrorMessage } from '../../toolkit/ErrorMessage'\n\n// Types\nimport type { InputProps, InputMethods } from './types'\n\n// Hooks\nimport { useInput } from './hooks/useInput'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createInputStyles } from './styles'\n\nexport const Input = forwardRef<InputMethods, InputProps>((props, ref) => {\n // Constants\n const reactId = useId()\n const inputId = useMemo(() => {\n return props.id || `input-${reactId}`\n }, [props.id, reactId])\n\n // Hooks\n const {\n inputRef,\n minLength,\n maxLength,\n showPassword,\n handleChange,\n handleRefMethods,\n togglePasswordVisibility\n } = useInput(props)\n useImperativeHandle(ref, handleRefMethods)\n\n // Hooks\n const { styles, classes } = useThemedStyles(props, createInputStyles, {\n pick: p => [p.disabled, p.errorMessage],\n override: props.styles,\n applyCommonProps: true,\n commonSlot: 'container'\n })\n\n // Functions\n function getType() {\n if (props.type === 'password' && showPassword) return 'text'\n return props.type\n }\n\n function renderEndContent() {\n if (props.type === 'password') {\n return (\n <button\n type=\"button\"\n style={styles.button}\n className={classes.button}\n onClick={togglePasswordVisibility}\n >\n <Icon\n size=\"sm\"\n name={showPassword ? 'general-eye-off' : 'general-eye'}\n />\n </button>\n )\n }\n\n return props.endIcon ?? null\n }\n\n return (\n <div style={styles.container}>\n {props.hideLabel ? null : (\n <Label\n htmlFor={inputId}\n label={props.label}\n required={props.required}\n requiredColor={props.requiredColor}\n {...props.labelConfig}\n />\n )}\n\n <div style={styles.wrapper} className={classes.wrapper}>\n {props.startIcon}\n\n <input\n ref={inputRef}\n id={inputId}\n type={getType()}\n value={props.value}\n style={styles.input}\n minLength={minLength}\n maxLength={maxLength}\n required={props.required}\n disabled={props.disabled}\n className={classes.input}\n placeholder={props.placeholder}\n aria-label={!props.hideLabel ? undefined : props.label}\n onChange={handleChange}\n />\n\n {renderEndContent()}\n </div>\n\n {props.errorMessage ? (\n <ErrorMessage message={props.errorMessage} />\n ) : null}\n </div>\n )\n})\n\nInput.displayName = 'Input'\n"],"mappings":";;;;;;;;AASA,SAAgB,SAAS,EAAE,MAAM,UAAU,GAAG,QAAoB;CAEhE,MAAM,WAAW,OAAyB,KAAK;CAG/C,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CAGvD,MAAM,EAAE,WAAW,cAAc,cAAc;EAC7C,MAAM,cAAc,OAAO,WAAW,QAAQ,OAAO,IAAI,KAAK,GAAG;AAUjE,SAAO;GAAE,WARS,cACd,YAAY,aAAa,KAAK,YAC9B,KAAK;GAMW,WAJF,cACd,YAAY,aAAa,KAAK,YAC9B,KAAK;GAEsB;IAC9B;EAAC;EAAM,KAAK;EAAW,KAAK;EAAU,CAAC;CAG1C,SAAS,2BAA2B;AAClC,mBAAgB,SAAQ,CAAC,KAAK;;CAGhC,SAAS,mBAAmB;AAC1B,SAAO;GAAE,OAAO;GAAa,MAAM;GAAY;;CAGjD,SAAS,cAAc;AACrB,WAAS,SAAS,OAAO;;CAG3B,SAAS,aAAa;AACpB,WAAS,SAAS,MAAM;;CAG1B,SAAS,aAAa,GAAwC;EAC5D,IAAI,QAAQ,EAAE,OAAO;AAErB,MAAI,MAAM;GACR,MAAM,SAAS,WAAW,QAAQ,OAAO,IAAI,KAAK;AAClD,OAAI,OAAQ,SAAQ,OAAO,OAAO,MAAM;;AAG1C,aAAW,MAAM;;AAGnB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;;;;AC7DH,SAAgB,kBAAkB,OAAmB;AACnD,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,QAAQ;GACT;EACD,SAAS;GACP,OAAO;GACP,SAAS;GACT,YAAY;GAEZ,aAAa;GACb,WAAW;GACX,cAAc;GACd,SAAS;GAET,SAAS,MAAM,WAAW,KAAM;GAChC,WAAW;GACX,aAAa,MAAM,eACf,0BACA;GAEJ,SAAS,EACP,kBAAkB;IAChB,eAAe;IACf,SAAS,iBAAiB,MAAM,eAAe,qBAAqB,qBAAqB;IAC1F,EACF;GACF;EAED,OAAO;GACL,MAAM;GAEN,YAAY;GACZ,UAAU;GACV,YAAY;GACZ,YAAY;GACZ,OAAO;GAEP,SAAS;IACP,cAAc,EACZ,QAAQ,eACT;IAED,WAAW,EACT,SAAS,QACV;IAED,kBAAkB;KAChB,YAAY;KACZ,OAAO;KACR;IACF;GACF;EAED,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;GAEhB,QAAQ;GACR,SAAS;GACT,cAAc;GAEd,SAAS,EACP,WAAW,EACT,SAAS,sCACV,EACF;GACF;EACF,CAAC;;;;;AC9DJ,MAAa,QAAQ,YAAsC,OAAO,QAAQ;CAExE,MAAM,UAAU,OAAO;CACvB,MAAM,UAAU,cAAc;AAC5B,SAAO,MAAM,MAAM,SAAS;IAC3B,CAAC,MAAM,IAAI,QAAQ,CAAC;CAGvB,MAAM,EACJ,UACA,WACA,WACA,cACA,cACA,kBACA,6BACE,SAAS,MAAM;AACnB,qBAAoB,KAAK,iBAAiB;CAG1C,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,mBAAmB;EACpE,OAAM,MAAK,CAAC,EAAE,UAAU,EAAE,aAAa;EACvC,UAAU,MAAM;EAChB,kBAAkB;EAClB,YAAY;EACb,CAAC;CAGF,SAAS,UAAU;AACjB,MAAI,MAAM,SAAS,cAAc,aAAc,QAAO;AACtD,SAAO,MAAM;;CAGf,SAAS,mBAAmB;AAC1B,MAAI,MAAM,SAAS,WACjB,QACE,oBAAC;GACC,MAAK;GACL,OAAO,OAAO;GACd,WAAW,QAAQ;GACnB,SAAS;aAET,oBAAC;IACC,MAAK;IACL,MAAM,eAAe,oBAAoB;KACzC;IACK;AAIb,SAAO,MAAM,WAAW;;AAG1B,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,MAAM,YAAY,OACjB,oBAAC;IACC,SAAS;IACT,OAAO,MAAM;IACb,UAAU,MAAM;IAChB,eAAe,MAAM;IACrB,GAAI,MAAM;KACV;GAGJ,qBAAC;IAAI,OAAO,OAAO;IAAS,WAAW,QAAQ;;KAC5C,MAAM;KAEP,oBAAC;MACC,KAAK;MACL,IAAI;MACJ,MAAM,SAAS;MACf,OAAO,MAAM;MACb,OAAO,OAAO;MACH;MACA;MACX,UAAU,MAAM;MAChB,UAAU,MAAM;MAChB,WAAW,QAAQ;MACnB,aAAa,MAAM;MACnB,cAAY,CAAC,MAAM,YAAY,SAAY,MAAM;MACjD,UAAU;OACV;KAED,kBAAkB;;KACf;GAEL,MAAM,eACL,oBAAC,gBAAa,SAAS,MAAM,eAAgB,GAC3C;;GACA;EAER;AAEF,MAAM,cAAc"}
package/dist/button.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import "./types-X5cadzGX.js";
2
- import { t as Button } from "./index-DOH2_ypC.js";
2
+ import { t as Button } from "./index-C4JS9PSn.js";
3
3
  export { Button };
package/dist/button.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import "./useThemedStyles-BBJ_TF_l.js";
2
2
  import "./Typography-3tAIdGuj.js";
3
- import { t as Button } from "./Button-BP_w_ohI.js";
3
+ import { t as Button } from "./Button-0m63Nyv9.js";
4
4
 
5
5
  export { Button };
package/dist/icon-button.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { t as IconButton } from "./index-DI7_pAa-.js";
1
+ import { t as IconButton } from "./index-CfJRp6Z5.js";
2
2
  export { IconButton };
package/dist/icon-button.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import "./useThemedStyles-BBJ_TF_l.js";
2
- import { t as IconButton } from "./IconButton-CYEJViqh.js";
2
+ import { t as IconButton } from "./IconButton-iiLQQcYQ.js";
3
3
 
4
4
  export { IconButton };
package/dist/{index-DOH2_ypC.d.ts → index-C4JS9PSn.d.ts} RENAMED
@@ -22,6 +22,7 @@ declare function createButtonStyles({
22
22
  gap: string;
23
23
  borderRadius: string;
24
24
  cursor: "pointer";
25
+ overflow: "hidden";
25
26
  transition: "background-color 0.5s";
26
27
  border: string;
27
28
  backgroundColor: string;
@@ -34,6 +35,10 @@ declare function createButtonStyles({
34
35
  opacity: "0.5 !important";
35
36
  cursor: "not-allowed !important";
36
37
  };
38
+ '&:focus': {
39
+ outlineOffset: string;
40
+ outline: string;
41
+ };
37
42
  };
38
43
  };
39
44
  content: {
@@ -44,6 +49,7 @@ declare function createButtonStyles({
44
49
  borderRadius: string;
45
50
  whiteSpace: "nowrap";
46
51
  columnGap: string;
52
+ backgroundColor: "inherit";
47
53
  };
48
54
  };
49
55
  //#endregion
@@ -115,4 +121,4 @@ interface ButtonProps extends PaddingProps, LayoutProps {
115
121
  declare const Button: React.FC<ButtonProps>;
116
122
  //#endregion
117
123
  export { Button as t };
118
- //# sourceMappingURL=index-DOH2_ypC.d.ts.map
124
+ //# sourceMappingURL=index-C4JS9PSn.d.ts.map
package/dist/{index-DI7_pAa-.d.ts → index-CfJRp6Z5.d.ts} RENAMED
@@ -20,6 +20,10 @@ declare function createIconButtonStyles(props: IconButtonProps): {
20
20
  opacity: "0.5";
21
21
  cursor: "not-allowed";
22
22
  };
23
+ '&:focus': {
24
+ outlineOffset: string;
25
+ outline: string;
26
+ };
23
27
  };
24
28
  minHeight: string;
25
29
  minWidth: string;
@@ -45,4 +49,4 @@ type IconButtonVariant = 'filled' | 'outlined' | 'ghost';
45
49
  declare const IconButton: React.FC<IconButtonProps>;
46
50
  //#endregion
47
51
  export { IconButton as t };
48
- //# sourceMappingURL=index-DI7_pAa-.d.ts.map
52
+ //# sourceMappingURL=index-CfJRp6Z5.d.ts.map
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import "./types-X5cadzGX.js";
2
- import { t as Button } from "./index-DOH2_ypC.js";
3
- import { t as IconButton } from "./index-DI7_pAa-.js";
2
+ import { t as Button } from "./index-C4JS9PSn.js";
3
+ import { t as IconButton } from "./index-CfJRp6Z5.js";
4
4
  import { n as Locale, r as MaskType, t as MaskModule } from "./index-Cs-WJgro.js";
5
5
  import { t as Input } from "./index-VOysND-P.js";
6
6
  import { n as types_d_exports$3, t as Select } from "./index-d_2Cjz1T.js";
package/dist/index.js CHANGED
@@ -15,10 +15,10 @@ import { n as types_exports$1, t as ContextMenu } from "./ContextMenu-DUHmXf8f.j
15
15
  import { n as types_exports, t as Chip } from "./Chip-CxSFYy0c.js";
16
16
  import "./ErrorMessage-C2FJLFsj.js";
17
17
  import { t as ChipList } from "./ChipList-oMddO6fO.js";
18
- import { t as Button } from "./Button-BP_w_ohI.js";
19
- import { t as IconButton } from "./IconButton-CYEJViqh.js";
18
+ import { t as Button } from "./Button-0m63Nyv9.js";
19
+ import { t as IconButton } from "./IconButton-iiLQQcYQ.js";
20
20
  import { n as MaskType, r as MaskModule, t as Locale } from "./MaskModule-Msq9W67y.js";
21
- import { t as Input } from "./Input-DwYedsYg.js";
21
+ import { t as Input } from "./Input-DD-ZOugU.js";
22
22
  import { n as types_exports$3, t as Select } from "./Select-Bvq9Xdgv.js";
23
23
  import { t as TextArea } from "./TextArea-uYORwpOq.js";
24
24
  import { t as Skeleton } from "./Skeleton-D0DopfRg.js";
package/dist/input.js CHANGED
@@ -3,6 +3,6 @@ import "./Icon-RM-EqP7I.js";
3
3
  import "./Typography-3tAIdGuj.js";
4
4
  import "./ErrorMessage-C2FJLFsj.js";
5
5
  import "./MaskModule-Msq9W67y.js";
6
- import { t as Input } from "./Input-DwYedsYg.js";
6
+ import { t as Input } from "./Input-DD-ZOugU.js";
7
7
 
8
8
  export { Input };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "softable-pixels-web",
3
- "version": "1.1.27",
3
+ "version": "1.1.29",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "softable",
package/dist/Button-BP_w_ohI.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button-BP_w_ohI.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.variant, 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-CYEJViqh.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"IconButton-CYEJViqh.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/Input-DwYedsYg.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Input-DwYedsYg.js","names":[],"sources":["../src/components/commons/inputs/Input/hooks/useInput/index.ts","../src/components/commons/inputs/Input/styles.ts","../src/components/commons/inputs/Input/index.tsx"],"sourcesContent":["// External Libraries\nimport { useState, useRef } from 'react'\n\n// Services\nimport { Locale, MaskModule } from 'src/services/MaskModule'\n\n// Types\nimport type { InputProps } from '../../types'\n\nexport function useInput({ mask, onChange }: InputProps) {\n // Refs\n const inputRef = useRef<HTMLInputElement>(null)\n\n // States\n const [showPassword, setShowPassword] = useState(false)\n\n // Functions\n function togglePasswordVisibility() {\n setShowPassword(prev => !prev)\n }\n\n function handleRefMethods() {\n return { focus: handleFocus, blur: handleBlur }\n }\n\n function handleFocus() {\n inputRef.current?.focus()\n }\n\n function handleBlur() {\n inputRef.current?.blur()\n }\n\n function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n let value = e.target.value\n\n if (mask) {\n const module = MaskModule.getMask(Locale.BR, mask)\n if (module) value = module.format(value)\n }\n\n onChange?.(value)\n }\n\n return {\n inputRef,\n showPassword,\n handleChange,\n handleRefMethods,\n togglePasswordVisibility\n }\n}\n","// Hooks\nimport { styled } from '@hooks/useThemedStyles/types'\n\n// Types\nimport type { InputProps } from './types'\n\nexport function createInputStyles(props: InputProps) {\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n\n rowGap: '0.375rem'\n },\n wrapper: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n\n borderWidth: 1,\n columnGap: '0.25rem',\n borderRadius: '0.5rem',\n padding: '0.625rem 0.875rem',\n\n opacity: props.disabled ? 0.5 : 1,\n boxShadow: 'var(--px-shadow-default)',\n borderColor: props.errorMessage\n ? 'var(--px-color-error)'\n : 'var(--px-border-primary)',\n\n __rules: {\n '&:focus-within': {\n outlineOffset: '-1px',\n outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n }\n }\n },\n\n input: {\n flex: 1,\n\n fontWeight: 500,\n fontSize: '1rem',\n lineHeight: '1.5rem',\n fontFamily: 'inherit',\n color: 'var(--px-text-primary)',\n\n __rules: {\n '&:disabled': {\n cursor: 'not-allowed'\n },\n\n '&:focus': {\n outline: 'none'\n },\n\n '&::placeholder': {\n fontWeight: 400,\n color: 'var(--px-text-secondary)'\n }\n }\n },\n\n button: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n cursor: 'pointer',\n padding: '0.25rem',\n borderRadius: '0.5rem',\n\n __rules: {\n '&:focus': {\n outline: '1px solid var(--px-border-primary)'\n }\n }\n }\n })\n}\n","// External Libraries\nimport { forwardRef, useId, useImperativeHandle, useMemo } from 'react'\n\n// Components\nimport { Label } from '../../toolkit/Label'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { ErrorMessage } from '../../toolkit/ErrorMessage'\n\n// Types\nimport type { InputProps, InputMethods } from './types'\n\n// Hooks\nimport { useInput } from './hooks/useInput'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createInputStyles } from './styles'\n\nexport const Input = forwardRef<InputMethods, InputProps>((props, ref) => {\n // Constants\n const reactId = useId()\n const inputId = useMemo(() => {\n return props.id || `input-${reactId}`\n }, [props.id, reactId])\n\n // Hooks\n const {\n inputRef,\n showPassword,\n handleChange,\n handleRefMethods,\n togglePasswordVisibility\n } = useInput(props)\n useImperativeHandle(ref, handleRefMethods)\n\n // Hooks\n const { styles, classes } = useThemedStyles(props, createInputStyles, {\n pick: p => [p.disabled, p.errorMessage],\n override: props.styles,\n applyCommonProps: true,\n commonSlot: 'container'\n })\n\n // Functions\n function getType() {\n if (props.type === 'password' && showPassword) return 'text'\n return props.type\n }\n\n function renderEndContent() {\n if (props.type === 'password') {\n return (\n <button\n type=\"button\"\n style={styles.button}\n className={classes.button}\n onClick={togglePasswordVisibility}\n >\n <Icon\n size=\"sm\"\n name={showPassword ? 'general-eye-off' : 'general-eye'}\n />\n </button>\n )\n }\n\n return props.endIcon ?? null\n }\n\n return (\n <div style={styles.container}>\n {props.hideLabel ? null : (\n <Label\n htmlFor={inputId}\n label={props.label}\n required={props.required}\n requiredColor={props.requiredColor}\n {...props.labelConfig}\n />\n )}\n\n <div style={styles.wrapper} className={classes.wrapper}>\n {props.startIcon}\n\n <input\n ref={inputRef}\n id={inputId}\n type={getType()}\n value={props.value}\n style={styles.input}\n required={props.required}\n disabled={props.disabled}\n className={classes.input}\n minLength={props.minLength}\n maxLength={props.maxLength}\n placeholder={props.placeholder}\n aria-label={!props.hideLabel ? undefined : props.label}\n onChange={handleChange}\n />\n\n {renderEndContent()}\n </div>\n\n {props.errorMessage ? (\n <ErrorMessage message={props.errorMessage} />\n ) : null}\n </div>\n )\n})\n\nInput.displayName = 'Input'\n"],"mappings":"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"}