softable-pixels-web 1.2.5 → 1.2.7

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 (15) hide show
  1. package/dist/{Input-BKZ3l3ps.js → Input-Bi_mgUry.js} +17 -8
  2. package/dist/Input-Bi_mgUry.js.map +1 -0
  3. package/dist/context-menu.d.ts +1 -1
  4. package/dist/{index-BWN2i3t9.d.ts → index-41HYkx0w.d.ts} +2 -2
  5. package/dist/{index-butzJA6r.d.ts → index-CCPXtf6p.d.ts} +4 -4
  6. package/dist/{index-CGPCzJ5m.d.ts → index-CuP_knGM.d.ts} +3 -3
  7. package/dist/{index-DLbeWu4b.d.ts → index-XPk_mchF.d.ts} +3 -2
  8. package/dist/index.d.ts +4 -4
  9. package/dist/index.js +1 -1
  10. package/dist/input.d.ts +1 -1
  11. package/dist/input.js +1 -1
  12. package/dist/select.d.ts +1 -1
  13. package/dist/text-area.d.ts +1 -1
  14. package/package.json +1 -1
  15. package/dist/Input-BKZ3l3ps.js.map +0 -1
package/dist/{Input-BKZ3l3ps.js → Input-Bi_mgUry.js} RENAMED
@@ -3,12 +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, onChange, ...rest }) {
10
+ function useInput({ mask, delay, value, onChange, ...rest }) {
11
11
  const inputRef = useRef(null);
12
+ const timeoutRef = useRef(null);
13
+ const [inputValue, setInputValue] = useState(value);
12
14
  const [showPassword, setShowPassword] = useState(false);
13
15
  const { minLength, maxLength } = useMemo(() => {
14
16
  const appliedMask = mask ? MaskModule.getMask(Locale.BR, mask) : void 0;
@@ -21,6 +23,9 @@ function useInput({ mask, onChange, ...rest }) {
21
23
  rest.minLength,
22
24
  rest.maxLength
23
25
  ]);
26
+ useEffect(() => {
27
+ setInputValue(value);
28
+ }, [value]);
24
29
  function togglePasswordVisibility() {
25
30
  setShowPassword((prev) => !prev);
26
31
  }
@@ -37,17 +42,21 @@ function useInput({ mask, onChange, ...rest }) {
37
42
  inputRef.current?.blur();
38
43
  }
39
44
  function handleChange(e) {
40
- let value = e.target.value;
45
+ let value$1 = e.target.value;
46
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
41
47
  if (mask) {
42
48
  const module = MaskModule.getMask(Locale.BR, mask);
43
- if (module) value = module.format(value);
49
+ if (module) value$1 = module.format(value$1);
44
50
  }
45
- onChange?.(value);
51
+ setInputValue(value$1);
52
+ if (!delay) onChange?.(value$1);
53
+ else timeoutRef.current = setTimeout(() => onChange?.(value$1), delay);
46
54
  }
47
55
  return {
48
56
  inputRef,
49
57
  minLength,
50
58
  maxLength,
59
+ inputValue,
51
60
  showPassword,
52
61
  handleChange,
53
62
  handleRefMethods,
@@ -117,7 +126,7 @@ const Input = forwardRef((props, ref) => {
117
126
  const inputId = useMemo(() => {
118
127
  return props.id || `input-${reactId}`;
119
128
  }, [props.id, reactId]);
120
- const { inputRef, minLength, maxLength, showPassword, handleChange, handleRefMethods, togglePasswordVisibility } = useInput(props);
129
+ const { inputRef, minLength, maxLength, inputValue, showPassword, handleChange, handleRefMethods, togglePasswordVisibility } = useInput(props);
121
130
  useImperativeHandle(ref, handleRefMethods);
122
131
  const { styles, classes } = useThemedStyles(props, createInputStyles, {
123
132
  pick: (p) => [p.disabled, p.errorMessage],
@@ -161,7 +170,7 @@ const Input = forwardRef((props, ref) => {
161
170
  ref: inputRef,
162
171
  id: inputId,
163
172
  type: getType(),
164
- value: props.value,
173
+ value: inputValue,
165
174
  style: styles.input,
166
175
  minLength,
167
176
  maxLength,
@@ -188,4 +197,4 @@ Input.displayName = "Input";
188
197
 
189
198
  //#endregion
190
199
  export { Input as t };
191
- //# sourceMappingURL=Input-BKZ3l3ps.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/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-CCPXtf6p.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: {
@@ -65,7 +65,7 @@ interface TextAreaProps {
65
65
  }
66
66
  //#endregion
67
67
  //#region src/components/commons/inputs/TextArea/index.d.ts
68
- declare const TextArea: (props: TextAreaProps) => react_jsx_runtime1.JSX.Element;
68
+ declare const TextArea: (props: TextAreaProps) => react_jsx_runtime0.JSX.Element;
69
69
  //#endregion
70
70
  export { TextArea as t };
71
- //# sourceMappingURL=index-butzJA6r.d.ts.map
71
+ //# sourceMappingURL=index-CCPXtf6p.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-DLbeWu4b.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;
@@ -69,6 +69,7 @@ declare function createInputStyles(props: InputProps): {
69
69
  interface InputProps extends LayoutProps, MarginProps {
70
70
  id?: string;
71
71
  label: string;
72
+ delay?: number;
72
73
  value?: string;
73
74
  placeholder?: string;
74
75
  type?: HTMLInputTypeAttribute;
@@ -100,4 +101,4 @@ interface InputMethods {
100
101
  declare const Input: react0.ForwardRefExoticComponent<InputProps & react0.RefAttributes<InputMethods>>;
101
102
  //#endregion
102
103
  export { Input as t };
103
- //# sourceMappingURL=index-DLbeWu4b.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-DLbeWu4b.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-CCPXtf6p.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,7 +20,7 @@ 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-BKZ3l3ps.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
25
  import { t as TextArea } from "./TextArea-Cne9IZEW.js";
26
26
  import { t as SearchInput } from "./SearchInput-Ol5FJDHS.js";
package/dist/input.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { t as Input } from "./index-DLbeWu4b.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-BKZ3l3ps.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-CCPXtf6p.js";
2
2
  export { TextArea };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "softable-pixels-web",
3
- "version": "1.2.5",
3
+ "version": "1.2.7",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "softable",
package/dist/Input-BKZ3l3ps.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Input-BKZ3l3ps.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","/** 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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"}