@xanui/ui 1.0.1 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Accordion/index.js +7 -7
- package/Accordion/index.js.map +1 -1
- package/Accordion/index.mjs +7 -7
- package/Accordion/index.mjs.map +1 -1
- package/Alert/index.js +10 -10
- package/Alert/index.js.map +1 -1
- package/Alert/index.mjs +10 -10
- package/Alert/index.mjs.map +1 -1
- package/Avatar/index.js +1 -1
- package/Avatar/index.js.map +1 -1
- package/Avatar/index.mjs +1 -1
- package/Avatar/index.mjs.map +1 -1
- package/Badge/index.js +1 -1
- package/Badge/index.js.map +1 -1
- package/Badge/index.mjs +1 -1
- package/Badge/index.mjs.map +1 -1
- package/Box/index.js +1 -1
- package/Box/index.js.map +1 -1
- package/Box/index.mjs +1 -1
- package/Box/index.mjs.map +1 -1
- package/Button/index.js +5 -4
- package/Button/index.js.map +1 -1
- package/Button/index.mjs +4 -3
- package/Button/index.mjs.map +1 -1
- package/ButtonGroup/index.js +1 -1
- package/ButtonGroup/index.js.map +1 -1
- package/ButtonGroup/index.mjs +1 -1
- package/ButtonGroup/index.mjs.map +1 -1
- package/Calendar/index.js +17 -17
- package/Calendar/index.js.map +1 -1
- package/Calendar/index.mjs +17 -17
- package/Calendar/index.mjs.map +1 -1
- package/CalendarInput/index.js +3 -3
- package/CalendarInput/index.js.map +1 -1
- package/CalendarInput/index.mjs +3 -3
- package/CalendarInput/index.mjs.map +1 -1
- package/Checkbox/index.js +2 -2
- package/Checkbox/index.js.map +1 -1
- package/Checkbox/index.mjs +2 -2
- package/Checkbox/index.mjs.map +1 -1
- package/Chip/index.js +2 -2
- package/Chip/index.js.map +1 -1
- package/Chip/index.mjs +2 -2
- package/Chip/index.mjs.map +1 -1
- package/CircleProgress/index.js +5 -5
- package/CircleProgress/index.js.map +1 -1
- package/CircleProgress/index.mjs +5 -5
- package/CircleProgress/index.mjs.map +1 -1
- package/ClickOutside/index.js +1 -1
- package/ClickOutside/index.js.map +1 -1
- package/ClickOutside/index.mjs +1 -1
- package/ClickOutside/index.mjs.map +1 -1
- package/Collaps/index.js +2 -4
- package/Collaps/index.js.map +1 -1
- package/Collaps/index.mjs +2 -4
- package/Collaps/index.mjs.map +1 -1
- package/Container/index.js +1 -1
- package/Container/index.js.map +1 -1
- package/Container/index.mjs +1 -1
- package/Container/index.mjs.map +1 -1
- package/Datatable/FilterBox.js +6 -6
- package/Datatable/FilterBox.js.map +1 -1
- package/Datatable/FilterBox.mjs +6 -6
- package/Datatable/FilterBox.mjs.map +1 -1
- package/Datatable/Row.js +8 -8
- package/Datatable/Row.js.map +1 -1
- package/Datatable/Row.mjs +8 -8
- package/Datatable/Row.mjs.map +1 -1
- package/Datatable/SelectedBox.js +2 -2
- package/Datatable/SelectedBox.js.map +1 -1
- package/Datatable/SelectedBox.mjs +2 -2
- package/Datatable/SelectedBox.mjs.map +1 -1
- package/Datatable/Table.js +3 -3
- package/Datatable/Table.js.map +1 -1
- package/Datatable/Table.mjs +3 -3
- package/Datatable/Table.mjs.map +1 -1
- package/Datatable/TableHead.js +3 -3
- package/Datatable/TableHead.js.map +1 -1
- package/Datatable/TableHead.mjs +3 -3
- package/Datatable/TableHead.mjs.map +1 -1
- package/Datatable/index.js +4 -4
- package/Datatable/index.js.map +1 -1
- package/Datatable/index.mjs +4 -4
- package/Datatable/index.mjs.map +1 -1
- package/Divider/index.js +1 -1
- package/Divider/index.js.map +1 -1
- package/Divider/index.mjs +1 -1
- package/Divider/index.mjs.map +1 -1
- package/Drawer/index.js +4 -4
- package/Drawer/index.js.map +1 -1
- package/Drawer/index.mjs +4 -4
- package/Drawer/index.mjs.map +1 -1
- package/Form/index.js +1 -1
- package/Form/index.js.map +1 -1
- package/Form/index.mjs +1 -1
- package/Form/index.mjs.map +1 -1
- package/GridContainer/index.js +1 -1
- package/GridContainer/index.js.map +1 -1
- package/GridContainer/index.mjs +1 -1
- package/GridContainer/index.mjs.map +1 -1
- package/GridItem/index.js +1 -1
- package/GridItem/index.js.map +1 -1
- package/GridItem/index.mjs +1 -1
- package/GridItem/index.mjs.map +1 -1
- package/IconButton/index.js +1 -1
- package/IconButton/index.js.map +1 -1
- package/IconButton/index.mjs +1 -1
- package/IconButton/index.mjs.map +1 -1
- package/Image/index.js +1 -1
- package/Image/index.js.map +1 -1
- package/Image/index.mjs +1 -1
- package/Image/index.mjs.map +1 -1
- package/Input/index.js +6 -6
- package/Input/index.js.map +1 -1
- package/Input/index.mjs +6 -6
- package/Input/index.mjs.map +1 -1
- package/Label/index.js +1 -1
- package/Label/index.js.map +1 -1
- package/Label/index.mjs +1 -1
- package/Label/index.mjs.map +1 -1
- package/Layer/index.js +4 -4
- package/Layer/index.js.map +1 -1
- package/Layer/index.mjs +4 -4
- package/Layer/index.mjs.map +1 -1
- package/LineProgress/index.js +3 -3
- package/LineProgress/index.js.map +1 -1
- package/LineProgress/index.mjs +3 -3
- package/LineProgress/index.mjs.map +1 -1
- package/List/index.js +1 -1
- package/List/index.js.map +1 -1
- package/List/index.mjs +1 -1
- package/List/index.mjs.map +1 -1
- package/ListItem/index.js +1 -1
- package/ListItem/index.js.map +1 -1
- package/ListItem/index.mjs +1 -1
- package/ListItem/index.mjs.map +1 -1
- package/LoadingBox/index.js +2 -2
- package/LoadingBox/index.js.map +1 -1
- package/LoadingBox/index.mjs +2 -2
- package/LoadingBox/index.mjs.map +1 -1
- package/Menu/getOrigin.js.map +1 -1
- package/Menu/getOrigin.mjs.map +1 -1
- package/Menu/index.js +3 -3
- package/Menu/index.js.map +1 -1
- package/Menu/index.mjs +3 -3
- package/Menu/index.mjs.map +1 -1
- package/Menu/placedMenu.js.map +1 -1
- package/Menu/placedMenu.mjs.map +1 -1
- package/Modal/index.js +2 -2
- package/Modal/index.js.map +1 -1
- package/Modal/index.mjs +2 -2
- package/Modal/index.mjs.map +1 -1
- package/Option/index.js +1 -1
- package/Option/index.js.map +1 -1
- package/Option/index.mjs +1 -1
- package/Option/index.mjs.map +1 -1
- package/Paper/index.js +1 -1
- package/Paper/index.js.map +1 -1
- package/Paper/index.mjs +1 -1
- package/Paper/index.mjs.map +1 -1
- package/Portal/index.js +1 -1
- package/Portal/index.js.map +1 -1
- package/Portal/index.mjs +1 -1
- package/Portal/index.mjs.map +1 -1
- package/Scrollbar/index.d.ts +7 -2
- package/Scrollbar/index.js +37 -38
- package/Scrollbar/index.js.map +1 -1
- package/Scrollbar/index.mjs +38 -39
- package/Scrollbar/index.mjs.map +1 -1
- package/Select/index.js +2 -2
- package/Select/index.js.map +1 -1
- package/Select/index.mjs +2 -2
- package/Select/index.mjs.map +1 -1
- package/Stack/index.js +1 -1
- package/Stack/index.js.map +1 -1
- package/Stack/index.mjs +1 -1
- package/Stack/index.mjs.map +1 -1
- package/Switch/index.js +4 -4
- package/Switch/index.js.map +1 -1
- package/Switch/index.mjs +4 -4
- package/Switch/index.mjs.map +1 -1
- package/Tab/index.js +1 -1
- package/Tab/index.js.map +1 -1
- package/Tab/index.mjs +1 -1
- package/Tab/index.mjs.map +1 -1
- package/Table/index.js +3 -3
- package/Table/index.js.map +1 -1
- package/Table/index.mjs +3 -3
- package/Table/index.mjs.map +1 -1
- package/TableBody/index.js +1 -1
- package/TableBody/index.js.map +1 -1
- package/TableBody/index.mjs +1 -1
- package/TableBody/index.mjs.map +1 -1
- package/TableCell/index.js +1 -1
- package/TableCell/index.js.map +1 -1
- package/TableCell/index.mjs +1 -1
- package/TableCell/index.mjs.map +1 -1
- package/TableFooter/index.js +1 -1
- package/TableFooter/index.js.map +1 -1
- package/TableFooter/index.mjs +1 -1
- package/TableFooter/index.mjs.map +1 -1
- package/TableHead/index.js +1 -1
- package/TableHead/index.js.map +1 -1
- package/TableHead/index.mjs +1 -1
- package/TableHead/index.mjs.map +1 -1
- package/TablePagination/index.js +5 -5
- package/TablePagination/index.js.map +1 -1
- package/TablePagination/index.mjs +5 -5
- package/TablePagination/index.mjs.map +1 -1
- package/TableRow/index.js +1 -1
- package/TableRow/index.js.map +1 -1
- package/TableRow/index.mjs +1 -1
- package/TableRow/index.mjs.map +1 -1
- package/Tabs/index.js +3 -3
- package/Tabs/index.js.map +1 -1
- package/Tabs/index.mjs +3 -3
- package/Tabs/index.mjs.map +1 -1
- package/Text/index.js +1 -1
- package/Text/index.js.map +1 -1
- package/Text/index.mjs +1 -1
- package/Text/index.mjs.map +1 -1
- package/ThemeProvider/RenderRoot.js.map +1 -1
- package/ThemeProvider/RenderRoot.mjs.map +1 -1
- package/ThemeProvider/index.js +1 -1
- package/ThemeProvider/index.js.map +1 -1
- package/ThemeProvider/index.mjs +1 -1
- package/ThemeProvider/index.mjs.map +1 -1
- package/Toast/index.js +6 -6
- package/Toast/index.js.map +1 -1
- package/Toast/index.mjs +6 -6
- package/Toast/index.mjs.map +1 -1
- package/Tooltip/index.js +2 -2
- package/Tooltip/index.js.map +1 -1
- package/Tooltip/index.mjs +2 -2
- package/Tooltip/index.mjs.map +1 -1
- package/ViewBox/index.js +1 -1
- package/ViewBox/index.js.map +1 -1
- package/ViewBox/index.mjs +1 -1
- package/ViewBox/index.mjs.map +1 -1
- package/package.json +5 -5
- package/useCorner/index.js.map +1 -1
- package/useCorner/index.mjs.map +1 -1
package/Input/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Text from '../Text';\n\n\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<ColorTemplateColors, \"default\">>;\n containerRef?: MutableRefObject<HTMLDivElement | undefined>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n multiline?: boolean;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n slotProps?: {\n container?: Omit<TagProps<\"div\">, \"children\">\n }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n let [{\n startIcon,\n endIcon,\n iconPlacement,\n onFocus,\n color,\n onBlur,\n focused,\n containerRef,\n disabled,\n variant,\n error,\n helperText,\n multiline,\n size,\n rows,\n minRows,\n maxRows,\n slotProps,\n ...rest\n }] = useInterface<any>(\"Input\", props, {})\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (iconPlacement) _p.iconPlacement = iconPlacement\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (helperText) _p.helperText = helperText\n if (size) _p.size = size\n if (rows) _p.rows = rows\n if (minRows) _p.minRows = minRows\n if (maxRows) _p.maxRows = maxRows\n const p: any = useBreakpointProps(_p)\n startIcon = p.startIcon\n endIcon = p.endIcon\n iconPlacement = p.iconPlacement\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n helperText = p.helperText\n size = p.size ?? 'medium'\n rows = p.rows\n minRows = p.minRows\n maxRows = p.maxRows\n\n ref ??= useRef(null);\n iconPlacement ??= multiline ? \"end\" : \"center\"\n if (!value) iconPlacement = 'center'\n\n const [_focused, setFocused] = useState(false)\n const conRef: any = useRef(null)\n let _focus = focused || _focused\n\n useEffect(() => {\n if (containerRef) {\n (containerRef as any).current = conRef?.current\n }\n }, [containerRef])\n\n let _rows = useMemo(() => {\n if (rows) return rows\n if (value && multiline) {\n let lines = (value as string).split(`\\n`).length\n if (minRows && minRows > lines) {\n return minRows\n } else if (maxRows && maxRows < lines) {\n return maxRows\n } else {\n return lines\n }\n }\n }, [value]) || 1\n\n const sizes: any = {\n small: {\n height: 38,\n gap: .5,\n fontSize: 14,\n },\n medium: {\n height: 44,\n gap: 1,\n fontSize: 16\n },\n large: {\n height: 52,\n gap: 1,\n fontSize: 18\n }\n }\n\n const _size = sizes[size]\n let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n borderColor = error ? \"danger.primary\" : borderColor\n let multiprops: any = {}\n if (multiline) {\n multiprops = {\n rows: _rows,\n sx: {\n resize: \"none\"\n }\n }\n }\n\n useEffect(() => {\n if ((ref as any).current) {\n (ref as any).current.style.height = \"auto\";\n (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\n }\n }, [value]);\n\n return (\n <Tag\n baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\n >\n <Tag\n {...slotProps?.container}\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n flexWrap: \"nowrap\",\n minWidth: 150,\n transitionProperty: \"border, box-shadow, background\",\n bgcolor: error ? \"danger.alpha\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n border: variant === \"text\" ? 0 : 1,\n borderColor: borderColor,\n borderRadius: 1,\n px: 1,\n py: .5,\n }}\n baseClass='input-container'\n disabled={disabled || false}\n ref={conRef}\n {..._size}\n height={multiline ? \"auto\" : _size.height}\n minHeight={_size.height}\n >\n {startIcon && <Tag\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: \"flex\",\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-start-icon\"\n >{startIcon}</Tag>}\n <Tag\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n flex: 1,\n minHeight: _size.height,\n \"& textarea\": {\n resize: \"none\"\n }\n }}\n >\n <Tag\n component={multiline ? 'textarea' : 'input'}\n {...multiprops}\n {...rest}\n sxr={{\n border: 0,\n outline: 0,\n bgcolor: \"transparent\",\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: _size.fontSize,\n height: multiline ? \"auto\" : _size.height + \"px!important\",\n width: \"100%\",\n maxHeight: 200,\n\n }}\n value={value}\n baseClass='input-box'\n ref={ref}\n onFocus={(e: any) => {\n focused ?? setFocused(true)\n onFocus && onFocus(e)\n }}\n onBlur={(e: any) => {\n focused ?? setFocused(false)\n onBlur && onBlur(e)\n }}\n />\n </Tag>\n {endIcon && <Tag\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: 'flex',\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-end-icon\"\n >{endIcon}</Tag>}\n </Tag>\n {helperText && <Text\n pl={.5}\n height={_size.height}\n className=\"input-helper-text\"\n fontSize=\"small\"\n color={error ? \"danger.primary\" : \"text.primary\"}\n >{helperText}</Text>}\n </Tag>\n )\n})\n\nexport default Input\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Text from '../Text';\n\n\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<ColorTemplateColors, \"default\">>;\n containerRef?: MutableRefObject<HTMLDivElement | undefined>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n multiline?: boolean;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n slotProps?: {\n container?: Omit<TagProps<\"div\">, \"children\">\n }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n let [{\n startIcon,\n endIcon,\n iconPlacement,\n onFocus,\n color,\n onBlur,\n focused,\n containerRef,\n disabled,\n variant,\n error,\n helperText,\n multiline,\n size,\n rows,\n minRows,\n maxRows,\n slotProps,\n ...rest\n }] = useInterface<any>(\"Input\", props, {})\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (iconPlacement) _p.iconPlacement = iconPlacement\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (helperText) _p.helperText = helperText\n if (size) _p.size = size\n if (rows) _p.rows = rows\n if (minRows) _p.minRows = minRows\n if (maxRows) _p.maxRows = maxRows\n const p: any = useBreakpointProps(_p)\n startIcon = p.startIcon\n endIcon = p.endIcon\n iconPlacement = p.iconPlacement\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n helperText = p.helperText\n size = p.size ?? 'medium'\n rows = p.rows\n minRows = p.minRows\n maxRows = p.maxRows\n\n ref ??= useRef(null);\n iconPlacement ??= multiline ? \"end\" : \"center\"\n if (!value) iconPlacement = 'center'\n\n const [_focused, setFocused] = useState(false)\n const conRef: any = useRef(null)\n let _focus = focused || _focused\n\n useEffect(() => {\n if (containerRef) {\n (containerRef as any).current = conRef?.current\n }\n }, [containerRef])\n\n let _rows = useMemo(() => {\n if (rows) return rows\n if (value && multiline) {\n let lines = (value as string).split(`\\n`).length\n if (minRows && minRows > lines) {\n return minRows\n } else if (maxRows && maxRows < lines) {\n return maxRows\n } else {\n return lines\n }\n }\n }, [value]) || 1\n\n const sizes: any = {\n small: {\n height: 38,\n gap: .5,\n fontSize: 14,\n },\n medium: {\n height: 44,\n gap: 1,\n fontSize: 16\n },\n large: {\n height: 52,\n gap: 1,\n fontSize: 18\n }\n }\n\n const _size = sizes[size]\n let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n borderColor = error ? \"danger.primary\" : borderColor\n let multiprops: any = {}\n if (multiline) {\n multiprops = {\n rows: _rows,\n sx: {\n resize: \"none\"\n }\n }\n }\n\n useEffect(() => {\n if ((ref as any).current) {\n (ref as any).current.style.height = \"auto\";\n (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\n }\n }, [value]);\n\n return (\n <Tag\n baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\n >\n <Tag\n {...slotProps?.container}\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n flexWrap: \"nowrap\",\n minWidth: 150,\n transitionProperty: \"border, box-shadow, background\",\n bgcolor: error ? \"danger.alpha\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n border: variant === \"text\" ? 0 : 1,\n borderColor: borderColor,\n borderRadius: 1,\n px: 1,\n py: .5,\n }}\n baseClass='input-container'\n disabled={disabled || false}\n ref={conRef}\n {..._size}\n height={multiline ? \"auto\" : _size.height}\n minHeight={_size.height}\n >\n {startIcon && <Tag\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: \"flex\",\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-start-icon\"\n >{startIcon}</Tag>}\n <Tag\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n flex: 1,\n minHeight: _size.height,\n \"& textarea\": {\n resize: \"none\"\n }\n }}\n >\n <Tag\n component={multiline ? 'textarea' : 'input'}\n {...multiprops}\n {...rest}\n sxr={{\n border: 0,\n outline: 0,\n bgcolor: \"transparent\",\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: _size.fontSize,\n height: multiline ? \"auto\" : _size.height + \"px!important\",\n width: \"100%\",\n maxHeight: 200,\n\n }}\n value={value}\n baseClass='input-box'\n ref={ref}\n onFocus={(e: any) => {\n focused ?? setFocused(true)\n onFocus && onFocus(e)\n }}\n onBlur={(e: any) => {\n focused ?? setFocused(false)\n onBlur && onBlur(e)\n }}\n />\n </Tag>\n {endIcon && <Tag\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: 'flex',\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-end-icon\"\n >{endIcon}</Tag>}\n </Tag>\n {helperText && <Text\n pl={.5}\n height={_size.height}\n className=\"input-helper-text\"\n fontSize=\"small\"\n color={error ? \"danger.primary\" : \"text.primary\"}\n >{helperText}</Text>}\n </Tag>\n )\n})\n\nexport default Input\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
package/Label/index.js
CHANGED
package/Label/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Label/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n return <Tag\n component='label'\n {...rest}\n sxr={{\n display: \"inline-flex\",\n alignItems: \"center\",\n verticalAlign: \"middle\",\n fontSize: \"button\",\n gap: .4,\n }}\n baseClass='label'\n ref={ref}\n >{children}</Tag>\n})\n\nexport default Label"],"names":["__rest","_jsx","Tag"],"mappings":"4LAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,GAAG,EAAE,EAAE;SACV,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Label/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n return <Tag\n component='label'\n {...rest}\n sxr={{\n display: \"inline-flex\",\n alignItems: \"center\",\n verticalAlign: \"middle\",\n fontSize: \"button\",\n gap: .4,\n }}\n baseClass='label'\n ref={ref}\n >{children}</Tag>\n})\n\nexport default Label"],"names":["__rest","_jsx","Tag"],"mappings":"4LAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,GAAG,EAAE,EAAE;SACV,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC"}
|
package/Label/index.mjs
CHANGED
|
@@ -6,5 +6,5 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from
|
|
|
6
6
|
verticalAlign: "middle",
|
|
7
7
|
fontSize: "button",
|
|
8
8
|
gap: .4,
|
|
9
|
-
}, baseClass: 'label', ref: ref
|
|
9
|
+
}, baseClass: 'label', ref: ref, children: children }));
|
|
10
10
|
});export{Label as default};//# sourceMappingURL=index.mjs.map
|
package/Label/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n return <Tag\n component='label'\n {...rest}\n sxr={{\n display: \"inline-flex\",\n alignItems: \"center\",\n verticalAlign: \"middle\",\n fontSize: \"button\",\n gap: .4,\n }}\n baseClass='label'\n ref={ref}\n >{children}</Tag>\n})\n\nexport default Label"],"names":["_jsx"],"mappings":"sHAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,GAAG,EAAE,EAAE;SACV,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n return <Tag\n component='label'\n {...rest}\n sxr={{\n display: \"inline-flex\",\n alignItems: \"center\",\n verticalAlign: \"middle\",\n fontSize: \"button\",\n gap: .4,\n }}\n baseClass='label'\n ref={ref}\n >{children}</Tag>\n})\n\nexport default Label"],"names":["_jsx"],"mappings":"sHAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,GAAG,EAAE,EAAE;SACV,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC"}
|
package/Layer/index.js
CHANGED
|
@@ -33,17 +33,17 @@ const Layer = (_a) => {
|
|
|
33
33
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
34
34
|
let duration = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _b === void 0 ? void 0 : _b.duration) || 300;
|
|
35
35
|
let delay = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _c === void 0 ? void 0 : _c.delay) || 0;
|
|
36
|
-
return (jsxRuntime.jsx(index.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsxRuntime.jsx(core.Transition,
|
|
36
|
+
return (jsxRuntime.jsx(index.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsxRuntime.jsx(core.Transition, { duration: duration, delay: delay, easing: "easeOut", variant: "fade", open: open, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { id: id, sxr: Object.assign(Object.assign(Object.assign({}, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _e === void 0 ? void 0 : _e.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0 }), blurCss), onClick: (e) => {
|
|
37
37
|
var _a;
|
|
38
38
|
if (!((_a = e.currentTarget.firstChild) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
|
|
39
39
|
if (onClickOutside) {
|
|
40
40
|
onClickOutside();
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
|
-
}
|
|
43
|
+
}, children: jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration, delay: delay, easing: "easeOut", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
|
|
44
44
|
setClosed(true);
|
|
45
45
|
onClosed && onClosed();
|
|
46
|
-
}
|
|
46
|
+
}, children: children })) })) }) })));
|
|
47
47
|
};
|
|
48
48
|
const layers = new Map();
|
|
49
49
|
const LayerHandler = () => {
|
|
@@ -54,7 +54,7 @@ const LayerHandler = () => {
|
|
|
54
54
|
layers.delete(l.id);
|
|
55
55
|
}, 100);
|
|
56
56
|
((_a = l === null || l === void 0 ? void 0 : l.props) === null || _a === void 0 ? void 0 : _a.onClosed) && ((_b = l === null || l === void 0 ? void 0 : l.props) === null || _b === void 0 ? void 0 : _b.onClosed());
|
|
57
|
-
}
|
|
57
|
+
}, children: l.content }), "layer-" + key));
|
|
58
58
|
});
|
|
59
59
|
};
|
|
60
60
|
RenderRoot.default.create("LAYERS_RENDER", LayerHandler);
|
package/Layer/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport Portal, { PortalProps } from \"../Portal\";\nimport { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\nimport Renderar from '../ThemeProvider/RenderRoot';\n\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode: LayerProps[\"blurMode\"]) => {\n return useMemo(() => {\n let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\n if (typeof window === 'undefined' || mode === 'transparent') {\n return transparent\n }\n const d = _d || (_d = window.document.createElement(\"div\").style)\n return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n }, [blur])\n}\n\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n id?: string;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n portal?: Omit<PortalProps, \"children\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n }\n}\n\nconst Layer = ({ children, open, id, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n return (\n <Portal {...slotProps?.portal}>\n <Transition\n duration={duration}\n delay={delay}\n easing=\"easeOut\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n id={id}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n ...blurCss\n }}\n onClick={(e: any) => {\n if (!e.currentTarget.firstChild?.contains(e.target)) {\n if (onClickOutside) {\n onClickOutside()\n }\n }\n }}\n >\n <Transition\n duration={duration}\n delay={delay}\n easing=\"easeOut\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n </Tag>\n </Transition>\n </Portal>\n )\n}\n\nexport type LayerHandlerProps = Omit<LayerProps, \"open\" | \"children\">\nconst layers = new Map<string, { id: string, open: boolean; props?: LayerHandlerProps, content: ReactNode }>()\n\nexport const LayerHandler = () => {\n return Array.from(layers.values()).map((l, key) => {\n return (\n <Layer\n open={l.open}\n key={\"layer-\" + key}\n id={l.id}\n {...l.props}\n zIndex={layers.size}\n onClosed={() => {\n setTimeout(() => {\n layers.delete(l.id)\n }, 100);\n l?.props?.onClosed && l?.props?.onClosed()\n }}\n >{l.content}</Layer>\n )\n })\n}\n\n\nRenderar.create(\"LAYERS_RENDER\", LayerHandler)\n\nLayer.open = (id: string, content: ReactNode, props?: LayerHandlerProps) => {\n if (layers.has(id)) return\n layers.set(id, { id, props, content, open: true })\n Renderar.dispatch()\n}\n\nLayer.close = (id: string) => {\n const get = layers.get(id)\n if (get) {\n layers.set(id, { ...get, open: false })\n Renderar.dispatch()\n }\n}\n\nexport default Layer"],"names":["useMemo","alpha","__rest","useInterface","useBreakpointProps","useState","useEffect","_jsx","Portal","Transition","Tag","Renderar"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport Portal, { PortalProps } from \"../Portal\";\nimport { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\nimport Renderar from '../ThemeProvider/RenderRoot';\n\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode: LayerProps[\"blurMode\"]) => {\n return useMemo(() => {\n let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\n if (typeof window === 'undefined' || mode === 'transparent') {\n return transparent\n }\n const d = _d || (_d = window.document.createElement(\"div\").style)\n return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n }, [blur])\n}\n\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n id?: string;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n portal?: Omit<PortalProps, \"children\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n }\n}\n\nconst Layer = ({ children, open, id, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n return (\n <Portal {...slotProps?.portal}>\n <Transition\n duration={duration}\n delay={delay}\n easing=\"easeOut\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n id={id}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n ...blurCss\n }}\n onClick={(e: any) => {\n if (!e.currentTarget.firstChild?.contains(e.target)) {\n if (onClickOutside) {\n onClickOutside()\n }\n }\n }}\n >\n <Transition\n duration={duration}\n delay={delay}\n easing=\"easeOut\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n </Tag>\n </Transition>\n </Portal>\n )\n}\n\nexport type LayerHandlerProps = Omit<LayerProps, \"open\" | \"children\">\nconst layers = new Map<string, { id: string, open: boolean; props?: LayerHandlerProps, content: ReactNode }>()\n\nexport const LayerHandler = () => {\n return Array.from(layers.values()).map((l, key) => {\n return (\n <Layer\n open={l.open}\n key={\"layer-\" + key}\n id={l.id}\n {...l.props}\n zIndex={layers.size}\n onClosed={() => {\n setTimeout(() => {\n layers.delete(l.id)\n }, 100);\n l?.props?.onClosed && l?.props?.onClosed()\n }}\n >{l.content}</Layer>\n )\n })\n}\n\n\nRenderar.create(\"LAYERS_RENDER\", LayerHandler)\n\nLayer.open = (id: string, content: ReactNode, props?: LayerHandlerProps) => {\n if (layers.has(id)) return\n layers.set(id, { id, props, content, open: true })\n Renderar.dispatch()\n}\n\nLayer.close = (id: string) => {\n const get = layers.get(id)\n if (get) {\n layers.set(id, { ...get, open: false })\n Renderar.dispatch()\n }\n}\n\nexport default Layer"],"names":["useMemo","alpha","__rest","useInterface","useBreakpointProps","useState","useEffect","_jsx","Portal","Transition","Tag","Renderar"],"mappings":"qRAQA,IAAI,EAAuB;AAE3B,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,IAA4B,KAAI;IAC9D,OAAOA,aAAO,CAAC,MAAK;AAChB,QAAA,IAAI,WAAW,GAAG,EAAE,OAAO,EAAEC,UAAK,CAAC,SAAS,EAAE,IAAI,GAAG,GAAG,CAAC,EAAE;QAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,KAAK,aAAa,EAAE;AACzD,YAAA,OAAO,WAAW;QACtB;AACA,QAAA,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjE,OAAO,CAAC,CAAC,gBAAgB,CAAC,KAAK,SAAS,GAAG,EAAE,cAAc,EAAE,CAAA,KAAA,EAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,EAAE,CAAA,GAAA,CAAK,EAAE,GAAG,WAAW;AAC/G,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACd,CAAC;AAwBD,MAAM,KAAK,GAAG,CAAC,EAA4C,KAAI;;QAAhD,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,OAAwB,EAAnB,KAAK,GAAAC,YAAA,CAAA,EAAA,EAA9B,CAAA,UAAA,EAAA,MAAA,EAAA,IAAA,CAAgC,CAAF;AACzC,IAAA,IAAI,CAAC,EACD,cAAc,EACd,SAAS,EACT,UAAU,EACV,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACZ,CAAC,GAAGC,iBAAY,CAAM,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC;IAC1C,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI;AACb,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;IAErB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGC,cAAQ,CAAC,CAAC,IAAI,CAAC;AAC3C,IAAA,SAAS,GAAG,SAAS,IAAI,aAAa;AACtC,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,QAAQ,CAAC,GAAG,EAAE;IAEtDC,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,MAAM,IAAI,IAAI,EAAE;YAChB,SAAS,CAAC,KAAK,CAAC;QACpB;AACJ,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AAEV,IAAA,IAAI,MAAM;AAAE,QAAA,OAAOC,uCAAK;AACxB,IAAA,IAAI,QAAQ,GAAG,CAAA,CAAA,EAAA,GAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,KAAI,GAAG;AACrD,IAAA,IAAI,KAAK,GAAG,CAAA,CAAA,EAAA,GAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,KAAI,CAAC;IAE7C,QACIA,eAACC,aAAM,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,MAAM,cACzBD,cAAA,CAACE,eAAU,EAAA,EACP,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAC,SAAS,EAChB,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,IAAI,EAAA,QAAA,EAEVF,cAAA,CAACG,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,OAAO,EAAA,EACb,SAAS,KAAA,IAAA,IAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,EAAA,EACnB,EAAE,EAAE,EAAE,EACN,GAAG,gDACI,CAAA,EAAA,GAAA,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,EAAE,CAAA,EAAA,EACtB,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,IAAI,IAAI,MAAM,IAAI,CAAC,CAAC,EAC5B,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,MAAM,EAAE,CAAC,EACT,KAAK,EAAE,CAAC,EAAA,CAAA,EACL,OAAO,CAAA,EAEd,OAAO,EAAE,CAAC,CAAM,KAAI;;AAChB,oBAAA,IAAI,EAAC,CAAA,EAAA,GAAA,CAAC,CAAC,aAAa,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA,EAAE;wBACjD,IAAI,cAAc,EAAE;AAChB,4BAAA,cAAc,EAAE;wBACpB;oBACJ;gBACJ,CAAC,EAAA,QAAA,EAEDH,eAACE,eAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAC,SAAS,EAChB,OAAO,EAAE,UAAU,IAAI,UAAU,EAAA,EAC7B,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,UAAU,EAAA,EACzB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAK;wBACX,SAAS,CAAC,IAAI,CAAC;wBACf,QAAQ,IAAI,QAAQ,EAAE;AAC1B,oBAAA,CAAC,YAEA,QAAQ,EAAA,CAAA,CACA,IACX,EAAA,CACG,EAAA,CAAA,CACR;AAEjB;AAGA,MAAM,MAAM,GAAG,IAAI,GAAG,EAAwF;AAEvG,MAAM,YAAY,GAAG,MAAK;AAC7B,IAAA,OAAO,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAI;AAC9C,QAAA,QACIF,cAAA,CAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACF,IAAI,EAAE,CAAC,CAAC,IAAI,EAEZ,EAAE,EAAE,CAAC,CAAC,EAAE,EAAA,EACJ,CAAC,CAAC,KAAK,EAAA,EACX,MAAM,EAAE,MAAM,CAAC,IAAI,EACnB,QAAQ,EAAE,MAAK;;gBACX,UAAU,CAAC,MAAK;AACZ,oBAAA,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;gBACvB,CAAC,EAAE,GAAG,CAAC;gBACP,CAAA,CAAA,EAAA,GAAA,CAAC,KAAA,IAAA,IAAD,CAAC,uBAAD,CAAC,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,MAAI,MAAA,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,MAAA,GAAA,MAAA,GAAD,CAAC,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA;YAC9C,CAAC,EAAA,QAAA,EACH,CAAC,CAAC,OAAO,EAAA,CAAA,EAVF,QAAQ,GAAG,GAAG,CAUH;AAE5B,IAAA,CAAC,CAAC;AACN;AAGAI,kBAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC;AAE9C,KAAK,CAAC,IAAI,GAAG,CAAC,EAAU,EAAE,OAAkB,EAAE,KAAyB,KAAI;AACvE,IAAA,IAAI,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;QAAE;AACpB,IAAA,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAClDA,kBAAQ,CAAC,QAAQ,EAAE;AACvB,CAAC;AAED,KAAK,CAAC,KAAK,GAAG,CAAC,EAAU,KAAI;IACzB,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;IAC1B,IAAI,GAAG,EAAE;QACL,MAAM,CAAC,GAAG,CAAC,EAAE,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAO,GAAG,CAAA,EAAA,EAAE,IAAI,EAAE,KAAK,EAAA,CAAA,CAAG;QACvCA,kBAAQ,CAAC,QAAQ,EAAE;IACvB;AACJ,CAAC"}
|
package/Layer/index.mjs
CHANGED
|
@@ -33,17 +33,17 @@ const Layer = (_a) => {
|
|
|
33
33
|
return jsx(Fragment, {});
|
|
34
34
|
let duration = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _b === void 0 ? void 0 : _b.duration) || 300;
|
|
35
35
|
let delay = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _c === void 0 ? void 0 : _c.delay) || 0;
|
|
36
|
-
return (jsx(Portal, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsx(Transition,
|
|
36
|
+
return (jsx(Portal, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsx(Transition, { duration: duration, delay: delay, easing: "easeOut", variant: "fade", open: open, children: jsx(Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { id: id, sxr: Object.assign(Object.assign(Object.assign({}, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _e === void 0 ? void 0 : _e.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0 }), blurCss), onClick: (e) => {
|
|
37
37
|
var _a;
|
|
38
38
|
if (!((_a = e.currentTarget.firstChild) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
|
|
39
39
|
if (onClickOutside) {
|
|
40
40
|
onClickOutside();
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
|
-
}
|
|
43
|
+
}, children: jsx(Transition, Object.assign({ duration: duration, delay: delay, easing: "easeOut", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
|
|
44
44
|
setClosed(true);
|
|
45
45
|
onClosed && onClosed();
|
|
46
|
-
}
|
|
46
|
+
}, children: children })) })) }) })));
|
|
47
47
|
};
|
|
48
48
|
const layers = new Map();
|
|
49
49
|
const LayerHandler = () => {
|
|
@@ -54,7 +54,7 @@ const LayerHandler = () => {
|
|
|
54
54
|
layers.delete(l.id);
|
|
55
55
|
}, 100);
|
|
56
56
|
((_a = l === null || l === void 0 ? void 0 : l.props) === null || _a === void 0 ? void 0 : _a.onClosed) && ((_b = l === null || l === void 0 ? void 0 : l.props) === null || _b === void 0 ? void 0 : _b.onClosed());
|
|
57
|
-
}
|
|
57
|
+
}, children: l.content }), "layer-" + key));
|
|
58
58
|
});
|
|
59
59
|
};
|
|
60
60
|
Renderar.create("LAYERS_RENDER", LayerHandler);
|
package/Layer/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport Portal, { PortalProps } from \"../Portal\";\nimport { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\nimport Renderar from '../ThemeProvider/RenderRoot';\n\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode: LayerProps[\"blurMode\"]) => {\n return useMemo(() => {\n let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\n if (typeof window === 'undefined' || mode === 'transparent') {\n return transparent\n }\n const d = _d || (_d = window.document.createElement(\"div\").style)\n return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n }, [blur])\n}\n\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n id?: string;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n portal?: Omit<PortalProps, \"children\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n }\n}\n\nconst Layer = ({ children, open, id, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n return (\n <Portal {...slotProps?.portal}>\n <Transition\n duration={duration}\n delay={delay}\n easing=\"easeOut\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n id={id}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n ...blurCss\n }}\n onClick={(e: any) => {\n if (!e.currentTarget.firstChild?.contains(e.target)) {\n if (onClickOutside) {\n onClickOutside()\n }\n }\n }}\n >\n <Transition\n duration={duration}\n delay={delay}\n easing=\"easeOut\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n </Tag>\n </Transition>\n </Portal>\n )\n}\n\nexport type LayerHandlerProps = Omit<LayerProps, \"open\" | \"children\">\nconst layers = new Map<string, { id: string, open: boolean; props?: LayerHandlerProps, content: ReactNode }>()\n\nexport const LayerHandler = () => {\n return Array.from(layers.values()).map((l, key) => {\n return (\n <Layer\n open={l.open}\n key={\"layer-\" + key}\n id={l.id}\n {...l.props}\n zIndex={layers.size}\n onClosed={() => {\n setTimeout(() => {\n layers.delete(l.id)\n }, 100);\n l?.props?.onClosed && l?.props?.onClosed()\n }}\n >{l.content}</Layer>\n )\n })\n}\n\n\nRenderar.create(\"LAYERS_RENDER\", LayerHandler)\n\nLayer.open = (id: string, content: ReactNode, props?: LayerHandlerProps) => {\n if (layers.has(id)) return\n layers.set(id, { id, props, content, open: true })\n Renderar.dispatch()\n}\n\nLayer.close = (id: string) => {\n const get = layers.get(id)\n if (get) {\n layers.set(id, { ...get, open: false })\n Renderar.dispatch()\n }\n}\n\nexport default Layer"],"names":["_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport Portal, { PortalProps } from \"../Portal\";\nimport { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\nimport Renderar from '../ThemeProvider/RenderRoot';\n\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode: LayerProps[\"blurMode\"]) => {\n return useMemo(() => {\n let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\n if (typeof window === 'undefined' || mode === 'transparent') {\n return transparent\n }\n const d = _d || (_d = window.document.createElement(\"div\").style)\n return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n }, [blur])\n}\n\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n id?: string;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n portal?: Omit<PortalProps, \"children\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n }\n}\n\nconst Layer = ({ children, open, id, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n return (\n <Portal {...slotProps?.portal}>\n <Transition\n duration={duration}\n delay={delay}\n easing=\"easeOut\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n id={id}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n ...blurCss\n }}\n onClick={(e: any) => {\n if (!e.currentTarget.firstChild?.contains(e.target)) {\n if (onClickOutside) {\n onClickOutside()\n }\n }\n }}\n >\n <Transition\n duration={duration}\n delay={delay}\n easing=\"easeOut\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n </Tag>\n </Transition>\n </Portal>\n )\n}\n\nexport type LayerHandlerProps = Omit<LayerProps, \"open\" | \"children\">\nconst layers = new Map<string, { id: string, open: boolean; props?: LayerHandlerProps, content: ReactNode }>()\n\nexport const LayerHandler = () => {\n return Array.from(layers.values()).map((l, key) => {\n return (\n <Layer\n open={l.open}\n key={\"layer-\" + key}\n id={l.id}\n {...l.props}\n zIndex={layers.size}\n onClosed={() => {\n setTimeout(() => {\n layers.delete(l.id)\n }, 100);\n l?.props?.onClosed && l?.props?.onClosed()\n }}\n >{l.content}</Layer>\n )\n })\n}\n\n\nRenderar.create(\"LAYERS_RENDER\", LayerHandler)\n\nLayer.open = (id: string, content: ReactNode, props?: LayerHandlerProps) => {\n if (layers.has(id)) return\n layers.set(id, { id, props, content, open: true })\n Renderar.dispatch()\n}\n\nLayer.close = (id: string) => {\n const get = layers.get(id)\n if (get) {\n layers.set(id, { ...get, open: false })\n Renderar.dispatch()\n }\n}\n\nexport default Layer"],"names":["_jsx"],"mappings":"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"}
|
package/LineProgress/index.js
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
let isVal = typeof value === 'number';
|
|
24
24
|
if (isVal && value > 100)
|
|
25
25
|
value = 100;
|
|
26
|
-
return (jsxRuntime.jsx(core.Tag,
|
|
26
|
+
return (jsxRuntime.jsx(core.Tag, { baseClass: 'line-progress', sxr: {
|
|
27
27
|
display: "flex",
|
|
28
28
|
alignItems: "center",
|
|
29
29
|
width: '100%',
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
overflow: "hidden",
|
|
33
33
|
bgcolor: hideTrack ? "transparent" : (color === 'default' ? `background.secondary` : `${color}.alpha`),
|
|
34
34
|
radius: 2,
|
|
35
|
-
}, ref: ref
|
|
35
|
+
}, ref: ref, children: jsxRuntime.jsx(core.Tag, { component: "span", baseClass: "line-progress-thumb", sxr: {
|
|
36
36
|
bgcolor: color === 'default' ? `divider` : `${color}`,
|
|
37
37
|
width: isVal ? `${value}%` : "50%",
|
|
38
38
|
height: thumbSize,
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"50%": { left: "20%", width: "80%" },
|
|
45
45
|
"100%": { left: "100%", width: "100%" }
|
|
46
46
|
}
|
|
47
|
-
} }) }))
|
|
47
|
+
} }) }));
|
|
48
48
|
});exports.default=LineProgress;//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, ColorTemplateColors, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n children?: ReactElement;\n thumbSize?: useBreakpointPropsType<number>;\n color?: useBreakpointPropsType<ColorTemplateColors>;\n value?: useBreakpointPropsType<number>;\n hideTrack?: useBreakpointPropsType<boolean>;\n speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n const uid = \"line-progress\" + useId().replace(\":\", \"\")\n let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n const _p: any = {}\n if (thumbSize) _p.thumbSize = thumbSize\n if (color) _p.color = color\n if (value) _p.value = value\n if (hideTrack) _p.hideTrack = hideTrack\n if (speed) _p.speed = speed\n const p: any = useBreakpointProps(_p)\n\n thumbSize = p.thumbSize ?? 4\n color = p.color ?? \"brand\"\n value = p.value\n hideTrack = p.hideTrack\n speed = p.speed\n\n let isVal = typeof value === 'number'\n if (isVal && (value as number) > 100) value = 100\n\n return (\n <Tag\n baseClass='line-progress'\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n width: '100%',\n height: thumbSize,\n position: \"relative\",\n overflow: \"hidden\",\n bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `background.secondary` : `${color}.alpha`),\n radius: 2,\n }}\n ref={ref}\n >\n <Tag\n component=\"span\"\n baseClass=\"line-progress-thumb\"\n sxr={{\n bgcolor: color === 'default' ? `divider` : `${color}`,\n width: isVal ? `${value}%` : \"50%\",\n height: thumbSize,\n position: \"absolute\",\n left: 0,\n animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\n [`@keyframes ${uid}`]: {\n \"0%\": { left: \"-40%\" },\n \"50%\": { left: \"20%\", width: \"80%\" },\n \"100%\": { left: \"100%\", width: \"100%\" }\n }\n }}\n />\n </Tag >\n )\n})\n\nexport default LineProgress\n\n"],"names":["__rest","useId","useInterface","useBreakpointProps","_jsx","Tag"],"mappings":"4LAcA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAyC,EAAE,GAAmB,KAAI;;AAAlE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA+B,EAA1B,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AACvD,IAAA,MAAM,GAAG,GAAG,eAAe,GAAGC,WAAK,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC;IACtD,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,GAAGC,iBAAY,CAAM,cAAc,EAAE,KAAK,EAAE,EAAE,CAAC;IAClG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,SAAS,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,CAAC;AAC5B,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;AAC1B,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,SAAS,GAAG,CAAC,CAAC,SAAS;AACvB,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AAEf,IAAA,IAAI,KAAK,GAAG,OAAO,KAAK,KAAK,QAAQ;AACrC,IAAA,IAAI,KAAK,IAAK,KAAgB,GAAG,GAAG;QAAE,KAAK,GAAG,GAAG;IAEjD,QACIC,eAACC,QAAG,EAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, ColorTemplateColors, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n children?: ReactElement;\n thumbSize?: useBreakpointPropsType<number>;\n color?: useBreakpointPropsType<ColorTemplateColors>;\n value?: useBreakpointPropsType<number>;\n hideTrack?: useBreakpointPropsType<boolean>;\n speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n const uid = \"line-progress\" + useId().replace(\":\", \"\")\n let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n const _p: any = {}\n if (thumbSize) _p.thumbSize = thumbSize\n if (color) _p.color = color\n if (value) _p.value = value\n if (hideTrack) _p.hideTrack = hideTrack\n if (speed) _p.speed = speed\n const p: any = useBreakpointProps(_p)\n\n thumbSize = p.thumbSize ?? 4\n color = p.color ?? \"brand\"\n value = p.value\n hideTrack = p.hideTrack\n speed = p.speed\n\n let isVal = typeof value === 'number'\n if (isVal && (value as number) > 100) value = 100\n\n return (\n <Tag\n baseClass='line-progress'\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n width: '100%',\n height: thumbSize,\n position: \"relative\",\n overflow: \"hidden\",\n bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `background.secondary` : `${color}.alpha`),\n radius: 2,\n }}\n ref={ref}\n >\n <Tag\n component=\"span\"\n baseClass=\"line-progress-thumb\"\n sxr={{\n bgcolor: color === 'default' ? `divider` : `${color}`,\n width: isVal ? `${value}%` : \"50%\",\n height: thumbSize,\n position: \"absolute\",\n left: 0,\n animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\n [`@keyframes ${uid}`]: {\n \"0%\": { left: \"-40%\" },\n \"50%\": { left: \"20%\", width: \"80%\" },\n \"100%\": { left: \"100%\", width: \"100%\" }\n }\n }}\n />\n </Tag >\n )\n})\n\nexport default LineProgress\n\n"],"names":["__rest","useId","useInterface","useBreakpointProps","_jsx","Tag"],"mappings":"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"}
|
package/LineProgress/index.mjs
CHANGED
|
@@ -23,7 +23,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{use
|
|
|
23
23
|
let isVal = typeof value === 'number';
|
|
24
24
|
if (isVal && value > 100)
|
|
25
25
|
value = 100;
|
|
26
|
-
return (jsx(Tag,
|
|
26
|
+
return (jsx(Tag, { baseClass: 'line-progress', sxr: {
|
|
27
27
|
display: "flex",
|
|
28
28
|
alignItems: "center",
|
|
29
29
|
width: '100%',
|
|
@@ -32,7 +32,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{use
|
|
|
32
32
|
overflow: "hidden",
|
|
33
33
|
bgcolor: hideTrack ? "transparent" : (color === 'default' ? `background.secondary` : `${color}.alpha`),
|
|
34
34
|
radius: 2,
|
|
35
|
-
}, ref: ref
|
|
35
|
+
}, ref: ref, children: jsx(Tag, { component: "span", baseClass: "line-progress-thumb", sxr: {
|
|
36
36
|
bgcolor: color === 'default' ? `divider` : `${color}`,
|
|
37
37
|
width: isVal ? `${value}%` : "50%",
|
|
38
38
|
height: thumbSize,
|
|
@@ -44,5 +44,5 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{use
|
|
|
44
44
|
"50%": { left: "20%", width: "80%" },
|
|
45
45
|
"100%": { left: "100%", width: "100%" }
|
|
46
46
|
}
|
|
47
|
-
} }) }))
|
|
47
|
+
} }) }));
|
|
48
48
|
});export{LineProgress as default};//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, ColorTemplateColors, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n children?: ReactElement;\n thumbSize?: useBreakpointPropsType<number>;\n color?: useBreakpointPropsType<ColorTemplateColors>;\n value?: useBreakpointPropsType<number>;\n hideTrack?: useBreakpointPropsType<boolean>;\n speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n const uid = \"line-progress\" + useId().replace(\":\", \"\")\n let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n const _p: any = {}\n if (thumbSize) _p.thumbSize = thumbSize\n if (color) _p.color = color\n if (value) _p.value = value\n if (hideTrack) _p.hideTrack = hideTrack\n if (speed) _p.speed = speed\n const p: any = useBreakpointProps(_p)\n\n thumbSize = p.thumbSize ?? 4\n color = p.color ?? \"brand\"\n value = p.value\n hideTrack = p.hideTrack\n speed = p.speed\n\n let isVal = typeof value === 'number'\n if (isVal && (value as number) > 100) value = 100\n\n return (\n <Tag\n baseClass='line-progress'\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n width: '100%',\n height: thumbSize,\n position: \"relative\",\n overflow: \"hidden\",\n bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `background.secondary` : `${color}.alpha`),\n radius: 2,\n }}\n ref={ref}\n >\n <Tag\n component=\"span\"\n baseClass=\"line-progress-thumb\"\n sxr={{\n bgcolor: color === 'default' ? `divider` : `${color}`,\n width: isVal ? `${value}%` : \"50%\",\n height: thumbSize,\n position: \"absolute\",\n left: 0,\n animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\n [`@keyframes ${uid}`]: {\n \"0%\": { left: \"-40%\" },\n \"50%\": { left: \"20%\", width: \"80%\" },\n \"100%\": { left: \"100%\", width: \"100%\" }\n }\n }}\n />\n </Tag >\n )\n})\n\nexport default LineProgress\n\n"],"names":["_jsx"],"mappings":"6JAcA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAyC,EAAE,GAAmB,KAAI;;AAAlE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA+B,EAA1B,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AACvD,IAAA,MAAM,GAAG,GAAG,eAAe,GAAG,KAAK,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC;IACtD,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,YAAY,CAAM,cAAc,EAAE,KAAK,EAAE,EAAE,CAAC;IAClG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,SAAS,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,CAAC;AAC5B,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;AAC1B,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,SAAS,GAAG,CAAC,CAAC,SAAS;AACvB,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AAEf,IAAA,IAAI,KAAK,GAAG,OAAO,KAAK,KAAK,QAAQ;AACrC,IAAA,IAAI,KAAK,IAAK,KAAgB,GAAG,GAAG;QAAE,KAAK,GAAG,GAAG;IAEjD,QACIA,IAAC,GAAG,EAAA,
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, ColorTemplateColors, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n children?: ReactElement;\n thumbSize?: useBreakpointPropsType<number>;\n color?: useBreakpointPropsType<ColorTemplateColors>;\n value?: useBreakpointPropsType<number>;\n hideTrack?: useBreakpointPropsType<boolean>;\n speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n const uid = \"line-progress\" + useId().replace(\":\", \"\")\n let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n const _p: any = {}\n if (thumbSize) _p.thumbSize = thumbSize\n if (color) _p.color = color\n if (value) _p.value = value\n if (hideTrack) _p.hideTrack = hideTrack\n if (speed) _p.speed = speed\n const p: any = useBreakpointProps(_p)\n\n thumbSize = p.thumbSize ?? 4\n color = p.color ?? \"brand\"\n value = p.value\n hideTrack = p.hideTrack\n speed = p.speed\n\n let isVal = typeof value === 'number'\n if (isVal && (value as number) > 100) value = 100\n\n return (\n <Tag\n baseClass='line-progress'\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n width: '100%',\n height: thumbSize,\n position: \"relative\",\n overflow: \"hidden\",\n bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `background.secondary` : `${color}.alpha`),\n radius: 2,\n }}\n ref={ref}\n >\n <Tag\n component=\"span\"\n baseClass=\"line-progress-thumb\"\n sxr={{\n bgcolor: color === 'default' ? `divider` : `${color}`,\n width: isVal ? `${value}%` : \"50%\",\n height: thumbSize,\n position: \"absolute\",\n left: 0,\n animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\n [`@keyframes ${uid}`]: {\n \"0%\": { left: \"-40%\" },\n \"50%\": { left: \"20%\", width: \"80%\" },\n \"100%\": { left: \"100%\", width: \"100%\" }\n }\n }}\n />\n </Tag >\n )\n})\n\nexport default LineProgress\n\n"],"names":["_jsx"],"mappings":"6JAcA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAyC,EAAE,GAAmB,KAAI;;AAAlE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA+B,EAA1B,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AACvD,IAAA,MAAM,GAAG,GAAG,eAAe,GAAG,KAAK,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC;IACtD,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,YAAY,CAAM,cAAc,EAAE,KAAK,EAAE,EAAE,CAAC;IAClG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,SAAS,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,CAAC;AAC5B,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;AAC1B,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,SAAS,GAAG,CAAC,CAAC,SAAS;AACvB,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AAEf,IAAA,IAAI,KAAK,GAAG,OAAO,KAAK,KAAK,QAAQ;AACrC,IAAA,IAAI,KAAK,IAAK,KAAgB,GAAG,GAAG;QAAE,KAAK,GAAG,GAAG;IAEjD,QACIA,IAAC,GAAG,EAAA,EACA,SAAS,EAAC,eAAe,EACzB,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,SAAS,GAAG,aAAa,IAAI,KAAK,KAAK,SAAS,GAAG,CAAA,oBAAA,CAAsB,GAAG,CAAA,EAAG,KAAK,CAAA,MAAA,CAAQ,CAAC;AACtG,YAAA,MAAM,EAAE,CAAC;AACZ,SAAA,EACD,GAAG,EAAE,GAAG,EAAA,QAAA,EAERA,GAAA,CAAC,GAAG,EAAA,EACA,SAAS,EAAC,MAAM,EAChB,SAAS,EAAC,qBAAqB,EAC/B,GAAG,EAAE;AACD,gBAAA,OAAO,EAAE,KAAK,KAAK,SAAS,GAAG,CAAA,OAAA,CAAS,GAAG,CAAA,EAAG,KAAK,CAAA,CAAE;gBACrD,KAAK,EAAE,KAAK,GAAG,CAAA,EAAG,KAAK,CAAA,CAAA,CAAG,GAAG,KAAK;AAClC,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,IAAI,EAAE,CAAC;AACP,gBAAA,SAAS,EAAE,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,CAAA,CAAA,EAAI,KAAK,KAAA,IAAA,IAAL,KAAK,cAAL,KAAK,GAAI,CAAC,CAAA,iBAAA,CAAmB;AACnE,gBAAA,CAAC,CAAA,WAAA,EAAc,GAAG,CAAA,CAAE,GAAG;AACnB,oBAAA,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;oBACtB,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;oBACpC,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;AACxC;aACJ,EAAA,CACH,EAAA,CACC;AAEf,CAAC"}
|
package/List/index.js
CHANGED
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
color: template.color
|
|
48
48
|
}, "& .list-item-subtitle": {
|
|
49
49
|
color: template.color
|
|
50
|
-
} }) }), (sx || {})), ref: ref
|
|
50
|
+
} }) }), (sx || {})), ref: ref, children: children })));
|
|
51
51
|
});exports.default=List;//# sourceMappingURL=index.js.map
|
package/List/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, ColorTemplateType, ColorTemplateColors, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color'> & {\n color?: useBreakpointPropsType<ColorTemplateColors>;\n variant?: useBreakpointPropsType<ColorTemplateType>;\n hoverColor?: useBreakpointPropsType<ColorTemplateColors>;\n hoverVariant?: useBreakpointPropsType<ColorTemplateType>;\n}\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n let [{ sx, color, variant, hoverColor, hoverVariant, ...props }] = useInterface<any>(\"List\", rest, {})\n const _p: any = {}\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n const p: any = useBreakpointProps(_p)\n\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n hoverColor = p.hoverColor ?? \"default\"\n hoverVariant = p.hoverVariant ?? \"alpha\"\n\n const template = { ...useColorTemplate(color, variant) }\n const hoverTemplate = { ...useColorTemplate(hoverColor, hoverVariant) }\n delete template.hover\n delete hoverTemplate.hover\n\n let sxOutline: any = {}\n if (hoverVariant == 'outline' || variant === 'outline') {\n sxOutline = {\n \"& .list-item\": {\n border: 1,\n borderColor: \"transparent\"\n }\n }\n }\n\n return (\n <Tag\n component='ul'\n {...props}\n baseClass='list'\n sxr={{\n listStyle: \"none\",\n p: 0,\n m: 0,\n ...sxOutline,\n \"& .list-item-icon\": {\n color: \"text.secondary\"\n },\n \"& .list-item-text\": {\n color: \"text.primary\"\n },\n \"& .list-item-subtitle\": {\n color: \"text.secondary\"\n },\n \"& .xui-list-item:not(.list-item-selected):hover\": {\n ...hoverTemplate,\n \"& .list-item-icon\": {\n color: hoverTemplate.color\n },\n \"& .list-item-text\": {\n color: hoverTemplate.color\n },\n \"& .list-item-subtitle\": {\n color: hoverColor === 'default' ? \"text.secondary\" : hoverTemplate.color\n },\n },\n \"& .xui-list-item.list-item-selected\": {\n ...template,\n \"& .list-item-icon\": {\n color: template.color\n },\n \"& .list-item-text\": {\n color: template.color\n },\n \"& .list-item-subtitle\": {\n color: template.color\n },\n },\n ...(sx || {} as any)\n }}\n ref={ref}\n >\n {children}\n </Tag>\n )\n})\n\nexport default List"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","Tag"],"mappings":"4LAYA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAoC,EAAmC,EAAE,GAAmB,KAAI;;AAA5D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACjF,IAAI,CAAA,EAAA,CAAA,GAA+DC,iBAAY,CAAM,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC,EAAjG,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAAxD,CAAA,IAAA,EAAA,OAAA,EAAA,SAAA,EAAA,YAAA,EAAA,cAAA,CAA0D,CAAuC;IACtG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,IAAI,YAAY;AAAE,QAAA,EAAE,CAAC,YAAY,GAAG,YAAY;AAChD,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;AAC1B,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;AAC7B,IAAA,UAAU,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,SAAS;AACtC,IAAA,YAAY,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;IAExC,MAAM,QAAQ,qBAAQC,qBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAE;IACxD,MAAM,aAAa,qBAAQA,qBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAE;IACvE,OAAO,QAAQ,CAAC,KAAK;IACrB,OAAO,aAAa,CAAC,KAAK;IAE1B,IAAI,SAAS,GAAQ,EAAE;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, ColorTemplateType, ColorTemplateColors, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color'> & {\n color?: useBreakpointPropsType<ColorTemplateColors>;\n variant?: useBreakpointPropsType<ColorTemplateType>;\n hoverColor?: useBreakpointPropsType<ColorTemplateColors>;\n hoverVariant?: useBreakpointPropsType<ColorTemplateType>;\n}\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n let [{ sx, color, variant, hoverColor, hoverVariant, ...props }] = useInterface<any>(\"List\", rest, {})\n const _p: any = {}\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n const p: any = useBreakpointProps(_p)\n\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n hoverColor = p.hoverColor ?? \"default\"\n hoverVariant = p.hoverVariant ?? \"alpha\"\n\n const template = { ...useColorTemplate(color, variant) }\n const hoverTemplate = { ...useColorTemplate(hoverColor, hoverVariant) }\n delete template.hover\n delete hoverTemplate.hover\n\n let sxOutline: any = {}\n if (hoverVariant == 'outline' || variant === 'outline') {\n sxOutline = {\n \"& .list-item\": {\n border: 1,\n borderColor: \"transparent\"\n }\n }\n }\n\n return (\n <Tag\n component='ul'\n {...props}\n baseClass='list'\n sxr={{\n listStyle: \"none\",\n p: 0,\n m: 0,\n ...sxOutline,\n \"& .list-item-icon\": {\n color: \"text.secondary\"\n },\n \"& .list-item-text\": {\n color: \"text.primary\"\n },\n \"& .list-item-subtitle\": {\n color: \"text.secondary\"\n },\n \"& .xui-list-item:not(.list-item-selected):hover\": {\n ...hoverTemplate,\n \"& .list-item-icon\": {\n color: hoverTemplate.color\n },\n \"& .list-item-text\": {\n color: hoverTemplate.color\n },\n \"& .list-item-subtitle\": {\n color: hoverColor === 'default' ? \"text.secondary\" : hoverTemplate.color\n },\n },\n \"& .xui-list-item.list-item-selected\": {\n ...template,\n \"& .list-item-icon\": {\n color: template.color\n },\n \"& .list-item-text\": {\n color: template.color\n },\n \"& .list-item-subtitle\": {\n color: template.color\n },\n },\n ...(sx || {} as any)\n }}\n ref={ref}\n >\n {children}\n </Tag>\n )\n})\n\nexport default List"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","Tag"],"mappings":"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"}
|
package/List/index.mjs
CHANGED
|
@@ -47,5 +47,5 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from
|
|
|
47
47
|
color: template.color
|
|
48
48
|
}, "& .list-item-subtitle": {
|
|
49
49
|
color: template.color
|
|
50
|
-
} }) }), (sx || {})), ref: ref
|
|
50
|
+
} }) }), (sx || {})), ref: ref, children: children })));
|
|
51
51
|
});export{List as default};//# sourceMappingURL=index.mjs.map
|
package/List/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, ColorTemplateType, ColorTemplateColors, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color'> & {\n color?: useBreakpointPropsType<ColorTemplateColors>;\n variant?: useBreakpointPropsType<ColorTemplateType>;\n hoverColor?: useBreakpointPropsType<ColorTemplateColors>;\n hoverVariant?: useBreakpointPropsType<ColorTemplateType>;\n}\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n let [{ sx, color, variant, hoverColor, hoverVariant, ...props }] = useInterface<any>(\"List\", rest, {})\n const _p: any = {}\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n const p: any = useBreakpointProps(_p)\n\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n hoverColor = p.hoverColor ?? \"default\"\n hoverVariant = p.hoverVariant ?? \"alpha\"\n\n const template = { ...useColorTemplate(color, variant) }\n const hoverTemplate = { ...useColorTemplate(hoverColor, hoverVariant) }\n delete template.hover\n delete hoverTemplate.hover\n\n let sxOutline: any = {}\n if (hoverVariant == 'outline' || variant === 'outline') {\n sxOutline = {\n \"& .list-item\": {\n border: 1,\n borderColor: \"transparent\"\n }\n }\n }\n\n return (\n <Tag\n component='ul'\n {...props}\n baseClass='list'\n sxr={{\n listStyle: \"none\",\n p: 0,\n m: 0,\n ...sxOutline,\n \"& .list-item-icon\": {\n color: \"text.secondary\"\n },\n \"& .list-item-text\": {\n color: \"text.primary\"\n },\n \"& .list-item-subtitle\": {\n color: \"text.secondary\"\n },\n \"& .xui-list-item:not(.list-item-selected):hover\": {\n ...hoverTemplate,\n \"& .list-item-icon\": {\n color: hoverTemplate.color\n },\n \"& .list-item-text\": {\n color: hoverTemplate.color\n },\n \"& .list-item-subtitle\": {\n color: hoverColor === 'default' ? \"text.secondary\" : hoverTemplate.color\n },\n },\n \"& .xui-list-item.list-item-selected\": {\n ...template,\n \"& .list-item-icon\": {\n color: template.color\n },\n \"& .list-item-text\": {\n color: template.color\n },\n \"& .list-item-subtitle\": {\n color: template.color\n },\n },\n ...(sx || {} as any)\n }}\n ref={ref}\n >\n {children}\n </Tag>\n )\n})\n\nexport default List"],"names":["_jsx"],"mappings":"uKAYA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAoC,EAAmC,EAAE,GAAmB,KAAI;;AAA5D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACjF,IAAI,CAAA,EAAA,CAAA,GAA+D,YAAY,CAAM,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC,EAAjG,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAxD,CAAA,IAAA,EAAA,OAAA,EAAA,SAAA,EAAA,YAAA,EAAA,cAAA,CAA0D,CAAuC;IACtG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,IAAI,YAAY;AAAE,QAAA,EAAE,CAAC,YAAY,GAAG,YAAY;AAChD,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;AAC1B,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;AAC7B,IAAA,UAAU,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,SAAS;AACtC,IAAA,YAAY,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;IAExC,MAAM,QAAQ,qBAAQ,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAE;IACxD,MAAM,aAAa,qBAAQ,gBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAE;IACvE,OAAO,QAAQ,CAAC,KAAK;IACrB,OAAO,aAAa,CAAC,KAAK;IAE1B,IAAI,SAAS,GAAQ,EAAE;
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, ColorTemplateType, ColorTemplateColors, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color'> & {\n color?: useBreakpointPropsType<ColorTemplateColors>;\n variant?: useBreakpointPropsType<ColorTemplateType>;\n hoverColor?: useBreakpointPropsType<ColorTemplateColors>;\n hoverVariant?: useBreakpointPropsType<ColorTemplateType>;\n}\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n let [{ sx, color, variant, hoverColor, hoverVariant, ...props }] = useInterface<any>(\"List\", rest, {})\n const _p: any = {}\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n const p: any = useBreakpointProps(_p)\n\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n hoverColor = p.hoverColor ?? \"default\"\n hoverVariant = p.hoverVariant ?? \"alpha\"\n\n const template = { ...useColorTemplate(color, variant) }\n const hoverTemplate = { ...useColorTemplate(hoverColor, hoverVariant) }\n delete template.hover\n delete hoverTemplate.hover\n\n let sxOutline: any = {}\n if (hoverVariant == 'outline' || variant === 'outline') {\n sxOutline = {\n \"& .list-item\": {\n border: 1,\n borderColor: \"transparent\"\n }\n }\n }\n\n return (\n <Tag\n component='ul'\n {...props}\n baseClass='list'\n sxr={{\n listStyle: \"none\",\n p: 0,\n m: 0,\n ...sxOutline,\n \"& .list-item-icon\": {\n color: \"text.secondary\"\n },\n \"& .list-item-text\": {\n color: \"text.primary\"\n },\n \"& .list-item-subtitle\": {\n color: \"text.secondary\"\n },\n \"& .xui-list-item:not(.list-item-selected):hover\": {\n ...hoverTemplate,\n \"& .list-item-icon\": {\n color: hoverTemplate.color\n },\n \"& .list-item-text\": {\n color: hoverTemplate.color\n },\n \"& .list-item-subtitle\": {\n color: hoverColor === 'default' ? \"text.secondary\" : hoverTemplate.color\n },\n },\n \"& .xui-list-item.list-item-selected\": {\n ...template,\n \"& .list-item-icon\": {\n color: template.color\n },\n \"& .list-item-text\": {\n color: template.color\n },\n \"& .list-item-subtitle\": {\n color: template.color\n },\n },\n ...(sx || {} as any)\n }}\n ref={ref}\n >\n {children}\n </Tag>\n )\n})\n\nexport default List"],"names":["_jsx"],"mappings":"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"}
|
package/ListItem/index.js
CHANGED
|
@@ -22,5 +22,5 @@
|
|
|
22
22
|
p: 1,
|
|
23
23
|
whiteSpace: "nowrap",
|
|
24
24
|
flexShrink: "0",
|
|
25
|
-
}, baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref
|
|
25
|
+
}, baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsxRuntime.jsx(core.Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxRuntime.jsxs(core.Tag, { flex: 1, children: [jsxRuntime.jsx(index.default, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", children: children }), subtitle && jsxRuntime.jsx(index.default, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", children: subtitle })] }), endIcon && jsxRuntime.jsx(core.Tag, { ml: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: endIcon })] })));
|
|
26
26
|
});exports.default=ListItem;//# sourceMappingURL=index.js.map
|
package/ListItem/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n selected?: boolean;\n subtitle?: useBreakpointPropsType<string | ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n const _p: any = {}\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n const p: any = useBreakpointProps(_p)\n\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n\n return (\n <Tag\n component='li'\n {...props}\n sxr={{\n alignItems: \"center\",\n display: \"flex\",\n flexDirection: \"row\",\n userSelect: \"none\",\n cursor: \"pointer\",\n lineHeight: 1.4,\n p: 1,\n whiteSpace: \"nowrap\",\n flexShrink: \"0\",\n }}\n baseClass='list-item'\n classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n ref={ref}\n >\n {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n <Tag flex={1}>\n <Text\n variant=\"text\"\n className='list-item-text'\n component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n >\n {children}\n </Text>\n {\n subtitle && <Text\n variant=\"text\"\n fontSize=\"button\"\n className='list-item-subtitle'\n component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n >{subtitle as any}</Text>\n }\n </Tag>\n {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n </Tag>\n )\n})\n\nexport default ListItem"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","Text"],"mappings":"8NAaA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAoC,EAAqE,EAAE,GAAmB,KAAI;AAA9F,IAAA,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAjD,CAAA,UAAA,EAAA,WAAA,EAAA,SAAA,EAAA,UAAA,CAAmD,CAAF;AACnH,IAAA,IAAI,OAA2BC,iBAAY,CAAM,UAAU,EAAE,IAAI,EAAE,EAAE,CAAC,EAAjE,EAAE,QAAQ,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAApB,CAAA,UAAA,CAAsB,CAA2C;IACtE,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AACrB,IAAA,SAAS,GAAG,CAAC,CAAC,SAAS;AACvB,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO;IAEnB,QACIC,eAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,IAAI,EAAA,EACV,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,CAAC,EAAE,CAAC;AACJ,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,UAAU,EAAE,GAAG;AAClB,SAAA,EACD,SAAS,EAAC,WAAW,EACrB,UAAU,EAAE,CAAC,EAAE,oBAAoB,EAAE,QAAmB,EAAE,EAAE,IAAI,KAAK,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,EACxF,GAAG,EAAE,GAAG,EAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n selected?: boolean;\n subtitle?: useBreakpointPropsType<string | ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n const _p: any = {}\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n const p: any = useBreakpointProps(_p)\n\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n\n return (\n <Tag\n component='li'\n {...props}\n sxr={{\n alignItems: \"center\",\n display: \"flex\",\n flexDirection: \"row\",\n userSelect: \"none\",\n cursor: \"pointer\",\n lineHeight: 1.4,\n p: 1,\n whiteSpace: \"nowrap\",\n flexShrink: \"0\",\n }}\n baseClass='list-item'\n classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n ref={ref}\n >\n {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n <Tag flex={1}>\n <Text\n variant=\"text\"\n className='list-item-text'\n component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n >\n {children}\n </Text>\n {\n subtitle && <Text\n variant=\"text\"\n fontSize=\"button\"\n className='list-item-subtitle'\n component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n >{subtitle as any}</Text>\n }\n </Tag>\n {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n </Tag>\n )\n})\n\nexport default ListItem"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","Text"],"mappings":"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"}
|
package/ListItem/index.mjs
CHANGED
|
@@ -22,5 +22,5 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
|
|
|
22
22
|
p: 1,
|
|
23
23
|
whiteSpace: "nowrap",
|
|
24
24
|
flexShrink: "0",
|
|
25
|
-
}, baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref
|
|
25
|
+
}, baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsx(Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxs(Tag, { flex: 1, children: [jsx(Text, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", children: children }), subtitle && jsx(Text, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", children: subtitle })] }), endIcon && jsx(Tag, { ml: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: endIcon })] })));
|
|
26
26
|
});export{ListItem as default};//# sourceMappingURL=index.mjs.map
|
package/ListItem/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n selected?: boolean;\n subtitle?: useBreakpointPropsType<string | ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n const _p: any = {}\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n const p: any = useBreakpointProps(_p)\n\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n\n return (\n <Tag\n component='li'\n {...props}\n sxr={{\n alignItems: \"center\",\n display: \"flex\",\n flexDirection: \"row\",\n userSelect: \"none\",\n cursor: \"pointer\",\n lineHeight: 1.4,\n p: 1,\n whiteSpace: \"nowrap\",\n flexShrink: \"0\",\n }}\n baseClass='list-item'\n classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n ref={ref}\n >\n {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n <Tag flex={1}>\n <Text\n variant=\"text\"\n className='list-item-text'\n component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n >\n {children}\n </Text>\n {\n subtitle && <Text\n variant=\"text\"\n fontSize=\"button\"\n className='list-item-subtitle'\n component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n >{subtitle as any}</Text>\n }\n </Tag>\n {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n </Tag>\n )\n})\n\nexport default ListItem"],"names":["_jsxs","_jsx"],"mappings":"+LAaA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAoC,EAAqE,EAAE,GAAmB,KAAI;AAA9F,IAAA,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAjD,CAAA,UAAA,EAAA,WAAA,EAAA,SAAA,EAAA,UAAA,CAAmD,CAAF;AACnH,IAAA,IAAI,OAA2B,YAAY,CAAM,UAAU,EAAE,IAAI,EAAE,EAAE,CAAC,EAAjE,EAAE,QAAQ,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,CAAA,UAAA,CAAsB,CAA2C;IACtE,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AACrB,IAAA,SAAS,GAAG,CAAC,CAAC,SAAS;AACvB,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO;IAEnB,QACIA,IAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,IAAI,EAAA,EACV,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,CAAC,EAAE,CAAC;AACJ,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,UAAU,EAAE,GAAG;AAClB,SAAA,EACD,SAAS,EAAC,WAAW,EACrB,UAAU,EAAE,CAAC,EAAE,oBAAoB,EAAE,QAAmB,EAAE,EAAE,IAAI,KAAK,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,EACxF,GAAG,EAAE,GAAG,EAAA,
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n selected?: boolean;\n subtitle?: useBreakpointPropsType<string | ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n const _p: any = {}\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n const p: any = useBreakpointProps(_p)\n\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n\n return (\n <Tag\n component='li'\n {...props}\n sxr={{\n alignItems: \"center\",\n display: \"flex\",\n flexDirection: \"row\",\n userSelect: \"none\",\n cursor: \"pointer\",\n lineHeight: 1.4,\n p: 1,\n whiteSpace: \"nowrap\",\n flexShrink: \"0\",\n }}\n baseClass='list-item'\n classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n ref={ref}\n >\n {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n <Tag flex={1}>\n <Text\n variant=\"text\"\n className='list-item-text'\n component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n >\n {children}\n </Text>\n {\n subtitle && <Text\n variant=\"text\"\n fontSize=\"button\"\n className='list-item-subtitle'\n component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n >{subtitle as any}</Text>\n }\n </Tag>\n {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n </Tag>\n )\n})\n\nexport default ListItem"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
package/LoadingBox/index.js
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
_p.color = color;
|
|
8
8
|
const p = core.useBreakpointProps(_p);
|
|
9
9
|
color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
|
|
10
|
-
return (jsxRuntime.jsxs(core.Tag, Object.assign({ baseClass: 'loading-box' }, rest, { sxr: Object.assign({ position: "relative", display: "inline-block" }, (rest.sx || {})), disabled: (_c = loading !== null && loading !== void 0 ? loading : rest.disabled) !== null && _c !== void 0 ? _c : false, ref: ref
|
|
10
|
+
return (jsxRuntime.jsxs(core.Tag, Object.assign({ baseClass: 'loading-box' }, rest, { sxr: Object.assign({ position: "relative", display: "inline-block" }, (rest.sx || {})), disabled: (_c = loading !== null && loading !== void 0 ? loading : rest.disabled) !== null && _c !== void 0 ? _c : false, ref: ref, children: [loading && jsxRuntime.jsx(core.Tag, { baseClass: "loading-box-container", sxr: {
|
|
11
11
|
position: "absolute",
|
|
12
12
|
top: 0,
|
|
13
13
|
left: 0,
|
|
@@ -18,5 +18,5 @@
|
|
|
18
18
|
justifyContent: "center",
|
|
19
19
|
alignItems: "center",
|
|
20
20
|
bgcolor: "background.alpha"
|
|
21
|
-
}
|
|
21
|
+
}, children: jsxRuntime.jsx(index.default, Object.assign({ color: "brand", hideTrack: true }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.CircleProgress)) }), children] })));
|
|
22
22
|
});exports.default=LoadingBox;//# sourceMappingURL=index.js.map
|