@xanui/ui 1.1.15 → 1.1.16

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 (16) hide show
  1. package/IconButton/index.js +7 -2
  2. package/IconButton/index.js.map +1 -1
  3. package/IconButton/index.mjs +7 -2
  4. package/IconButton/index.mjs.map +1 -1
  5. package/Input/index.js +1 -1
  6. package/Input/index.js.map +1 -1
  7. package/Input/index.mjs +1 -1
  8. package/Input/index.mjs.map +1 -1
  9. package/TablePagination/index.d.ts +8 -7
  10. package/TablePagination/index.js.map +1 -1
  11. package/TablePagination/index.mjs.map +1 -1
  12. package/Tabs/index.js +13 -11
  13. package/Tabs/index.js.map +1 -1
  14. package/Tabs/index.mjs +13 -11
  15. package/Tabs/index.mjs.map +1 -1
  16. package/package.json +1 -1
package/IconButton/index.js CHANGED
@@ -49,9 +49,14 @@ const IconButton = React.forwardRef((_a, ref) => {
49
49
  alignItems: "center",
50
50
  justifyContent: "center",
51
51
  bgcolor: "transparent",
52
- fontSize: (size / 5) * 2,
52
+ fontSize: Math.round((size / 3) * 2),
53
53
  "& svg": {
54
- fontSize: (size / 3) * 2
54
+ fontSize: "1em",
55
+ width: "1em",
56
+ height: "1em",
57
+ display: "block",
58
+ pointerEvents: "none",
59
+ verticalAlign: "middle",
55
60
  }
56
61
  }, hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), children: children })));
57
62
  });
package/IconButton/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","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\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 display: \"inline-flex\",\r\n flexDirection: \"row\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n bgcolor: \"transparent\",\r\n fontSize: (size / 5) * 2,\r\n \"& svg\": {\r\n fontSize: (size / 3) * 2\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;;;;AAcK;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACH;;AAUjB;;"}
1
+ {"version":3,"file":"index.js","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\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 display: \"inline-flex\",\r\n flexDirection: \"row\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n bgcolor: \"transparent\",\r\n fontSize: Math.round((size / 3) * 2),\r\n \"& svg\": {\r\n fontSize: \"1em\",\r\n width: \"1em\",\r\n height: \"1em\",\r\n display: \"block\",\r\n pointerEvents: \"none\",\r\n verticalAlign: \"middle\",\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;;;;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
@@ -47,9 +47,14 @@ const IconButton = React.forwardRef((_a, ref) => {
47
47
  alignItems: "center",
48
48
  justifyContent: "center",
49
49
  bgcolor: "transparent",
50
- fontSize: (size / 5) * 2,
50
+ fontSize: Math.round((size / 3) * 2),
51
51
  "& svg": {
52
- fontSize: (size / 3) * 2
52
+ fontSize: "1em",
53
+ width: "1em",
54
+ height: "1em",
55
+ display: "block",
56
+ pointerEvents: "none",
57
+ verticalAlign: "middle",
53
58
  }
54
59
  }, hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), children: children })));
55
60
  });
