@xanui/ui 1.1.17 → 1.1.19
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/Accordion/index.js +18 -3
- package/Accordion/index.js.map +1 -1
- package/Accordion/index.mjs +15 -2
- package/Accordion/index.mjs.map +1 -1
- package/Alert/index.js +24 -5
- package/Alert/index.js.map +1 -1
- package/Alert/index.mjs +19 -2
- package/Alert/index.mjs.map +1 -1
- package/Avatar/index.js +13 -2
- package/Avatar/index.js.map +1 -1
- package/Avatar/index.mjs +11 -2
- package/Avatar/index.mjs.map +1 -1
- package/Badge/index.js +12 -2
- package/Badge/index.js.map +1 -1
- package/Badge/index.mjs +10 -2
- package/Badge/index.mjs.map +1 -1
- package/Box/index.js +12 -2
- package/Box/index.js.map +1 -1
- package/Box/index.mjs +10 -2
- package/Box/index.mjs.map +1 -1
- package/Button/index.js +17 -4
- package/Button/index.js.map +1 -1
- package/Button/index.mjs +13 -2
- package/Button/index.mjs.map +1 -1
- package/ButtonGroup/index.js +12 -2
- package/ButtonGroup/index.js.map +1 -1
- package/ButtonGroup/index.mjs +10 -2
- package/ButtonGroup/index.mjs.map +1 -1
- package/Calendar/index.js +35 -16
- package/Calendar/index.js.map +1 -1
- package/Calendar/index.mjs +19 -2
- package/Calendar/index.mjs.map +1 -1
- package/CalendarInput/index.js +23 -4
- package/CalendarInput/index.js.map +1 -1
- package/CalendarInput/index.mjs +19 -2
- package/CalendarInput/index.mjs.map +1 -1
- package/Checkbox/index.js +16 -2
- package/Checkbox/index.js.map +1 -1
- package/Checkbox/index.mjs +14 -2
- package/Checkbox/index.mjs.map +1 -1
- package/Chip/index.js +14 -3
- package/Chip/index.js.map +1 -1
- package/Chip/index.mjs +11 -2
- package/Chip/index.mjs.map +1 -1
- package/CircleProgress/index.js +13 -2
- package/CircleProgress/index.js.map +1 -1
- package/CircleProgress/index.mjs +11 -2
- package/CircleProgress/index.mjs.map +1 -1
- package/ClickOutside/index.js +13 -2
- package/ClickOutside/index.js.map +1 -1
- package/ClickOutside/index.mjs +11 -2
- package/ClickOutside/index.mjs.map +1 -1
- package/Collaps/index.js +12 -2
- package/Collaps/index.js.map +1 -1
- package/Collaps/index.mjs +10 -2
- package/Collaps/index.mjs.map +1 -1
- package/Container/index.js +12 -2
- package/Container/index.js.map +1 -1
- package/Container/index.mjs +10 -2
- package/Container/index.mjs.map +1 -1
- package/Datatable/FilterBox.js +22 -7
- package/Datatable/FilterBox.js.map +1 -1
- package/Datatable/FilterBox.mjs +15 -2
- package/Datatable/FilterBox.mjs.map +1 -1
- package/Datatable/Row.js +25 -7
- package/Datatable/Row.js.map +1 -1
- package/Datatable/Row.mjs +18 -2
- package/Datatable/Row.mjs.map +1 -1
- package/Datatable/SelectedBox.js +15 -4
- package/Datatable/SelectedBox.js.map +1 -1
- package/Datatable/SelectedBox.mjs +11 -2
- package/Datatable/SelectedBox.mjs.map +1 -1
- package/Datatable/Table.js +16 -4
- package/Datatable/Table.js.map +1 -1
- package/Datatable/Table.mjs +12 -2
- package/Datatable/Table.mjs.map +1 -1
- package/Datatable/TableHead.js +22 -5
- package/Datatable/TableHead.js.map +1 -1
- package/Datatable/TableHead.mjs +17 -2
- package/Datatable/TableHead.mjs.map +1 -1
- package/Datatable/index.js +21 -4
- package/Datatable/index.js.map +1 -1
- package/Datatable/index.mjs +17 -2
- package/Datatable/index.mjs.map +1 -1
- package/Datatable/types.d.ts +12 -2
- package/Divider/index.js +12 -2
- package/Divider/index.js.map +1 -1
- package/Divider/index.mjs +10 -2
- package/Divider/index.mjs.map +1 -1
- package/Drawer/index.js +16 -4
- package/Drawer/index.js.map +1 -1
- package/Drawer/index.mjs +12 -2
- package/Drawer/index.mjs.map +1 -1
- package/Form/index.js +13 -2
- package/Form/index.js.map +1 -1
- package/Form/index.mjs +11 -2
- package/Form/index.mjs.map +1 -1
- package/GridContainer/index.js +12 -2
- package/GridContainer/index.js.map +1 -1
- package/GridContainer/index.mjs +10 -2
- package/GridContainer/index.mjs.map +1 -1
- package/GridItem/index.js +12 -2
- package/GridItem/index.js.map +1 -1
- package/GridItem/index.mjs +10 -2
- package/GridItem/index.mjs.map +1 -1
- package/IconButton/index.js +15 -3
- package/IconButton/index.js.map +1 -1
- package/IconButton/index.mjs +12 -2
- package/IconButton/index.mjs.map +1 -1
- package/Image/index.js +13 -2
- package/Image/index.js.map +1 -1
- package/Image/index.mjs +11 -2
- package/Image/index.mjs.map +1 -1
- package/Input/index.js +15 -3
- package/Input/index.js.map +1 -1
- package/Input/index.mjs +12 -2
- package/Input/index.mjs.map +1 -1
- package/Label/index.js +12 -2
- package/Label/index.js.map +1 -1
- package/Label/index.mjs +10 -2
- package/Label/index.mjs.map +1 -1
- package/Layer/index.js +17 -4
- package/Layer/index.js.map +1 -1
- package/Layer/index.mjs +13 -2
- package/Layer/index.mjs.map +1 -1
- package/LineProgress/index.js +13 -2
- package/LineProgress/index.js.map +1 -1
- package/LineProgress/index.mjs +11 -2
- package/LineProgress/index.mjs.map +1 -1
- package/List/index.js +12 -2
- package/List/index.js.map +1 -1
- package/List/index.mjs +10 -2
- package/List/index.mjs.map +1 -1
- package/ListItem/index.js +14 -3
- package/ListItem/index.js.map +1 -1
- package/ListItem/index.mjs +11 -2
- package/ListItem/index.mjs.map +1 -1
- package/LoadingBox/index.js +14 -3
- package/LoadingBox/index.js.map +1 -1
- package/LoadingBox/index.mjs +11 -2
- package/LoadingBox/index.mjs.map +1 -1
- package/Menu/index.js +16 -3
- package/Menu/index.js.map +1 -1
- package/Menu/index.mjs +13 -2
- package/Menu/index.mjs.map +1 -1
- package/Modal/index.js +15 -3
- package/Modal/index.js.map +1 -1
- package/Modal/index.mjs +12 -2
- package/Modal/index.mjs.map +1 -1
- package/NoSSR/index.js +10 -2
- package/NoSSR/index.js.map +1 -1
- package/NoSSR/index.mjs +8 -2
- package/NoSSR/index.mjs.map +1 -1
- package/Option/index.js +13 -3
- package/Option/index.js.map +1 -1
- package/Option/index.mjs +10 -2
- package/Option/index.mjs.map +1 -1
- package/Paper/index.js +12 -2
- package/Paper/index.js.map +1 -1
- package/Paper/index.mjs +10 -2
- package/Paper/index.mjs.map +1 -1
- package/Portal/index.js +13 -2
- package/Portal/index.js.map +1 -1
- package/Portal/index.mjs +11 -2
- package/Portal/index.mjs.map +1 -1
- package/Radio/index.js +15 -3
- package/Radio/index.js.map +1 -1
- package/Radio/index.mjs +12 -2
- package/Radio/index.mjs.map +1 -1
- package/Scrollbar/index.js +13 -2
- package/Scrollbar/index.js.map +1 -1
- package/Scrollbar/index.mjs +11 -2
- package/Scrollbar/index.mjs.map +1 -1
- package/Select/index.js +22 -5
- package/Select/index.js.map +1 -1
- package/Select/index.mjs +17 -2
- package/Select/index.mjs.map +1 -1
- package/Stack/index.js +12 -2
- package/Stack/index.js.map +1 -1
- package/Stack/index.mjs +10 -2
- package/Stack/index.mjs.map +1 -1
- package/Switch/index.js +13 -2
- package/Switch/index.js.map +1 -1
- package/Switch/index.mjs +11 -2
- package/Switch/index.mjs.map +1 -1
- package/Tab/index.js +15 -3
- package/Tab/index.js.map +1 -1
- package/Tab/index.mjs +12 -2
- package/Tab/index.mjs.map +1 -1
- package/Table/index.js +14 -3
- package/Table/index.js.map +1 -1
- package/Table/index.mjs +11 -2
- package/Table/index.mjs.map +1 -1
- package/TableBody/index.js +12 -2
- package/TableBody/index.js.map +1 -1
- package/TableBody/index.mjs +10 -2
- package/TableBody/index.mjs.map +1 -1
- package/TableCell/index.js +12 -2
- package/TableCell/index.js.map +1 -1
- package/TableCell/index.mjs +10 -2
- package/TableCell/index.mjs.map +1 -1
- package/TableFooter/index.js +12 -2
- package/TableFooter/index.js.map +1 -1
- package/TableFooter/index.mjs +10 -2
- package/TableFooter/index.mjs.map +1 -1
- package/TableHead/index.js +12 -2
- package/TableHead/index.js.map +1 -1
- package/TableHead/index.mjs +10 -2
- package/TableHead/index.mjs.map +1 -1
- package/TablePagination/index.js +23 -6
- package/TablePagination/index.js.map +1 -1
- package/TablePagination/index.mjs +17 -2
- package/TablePagination/index.mjs.map +1 -1
- package/TableRow/index.js +12 -2
- package/TableRow/index.js.map +1 -1
- package/TableRow/index.mjs +10 -2
- package/TableRow/index.mjs.map +1 -1
- package/Tabs/index.js +13 -2
- package/Tabs/index.js.map +1 -1
- package/Tabs/index.mjs +11 -2
- package/Tabs/index.mjs.map +1 -1
- package/Text/index.js +12 -2
- package/Text/index.js.map +1 -1
- package/Text/index.mjs +10 -2
- package/Text/index.mjs.map +1 -1
- package/Toast/index.js +18 -4
- package/Toast/index.js.map +1 -1
- package/Toast/index.mjs +14 -2
- package/Toast/index.mjs.map +1 -1
- package/Tooltip/index.js +14 -3
- package/Tooltip/index.js.map +1 -1
- package/Tooltip/index.mjs +11 -2
- package/Tooltip/index.mjs.map +1 -1
- package/ViewBox/index.js +14 -3
- package/ViewBox/index.js.map +1 -1
- package/ViewBox/index.mjs +11 -2
- package/ViewBox/index.mjs.map +1 -1
- package/index.js +116 -1
- package/index.js.map +1 -1
- package/index.mjs +56 -1
- package/index.mjs.map +1 -1
- package/package.json +3 -12
- package/useAlert/index.js +19 -5
- package/useAlert/index.js.map +1 -1
- package/useAlert/index.mjs +14 -2
- package/useAlert/index.mjs.map +1 -1
- package/useBlurCss/index.js +10 -2
- package/useBlurCss/index.js.map +1 -1
- package/useBlurCss/index.mjs +8 -2
- package/useBlurCss/index.mjs.map +1 -1
- package/useCorner/index.js +7 -2
- package/useCorner/index.js.map +1 -1
- package/useCorner/index.mjs +4 -1
- package/useCorner/index.mjs.map +1 -1
- package/useLayer/index.js +14 -3
- package/useLayer/index.js.map +1 -1
- package/useLayer/index.mjs +11 -2
- package/useLayer/index.mjs.map +1 -1
- package/useModal/index.js +14 -3
- package/useModal/index.js.map +1 -1
- package/useModal/index.mjs +11 -2
- package/useModal/index.mjs.map +1 -1
package/Form/index.js
CHANGED
|
@@ -1,4 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var tslib = require('tslib');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var core = require('@xanui/core');
|
|
8
|
+
|
|
9
|
+
const Form = React.forwardRef((_a, ref) => {
|
|
2
10
|
var { children } = _a, rest = tslib.__rest(_a, ["children"]);
|
|
3
11
|
let formRef = ref || React.useRef(null);
|
|
4
12
|
const cloneAllChildren = (childs) => {
|
|
@@ -31,4 +39,7 @@
|
|
|
31
39
|
maxWidth: 400,
|
|
32
40
|
radius: 1,
|
|
33
41
|
}, baseClass: 'form', ref: formRef, children: cloneAllChildren(children) })));
|
|
34
|
-
});
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
module.exports = Form;
|
|
45
|
+
//# sourceMappingURL=index.js.map
|
package/Form/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Form/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useRef } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type FormProps<T extends TagComponentType = \"form\"> = TagProps<T> & {\n\n}\n\n\nconst Form = React.forwardRef(<T extends TagComponentType = \"form\">({ children, ...rest }: FormProps<T>, ref: React.Ref<any>) => {\n let formRef: any = ref || useRef(null)\n\n const cloneAllChildren: any = (childs: any) => {\n return React.Children.map(childs, (child: any) => {\n let c: any = child;\n if (React.isValidElement(child) && c.props.name) {\n const form = formRef.current\n const formData = new FormData(form);\n return React.cloneElement(child, {\n onChange: () => {\n console.log(formData.get(c.props.name));\n },\n value: formData.get(c.props.name),\n children: cloneAllChildren(c.props.children),\n } as any);\n }\n return child;\n });\n };\n\n return (\n <Tag\n component=\"form\"\n {...rest}\n onSubmit={(e) => {\n e.preventDefault()\n const form = formRef.current\n\n const formData = new FormData(form);\n\n formData.forEach((value, key) => {\n console.log(key + \": \" + value);\n });\n }}\n sxr={{\n bgcolor: \"default\",\n p: 2,\n maxWidth: 400,\n radius: 1,\n }}\n baseClass='form'\n ref={formRef}\n >\n {cloneAllChildren(children)}\n </Tag>\n )\n})\n\nexport default Form\n\n"],"names":[
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Form/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useRef } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type FormProps<T extends TagComponentType = \"form\"> = TagProps<T> & {\n\n}\n\n\nconst Form = React.forwardRef(<T extends TagComponentType = \"form\">({ children, ...rest }: FormProps<T>, ref: React.Ref<any>) => {\n let formRef: any = ref || useRef(null)\n\n const cloneAllChildren: any = (childs: any) => {\n return React.Children.map(childs, (child: any) => {\n let c: any = child;\n if (React.isValidElement(child) && c.props.name) {\n const form = formRef.current\n const formData = new FormData(form);\n return React.cloneElement(child, {\n onChange: () => {\n console.log(formData.get(c.props.name));\n },\n value: formData.get(c.props.name),\n children: cloneAllChildren(c.props.children),\n } as any);\n }\n return child;\n });\n };\n\n return (\n <Tag\n component=\"form\"\n {...rest}\n onSubmit={(e) => {\n e.preventDefault()\n const form = formRef.current\n\n const formData = new FormData(form);\n\n formData.forEach((value, key) => {\n console.log(key + \": \" + value);\n });\n }}\n sxr={{\n bgcolor: \"default\",\n p: 2,\n maxWidth: 400,\n radius: 1,\n }}\n baseClass='form'\n ref={formRef}\n >\n {cloneAllChildren(children)}\n </Tag>\n )\n})\n\nexport default Form\n\n"],"names":[],"mappings":";;;;;;;;AASA;AAAoE;;AAGhE;;;AAGQ;AACI;AACA;AACA;;AAEQ;;;;AAIA;;AAEZ;AACJ;AACJ;AAEA;;AAMY;AAEA;;;AAIA;;AAGA;AACA;AACA;AACA;AACH;AAOb;;"}
|
package/Form/index.mjs
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { __rest } from 'tslib';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
import React, { useRef } from 'react';
|
|
5
|
+
import { Tag } from '@xanui/core';
|
|
6
|
+
|
|
7
|
+
const Form = React.forwardRef((_a, ref) => {
|
|
2
8
|
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
3
9
|
let formRef = ref || useRef(null);
|
|
4
10
|
const cloneAllChildren = (childs) => {
|
|
@@ -31,4 +37,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{use
|
|
|
31
37
|
maxWidth: 400,
|
|
32
38
|
radius: 1,
|
|
33
39
|
}, baseClass: 'form', ref: formRef, children: cloneAllChildren(children) })));
|
|
34
|
-
});
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
export { Form as default };
|
|
43
|
+
//# sourceMappingURL=index.mjs.map
|
package/Form/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Form/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useRef } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type FormProps<T extends TagComponentType = \"form\"> = TagProps<T> & {\n\n}\n\n\nconst Form = React.forwardRef(<T extends TagComponentType = \"form\">({ children, ...rest }: FormProps<T>, ref: React.Ref<any>) => {\n let formRef: any = ref || useRef(null)\n\n const cloneAllChildren: any = (childs: any) => {\n return React.Children.map(childs, (child: any) => {\n let c: any = child;\n if (React.isValidElement(child) && c.props.name) {\n const form = formRef.current\n const formData = new FormData(form);\n return React.cloneElement(child, {\n onChange: () => {\n console.log(formData.get(c.props.name));\n },\n value: formData.get(c.props.name),\n children: cloneAllChildren(c.props.children),\n } as any);\n }\n return child;\n });\n };\n\n return (\n <Tag\n component=\"form\"\n {...rest}\n onSubmit={(e) => {\n e.preventDefault()\n const form = formRef.current\n\n const formData = new FormData(form);\n\n formData.forEach((value, key) => {\n console.log(key + \": \" + value);\n });\n }}\n sxr={{\n bgcolor: \"default\",\n p: 2,\n maxWidth: 400,\n radius: 1,\n }}\n baseClass='form'\n ref={formRef}\n >\n {cloneAllChildren(children)}\n </Tag>\n )\n})\n\nexport default Form\n\n"],"names":[
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Form/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useRef } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type FormProps<T extends TagComponentType = \"form\"> = TagProps<T> & {\n\n}\n\n\nconst Form = React.forwardRef(<T extends TagComponentType = \"form\">({ children, ...rest }: FormProps<T>, ref: React.Ref<any>) => {\n let formRef: any = ref || useRef(null)\n\n const cloneAllChildren: any = (childs: any) => {\n return React.Children.map(childs, (child: any) => {\n let c: any = child;\n if (React.isValidElement(child) && c.props.name) {\n const form = formRef.current\n const formData = new FormData(form);\n return React.cloneElement(child, {\n onChange: () => {\n console.log(formData.get(c.props.name));\n },\n value: formData.get(c.props.name),\n children: cloneAllChildren(c.props.children),\n } as any);\n }\n return child;\n });\n };\n\n return (\n <Tag\n component=\"form\"\n {...rest}\n onSubmit={(e) => {\n e.preventDefault()\n const form = formRef.current\n\n const formData = new FormData(form);\n\n formData.forEach((value, key) => {\n console.log(key + \": \" + value);\n });\n }}\n sxr={{\n bgcolor: \"default\",\n p: 2,\n maxWidth: 400,\n radius: 1,\n }}\n baseClass='form'\n ref={formRef}\n >\n {cloneAllChildren(children)}\n </Tag>\n )\n})\n\nexport default Form\n\n"],"names":[],"mappings":";;;;;;AASA;AAAoE;;AAGhE;;;AAGQ;AACI;AACA;AACA;;AAEQ;;;;AAIA;;AAEZ;AACJ;AACJ;AAEA;;AAMY;AAEA;;;AAIA;;AAGA;AACA;AACA;AACA;AACH;AAOb;;"}
|
package/GridContainer/index.js
CHANGED
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
'use strict';
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var core = require('@xanui/core');
|
|
7
|
+
|
|
8
|
+
const GridContainer = React.forwardRef((_a, ref) => {
|
|
2
9
|
var { children } = _a, rest = tslib.__rest(_a, ["children"]);
|
|
3
10
|
return (jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { sxr: {
|
|
4
11
|
display: "flex",
|
|
@@ -6,4 +13,7 @@
|
|
|
6
13
|
flexWrap: 'wrap',
|
|
7
14
|
width: '100%',
|
|
8
15
|
}, baseClass: 'grid-container', ref: ref, children: children })));
|
|
9
|
-
});
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
module.exports = GridContainer;
|
|
19
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\n return (\n <Tag\n {...rest}\n sxr={{\n display: \"flex\",\n flexDirection: 'row',\n flexWrap: 'wrap',\n width: '100%',\n }}\n baseClass='grid-container'\n ref={ref}\n >\n {children}\n </Tag>\n )\n})\n\nexport default GridContainer"],"names":["__rest","_jsx","Tag"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\n return (\n <Tag\n {...rest}\n sxr={{\n display: \"flex\",\n flexDirection: 'row',\n flexWrap: 'wrap',\n width: '100%',\n }}\n baseClass='grid-container'\n ref={ref}\n >\n {children}\n </Tag>\n )\n})\n\nexport default GridContainer"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAKA,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA4C,EAAE,GAAoB,KAAI;AAAtE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAkC,EAA7B,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AAC3F,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,KAAK,EAAE,MAAM;SAChB,EACD,SAAS,EAAC,gBAAgB,EAC1B,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
|
package/GridContainer/index.mjs
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import {__rest
|
|
1
|
+
import { __rest } from 'tslib';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { Tag } from '@xanui/core';
|
|
5
|
+
|
|
6
|
+
const GridContainer = React.forwardRef((_a, ref) => {
|
|
2
7
|
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
3
8
|
return (jsx(Tag, Object.assign({}, rest, { sxr: {
|
|
4
9
|
display: "flex",
|
|
@@ -6,4 +11,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from
|
|
|
6
11
|
flexWrap: 'wrap',
|
|
7
12
|
width: '100%',
|
|
8
13
|
}, baseClass: 'grid-container', ref: ref, children: children })));
|
|
9
|
-
});
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
export { GridContainer as default };
|
|
17
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\n return (\n <Tag\n {...rest}\n sxr={{\n display: \"flex\",\n flexDirection: 'row',\n flexWrap: 'wrap',\n width: '100%',\n }}\n baseClass='grid-container'\n ref={ref}\n >\n {children}\n </Tag>\n )\n})\n\nexport default GridContainer"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\n return (\n <Tag\n {...rest}\n sxr={{\n display: \"flex\",\n flexDirection: 'row',\n flexWrap: 'wrap',\n width: '100%',\n }}\n baseClass='grid-container'\n ref={ref}\n >\n {children}\n </Tag>\n )\n})\n\nexport default GridContainer"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA4C,EAAE,GAAoB,KAAI;AAAtE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAkC,EAA7B,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AAC3F,IAAA,QACIA,GAAA,CAAC,GAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,KAAK,EAAE,MAAM;SAChB,EACD,SAAS,EAAC,gBAAgB,EAC1B,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
|
package/GridItem/index.js
CHANGED
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
'use strict';
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var core = require('@xanui/core');
|
|
7
|
+
|
|
8
|
+
const GridItem = React.forwardRef((_a, ref) => {
|
|
2
9
|
var { children, xs, sm, md, lg, xl } = _a, rest = tslib.__rest(_a, ["children", "xs", "sm", "md", "lg", "xl"]);
|
|
3
10
|
let w = {};
|
|
4
11
|
xs && (w.xs = (100 / 12 * xs) + "%");
|
|
@@ -7,4 +14,7 @@
|
|
|
7
14
|
lg && (w.lg = (100 / 12 * lg) + "%");
|
|
8
15
|
xl && (w.xl = (100 / 12 * xl) + "%");
|
|
9
16
|
return (jsxRuntime.jsx(core.Tag, Object.assign({ ref: ref }, rest, { maxWidth: w, flexBasis: w, flexGrow: 0, baseClass: "grid-item", children: children })));
|
|
10
|
-
});
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
module.exports = GridItem;
|
|
20
|
+
//# sourceMappingURL=index.js.map
|
package/GridItem/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n xs?: number;\n sm?: number;\n md?: number;\n lg?: number;\n xl?: number;\n}\n\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\n\n let w: any = {}\n\n xs && (w.xs = (100 / 12 * xs) + \"%\")\n sm && (w.sm = (100 / 12 * sm) + \"%\")\n md && (w.md = (100 / 12 * md) + \"%\")\n lg && (w.lg = (100 / 12 * lg) + \"%\")\n xl && (w.xl = (100 / 12 * xl) + \"%\")\n\n return (\n <Tag\n ref={ref}\n {...rest}\n maxWidth={w}\n flexBasis={w}\n flexGrow={0}\n baseClass=\"grid-item\"\n >\n {children}\n </Tag>\n )\n})\n\nexport default GridItem"],"names":["__rest","_jsx","Tag"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n xs?: number;\n sm?: number;\n md?: number;\n lg?: number;\n xl?: number;\n}\n\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\n\n let w: any = {}\n\n xs && (w.xs = (100 / 12 * xs) + \"%\")\n sm && (w.sm = (100 / 12 * sm) + \"%\")\n md && (w.md = (100 / 12 * md) + \"%\")\n lg && (w.lg = (100 / 12 * lg) + \"%\")\n xl && (w.xl = (100 / 12 * xl) + \"%\")\n\n return (\n <Tag\n ref={ref}\n {...rest}\n maxWidth={w}\n flexBasis={w}\n flexGrow={0}\n baseClass=\"grid-item\"\n >\n {children}\n </Tag>\n )\n})\n\nexport default GridItem"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAYA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA2D,EAAE,GAAoB,KAAI;AAArF,IAAA,IAAA,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAvC,0CAAyC,CAAF;IAE1G,IAAI,CAAC,GAAQ,EAAE;AAEf,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AAEpC,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAI,EAAA,EACR,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,WAAW,EAAA,QAAA,EAEpB,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
|
package/GridItem/index.mjs
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import {__rest
|
|
1
|
+
import { __rest } from 'tslib';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { Tag } from '@xanui/core';
|
|
5
|
+
|
|
6
|
+
const GridItem = React.forwardRef((_a, ref) => {
|
|
2
7
|
var { children, xs, sm, md, lg, xl } = _a, rest = __rest(_a, ["children", "xs", "sm", "md", "lg", "xl"]);
|
|
3
8
|
let w = {};
|
|
4
9
|
xs && (w.xs = (100 / 12 * xs) + "%");
|
|
@@ -7,4 +12,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from
|
|
|
7
12
|
lg && (w.lg = (100 / 12 * lg) + "%");
|
|
8
13
|
xl && (w.xl = (100 / 12 * xl) + "%");
|
|
9
14
|
return (jsx(Tag, Object.assign({ ref: ref }, rest, { maxWidth: w, flexBasis: w, flexGrow: 0, baseClass: "grid-item", children: children })));
|
|
10
|
-
});
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
export { GridItem as default };
|
|
18
|
+
//# sourceMappingURL=index.mjs.map
|
package/GridItem/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n xs?: number;\n sm?: number;\n md?: number;\n lg?: number;\n xl?: number;\n}\n\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\n\n let w: any = {}\n\n xs && (w.xs = (100 / 12 * xs) + \"%\")\n sm && (w.sm = (100 / 12 * sm) + \"%\")\n md && (w.md = (100 / 12 * md) + \"%\")\n lg && (w.lg = (100 / 12 * lg) + \"%\")\n xl && (w.xl = (100 / 12 * xl) + \"%\")\n\n return (\n <Tag\n ref={ref}\n {...rest}\n maxWidth={w}\n flexBasis={w}\n flexGrow={0}\n baseClass=\"grid-item\"\n >\n {children}\n </Tag>\n )\n})\n\nexport default GridItem"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n xs?: number;\n sm?: number;\n md?: number;\n lg?: number;\n xl?: number;\n}\n\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\n\n let w: any = {}\n\n xs && (w.xs = (100 / 12 * xs) + \"%\")\n sm && (w.sm = (100 / 12 * sm) + \"%\")\n md && (w.md = (100 / 12 * md) + \"%\")\n lg && (w.lg = (100 / 12 * lg) + \"%\")\n xl && (w.xl = (100 / 12 * xl) + \"%\")\n\n return (\n <Tag\n ref={ref}\n {...rest}\n maxWidth={w}\n flexBasis={w}\n flexGrow={0}\n baseClass=\"grid-item\"\n >\n {children}\n </Tag>\n )\n})\n\nexport default GridItem"],"names":["_jsx"],"mappings":";;;;;AAYA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA2D,EAAE,GAAoB,KAAI;AAArF,IAAA,IAAA,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAvC,0CAAyC,CAAF;IAE1G,IAAI,CAAC,GAAQ,EAAE;AAEf,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AAEpC,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAI,EAAA,EACR,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,WAAW,EAAA,QAAA,EAEpB,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
|
package/IconButton/index.js
CHANGED
|
@@ -1,4 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var tslib = require('tslib');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var core = require('@xanui/core');
|
|
8
|
+
var index = require('../useCorner/index.js');
|
|
9
|
+
|
|
10
|
+
const IconButton = React.forwardRef((_a, ref) => {
|
|
2
11
|
var _b, _c;
|
|
3
12
|
var { children } = _a, rest = tslib.__rest(_a, ["children"]);
|
|
4
13
|
rest.sx = rest.sx || {};
|
|
@@ -18,7 +27,7 @@
|
|
|
18
27
|
variant = p.variant;
|
|
19
28
|
corner = (_c = p.corner) !== null && _c !== void 0 ? _c : "circle";
|
|
20
29
|
let template = core.useColorTemplate(color || "brand", variant || "fill");
|
|
21
|
-
const cornerCss = index
|
|
30
|
+
const cornerCss = index(corner);
|
|
22
31
|
if (size === 'small') {
|
|
23
32
|
size = 28;
|
|
24
33
|
}
|
|
@@ -50,4 +59,7 @@
|
|
|
50
59
|
verticalAlign: "middle",
|
|
51
60
|
}
|
|
52
61
|
}, hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), children: children })));
|
|
53
|
-
});
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
module.exports = IconButton;
|
|
65
|
+
//# sourceMappingURL=index.js.map
|
package/IconButton/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n rest.sx = (rest as any).sx || {};\n let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n const _p: any = {}\n if (size) _p.size = size\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n const p: any = useBreakpointProps(_p)\n\n size = p.size ?? \"medium\"\n color = p.color\n variant = p.variant\n corner = p.corner ?? \"circle\"\n\n let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n const cornerCss = useCorner(corner)\n\n if (size === 'small') {\n size = 28\n } else if (size === 'medium') {\n size = 34\n } else if (size === 'large') {\n size = 52\n }\n\n\n return (\n <Tag\n component='button'\n ref={ref}\n {...cornerCss}\n {..._props}\n {...template.primary}\n baseClass='icon-button'\n sxr={{\n border: 0,\n radius: size,\n height: size,\n width: size,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n display: \"inline-flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"center\",\n bgcolor: \"transparent\",\n fontSize: Math.round((size / 3) * 2),\n \"& svg\": {\n fontSize: \"1em\",\n width: \"1em\",\n height: \"1em\",\n display: \"block\",\n pointerEvents: \"none\",\n verticalAlign: \"middle\",\n }\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n >\n {children}\n </Tag>\n )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":[
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n rest.sx = (rest as any).sx || {};\n let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n const _p: any = {}\n if (size) _p.size = size\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n const p: any = useBreakpointProps(_p)\n\n size = p.size ?? \"medium\"\n color = p.color\n variant = p.variant\n corner = p.corner ?? \"circle\"\n\n let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n const cornerCss = useCorner(corner)\n\n if (size === 'small') {\n size = 28\n } else if (size === 'medium') {\n size = 34\n } else if (size === 'large') {\n size = 52\n }\n\n\n return (\n <Tag\n component='button'\n ref={ref}\n {...cornerCss}\n {..._props}\n {...template.primary}\n baseClass='icon-button'\n sxr={{\n border: 0,\n radius: size,\n height: size,\n width: size,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n display: \"inline-flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"center\",\n bgcolor: \"transparent\",\n fontSize: Math.round((size / 3) * 2),\n \"& svg\": {\n fontSize: \"1em\",\n width: \"1em\",\n height: \"1em\",\n display: \"block\",\n pointerEvents: \"none\",\n verticalAlign: \"middle\",\n }\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n >\n {children}\n </Tag>\n )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":[],"mappings":";;;;;;;;;AAaA;;AAA4E;;;;AAKxE;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAEO;;;AAEA;;;;AAcK;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;AACH;;AAUjB;;"}
|
package/IconButton/index.mjs
CHANGED
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { __rest } from 'tslib';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/core';
|
|
6
|
+
import useCorner from '../useCorner/index.mjs';
|
|
7
|
+
|
|
8
|
+
const IconButton = React.forwardRef((_a, ref) => {
|
|
2
9
|
var _b, _c;
|
|
3
10
|
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
4
11
|
rest.sx = rest.sx || {};
|
|
@@ -50,4 +57,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from
|
|
|
50
57
|
verticalAlign: "middle",
|
|
51
58
|
}
|
|
52
59
|
}, hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), children: children })));
|
|
53
|
-
});
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
export { IconButton as default };
|
|
63
|
+
//# sourceMappingURL=index.mjs.map
|
package/IconButton/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n rest.sx = (rest as any).sx || {};\n let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n const _p: any = {}\n if (size) _p.size = size\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n const p: any = useBreakpointProps(_p)\n\n size = p.size ?? \"medium\"\n color = p.color\n variant = p.variant\n corner = p.corner ?? \"circle\"\n\n let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n const cornerCss = useCorner(corner)\n\n if (size === 'small') {\n size = 28\n } else if (size === 'medium') {\n size = 34\n } else if (size === 'large') {\n size = 52\n }\n\n\n return (\n <Tag\n component='button'\n ref={ref}\n {...cornerCss}\n {..._props}\n {...template.primary}\n baseClass='icon-button'\n sxr={{\n border: 0,\n radius: size,\n height: size,\n width: size,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n display: \"inline-flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"center\",\n bgcolor: \"transparent\",\n fontSize: Math.round((size / 3) * 2),\n \"& svg\": {\n fontSize: \"1em\",\n width: \"1em\",\n height: \"1em\",\n display: \"block\",\n pointerEvents: \"none\",\n verticalAlign: \"middle\",\n }\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n >\n {children}\n </Tag>\n )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":[
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n rest.sx = (rest as any).sx || {};\n let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n const _p: any = {}\n if (size) _p.size = size\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n const p: any = useBreakpointProps(_p)\n\n size = p.size ?? \"medium\"\n color = p.color\n variant = p.variant\n corner = p.corner ?? \"circle\"\n\n let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n const cornerCss = useCorner(corner)\n\n if (size === 'small') {\n size = 28\n } else if (size === 'medium') {\n size = 34\n } else if (size === 'large') {\n size = 52\n }\n\n\n return (\n <Tag\n component='button'\n ref={ref}\n {...cornerCss}\n {..._props}\n {...template.primary}\n baseClass='icon-button'\n sxr={{\n border: 0,\n radius: size,\n height: size,\n width: size,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n display: \"inline-flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"center\",\n bgcolor: \"transparent\",\n fontSize: Math.round((size / 3) * 2),\n \"& svg\": {\n fontSize: \"1em\",\n width: \"1em\",\n height: \"1em\",\n display: \"block\",\n pointerEvents: \"none\",\n verticalAlign: \"middle\",\n }\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n >\n {children}\n </Tag>\n )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":[],"mappings":";;;;;;;AAaA;;AAA4E;;;;AAKxE;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAEO;;;AAEA;;;;AAcK;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;AACH;;AAUjB;;"}
|
package/Image/index.js
CHANGED
|
@@ -1,4 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var tslib = require('tslib');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var core = require('@xanui/core');
|
|
8
|
+
|
|
9
|
+
const Image = React.forwardRef((_a, ref) => {
|
|
2
10
|
var { children, src, alt, errorView } = _a, rest = tslib.__rest(_a, ["children", "src", "alt", "errorView"]);
|
|
3
11
|
const [faild, setFaild] = React.useState();
|
|
4
12
|
if (faild === false) {
|
|
@@ -13,4 +21,7 @@
|
|
|
13
21
|
setFaild(false);
|
|
14
22
|
rest.onError && rest.onError(e);
|
|
15
23
|
}, ref: ref })));
|
|
16
|
-
});
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
module.exports = Image;
|
|
27
|
+
//# sourceMappingURL=index.js.map
|
package/Image/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Image/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type ImageProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n errorView?: ReactElement\n}\n\nconst Image = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, errorView, ...rest }: ImageProps<T>, ref: any) => {\n const [faild, setFaild] = useState<boolean>()\n\n if (faild === false) {\n let t = errorView || alt?.charAt(0).toUpperCase() || children\n return (\n <Tag\n src={src}\n {...rest as any}\n sxr={{\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n component=\"div\"\n baseClass='image'\n ref={ref}\n >{t}</Tag>\n )\n }\n return (\n <Tag\n objectFit=\"cover\"\n {...rest as any}\n component=\"img\"\n alt={alt}\n src={src}\n baseClass='image'\n onError={(e) => {\n setFaild(false)\n rest.onError && rest.onError(e as any)\n }}\n ref={ref}\n />\n )\n})\n\nexport default Image\n\n\n"],"names":[
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Image/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type ImageProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n errorView?: ReactElement\n}\n\nconst Image = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, errorView, ...rest }: ImageProps<T>, ref: any) => {\n const [faild, setFaild] = useState<boolean>()\n\n if (faild === false) {\n let t = errorView || alt?.charAt(0).toUpperCase() || children\n return (\n <Tag\n src={src}\n {...rest as any}\n sxr={{\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n component=\"div\"\n baseClass='image'\n ref={ref}\n >{t}</Tag>\n )\n }\n return (\n <Tag\n objectFit=\"cover\"\n {...rest as any}\n component=\"img\"\n alt={alt}\n src={src}\n baseClass='image'\n onError={(e) => {\n setFaild(false)\n rest.onError && rest.onError(e as any)\n }}\n ref={ref}\n />\n )\n})\n\nexport default Image\n\n\n"],"names":[],"mappings":";;;;;;;;AASA;AAAoE;;AAGhE;AACI;;AAMY;AACA;AACA;AACH;;AAOb;;;AAWQ;AAIZ;;"}
|
package/Image/index.mjs
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { __rest } from 'tslib';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
import React, { useState } from 'react';
|
|
5
|
+
import { Tag } from '@xanui/core';
|
|
6
|
+
|
|
7
|
+
const Image = React.forwardRef((_a, ref) => {
|
|
2
8
|
var { children, src, alt, errorView } = _a, rest = __rest(_a, ["children", "src", "alt", "errorView"]);
|
|
3
9
|
const [faild, setFaild] = useState();
|
|
4
10
|
if (faild === false) {
|
|
@@ -13,4 +19,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{use
|
|
|
13
19
|
setFaild(false);
|
|
14
20
|
rest.onError && rest.onError(e);
|
|
15
21
|
}, ref: ref })));
|
|
16
|
-
});
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
export { Image as default };
|
|
25
|
+
//# sourceMappingURL=index.mjs.map
|
package/Image/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Image/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type ImageProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n errorView?: ReactElement\n}\n\nconst Image = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, errorView, ...rest }: ImageProps<T>, ref: any) => {\n const [faild, setFaild] = useState<boolean>()\n\n if (faild === false) {\n let t = errorView || alt?.charAt(0).toUpperCase() || children\n return (\n <Tag\n src={src}\n {...rest as any}\n sxr={{\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n component=\"div\"\n baseClass='image'\n ref={ref}\n >{t}</Tag>\n )\n }\n return (\n <Tag\n objectFit=\"cover\"\n {...rest as any}\n component=\"img\"\n alt={alt}\n src={src}\n baseClass='image'\n onError={(e) => {\n setFaild(false)\n rest.onError && rest.onError(e as any)\n }}\n ref={ref}\n />\n )\n})\n\nexport default Image\n\n\n"],"names":[
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Image/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type ImageProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n errorView?: ReactElement\n}\n\nconst Image = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, errorView, ...rest }: ImageProps<T>, ref: any) => {\n const [faild, setFaild] = useState<boolean>()\n\n if (faild === false) {\n let t = errorView || alt?.charAt(0).toUpperCase() || children\n return (\n <Tag\n src={src}\n {...rest as any}\n sxr={{\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n component=\"div\"\n baseClass='image'\n ref={ref}\n >{t}</Tag>\n )\n }\n return (\n <Tag\n objectFit=\"cover\"\n {...rest as any}\n component=\"img\"\n alt={alt}\n src={src}\n baseClass='image'\n onError={(e) => {\n setFaild(false)\n rest.onError && rest.onError(e as any)\n }}\n ref={ref}\n />\n )\n})\n\nexport default Image\n\n\n"],"names":[],"mappings":";;;;;;AASA;AAAoE;;AAGhE;AACI;;AAMY;AACA;AACA;AACH;;AAOb;;;AAWQ;AAIZ;;"}
|
package/Input/index.js
CHANGED
|
@@ -1,4 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var tslib = require('tslib');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var core = require('@xanui/core');
|
|
8
|
+
var index = require('../Text/index.js');
|
|
9
|
+
|
|
10
|
+
const Input = React.forwardRef((_a, ref) => {
|
|
2
11
|
var _b, _c, _d;
|
|
3
12
|
var { value } = _a, props = tslib.__rest(_a, ["value"]);
|
|
4
13
|
let [_e, theme] = core.useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, onFocus, color, onBlur, focused, containerRef, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, slotProps } = _e, rest = tslib.__rest(_e, ["startIcon", "endIcon", "iconPlacement", "onFocus", "color", "onBlur", "focused", "containerRef", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "slotProps"]);
|
|
@@ -150,5 +159,8 @@
|
|
|
150
159
|
justifyContent: "center",
|
|
151
160
|
display: 'flex',
|
|
152
161
|
color: error ? "danger.primary" : "text.secondary",
|
|
153
|
-
}, baseClass: "input-end-icon", children: endIcon })] })), helperText && jsxRuntime.jsx(index
|
|
154
|
-
});
|
|
162
|
+
}, baseClass: "input-end-icon", children: endIcon })] })), helperText && jsxRuntime.jsx(index, { pl: .5, className: "input-helper-text", fontSize: "small", color: error ? "danger.primary" : "text.primary", children: helperText })] }));
|
|
163
|
+
});
|
|
164
|
+
|
|
165
|
+
module.exports = Input;
|
|
166
|
+
//# sourceMappingURL=index.js.map
|
package/Input/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\nimport Text from '../Text';\n\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n containerRef?: MutableRefObject<HTMLDivElement | undefined>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n multiline?: boolean;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n slotProps?: {\n container?: Omit<TagProps<\"div\">, \"children\">\n }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n let [{\n startIcon,\n endIcon,\n iconPlacement,\n onFocus,\n color,\n onBlur,\n focused,\n containerRef,\n disabled,\n variant,\n error,\n helperText,\n multiline,\n size,\n rows,\n minRows,\n maxRows,\n slotProps,\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 ref ??= useRef(null);\n iconPlacement ??= multiline ? \"end\" : \"center\"\n if (!value) iconPlacement = 'center'\n\n const [_focused, setFocused] = useState(false)\n const conRef: any = useRef(null)\n let _focus = focused || _focused\n\n useEffect(() => {\n if (containerRef) {\n (containerRef as any).current = conRef?.current\n }\n }, [containerRef])\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: 40,\n gap: .5,\n fontSize: 'button',\n },\n medium: {\n height: 48,\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 useEffect(() => {\n if ((ref as any).current) {\n (ref as any).current.style.height = \"auto\";\n (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\n }\n }, [value]);\n\n return (\n <Tag\n baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\n >\n <Tag\n {...slotProps?.container}\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n flexWrap: \"nowrap\",\n // minWidth: 100,\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 }}\n baseClass='input-container'\n disabled={disabled || false}\n ref={conRef}\n {..._size}\n height={multiline ? \"auto\" : _size.height}\n minHeight={_size.height}\n >\n {startIcon && <Tag\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 <Tag\n flex={1}\n sxr={{\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 <Tag\n component={multiline ? 'textarea' : 'input'}\n {...multiprops}\n {...rest}\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 baseClass='input-box'\n ref={ref}\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 />\n </Tag>\n {endIcon && <Tag\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 </Tag>\n {helperText && <Text\n pl={.5}\n className=\"input-helper-text\"\n fontSize=\"small\"\n color={error ? \"danger.primary\" : \"text.primary\"}\n >{helperText}</Text>}\n </Tag>\n )\n})\n\nexport default Input\n"],"names":["__rest","useInterface","useBreakpointProps","useRef","useState","useEffect","useMemo","_jsxs","Tag","_jsx","Text"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\nimport Text from '../Text';\n\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n containerRef?: MutableRefObject<HTMLDivElement | undefined>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n multiline?: boolean;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n slotProps?: {\n container?: Omit<TagProps<\"div\">, \"children\">\n }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n let [{\n startIcon,\n endIcon,\n iconPlacement,\n onFocus,\n color,\n onBlur,\n focused,\n containerRef,\n disabled,\n variant,\n error,\n helperText,\n multiline,\n size,\n rows,\n minRows,\n maxRows,\n slotProps,\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 ref ??= useRef(null);\n iconPlacement ??= multiline ? \"end\" : \"center\"\n if (!value) iconPlacement = 'center'\n\n const [_focused, setFocused] = useState(false)\n const conRef: any = useRef(null)\n let _focus = focused || _focused\n\n useEffect(() => {\n if (containerRef) {\n (containerRef as any).current = conRef?.current\n }\n }, [containerRef])\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: 40,\n gap: .5,\n fontSize: 'button',\n },\n medium: {\n height: 48,\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 useEffect(() => {\n if ((ref as any).current) {\n (ref as any).current.style.height = \"auto\";\n (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\n }\n }, [value]);\n\n return (\n <Tag\n baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\n >\n <Tag\n {...slotProps?.container}\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n flexWrap: \"nowrap\",\n // minWidth: 100,\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 }}\n baseClass='input-container'\n disabled={disabled || false}\n ref={conRef}\n {..._size}\n height={multiline ? \"auto\" : _size.height}\n minHeight={_size.height}\n >\n {startIcon && <Tag\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 <Tag\n flex={1}\n sxr={{\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 <Tag\n component={multiline ? 'textarea' : 'input'}\n {...multiprops}\n {...rest}\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 baseClass='input-box'\n ref={ref}\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 />\n </Tag>\n {endIcon && <Tag\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 </Tag>\n {helperText && <Text\n pl={.5}\n className=\"input-helper-text\"\n fontSize=\"small\"\n color={error ? \"danger.primary\" : \"text.primary\"}\n >{helperText}</Text>}\n </Tag>\n )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;;;AAyBA;;AAAsE;;;AAwBlE;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;;AAGA;AACA;;;AAGA;AACA;;;;;AAMA;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;;;;AAKL;;AAEK;;AAET;AAEA;AAOgB;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAYI;AACA;AACA;AACA;;AAEH;AAMG;AACA;AACA;;AAEA;AACI;AACH;AACD;AACI;;AAEA;AACI;;AAQJ;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAMG;AACJ;;AAGI;AACJ;AAMA;AACA;AACA;AACA;;AAEH;AAYrB;;"}
|
package/Input/index.mjs
CHANGED
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { __rest } from 'tslib';
|
|
3
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
+
import React, { useRef, useState, useEffect, useMemo } from 'react';
|
|
5
|
+
import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
|
|
6
|
+
import Text from '../Text/index.mjs';
|
|
7
|
+
|
|
8
|
+
const Input = React.forwardRef((_a, ref) => {
|
|
2
9
|
var _b, _c, _d;
|
|
3
10
|
var { value } = _a, props = __rest(_a, ["value"]);
|
|
4
11
|
let [_e, theme] = useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, onFocus, color, onBlur, focused, containerRef, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, slotProps } = _e, rest = __rest(_e, ["startIcon", "endIcon", "iconPlacement", "onFocus", "color", "onBlur", "focused", "containerRef", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "slotProps"]);
|
|
@@ -151,4 +158,7 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
|
|
|
151
158
|
display: 'flex',
|
|
152
159
|
color: error ? "danger.primary" : "text.secondary",
|
|
153
160
|
}, baseClass: "input-end-icon", children: endIcon })] })), helperText && jsx(Text, { pl: .5, className: "input-helper-text", fontSize: "small", color: error ? "danger.primary" : "text.primary", children: helperText })] }));
|
|
154
|
-
});
|
|
161
|
+
});
|
|
162
|
+
|
|
163
|
+
export { Input as default };
|
|
164
|
+
//# sourceMappingURL=index.mjs.map
|
package/Input/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\nimport Text from '../Text';\n\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n containerRef?: MutableRefObject<HTMLDivElement | undefined>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n multiline?: boolean;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n slotProps?: {\n container?: Omit<TagProps<\"div\">, \"children\">\n }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n let [{\n startIcon,\n endIcon,\n iconPlacement,\n onFocus,\n color,\n onBlur,\n focused,\n containerRef,\n disabled,\n variant,\n error,\n helperText,\n multiline,\n size,\n rows,\n minRows,\n maxRows,\n slotProps,\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 ref ??= useRef(null);\n iconPlacement ??= multiline ? \"end\" : \"center\"\n if (!value) iconPlacement = 'center'\n\n const [_focused, setFocused] = useState(false)\n const conRef: any = useRef(null)\n let _focus = focused || _focused\n\n useEffect(() => {\n if (containerRef) {\n (containerRef as any).current = conRef?.current\n }\n }, [containerRef])\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: 40,\n gap: .5,\n fontSize: 'button',\n },\n medium: {\n height: 48,\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 useEffect(() => {\n if ((ref as any).current) {\n (ref as any).current.style.height = \"auto\";\n (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\n }\n }, [value]);\n\n return (\n <Tag\n baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\n >\n <Tag\n {...slotProps?.container}\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n flexWrap: \"nowrap\",\n // minWidth: 100,\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 }}\n baseClass='input-container'\n disabled={disabled || false}\n ref={conRef}\n {..._size}\n height={multiline ? \"auto\" : _size.height}\n minHeight={_size.height}\n >\n {startIcon && <Tag\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 <Tag\n flex={1}\n sxr={{\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 <Tag\n component={multiline ? 'textarea' : 'input'}\n {...multiprops}\n {...rest}\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 baseClass='input-box'\n ref={ref}\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 />\n </Tag>\n {endIcon && <Tag\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 </Tag>\n {helperText && <Text\n pl={.5}\n className=\"input-helper-text\"\n fontSize=\"small\"\n color={error ? \"danger.primary\" : \"text.primary\"}\n >{helperText}</Text>}\n </Tag>\n )\n})\n\nexport default Input\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\nimport Text from '../Text';\n\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n containerRef?: MutableRefObject<HTMLDivElement | undefined>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n multiline?: boolean;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n slotProps?: {\n container?: Omit<TagProps<\"div\">, \"children\">\n }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n let [{\n startIcon,\n endIcon,\n iconPlacement,\n onFocus,\n color,\n onBlur,\n focused,\n containerRef,\n disabled,\n variant,\n error,\n helperText,\n multiline,\n size,\n rows,\n minRows,\n maxRows,\n slotProps,\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 ref ??= useRef(null);\n iconPlacement ??= multiline ? \"end\" : \"center\"\n if (!value) iconPlacement = 'center'\n\n const [_focused, setFocused] = useState(false)\n const conRef: any = useRef(null)\n let _focus = focused || _focused\n\n useEffect(() => {\n if (containerRef) {\n (containerRef as any).current = conRef?.current\n }\n }, [containerRef])\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: 40,\n gap: .5,\n fontSize: 'button',\n },\n medium: {\n height: 48,\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 useEffect(() => {\n if ((ref as any).current) {\n (ref as any).current.style.height = \"auto\";\n (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\n }\n }, [value]);\n\n return (\n <Tag\n baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\n >\n <Tag\n {...slotProps?.container}\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n flexWrap: \"nowrap\",\n // minWidth: 100,\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 }}\n baseClass='input-container'\n disabled={disabled || false}\n ref={conRef}\n {..._size}\n height={multiline ? \"auto\" : _size.height}\n minHeight={_size.height}\n >\n {startIcon && <Tag\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 <Tag\n flex={1}\n sxr={{\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 <Tag\n component={multiline ? 'textarea' : 'input'}\n {...multiprops}\n {...rest}\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 baseClass='input-box'\n ref={ref}\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 />\n </Tag>\n {endIcon && <Tag\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 </Tag>\n {helperText && <Text\n pl={.5}\n className=\"input-helper-text\"\n fontSize=\"small\"\n color={error ? \"danger.primary\" : \"text.primary\"}\n >{helperText}</Text>}\n </Tag>\n )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;AAyBA;;AAAsE;;;AAwBlE;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;;AAGA;AACA;;;AAGA;AACA;;;;;AAMA;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;;;;AAKL;;AAEK;;AAET;AAEA;AAOgB;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAYI;AACA;AACA;AACA;;AAEH;AAMG;AACA;AACA;;AAEA;AACI;AACH;AACD;AACI;;AAEA;AACI;;AAQJ;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAMG;AACJ;;AAGI;AACJ;AAMA;AACA;AACA;AACA;;AAEH;AAYrB;;"}
|