softable-pixels-web 1.2.6 → 1.2.8

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/{Input-CvxWu77f.js → Input-Bi_mgUry.js} +15 -9
  2. package/dist/Input-Bi_mgUry.js.map +1 -0
  3. package/dist/{TextArea-Cne9IZEW.js → TextArea-BvSrZjQe.js} +11 -5
  4. package/dist/TextArea-BvSrZjQe.js.map +1 -0
  5. package/dist/context-menu.d.ts +1 -1
  6. package/dist/{index-BWN2i3t9.d.ts → index-41HYkx0w.d.ts} +2 -2
  7. package/dist/{index-butzJA6r.d.ts → index-BmFkBYVJ.d.ts} +5 -4
  8. package/dist/{index-CGPCzJ5m.d.ts → index-CuP_knGM.d.ts} +3 -3
  9. package/dist/{index-BFutGH3a.d.ts → index-XPk_mchF.d.ts} +2 -2
  10. package/dist/index.d.ts +4 -4
  11. package/dist/index.js +2 -2
  12. package/dist/input.d.ts +1 -1
  13. package/dist/input.js +1 -1
  14. package/dist/select.d.ts +1 -1
  15. package/dist/text-area.d.ts +1 -1
  16. package/dist/text-area.js +1 -1
  17. package/package.json +1 -1
  18. package/dist/Input-CvxWu77f.js.map +0 -1
  19. package/dist/TextArea-Cne9IZEW.js.map +0 -1
package/dist/{Input-CvxWu77f.js → Input-Bi_mgUry.js} RENAMED
@@ -3,13 +3,14 @@ import { t as Icon } from "./Icon-C_yI8e6Z.js";
3
3
  import { t as Label } from "./Label-CPua_PPu.js";
4
4
  import { t as ErrorMessage } from "./ErrorMessage-DOkrG22I.js";
5
5
  import { r as MaskModule, t as Locale } from "./MaskModule-CUFXLKZU.js";