package/IconButton/index.mjs.map CHANGED
@@ -1 +1 @@
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\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 display: \"inline-flex\",\r\n flexDirection: \"row\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n bgcolor: \"transparent\",\r\n fontSize: (size / 5) * 2,\r\n \"& svg\": {\r\n fontSize: (size / 3) * 2\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;;;;AAcK;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACH;;AAUjB;;"}
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\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 display: \"inline-flex\",\r\n flexDirection: \"row\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n bgcolor: \"transparent\",\r\n fontSize: Math.round((size / 3) * 2),\r\n \"& svg\": {\r\n fontSize: \"1em\",\r\n width: \"1em\",\r\n height: \"1em\",\r\n display: \"block\",\r\n pointerEvents: \"none\",\r\n verticalAlign: \"middle\",\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;;;;AAcK;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;AACH;;AAUjB;;"}
package/Input/index.js CHANGED
@@ -111,7 +111,7 @@ const Input = React.forwardRef((_a, ref) => {
111
111
  flexDirection: "row",
112
112
  alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,
113
113
  flexWrap: "nowrap",
114
- minWidth: 150,
114
+ // minWidth: 100,
115
115
  transitionProperty: "border, box-shadow, background",
116
116
  bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary",
117
117
  border: variant === "text" ? 0 : "1px solid",
package/Input/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\r\nimport Text from '../Text';\r\n\r\n\r\n\r\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\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 containerRef?: MutableRefObject<HTMLDivElement | undefined>;\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 rows?: useBreakpointPropsType<number>;\r\n minRows?: useBreakpointPropsType<number>;\r\n maxRows?: useBreakpointPropsType<number>;\r\n slotProps?: {\r\n container?: Omit<TagProps<\"div\">, \"children\">\r\n }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n let [{\r\n startIcon,\r\n endIcon,\r\n iconPlacement,\r\n onFocus,\r\n color,\r\n onBlur,\r\n focused,\r\n containerRef,\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 slotProps,\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 ref ??= useRef(null);\r\n iconPlacement ??= multiline ? \"end\" : \"center\"\r\n if (!value) iconPlacement = 'center'\r\n\r\n const [_focused, setFocused] = useState(false)\r\n const conRef: any = useRef(null)\r\n let _focus = focused || _focused\r\n\r\n useEffect(() => {\r\n if (containerRef) {\r\n (containerRef as any).current = conRef?.current\r\n }\r\n }, [containerRef])\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: 40,\r\n gap: .5,\r\n fontSize: 'button',\r\n },\r\n medium: {\r\n height: 48,\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 useEffect(() => {\r\n if ((ref as any).current) {\r\n (ref as any).current.style.height = \"auto\";\r\n (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\r\n }\r\n }, [value]);\r\n\r\n return (\r\n <Tag\r\n baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\r\n >\r\n <Tag\r\n {...slotProps?.container}\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n flexWrap: \"nowrap\",\r\n minWidth: 150,\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 }}\r\n baseClass='input-container'\r\n disabled={disabled || false}\r\n ref={conRef}\r\n {..._size}\r\n height={multiline ? \"auto\" : _size.height}\r\n minHeight={_size.height}\r\n >\r\n {startIcon && <Tag\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 <Tag\r\n flex={1}\r\n sxr={{\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 <Tag\r\n component={multiline ? 'textarea' : 'input'}\r\n {...multiprops}\r\n {...rest}\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 baseClass='input-box'\r\n ref={ref}\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 />\r\n </Tag>\r\n {endIcon && <Tag\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 </Tag>\r\n {helperText && <Text\r\n pl={.5}\r\n className=\"input-helper-text\"\r\n fontSize=\"small\"\r\n color={error ? \"danger.primary\" : \"text.primary\"}\r\n >{helperText}</Text>}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Input\r\n"],"names":[],"mappings":";;;;;;;;;AA2BA;;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;AACA;AACA;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;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\r\nimport Text from '../Text';\r\n\r\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\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 containerRef?: MutableRefObject<HTMLDivElement | undefined>;\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 rows?: useBreakpointPropsType<number>;\r\n minRows?: useBreakpointPropsType<number>;\r\n maxRows?: useBreakpointPropsType<number>;\r\n slotProps?: {\r\n container?: Omit<TagProps<\"div\">, \"children\">\r\n }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n let [{\r\n startIcon,\r\n endIcon,\r\n iconPlacement,\r\n onFocus,\r\n color,\r\n onBlur,\r\n focused,\r\n containerRef,\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 slotProps,\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 ref ??= useRef(null);\r\n iconPlacement ??= multiline ? \"end\" : \"center\"\r\n if (!value) iconPlacement = 'center'\r\n\r\n const [_focused, setFocused] = useState(false)\r\n const conRef: any = useRef(null)\r\n let _focus = focused || _focused\r\n\r\n useEffect(() => {\r\n if (containerRef) {\r\n (containerRef as any).current = conRef?.current\r\n }\r\n }, [containerRef])\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: 40,\r\n gap: .5,\r\n fontSize: 'button',\r\n },\r\n medium: {\r\n height: 48,\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 useEffect(() => {\r\n if ((ref as any).current) {\r\n (ref as any).current.style.height = \"auto\";\r\n (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\r\n }\r\n }, [value]);\r\n\r\n return (\r\n <Tag\r\n baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\r\n >\r\n <Tag\r\n {...slotProps?.container}\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n flexWrap: \"nowrap\",\r\n // minWidth: 100,\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 }}\r\n baseClass='input-container'\r\n disabled={disabled || false}\r\n ref={conRef}\r\n {..._size}\r\n height={multiline ? \"auto\" : _size.height}\r\n minHeight={_size.height}\r\n >\r\n {startIcon && <Tag\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 <Tag\r\n flex={1}\r\n sxr={{\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 <Tag\r\n component={multiline ? 'textarea' : 'input'}\r\n {...multiprops}\r\n {...rest}\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 baseClass='input-box'\r\n ref={ref}\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 />\r\n </Tag>\r\n {endIcon && <Tag\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 </Tag>\r\n {helperText && <Text\r\n pl={.5}\r\n className=\"input-helper-text\"\r\n fontSize=\"small\"\r\n color={error ? \"danger.primary\" : \"text.primary\"}\r\n >{helperText}</Text>}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Input\r\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
@@ -109,7 +109,7 @@ const Input = React.forwardRef((_a, ref) => {
109
109
  flexDirection: "row",
110
110
  alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,
111
111
  flexWrap: "nowrap",
112
- minWidth: 150,
112
+ // minWidth: 100,
113
113
  transitionProperty: "border, box-shadow, background",
114
114
  bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary",
115
115
  border: variant === "text" ? 0 : "1px solid",
package/Input/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\r\nimport Text from '../Text';\r\n\r\n\r\n\r\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\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 containerRef?: MutableRefObject<HTMLDivElement | undefined>;\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 rows?: useBreakpointPropsType<number>;\r\n minRows?: useBreakpointPropsType<number>;\r\n maxRows?: useBreakpointPropsType<number>;\r\n slotProps?: {\r\n container?: Omit<TagProps<\"div\">, \"children\">\r\n }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n let [{\r\n startIcon,\r\n endIcon,\r\n iconPlacement,\r\n onFocus,\r\n color,\r\n onBlur,\r\n focused,\r\n containerRef,\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 slotProps,\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 ref ??= useRef(null);\r\n iconPlacement ??= multiline ? \"end\" : \"center\"\r\n if (!value) iconPlacement = 'center'\r\n\r\n const [_focused, setFocused] = useState(false)\r\n const conRef: any = useRef(null)\r\n let _focus = focused || _focused\r\n\r\n useEffect(() => {\r\n if (containerRef) {\r\n (containerRef as any).current = conRef?.current\r\n }\r\n }, [containerRef])\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: 40,\r\n gap: .5,\r\n fontSize: 'button',\r\n },\r\n medium: {\r\n height: 48,\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 useEffect(() => {\r\n if ((ref as any).current) {\r\n (ref as any).current.style.height = \"auto\";\r\n (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\r\n }\r\n }, [value]);\r\n\r\n return (\r\n <Tag\r\n baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\r\n >\r\n <Tag\r\n {...slotProps?.container}\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n flexWrap: \"nowrap\",\r\n minWidth: 150,\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 }}\r\n baseClass='input-container'\r\n disabled={disabled || false}\r\n ref={conRef}\r\n {..._size}\r\n height={multiline ? \"auto\" : _size.height}\r\n minHeight={_size.height}\r\n >\r\n {startIcon && <Tag\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 <Tag\r\n flex={1}\r\n sxr={{\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 <Tag\r\n component={multiline ? 'textarea' : 'input'}\r\n {...multiprops}\r\n {...rest}\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 baseClass='input-box'\r\n ref={ref}\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 />\r\n </Tag>\r\n {endIcon && <Tag\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 </Tag>\r\n {helperText && <Text\r\n pl={.5}\r\n className=\"input-helper-text\"\r\n fontSize=\"small\"\r\n color={error ? \"danger.primary\" : \"text.primary\"}\r\n >{helperText}</Text>}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Input\r\n"],"names":[],"mappings":";;;;;;;AA2BA;;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;AACA;AACA;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;;"}
1
+ {"version":3,"file":"index.mjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\r\nimport Text from '../Text';\r\n\r\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\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 containerRef?: MutableRefObject<HTMLDivElement | undefined>;\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 rows?: useBreakpointPropsType<number>;\r\n minRows?: useBreakpointPropsType<number>;\r\n maxRows?: useBreakpointPropsType<number>;\r\n slotProps?: {\r\n container?: Omit<TagProps<\"div\">, \"children\">\r\n }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n let [{\r\n startIcon,\r\n endIcon,\r\n iconPlacement,\r\n onFocus,\r\n color,\r\n onBlur,\r\n focused,\r\n containerRef,\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 slotProps,\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 ref ??= useRef(null);\r\n iconPlacement ??= multiline ? \"end\" : \"center\"\r\n if (!value) iconPlacement = 'center'\r\n\r\n const [_focused, setFocused] = useState(false)\r\n const conRef: any = useRef(null)\r\n let _focus = focused || _focused\r\n\r\n useEffect(() => {\r\n if (containerRef) {\r\n (containerRef as any).current = conRef?.current\r\n }\r\n }, [containerRef])\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: 40,\r\n gap: .5,\r\n fontSize: 'button',\r\n },\r\n medium: {\r\n height: 48,\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 useEffect(() => {\r\n if ((ref as any).current) {\r\n (ref as any).current.style.height = \"auto\";\r\n (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\r\n }\r\n }, [value]);\r\n\r\n return (\r\n <Tag\r\n baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\r\n >\r\n <Tag\r\n {...slotProps?.container}\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n flexWrap: \"nowrap\",\r\n // minWidth: 100,\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 }}\r\n baseClass='input-container'\r\n disabled={disabled || false}\r\n ref={conRef}\r\n {..._size}\r\n height={multiline ? \"auto\" : _size.height}\r\n minHeight={_size.height}\r\n >\r\n {startIcon && <Tag\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 <Tag\r\n flex={1}\r\n sxr={{\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 <Tag\r\n component={multiline ? 'textarea' : 'input'}\r\n {...multiprops}\r\n {...rest}\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 baseClass='input-box'\r\n ref={ref}\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 />\r\n </Tag>\r\n {endIcon && <Tag\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 </Tag>\r\n {helperText && <Text\r\n pl={.5}\r\n className=\"input-helper-text\"\r\n fontSize=\"small\"\r\n color={error ? \"danger.primary\" : \"text.primary\"}\r\n >{helperText}</Text>}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Input\r\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/TablePagination/index.d.ts CHANGED
@@ -3,18 +3,19 @@ import { IconButtonProps } from '../IconButton/index.js';
3
3
  import React from 'react';
4
4
  import { TagProps, useBreakpointPropsType, UseColorTemplateColor, UseColorTemplateType } from '@xanui/core';
5
5
 
6
+ type TablePaginationState = {
7
+ page: number;
8
+ perpage: number;
9
+ from: number;
10
+ to: number;
11
+ };
6
12
  type TablePaginationProps = Omit<TagProps, "children"> & {
7
13
  page: number;
8
14
  total: number;
9
15
  perpages?: number[];
10
16
  color?: useBreakpointPropsType<UseColorTemplateColor>;
11
17
  variant?: useBreakpointPropsType<UseColorTemplateType>;
12
- onChange?: (state: {
13
- page: number;
14
- perpage: number;
15
- from: number;
16
- to: number;
17
- }) => void;
18
+ onChange?: (state: TablePaginationState) => void;
18
19
  slotProps?: {
19
20
  button?: Omit<IconButtonProps, "children" | "color" | "variant">;
20
21
  select?: Omit<SelectProps, "value" | "onChange">;
@@ -23,4 +24,4 @@ type TablePaginationProps = Omit<TagProps, "children"> & {
23
24
  declare const TablePagination: React.ForwardRefExoticComponent<Omit<TablePaginationProps, "ref"> & React.RefAttributes<any>>;
24
25
 
25
26
  export { TablePagination as default };
26
- export type { TablePaginationProps };
27
+ export type { TablePaginationProps, TablePaginationState };
package/TablePagination/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport Text from '../Text'\r\nimport Select, { SelectProps } from '../Select'\r\nimport Option from '../Option'\r\nimport IconButton, { IconButtonProps } from '../IconButton'\r\nimport React, { useMemo, useState } from 'react'\r\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\r\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\r\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TablePaginationProps = Omit<TagProps, \"children\"> & {\r\n page: number;\r\n total: number;\r\n perpages?: number[];\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n onChange?: (state: { page: number, perpage: number, from: number, to: number }) => void;\r\n\r\n slotProps?: {\r\n button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\r\n select?: Omit<SelectProps, \"value\" | \"onChange\">;\r\n }\r\n}\r\n\r\nconst TablePagination = React.forwardRef(({ page, total, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\r\n let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\r\n color ??= \"default\"\r\n variant ??= \"fill\"\r\n perpages ??= [30, 50, 100]\r\n const [perpage, setPerpage] = useState(perpages[0] || 10)\r\n const isPerpage = perpages[0] && perpages.length >= 1\r\n\r\n const chunks = useMemo(() => {\r\n const chunks: any = [];\r\n let _page = 1;\r\n for (let from = 0; from < total; from += perpage) {\r\n const to = Math.min(from + perpage, total)\r\n chunks[_page] = { from: from + 1, to, page: _page, perpage }\r\n _page++\r\n }\r\n return chunks\r\n }, [perpage, total])\r\n\r\n if (!chunks.length) {\r\n return <></>\r\n }\r\n\r\n const current = chunks[page] || chunks[1]\r\n const next = chunks[page + 1]\r\n const prev = chunks[page - 1]\r\n if (!chunks[page]) {\r\n console.error(`Indvalid page`)\r\n }\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: 1,\r\n alignItems: \"center\"\r\n }}\r\n baseClass='table-pagination'\r\n ref={ref}\r\n >\r\n {\r\n isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\r\n <Text fontSize=\"button\">PER PAGE</Text>\r\n <Select\r\n {...slotProps?.select}\r\n slotProps={{\r\n ...slotProps?.select?.slotProps,\r\n input: {\r\n ...slotProps?.select?.slotProps?.input,\r\n slotProps: {\r\n container: {\r\n minWidth: \"auto\"\r\n }\r\n },\r\n width: perpage.toString().length * 10,\r\n size: \"small\",\r\n },\r\n }}\r\n value={perpage}\r\n onChange={(value: any) => {\r\n setPerpage(value);\r\n onChange && onChange(current)\r\n }}\r\n >\r\n {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\r\n </Select>\r\n </Tag>\r\n }\r\n <Tag\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: 1,\r\n alignItems: 'center'\r\n }}\r\n >\r\n <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\r\n <Text color=\"text.secondary\">of</Text>\r\n <Text fontSize=\"button\">{total}</Text>\r\n </Tag>\r\n <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\r\n <IconButton\r\n {...slotProps?.button}\r\n color={color}\r\n variant={variant}\r\n\r\n size={30}\r\n disabled={!prev}\r\n onClick={() => {\r\n (onChange && prev) && onChange(prev)\r\n }}\r\n >\r\n <PrevIcon />\r\n </IconButton>\r\n <IconButton\r\n {...slotProps?.button}\r\n color={color}\r\n variant={variant}\r\n size={30}\r\n disabled={!next}\r\n onClick={() => {\r\n (onChange && next) && onChange(next)\r\n }}\r\n >\r\n <NextIcon />\r\n </IconButton>\r\n </Tag>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;;;AA0BA;;;;;;AAII;AACA;AACA;AAEA;;;AAGI;AACI;AACA;AACA;;AAEJ;AACJ;AAEA;AACI;;;;;AAMJ;AACI;;AAGJ;AAIY;AACA;AACA;AACA;AACH;AAcuB;AACI;AACH;;;AAST;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAgBG;;;AAmBpB;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport Text from '../Text'\r\nimport Select, { SelectProps } from '../Select'\r\nimport Option from '../Option'\r\nimport IconButton, { IconButtonProps } from '../IconButton'\r\nimport React, { useMemo, useState } from 'react'\r\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\r\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\r\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TablePaginationState = { page: number, perpage: number, from: number, to: number }\r\nexport type TablePaginationProps = Omit<TagProps, \"children\"> & {\r\n page: number;\r\n total: number;\r\n perpages?: number[];\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n onChange?: (state: TablePaginationState) => void;\r\n\r\n slotProps?: {\r\n button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\r\n select?: Omit<SelectProps, \"value\" | \"onChange\">;\r\n }\r\n}\r\n\r\nconst TablePagination = React.forwardRef(({ page, total, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\r\n let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\r\n color ??= \"default\"\r\n variant ??= \"fill\"\r\n perpages ??= [30, 50, 100]\r\n const [perpage, setPerpage] = useState(perpages[0] || 10)\r\n const isPerpage = perpages[0] && perpages.length >= 1\r\n\r\n const chunks = useMemo(() => {\r\n const chunks: any = [];\r\n let _page = 1;\r\n for (let from = 0; from < total; from += perpage) {\r\n const to = Math.min(from + perpage, total)\r\n chunks[_page] = { from: from + 1, to, page: _page, perpage }\r\n _page++\r\n }\r\n return chunks\r\n }, [perpage, total])\r\n\r\n if (!chunks.length) {\r\n return <></>\r\n }\r\n\r\n const current = chunks[page] || chunks[1]\r\n const next = chunks[page + 1]\r\n const prev = chunks[page - 1]\r\n if (!chunks[page]) {\r\n console.error(`Indvalid page`)\r\n }\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: 1,\r\n alignItems: \"center\"\r\n }}\r\n baseClass='table-pagination'\r\n ref={ref}\r\n >\r\n {\r\n isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\r\n <Text fontSize=\"button\">PER PAGE</Text>\r\n <Select\r\n {...slotProps?.select}\r\n slotProps={{\r\n ...slotProps?.select?.slotProps,\r\n input: {\r\n ...slotProps?.select?.slotProps?.input,\r\n slotProps: {\r\n container: {\r\n minWidth: \"auto\"\r\n }\r\n },\r\n width: perpage.toString().length * 10,\r\n size: \"small\",\r\n },\r\n }}\r\n value={perpage}\r\n onChange={(value: any) => {\r\n setPerpage(value);\r\n onChange && onChange(current)\r\n }}\r\n >\r\n {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\r\n </Select>\r\n </Tag>\r\n }\r\n <Tag\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: 1,\r\n alignItems: 'center'\r\n }}\r\n >\r\n <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\r\n <Text color=\"text.secondary\">of</Text>\r\n <Text fontSize=\"button\">{total}</Text>\r\n </Tag>\r\n <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\r\n <IconButton\r\n {...slotProps?.button}\r\n color={color}\r\n variant={variant}\r\n\r\n size={30}\r\n disabled={!prev}\r\n onClick={() => {\r\n (onChange && prev) && onChange(prev)\r\n }}\r\n >\r\n <PrevIcon />\r\n </IconButton>\r\n <IconButton\r\n {...slotProps?.button}\r\n color={color}\r\n variant={variant}\r\n size={30}\r\n disabled={!next}\r\n onClick={() => {\r\n (onChange && next) && onChange(next)\r\n }}\r\n >\r\n <NextIcon />\r\n </IconButton>\r\n </Tag>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;;;AA2BA;;;;;;AAII;AACA;AACA;AAEA;;;AAGI;AACI;AACA;AACA;;AAEJ;AACJ;AAEA;AACI;;;;;AAMJ;AACI;;AAGJ;AAIY;AACA;AACA;AACA;AACH;AAcuB;AACI;AACH;;;AAST;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAgBG;;;AAmBpB;;"}
package/TablePagination/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport Text from '../Text'\r\nimport Select, { SelectProps } from '../Select'\r\nimport Option from '../Option'\r\nimport IconButton, { IconButtonProps } from '../IconButton'\r\nimport React, { useMemo, useState } from 'react'\r\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\r\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\r\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TablePaginationProps = Omit<TagProps, \"children\"> & {\r\n page: number;\r\n total: number;\r\n perpages?: number[];\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n onChange?: (state: { page: number, perpage: number, from: number, to: number }) => void;\r\n\r\n slotProps?: {\r\n button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\r\n select?: Omit<SelectProps, \"value\" | \"onChange\">;\r\n }\r\n}\r\n\r\nconst TablePagination = React.forwardRef(({ page, total, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\r\n let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\r\n color ??= \"default\"\r\n variant ??= \"fill\"\r\n perpages ??= [30, 50, 100]\r\n const [perpage, setPerpage] = useState(perpages[0] || 10)\r\n const isPerpage = perpages[0] && perpages.length >= 1\r\n\r\n const chunks = useMemo(() => {\r\n const chunks: any = [];\r\n let _page = 1;\r\n for (let from = 0; from < total; from += perpage) {\r\n const to = Math.min(from + perpage, total)\r\n chunks[_page] = { from: from + 1, to, page: _page, perpage }\r\n _page++\r\n }\r\n return chunks\r\n }, [perpage, total])\r\n\r\n if (!chunks.length) {\r\n return <></>\r\n }\r\n\r\n const current = chunks[page] || chunks[1]\r\n const next = chunks[page + 1]\r\n const prev = chunks[page - 1]\r\n if (!chunks[page]) {\r\n console.error(`Indvalid page`)\r\n }\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: 1,\r\n alignItems: \"center\"\r\n }}\r\n baseClass='table-pagination'\r\n ref={ref}\r\n >\r\n {\r\n isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\r\n <Text fontSize=\"button\">PER PAGE</Text>\r\n <Select\r\n {...slotProps?.select}\r\n slotProps={{\r\n ...slotProps?.select?.slotProps,\r\n input: {\r\n ...slotProps?.select?.slotProps?.input,\r\n slotProps: {\r\n container: {\r\n minWidth: \"auto\"\r\n }\r\n },\r\n width: perpage.toString().length * 10,\r\n size: \"small\",\r\n },\r\n }}\r\n value={perpage}\r\n onChange={(value: any) => {\r\n setPerpage(value);\r\n onChange && onChange(current)\r\n }}\r\n >\r\n {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\r\n </Select>\r\n </Tag>\r\n }\r\n <Tag\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: 1,\r\n alignItems: 'center'\r\n }}\r\n >\r\n <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\r\n <Text color=\"text.secondary\">of</Text>\r\n <Text fontSize=\"button\">{total}</Text>\r\n </Tag>\r\n <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\r\n <IconButton\r\n {...slotProps?.button}\r\n color={color}\r\n variant={variant}\r\n\r\n size={30}\r\n disabled={!prev}\r\n onClick={() => {\r\n (onChange && prev) && onChange(prev)\r\n }}\r\n >\r\n <PrevIcon />\r\n </IconButton>\r\n <IconButton\r\n {...slotProps?.button}\r\n color={color}\r\n variant={variant}\r\n size={30}\r\n disabled={!next}\r\n onClick={() => {\r\n (onChange && next) && onChange(next)\r\n }}\r\n >\r\n <NextIcon />\r\n </IconButton>\r\n </Tag>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;AA0BA;;;;;;AAII;AACA;AACA;AAEA;;;AAGI;AACI;AACA;AACA;;AAEJ;AACJ;AAEA;AACI;;;;;AAMJ;AACI;;AAGJ;AAIY;AACA;AACA;AACA;AACH;AAcuB;AACI;AACH;;;AAST;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAgBG;;;AAmBpB;;"}
1
+ {"version":3,"file":"index.mjs","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport Text from '../Text'\r\nimport Select, { SelectProps } from '../Select'\r\nimport Option from '../Option'\r\nimport IconButton, { IconButtonProps } from '../IconButton'\r\nimport React, { useMemo, useState } from 'react'\r\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\r\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\r\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TablePaginationState = { page: number, perpage: number, from: number, to: number }\r\nexport type TablePaginationProps = Omit<TagProps, \"children\"> & {\r\n page: number;\r\n total: number;\r\n perpages?: number[];\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n onChange?: (state: TablePaginationState) => void;\r\n\r\n slotProps?: {\r\n button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\r\n select?: Omit<SelectProps, \"value\" | \"onChange\">;\r\n }\r\n}\r\n\r\nconst TablePagination = React.forwardRef(({ page, total, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\r\n let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\r\n color ??= \"default\"\r\n variant ??= \"fill\"\r\n perpages ??= [30, 50, 100]\r\n const [perpage, setPerpage] = useState(perpages[0] || 10)\r\n const isPerpage = perpages[0] && perpages.length >= 1\r\n\r\n const chunks = useMemo(() => {\r\n const chunks: any = [];\r\n let _page = 1;\r\n for (let from = 0; from < total; from += perpage) {\r\n const to = Math.min(from + perpage, total)\r\n chunks[_page] = { from: from + 1, to, page: _page, perpage }\r\n _page++\r\n }\r\n return chunks\r\n }, [perpage, total])\r\n\r\n if (!chunks.length) {\r\n return <></>\r\n }\r\n\r\n const current = chunks[page] || chunks[1]\r\n const next = chunks[page + 1]\r\n const prev = chunks[page - 1]\r\n if (!chunks[page]) {\r\n console.error(`Indvalid page`)\r\n }\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: 1,\r\n alignItems: \"center\"\r\n }}\r\n baseClass='table-pagination'\r\n ref={ref}\r\n >\r\n {\r\n isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\r\n <Text fontSize=\"button\">PER PAGE</Text>\r\n <Select\r\n {...slotProps?.select}\r\n slotProps={{\r\n ...slotProps?.select?.slotProps,\r\n input: {\r\n ...slotProps?.select?.slotProps?.input,\r\n slotProps: {\r\n container: {\r\n minWidth: \"auto\"\r\n }\r\n },\r\n width: perpage.toString().length * 10,\r\n size: \"small\",\r\n },\r\n }}\r\n value={perpage}\r\n onChange={(value: any) => {\r\n setPerpage(value);\r\n onChange && onChange(current)\r\n }}\r\n >\r\n {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\r\n </Select>\r\n </Tag>\r\n }\r\n <Tag\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: 1,\r\n alignItems: 'center'\r\n }}\r\n >\r\n <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\r\n <Text color=\"text.secondary\">of</Text>\r\n <Text fontSize=\"button\">{total}</Text>\r\n </Tag>\r\n <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\r\n <IconButton\r\n {...slotProps?.button}\r\n color={color}\r\n variant={variant}\r\n\r\n size={30}\r\n disabled={!prev}\r\n onClick={() => {\r\n (onChange && prev) && onChange(prev)\r\n }}\r\n >\r\n <PrevIcon />\r\n </IconButton>\r\n <IconButton\r\n {...slotProps?.button}\r\n color={color}\r\n variant={variant}\r\n size={30}\r\n disabled={!next}\r\n onClick={() => {\r\n (onChange && next) && onChange(next)\r\n }}\r\n >\r\n <NextIcon />\r\n </IconButton>\r\n </Tag>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;AA2BA;;;;;;AAII;AACA;AACA;AAEA;;;AAGI;AACI;AACA;AACA;;AAEJ;AACJ;AAEA;AACI;;;;;AAMJ;AACI;;AAGJ;AAIY;AACA;AACA;AACA;AACH;AAcuB;AACI;AACH;;;AAST;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAgBG;;;AAmBpB;;"}
package/Tabs/index.js CHANGED
@@ -71,7 +71,7 @@ const Tabs = React.forwardRef((_a, ref) => {
71
71
  // delete child.props.value
72
72
  return React.cloneElement(child, Object.assign(Object.assign(Object.assign({ corner: "square", value: undefined, onClick: () => {
73
73
  onChange && onChange(child.props.value);
74
- }, border: "1px solid", borderColor: "transparent" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.button), btnProps), { color: selected ? color : "default", variant: "text", classNames: [child.props.classNames, { "tab-selected": selected }] }));
74
+ } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.button), btnProps), { color: selected ? color : "default", variant: "text", classNames: [child.props.classNames, { "tab-selected": selected }] }));
75
75
  });
76
76
  return info;
77
77
  }, [children, onChange, value, variant, color, verticle]);
