@xanui/ui 1.1.34 → 1.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (156) hide show
  1. package/DataFilter/index.js +3 -3
  2. package/package.json +10 -3
  3. package/Accordion/index.mjs +0 -94
  4. package/Accordion/index.mjs.map +0 -1
  5. package/Alert/index.mjs +0 -119
  6. package/Alert/index.mjs.map +0 -1
  7. package/Autocomplete/index.mjs +0 -134
  8. package/Autocomplete/index.mjs.map +0 -1
  9. package/Avatar/index.mjs +0 -48
  10. package/Avatar/index.mjs.map +0 -1
  11. package/Badge/index.mjs +0 -107
  12. package/Badge/index.mjs.map +0 -1
  13. package/Box/index.mjs +0 -12
  14. package/Box/index.mjs.map +0 -1
  15. package/Button/index.mjs +0 -92
  16. package/Button/index.mjs.map +0 -1
  17. package/ButtonGroup/index.mjs +0 -56
  18. package/ButtonGroup/index.mjs.map +0 -1
  19. package/Calendar/index.mjs +0 -172
  20. package/Calendar/index.mjs.map +0 -1
  21. package/CalendarInput/index.mjs +0 -32
  22. package/CalendarInput/index.mjs.map +0 -1
  23. package/Checkbox/index.mjs +0 -56
  24. package/Checkbox/index.mjs.map +0 -1
  25. package/Chip/index.mjs +0 -74
  26. package/Chip/index.mjs.map +0 -1
  27. package/CircleProgress/index.mjs +0 -127
  28. package/CircleProgress/index.mjs.map +0 -1
  29. package/ClickOutside/index.mjs +0 -35
  30. package/ClickOutside/index.mjs.map +0 -1
  31. package/Collaps/index.mjs +0 -24
  32. package/Collaps/index.mjs.map +0 -1
  33. package/Container/index.mjs +0 -27
  34. package/Container/index.mjs.map +0 -1
  35. package/DataFilter/index.mjs +0 -67
  36. package/DataFilter/index.mjs.map +0 -1
  37. package/DataFilter/options/DateFilter.mjs +0 -30
  38. package/DataFilter/options/DateFilter.mjs.map +0 -1
  39. package/DataFilter/options/DateRangeFilter.mjs +0 -25
  40. package/DataFilter/options/DateRangeFilter.mjs.map +0 -1
  41. package/DataFilter/options/MultiSelectFilter.mjs +0 -36
  42. package/DataFilter/options/MultiSelectFilter.mjs.map +0 -1
  43. package/DataFilter/options/NumberFilter.mjs +0 -22
  44. package/DataFilter/options/NumberFilter.mjs.map +0 -1
  45. package/DataFilter/options/NumberRangeFilter.mjs +0 -27
  46. package/DataFilter/options/NumberRangeFilter.mjs.map +0 -1
  47. package/DataFilter/options/SelectFilter.mjs +0 -32
  48. package/DataFilter/options/SelectFilter.mjs.map +0 -1
  49. package/DataFilter/options/TextFilter.mjs +0 -22
  50. package/DataFilter/options/TextFilter.mjs.map +0 -1
  51. package/Datatable/FilterBox.mjs +0 -37
  52. package/Datatable/FilterBox.mjs.map +0 -1
  53. package/Datatable/Row.mjs +0 -57
  54. package/Datatable/Row.mjs.map +0 -1
  55. package/Datatable/SelectedBox.mjs +0 -19
  56. package/Datatable/SelectedBox.mjs.map +0 -1
  57. package/Datatable/Table.mjs +0 -21
  58. package/Datatable/Table.mjs.map +0 -1
  59. package/Datatable/TableHead.mjs +0 -59
  60. package/Datatable/TableHead.mjs.map +0 -1
  61. package/Datatable/index.mjs +0 -91
  62. package/Datatable/index.mjs.map +0 -1
  63. package/Divider/index.mjs +0 -29
  64. package/Divider/index.mjs.map +0 -1
  65. package/Drawer/index.mjs +0 -76
  66. package/Drawer/index.mjs.map +0 -1
  67. package/Form/index.mjs +0 -43
  68. package/Form/index.mjs.map +0 -1
  69. package/GridContainer/index.mjs +0 -17
  70. package/GridContainer/index.mjs.map +0 -1
  71. package/GridItem/index.mjs +0 -18
  72. package/GridItem/index.mjs.map +0 -1
  73. package/IconButton/index.mjs +0 -62
  74. package/IconButton/index.mjs.map +0 -1
  75. package/Image/index.mjs +0 -25
  76. package/Image/index.mjs.map +0 -1
  77. package/Input/index.mjs +0 -142
  78. package/Input/index.mjs.map +0 -1
  79. package/InputNumber/index.mjs +0 -30
  80. package/InputNumber/index.mjs.map +0 -1
  81. package/Label/index.mjs +0 -22
  82. package/Label/index.mjs.map +0 -1
  83. package/Layer/index.mjs +0 -60
  84. package/Layer/index.mjs.map +0 -1
  85. package/LineProgress/index.mjs +0 -57
  86. package/LineProgress/index.mjs.map +0 -1
  87. package/List/ListContext.mjs +0 -8
  88. package/List/ListContext.mjs.map +0 -1
  89. package/List/index.mjs +0 -61
  90. package/List/index.mjs.map +0 -1
  91. package/ListItem/index.mjs +0 -52
  92. package/ListItem/index.mjs.map +0 -1
  93. package/LoadingBox/index.mjs +0 -30
  94. package/LoadingBox/index.mjs.map +0 -1
  95. package/Menu/index.mjs +0 -148
  96. package/Menu/index.mjs.map +0 -1
  97. package/Modal/index.mjs +0 -57
  98. package/Modal/index.mjs.map +0 -1
  99. package/NoSSR/index.mjs +0 -13
  100. package/NoSSR/index.mjs.map +0 -1
  101. package/Option/index.mjs +0 -12
  102. package/Option/index.mjs.map +0 -1
  103. package/Paper/index.mjs +0 -13
  104. package/Paper/index.mjs.map +0 -1
  105. package/Portal/index.mjs +0 -25
  106. package/Portal/index.mjs.map +0 -1
  107. package/Radio/index.mjs +0 -14
  108. package/Radio/index.mjs.map +0 -1
  109. package/Scrollbar/index.mjs +0 -57
  110. package/Scrollbar/index.mjs.map +0 -1
  111. package/Select/index.mjs +0 -57
  112. package/Select/index.mjs.map +0 -1
  113. package/Skeleton/index.mjs +0 -58
  114. package/Skeleton/index.mjs.map +0 -1
  115. package/Stack/index.mjs +0 -15
  116. package/Stack/index.mjs.map +0 -1
  117. package/Switch/index.mjs +0 -77
  118. package/Switch/index.mjs.map +0 -1
  119. package/Tab/index.mjs +0 -15
  120. package/Tab/index.mjs.map +0 -1
  121. package/Table/index.mjs +0 -86
  122. package/Table/index.mjs.map +0 -1
  123. package/TableBody/index.mjs +0 -12
  124. package/TableBody/index.mjs.map +0 -1
  125. package/TableCell/index.mjs +0 -12
  126. package/TableCell/index.mjs.map +0 -1
  127. package/TableFooter/index.mjs +0 -12
  128. package/TableFooter/index.mjs.map +0 -1
  129. package/TableHead/index.mjs +0 -12
  130. package/TableHead/index.mjs.map +0 -1
  131. package/TablePagination/index.mjs +0 -57
  132. package/TablePagination/index.mjs.map +0 -1
  133. package/TableRow/index.mjs +0 -12
  134. package/TableRow/index.mjs.map +0 -1
  135. package/Tabs/index.mjs +0 -199
  136. package/Tabs/index.mjs.map +0 -1
  137. package/Text/index.mjs +0 -23
  138. package/Text/index.mjs.map +0 -1
  139. package/Toast/index.mjs +0 -118
  140. package/Toast/index.mjs.map +0 -1
  141. package/Tooltip/index.mjs +0 -38
  142. package/Tooltip/index.mjs.map +0 -1
  143. package/ViewBox/index.mjs +0 -30
  144. package/ViewBox/index.mjs.map +0 -1
  145. package/index.mjs +0 -65
  146. package/index.mjs.map +0 -1
  147. package/useAlert/index.mjs +0 -92
  148. package/useAlert/index.mjs.map +0 -1
  149. package/useBlurCss/index.mjs +0 -17
  150. package/useBlurCss/index.mjs.map +0 -1
  151. package/useCorner/index.mjs +0 -20
  152. package/useCorner/index.mjs.map +0 -1
  153. package/useLayer/index.mjs +0 -36
  154. package/useLayer/index.mjs.map +0 -1
  155. package/useModal/index.mjs +0 -35
  156. package/useModal/index.mjs.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport Layer, { LayerProps } from '../Layer';\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\n\r\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\r\n placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\r\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n onClickOutside?: () => void;\r\n slotProps?: {\r\n layer?: Partial<Omit<LayerProps, \"children\">>\r\n root?: TagProps<\"div\">;\r\n content?: TagProps<\"div\">;\r\n clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\r\n }\r\n}\r\n\r\nconst getVariant = (placement?: any) => {\r\n switch (placement) {\r\n case \"right\":\r\n return \"fadeLeft\"\r\n case \"top\":\r\n return \"fadeDown\"\r\n case \"bottom\":\r\n return \"fadeUp\"\r\n default:\r\n return \"fadeRight\"\r\n }\r\n}\r\n\r\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\r\n const _p: any = {}\r\n if (placement) _p.placement = placement\r\n if (size) _p.size = size\r\n const p: any = useBreakpointProps(_p)\r\n\r\n placement = p.placement ?? 'left'\r\n size = p.size || \"medium\"\r\n\r\n let isSide = placement === 'left' || placement === 'right'\r\n let sizes: any = {\r\n small: 220,\r\n medium: 330,\r\n large: 440\r\n }\r\n\r\n let _size = sizes[size as any] || size\r\n\r\n return (\r\n <Layer\r\n {...layerProps}\r\n {...slotProps?.layer}\r\n transition={getVariant(placement)}\r\n >\r\n <Tag\r\n {...slotProps?.root}\r\n baseClass='drawer'\r\n sxr={{\r\n width: \"100vw\",\r\n height: \"100vh\",\r\n display: \"flex\",\r\n direction: isSide ? \"row\" : \"column\" as any,\r\n justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\r\n }}\r\n >\r\n <ClickOutside\r\n {...slotProps?.clickOutside}\r\n onClickOutside={onClickOutside || (() => { })}\r\n >\r\n <Tag\r\n sxr={{\r\n width: isSide ? _size : \"100%\",\r\n height: isSide ? \"100%\" : _size,\r\n bgcolor: \"background.primary\",\r\n shadow: 20\r\n }}\r\n baseClass='drawer-content'\r\n >\r\n {children}\r\n </Tag>\r\n </ClickOutside>\r\n </Tag>\r\n </Layer>\r\n )\r\n}\r\n\r\n\r\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\r\n const d = Renderar.render(Drawer as any, {\r\n open: true,\r\n ...props,\r\n children,\r\n onClosed: () => {\r\n d.unrender()\r\n },\r\n onClickOutside: () => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n } else {\r\n d.updateProps({ open: false })\r\n }\r\n }\r\n })\r\n\r\n return {\r\n open: () => {\r\n d.updateProps({ open: true })\r\n },\r\n close: () => {\r\n d.updateProps({ open: false })\r\n },\r\n }\r\n}\r\n\r\nDrawer.close = () => {\r\n Renderar.unrender(Drawer as any)\r\n}\r\n\r\nexport default Drawer"],"names":[],"mappings":";;;;;;;AAkBA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;AAAgB;;AAEZ;AAAe;AACf;AAAU;AACV;AAEA;AACA;;AAGA;AACI;AACA;AACA;;;AAKJ;AAUgB;AACA;AACA;;AAEA;;;;AAWQ;AACA;;AAU5B;AAGA;AACI;;AAMI;;;;;;;AAOA;;;;;;;;;AAWR;AAEA;AACI;AACJ;;"}