6
- import { forwardRef, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
6
+ import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
7
7
  import { jsx, jsxs } from "react/jsx-runtime";
8
8
 
9
9
  //#region src/components/commons/inputs/Input/hooks/useInput/index.ts
10
- function useInput({ mask, delay, onChange, ...rest }) {
10
+ function useInput({ mask, delay, value, onChange, ...rest }) {
11
11
  const inputRef = useRef(null);
12
12
  const timeoutRef = useRef(null);
13
+ const [inputValue, setInputValue] = useState(value);
13
14
  const [showPassword, setShowPassword] = useState(false);
14
15
  const { minLength, maxLength } = useMemo(() => {
15
16
  const appliedMask = mask ? MaskModule.getMask(Locale.BR, mask) : void 0;
@@ -22,6 +23,9 @@ function useInput({ mask, delay, onChange, ...rest }) {
22
23
  rest.minLength,
23
24
  rest.maxLength
24
25
  ]);
26
+ useEffect(() => {
27
+ setInputValue(value);
28
+ }, [value]);
25
29
  function togglePasswordVisibility() {
26
30
  setShowPassword((prev) => !prev);
27
31
  }
@@ -38,19 +42,21 @@ function useInput({ mask, delay, onChange, ...rest }) {
38
42
  inputRef.current?.blur();
39
43
  }
40
44
  function handleChange(e) {
41
- let value = e.target.value;
45
+ let value$1 = e.target.value;
42
46
  if (timeoutRef.current) clearTimeout(timeoutRef.current);
43
47
  if (mask) {
44
48
  const module = MaskModule.getMask(Locale.BR, mask);
45
- if (module) value = module.format(value);
49
+ if (module) value$1 = module.format(value$1);
46
50
  }
47
- if (!delay) onChange?.(value);
48
- else timeoutRef.current = setTimeout(() => onChange?.(value), delay);
51
+ setInputValue(value$1);
52
+ if (!delay) onChange?.(value$1);
53
+ else timeoutRef.current = setTimeout(() => onChange?.(value$1), delay);
49
54
  }
50
55
  return {
51
56
  inputRef,
52
57
  minLength,
53
58
  maxLength,
59
+ inputValue,
54
60
  showPassword,
55
61
  handleChange,
56
62
  handleRefMethods,
@@ -120,7 +126,7 @@ const Input = forwardRef((props, ref) => {
120
126
  const inputId = useMemo(() => {
121
127
  return props.id || `input-${reactId}`;
122
128
  }, [props.id, reactId]);
123
- const { inputRef, minLength, maxLength, showPassword, handleChange, handleRefMethods, togglePasswordVisibility } = useInput(props);
129
+ const { inputRef, minLength, maxLength, inputValue, showPassword, handleChange, handleRefMethods, togglePasswordVisibility } = useInput(props);
124
130
  useImperativeHandle(ref, handleRefMethods);
125
131
  const { styles, classes } = useThemedStyles(props, createInputStyles, {
126
132
  pick: (p) => [p.disabled, p.errorMessage],
@@ -164,7 +170,7 @@ const Input = forwardRef((props, ref) => {
164
170
  ref: inputRef,
165
171
  id: inputId,
166
172
  type: getType(),
167
- value: props.value,
173
+ value: inputValue,
168
174
  style: styles.input,
169
175
  minLength,
170
176
  maxLength,
@@ -191,4 +197,4 @@ Input.displayName = "Input";
191
197
 
192
198
  //#endregion
193
199
  export { Input as t };
194
- //# sourceMappingURL=Input-CvxWu77f.js.map
200
+ //# sourceMappingURL=Input-Bi_mgUry.js.map
package/dist/Input-Bi_mgUry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Input-Bi_mgUry.js","names":["value"],"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, useEffect } from 'react'\n\n// Services\nimport { Locale, MaskModule } from 'src/services/MaskModule'\n\n// Types\nimport type { InputProps } from '../../types'\n\nexport function useInput({\n mask,\n delay,\n value,\n onChange,\n ...rest\n}: InputProps) {\n // Refs\n const inputRef = useRef<HTMLInputElement>(null)\n const timeoutRef = useRef<NodeJS.Timeout>(null)\n\n // States\n const [inputValue, setInputValue] = useState(value)\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 // UseEffects\n useEffect(() => {\n setInputValue(value)\n }, [value])\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 (timeoutRef.current) clearTimeout(timeoutRef.current)\n\n if (mask) {\n const module = MaskModule.getMask(Locale.BR, mask)\n if (module) value = module.format(value)\n }\n\n setInputValue(value)\n\n if (!delay) onChange?.(value)\n else {\n timeoutRef.current = setTimeout(() => onChange?.(value), delay)\n }\n }\n\n return {\n inputRef,\n minLength,\n maxLength,\n inputValue,\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","/** biome-ignore-all lint/a11y/noAutofocus: It's a custom input component */\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 inputValue,\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={inputValue}\n style={styles.input}\n minLength={minLength}\n maxLength={maxLength}\n required={props.required}\n disabled={props.disabled}\n className={classes.input}\n autoFocus={props.autoFocus}\n spellCheck={props.spellCheck}\n autoCorrect={props.autoCorrect}\n placeholder={props.placeholder}\n autoComplete={props.autoComplete}\n autoCapitalize={props.autoCapitalize}\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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"}
package/dist/{TextArea-Cne9IZEW.js → TextArea-BvSrZjQe.js} RENAMED
@@ -2,7 +2,7 @@ import { n as styled, t as useThemedStyles } from "./useThemedStyles-BJWB5BTH.js
2
2
  import { t as Typography } from "./Typography-CKSjnDPX.js";
3
3
  import { t as Label } from "./Label-CPua_PPu.js";
4
4
  import { t as ErrorMessage } from "./ErrorMessage-DOkrG22I.js";
5
- import { useId } from "react";
5
+ import { useId, useRef, useState } from "react";
6
6
  import { jsx, jsxs } from "react/jsx-runtime";
7
7
 
8
8
  //#region src/components/commons/inputs/TextArea/styles.ts
@@ -52,7 +52,9 @@ function createTextAreaStyles(props) {
52
52
  //#endregion
53
53
  //#region src/components/commons/inputs/TextArea/index.tsx
54
54
  const TextArea = (props) => {
55
- const { value, disabled, readOnly, maxLength, hideMaxLength, textMaxLength, placeholder, errorMessage, label, required, requiredColor, labelConfig } = props;
55
+ const { value, delay, disabled, readOnly, maxLength, hideMaxLength, textMaxLength, placeholder, errorMessage, label, required, requiredColor, labelConfig, onChange } = props;
56
+ const timeoutRef = useRef(null);
57
+ const [inputValue, setInputValue] = useState(value);
56
58
  const inputId = useId();
57
59
  const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {
58
60
  pick: (p) => [
@@ -66,7 +68,11 @@ const TextArea = (props) => {
66
68
  });
67
69
  function handleChange(e) {
68
70
  if (disabled || readOnly) return;
69
- props.onChange?.(e.target.value);
71
+ const value$1 = e.target.value;
72
+ setInputValue(value$1);
73
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
74
+ if (!delay) onChange?.(value$1);
75
+ else timeoutRef.current = setTimeout(() => onChange?.(value$1), delay);
70
76
  }
71
77
  function renderLabel() {
72
78
  if (!label) return null;
@@ -83,7 +89,7 @@ const TextArea = (props) => {
83
89
  children: [
84
90
  renderLabel(),
85
91
  /* @__PURE__ */ jsx("textarea", {
86
- value,
92
+ value: inputValue,
87
93
  disabled,
88
94
  readOnly,
89
95
  maxLength,
@@ -110,4 +116,4 @@ const TextArea = (props) => {
110
116
 
111
117
  //#endregion
112
118
  export { TextArea as t };
113
- //# sourceMappingURL=TextArea-Cne9IZEW.js.map
119
+ //# sourceMappingURL=TextArea-BvSrZjQe.js.map
package/dist/TextArea-BvSrZjQe.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TextArea-BvSrZjQe.js","names":["value"],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps) {\n const { height = '8rem', readOnly } = props\n\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n\n rowGap: '0.375rem'\n },\n iconContainer: {\n position: 'absolute',\n left: '0.75rem',\n top: '1.375rem',\n transform: 'translateY(-50%)'\n },\n textArea: {\n height,\n width: '100%',\n paddingBlock: '0.75rem',\n paddingInline: '0.875rem',\n borderWidth: 1,\n borderRadius: '0.5rem',\n resize: 'none',\n\n fontWeight: '400',\n fontSize: '1rem',\n color: 'var(--px-text-primary)',\n\n borderColor: props.errorMessage\n ? 'var(--px-color-error)'\n : 'var(--px-border-primary)',\n outlineOffset: '-1px',\n\n cursor: readOnly ? 'default' : undefined,\n\n __rules: {\n '&::placeholder': {\n fontWeight: 400,\n color: 'var(--px-text-secondary)'\n },\n\n '&:focus-within': {\n outlineOffset: '-1px',\n outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n }\n }\n }\n })\n}\n","// External Libraries\nimport { useId, useRef, useState } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/toolkit/Label'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { ErrorMessage } from '@components/commons/toolkit/ErrorMessage'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTextAreaStyles } from './styles'\n\nexport const TextArea = (props: TextAreaProps) => {\n const {\n value,\n delay,\n disabled,\n readOnly,\n maxLength,\n hideMaxLength,\n textMaxLength,\n placeholder,\n errorMessage,\n\n label,\n required,\n requiredColor,\n labelConfig,\n onChange\n } = props\n\n // Refs\n const timeoutRef = useRef<NodeJS.Timeout>(null)\n\n // States\n const [inputValue, setInputValue] = useState(value)\n\n // Hooks\n const inputId = useId()\n\n const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n pick: p => [p.height, p.readOnly, p.placeholderColor, p.focusedRingColor],\n override: props.styles,\n applyCommonProps: true\n })\n\n // Functions\n function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n if (disabled || readOnly) return\n\n const value = e.target.value\n\n setInputValue(value)\n\n if (timeoutRef.current) clearTimeout(timeoutRef.current)\n\n if (!delay) onChange?.(value)\n else {\n timeoutRef.current = setTimeout(() => onChange?.(value), delay)\n }\n }\n\n function renderLabel() {\n if (!label) return null\n\n return (\n <div>\n <Label\n label={label}\n htmlFor={inputId}\n required={required}\n requiredColor={requiredColor}\n {...labelConfig}\n />\n </div>\n )\n }\n\n return (\n <div style={styles.container}>\n {renderLabel()}\n\n <textarea\n value={inputValue}\n disabled={disabled}\n readOnly={readOnly}\n maxLength={maxLength}\n placeholder={placeholder}\n style={styles.textArea}\n className={classes.textArea}\n onChange={handleChange}\n />\n\n {maxLength && !hideMaxLength ? (\n <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n {value?.length}/{maxLength} {textMaxLength}\n </Typography>\n ) : null}\n\n {errorMessage ? <ErrorMessage message={errorMessage} /> : null}\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,qBAAqB,OAAsB;CACzD,MAAM,EAAE,SAAS,QAAQ,aAAa;AAEtC,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,QAAQ;GACT;EACD,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GACP,cAAc;GACd,eAAe;GACf,aAAa;GACb,cAAc;GACd,QAAQ;GAER,YAAY;GACZ,UAAU;GACV,OAAO;GAEP,aAAa,MAAM,eACf,0BACA;GACJ,eAAe;GAEf,QAAQ,WAAW,YAAY;GAE/B,SAAS;IACP,kBAAkB;KAChB,YAAY;KACZ,OAAO;KACR;IAED,kBAAkB;KAChB,eAAe;KACf,SAAS,iBAAiB,MAAM,eAAe,qBAAqB,qBAAqB;KAC1F;IACF;GACF;EACF,CAAC;;;;;ACrCJ,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,OACA,UACA,UACA,WACA,eACA,eACA,aACA,cAEA,OACA,UACA,eACA,aACA,aACE;CAGJ,MAAM,aAAa,OAAuB,KAAK;CAG/C,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAGnD,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GAAC,EAAE;GAAQ,EAAE;GAAU,EAAE;GAAkB,EAAE;GAAiB;EACzE,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;EAE1B,MAAMA,UAAQ,EAAE,OAAO;AAEvB,gBAAcA,QAAM;AAEpB,MAAI,WAAW,QAAS,cAAa,WAAW,QAAQ;AAExD,MAAI,CAAC,MAAO,YAAWA,QAAM;MAE3B,YAAW,UAAU,iBAAiB,WAAWA,QAAM,EAAE,MAAM;;CAInE,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC,mBACC,oBAAC;GACQ;GACP,SAAS;GACC;GACK;GACf,GAAI;IACJ,GACE;;AAIV,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,aAAa;GAEd,oBAAC;IACC,OAAO;IACG;IACA;IACC;IACE;IACb,OAAO,OAAO;IACd,WAAW,QAAQ;IACnB,UAAU;KACV;GAED,aAAa,CAAC,gBACb,qBAAC;IAAW,SAAQ;IAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;KAC9D,OAAO;KAAO;KAAE;KAAU;KAAE;;KAClB,GACX;GAEH,eAAe,oBAAC,gBAAa,SAAS,eAAgB,GAAG;;GACtD"}
package/dist/context-menu.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { n as types_d_exports, t as ContextMenu } from "./index-CGPCzJ5m.js";
1
+ import { n as types_d_exports, t as ContextMenu } from "./index-CuP_knGM.js";
2
2
  export { ContextMenu, types_d_exports as ContextMenuTypes };
package/dist/{index-BWN2i3t9.d.ts → index-41HYkx0w.d.ts} RENAMED
@@ -25,7 +25,7 @@ declare function createSelectStyles(props: SelectProps): {
25
25
  opacity: number;
26
26
  cursor: "not-allowed" | "pointer" | "progress";
27
27
  boxShadow: "var(--px-shadow-default)";
28
- borderColor: "var(--px-color-error)" | "var(--px-border-primary)";
28
+ borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
29
29
  __rules: {
30
30
  '&:focus-within': {
31
31
  outlineOffset: string;
@@ -84,4 +84,4 @@ interface SelectOption {
84
84
  declare const Select: React$1.FC<SelectProps>;
85
85
  //#endregion
86
86
  export { types_d_exports as n, Select as t };
87
- //# sourceMappingURL=index-BWN2i3t9.d.ts.map
87
+ //# sourceMappingURL=index-41HYkx0w.d.ts.map
package/dist/{index-butzJA6r.d.ts → index-BmFkBYVJ.d.ts} RENAMED
@@ -1,5 +1,5 @@
1
1
  import { a as TextProps } from "./styleProps-BTRkIoXb.js";
2
- import * as react_jsx_runtime1 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime0 from "react/jsx-runtime";
3
3
 
4
4
  //#region src/components/commons/inputs/TextArea/styles.d.ts
5
5
  declare function createTextAreaStyles(props: TextAreaProps): {
@@ -26,7 +26,7 @@ declare function createTextAreaStyles(props: TextAreaProps): {
26
26
  fontWeight: "400";
27
27
  fontSize: string;
28
28
  color: "var(--px-text-primary)";
29
- borderColor: "var(--px-color-error)" | "var(--px-border-primary)";
29
+ borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
30
30
  outlineOffset: string;
31
31
  cursor: "default" | undefined;
32
32
  __rules: {
@@ -46,6 +46,7 @@ declare function createTextAreaStyles(props: TextAreaProps): {
46
46
  interface TextAreaProps {
47
47
  value?: string;
48
48
  label?: string;
49
+ delay?: number;
49
50
  placeholder?: string;
50
51
  styles?: Partial<ReturnType<typeof createTextAreaStyles>>;
51
52
  required?: boolean;
@@ -65,7 +66,7 @@ interface TextAreaProps {
65
66
  }
66
67
  //#endregion
67
68
  //#region src/components/commons/inputs/TextArea/index.d.ts
68
- declare const TextArea: (props: TextAreaProps) => react_jsx_runtime1.JSX.Element;
69
+ declare const TextArea: (props: TextAreaProps) => react_jsx_runtime0.JSX.Element;
69
70
  //#endregion
70
71
  export { TextArea as t };
71
- //# sourceMappingURL=index-butzJA6r.d.ts.map
72
+ //# sourceMappingURL=index-BmFkBYVJ.d.ts.map
package/dist/{index-CGPCzJ5m.d.ts → index-CuP_knGM.d.ts} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { n as Placement } from "./types-CLnohr-1.js";
2
2
  import { ReactNode } from "react";
3
- import * as react_jsx_runtime0 from "react/jsx-runtime";
3
+ import * as react_jsx_runtime1 from "react/jsx-runtime";
4
4
 
5
5
  //#region src/components/commons/toolkit/ContextMenu/styles.d.ts
6
6
  declare function createContextMenuStyles<T>(_props: ContextMenuProps<T>): {
@@ -67,7 +67,7 @@ interface ContextMenuProps<T> {
67
67
  }
68
68
  //#endregion
69
69
  //#region src/components/commons/toolkit/ContextMenu/index.d.ts
70
- declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) => react_jsx_runtime0.JSX.Element;
70
+ declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) => react_jsx_runtime1.JSX.Element;
71
71
  //#endregion
72
72
  export { types_d_exports as n, ContextMenu as t };
73
- //# sourceMappingURL=index-CGPCzJ5m.d.ts.map
73
+ //# sourceMappingURL=index-CuP_knGM.d.ts.map
package/dist/{index-BFutGH3a.d.ts → index-XPk_mchF.d.ts} RENAMED
@@ -22,7 +22,7 @@ declare function createInputStyles(props: InputProps): {
22
22
  padding: string;
23
23
  opacity: number;
24
24
  boxShadow: "var(--px-shadow-default)";
25
- borderColor: "var(--px-color-error)" | "var(--px-border-primary)";
25
+ borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
26
26
  __rules: {
27
27
  '&:focus-within': {
28
28
  outlineOffset: string;
@@ -101,4 +101,4 @@ interface InputMethods {
101
101
  declare const Input: react0.ForwardRefExoticComponent<InputProps & react0.RefAttributes<InputMethods>>;
102
102
  //#endregion
103
103
  export { Input as t };
104
- //# sourceMappingURL=index-BFutGH3a.d.ts.map
104
+ //# sourceMappingURL=index-XPk_mchF.d.ts.map
package/dist/index.d.ts CHANGED
@@ -3,11 +3,11 @@ import { t as Button } from "./index-D5Zfkj5F.js";
3
3
  import { t as IconButton } from "./index-CEGANhbI.js";
4
4
  import { n as types_d_exports$1, t as ColorPicker } from "./index-y7Z04PKd.js";
5
5
  import { n as Locale, r as MaskType, t as MaskModule } from "./index-CAMj03qs.js";
6
- import { t as Input } from "./index-BFutGH3a.js";
6
+ import { t as Input } from "./index-XPk_mchF.js";
7
7
  import { t as SearchInput } from "./index-CBfW89pi.js";
8
- import { n as types_d_exports$4, t as Select } from "./index-BWN2i3t9.js";
8
+ import { n as types_d_exports$4, t as Select } from "./index-41HYkx0w.js";
9
9
  import { n as types_d_exports$3 } from "./types-C0u1I3AZ.js";
10
- import { t as TextArea } from "./index-butzJA6r.js";
10
+ import { t as TextArea } from "./index-BmFkBYVJ.js";
11
11
  import { t as Popover } from "./index-D5OTHkPO.js";
12
12
  import { t as BasePopover } from "./index-DEAzVsKY.js";
13
13
  import { t as Breadcrumb } from "./index-CqmzOJc_.js";
@@ -17,7 +17,7 @@ import { t as Checkbox } from "./index-BXZ-OM5P.js";
17
17
  import { r as types_d_exports } from "./types-CTYkmfAB.js";
18
18
  import { Chip } from "./chip.js";
19
19
  import { t as ChipList } from "./index-hJBCuHQu.js";
20
- import { n as types_d_exports$2, t as ContextMenu } from "./index-CGPCzJ5m.js";
20
+ import { n as types_d_exports$2, t as ContextMenu } from "./index-CuP_knGM.js";
21
21
  import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
22
22
  import { t as Switch } from "./index-5eyvKw2O.js";
23
23
  import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-YN8kSeey.js";
package/dist/index.js CHANGED
@@ -20,9 +20,9 @@ import "./Loader-DqDWamjq.js";
20
20
  import { t as Button } from "./Button-DSMdOqri.js";
21
21
  import { t as IconButton } from "./IconButton-DQaptukh.js";
22
22
  import { n as MaskType, r as MaskModule, t as Locale } from "./MaskModule-CUFXLKZU.js";
23
- import { t as Input } from "./Input-CvxWu77f.js";
23
+ import { t as Input } from "./Input-Bi_mgUry.js";
24
24
  import { n as types_exports$4, t as Select } from "./Select-BO2A8Wdu.js";
25
- import { t as TextArea } from "./TextArea-Cne9IZEW.js";
25
+ import { t as TextArea } from "./TextArea-BvSrZjQe.js";
26
26
  import { t as SearchInput } from "./SearchInput-Ol5FJDHS.js";
27
27
  import { n as types_exports$1, t as ColorPicker } from "./ColorPicker-CdECHCbh.js";
28
28
  import { t as Skeleton } from "./Skeleton-CixPhMzv.js";
package/dist/input.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { t as Input } from "./index-BFutGH3a.js";
1
+ import { t as Input } from "./index-XPk_mchF.js";
2
2
  export { Input };
package/dist/input.js CHANGED
@@ -4,6 +4,6 @@ import "./Typography-CKSjnDPX.js";
4
4
  import "./Label-CPua_PPu.js";
5
5
  import "./ErrorMessage-DOkrG22I.js";
6
6
  import "./MaskModule-CUFXLKZU.js";
7
- import { t as Input } from "./Input-CvxWu77f.js";
7
+ import { t as Input } from "./Input-Bi_mgUry.js";
8
8
 
9
9
  export { Input };
package/dist/select.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { n as types_d_exports, t as Select } from "./index-BWN2i3t9.js";
1
+ import { n as types_d_exports, t as Select } from "./index-41HYkx0w.js";
2
2
  import "./types-C0u1I3AZ.js";
3
3
  export { Select, types_d_exports as SelectTypes };
package/dist/text-area.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { t as TextArea } from "./index-butzJA6r.js";
1
+ import { t as TextArea } from "./index-BmFkBYVJ.js";
2
2
  export { TextArea };
package/dist/text-area.js CHANGED
@@ -2,6 +2,6 @@ import "./useThemedStyles-BJWB5BTH.js";
2
2
  import "./Typography-CKSjnDPX.js";
3
3
  import "./Label-CPua_PPu.js";
4
4
  import "./ErrorMessage-DOkrG22I.js";
5
- import { t as TextArea } from "./TextArea-Cne9IZEW.js";
5
+ import { t as TextArea } from "./TextArea-BvSrZjQe.js";
6
6
 
7
7
  export { TextArea };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "softable-pixels-web",
3
- "version": "1.2.6",
3
+ "version": "1.2.8",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "softable",
package/dist/Input-CvxWu77f.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Input-CvxWu77f.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, delay, onChange, ...rest }: InputProps) {\n // Refs\n const inputRef = useRef<HTMLInputElement>(null)\n const timeoutRef = useRef<NodeJS.Timeout>(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 (timeoutRef.current) clearTimeout(timeoutRef.current)\n\n if (mask) {\n const module = MaskModule.getMask(Locale.BR, mask)\n if (module) value = module.format(value)\n }\n\n if (!delay) onChange?.(value)\n else {\n timeoutRef.current = setTimeout(() => onChange?.(value), delay)\n }\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","/** biome-ignore-all lint/a11y/noAutofocus: It's a custom input component */\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 autoFocus={props.autoFocus}\n spellCheck={props.spellCheck}\n autoCorrect={props.autoCorrect}\n placeholder={props.placeholder}\n autoComplete={props.autoComplete}\n autoCapitalize={props.autoCapitalize}\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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"}
package/dist/TextArea-Cne9IZEW.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextArea-Cne9IZEW.js","names":[],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps) {\n const { height = '8rem', readOnly } = props\n\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n\n rowGap: '0.375rem'\n },\n iconContainer: {\n position: 'absolute',\n left: '0.75rem',\n top: '1.375rem',\n transform: 'translateY(-50%)'\n },\n textArea: {\n height,\n width: '100%',\n paddingBlock: '0.75rem',\n paddingInline: '0.875rem',\n borderWidth: 1,\n borderRadius: '0.5rem',\n resize: 'none',\n\n fontWeight: '400',\n fontSize: '1rem',\n color: 'var(--px-text-primary)',\n\n borderColor: props.errorMessage\n ? 'var(--px-color-error)'\n : 'var(--px-border-primary)',\n outlineOffset: '-1px',\n\n cursor: readOnly ? 'default' : undefined,\n\n __rules: {\n '&::placeholder': {\n fontWeight: 400,\n color: 'var(--px-text-secondary)'\n },\n\n '&:focus-within': {\n outlineOffset: '-1px',\n outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n }\n }\n }\n })\n}\n","// External Libraries\nimport { useId } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/toolkit/Label'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { ErrorMessage } from '@components/commons/toolkit/ErrorMessage'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTextAreaStyles } from './styles'\n\nexport const TextArea = (props: TextAreaProps) => {\n const {\n value,\n disabled,\n readOnly,\n maxLength,\n hideMaxLength,\n textMaxLength,\n placeholder,\n errorMessage,\n\n label,\n required,\n requiredColor,\n labelConfig\n } = props\n\n // Hooks\n const inputId = useId()\n\n const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n pick: p => [p.height, p.readOnly, p.placeholderColor, p.focusedRingColor],\n override: props.styles,\n applyCommonProps: true\n })\n\n // Functions\n function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n if (disabled || readOnly) return\n props.onChange?.(e.target.value)\n }\n\n function renderLabel() {\n if (!label) return null\n\n return (\n <div>\n <Label\n label={label}\n htmlFor={inputId}\n required={required}\n requiredColor={requiredColor}\n {...labelConfig}\n />\n </div>\n )\n }\n\n return (\n <div style={styles.container}>\n {renderLabel()}\n\n <textarea\n value={value}\n disabled={disabled}\n readOnly={readOnly}\n maxLength={maxLength}\n placeholder={placeholder}\n style={styles.textArea}\n className={classes.textArea}\n onChange={handleChange}\n />\n\n {maxLength && !hideMaxLength ? (\n <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n {value?.length}/{maxLength} {textMaxLength}\n </Typography>\n ) : null}\n\n {errorMessage ? <ErrorMessage message={errorMessage} /> : null}\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,qBAAqB,OAAsB;CACzD,MAAM,EAAE,SAAS,QAAQ,aAAa;AAEtC,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,QAAQ;GACT;EACD,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GACP,cAAc;GACd,eAAe;GACf,aAAa;GACb,cAAc;GACd,QAAQ;GAER,YAAY;GACZ,UAAU;GACV,OAAO;GAEP,aAAa,MAAM,eACf,0BACA;GACJ,eAAe;GAEf,QAAQ,WAAW,YAAY;GAE/B,SAAS;IACP,kBAAkB;KAChB,YAAY;KACZ,OAAO;KACR;IAED,kBAAkB;KAChB,eAAe;KACf,SAAS,iBAAiB,MAAM,eAAe,qBAAqB,qBAAqB;KAC1F;IACF;GACF;EACF,CAAC;;;;;ACrCJ,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,UACA,UACA,WACA,eACA,eACA,aACA,cAEA,OACA,UACA,eACA,gBACE;CAGJ,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GAAC,EAAE;GAAQ,EAAE;GAAU,EAAE;GAAkB,EAAE;GAAiB;EACzE,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;AAC1B,QAAM,WAAW,EAAE,OAAO,MAAM;;CAGlC,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC,mBACC,oBAAC;GACQ;GACP,SAAS;GACC;GACK;GACf,GAAI;IACJ,GACE;;AAIV,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,aAAa;GAEd,oBAAC;IACQ;IACG;IACA;IACC;IACE;IACb,OAAO,OAAO;IACd,WAAW,QAAQ;IACnB,UAAU;KACV;GAED,aAAa,CAAC,gBACb,qBAAC;IAAW,SAAQ;IAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;KAC9D,OAAO;KAAO;KAAE;KAAU;KAAE;;KAClB,GACX;GAEH,eAAe,oBAAC,gBAAa,SAAS,eAAgB,GAAG;;GACtD"}