@@ -82,9 +82,9 @@ const Tabs = React.forwardRef((_a, ref) => {
82
82
  const selectedTab = con.querySelector(".tab-selected") || conChilds[0];
83
83
  const prevRect = getRect(selectedTab, con);
84
84
  const rect = getRect(conChilds[selectedIndex], con);
85
- let anim = {};
85
+ let anim = () => ({});
86
86
  if (verticle) {
87
- anim = {
87
+ let v = {
88
88
  from: {
89
89
  top: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.top) || 0,
90
90
  height: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.height) || 0,
@@ -95,12 +95,13 @@ const Tabs = React.forwardRef((_a, ref) => {
95
95
  }
96
96
  };
97
97
  if (["fill", "soft", "outline"].includes(variant)) {
98
- anim.from.width = prevRect === null || prevRect === void 0 ? void 0 : prevRect.width;
99
- anim.to.width = rect === null || rect === void 0 ? void 0 : rect.width;
98
+ v.from.width = prevRect === null || prevRect === void 0 ? void 0 : prevRect.width;
99
+ v.to.width = rect === null || rect === void 0 ? void 0 : rect.width;
100
100
  }
101
+ anim = () => v;
101
102
  }
102
103
  else {
103
- anim = {
104
+ let v = {
104
105
  from: {
105
106
  left: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.left) || 0,
106
107
  width: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.width) || 0,
@@ -111,11 +112,12 @@ const Tabs = React.forwardRef((_a, ref) => {
111
112
  },
112
113
  };
113
114
  if (["fill", "soft", "outline"].includes(variant)) {
114
- anim.from.height = (prevRect === null || prevRect === void 0 ? void 0 : prevRect.height) || 0;
115
- anim.to.height = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
115
+ v.from.height = (prevRect === null || prevRect === void 0 ? void 0 : prevRect.height) || 0;
116
+ v.to.height = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
116
117
  }
118
+ anim = () => v;
117
119
  }
118
- setTrans(anim);
120
+ setTrans(() => anim);
119
121
  }
120
122
  // eslint-disable-next-line react-hooks/exhaustive-deps
121
123
  }, [selectedIndex, variant, color, verticle]);
@@ -185,14 +187,14 @@ const Tabs = React.forwardRef((_a, ref) => {
185
187
  }, children: [jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { baseClass: 'tabs-content', sxr: {
186
188
  display: verticle ? "flex" : "inline-flex",
187
189
  flexDirection: verticle ? "column" : "row",
188
- }, ref: containerRef, children: childs })), jsxRuntime.jsx(core.Transition, { open: !!trans, variant: trans || { from: {}, to: {} }, easing: "smooth", duration: trans ? (disableTransition ? 0 : 250) : 0, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: 'tabs-indicator',
190
+ }, ref: containerRef, children: childs })), jsxRuntime.jsx(core.Transition, { open: !!trans, variant: trans || (() => ({ from: {}, to: {} })), duration: trans ? (disableTransition ? 0 : 250) : 0, easing: "smooth", children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: 'tabs-indicator',
189
191
  // className={classname}
190
192
  sxr: {
191
193
  position: "absolute",
192
194
  zIndex: -1,
193
195
  cursor: "pointer",
194
196
  bgcolor: color
195
- } }, indicatorProps)) }, !!trans ? "asd" : "qwe")] })));
197
+ } }, indicatorProps)) })] })));
196
198
  });
