@xanui/ui 1.1.48 → 1.1.49
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.
- package/CalendarInput/index.cjs +1 -5
- package/CalendarInput/index.cjs.map +1 -1
- package/CalendarInput/index.js +1 -5
- package/CalendarInput/index.js.map +1 -1
- package/Input/index.cjs +20 -2
- package/Input/index.cjs.map +1 -1
- package/Input/index.js +20 -2
- package/Input/index.js.map +1 -1
- package/package.json +1 -1
package/CalendarInput/index.cjs
CHANGED
|
@@ -20,11 +20,7 @@ const CalenderInput = (props) => {
|
|
|
20
20
|
const inputRef = React.useRef(null);
|
|
21
21
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index, Object.assign({ readOnly: true, startIcon: jsxRuntime.jsx(CalendarIcon, {}), placeholder: placeholder }, inputProps, { endIcon: jsxRuntime.jsx(jsxRuntime.Fragment, { children: value && jsxRuntime.jsx(index$1, { children: jsxRuntime.jsx(index$2, { color: "default", size: 28, variant: "text", onClick: () => {
|
|
22
22
|
onChange && onChange(null);
|
|
23
|
-
}, children: jsxRuntime.jsx(ClearIcon, { fontSize: 20 }) }) }) }), cursor: "pointer", ref: inputRef, slotProps: {
|
|
24
|
-
inputContainer: {
|
|
25
|
-
onClick: () => setTarget(target ? null : inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)
|
|
26
|
-
}
|
|
27
|
-
}, value: getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString("en-US") : "") })), jsxRuntime.jsx(index$3, Object.assign({ target: target, placement: "bottom-left", bgcolor: "transparent" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { children: jsxRuntime.jsx(index$4, { onClickOutside: () => setTarget(null), children: jsxRuntime.jsx(index$5, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.calender, { value: value, onChange: (e) => {
|
|
23
|
+
}, children: jsxRuntime.jsx(ClearIcon, { fontSize: 20 }) }) }) }), cursor: "pointer", ref: inputRef, onFocus: () => setTarget(target ? null : inputRef === null || inputRef === void 0 ? void 0 : inputRef.current), value: getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString("en-US") : "") })), jsxRuntime.jsx(index$3, Object.assign({ target: target, placement: "bottom-left", bgcolor: "transparent" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { children: jsxRuntime.jsx(index$4, { onClickOutside: () => setTarget(null), children: jsxRuntime.jsx(index$5, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.calender, { value: value, onChange: (e) => {
|
|
28
24
|
setTarget(null);
|
|
29
25
|
onChange && onChange(e);
|
|
30
26
|
} })) }) }))] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["\"use client\";\nimport Input, { InputProps } from '../Input'\nimport Menu, { MenuProps } from '../Menu'\nimport { useRef, useState } from 'react'\nimport Calendar, { CalendarProps } from '../Calendar'\nimport Stack from '../Stack'\nimport ClickOutside from '../ClickOutside'\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\nimport IconButton from '../IconButton'\nimport ClearIcon from '@xanui/icons/Clear';\nimport { useInterface } from '@xanui/core'\n\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\" | \"slotProps\"> & {\n value?: CalendarProps[\"value\"];\n onChange?: CalendarProps[\"onChange\"];\n getInputValue?: (value?: Date | null) => string;\n slotProps?: {\n input?: InputProps['slotProps'];\n calender?: CalendarProps;\n menu?: MenuProps;\n }\n}\n\nconst CalenderInput = (props: CalenderInpurProps) => {\n let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\n const [target, setTarget] = useState<any>()\n const inputRef: any = useRef(null)\n\n return (\n <>\n <Input\n readOnly\n startIcon={<CalendarIcon />}\n placeholder={placeholder}\n {...inputProps}\n endIcon={<>\n {value && <Stack>\n <IconButton\n color=\"default\"\n size={28}\n variant=\"text\"\n onClick={() => {\n onChange && onChange(null)\n }}\n >\n <ClearIcon fontSize={20} />\n </IconButton>\n </Stack>}\n </>}\n cursor=\"pointer\"\n ref={inputRef}\n
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["\"use client\";\nimport Input, { InputProps } from '../Input'\nimport Menu, { MenuProps } from '../Menu'\nimport { useRef, useState } from 'react'\nimport Calendar, { CalendarProps } from '../Calendar'\nimport Stack from '../Stack'\nimport ClickOutside from '../ClickOutside'\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\nimport IconButton from '../IconButton'\nimport ClearIcon from '@xanui/icons/Clear';\nimport { useInterface } from '@xanui/core'\n\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\" | \"slotProps\"> & {\n value?: CalendarProps[\"value\"];\n onChange?: CalendarProps[\"onChange\"];\n getInputValue?: (value?: Date | null) => string;\n slotProps?: {\n input?: InputProps['slotProps'];\n calender?: CalendarProps;\n menu?: MenuProps;\n }\n}\n\nconst CalenderInput = (props: CalenderInpurProps) => {\n let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\n const [target, setTarget] = useState<any>()\n const inputRef: any = useRef(null)\n\n return (\n <>\n <Input\n readOnly\n startIcon={<CalendarIcon />}\n placeholder={placeholder}\n {...inputProps}\n endIcon={<>\n {value && <Stack>\n <IconButton\n color=\"default\"\n size={28}\n variant=\"text\"\n onClick={() => {\n onChange && onChange(null)\n }}\n >\n <ClearIcon fontSize={20} />\n </IconButton>\n </Stack>}\n </>}\n cursor=\"pointer\"\n ref={inputRef}\n onFocus={() => setTarget(target ? null : inputRef?.current)}\n value={getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString(\"en-US\") : \"\")}\n />\n <Menu\n target={target}\n placement=\"bottom-left\"\n bgcolor=\"transparent\"\n {...slotProps?.menu}\n >\n <ClickOutside onClickOutside={() => setTarget(null)}>\n <Calendar\n {...slotProps?.calender}\n value={value}\n onChange={(e) => {\n setTarget(null)\n onChange && onChange(e)\n }}\n />\n </ClickOutside>\n </Menu>\n </>\n )\n}\n\nexport default CalenderInput"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuBA;;;AAGI;;AAgB4B;AACJ;;AAuBA;AACJ;AAMxB;;"}
|
package/CalendarInput/index.js
CHANGED
|
@@ -18,11 +18,7 @@ const CalenderInput = (props) => {
|
|
|
18
18
|
const inputRef = useRef(null);
|
|
19
19
|
return (jsxs(Fragment, { children: [jsx(Input, Object.assign({ readOnly: true, startIcon: jsx(CalendarIcon, {}), placeholder: placeholder }, inputProps, { endIcon: jsx(Fragment, { children: value && jsx(Stack, { children: jsx(IconButton, { color: "default", size: 28, variant: "text", onClick: () => {
|
|
20
20
|
onChange && onChange(null);
|
|
21
|
-
}, children: jsx(ClearIcon, { fontSize: 20 }) }) }) }), cursor: "pointer", ref: inputRef, slotProps: {
|
|
22
|
-
inputContainer: {
|
|
23
|
-
onClick: () => setTarget(target ? null : inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)
|
|
24
|
-
}
|
|
25
|
-
}, value: getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString("en-US") : "") })), jsx(Menu, Object.assign({ target: target, placement: "bottom-left", bgcolor: "transparent" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { children: jsx(ClickOutside, { onClickOutside: () => setTarget(null), children: jsx(Calendar, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.calender, { value: value, onChange: (e) => {
|
|
21
|
+
}, children: jsx(ClearIcon, { fontSize: 20 }) }) }) }), cursor: "pointer", ref: inputRef, onFocus: () => setTarget(target ? null : inputRef === null || inputRef === void 0 ? void 0 : inputRef.current), value: getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString("en-US") : "") })), jsx(Menu, Object.assign({ target: target, placement: "bottom-left", bgcolor: "transparent" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { children: jsx(ClickOutside, { onClickOutside: () => setTarget(null), children: jsx(Calendar, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.calender, { value: value, onChange: (e) => {
|
|
26
22
|
setTarget(null);
|
|
27
23
|
onChange && onChange(e);
|
|
28
24
|
} })) }) }))] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["\"use client\";\nimport Input, { InputProps } from '../Input'\nimport Menu, { MenuProps } from '../Menu'\nimport { useRef, useState } from 'react'\nimport Calendar, { CalendarProps } from '../Calendar'\nimport Stack from '../Stack'\nimport ClickOutside from '../ClickOutside'\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\nimport IconButton from '../IconButton'\nimport ClearIcon from '@xanui/icons/Clear';\nimport { useInterface } from '@xanui/core'\n\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\" | \"slotProps\"> & {\n value?: CalendarProps[\"value\"];\n onChange?: CalendarProps[\"onChange\"];\n getInputValue?: (value?: Date | null) => string;\n slotProps?: {\n input?: InputProps['slotProps'];\n calender?: CalendarProps;\n menu?: MenuProps;\n }\n}\n\nconst CalenderInput = (props: CalenderInpurProps) => {\n let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\n const [target, setTarget] = useState<any>()\n const inputRef: any = useRef(null)\n\n return (\n <>\n <Input\n readOnly\n startIcon={<CalendarIcon />}\n placeholder={placeholder}\n {...inputProps}\n endIcon={<>\n {value && <Stack>\n <IconButton\n color=\"default\"\n size={28}\n variant=\"text\"\n onClick={() => {\n onChange && onChange(null)\n }}\n >\n <ClearIcon fontSize={20} />\n </IconButton>\n </Stack>}\n </>}\n cursor=\"pointer\"\n ref={inputRef}\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/CalendarInput/index.tsx"],"sourcesContent":["\"use client\";\nimport Input, { InputProps } from '../Input'\nimport Menu, { MenuProps } from '../Menu'\nimport { useRef, useState } from 'react'\nimport Calendar, { CalendarProps } from '../Calendar'\nimport Stack from '../Stack'\nimport ClickOutside from '../ClickOutside'\nimport CalendarIcon from '@xanui/icons/CalendarMonth';\nimport IconButton from '../IconButton'\nimport ClearIcon from '@xanui/icons/Clear';\nimport { useInterface } from '@xanui/core'\n\nexport type CalenderInpurProps = Omit<InputProps, \"value\" | \"onChange\" | \"slotProps\"> & {\n value?: CalendarProps[\"value\"];\n onChange?: CalendarProps[\"onChange\"];\n getInputValue?: (value?: Date | null) => string;\n slotProps?: {\n input?: InputProps['slotProps'];\n calender?: CalendarProps;\n menu?: MenuProps;\n }\n}\n\nconst CalenderInput = (props: CalenderInpurProps) => {\n let [{ value, onChange, getInputValue, slotProps, placeholder, ...inputProps }] = useInterface<any>(\"CanlendarInput\", props, {})\n const [target, setTarget] = useState<any>()\n const inputRef: any = useRef(null)\n\n return (\n <>\n <Input\n readOnly\n startIcon={<CalendarIcon />}\n placeholder={placeholder}\n {...inputProps}\n endIcon={<>\n {value && <Stack>\n <IconButton\n color=\"default\"\n size={28}\n variant=\"text\"\n onClick={() => {\n onChange && onChange(null)\n }}\n >\n <ClearIcon fontSize={20} />\n </IconButton>\n </Stack>}\n </>}\n cursor=\"pointer\"\n ref={inputRef}\n onFocus={() => setTarget(target ? null : inputRef?.current)}\n value={getInputValue ? getInputValue(value) : (value ? value.toLocaleDateString(\"en-US\") : \"\")}\n />\n <Menu\n target={target}\n placement=\"bottom-left\"\n bgcolor=\"transparent\"\n {...slotProps?.menu}\n >\n <ClickOutside onClickOutside={() => setTarget(null)}>\n <Calendar\n {...slotProps?.calender}\n value={value}\n onChange={(e) => {\n setTarget(null)\n onChange && onChange(e)\n }}\n />\n </ClickOutside>\n </Menu>\n </>\n )\n}\n\nexport default CalenderInput"],"names":[],"mappings":";;;;;;;;;;;;;;AAuBA;;;AAGI;;AAgB4B;AACJ;;AAuBA;AACJ;AAMxB;;"}
|
package/Input/index.cjs
CHANGED
|
@@ -110,13 +110,31 @@ const Input = React.forwardRef((_a, ref) => {
|
|
|
110
110
|
}, children: [!!label && jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { ref: refs === null || refs === void 0 ? void 0 : refs.label, children: label })), jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputRoot, { ref: refs === null || refs === void 0 ? void 0 : refs.inputRoot, baseClass: 'input-root', sxr: {
|
|
111
111
|
width: "100%",
|
|
112
112
|
overflow: "hidden",
|
|
113
|
-
}, children: [jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active": {
|
|
113
|
+
}, children: [jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active": {
|
|
114
114
|
"-webkit-text-fill-color": "text.primary",
|
|
115
115
|
"box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,
|
|
116
116
|
transition: "background-color 5000s ease-in-out 0s"
|
|
117
117
|
}, "& textarea": {
|
|
118
118
|
resize: "none"
|
|
119
|
-
} }),
|
|
119
|
+
} }), (!!startIcon && {
|
|
120
|
+
"& :first-child": {
|
|
121
|
+
height: "100%",
|
|
122
|
+
alignItems: 'center',
|
|
123
|
+
justifyContent: "center",
|
|
124
|
+
display: "flex",
|
|
125
|
+
color: error ? "danger.primary" : "text.secondary",
|
|
126
|
+
flex: "0 0 auto",
|
|
127
|
+
},
|
|
128
|
+
})), (!!endIcon && {
|
|
129
|
+
"& :last-child": {
|
|
130
|
+
height: "100%",
|
|
131
|
+
alignItems: 'center',
|
|
132
|
+
justifyContent: "center",
|
|
133
|
+
display: 'flex',
|
|
134
|
+
color: error ? "danger.primary" : "text.secondary",
|
|
135
|
+
flex: "0 0 auto",
|
|
136
|
+
},
|
|
137
|
+
})), disabled: disabled || false, children: [startIcon, jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { ref: inputMergeRef, baseClass: 'input', component: multiline ? 'textarea' : 'input' }, multiprops, { sxr: {
|
|
120
138
|
border: 0,
|
|
121
139
|
outline: 0,
|
|
122
140
|
bgcolor: "transparent",
|
package/Input/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n value?: string;\n type?: TagProps<'input'>['type'];\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onChange?: (e: React.ChangeEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n multiline?: boolean;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n refs?: {\n inputRoot?: React.Ref<\"div\">;\n label?: React.Ref<\"label\">;\n rootContainer?: React.Ref<\"div\">;\n // startIcon?: React.Ref<ReactElement>;\n // endIcon?: React.Ref<ReactElement>;\n // inputContainer?: React.Ref<\"div\">;\n input?: React.Ref<'input' | 'textarea'>;\n helperText?: React.Ref<\"div\">;\n };\n\n slotProps?: {\n inputRoot?: Omit<TagProps<\"div\">, \"children\">;\n label?: Omit<LabelProps, \"children\">;\n rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n // startIcon?: Omit<TagProps<'div'>, \"children\">;\n // endIcon?: Omit<TagProps<'div'>, \"children\">;\n // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n helperText?: Omit<TagProps<\"div\">, \"children\">;\n input?: Partial<TagProps<T>>;\n }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n let [{\n startIcon,\n endIcon,\n iconPlacement,\n color,\n label,\n name,\n placeholder,\n type,\n readOnly,\n autoFocus,\n autoComplete,\n onFocus,\n onBlur,\n onChange,\n onKeyDown,\n onKeyUp,\n\n focused,\n disabled,\n variant,\n error,\n helperText,\n multiline,\n size,\n rows,\n minRows,\n maxRows,\n fullWidth,\n slotProps,\n\n ...rest\n }, theme] = useInterface<any>(\"Input\", props, {})\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (iconPlacement) _p.iconPlacement = iconPlacement\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (helperText) _p.helperText = helperText\n if (size) _p.size = size\n if (rows) _p.rows = rows\n if (minRows) _p.minRows = minRows\n if (maxRows) _p.maxRows = maxRows\n const p: any = useBreakpointProps(_p)\n startIcon = p.startIcon\n endIcon = p.endIcon\n iconPlacement = p.iconPlacement\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n helperText = p.helperText\n size = p.size ?? 'medium'\n rows = p.rows\n minRows = p.minRows\n maxRows = p.maxRows\n\n iconPlacement ??= multiline ? \"end\" : \"center\"\n if (!value) iconPlacement = 'center'\n\n const [_focused, setFocused] = useState(false)\n let _focus = focused || _focused\n const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\n\n useEffect(() => {\n if (autoFocus) {\n setTimeout(() => {\n inputRef.current?.focus()\n }, 100);\n }\n }, [autoFocus])\n\n let _rows = useMemo(() => {\n if (rows) return rows\n if (value && multiline) {\n let lines = (value as string).split(`\\n`).length\n if (minRows && minRows > lines) {\n return minRows\n } else if (maxRows && maxRows < lines) {\n return maxRows\n } else {\n return lines\n }\n }\n }, [value]) || 1\n\n const sizes: any = {\n small: {\n height: 38,\n gap: .5,\n fontSize: 'button',\n },\n medium: {\n height: 46,\n gap: 1,\n fontSize: \"text\"\n },\n large: {\n height: 52,\n gap: 1,\n fontSize: 'big'\n }\n }\n\n const _size = sizes[size]\n let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n borderColor = error ? \"danger.primary\" : borderColor\n let multiprops: any = {}\n if (multiline) {\n multiprops = {\n rows: _rows,\n sx: {\n resize: \"none\"\n }\n }\n }\n\n return (\n <Tag\n width={fullWidth ? \"100%\" : \"auto\"}\n {...rest}\n ref={ref}\n baseClass=\"input-wrapper\"\n sxr={{\n display: 'flex',\n flexDirection: 'column',\n gap: .5,\n }}\n >\n {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\n <Tag\n {...slotProps?.inputRoot}\n ref={refs?.inputRoot}\n baseClass={'input-root'}\n sxr={{\n width: \"100%\",\n overflow: \"hidden\",\n }}\n >\n <Tag\n {...slotProps?.rootContainer}\n ref={refs?.rootContainer}\n baseClass='input-root-container'\n sxr={{\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n flexWrap: \"nowrap\",\n transitionProperty: \"border, box-shadow, background\",\n bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n border: variant === \"text\" ? 0 : \"1px solid\",\n borderColor: borderColor,\n borderRadius: 1,\n px: 1,\n // py: .5,\n ..._size,\n height: multiline ? \"auto\" : _size.height,\n minHeight: _size.height,\n \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n \"-webkit-text-fill-color\": \"text.primary\",\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n transition: \"background-color 5000s ease-in-out 0s\"\n } as any,\n \"& textarea\": {\n resize: \"none\"\n },\n\n // ...(!!startIcon && {\n // \"& :first-child\": {\n // height: \"100%\",\n // alignItems: 'center',\n // justifyContent: \"center\",\n // display: \"flex\",\n // color: error ? \"danger.primary\" : \"text.secondary\",\n // flex: \"0 0 auto\",\n // },\n // }),\n\n // ...(!!endIcon && {\n // \"& :last-child\": {\n // height: \"100%\",\n // alignItems: 'center',\n // justifyContent: \"center\",\n // display: 'flex',\n // color: error ? \"danger.primary\" : \"text.secondary\",\n // flex: \"0 0 auto\",\n // },\n // })\n\n }}\n disabled={disabled || false}\n >\n {/* {startIcon && <Tag\n {...slotProps?.startIcon}\n ref={refs?.startIcon}\n flex={\"0 0 auto\"}\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: \"flex\",\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-start-icon\"\n >{startIcon}</Tag>} */}\n {startIcon}\n {/* <Tag\n {...slotProps?.inputContainer}\n ref={refs?.inputContainer}\n baseClass='input-container'\n flex={1}\n sxr={{\n width: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n flex: 1,\n minHeight: _size.height,\n \"& textarea\": {\n resize: \"none\"\n },\n \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n \"-webkit-text-fill-color\": \"text.primary\",\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n transition: \"background-color 5000s ease-in-out 0s\"\n } as any\n }}\n >\n \n </Tag> */}\n <Tag\n {...slotProps?.input}\n ref={inputMergeRef}\n baseClass='input'\n component={multiline ? 'textarea' : 'input'}\n {...multiprops}\n sxr={{\n border: 0,\n outline: 0,\n bgcolor: \"transparent\",\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: _size.fontSize,\n height: multiline ? \"auto\" : _size.height + \"px!important\",\n width: \"100%\",\n maxHeight: 200,\n }}\n value={value}\n onChange={onChange}\n onFocus={(e: any) => {\n focused ?? setFocused(true)\n onFocus && onFocus(e)\n }}\n onBlur={(e: any) => {\n focused ?? setFocused(false)\n onBlur && onBlur(e)\n }}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n name={name}\n placeholder={placeholder}\n type={type}\n readOnly={readOnly}\n autoComplete={autoComplete}\n />\n {/* {endIcon && <Tag\n {...slotProps?.endIcon}\n ref={refs?.endIcon}\n flex={\"0 0 auto\"}\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: 'flex',\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-end-icon\"\n >{endIcon}</Tag>} */}\n {endIcon}\n </Tag>\n {helperText && <Tag\n {...slotProps?.helperText}\n ref={refs?.helperText}\n baseClass=\"input-helper-text\"\n sxr={{\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: \"small\",\n lineHeight: \"text\",\n fontWeight: 'text',\n pl: .5,\n }}\n >{helperText}</Tag>}\n </Tag>\n </Tag>\n )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAuEG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AA8BA;AACA;AACA;AACA;AACH;AAKrB;;"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n value?: string;\n type?: TagProps<'input'>['type'];\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onChange?: (e: React.ChangeEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n multiline?: boolean;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n refs?: {\n inputRoot?: React.Ref<\"div\">;\n label?: React.Ref<\"label\">;\n rootContainer?: React.Ref<\"div\">;\n // startIcon?: React.Ref<ReactElement>;\n // endIcon?: React.Ref<ReactElement>;\n // inputContainer?: React.Ref<\"div\">;\n input?: React.Ref<'input' | 'textarea'>;\n helperText?: React.Ref<\"div\">;\n };\n\n slotProps?: {\n inputRoot?: Omit<TagProps<\"div\">, \"children\">;\n label?: Omit<LabelProps, \"children\">;\n rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n // startIcon?: Omit<TagProps<'div'>, \"children\">;\n // endIcon?: Omit<TagProps<'div'>, \"children\">;\n // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n helperText?: Omit<TagProps<\"div\">, \"children\">;\n input?: Partial<TagProps<T>>;\n }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n let [{\n startIcon,\n endIcon,\n iconPlacement,\n color,\n label,\n name,\n placeholder,\n type,\n readOnly,\n autoFocus,\n autoComplete,\n onFocus,\n onBlur,\n onChange,\n onKeyDown,\n onKeyUp,\n\n focused,\n disabled,\n variant,\n error,\n helperText,\n multiline,\n size,\n rows,\n minRows,\n maxRows,\n fullWidth,\n slotProps,\n\n ...rest\n }, theme] = useInterface<any>(\"Input\", props, {})\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (iconPlacement) _p.iconPlacement = iconPlacement\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (helperText) _p.helperText = helperText\n if (size) _p.size = size\n if (rows) _p.rows = rows\n if (minRows) _p.minRows = minRows\n if (maxRows) _p.maxRows = maxRows\n const p: any = useBreakpointProps(_p)\n startIcon = p.startIcon\n endIcon = p.endIcon\n iconPlacement = p.iconPlacement\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n helperText = p.helperText\n size = p.size ?? 'medium'\n rows = p.rows\n minRows = p.minRows\n maxRows = p.maxRows\n\n iconPlacement ??= multiline ? \"end\" : \"center\"\n if (!value) iconPlacement = 'center'\n\n const [_focused, setFocused] = useState(false)\n let _focus = focused || _focused\n const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\n\n useEffect(() => {\n if (autoFocus) {\n setTimeout(() => {\n inputRef.current?.focus()\n }, 100);\n }\n }, [autoFocus])\n\n let _rows = useMemo(() => {\n if (rows) return rows\n if (value && multiline) {\n let lines = (value as string).split(`\\n`).length\n if (minRows && minRows > lines) {\n return minRows\n } else if (maxRows && maxRows < lines) {\n return maxRows\n } else {\n return lines\n }\n }\n }, [value]) || 1\n\n const sizes: any = {\n small: {\n height: 38,\n gap: .5,\n fontSize: 'button',\n },\n medium: {\n height: 46,\n gap: 1,\n fontSize: \"text\"\n },\n large: {\n height: 52,\n gap: 1,\n fontSize: 'big'\n }\n }\n\n const _size = sizes[size]\n let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n borderColor = error ? \"danger.primary\" : borderColor\n let multiprops: any = {}\n if (multiline) {\n multiprops = {\n rows: _rows,\n sx: {\n resize: \"none\"\n }\n }\n }\n\n return (\n <Tag\n width={fullWidth ? \"100%\" : \"auto\"}\n {...rest}\n ref={ref}\n baseClass=\"input-wrapper\"\n sxr={{\n display: 'flex',\n flexDirection: 'column',\n gap: .5,\n }}\n >\n {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\n <Tag\n {...slotProps?.inputRoot}\n ref={refs?.inputRoot}\n baseClass={'input-root'}\n sxr={{\n width: \"100%\",\n overflow: \"hidden\",\n }}\n >\n <Tag\n {...slotProps?.rootContainer}\n ref={refs?.rootContainer}\n baseClass='input-root-container'\n sxr={{\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n flexWrap: \"nowrap\",\n transitionProperty: \"border, box-shadow, background\",\n bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n border: variant === \"text\" ? 0 : \"1px solid\",\n borderColor: borderColor,\n borderRadius: 1,\n px: 1,\n // py: .5,\n ..._size,\n height: multiline ? \"auto\" : _size.height,\n minHeight: _size.height,\n \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n \"-webkit-text-fill-color\": \"text.primary\",\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n transition: \"background-color 5000s ease-in-out 0s\"\n } as any,\n \"& textarea\": {\n resize: \"none\"\n },\n\n ...(!!startIcon && {\n \"& :first-child\": {\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: \"flex\",\n color: error ? \"danger.primary\" : \"text.secondary\",\n flex: \"0 0 auto\",\n },\n }),\n\n ...(!!endIcon && {\n \"& :last-child\": {\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: 'flex',\n color: error ? \"danger.primary\" : \"text.secondary\",\n flex: \"0 0 auto\",\n },\n })\n\n }}\n disabled={disabled || false}\n >\n {/* {startIcon && <Tag\n {...slotProps?.startIcon}\n ref={refs?.startIcon}\n flex={\"0 0 auto\"}\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: \"flex\",\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-start-icon\"\n >{startIcon}</Tag>} */}\n {startIcon}\n {/* <Tag\n {...slotProps?.inputContainer}\n ref={refs?.inputContainer}\n baseClass='input-container'\n flex={1}\n sxr={{\n width: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n flex: 1,\n minHeight: _size.height,\n \"& textarea\": {\n resize: \"none\"\n },\n \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n \"-webkit-text-fill-color\": \"text.primary\",\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n transition: \"background-color 5000s ease-in-out 0s\"\n } as any\n }}\n >\n \n </Tag> */}\n <Tag\n {...slotProps?.input}\n ref={inputMergeRef}\n baseClass='input'\n component={multiline ? 'textarea' : 'input'}\n {...multiprops}\n sxr={{\n border: 0,\n outline: 0,\n bgcolor: \"transparent\",\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: _size.fontSize,\n height: multiline ? \"auto\" : _size.height + \"px!important\",\n width: \"100%\",\n maxHeight: 200,\n }}\n value={value}\n onChange={onChange}\n onFocus={(e: any) => {\n focused ?? setFocused(true)\n onFocus && onFocus(e)\n }}\n onBlur={(e: any) => {\n focused ?? setFocused(false)\n onBlur && onBlur(e)\n }}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n name={name}\n placeholder={placeholder}\n type={type}\n readOnly={readOnly}\n autoComplete={autoComplete}\n />\n {/* {endIcon && <Tag\n {...slotProps?.endIcon}\n ref={refs?.endIcon}\n flex={\"0 0 auto\"}\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: 'flex',\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-end-icon\"\n >{endIcon}</Tag>} */}\n {endIcon}\n </Tag>\n {helperText && <Tag\n {...slotProps?.helperText}\n ref={refs?.helperText}\n baseClass=\"input-helper-text\"\n sxr={{\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: \"small\",\n lineHeight: \"text\",\n fontWeight: 'text',\n pl: .5,\n }}\n >{helperText}</Tag>}\n </Tag>\n </Tag>\n )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAiDG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AA8BA;AACA;AACA;AACA;AACH;AAKrB;;"}
|
package/Input/index.js
CHANGED
|
@@ -108,13 +108,31 @@ const Input = React.forwardRef((_a, ref) => {
|
|
|
108
108
|
}, children: [!!label && jsx(Label, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { ref: refs === null || refs === void 0 ? void 0 : refs.label, children: label })), jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputRoot, { ref: refs === null || refs === void 0 ? void 0 : refs.inputRoot, baseClass: 'input-root', sxr: {
|
|
109
109
|
width: "100%",
|
|
110
110
|
overflow: "hidden",
|
|
111
|
-
}, children: [jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active": {
|
|
111
|
+
}, children: [jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active": {
|
|
112
112
|
"-webkit-text-fill-color": "text.primary",
|
|
113
113
|
"box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,
|
|
114
114
|
transition: "background-color 5000s ease-in-out 0s"
|
|
115
115
|
}, "& textarea": {
|
|
116
116
|
resize: "none"
|
|
117
|
-
} }),
|
|
117
|
+
} }), (!!startIcon && {
|
|
118
|
+
"& :first-child": {
|
|
119
|
+
height: "100%",
|
|
120
|
+
alignItems: 'center',
|
|
121
|
+
justifyContent: "center",
|
|
122
|
+
display: "flex",
|
|
123
|
+
color: error ? "danger.primary" : "text.secondary",
|
|
124
|
+
flex: "0 0 auto",
|
|
125
|
+
},
|
|
126
|
+
})), (!!endIcon && {
|
|
127
|
+
"& :last-child": {
|
|
128
|
+
height: "100%",
|
|
129
|
+
alignItems: 'center',
|
|
130
|
+
justifyContent: "center",
|
|
131
|
+
display: 'flex',
|
|
132
|
+
color: error ? "danger.primary" : "text.secondary",
|
|
133
|
+
flex: "0 0 auto",
|
|
134
|
+
},
|
|
135
|
+
})), disabled: disabled || false, children: [startIcon, jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { ref: inputMergeRef, baseClass: 'input', component: multiline ? 'textarea' : 'input' }, multiprops, { sxr: {
|
|
118
136
|
border: 0,
|
|
119
137
|
outline: 0,
|
|
120
138
|
bgcolor: "transparent",
|
package/Input/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n value?: string;\n type?: TagProps<'input'>['type'];\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onChange?: (e: React.ChangeEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n multiline?: boolean;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n refs?: {\n inputRoot?: React.Ref<\"div\">;\n label?: React.Ref<\"label\">;\n rootContainer?: React.Ref<\"div\">;\n // startIcon?: React.Ref<ReactElement>;\n // endIcon?: React.Ref<ReactElement>;\n // inputContainer?: React.Ref<\"div\">;\n input?: React.Ref<'input' | 'textarea'>;\n helperText?: React.Ref<\"div\">;\n };\n\n slotProps?: {\n inputRoot?: Omit<TagProps<\"div\">, \"children\">;\n label?: Omit<LabelProps, \"children\">;\n rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n // startIcon?: Omit<TagProps<'div'>, \"children\">;\n // endIcon?: Omit<TagProps<'div'>, \"children\">;\n // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n helperText?: Omit<TagProps<\"div\">, \"children\">;\n input?: Partial<TagProps<T>>;\n }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n let [{\n startIcon,\n endIcon,\n iconPlacement,\n color,\n label,\n name,\n placeholder,\n type,\n readOnly,\n autoFocus,\n autoComplete,\n onFocus,\n onBlur,\n onChange,\n onKeyDown,\n onKeyUp,\n\n focused,\n disabled,\n variant,\n error,\n helperText,\n multiline,\n size,\n rows,\n minRows,\n maxRows,\n fullWidth,\n slotProps,\n\n ...rest\n }, theme] = useInterface<any>(\"Input\", props, {})\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (iconPlacement) _p.iconPlacement = iconPlacement\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (helperText) _p.helperText = helperText\n if (size) _p.size = size\n if (rows) _p.rows = rows\n if (minRows) _p.minRows = minRows\n if (maxRows) _p.maxRows = maxRows\n const p: any = useBreakpointProps(_p)\n startIcon = p.startIcon\n endIcon = p.endIcon\n iconPlacement = p.iconPlacement\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n helperText = p.helperText\n size = p.size ?? 'medium'\n rows = p.rows\n minRows = p.minRows\n maxRows = p.maxRows\n\n iconPlacement ??= multiline ? \"end\" : \"center\"\n if (!value) iconPlacement = 'center'\n\n const [_focused, setFocused] = useState(false)\n let _focus = focused || _focused\n const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\n\n useEffect(() => {\n if (autoFocus) {\n setTimeout(() => {\n inputRef.current?.focus()\n }, 100);\n }\n }, [autoFocus])\n\n let _rows = useMemo(() => {\n if (rows) return rows\n if (value && multiline) {\n let lines = (value as string).split(`\\n`).length\n if (minRows && minRows > lines) {\n return minRows\n } else if (maxRows && maxRows < lines) {\n return maxRows\n } else {\n return lines\n }\n }\n }, [value]) || 1\n\n const sizes: any = {\n small: {\n height: 38,\n gap: .5,\n fontSize: 'button',\n },\n medium: {\n height: 46,\n gap: 1,\n fontSize: \"text\"\n },\n large: {\n height: 52,\n gap: 1,\n fontSize: 'big'\n }\n }\n\n const _size = sizes[size]\n let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n borderColor = error ? \"danger.primary\" : borderColor\n let multiprops: any = {}\n if (multiline) {\n multiprops = {\n rows: _rows,\n sx: {\n resize: \"none\"\n }\n }\n }\n\n return (\n <Tag\n width={fullWidth ? \"100%\" : \"auto\"}\n {...rest}\n ref={ref}\n baseClass=\"input-wrapper\"\n sxr={{\n display: 'flex',\n flexDirection: 'column',\n gap: .5,\n }}\n >\n {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\n <Tag\n {...slotProps?.inputRoot}\n ref={refs?.inputRoot}\n baseClass={'input-root'}\n sxr={{\n width: \"100%\",\n overflow: \"hidden\",\n }}\n >\n <Tag\n {...slotProps?.rootContainer}\n ref={refs?.rootContainer}\n baseClass='input-root-container'\n sxr={{\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n flexWrap: \"nowrap\",\n transitionProperty: \"border, box-shadow, background\",\n bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n border: variant === \"text\" ? 0 : \"1px solid\",\n borderColor: borderColor,\n borderRadius: 1,\n px: 1,\n // py: .5,\n ..._size,\n height: multiline ? \"auto\" : _size.height,\n minHeight: _size.height,\n \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n \"-webkit-text-fill-color\": \"text.primary\",\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n transition: \"background-color 5000s ease-in-out 0s\"\n } as any,\n \"& textarea\": {\n resize: \"none\"\n },\n\n // ...(!!startIcon && {\n // \"& :first-child\": {\n // height: \"100%\",\n // alignItems: 'center',\n // justifyContent: \"center\",\n // display: \"flex\",\n // color: error ? \"danger.primary\" : \"text.secondary\",\n // flex: \"0 0 auto\",\n // },\n // }),\n\n // ...(!!endIcon && {\n // \"& :last-child\": {\n // height: \"100%\",\n // alignItems: 'center',\n // justifyContent: \"center\",\n // display: 'flex',\n // color: error ? \"danger.primary\" : \"text.secondary\",\n // flex: \"0 0 auto\",\n // },\n // })\n\n }}\n disabled={disabled || false}\n >\n {/* {startIcon && <Tag\n {...slotProps?.startIcon}\n ref={refs?.startIcon}\n flex={\"0 0 auto\"}\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: \"flex\",\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-start-icon\"\n >{startIcon}</Tag>} */}\n {startIcon}\n {/* <Tag\n {...slotProps?.inputContainer}\n ref={refs?.inputContainer}\n baseClass='input-container'\n flex={1}\n sxr={{\n width: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n flex: 1,\n minHeight: _size.height,\n \"& textarea\": {\n resize: \"none\"\n },\n \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n \"-webkit-text-fill-color\": \"text.primary\",\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n transition: \"background-color 5000s ease-in-out 0s\"\n } as any\n }}\n >\n \n </Tag> */}\n <Tag\n {...slotProps?.input}\n ref={inputMergeRef}\n baseClass='input'\n component={multiline ? 'textarea' : 'input'}\n {...multiprops}\n sxr={{\n border: 0,\n outline: 0,\n bgcolor: \"transparent\",\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: _size.fontSize,\n height: multiline ? \"auto\" : _size.height + \"px!important\",\n width: \"100%\",\n maxHeight: 200,\n }}\n value={value}\n onChange={onChange}\n onFocus={(e: any) => {\n focused ?? setFocused(true)\n onFocus && onFocus(e)\n }}\n onBlur={(e: any) => {\n focused ?? setFocused(false)\n onBlur && onBlur(e)\n }}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n name={name}\n placeholder={placeholder}\n type={type}\n readOnly={readOnly}\n autoComplete={autoComplete}\n />\n {/* {endIcon && <Tag\n {...slotProps?.endIcon}\n ref={refs?.endIcon}\n flex={\"0 0 auto\"}\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: 'flex',\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-end-icon\"\n >{endIcon}</Tag>} */}\n {endIcon}\n </Tag>\n {helperText && <Tag\n {...slotProps?.helperText}\n ref={refs?.helperText}\n baseClass=\"input-helper-text\"\n sxr={{\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: \"small\",\n lineHeight: \"text\",\n fontWeight: 'text',\n pl: .5,\n }}\n >{helperText}</Tag>}\n </Tag>\n </Tag>\n )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAuEG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AA8BA;AACA;AACA;AACA;AACH;AAKrB;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n value?: string;\n type?: TagProps<'input'>['type'];\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onChange?: (e: React.ChangeEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n multiline?: boolean;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n refs?: {\n inputRoot?: React.Ref<\"div\">;\n label?: React.Ref<\"label\">;\n rootContainer?: React.Ref<\"div\">;\n // startIcon?: React.Ref<ReactElement>;\n // endIcon?: React.Ref<ReactElement>;\n // inputContainer?: React.Ref<\"div\">;\n input?: React.Ref<'input' | 'textarea'>;\n helperText?: React.Ref<\"div\">;\n };\n\n slotProps?: {\n inputRoot?: Omit<TagProps<\"div\">, \"children\">;\n label?: Omit<LabelProps, \"children\">;\n rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n // startIcon?: Omit<TagProps<'div'>, \"children\">;\n // endIcon?: Omit<TagProps<'div'>, \"children\">;\n // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n helperText?: Omit<TagProps<\"div\">, \"children\">;\n input?: Partial<TagProps<T>>;\n }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n let [{\n startIcon,\n endIcon,\n iconPlacement,\n color,\n label,\n name,\n placeholder,\n type,\n readOnly,\n autoFocus,\n autoComplete,\n onFocus,\n onBlur,\n onChange,\n onKeyDown,\n onKeyUp,\n\n focused,\n disabled,\n variant,\n error,\n helperText,\n multiline,\n size,\n rows,\n minRows,\n maxRows,\n fullWidth,\n slotProps,\n\n ...rest\n }, theme] = useInterface<any>(\"Input\", props, {})\n\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (iconPlacement) _p.iconPlacement = iconPlacement\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (helperText) _p.helperText = helperText\n if (size) _p.size = size\n if (rows) _p.rows = rows\n if (minRows) _p.minRows = minRows\n if (maxRows) _p.maxRows = maxRows\n const p: any = useBreakpointProps(_p)\n startIcon = p.startIcon\n endIcon = p.endIcon\n iconPlacement = p.iconPlacement\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n helperText = p.helperText\n size = p.size ?? 'medium'\n rows = p.rows\n minRows = p.minRows\n maxRows = p.maxRows\n\n iconPlacement ??= multiline ? \"end\" : \"center\"\n if (!value) iconPlacement = 'center'\n\n const [_focused, setFocused] = useState(false)\n let _focus = focused || _focused\n const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\n\n useEffect(() => {\n if (autoFocus) {\n setTimeout(() => {\n inputRef.current?.focus()\n }, 100);\n }\n }, [autoFocus])\n\n let _rows = useMemo(() => {\n if (rows) return rows\n if (value && multiline) {\n let lines = (value as string).split(`\\n`).length\n if (minRows && minRows > lines) {\n return minRows\n } else if (maxRows && maxRows < lines) {\n return maxRows\n } else {\n return lines\n }\n }\n }, [value]) || 1\n\n const sizes: any = {\n small: {\n height: 38,\n gap: .5,\n fontSize: 'button',\n },\n medium: {\n height: 46,\n gap: 1,\n fontSize: \"text\"\n },\n large: {\n height: 52,\n gap: 1,\n fontSize: 'big'\n }\n }\n\n const _size = sizes[size]\n let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n borderColor = error ? \"danger.primary\" : borderColor\n let multiprops: any = {}\n if (multiline) {\n multiprops = {\n rows: _rows,\n sx: {\n resize: \"none\"\n }\n }\n }\n\n return (\n <Tag\n width={fullWidth ? \"100%\" : \"auto\"}\n {...rest}\n ref={ref}\n baseClass=\"input-wrapper\"\n sxr={{\n display: 'flex',\n flexDirection: 'column',\n gap: .5,\n }}\n >\n {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\n <Tag\n {...slotProps?.inputRoot}\n ref={refs?.inputRoot}\n baseClass={'input-root'}\n sxr={{\n width: \"100%\",\n overflow: \"hidden\",\n }}\n >\n <Tag\n {...slotProps?.rootContainer}\n ref={refs?.rootContainer}\n baseClass='input-root-container'\n sxr={{\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n flexWrap: \"nowrap\",\n transitionProperty: \"border, box-shadow, background\",\n bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n border: variant === \"text\" ? 0 : \"1px solid\",\n borderColor: borderColor,\n borderRadius: 1,\n px: 1,\n // py: .5,\n ..._size,\n height: multiline ? \"auto\" : _size.height,\n minHeight: _size.height,\n \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n \"-webkit-text-fill-color\": \"text.primary\",\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n transition: \"background-color 5000s ease-in-out 0s\"\n } as any,\n \"& textarea\": {\n resize: \"none\"\n },\n\n ...(!!startIcon && {\n \"& :first-child\": {\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: \"flex\",\n color: error ? \"danger.primary\" : \"text.secondary\",\n flex: \"0 0 auto\",\n },\n }),\n\n ...(!!endIcon && {\n \"& :last-child\": {\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: 'flex',\n color: error ? \"danger.primary\" : \"text.secondary\",\n flex: \"0 0 auto\",\n },\n })\n\n }}\n disabled={disabled || false}\n >\n {/* {startIcon && <Tag\n {...slotProps?.startIcon}\n ref={refs?.startIcon}\n flex={\"0 0 auto\"}\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: \"flex\",\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-start-icon\"\n >{startIcon}</Tag>} */}\n {startIcon}\n {/* <Tag\n {...slotProps?.inputContainer}\n ref={refs?.inputContainer}\n baseClass='input-container'\n flex={1}\n sxr={{\n width: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n flex: 1,\n minHeight: _size.height,\n \"& textarea\": {\n resize: \"none\"\n },\n \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n \"-webkit-text-fill-color\": \"text.primary\",\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n transition: \"background-color 5000s ease-in-out 0s\"\n } as any\n }}\n >\n \n </Tag> */}\n <Tag\n {...slotProps?.input}\n ref={inputMergeRef}\n baseClass='input'\n component={multiline ? 'textarea' : 'input'}\n {...multiprops}\n sxr={{\n border: 0,\n outline: 0,\n bgcolor: \"transparent\",\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: _size.fontSize,\n height: multiline ? \"auto\" : _size.height + \"px!important\",\n width: \"100%\",\n maxHeight: 200,\n }}\n value={value}\n onChange={onChange}\n onFocus={(e: any) => {\n focused ?? setFocused(true)\n onFocus && onFocus(e)\n }}\n onBlur={(e: any) => {\n focused ?? setFocused(false)\n onBlur && onBlur(e)\n }}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n name={name}\n placeholder={placeholder}\n type={type}\n readOnly={readOnly}\n autoComplete={autoComplete}\n />\n {/* {endIcon && <Tag\n {...slotProps?.endIcon}\n ref={refs?.endIcon}\n flex={\"0 0 auto\"}\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: 'flex',\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-end-icon\"\n >{endIcon}</Tag>} */}\n {endIcon}\n </Tag>\n {helperText && <Tag\n {...slotProps?.helperText}\n ref={refs?.helperText}\n baseClass=\"input-helper-text\"\n sxr={{\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: \"small\",\n lineHeight: \"text\",\n fontWeight: 'text',\n pl: .5,\n }}\n >{helperText}</Tag>}\n </Tag>\n </Tag>\n )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAiDG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AA8BA;AACA;AACA;AACA;AACH;AAKrB;;"}
|