package/Form/index.mjs DELETED
@@ -1,43 +0,0 @@
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) => {
8
- var { children } = _a, rest = __rest(_a, ["children"]);
9
- let formRef = ref || useRef(null);
10
- const cloneAllChildren = (childs) => {
11
- return React.Children.map(childs, (child) => {
12
- let c = child;
13
- if (React.isValidElement(child) && c.props.name) {
14
- const form = formRef.current;
15
- const formData = new FormData(form);
16
- return React.cloneElement(child, {
17
- onChange: () => {
18
- console.log(formData.get(c.props.name));
19
- },
20
- value: formData.get(c.props.name),
21
- children: cloneAllChildren(c.props.children),
22
- });
23
- }
24
- return child;
25
- });
26
- };
27
- return (jsx(Tag, Object.assign({ component: "form" }, rest, { onSubmit: (e) => {
28
- e.preventDefault();
29
- const form = formRef.current;
30
- const formData = new FormData(form);
31
- formData.forEach((value, key) => {
32
- console.log(key + ": " + value);
33
- });
34
- }, sxr: {
35
- bgcolor: "default",
36
- p: 2,
37
- maxWidth: 400,
38
- radius: 1,
39
- }, baseClass: 'form', ref: formRef, children: cloneAllChildren(children) })));
40
- });
41
-
42
- export { Form as default };
43
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Form/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useRef } from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type FormProps<T extends TagComponentType = \"form\"> = TagProps<T> & {\r\n\r\n}\r\n\r\n\r\nconst Form = React.forwardRef(<T extends TagComponentType = \"form\">({ children, ...rest }: FormProps<T>, ref: React.Ref<any>) => {\r\n let formRef: any = ref || useRef(null)\r\n\r\n const cloneAllChildren: any = (childs: any) => {\r\n return React.Children.map(childs, (child: any) => {\r\n let c: any = child;\r\n if (React.isValidElement(child) && c.props.name) {\r\n const form = formRef.current\r\n const formData = new FormData(form);\r\n return React.cloneElement(child, {\r\n onChange: () => {\r\n console.log(formData.get(c.props.name));\r\n },\r\n value: formData.get(c.props.name),\r\n children: cloneAllChildren(c.props.children),\r\n } as any);\r\n }\r\n return child;\r\n });\r\n };\r\n\r\n return (\r\n <Tag\r\n component=\"form\"\r\n {...rest}\r\n onSubmit={(e) => {\r\n e.preventDefault()\r\n const form = formRef.current\r\n\r\n const formData = new FormData(form);\r\n\r\n formData.forEach((value, key) => {\r\n console.log(key + \": \" + value);\r\n });\r\n }}\r\n sxr={{\r\n bgcolor: \"default\",\r\n p: 2,\r\n maxWidth: 400,\r\n radius: 1,\r\n }}\r\n baseClass='form'\r\n ref={formRef}\r\n >\r\n {cloneAllChildren(children)}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Form\r\n\r\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;;"}
@@ -1,17 +0,0 @@
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) => {
7
- var { children } = _a, rest = __rest(_a, ["children"]);
8
- return (jsx(Tag, Object.assign({}, rest, { sxr: {
9
- display: "flex",
10
- flexDirection: 'row',
11
- flexWrap: 'wrap',
12
- width: '100%',
13
- }, baseClass: 'grid-container', ref: ref, children: children })));
14
- });
15
-
16
- export { GridContainer as default };
17
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\r\n return (\r\n <Tag\r\n {...rest}\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: 'row',\r\n flexWrap: 'wrap',\r\n width: '100%',\r\n }}\r\n baseClass='grid-container'\r\n ref={ref}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n\r\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;;;;"}
@@ -1,18 +0,0 @@
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) => {
7
- var { children, xs, sm, md, lg, xl } = _a, rest = __rest(_a, ["children", "xs", "sm", "md", "lg", "xl"]);
8
- let w = {};
9
- xs && (w.xs = (100 / 12 * xs) + "%");
10
- sm && (w.sm = (100 / 12 * sm) + "%");
11
- md && (w.md = (100 / 12 * md) + "%");
12
- lg && (w.lg = (100 / 12 * lg) + "%");
13
- xl && (w.xl = (100 / 12 * xl) + "%");
14
- return (jsx(Tag, Object.assign({ ref: ref }, rest, { maxWidth: w, flexBasis: w, flexGrow: 0, baseClass: "grid-item", children: children })));
15
- });
16
-
17
- export { GridItem as default };
18
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n xs?: number;\r\n sm?: number;\r\n md?: number;\r\n lg?: number;\r\n xl?: number;\r\n}\r\n\r\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\r\n\r\n let w: any = {}\r\n\r\n xs && (w.xs = (100 / 12 * xs) + \"%\")\r\n sm && (w.sm = (100 / 12 * sm) + \"%\")\r\n md && (w.md = (100 / 12 * md) + \"%\")\r\n lg && (w.lg = (100 / 12 * lg) + \"%\")\r\n xl && (w.xl = (100 / 12 * xl) + \"%\")\r\n\r\n return (\r\n <Tag\r\n ref={ref}\r\n {...rest}\r\n maxWidth={w}\r\n flexBasis={w}\r\n flexGrow={0}\r\n baseClass=\"grid-item\"\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n\r\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;;;;"}
@@ -1,62 +0,0 @@
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) => {
9
- var _b, _c;
10
- var { children } = _a, rest = __rest(_a, ["children"]);
11
- rest.sx = rest.sx || {};
12
- let [_d] = useInterface("IconButton", rest, {}), { variant, corner, color, size } = _d, _props = __rest(_d, ["variant", "corner", "color", "size"]);
13
- const _p = {};
14
- if (size)
15
- _p.size = size;
16
- if (color)
17
- _p.color = color;
18
- if (variant)
19
- _p.variant = variant;
20
- if (corner)
21
- _p.corner = corner;
22
- const p = useBreakpointProps(_p);
23
- size = (_b = p.size) !== null && _b !== void 0 ? _b : "medium";
24
- color = p.color;
25
- variant = p.variant;
26
- corner = (_c = p.corner) !== null && _c !== void 0 ? _c : "circle";
27
- let template = useColorTemplate(color || "brand", variant || "fill");
28
- const cornerCss = useCorner(corner);
29
- if (size === 'small') {
30
- size = 28;
31
- }
32
- else if (size === 'medium') {
33
- size = 34;
34
- }
35
- else if (size === 'large') {
36
- size = 52;
37
- }
38
- return (jsx(Tag, Object.assign({ component: 'button', ref: ref }, cornerCss, _props, template.primary, { baseClass: 'icon-button', sxr: {
39
- border: 0,
40
- radius: size,
41
- height: size,
42
- width: size,
43
- cursor: "pointer",
44
- fontFamily: "inherit",
45
- display: "inline-flex",
46
- alignItems: "center",
47
- justifyContent: "center",
48
- lineHeight: 1,
49
- fontSize: "button",
50
- bgcolor: "transparent",
51
- "& svg": {
52
- fontSize: Math.round((size / 3) * 1.8),
53
- display: "block",
54
- width: "1em",
55
- height: "1em",
56
- flexShrink: 0,
57
- },
58
- }, hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), children: children })));
59
- });
60
-
61
- export { IconButton as default };
62
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport useCorner from '../useCorner'\r\n\r\n\r\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\r\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\r\n}\r\n\r\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\r\n rest.sx = (rest as any).sx || {};\r\n let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\r\n\r\n const _p: any = {}\r\n if (size) _p.size = size\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n if (corner) _p.corner = corner\r\n const p: any = useBreakpointProps(_p)\r\n\r\n size = p.size ?? \"medium\"\r\n color = p.color\r\n variant = p.variant\r\n corner = p.corner ?? \"circle\"\r\n\r\n let template = useColorTemplate(color || \"brand\", variant || \"fill\")\r\n const cornerCss = useCorner(corner)\r\n\r\n if (size === 'small') {\r\n size = 28\r\n } else if (size === 'medium') {\r\n size = 34\r\n } else if (size === 'large') {\r\n size = 52\r\n }\r\n\r\n return (\r\n <Tag\r\n component='button'\r\n ref={ref}\r\n {...cornerCss}\r\n {..._props}\r\n {...template.primary}\r\n baseClass='icon-button'\r\n sxr={{\r\n border: 0,\r\n radius: size,\r\n height: size,\r\n width: size,\r\n cursor: \"pointer\",\r\n fontFamily: \"inherit\",\r\n\r\n display: \"inline-flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n\r\n lineHeight: 1,\r\n fontSize: \"button\",\r\n\r\n bgcolor: \"transparent\",\r\n\r\n \"& svg\": {\r\n fontSize: Math.round((size / 3) * 1.8),\r\n display: \"block\",\r\n width: \"1em\",\r\n height: \"1em\",\r\n flexShrink: 0,\r\n },\r\n }}\r\n hover={{\r\n ...template.secondary,\r\n ...((_props as any)?.hover || {})\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\r\nexport default IconButton\r\n"],"names":[],"mappings":";;;;;;;AAaA;;AAA4E;;;;AAKxE;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAEO;;;AAEA;;;;AAaK;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AACI;AACA;AACA;AACA;AACA;AACH;;AAUjB;;"}
package/Image/index.mjs DELETED
@@ -1,25 +0,0 @@
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) => {
8
- var { children, src, alt, errorView } = _a, rest = __rest(_a, ["children", "src", "alt", "errorView"]);
9
- const [faild, setFaild] = useState();
10
- if (faild === false) {
11
- let t = errorView || (alt === null || alt === void 0 ? void 0 : alt.charAt(0).toUpperCase()) || children;
12
- return (jsx(Tag, Object.assign({ src: src }, rest, { sxr: {
13
- display: "inline-flex",
14
- justifyContent: "center",
15
- alignItems: "center",
16
- }, component: "div", baseClass: 'image', ref: ref, children: t })));
17
- }
18
- return (jsx(Tag, Object.assign({ objectFit: "cover" }, rest, { component: "img", alt: alt, src: src, baseClass: 'image', onError: (e) => {
19
- setFaild(false);
20
- rest.onError && rest.onError(e);
21
- }, ref: ref })));
22
- });
23
-
24
- export { Image as default };
25
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Image/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type ImageProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\r\n errorView?: ReactElement\r\n}\r\n\r\nconst Image = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, errorView, ...rest }: ImageProps<T>, ref: any) => {\r\n const [faild, setFaild] = useState<boolean>()\r\n\r\n if (faild === false) {\r\n let t = errorView || alt?.charAt(0).toUpperCase() || children\r\n return (\r\n <Tag\r\n src={src}\r\n {...rest as any}\r\n sxr={{\r\n display: \"inline-flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n }}\r\n component=\"div\"\r\n baseClass='image'\r\n ref={ref}\r\n >{t}</Tag>\r\n )\r\n }\r\n return (\r\n <Tag\r\n objectFit=\"cover\"\r\n {...rest as any}\r\n component=\"img\"\r\n alt={alt}\r\n src={src}\r\n baseClass='image'\r\n onError={(e) => {\r\n setFaild(false)\r\n rest.onError && rest.onError(e as any)\r\n }}\r\n ref={ref}\r\n />\r\n )\r\n})\r\n\r\nexport default Image\r\n\r\n\r\n"],"names":[],"mappings":";;;;;;AASA;AAAoE;;AAGhE;AACI;;AAMY;AACA;AACA;AACH;;AAOb;;;AAWQ;AAIZ;;"}
package/Input/index.mjs DELETED
@@ -1,142 +0,0 @@
1
- "use client";
2
- import { __rest } from 'tslib';
3
- import { jsxs, jsx } from 'react/jsx-runtime';
4
- import React, { useState, useEffect, useMemo } from 'react';
5
- import { useInterface, useBreakpointProps, useMergeRefs, Tag } from '@xanui/core';
6
- import Label from '../Label/index.mjs';
7
-
8
- const Input = React.forwardRef((_a, ref) => {
9
- var _b, _c, _d;
10
- var { value, refs } = _a, props = __rest(_a, ["value", "refs"]);
11
- let [_e, theme] = useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, color, label, name, placeholder, type, readOnly, autoFocus, autoComplete, onFocus, onBlur, onChange, onKeyDown, onKeyUp, focused, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, fullWidth, slotProps } = _e, rest = __rest(_e, ["startIcon", "endIcon", "iconPlacement", "color", "label", "name", "placeholder", "type", "readOnly", "autoFocus", "autoComplete", "onFocus", "onBlur", "onChange", "onKeyDown", "onKeyUp", "focused", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "fullWidth", "slotProps"]);
12
- const _p = {};
13
- if (startIcon)
14
- _p.startIcon = startIcon;
15
- if (endIcon)
16
- _p.endIcon = endIcon;
17
- if (iconPlacement)
18
- _p.iconPlacement = iconPlacement;
19
- if (color)
20
- _p.color = color;
21
- if (variant)
22
- _p.variant = variant;
23
- if (helperText)
24
- _p.helperText = helperText;
25
- if (size)
26
- _p.size = size;
27
- if (rows)
28
- _p.rows = rows;
29
- if (minRows)
30
- _p.minRows = minRows;
31
- if (maxRows)
32
- _p.maxRows = maxRows;
33
- const p = useBreakpointProps(_p);
34
- startIcon = p.startIcon;
35
- endIcon = p.endIcon;
36
- iconPlacement = p.iconPlacement;
37
- color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
38
- variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
39
- helperText = p.helperText;
40
- size = (_d = p.size) !== null && _d !== void 0 ? _d : 'medium';
41
- rows = p.rows;
42
- minRows = p.minRows;
43
- maxRows = p.maxRows;
44
- iconPlacement !== null && iconPlacement !== void 0 ? iconPlacement : (iconPlacement = multiline ? "end" : "center");
45
- if (!value)
46
- iconPlacement = 'center';
47
- const [_focused, setFocused] = useState(false);
48
- let _focus = focused || _focused;
49
- const inputRef = React.useRef(null);
50
- const inputMergeRef = useMergeRefs(inputRef, refs === null || refs === void 0 ? void 0 : refs.input);
51
- useEffect(() => {
52
- if (autoFocus) {
53
- setTimeout(() => {
54
- var _a;
55
- (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
56
- }, 100);
57
- }
58
- }, [autoFocus]);
59
- let _rows = useMemo(() => {
60
- if (rows)
61
- return rows;
62
- if (value && multiline) {
63
- let lines = value.split(`\n`).length;
64
- if (minRows && minRows > lines) {
65
- return minRows;
66
- }
67
- else if (maxRows && maxRows < lines) {
68
- return maxRows;
69
- }
70
- else {
71
- return lines;
72
- }
73
- }
74
- }, [value]) || 1;
75
- const sizes = {
76
- small: {
77
- height: 38,
78
- gap: .5,
79
- fontSize: 'button',
80
- },
81
- medium: {
82
- height: 46,
83
- gap: 1,
84
- fontSize: "text"
85
- },
86
- large: {
87
- height: 52,
88
- gap: 1,
89
- fontSize: 'big'
90
- }
91
- };
92
- const _size = sizes[size];
93
- let borderColor = _focus ? color : (variant === "fill" ? "transparent" : "divider");
94
- borderColor = error ? "danger.primary" : borderColor;
95
- let multiprops = {};
96
- if (multiline) {
97
- multiprops = {
98
- rows: _rows,
99
- sx: {
100
- resize: "none"
101
- }
102
- };
103
- }
104
- return (jsxs(Tag, Object.assign({ width: fullWidth ? "100%" : "auto" }, rest, { ref: ref, baseClass: "input-wrapper", sxr: {
105
- display: 'flex',
106
- flexDirection: 'column',
107
- gap: .5,
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
- width: "100%",
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": {
112
- "-webkit-text-fill-color": "text.primary",
113
- "box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,
114
- transition: "background-color 5000s ease-in-out 0s"
115
- }, "& textarea": {
116
- resize: "none"
117
- } }), 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
- border: 0,
119
- outline: 0,
120
- bgcolor: "transparent",
121
- color: error ? "danger.primary" : "text.primary",
122
- fontSize: _size.fontSize,
123
- height: multiline ? "auto" : _size.height + "px!important",
124
- width: "100%",
125
- maxHeight: 200,
126
- }, value: value, onChange: onChange, onFocus: (e) => {
127
- focused !== null && focused !== void 0 ? focused : setFocused(true);
128
- onFocus && onFocus(e);
129
- }, onBlur: (e) => {
130
- focused !== null && focused !== void 0 ? focused : setFocused(false);
131
- onBlur && onBlur(e);
132
- }, onKeyDown: onKeyDown, onKeyUp: onKeyUp, name: name, placeholder: placeholder, type: type, readOnly: readOnly, autoComplete: autoComplete })), endIcon] })), helperText && jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.helperText, { ref: refs === null || refs === void 0 ? void 0 : refs.helperText, baseClass: "input-helper-text", sxr: {
133
- color: error ? "danger.primary" : "text.primary",
134
- fontSize: "small",
135
- lineHeight: "text",
136
- fontWeight: 'text',
137
- pl: .5,
138
- }, children: helperText }))] }))] })));
139
- });
140
-
141
- export { Input as default };
142
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\r\nimport Label, { LabelProps } from '../Label';\r\n\r\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\r\n value?: string;\r\n type?: TagProps<'input'>['type'];\r\n name?: string;\r\n placeholder?: string;\r\n readOnly?: boolean;\r\n autoFocus?: boolean;\r\n autoComplete?: string;\r\n label?: useBreakpointPropsType<string>;\r\n\r\n onFocus?: (e: React.FocusEvent<any>) => void;\r\n onBlur?: (e: React.FocusEvent<any>) => void;\r\n onChange?: (e: React.ChangeEvent<any>) => void;\r\n onInput?: (e: React.FormEvent<any>) => void;\r\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\r\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\r\n\r\n rows?: useBreakpointPropsType<number>;\r\n minRows?: useBreakpointPropsType<number>;\r\n maxRows?: useBreakpointPropsType<number>;\r\n fullWidth?: boolean;\r\n\r\n startIcon?: useBreakpointPropsType<ReactElement>;\r\n endIcon?: useBreakpointPropsType<ReactElement>;\r\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\r\n focused?: boolean;\r\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\r\n error?: boolean;\r\n helperText?: useBreakpointPropsType<string>;\r\n multiline?: boolean;\r\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n\r\n refs?: {\r\n inputRoot?: React.Ref<\"div\">;\r\n label?: React.Ref<\"label\">;\r\n rootContainer?: React.Ref<\"div\">;\r\n // startIcon?: React.Ref<ReactElement>;\r\n // endIcon?: React.Ref<ReactElement>;\r\n // inputContainer?: React.Ref<\"div\">;\r\n input?: React.Ref<'input' | 'textarea'>;\r\n helperText?: React.Ref<\"div\">;\r\n };\r\n\r\n slotProps?: {\r\n inputRoot?: Omit<TagProps<\"div\">, \"children\">;\r\n label?: Omit<LabelProps, \"children\">;\r\n rootContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n // startIcon?: Omit<TagProps<'div'>, \"children\">;\r\n // endIcon?: Omit<TagProps<'div'>, \"children\">;\r\n // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n helperText?: Omit<TagProps<\"div\">, \"children\">;\r\n input?: Partial<TagProps<T>>;\r\n }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n let [{\r\n startIcon,\r\n endIcon,\r\n iconPlacement,\r\n color,\r\n label,\r\n name,\r\n placeholder,\r\n type,\r\n readOnly,\r\n autoFocus,\r\n autoComplete,\r\n onFocus,\r\n onBlur,\r\n onChange,\r\n onKeyDown,\r\n onKeyUp,\r\n\r\n focused,\r\n disabled,\r\n variant,\r\n error,\r\n helperText,\r\n multiline,\r\n size,\r\n rows,\r\n minRows,\r\n maxRows,\r\n fullWidth,\r\n slotProps,\r\n\r\n ...rest\r\n }, theme] = useInterface<any>(\"Input\", props, {})\r\n\r\n const _p: any = {}\r\n if (startIcon) _p.startIcon = startIcon\r\n if (endIcon) _p.endIcon = endIcon\r\n if (iconPlacement) _p.iconPlacement = iconPlacement\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n if (helperText) _p.helperText = helperText\r\n if (size) _p.size = size\r\n if (rows) _p.rows = rows\r\n if (minRows) _p.minRows = minRows\r\n if (maxRows) _p.maxRows = maxRows\r\n const p: any = useBreakpointProps(_p)\r\n startIcon = p.startIcon\r\n endIcon = p.endIcon\r\n iconPlacement = p.iconPlacement\r\n color = p.color ?? \"brand\"\r\n variant = p.variant ?? \"fill\"\r\n helperText = p.helperText\r\n size = p.size ?? 'medium'\r\n rows = p.rows\r\n minRows = p.minRows\r\n maxRows = p.maxRows\r\n\r\n iconPlacement ??= multiline ? \"end\" : \"center\"\r\n if (!value) iconPlacement = 'center'\r\n\r\n const [_focused, setFocused] = useState(false)\r\n let _focus = focused || _focused\r\n const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\r\n const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\r\n\r\n useEffect(() => {\r\n if (autoFocus) {\r\n setTimeout(() => {\r\n inputRef.current?.focus()\r\n }, 100);\r\n }\r\n }, [autoFocus])\r\n\r\n let _rows = useMemo(() => {\r\n if (rows) return rows\r\n if (value && multiline) {\r\n let lines = (value as string).split(`\\n`).length\r\n if (minRows && minRows > lines) {\r\n return minRows\r\n } else if (maxRows && maxRows < lines) {\r\n return maxRows\r\n } else {\r\n return lines\r\n }\r\n }\r\n }, [value]) || 1\r\n\r\n const sizes: any = {\r\n small: {\r\n height: 38,\r\n gap: .5,\r\n fontSize: 'button',\r\n },\r\n medium: {\r\n height: 46,\r\n gap: 1,\r\n fontSize: \"text\"\r\n },\r\n large: {\r\n height: 52,\r\n gap: 1,\r\n fontSize: 'big'\r\n }\r\n }\r\n\r\n const _size = sizes[size]\r\n let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\r\n borderColor = error ? \"danger.primary\" : borderColor\r\n let multiprops: any = {}\r\n if (multiline) {\r\n multiprops = {\r\n rows: _rows,\r\n sx: {\r\n resize: \"none\"\r\n }\r\n }\r\n }\r\n\r\n return (\r\n <Tag\r\n width={fullWidth ? \"100%\" : \"auto\"}\r\n {...rest}\r\n ref={ref}\r\n baseClass=\"input-wrapper\"\r\n sxr={{\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: .5,\r\n }}\r\n >\r\n {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\r\n <Tag\r\n {...slotProps?.inputRoot}\r\n ref={refs?.inputRoot}\r\n baseClass={'input-root'}\r\n sxr={{\r\n width: \"100%\",\r\n overflow: \"hidden\",\r\n }}\r\n >\r\n <Tag\r\n {...slotProps?.rootContainer}\r\n ref={refs?.rootContainer}\r\n baseClass='input-root-container'\r\n sxr={{\r\n width: \"100%\",\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n flexWrap: \"nowrap\",\r\n transitionProperty: \"border, box-shadow, background\",\r\n bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\r\n border: variant === \"text\" ? 0 : \"1px solid\",\r\n borderColor: borderColor,\r\n borderRadius: 1,\r\n px: 1,\r\n // py: .5,\r\n ..._size,\r\n height: multiline ? \"auto\" : _size.height,\r\n minHeight: _size.height,\r\n \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n \"-webkit-text-fill-color\": \"text.primary\",\r\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n transition: \"background-color 5000s ease-in-out 0s\"\r\n } as any,\r\n \"& textarea\": {\r\n resize: \"none\"\r\n },\r\n\r\n // ...(!!startIcon && {\r\n // \"& :first-child\": {\r\n // height: \"100%\",\r\n // alignItems: 'center',\r\n // justifyContent: \"center\",\r\n // display: \"flex\",\r\n // color: error ? \"danger.primary\" : \"text.secondary\",\r\n // flex: \"0 0 auto\",\r\n // },\r\n // }),\r\n\r\n // ...(!!endIcon && {\r\n // \"& :last-child\": {\r\n // height: \"100%\",\r\n // alignItems: 'center',\r\n // justifyContent: \"center\",\r\n // display: 'flex',\r\n // color: error ? \"danger.primary\" : \"text.secondary\",\r\n // flex: \"0 0 auto\",\r\n // },\r\n // })\r\n\r\n }}\r\n disabled={disabled || false}\r\n >\r\n {/* {startIcon && <Tag\r\n {...slotProps?.startIcon}\r\n ref={refs?.startIcon}\r\n flex={\"0 0 auto\"}\r\n sxr={{\r\n height: \"100%\",\r\n alignItems: 'center',\r\n justifyContent: \"center\",\r\n display: \"flex\",\r\n color: error ? \"danger.primary\" : \"text.secondary\",\r\n }}\r\n baseClass=\"input-start-icon\"\r\n >{startIcon}</Tag>} */}\r\n {startIcon}\r\n {/* <Tag\r\n {...slotProps?.inputContainer}\r\n ref={refs?.inputContainer}\r\n baseClass='input-container'\r\n flex={1}\r\n sxr={{\r\n width: \"100%\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n flex: 1,\r\n minHeight: _size.height,\r\n \"& textarea\": {\r\n resize: \"none\"\r\n },\r\n \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n \"-webkit-text-fill-color\": \"text.primary\",\r\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n transition: \"background-color 5000s ease-in-out 0s\"\r\n } as any\r\n }}\r\n >\r\n \r\n </Tag> */}\r\n <Tag\r\n {...slotProps?.input}\r\n ref={inputMergeRef}\r\n baseClass='input'\r\n component={multiline ? 'textarea' : 'input'}\r\n {...multiprops}\r\n sxr={{\r\n border: 0,\r\n outline: 0,\r\n bgcolor: \"transparent\",\r\n color: error ? \"danger.primary\" : \"text.primary\",\r\n fontSize: _size.fontSize,\r\n height: multiline ? \"auto\" : _size.height + \"px!important\",\r\n width: \"100%\",\r\n maxHeight: 200,\r\n }}\r\n value={value}\r\n onChange={onChange}\r\n onFocus={(e: any) => {\r\n focused ?? setFocused(true)\r\n onFocus && onFocus(e)\r\n }}\r\n onBlur={(e: any) => {\r\n focused ?? setFocused(false)\r\n onBlur && onBlur(e)\r\n }}\r\n onKeyDown={onKeyDown}\r\n onKeyUp={onKeyUp}\r\n name={name}\r\n placeholder={placeholder}\r\n type={type}\r\n readOnly={readOnly}\r\n autoComplete={autoComplete}\r\n />\r\n {/* {endIcon && <Tag\r\n {...slotProps?.endIcon}\r\n ref={refs?.endIcon}\r\n flex={\"0 0 auto\"}\r\n sxr={{\r\n height: \"100%\",\r\n alignItems: 'center',\r\n justifyContent: \"center\",\r\n display: 'flex',\r\n color: error ? \"danger.primary\" : \"text.secondary\",\r\n }}\r\n baseClass=\"input-end-icon\"\r\n >{endIcon}</Tag>} */}\r\n {endIcon}\r\n </Tag>\r\n {helperText && <Tag\r\n {...slotProps?.helperText}\r\n ref={refs?.helperText}\r\n baseClass=\"input-helper-text\"\r\n sxr={{\r\n color: error ? \"danger.primary\" : \"text.primary\",\r\n fontSize: \"small\",\r\n lineHeight: \"text\",\r\n fontWeight: 'text',\r\n pl: .5,\r\n }}\r\n >{helperText}</Tag>}\r\n </Tag>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Input\r\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,30 +0,0 @@
1
- "use client";
2
- import { jsx } from 'react/jsx-runtime';
3
- import React from 'react';
4
- import Input from '../Input/index.mjs';
5
- import UnfoldMore from '@xanui/icons/UnfoldMore';
6
-
7
- const InputNumber = React.forwardRef((props, ref) => {
8
- const isNumeric = !isNaN(Number(props.value));
9
- let p = {};
10
- if (!isNumeric) {
11
- p.error = true;
12
- p.helperText = "Value must be numeric";
13
- }
14
- return (jsx(Input, Object.assign({}, props, p, { ref: ref, endIcon: jsx(UnfoldMore, {}), onKeyDown: (e) => {
15
- props.onKeyDown && props.onKeyDown(e);
16
- if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
17
- return;
18
- e.preventDefault();
19
- let val = parseInt(props.value || '0');
20
- val = e.key === 'ArrowUp' ? val + 1 : val - 1;
21
- e.target.value = String(val);
22
- props.onChange && props.onChange(e);
23
- }, value: props.value, onChange: e => {
24
- e.target.value = e.target.value.replace(/\D/g, '');
25
- props.onChange && props.onChange(e);
26
- } })));
27
- });
28
-
29
- export { InputNumber as default };
30
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["\"use client\"\r\nimport React from 'react'\r\nimport Input, { InputProps } from '../Input'\r\nimport UnfoldMore from '@xanui/icons/UnfoldMore'\r\n\r\nexport type InputNumberProps = InputProps\r\n\r\nconst InputNumber = React.forwardRef((props: InputNumberProps, ref: React.Ref<any>) => {\r\n const isNumeric = !isNaN(Number(props.value));\r\n\r\n let p: any = {}\r\n if (!isNumeric) {\r\n p.error = true;\r\n p.helperText = \"Value must be numeric\";\r\n }\r\n\r\n return (\r\n <Input\r\n {...props}\r\n {...p}\r\n ref={ref}\r\n endIcon={<UnfoldMore />}\r\n onKeyDown={(e: any) => {\r\n props.onKeyDown && props.onKeyDown(e);\r\n if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\r\n e.preventDefault();\r\n let val = parseInt(props.value || '0');\r\n val = e.key === 'ArrowUp' ? val + 1 : val - 1;\r\n e.target.value = String(val);\r\n props.onChange && props.onChange(e);\r\n }}\r\n value={props.value}\r\n onChange={e => {\r\n e.target.value = e.target.value.replace(/\\D/g, '')\r\n props.onChange && props.onChange(e);\r\n }}\r\n />\r\n )\r\n})\r\n\r\nexport default InputNumber\r\n"],"names":[],"mappings":";;;;;;AAOA;AACG;;;AAIG;AACA;;;;;;;;AAcM;;;;AAMA;;;AAKZ;;"}
package/Label/index.mjs DELETED
@@ -1,22 +0,0 @@
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 Label = React.forwardRef((_a, ref) => {
7
- var { children } = _a, rest = __rest(_a, ["children"]);
8
- return jsx(Tag, Object.assign({ component: 'label' }, rest, { sxr: {
9
- display: "inline-flex",
10
- alignItems: "center",
11
- verticalAlign: "middle",
12
- fontSize: "text",
13
- gap: .4,
14
- color: "text.primary",
15
- userSelect: "none",
16
- cursor: "pointer",
17
- fontWeight: "500",
18
- }, baseClass: 'label', ref: ref, children: children }));
19
- });
20
-
21
- export { Label as default };
22
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\r\n\r\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\r\n return <Tag\r\n component='label'\r\n {...rest}\r\n sxr={{\r\n display: \"inline-flex\",\r\n alignItems: \"center\",\r\n verticalAlign: \"middle\",\r\n fontSize: \"text\",\r\n gap: .4,\r\n color: \"text.primary\",\r\n userSelect: \"none\",\r\n cursor: \"pointer\",\r\n fontWeight: \"500\",\r\n }}\r\n baseClass='label'\r\n ref={ref}\r\n >{children}</Tag>\r\n})\r\n\r\nexport default Label"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,KAAK;SACpB,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC;;;;"}
package/Layer/index.mjs DELETED
@@ -1,60 +0,0 @@
1
- "use client";
2
- import { __rest } from 'tslib';
3
- import { jsx, Fragment } from 'react/jsx-runtime';
4
- import { useState, useEffect } from 'react';
5
- import { useInterface, useBreakpointProps, Transition, Tag, Renderar } from '@xanui/core';
6
- import useBlurCss from '../useBlurCss/index.mjs';
7
- import ClickOutside from '../ClickOutside/index.mjs';
8
-
9
- const Layer = (_a) => {
10
- var _b, _c, _d;
11
- var { children, open } = _a, props = __rest(_a, ["children", "open"]);
12
- let [{ onClickOutside, placement, transition, zIndex, blur, blurMode, onOpen, onOpened, onClose, onClosed, slotProps }] = useInterface("Layer", props, {});
13
- const _p = {};
14
- if (blur)
15
- _p.blur = blur;
16
- if (blurMode)
17
- _p.blurMode = blurMode;
18
- const p = useBreakpointProps(_p);
19
- blur = p.blur;
20
- blurMode = p.blurMode;
21
- const [closed, setClosed] = useState(!open);
22
- placement = placement || "bottom-left";
23
- const blurCss = blur ? useBlurCss(blur, blurMode) : {};
24
- useEffect(() => {
25
- if (closed && open) {
26
- setClosed(false);
27
- }
28
- }, [open]);
29
- if (closed)
30
- return jsx(Fragment, {});
31
- let duration = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _b === void 0 ? void 0 : _b.duration) || 300;
32
- let delay = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _c === void 0 ? void 0 : _c.delay) || 0;
33
- let content = jsx(Transition, Object.assign({ duration: duration, delay: delay, easing: "standard", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
34
- setClosed(true);
35
- onClosed && onClosed();
36
- }, children: children }));
37
- return (jsx(Transition, { duration: duration, delay: delay, easing: "smooth", variant: "fade", open: open, children: jsx(Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0, width: "100%", height: "100%" }), blurCss), children: onClickOutside ? jsx(ClickOutside, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: content })) : content })) }));
38
- };
39
- Layer.open = (children, props) => {
40
- const l = Renderar.render(Layer, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
41
- Renderar.unrender(Layer);
42
- if (props === null || props === void 0 ? void 0 : props.onClosed) {
43
- props.onClosed();
44
- }
45
- } }));
46
- return {
47
- open: () => {
48
- l.updateProps({ open: true });
49
- },
50
- close: () => {
51
- l.updateProps({ open: false });
52
- },
53
- };
54
- };
55
- Layer.close = () => {
56
- Renderar.unrender(Layer);
57
- };
58
-
59
- export { Layer as default };
60
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useState } from 'react'\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\r\nimport useBlurCss from '../useBlurCss';\r\nimport { Renderar } from \"@xanui/core\";\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\nexport type LayerProps = {\r\n open: boolean;\r\n children: ReactNode;\r\n transition?: TransitionProps['variant'];\r\n zIndex?: number;\r\n blur?: useBreakpointPropsType<number>\r\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\r\n onClickOutside?: () => void;\r\n onOpen?: Function;\r\n onOpened?: Function;\r\n onClose?: Function;\r\n onClosed?: Function;\r\n slotProps?: {\r\n root?: Omit<TagProps<\"div\">, \"children\">;\r\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\r\n content?: Omit<TagProps<\"div\">, \"children\">;\r\n clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\r\n }\r\n}\r\n\r\nconst Layer = ({ children, open, ...props }: LayerProps) => {\r\n let [{\r\n onClickOutside,\r\n placement,\r\n transition,\r\n zIndex,\r\n blur,\r\n blurMode,\r\n onOpen,\r\n onOpened,\r\n onClose,\r\n onClosed,\r\n slotProps\r\n }] = useInterface<any>(\"Layer\", props, {})\r\n\r\n const _p: any = {}\r\n if (blur) _p.blur = blur\r\n if (blurMode) _p.blurMode = blurMode\r\n const p: any = useBreakpointProps(_p)\r\n\r\n blur = p.blur\r\n blurMode = p.blurMode\r\n\r\n const [closed, setClosed] = useState(!open)\r\n placement = placement || \"bottom-left\"\r\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\r\n\r\n useEffect(() => {\r\n if (closed && open) {\r\n setClosed(false)\r\n }\r\n }, [open])\r\n\r\n if (closed) return <></>\r\n let duration = slotProps?.transition?.duration || 300\r\n let delay = slotProps?.transition?.delay || 0\r\n\r\n let content = <Transition\r\n duration={duration}\r\n delay={delay}\r\n easing=\"standard\"\r\n variant={transition || \"zoomOver\"}\r\n {...slotProps?.transition}\r\n open={open}\r\n onOpen={onOpen}\r\n onOpened={onOpened}\r\n onClose={onClose}\r\n onClosed={() => {\r\n setClosed(true)\r\n onClosed && onClosed()\r\n }}\r\n >\r\n {children}\r\n </Transition>\r\n\r\n return (\r\n <Transition\r\n duration={duration}\r\n delay={delay}\r\n easing=\"smooth\"\r\n variant={\"fade\"}\r\n open={open}\r\n >\r\n <Tag\r\n baseClass=\"layer\"\r\n {...slotProps?.root}\r\n sxr={{\r\n ...slotProps?.root?.sx,\r\n position: \"fixed\",\r\n zIndex: 1500 + (zIndex || 0),\r\n top: 0,\r\n left: 0,\r\n bottom: 0,\r\n right: 0,\r\n width: \"100%\",\r\n height: \"100%\",\r\n ...blurCss\r\n }}\r\n >\r\n {\r\n onClickOutside ? <ClickOutside\r\n {...slotProps?.clickOutside}\r\n onClickOutside={onClickOutside || (() => { })}\r\n >\r\n {content}\r\n </ClickOutside> : content\r\n }\r\n </Tag>\r\n </Transition>\r\n )\r\n}\r\n\r\n\r\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\r\n const l = Renderar.render(Layer as any, {\r\n open: true,\r\n ...props,\r\n children,\r\n onClosed: () => {\r\n Renderar.unrender(Layer as any)\r\n if (props?.onClosed) {\r\n props.onClosed()\r\n }\r\n }\r\n })\r\n return {\r\n open: () => {\r\n l.updateProps({ open: true })\r\n },\r\n close: () => {\r\n l.updateProps({ open: false })\r\n },\r\n }\r\n}\r\nLayer.close = () => {\r\n Renderar.unrender(Layer as any)\r\n}\r\nexport default Layer"],"names":[],"mappings":";;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
@@ -1,57 +0,0 @@
1
- "use client";
2
- import { __rest } from 'tslib';
3
- import { jsx } from 'react/jsx-runtime';
4
- import React, { useId } from 'react';
5
- import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
6
-
7
- const LineProgress = React.forwardRef((_a, ref) => {
8
- var _b, _c;
9
- var { children } = _a, props = __rest(_a, ["children"]);
10
- const uid = "line-progress" + useId().replace(":", "");
11
- let [{ color, value, thumbSize, hideTrack, speed }] = useInterface("LineProgress", props, {});
12
- const _p = {};
13
- if (thumbSize)
14
- _p.thumbSize = thumbSize;
15
- if (color)
16
- _p.color = color;
17
- if (value)
18
- _p.value = value;
19
- if (hideTrack)
20
- _p.hideTrack = hideTrack;
21
- if (speed)
22
- _p.speed = speed;
23
- const p = useBreakpointProps(_p);
24
- thumbSize = (_b = p.thumbSize) !== null && _b !== void 0 ? _b : 4;
25
- color = (_c = p.color) !== null && _c !== void 0 ? _c : "brand";
26
- value = p.value;
27
- hideTrack = p.hideTrack;
28
- speed = p.speed;
29
- let isVal = typeof value === 'number';
30
- if (isVal && value > 100)
31
- value = 100;
32
- return (jsx(Tag, { baseClass: 'line-progress', sxr: {
33
- display: "flex",
34
- alignItems: "center",
35
- width: '100%',
36
- height: thumbSize,
37
- position: "relative",
38
- overflow: "hidden",
39
- bgcolor: hideTrack ? "transparent" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),
40
- radius: 2,
41
- }, ref: ref, children: jsx(Tag, { component: "span", baseClass: "line-progress-thumb", sxr: {
42
- bgcolor: color === 'default' ? `divider` : `${color}`,
43
- width: isVal ? `${value}%` : "50%",
44
- height: thumbSize,
45
- position: "absolute",
46
- left: 0,
47
- animation: isVal ? "none" : `${uid} ${speed !== null && speed !== void 0 ? speed : 1}s linear infinite`,
48
- [`@keyframes ${uid}`]: {
49
- "0%": { left: "-40%" },
50
- "50%": { left: "20%", width: "80%" },
51
- "100%": { left: "100%", width: "100%" }
52
- }
53
- } }) }));
54
- });
55
-
56
- export { LineProgress as default };
57
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement, useId } from \"react\"\r\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\nexport type LineProgressProps = {\r\n children?: ReactElement;\r\n thumbSize?: useBreakpointPropsType<number>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n value?: useBreakpointPropsType<number>;\r\n hideTrack?: useBreakpointPropsType<boolean>;\r\n speed?: useBreakpointPropsType<number>;\r\n}\r\n\r\n\r\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\r\n const uid = \"line-progress\" + useId().replace(\":\", \"\")\r\n let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\r\n const _p: any = {}\r\n if (thumbSize) _p.thumbSize = thumbSize\r\n if (color) _p.color = color\r\n if (value) _p.value = value\r\n if (hideTrack) _p.hideTrack = hideTrack\r\n if (speed) _p.speed = speed\r\n const p: any = useBreakpointProps(_p)\r\n\r\n thumbSize = p.thumbSize ?? 4\r\n color = p.color ?? \"brand\"\r\n value = p.value\r\n hideTrack = p.hideTrack\r\n speed = p.speed\r\n\r\n let isVal = typeof value === 'number'\r\n if (isVal && (value as number) > 100) value = 100\r\n\r\n return (\r\n <Tag\r\n baseClass='line-progress'\r\n sxr={{\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n width: '100%',\r\n height: thumbSize,\r\n position: \"relative\",\r\n overflow: \"hidden\",\r\n bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),\r\n radius: 2,\r\n }}\r\n ref={ref}\r\n >\r\n <Tag\r\n component=\"span\"\r\n baseClass=\"line-progress-thumb\"\r\n sxr={{\r\n bgcolor: color === 'default' ? `divider` : `${color}`,\r\n width: isVal ? `${value}%` : \"50%\",\r\n height: thumbSize,\r\n position: \"absolute\",\r\n left: 0,\r\n animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\r\n [`@keyframes ${uid}`]: {\r\n \"0%\": { left: \"-40%\" },\r\n \"50%\": { left: \"20%\", width: \"80%\" },\r\n \"100%\": { left: \"100%\", width: \"100%\" }\r\n }\r\n }}\r\n />\r\n </Tag >\r\n )\r\n})\r\n\r\nexport default LineProgress\r\n\r\n"],"names":[],"mappings":";;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
-
3
- // ListContext.ts
4
- const ListContext = React.createContext(null);
5
- const useListContext = () => React.useContext(ListContext);
6
-
7
- export { ListContext, useListContext };
8
- //# sourceMappingURL=ListContext.mjs.map