197
199
 
198
200
  module.exports = Tabs;
package/Tabs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport { TabProps } from '../Tab'\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\r\nimport { ButtonProps } from '../Button'\r\n\r\n\r\ntype ValueType = string | number\r\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\r\n children: ReactElement<TabProps> | ReactElement<TabProps>[];\r\n value?: ValueType;\r\n onChange?: (value: ValueType) => void;\r\n variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n verticle?: useBreakpointPropsType<boolean>;\r\n disableTransition?: useBreakpointPropsType<boolean>;\r\n indicatorSize?: useBreakpointPropsType<number>;\r\n\r\n slotProps?: {\r\n content?: Omit<TagProps, \"children\">;\r\n button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\r\n }\r\n}\r\n\r\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\r\n const _rect: any = {};\r\n const parentRect = parent.getBoundingClientRect();\r\n const childRect = ele.getBoundingClientRect();\r\n _rect.top = childRect.top - parentRect.top;\r\n _rect.right = childRect.right - parentRect.right;\r\n _rect.bottom = childRect.bottom - parentRect.bottom;\r\n _rect.left = childRect.left - parentRect.left;\r\n _rect.width = childRect.width;\r\n _rect.height = childRect.height;\r\n return _rect\r\n}\r\n\r\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\r\n let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\r\n const _p: any = {}\r\n if (variant) _p.variant = variant\r\n if (color) _p.color = color\r\n if (verticle) _p.verticle = verticle\r\n if (disableTransition) _p.disableTransition = disableTransition\r\n if (indicatorSize) _p.indicatorSize = indicatorSize\r\n const p: any = useBreakpointProps(_p)\r\n\r\n variant = p.variant ?? \"end-line\"\r\n color = p.color ?? \"brand\"\r\n verticle = p.verticle\r\n disableTransition = p.disableTransition\r\n indicatorSize = p.indicatorSize ?? 3\r\n\r\n ref = ref || useRef(null)\r\n const containerRef: any = useRef(null)\r\n const [trans, setTrans] = useState<any>()\r\n\r\n const { childs, selectedIndex } = useMemo(() => {\r\n let info: any = {\r\n childs: null,\r\n selectedIndex: 0\r\n }\r\n info.childs = Children.map(children, (child: any, idx: number) => {\r\n let selected = child.props.value === value\r\n if (selected) {\r\n info.selectedIndex = idx\r\n }\r\n\r\n let btnProps: any = {}\r\n if (variant === 'fill' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n color: \"#FFFFFF!important\"\r\n }\r\n }\r\n } else if (variant === 'soft' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n }\r\n }\r\n }\r\n\r\n // delete child.props.value\r\n return cloneElement(child, {\r\n corner: \"square\",\r\n value: undefined,\r\n onClick: () => {\r\n onChange && onChange(child.props.value)\r\n },\r\n border: \"1px solid\",\r\n borderColor: \"transparent\",\r\n ...slotProps?.button,\r\n ...btnProps,\r\n color: selected ? color : \"default\",\r\n variant: \"text\",\r\n classNames: [child.props.classNames, { \"tab-selected\": selected }],\r\n })\r\n })\r\n return info\r\n }, [children, onChange, value, variant, color, verticle])\r\n\r\n useEffect(() => {\r\n let con = containerRef.current\r\n const conChilds = con.children\r\n if (conChilds && conChilds[selectedIndex]) {\r\n const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\r\n const prevRect = getRect(selectedTab, con)\r\n const rect = getRect(conChilds[selectedIndex], con)\r\n\r\n let anim: any = {}\r\n if (verticle) {\r\n anim = {\r\n from: {\r\n top: prevRect?.top || 0,\r\n height: prevRect?.height || 0,\r\n },\r\n to: {\r\n top: rect?.top || 0,\r\n height: rect?.height || 0,\r\n }\r\n }\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n anim.from.width = prevRect?.width\r\n anim.to.width = rect?.width\r\n }\r\n } else {\r\n anim = {\r\n from: {\r\n left: prevRect?.left || 0,\r\n width: prevRect?.width || 0,\r\n },\r\n to: {\r\n left: rect?.left || 0,\r\n width: rect?.width || 0,\r\n },\r\n }\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n anim.from.height = prevRect?.height || 0\r\n anim.to.height = rect?.height || 0\r\n }\r\n }\r\n setTrans(anim)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n let indicatorProps: any = useMemo(() => {\r\n let _indicatorProps: any = {}\r\n switch (variant) {\r\n case \"start-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n left: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n top: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"end-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n right: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n bottom: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"fill\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: color\r\n }\r\n break;\r\n case \"outline\":\r\n _indicatorProps = {\r\n top: 0,\r\n border: \"1px solid\",\r\n borderColor: color,\r\n bgcolor: \"transparent\"\r\n }\r\n break;\r\n case \"soft\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: `${color}.soft.primary`\r\n }\r\n break;\r\n case \"text\":\r\n _indicatorProps = {\r\n display: \"none\"\r\n }\r\n break;\r\n }\r\n return _indicatorProps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n return (\r\n <Tag\r\n {...rest}\r\n baseClass='tabs'\r\n ref={ref}\r\n sxr={{\r\n position: \"relative\",\r\n zIndex: 1,\r\n display: \"inline-block\"\r\n }}\r\n >\r\n <Tag\r\n {...slotProps?.content}\r\n baseClass='tabs-content'\r\n sxr={{\r\n display: verticle ? \"flex\" : \"inline-flex\",\r\n flexDirection: verticle ? \"column\" : \"row\",\r\n }}\r\n ref={containerRef}\r\n >\r\n {childs}\r\n </Tag>\r\n <Transition\r\n key={!!trans ? \"asd\" : \"qwe\"}\r\n open={!!trans}\r\n variant={trans || { from: {}, to: {} }}\r\n easing=\"smooth\"\r\n duration={trans ? (disableTransition ? 0 : 250) : 0}\r\n >\r\n <Tag\r\n baseClass='tabs-indicator'\r\n // className={classname}\r\n sxr={{\r\n position: \"absolute\",\r\n zIndex: -1,\r\n cursor: \"pointer\",\r\n bgcolor: color\r\n }}\r\n {...indicatorProps}\r\n >\r\n </Tag>\r\n </Transition>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Tabs"],"names":[],"mappings":";;;;;;;;AAyBA;;AAEI;AACA;;;;;AAKA;AACA;AACA;AACJ;AAEA;;;AACI;;AAEA;AAAa;AACb;AAAW;AACX;AAAc;AACd;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAII;AACI;AACA;;AAEJ;;;AAGQ;;;AAIJ;AACI;AACI;AACI;AACA;AACH;;;AAEF;AACH;AACI;AACI;AACH;;;;AAKT;;;AAcJ;AACA;AACJ;;AAGI;AACA;AACA;AACI;;;;;AAMI;AACI;;;AAGC;AACD;;;AAGC;;AAEL;AACI;AACA;;;;AAGJ;AACI;;;AAGC;AACD;;;AAGC;;AAEL;AACI;AACA;;;;;;;AAQhB;;;AAGQ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;AACI;AACI;AACA;;;AAGR;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAIZ;;AAGJ;AAMY;AACA;AACA;AACH;;;AAQI;;AAeG;AACI;;AAEA;AACA;AACH;AAOrB;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport { TabProps } from '../Tab'\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\r\nimport { ButtonProps } from '../Button'\r\n\r\n\r\ntype ValueType = string | number\r\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\r\n children: ReactElement<TabProps> | ReactElement<TabProps>[];\r\n value?: ValueType;\r\n onChange?: (value: ValueType) => void;\r\n variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n verticle?: useBreakpointPropsType<boolean>;\r\n disableTransition?: useBreakpointPropsType<boolean>;\r\n indicatorSize?: useBreakpointPropsType<number>;\r\n\r\n slotProps?: {\r\n content?: Omit<TagProps, \"children\">;\r\n button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\r\n }\r\n}\r\n\r\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\r\n const _rect: any = {};\r\n const parentRect = parent.getBoundingClientRect();\r\n const childRect = ele.getBoundingClientRect();\r\n _rect.top = childRect.top - parentRect.top;\r\n _rect.right = childRect.right - parentRect.right;\r\n _rect.bottom = childRect.bottom - parentRect.bottom;\r\n _rect.left = childRect.left - parentRect.left;\r\n _rect.width = childRect.width;\r\n _rect.height = childRect.height;\r\n return _rect\r\n}\r\n\r\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\r\n let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\r\n const _p: any = {}\r\n if (variant) _p.variant = variant\r\n if (color) _p.color = color\r\n if (verticle) _p.verticle = verticle\r\n if (disableTransition) _p.disableTransition = disableTransition\r\n if (indicatorSize) _p.indicatorSize = indicatorSize\r\n const p: any = useBreakpointProps(_p)\r\n\r\n variant = p.variant ?? \"end-line\"\r\n color = p.color ?? \"brand\"\r\n verticle = p.verticle\r\n disableTransition = p.disableTransition\r\n indicatorSize = p.indicatorSize ?? 3\r\n\r\n ref = ref || useRef(null)\r\n const containerRef: any = useRef(null)\r\n const [trans, setTrans] = useState<any>()\r\n\r\n const { childs, selectedIndex } = useMemo(() => {\r\n let info: any = {\r\n childs: null,\r\n selectedIndex: 0\r\n }\r\n info.childs = Children.map(children, (child: any, idx: number) => {\r\n let selected = child.props.value === value\r\n if (selected) {\r\n info.selectedIndex = idx\r\n }\r\n\r\n let btnProps: any = {}\r\n if (variant === 'fill' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n color: \"#FFFFFF!important\"\r\n }\r\n }\r\n } else if (variant === 'soft' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n }\r\n }\r\n }\r\n\r\n // delete child.props.value\r\n return cloneElement(child, {\r\n corner: \"square\",\r\n value: undefined,\r\n onClick: () => {\r\n onChange && onChange(child.props.value)\r\n },\r\n ...slotProps?.button,\r\n ...btnProps,\r\n color: selected ? color : \"default\",\r\n variant: \"text\",\r\n classNames: [child.props.classNames, { \"tab-selected\": selected }],\r\n })\r\n })\r\n return info\r\n }, [children, onChange, value, variant, color, verticle])\r\n\r\n useEffect(() => {\r\n let con = containerRef.current\r\n const conChilds = con.children\r\n if (conChilds && conChilds[selectedIndex]) {\r\n const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\r\n const prevRect = getRect(selectedTab, con)\r\n const rect = getRect(conChilds[selectedIndex], con)\r\n\r\n let anim: any = () => ({})\r\n if (verticle) {\r\n let v: any = {\r\n from: {\r\n top: prevRect?.top || 0,\r\n height: prevRect?.height || 0,\r\n },\r\n to: {\r\n top: rect?.top || 0,\r\n height: rect?.height || 0,\r\n }\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.width = prevRect?.width\r\n v.to.width = rect?.width\r\n }\r\n anim = () => v\r\n } else {\r\n let v: any = {\r\n from: {\r\n left: prevRect?.left || 0,\r\n width: prevRect?.width || 0,\r\n },\r\n to: {\r\n left: rect?.left || 0,\r\n width: rect?.width || 0,\r\n },\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.height = prevRect?.height || 0\r\n v.to.height = rect?.height || 0\r\n }\r\n anim = () => v\r\n }\r\n setTrans(() => anim)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n let indicatorProps: any = useMemo(() => {\r\n let _indicatorProps: any = {}\r\n switch (variant) {\r\n case \"start-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n left: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n top: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"end-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n right: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n bottom: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"fill\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: color\r\n }\r\n break;\r\n case \"outline\":\r\n _indicatorProps = {\r\n top: 0,\r\n border: \"1px solid\",\r\n borderColor: color,\r\n bgcolor: \"transparent\"\r\n }\r\n break;\r\n case \"soft\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: `${color}.soft.primary`\r\n }\r\n break;\r\n case \"text\":\r\n _indicatorProps = {\r\n display: \"none\"\r\n }\r\n break;\r\n }\r\n return _indicatorProps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n return (\r\n <Tag\r\n {...rest}\r\n baseClass='tabs'\r\n ref={ref}\r\n sxr={{\r\n position: \"relative\",\r\n zIndex: 1,\r\n display: \"inline-block\"\r\n }}\r\n >\r\n <Tag\r\n {...slotProps?.content}\r\n baseClass='tabs-content'\r\n sxr={{\r\n display: verticle ? \"flex\" : \"inline-flex\",\r\n flexDirection: verticle ? \"column\" : \"row\",\r\n }}\r\n ref={containerRef}\r\n >\r\n {childs}\r\n </Tag>\r\n <Transition\r\n open={!!trans}\r\n variant={trans || (() => ({ from: {}, to: {} }))}\r\n duration={trans ? (disableTransition ? 0 : 250) : 0}\r\n easing=\"smooth\"\r\n >\r\n <Tag\r\n baseClass='tabs-indicator'\r\n // className={classname}\r\n sxr={{\r\n position: \"absolute\",\r\n zIndex: -1,\r\n cursor: \"pointer\",\r\n bgcolor: color\r\n }}\r\n {...indicatorProps}\r\n >\r\n </Tag>\r\n </Transition>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Tabs"],"names":[],"mappings":";;;;;;;;AAyBA;;AAEI;AACA;;;;;AAKA;AACA;AACA;AACJ;AAEA;;;AACI;;AAEA;AAAa;AACb;AAAW;AACX;AAAc;AACd;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAII;AACI;AACA;;AAEJ;;;AAGQ;;;AAIJ;AACI;AACI;AACI;AACA;AACH;;;AAEF;AACH;AACI;AACI;AACH;;;;AAKT;;AAKI;AAOR;AACA;AACJ;;AAGI;AACA;AACA;AACI;;;;;AAMI;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;;AAEA;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;AAEJ;;;;AAKR;;;AAGQ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;AACI;AACI;AACA;;;AAGR;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAIZ;;AAGJ;AAMY;AACA;AACA;AACH;;;AAQI;;AAcG;AACI;;AAEA;AACA;AACH;AAOrB;;"}
package/Tabs/index.mjs CHANGED
@@ -69,7 +69,7 @@ const Tabs = React.forwardRef((_a, ref) => {
69
69
  // delete child.props.value
70
70
  return cloneElement(child, Object.assign(Object.assign(Object.assign({ corner: "square", value: undefined, onClick: () => {
71
71
  onChange && onChange(child.props.value);
72
- }, border: "1px solid", borderColor: "transparent" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.button), btnProps), { color: selected ? color : "default", variant: "text", classNames: [child.props.classNames, { "tab-selected": selected }] }));
72
+ } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.button), btnProps), { color: selected ? color : "default", variant: "text", classNames: [child.props.classNames, { "tab-selected": selected }] }));
73
73
  });
