npm - @xanui/ui - Versions diffs - 1.1.65 → 1.1.66 - Mend

@xanui/ui 1.1.65 → 1.1.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/Alert/index.cjs CHANGED Viewed

@@ -75,7 +75,8 @@ const Alert = (_a) => {
                             flex: 1,
                             color: template.primary.color,
                             textAlign: isRow ? "left" : "center",
-                            gap: isRow ? 0 : 1
+                            gap: isRow ? 0 : 1,
+                            width: "100%"
                         }, children: [title && jsxRuntime.jsx(jsxRuntime.Fragment, { children: React.isValidElement(title) ? jsxRuntime.jsx(core.Tag, { className: "alert-title", children: title }) : jsxRuntime.jsx(index$1, { className: "alert-titles", variant: "text", sx: {
                                         fontWeight: 500,
                                         color: template.primary.color

package/Alert/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" \| \"title\" \| \"direction\"> & {\n title?: useBreakpointPropsType<string \| ReactElement>;\n direction?: useBreakpointPropsType<\"row\" \| \"column\">;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" \| \"warning\" \| \"success\" \| \"error\" \| false \| ReactElement>;\n onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string \| ReactElement \| AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n let [{\n title,\n variant,\n icon,\n color,\n direction,\n slotProps,\n onClose,\n ..._props\n }] = useInterface<any>(\"Alert\", rest, {\n variant: \"fill\"\n })\n color ??= \"default\"\n direction ??= \"row\"\n\n const _p: any = {}\n if (title) _p.title = title\n if (variant) _p.variant = variant\n if (icon) _p.icon = icon\n if (color) _p.color = color\n if (direction) _p.direction = direction\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n variant = p.variant\n icon = p.icon\n color = p.color\n direction = p.direction\n\n let isRow = direction === 'row'\n\n\n const template = useColorTemplate(color, variant)\n\n let iconsx = {\n fontSize: isRow ? 22 : 40,\n color: color === 'default' ? \"text.primary\" : template.primary.color\n }\n\n const icons: any = {\n \"info\": <InfoIcon sx={iconsx} />,\n \"warning\": <WarningIcon sx={iconsx} />,\n \"success\": <SuccessIcon sx={iconsx} />,\n \"danger\": <ErrorIcon sx={iconsx} />\n }\n\n let _icon = icons[icon] \|\| icons[color]\n\n return (\n <Tag\n {..._props}\n baseClass=\"alert\"\n sxr={{\n justifyContent: \"flex-start\",\n position: \"relative\",\n radius: 1,\n px: isRow ? (_icon ? .5 : 2) : 3,\n py: isRow ? .5 : 3,\n flexDirection: \"column\",\n display: 'flex',\n ..._props?.sx\n }}\n {...template.primary}\n >\n {\n onClose && <IconButton\n color={color}\n variant={variant === 'fill' ? \"fill\" : \"text\"}\n size={25}\n sx={{\n position: \"absolute\",\n top: 5,\n right: 5\n }}\n onClick={onClose}\n className=\"alert-close-button\"\n >\n <IconClose fontSize={18} />\n </IconButton>\n }\n <Tag\n sx={{\n display: \"flex\",\n gap: 1,\n flexDirection: direction,\n alignItems: isRow ? \"flex-start\" : \"center\"\n }}\n baseClass=\"alert-container\"\n >\n {\n _icon && <Tag\n baseClass=\"alert-icon\"\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n p: isRow ? .5 : 0,\n \"& svg\": {\n color: template.primary.color\n }\n }}\n >\n {_icon}\n </Tag>\n }\n <Tag\n baseClass=\"alert-content\"\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n flex: 1,\n color: template.primary.color,\n textAlign: isRow ? \"left\" : \"center\",\n gap: isRow ? 0 : 1\n }}\n >\n {title && <>\n {\n isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n className=\"alert-titles\"\n variant=\"text\"\n sx={{\n fontWeight: 500,\n color: template.primary.color\n }}\n >{title}</Text>\n }\n </>}\n <Tag\n sxr={{\n font: \"button\",\n }}\n >\n {children}\n </Tag>\n </Tag>\n </Tag>\n </Tag>\n )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' \| 'onClose' \| 'variant' \| \"size\"> & {\n open: boolean;\n loading: boolean;\n content: string \| ReactElement,\n size?: \"small\" \| \"medium\" \| \"large\" \| number;\n closeButton?: boolean;\n clickOutsideToClose?: boolean;\n okButtonText?: string;\n cancelButtonText?: string;\n hideOkButton?: boolean;\n hideCancelButton?: boolean;\n buttonPlacement?: \"start\" \| \"end\" \| \"between\" \| \"full\";\n variant?: \"text\" \| \"fill\"\n onConfirm?: () => Promise<void> \| void;\n onCancel?: () => Promise<void> \| void;\n transition?: UseTransitionVariantTypes;\n blurMode?: ModalProps['blurMode'];\n slotProps?: {\n modal?: Omit<ModalProps, 'open' \| \"children\">;\n okButton?: Omit<ButtonProps, \"children\">;\n closeButton?: Omit<ButtonProps, \"children\">;\n }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n let {\n open,\n loading,\n content,\n size,\n color,\n direction,\n variant,\n closeButton,\n clickOutsideToClose,\n okButtonText,\n cancelButtonText,\n hideOkButton,\n hideCancelButton,\n buttonPlacement,\n onConfirm,\n onCancel,\n transition,\n blurMode,\n slotProps,\n ...rest\n } = props\n\n hideOkButton ??= false\n hideCancelButton ??= false\n\n size ??= \"small\"\n color ??= 'default'\n variant ??= \"text\"\n direction ??= \"column\"\n buttonPlacement ??= \"end\"\n let sx: any = {};\n\n switch (buttonPlacement) {\n case \"start\":\n sx.justifyContent = 'flex-start'\n break;\n case \"end\":\n sx.justifyContent = 'flex-end'\n break;\n case \"between\":\n sx.justifyContent = 'space-between'\n break;\n case \"full\":\n sx = {\n \"& button\": {\n flex: 1\n }\n }\n break;\n }\n\n let sizes: any = {\n small: 320,\n medium: 400,\n large: 600\n }\n\n let okcolor = color\n let closecolor = color\n if (color === 'default') {\n okcolor = 'brand'\n closecolor = 'default'\n variant = 'text'\n } else {\n if (variant === 'fill') {\n okcolor = 'default'\n closecolor = 'default'\n } else {\n okcolor = color\n closecolor = 'default'\n }\n }\n\n return (<Modal\n open={open}\n {...slotProps?.modal}\n size={sizes[size] \|\| size}\n blur={40}\n blurMode={blurMode \|\| \"transparent\"}\n transition={transition \|\| \"zoom\"}\n onClickOutside={async () => {\n if (clickOutsideToClose && !loading) {\n onCancel && await onCancel()\n }\n }}\n >\n <Alert\n direction={direction}\n sx={{\n px: 2,\n py: 1,\n pt: direction === 'row' ? 1 : 2\n }}\n color={color}\n variant={variant}\n onClose={closeButton ? close : undefined}\n {...rest}\n >\n {content}\n <Tag\n sxr={{\n display: \"flex\",\n gap: 1,\n pt: 4,\n flexDirection: \"row\",\n ...sx,\n }}\n >\n {!hideCancelButton && <Button\n disabled={loading}\n color={closecolor}\n variant=\"fill\"\n {...slotProps?.closeButton}\n onClick={async () => {\n onCancel && await onCancel()\n }}\n >{cancelButtonText \|\| \"Close\"}</Button>}\n <Button\n loading={loading}\n color={okcolor}\n variant=\"fill\"\n {...slotProps?.okButton}\n\n onClick={async () => {\n onConfirm && await onConfirm()\n }}\n >{okButtonText \|\| \"OK\"}</Button>\n </Tag>\n </Alert>\n </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" \| \"loading\">) => {\n const confirm = Renderar.render(ConfirmAlert as any, {\n ...props,\n open: true,\n loading: false,\n onConfirm: async () => {\n if (onConfirm) {\n confirm.updateProps({ loading: true })\n if (onConfirm) await onConfirm()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n onCancel: async () => {\n if (onCancel) {\n confirm.updateProps({ loading: true })\n await onCancel()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n slotProps: {\n ...props.slotProps,\n modal: {\n ...props.slotProps?.modal,\n onClosed: () => {\n confirm.unrender()\n if (props?.slotProps?.modal?.onClosed) {\n props.slotProps?.modal?.onClosed()\n }\n },\n }\n },\n })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;;;;AAQgB;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
1	+ {"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" \| \"title\" \| \"direction\"> & {\n title?: useBreakpointPropsType<string \| ReactElement>;\n direction?: useBreakpointPropsType<\"row\" \| \"column\">;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" \| \"warning\" \| \"success\" \| \"error\" \| false \| ReactElement>;\n onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string \| ReactElement \| AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n let [{\n title,\n variant,\n icon,\n color,\n direction,\n slotProps,\n onClose,\n ..._props\n }] = useInterface<any>(\"Alert\", rest, {\n variant: \"fill\"\n })\n color ??= \"default\"\n direction ??= \"row\"\n\n const _p: any = {}\n if (title) _p.title = title\n if (variant) _p.variant = variant\n if (icon) _p.icon = icon\n if (color) _p.color = color\n if (direction) _p.direction = direction\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n variant = p.variant\n icon = p.icon\n color = p.color\n direction = p.direction\n\n let isRow = direction === 'row'\n\n\n const template = useColorTemplate(color, variant)\n\n let iconsx = {\n fontSize: isRow ? 22 : 40,\n color: color === 'default' ? \"text.primary\" : template.primary.color\n }\n\n const icons: any = {\n \"info\": <InfoIcon sx={iconsx} />,\n \"warning\": <WarningIcon sx={iconsx} />,\n \"success\": <SuccessIcon sx={iconsx} />,\n \"danger\": <ErrorIcon sx={iconsx} />\n }\n\n let _icon = icons[icon] \|\| icons[color]\n\n return (\n <Tag\n {..._props}\n baseClass=\"alert\"\n sxr={{\n justifyContent: \"flex-start\",\n position: \"relative\",\n radius: 1,\n px: isRow ? (_icon ? .5 : 2) : 3,\n py: isRow ? .5 : 3,\n flexDirection: \"column\",\n display: 'flex',\n ..._props?.sx\n }}\n {...template.primary}\n >\n {\n onClose && <IconButton\n color={color}\n variant={variant === 'fill' ? \"fill\" : \"text\"}\n size={25}\n sx={{\n position: \"absolute\",\n top: 5,\n right: 5\n }}\n onClick={onClose}\n className=\"alert-close-button\"\n >\n <IconClose fontSize={18} />\n </IconButton>\n }\n <Tag\n sx={{\n display: \"flex\",\n gap: 1,\n flexDirection: direction,\n alignItems: isRow ? \"flex-start\" : \"center\"\n }}\n baseClass=\"alert-container\"\n >\n {\n _icon && <Tag\n baseClass=\"alert-icon\"\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n p: isRow ? .5 : 0,\n \"& svg\": {\n color: template.primary.color\n }\n }}\n >\n {_icon}\n </Tag>\n }\n <Tag\n baseClass=\"alert-content\"\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n flex: 1,\n color: template.primary.color,\n textAlign: isRow ? \"left\" : \"center\",\n gap: isRow ? 0 : 1,\n width: \"100%\"\n }}\n >\n {title && <>\n {\n isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n className=\"alert-titles\"\n variant=\"text\"\n sx={{\n fontWeight: 500,\n color: template.primary.color\n }}\n >{title}</Text>\n }\n </>}\n <Tag\n sxr={{\n font: \"button\",\n }}\n >\n {children}\n </Tag>\n </Tag>\n </Tag>\n </Tag>\n )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' \| 'onClose' \| 'variant' \| \"size\"> & {\n open: boolean;\n loading: boolean;\n content: string \| ReactElement,\n size?: \"small\" \| \"medium\" \| \"large\" \| number;\n closeButton?: boolean;\n clickOutsideToClose?: boolean;\n okButtonText?: string;\n cancelButtonText?: string;\n hideOkButton?: boolean;\n hideCancelButton?: boolean;\n buttonPlacement?: \"start\" \| \"end\" \| \"between\" \| \"full\";\n variant?: \"text\" \| \"fill\"\n onConfirm?: () => Promise<void> \| void;\n onCancel?: () => Promise<void> \| void;\n transition?: UseTransitionVariantTypes;\n blurMode?: ModalProps['blurMode'];\n slotProps?: {\n modal?: Omit<ModalProps, 'open' \| \"children\">;\n okButton?: Omit<ButtonProps, \"children\">;\n closeButton?: Omit<ButtonProps, \"children\">;\n }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n let {\n open,\n loading,\n content,\n size,\n color,\n direction,\n variant,\n closeButton,\n clickOutsideToClose,\n okButtonText,\n cancelButtonText,\n hideOkButton,\n hideCancelButton,\n buttonPlacement,\n onConfirm,\n onCancel,\n transition,\n blurMode,\n slotProps,\n ...rest\n } = props\n\n hideOkButton ??= false\n hideCancelButton ??= false\n\n size ??= \"small\"\n color ??= 'default'\n variant ??= \"text\"\n direction ??= \"column\"\n buttonPlacement ??= \"end\"\n let sx: any = {};\n\n switch (buttonPlacement) {\n case \"start\":\n sx.justifyContent = 'flex-start'\n break;\n case \"end\":\n sx.justifyContent = 'flex-end'\n break;\n case \"between\":\n sx.justifyContent = 'space-between'\n break;\n case \"full\":\n sx = {\n \"& button\": {\n flex: 1\n }\n }\n break;\n }\n\n let sizes: any = {\n small: 320,\n medium: 400,\n large: 600\n }\n\n let okcolor = color\n let closecolor = color\n if (color === 'default') {\n okcolor = 'brand'\n closecolor = 'default'\n variant = 'text'\n } else {\n if (variant === 'fill') {\n okcolor = 'default'\n closecolor = 'default'\n } else {\n okcolor = color\n closecolor = 'default'\n }\n }\n\n return (<Modal\n open={open}\n {...slotProps?.modal}\n size={sizes[size] \|\| size}\n blur={40}\n blurMode={blurMode \|\| \"transparent\"}\n transition={transition \|\| \"zoom\"}\n onClickOutside={async () => {\n if (clickOutsideToClose && !loading) {\n onCancel && await onCancel()\n }\n }}\n >\n <Alert\n direction={direction}\n sx={{\n px: 2,\n py: 1,\n pt: direction === 'row' ? 1 : 2\n }}\n color={color}\n variant={variant}\n onClose={closeButton ? close : undefined}\n {...rest}\n >\n {content}\n <Tag\n sxr={{\n display: \"flex\",\n gap: 1,\n pt: 4,\n flexDirection: \"row\",\n ...sx,\n }}\n >\n {!hideCancelButton && <Button\n disabled={loading}\n color={closecolor}\n variant=\"fill\"\n {...slotProps?.closeButton}\n onClick={async () => {\n onCancel && await onCancel()\n }}\n >{cancelButtonText \|\| \"Close\"}</Button>}\n <Button\n loading={loading}\n color={okcolor}\n variant=\"fill\"\n {...slotProps?.okButton}\n\n onClick={async () => {\n onConfirm && await onConfirm()\n }}\n >{okButtonText \|\| \"OK\"}</Button>\n </Tag>\n </Alert>\n </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" \| \"loading\">) => {\n const confirm = Renderar.render(ConfirmAlert as any, {\n ...props,\n open: true,\n loading: false,\n onConfirm: async () => {\n if (onConfirm) {\n confirm.updateProps({ loading: true })\n if (onConfirm) await onConfirm()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n onCancel: async () => {\n if (onCancel) {\n confirm.updateProps({ loading: true })\n await onCancel()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n slotProps: {\n ...props.slotProps,\n modal: {\n ...props.slotProps?.modal,\n onClosed: () => {\n confirm.unrender()\n if (props?.slotProps?.modal?.onClosed) {\n props.slotProps?.modal?.onClosed()\n }\n },\n }\n },\n })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;;;;AAQgB;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}

package/Alert/index.js CHANGED Viewed

@@ -73,7 +73,8 @@ const Alert = (_a) => {
                             flex: 1,
                             color: template.primary.color,
                             textAlign: isRow ? "left" : "center",
-                            gap: isRow ? 0 : 1
+                            gap: isRow ? 0 : 1,
+                            width: "100%"
                         }, children: [title && jsx(Fragment, { children: isValidElement(title) ? jsx(Tag, { className: "alert-title", children: title }) : jsx(Text, { className: "alert-titles", variant: "text", sx: {
                                         fontWeight: 500,
                                         color: template.primary.color

package/Alert/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" \| \"title\" \| \"direction\"> & {\n title?: useBreakpointPropsType<string \| ReactElement>;\n direction?: useBreakpointPropsType<\"row\" \| \"column\">;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" \| \"warning\" \| \"success\" \| \"error\" \| false \| ReactElement>;\n onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string \| ReactElement \| AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n let [{\n title,\n variant,\n icon,\n color,\n direction,\n slotProps,\n onClose,\n ..._props\n }] = useInterface<any>(\"Alert\", rest, {\n variant: \"fill\"\n })\n color ??= \"default\"\n direction ??= \"row\"\n\n const _p: any = {}\n if (title) _p.title = title\n if (variant) _p.variant = variant\n if (icon) _p.icon = icon\n if (color) _p.color = color\n if (direction) _p.direction = direction\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n variant = p.variant\n icon = p.icon\n color = p.color\n direction = p.direction\n\n let isRow = direction === 'row'\n\n\n const template = useColorTemplate(color, variant)\n\n let iconsx = {\n fontSize: isRow ? 22 : 40,\n color: color === 'default' ? \"text.primary\" : template.primary.color\n }\n\n const icons: any = {\n \"info\": <InfoIcon sx={iconsx} />,\n \"warning\": <WarningIcon sx={iconsx} />,\n \"success\": <SuccessIcon sx={iconsx} />,\n \"danger\": <ErrorIcon sx={iconsx} />\n }\n\n let _icon = icons[icon] \|\| icons[color]\n\n return (\n <Tag\n {..._props}\n baseClass=\"alert\"\n sxr={{\n justifyContent: \"flex-start\",\n position: \"relative\",\n radius: 1,\n px: isRow ? (_icon ? .5 : 2) : 3,\n py: isRow ? .5 : 3,\n flexDirection: \"column\",\n display: 'flex',\n ..._props?.sx\n }}\n {...template.primary}\n >\n {\n onClose && <IconButton\n color={color}\n variant={variant === 'fill' ? \"fill\" : \"text\"}\n size={25}\n sx={{\n position: \"absolute\",\n top: 5,\n right: 5\n }}\n onClick={onClose}\n className=\"alert-close-button\"\n >\n <IconClose fontSize={18} />\n </IconButton>\n }\n <Tag\n sx={{\n display: \"flex\",\n gap: 1,\n flexDirection: direction,\n alignItems: isRow ? \"flex-start\" : \"center\"\n }}\n baseClass=\"alert-container\"\n >\n {\n _icon && <Tag\n baseClass=\"alert-icon\"\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n p: isRow ? .5 : 0,\n \"& svg\": {\n color: template.primary.color\n }\n }}\n >\n {_icon}\n </Tag>\n }\n <Tag\n baseClass=\"alert-content\"\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n flex: 1,\n color: template.primary.color,\n textAlign: isRow ? \"left\" : \"center\",\n gap: isRow ? 0 : 1\n }}\n >\n {title && <>\n {\n isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n className=\"alert-titles\"\n variant=\"text\"\n sx={{\n fontWeight: 500,\n color: template.primary.color\n }}\n >{title}</Text>\n }\n </>}\n <Tag\n sxr={{\n font: \"button\",\n }}\n >\n {children}\n </Tag>\n </Tag>\n </Tag>\n </Tag>\n )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' \| 'onClose' \| 'variant' \| \"size\"> & {\n open: boolean;\n loading: boolean;\n content: string \| ReactElement,\n size?: \"small\" \| \"medium\" \| \"large\" \| number;\n closeButton?: boolean;\n clickOutsideToClose?: boolean;\n okButtonText?: string;\n cancelButtonText?: string;\n hideOkButton?: boolean;\n hideCancelButton?: boolean;\n buttonPlacement?: \"start\" \| \"end\" \| \"between\" \| \"full\";\n variant?: \"text\" \| \"fill\"\n onConfirm?: () => Promise<void> \| void;\n onCancel?: () => Promise<void> \| void;\n transition?: UseTransitionVariantTypes;\n blurMode?: ModalProps['blurMode'];\n slotProps?: {\n modal?: Omit<ModalProps, 'open' \| \"children\">;\n okButton?: Omit<ButtonProps, \"children\">;\n closeButton?: Omit<ButtonProps, \"children\">;\n }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n let {\n open,\n loading,\n content,\n size,\n color,\n direction,\n variant,\n closeButton,\n clickOutsideToClose,\n okButtonText,\n cancelButtonText,\n hideOkButton,\n hideCancelButton,\n buttonPlacement,\n onConfirm,\n onCancel,\n transition,\n blurMode,\n slotProps,\n ...rest\n } = props\n\n hideOkButton ??= false\n hideCancelButton ??= false\n\n size ??= \"small\"\n color ??= 'default'\n variant ??= \"text\"\n direction ??= \"column\"\n buttonPlacement ??= \"end\"\n let sx: any = {};\n\n switch (buttonPlacement) {\n case \"start\":\n sx.justifyContent = 'flex-start'\n break;\n case \"end\":\n sx.justifyContent = 'flex-end'\n break;\n case \"between\":\n sx.justifyContent = 'space-between'\n break;\n case \"full\":\n sx = {\n \"& button\": {\n flex: 1\n }\n }\n break;\n }\n\n let sizes: any = {\n small: 320,\n medium: 400,\n large: 600\n }\n\n let okcolor = color\n let closecolor = color\n if (color === 'default') {\n okcolor = 'brand'\n closecolor = 'default'\n variant = 'text'\n } else {\n if (variant === 'fill') {\n okcolor = 'default'\n closecolor = 'default'\n } else {\n okcolor = color\n closecolor = 'default'\n }\n }\n\n return (<Modal\n open={open}\n {...slotProps?.modal}\n size={sizes[size] \|\| size}\n blur={40}\n blurMode={blurMode \|\| \"transparent\"}\n transition={transition \|\| \"zoom\"}\n onClickOutside={async () => {\n if (clickOutsideToClose && !loading) {\n onCancel && await onCancel()\n }\n }}\n >\n <Alert\n direction={direction}\n sx={{\n px: 2,\n py: 1,\n pt: direction === 'row' ? 1 : 2\n }}\n color={color}\n variant={variant}\n onClose={closeButton ? close : undefined}\n {...rest}\n >\n {content}\n <Tag\n sxr={{\n display: \"flex\",\n gap: 1,\n pt: 4,\n flexDirection: \"row\",\n ...sx,\n }}\n >\n {!hideCancelButton && <Button\n disabled={loading}\n color={closecolor}\n variant=\"fill\"\n {...slotProps?.closeButton}\n onClick={async () => {\n onCancel && await onCancel()\n }}\n >{cancelButtonText \|\| \"Close\"}</Button>}\n <Button\n loading={loading}\n color={okcolor}\n variant=\"fill\"\n {...slotProps?.okButton}\n\n onClick={async () => {\n onConfirm && await onConfirm()\n }}\n >{okButtonText \|\| \"OK\"}</Button>\n </Tag>\n </Alert>\n </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" \| \"loading\">) => {\n const confirm = Renderar.render(ConfirmAlert as any, {\n ...props,\n open: true,\n loading: false,\n onConfirm: async () => {\n if (onConfirm) {\n confirm.updateProps({ loading: true })\n if (onConfirm) await onConfirm()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n onCancel: async () => {\n if (onCancel) {\n confirm.updateProps({ loading: true })\n await onCancel()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n slotProps: {\n ...props.slotProps,\n modal: {\n ...props.slotProps?.modal,\n onClosed: () => {\n confirm.unrender()\n if (props?.slotProps?.modal?.onClosed) {\n props.slotProps?.modal?.onClosed()\n }\n },\n }\n },\n })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;;;;AAQgB;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
1	+ {"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" \| \"title\" \| \"direction\"> & {\n title?: useBreakpointPropsType<string \| ReactElement>;\n direction?: useBreakpointPropsType<\"row\" \| \"column\">;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" \| \"warning\" \| \"success\" \| \"error\" \| false \| ReactElement>;\n onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string \| ReactElement \| AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n let [{\n title,\n variant,\n icon,\n color,\n direction,\n slotProps,\n onClose,\n ..._props\n }] = useInterface<any>(\"Alert\", rest, {\n variant: \"fill\"\n })\n color ??= \"default\"\n direction ??= \"row\"\n\n const _p: any = {}\n if (title) _p.title = title\n if (variant) _p.variant = variant\n if (icon) _p.icon = icon\n if (color) _p.color = color\n if (direction) _p.direction = direction\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n variant = p.variant\n icon = p.icon\n color = p.color\n direction = p.direction\n\n let isRow = direction === 'row'\n\n\n const template = useColorTemplate(color, variant)\n\n let iconsx = {\n fontSize: isRow ? 22 : 40,\n color: color === 'default' ? \"text.primary\" : template.primary.color\n }\n\n const icons: any = {\n \"info\": <InfoIcon sx={iconsx} />,\n \"warning\": <WarningIcon sx={iconsx} />,\n \"success\": <SuccessIcon sx={iconsx} />,\n \"danger\": <ErrorIcon sx={iconsx} />\n }\n\n let _icon = icons[icon] \|\| icons[color]\n\n return (\n <Tag\n {..._props}\n baseClass=\"alert\"\n sxr={{\n justifyContent: \"flex-start\",\n position: \"relative\",\n radius: 1,\n px: isRow ? (_icon ? .5 : 2) : 3,\n py: isRow ? .5 : 3,\n flexDirection: \"column\",\n display: 'flex',\n ..._props?.sx\n }}\n {...template.primary}\n >\n {\n onClose && <IconButton\n color={color}\n variant={variant === 'fill' ? \"fill\" : \"text\"}\n size={25}\n sx={{\n position: \"absolute\",\n top: 5,\n right: 5\n }}\n onClick={onClose}\n className=\"alert-close-button\"\n >\n <IconClose fontSize={18} />\n </IconButton>\n }\n <Tag\n sx={{\n display: \"flex\",\n gap: 1,\n flexDirection: direction,\n alignItems: isRow ? \"flex-start\" : \"center\"\n }}\n baseClass=\"alert-container\"\n >\n {\n _icon && <Tag\n baseClass=\"alert-icon\"\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n p: isRow ? .5 : 0,\n \"& svg\": {\n color: template.primary.color\n }\n }}\n >\n {_icon}\n </Tag>\n }\n <Tag\n baseClass=\"alert-content\"\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n flex: 1,\n color: template.primary.color,\n textAlign: isRow ? \"left\" : \"center\",\n gap: isRow ? 0 : 1,\n width: \"100%\"\n }}\n >\n {title && <>\n {\n isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n className=\"alert-titles\"\n variant=\"text\"\n sx={{\n fontWeight: 500,\n color: template.primary.color\n }}\n >{title}</Text>\n }\n </>}\n <Tag\n sxr={{\n font: \"button\",\n }}\n >\n {children}\n </Tag>\n </Tag>\n </Tag>\n </Tag>\n )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' \| 'onClose' \| 'variant' \| \"size\"> & {\n open: boolean;\n loading: boolean;\n content: string \| ReactElement,\n size?: \"small\" \| \"medium\" \| \"large\" \| number;\n closeButton?: boolean;\n clickOutsideToClose?: boolean;\n okButtonText?: string;\n cancelButtonText?: string;\n hideOkButton?: boolean;\n hideCancelButton?: boolean;\n buttonPlacement?: \"start\" \| \"end\" \| \"between\" \| \"full\";\n variant?: \"text\" \| \"fill\"\n onConfirm?: () => Promise<void> \| void;\n onCancel?: () => Promise<void> \| void;\n transition?: UseTransitionVariantTypes;\n blurMode?: ModalProps['blurMode'];\n slotProps?: {\n modal?: Omit<ModalProps, 'open' \| \"children\">;\n okButton?: Omit<ButtonProps, \"children\">;\n closeButton?: Omit<ButtonProps, \"children\">;\n }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n let {\n open,\n loading,\n content,\n size,\n color,\n direction,\n variant,\n closeButton,\n clickOutsideToClose,\n okButtonText,\n cancelButtonText,\n hideOkButton,\n hideCancelButton,\n buttonPlacement,\n onConfirm,\n onCancel,\n transition,\n blurMode,\n slotProps,\n ...rest\n } = props\n\n hideOkButton ??= false\n hideCancelButton ??= false\n\n size ??= \"small\"\n color ??= 'default'\n variant ??= \"text\"\n direction ??= \"column\"\n buttonPlacement ??= \"end\"\n let sx: any = {};\n\n switch (buttonPlacement) {\n case \"start\":\n sx.justifyContent = 'flex-start'\n break;\n case \"end\":\n sx.justifyContent = 'flex-end'\n break;\n case \"between\":\n sx.justifyContent = 'space-between'\n break;\n case \"full\":\n sx = {\n \"& button\": {\n flex: 1\n }\n }\n break;\n }\n\n let sizes: any = {\n small: 320,\n medium: 400,\n large: 600\n }\n\n let okcolor = color\n let closecolor = color\n if (color === 'default') {\n okcolor = 'brand'\n closecolor = 'default'\n variant = 'text'\n } else {\n if (variant === 'fill') {\n okcolor = 'default'\n closecolor = 'default'\n } else {\n okcolor = color\n closecolor = 'default'\n }\n }\n\n return (<Modal\n open={open}\n {...slotProps?.modal}\n size={sizes[size] \|\| size}\n blur={40}\n blurMode={blurMode \|\| \"transparent\"}\n transition={transition \|\| \"zoom\"}\n onClickOutside={async () => {\n if (clickOutsideToClose && !loading) {\n onCancel && await onCancel()\n }\n }}\n >\n <Alert\n direction={direction}\n sx={{\n px: 2,\n py: 1,\n pt: direction === 'row' ? 1 : 2\n }}\n color={color}\n variant={variant}\n onClose={closeButton ? close : undefined}\n {...rest}\n >\n {content}\n <Tag\n sxr={{\n display: \"flex\",\n gap: 1,\n pt: 4,\n flexDirection: \"row\",\n ...sx,\n }}\n >\n {!hideCancelButton && <Button\n disabled={loading}\n color={closecolor}\n variant=\"fill\"\n {...slotProps?.closeButton}\n onClick={async () => {\n onCancel && await onCancel()\n }}\n >{cancelButtonText \|\| \"Close\"}</Button>}\n <Button\n loading={loading}\n color={okcolor}\n variant=\"fill\"\n {...slotProps?.okButton}\n\n onClick={async () => {\n onConfirm && await onConfirm()\n }}\n >{okButtonText \|\| \"OK\"}</Button>\n </Tag>\n </Alert>\n </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" \| \"loading\">) => {\n const confirm = Renderar.render(ConfirmAlert as any, {\n ...props,\n open: true,\n loading: false,\n onConfirm: async () => {\n if (onConfirm) {\n confirm.updateProps({ loading: true })\n if (onConfirm) await onConfirm()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n onCancel: async () => {\n if (onCancel) {\n confirm.updateProps({ loading: true })\n await onCancel()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n slotProps: {\n ...props.slotProps,\n modal: {\n ...props.slotProps?.modal,\n onClosed: () => {\n confirm.unrender()\n if (props?.slotProps?.modal?.onClosed) {\n props.slotProps?.modal?.onClosed()\n }\n },\n }\n },\n })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;;;;AAQgB;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/ui",
-  "version": "1.1.65",
+  "version": "1.1.66",
   "description": "Xanui - A React Component Library",
   "private": false,
   "dependencies": {