softable-pixels-web 1.2.6 → 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-CvxWu77f.js → Input-Bi_mgUry.js} +15 -9
  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-BFutGH3a.d.ts → index-XPk_mchF.d.ts} +2 -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-CvxWu77f.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/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-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-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-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
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-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-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.6",
3
+ "version": "1.2.7",
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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"}