74
74
  return info;
75
75
  }, [children, onChange, value, variant, color, verticle]);
@@ -80,9 +80,9 @@ const Tabs = React.forwardRef((_a, ref) => {
80
80
  const selectedTab = con.querySelector(".tab-selected") || conChilds[0];
81
81
  const prevRect = getRect(selectedTab, con);
82
82
  const rect = getRect(conChilds[selectedIndex], con);
83
- let anim = {};
83
+ let anim = () => ({});
84
84
  if (verticle) {
85
- anim = {
85
+ let v = {
86
86
  from: {
87
87
  top: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.top) || 0,
88
88
  height: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.height) || 0,
@@ -93,12 +93,13 @@ const Tabs = React.forwardRef((_a, ref) => {
93
93
  }
94
94
  };
95
95
  if (["fill", "soft", "outline"].includes(variant)) {
96
- anim.from.width = prevRect === null || prevRect === void 0 ? void 0 : prevRect.width;
97
- anim.to.width = rect === null || rect === void 0 ? void 0 : rect.width;
96
+ v.from.width = prevRect === null || prevRect === void 0 ? void 0 : prevRect.width;
97
+ v.to.width = rect === null || rect === void 0 ? void 0 : rect.width;
98
98
  }
99
+ anim = () => v;
99
100
  }
100
101
  else {
101
- anim = {
102
+ let v = {
102
103
  from: {
103
104
  left: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.left) || 0,
104
105
  width: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.width) || 0,
@@ -109,11 +110,12 @@ const Tabs = React.forwardRef((_a, ref) => {
109
110
  },
110
111
  };
111
112
  if (["fill", "soft", "outline"].includes(variant)) {
112
- anim.from.height = (prevRect === null || prevRect === void 0 ? void 0 : prevRect.height) || 0;
113
- anim.to.height = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
113
+ v.from.height = (prevRect === null || prevRect === void 0 ? void 0 : prevRect.height) || 0;
114
+ v.to.height = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
114
115
  }
116
+ anim = () => v;
115
117
  }
116
- setTrans(anim);
118
+ setTrans(() => anim);
117
119
  }
118
120
  // eslint-disable-next-line react-hooks/exhaustive-deps
119
121
  }, [selectedIndex, variant, color, verticle]);
@@ -183,14 +185,14 @@ const Tabs = React.forwardRef((_a, ref) => {
183
185
  }, children: [jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { baseClass: 'tabs-content', sxr: {
184
186
  display: verticle ? "flex" : "inline-flex",
185
187
  flexDirection: verticle ? "column" : "row",
186
- }, ref: containerRef, children: childs })), jsx(Transition, { open: !!trans, variant: trans || { from: {}, to: {} }, easing: "smooth", duration: trans ? (disableTransition ? 0 : 250) : 0, children: jsx(Tag, Object.assign({ baseClass: 'tabs-indicator',
188
+ }, ref: containerRef, children: childs })), jsx(Transition, { open: !!trans, variant: trans || (() => ({ from: {}, to: {} })), duration: trans ? (disableTransition ? 0 : 250) : 0, easing: "smooth", children: jsx(Tag, Object.assign({ baseClass: 'tabs-indicator',
187
189
  // className={classname}
188
190
  sxr: {
189
191
  position: "absolute",
190
192
  zIndex: -1,
191
193
  cursor: "pointer",
192
194
  bgcolor: color
193
- } }, indicatorProps)) }, !!trans ? "asd" : "qwe")] })));
195
+ } }, indicatorProps)) })] })));
194
196
  });
195
197
 
196
198
  export { Tabs as default };
package/Tabs/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport { TabProps } from '../Tab'\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\r\nimport { ButtonProps } from '../Button'\r\n\r\n\r\ntype ValueType = string | number\r\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\r\n children: ReactElement<TabProps> | ReactElement<TabProps>[];\r\n value?: ValueType;\r\n onChange?: (value: ValueType) => void;\r\n variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n verticle?: useBreakpointPropsType<boolean>;\r\n disableTransition?: useBreakpointPropsType<boolean>;\r\n indicatorSize?: useBreakpointPropsType<number>;\r\n\r\n slotProps?: {\r\n content?: Omit<TagProps, \"children\">;\r\n button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\r\n }\r\n}\r\n\r\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\r\n const _rect: any = {};\r\n const parentRect = parent.getBoundingClientRect();\r\n const childRect = ele.getBoundingClientRect();\r\n _rect.top = childRect.top - parentRect.top;\r\n _rect.right = childRect.right - parentRect.right;\r\n _rect.bottom = childRect.bottom - parentRect.bottom;\r\n _rect.left = childRect.left - parentRect.left;\r\n _rect.width = childRect.width;\r\n _rect.height = childRect.height;\r\n return _rect\r\n}\r\n\r\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\r\n let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\r\n const _p: any = {}\r\n if (variant) _p.variant = variant\r\n if (color) _p.color = color\r\n if (verticle) _p.verticle = verticle\r\n if (disableTransition) _p.disableTransition = disableTransition\r\n if (indicatorSize) _p.indicatorSize = indicatorSize\r\n const p: any = useBreakpointProps(_p)\r\n\r\n variant = p.variant ?? \"end-line\"\r\n color = p.color ?? \"brand\"\r\n verticle = p.verticle\r\n disableTransition = p.disableTransition\r\n indicatorSize = p.indicatorSize ?? 3\r\n\r\n ref = ref || useRef(null)\r\n const containerRef: any = useRef(null)\r\n const [trans, setTrans] = useState<any>()\r\n\r\n const { childs, selectedIndex } = useMemo(() => {\r\n let info: any = {\r\n childs: null,\r\n selectedIndex: 0\r\n }\r\n info.childs = Children.map(children, (child: any, idx: number) => {\r\n let selected = child.props.value === value\r\n if (selected) {\r\n info.selectedIndex = idx\r\n }\r\n\r\n let btnProps: any = {}\r\n if (variant === 'fill' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n color: \"#FFFFFF!important\"\r\n }\r\n }\r\n } else if (variant === 'soft' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n }\r\n }\r\n }\r\n\r\n // delete child.props.value\r\n return cloneElement(child, {\r\n corner: \"square\",\r\n value: undefined,\r\n onClick: () => {\r\n onChange && onChange(child.props.value)\r\n },\r\n border: \"1px solid\",\r\n borderColor: \"transparent\",\r\n ...slotProps?.button,\r\n ...btnProps,\r\n color: selected ? color : \"default\",\r\n variant: \"text\",\r\n classNames: [child.props.classNames, { \"tab-selected\": selected }],\r\n })\r\n })\r\n return info\r\n }, [children, onChange, value, variant, color, verticle])\r\n\r\n useEffect(() => {\r\n let con = containerRef.current\r\n const conChilds = con.children\r\n if (conChilds && conChilds[selectedIndex]) {\r\n const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\r\n const prevRect = getRect(selectedTab, con)\r\n const rect = getRect(conChilds[selectedIndex], con)\r\n\r\n let anim: any = {}\r\n if (verticle) {\r\n anim = {\r\n from: {\r\n top: prevRect?.top || 0,\r\n height: prevRect?.height || 0,\r\n },\r\n to: {\r\n top: rect?.top || 0,\r\n height: rect?.height || 0,\r\n }\r\n }\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n anim.from.width = prevRect?.width\r\n anim.to.width = rect?.width\r\n }\r\n } else {\r\n anim = {\r\n from: {\r\n left: prevRect?.left || 0,\r\n width: prevRect?.width || 0,\r\n },\r\n to: {\r\n left: rect?.left || 0,\r\n width: rect?.width || 0,\r\n },\r\n }\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n anim.from.height = prevRect?.height || 0\r\n anim.to.height = rect?.height || 0\r\n }\r\n }\r\n setTrans(anim)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n let indicatorProps: any = useMemo(() => {\r\n let _indicatorProps: any = {}\r\n switch (variant) {\r\n case \"start-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n left: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n top: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"end-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n right: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n bottom: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"fill\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: color\r\n }\r\n break;\r\n case \"outline\":\r\n _indicatorProps = {\r\n top: 0,\r\n border: \"1px solid\",\r\n borderColor: color,\r\n bgcolor: \"transparent\"\r\n }\r\n break;\r\n case \"soft\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: `${color}.soft.primary`\r\n }\r\n break;\r\n case \"text\":\r\n _indicatorProps = {\r\n display: \"none\"\r\n }\r\n break;\r\n }\r\n return _indicatorProps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n return (\r\n <Tag\r\n {...rest}\r\n baseClass='tabs'\r\n ref={ref}\r\n sxr={{\r\n position: \"relative\",\r\n zIndex: 1,\r\n display: \"inline-block\"\r\n }}\r\n >\r\n <Tag\r\n {...slotProps?.content}\r\n baseClass='tabs-content'\r\n sxr={{\r\n display: verticle ? \"flex\" : \"inline-flex\",\r\n flexDirection: verticle ? \"column\" : \"row\",\r\n }}\r\n ref={containerRef}\r\n >\r\n {childs}\r\n </Tag>\r\n <Transition\r\n key={!!trans ? \"asd\" : \"qwe\"}\r\n open={!!trans}\r\n variant={trans || { from: {}, to: {} }}\r\n easing=\"smooth\"\r\n duration={trans ? (disableTransition ? 0 : 250) : 0}\r\n >\r\n <Tag\r\n baseClass='tabs-indicator'\r\n // className={classname}\r\n sxr={{\r\n position: \"absolute\",\r\n zIndex: -1,\r\n cursor: \"pointer\",\r\n bgcolor: color\r\n }}\r\n {...indicatorProps}\r\n >\r\n </Tag>\r\n </Transition>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Tabs"],"names":[],"mappings":";;;;;;AAyBA;;AAEI;AACA;;;;;AAKA;AACA;AACA;AACJ;AAEA;;;AACI;;AAEA;AAAa;AACb;AAAW;AACX;AAAc;AACd;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAII;AACI;AACA;;AAEJ;;;AAGQ;;;AAIJ;AACI;AACI;AACI;AACA;AACH;;;AAEF;AACH;AACI;AACI;AACH;;;;AAKT;;;AAcJ;AACA;AACJ;;AAGI;AACA;AACA;AACI;;;;;AAMI;AACI;;;AAGC;AACD;;;AAGC;;AAEL;AACI;AACA;;;;AAGJ;AACI;;;AAGC;AACD;;;AAGC;;AAEL;AACI;AACA;;;;;;;AAQhB;;;AAGQ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;AACI;AACI;AACA;;;AAGR;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAIZ;;AAGJ;AAMY;AACA;AACA;AACH;;;AAQI;;AAeG;AACI;;AAEA;AACA;AACH;AAOrB;;"}
1
+ {"version":3,"file":"index.mjs","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport { TabProps } from '../Tab'\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\r\nimport { ButtonProps } from '../Button'\r\n\r\n\r\ntype ValueType = string | number\r\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\r\n children: ReactElement<TabProps> | ReactElement<TabProps>[];\r\n value?: ValueType;\r\n onChange?: (value: ValueType) => void;\r\n variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n verticle?: useBreakpointPropsType<boolean>;\r\n disableTransition?: useBreakpointPropsType<boolean>;\r\n indicatorSize?: useBreakpointPropsType<number>;\r\n\r\n slotProps?: {\r\n content?: Omit<TagProps, \"children\">;\r\n button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\r\n }\r\n}\r\n\r\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\r\n const _rect: any = {};\r\n const parentRect = parent.getBoundingClientRect();\r\n const childRect = ele.getBoundingClientRect();\r\n _rect.top = childRect.top - parentRect.top;\r\n _rect.right = childRect.right - parentRect.right;\r\n _rect.bottom = childRect.bottom - parentRect.bottom;\r\n _rect.left = childRect.left - parentRect.left;\r\n _rect.width = childRect.width;\r\n _rect.height = childRect.height;\r\n return _rect\r\n}\r\n\r\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\r\n let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\r\n const _p: any = {}\r\n if (variant) _p.variant = variant\r\n if (color) _p.color = color\r\n if (verticle) _p.verticle = verticle\r\n if (disableTransition) _p.disableTransition = disableTransition\r\n if (indicatorSize) _p.indicatorSize = indicatorSize\r\n const p: any = useBreakpointProps(_p)\r\n\r\n variant = p.variant ?? \"end-line\"\r\n color = p.color ?? \"brand\"\r\n verticle = p.verticle\r\n disableTransition = p.disableTransition\r\n indicatorSize = p.indicatorSize ?? 3\r\n\r\n ref = ref || useRef(null)\r\n const containerRef: any = useRef(null)\r\n const [trans, setTrans] = useState<any>()\r\n\r\n const { childs, selectedIndex } = useMemo(() => {\r\n let info: any = {\r\n childs: null,\r\n selectedIndex: 0\r\n }\r\n info.childs = Children.map(children, (child: any, idx: number) => {\r\n let selected = child.props.value === value\r\n if (selected) {\r\n info.selectedIndex = idx\r\n }\r\n\r\n let btnProps: any = {}\r\n if (variant === 'fill' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n color: \"#FFFFFF!important\"\r\n }\r\n }\r\n } else if (variant === 'soft' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n }\r\n }\r\n }\r\n\r\n // delete child.props.value\r\n return cloneElement(child, {\r\n corner: \"square\",\r\n value: undefined,\r\n onClick: () => {\r\n onChange && onChange(child.props.value)\r\n },\r\n ...slotProps?.button,\r\n ...btnProps,\r\n color: selected ? color : \"default\",\r\n variant: \"text\",\r\n classNames: [child.props.classNames, { \"tab-selected\": selected }],\r\n })\r\n })\r\n return info\r\n }, [children, onChange, value, variant, color, verticle])\r\n\r\n useEffect(() => {\r\n let con = containerRef.current\r\n const conChilds = con.children\r\n if (conChilds && conChilds[selectedIndex]) {\r\n const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\r\n const prevRect = getRect(selectedTab, con)\r\n const rect = getRect(conChilds[selectedIndex], con)\r\n\r\n let anim: any = () => ({})\r\n if (verticle) {\r\n let v: any = {\r\n from: {\r\n top: prevRect?.top || 0,\r\n height: prevRect?.height || 0,\r\n },\r\n to: {\r\n top: rect?.top || 0,\r\n height: rect?.height || 0,\r\n }\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.width = prevRect?.width\r\n v.to.width = rect?.width\r\n }\r\n anim = () => v\r\n } else {\r\n let v: any = {\r\n from: {\r\n left: prevRect?.left || 0,\r\n width: prevRect?.width || 0,\r\n },\r\n to: {\r\n left: rect?.left || 0,\r\n width: rect?.width || 0,\r\n },\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.height = prevRect?.height || 0\r\n v.to.height = rect?.height || 0\r\n }\r\n anim = () => v\r\n }\r\n setTrans(() => anim)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n let indicatorProps: any = useMemo(() => {\r\n let _indicatorProps: any = {}\r\n switch (variant) {\r\n case \"start-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n left: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n top: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"end-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n right: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n bottom: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"fill\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: color\r\n }\r\n break;\r\n case \"outline\":\r\n _indicatorProps = {\r\n top: 0,\r\n border: \"1px solid\",\r\n borderColor: color,\r\n bgcolor: \"transparent\"\r\n }\r\n break;\r\n case \"soft\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: `${color}.soft.primary`\r\n }\r\n break;\r\n case \"text\":\r\n _indicatorProps = {\r\n display: \"none\"\r\n }\r\n break;\r\n }\r\n return _indicatorProps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n return (\r\n <Tag\r\n {...rest}\r\n baseClass='tabs'\r\n ref={ref}\r\n sxr={{\r\n position: \"relative\",\r\n zIndex: 1,\r\n display: \"inline-block\"\r\n }}\r\n >\r\n <Tag\r\n {...slotProps?.content}\r\n baseClass='tabs-content'\r\n sxr={{\r\n display: verticle ? \"flex\" : \"inline-flex\",\r\n flexDirection: verticle ? \"column\" : \"row\",\r\n }}\r\n ref={containerRef}\r\n >\r\n {childs}\r\n </Tag>\r\n <Transition\r\n open={!!trans}\r\n variant={trans || (() => ({ from: {}, to: {} }))}\r\n duration={trans ? (disableTransition ? 0 : 250) : 0}\r\n easing=\"smooth\"\r\n >\r\n <Tag\r\n baseClass='tabs-indicator'\r\n // className={classname}\r\n sxr={{\r\n position: \"absolute\",\r\n zIndex: -1,\r\n cursor: \"pointer\",\r\n bgcolor: color\r\n }}\r\n {...indicatorProps}\r\n >\r\n </Tag>\r\n </Transition>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Tabs"],"names":[],"mappings":";;;;;;AAyBA;;AAEI;AACA;;;;;AAKA;AACA;AACA;AACJ;AAEA;;;AACI;;AAEA;AAAa;AACb;AAAW;AACX;AAAc;AACd;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAII;AACI;AACA;;AAEJ;;;AAGQ;;;AAIJ;AACI;AACI;AACI;AACA;AACH;;;AAEF;AACH;AACI;AACI;AACH;;;;AAKT;;AAKI;AAOR;AACA;AACJ;;AAGI;AACA;AACA;AACI;;;;;AAMI;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;;AAEA;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;AAEJ;;;;AAKR;;;AAGQ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;AACI;AACI;AACA;;;AAGR;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAIZ;;AAGJ;AAMY;AACA;AACA;AACH;;;AAQI;;AAcG;AACI;;AAEA;AACA;AACH;AAOrB;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xanui/ui",
3
- "version": "1.1.15",
3
+ "version": "1.1.16",
4
4
  "description": "",
5
5
  "private": false,
6
6
  "main": "./index.js",