@zimyo/ui 1.0.2 → 1.1.1

package/dist/Accordion/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { AccordionProps as AccordionProps$1, AccordionSummaryProps, AccordionDetailsProps } from '@mui/material';
+import { SxProps } from '@mui/system';
+
+interface AccordionProps extends Omit<AccordionProps$1, 'sx' | 'onChange' | 'expanded'> {
+    type?: 'single' | 'multiple';
+    collapsible?: boolean;
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    children: React.ReactNode;
+    sx?: SxProps;
+}
+interface AccordionItemProps extends Omit<AccordionProps$1, 'sx'> {
+    value: string;
+    children: React.ReactNode;
+    sx?: SxProps;
+}
+interface AccordionTriggerProps extends Omit<AccordionSummaryProps, 'sx'> {
+    children: React.ReactNode;
+    sx?: SxProps;
+    expandIcon?: React.ReactNode;
+}
+interface AccordionContentProps extends Omit<AccordionDetailsProps, 'sx'> {
+    children: React.ReactNode;
+    sx?: SxProps;
+}
+declare const Accordion: React.ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Accordion as default };
+export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps };

package/dist/Accordion/index.esm.js

@@ -0,0 +1,129 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useTheme, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from '@mui/material';
+import { createSvgIcon } from '@mui/material/utils';
+
+var ExpandMoreIcon = createSvgIcon(/*#__PURE__*/jsx("path", {
+  d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+}), 'ExpandMore');
+
+const AccordionContext = React.createContext({});
+// Main Accordion Container Component
+const Accordion = React.forwardRef(({ type = 'single', collapsible = false, value: controlledValue, defaultValue, onValueChange, children, sx = {}, ...props }, ref) => {
+    const theme = useTheme();
+    // Internal state management
+    const [internalValue, setInternalValue] = React.useState(() => {
+        if (controlledValue !== undefined)
+            return controlledValue;
+        if (defaultValue !== undefined)
+            return defaultValue;
+        return type === 'multiple' ? [] : '';
+    });
+    const value = controlledValue !== undefined ? controlledValue : internalValue;
+    const handleValueChange = React.useCallback((newValue) => {
+        if (controlledValue === undefined) {
+            setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+    }, [controlledValue, onValueChange]);
+    const contextValue = React.useMemo(() => ({
+        type,
+        collapsible,
+        value,
+        defaultValue,
+        onValueChange: handleValueChange,
+    }), [type, collapsible, value, defaultValue, handleValueChange]);
+    return (jsx(AccordionContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: theme.spacing(1),
+            }, ...props, children: children }) }));
+});
+// AccordionItem Component
+const AccordionItem = React.forwardRef(({ value: itemValue, children, sx = {}, ...props }, ref) => {
+    const theme = useTheme();
+    const context = React.useContext(AccordionContext);
+    const isExpanded = React.useMemo(() => {
+        if (context.type === 'multiple') {
+            return Array.isArray(context.value) && context.value.includes(itemValue);
+        }
+        return context.value === itemValue;
+    }, [context.value, context.type, itemValue]);
+    const handleChange = React.useCallback(() => {
+        if (!context.onValueChange)
+            return;
+        if (context.type === 'multiple') {
+            const currentValue = Array.isArray(context.value) ? context.value : [];
+            const newValue = isExpanded
+                ? currentValue.filter(v => v !== itemValue)
+                : [...currentValue, itemValue];
+            context.onValueChange(newValue);
+        }
+        else {
+            const newValue = isExpanded && context.collapsible ? '' : itemValue;
+            context.onValueChange(newValue);
+        }
+    }, [context, itemValue, isExpanded]);
+    return (jsx(Accordion$1, { ref: ref, expanded: isExpanded, onChange: handleChange, variant: "outlined", sx: {
+            borderRadius: theme.radius?.sm || theme.shape.borderRadius,
+            '&:before': {
+                display: 'none',
+            },
+            '&.Mui-expanded': {
+                margin: 0,
+            },
+            border: `1px solid ${theme.palette.divider}`,
+            ...sx,
+        }, ...props, children: children }));
+});
+// AccordionTrigger Component
+const AccordionTrigger = React.forwardRef(({ children, sx = {}, expandIcon, ...props }, ref) => {
+    const theme = useTheme();
+    const defaultExpandIcon = expandIcon !== undefined ? expandIcon : jsx(ExpandMoreIcon, {});
+    return (jsx(AccordionSummary, { ref: ref, expandIcon: defaultExpandIcon, sx: {
+            borderRadius: theme.radius?.sm || theme.shape.borderRadius,
+            minHeight: 56,
+            fontWeight: 500,
+            '&.Mui-expanded': {
+                minHeight: 56,
+                borderBottomLeftRadius: 0,
+                borderBottomRightRadius: 0,
+                borderBottom: `1px solid ${theme.palette.divider}`,
+            },
+            '& .MuiAccordionSummary-content': {
+                margin: '12px 0',
+                '&.Mui-expanded': {
+                    margin: '12px 0',
+                },
+            },
+            '& .MuiAccordionSummary-expandIconWrapper': {
+                transition: theme.transitions.create('transform', {
+                    duration: theme.transitions.duration.shortest,
+                }),
+                '&.Mui-expanded': {
+                    transform: 'rotate(180deg)',
+                },
+            },
+            '&:hover': {
+                backgroundColor: theme.palette.action.hover,
+            },
+            ...sx,
+        }, ...props, children: children }));
+});
+// AccordionContent Component
+const AccordionContent = React.forwardRef(({ children, sx = {}, ...props }, ref) => {
+    const theme = useTheme();
+    return (jsx(AccordionDetails, { ref: ref, sx: {
+            padding: theme.spacing(2),
+            borderBottomLeftRadius: theme.radius?.sm || theme.shape.borderRadius,
+            borderBottomRightRadius: theme.radius?.sm || theme.shape.borderRadius,
+            ...sx,
+        }, ...props, children: children }));
+});
+// Set display names
+Accordion.displayName = 'Accordion';
+AccordionItem.displayName = 'AccordionItem';
+AccordionTrigger.displayName = 'AccordionTrigger';
+AccordionContent.displayName = 'AccordionContent';
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Accordion as default };

package/dist/Accordion/index.js

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+var utils = require('@mui/material/utils');
+
+var ExpandMoreIcon = utils.createSvgIcon(/*#__PURE__*/jsxRuntime.jsx("path", {
+  d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+}), 'ExpandMore');
+
+const AccordionContext = React.createContext({});
+// Main Accordion Container Component
+const Accordion = React.forwardRef(({ type = 'single', collapsible = false, value: controlledValue, defaultValue, onValueChange, children, sx = {}, ...props }, ref) => {
+    const theme = material.useTheme();
+    // Internal state management
+    const [internalValue, setInternalValue] = React.useState(() => {
+        if (controlledValue !== undefined)
+            return controlledValue;
+        if (defaultValue !== undefined)
+            return defaultValue;
+        return type === 'multiple' ? [] : '';
+    });
+    const value = controlledValue !== undefined ? controlledValue : internalValue;
+    const handleValueChange = React.useCallback((newValue) => {
+        if (controlledValue === undefined) {
+            setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+    }, [controlledValue, onValueChange]);
+    const contextValue = React.useMemo(() => ({
+        type,
+        collapsible,
+        value,
+        defaultValue,
+        onValueChange: handleValueChange,
+    }), [type, collapsible, value, defaultValue, handleValueChange]);
+    return (jsxRuntime.jsx(AccordionContext.Provider, { value: contextValue, children: jsxRuntime.jsx("div", { ref: ref, style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: theme.spacing(1),
+            }, ...props, children: children }) }));
+});
+// AccordionItem Component
+const AccordionItem = React.forwardRef(({ value: itemValue, children, sx = {}, ...props }, ref) => {
+    const theme = material.useTheme();
+    const context = React.useContext(AccordionContext);
+    const isExpanded = React.useMemo(() => {
+        if (context.type === 'multiple') {
+            return Array.isArray(context.value) && context.value.includes(itemValue);
+        }
+        return context.value === itemValue;
+    }, [context.value, context.type, itemValue]);
+    const handleChange = React.useCallback(() => {
+        if (!context.onValueChange)
+            return;
+        if (context.type === 'multiple') {
+            const currentValue = Array.isArray(context.value) ? context.value : [];
+            const newValue = isExpanded
+                ? currentValue.filter(v => v !== itemValue)
+                : [...currentValue, itemValue];
+            context.onValueChange(newValue);
+        }
+        else {
+            const newValue = isExpanded && context.collapsible ? '' : itemValue;
+            context.onValueChange(newValue);
+        }
+    }, [context, itemValue, isExpanded]);
+    return (jsxRuntime.jsx(material.Accordion, { ref: ref, expanded: isExpanded, onChange: handleChange, variant: "outlined", sx: {
+            borderRadius: theme.radius?.sm || theme.shape.borderRadius,
+            '&:before': {
+                display: 'none',
+            },
+            '&.Mui-expanded': {
+                margin: 0,
+            },
+            border: `1px solid ${theme.palette.divider}`,
+            ...sx,
+        }, ...props, children: children }));
+});
+// AccordionTrigger Component
+const AccordionTrigger = React.forwardRef(({ children, sx = {}, expandIcon, ...props }, ref) => {
+    const theme = material.useTheme();
+    const defaultExpandIcon = expandIcon !== undefined ? expandIcon : jsxRuntime.jsx(ExpandMoreIcon, {});
+    return (jsxRuntime.jsx(material.AccordionSummary, { ref: ref, expandIcon: defaultExpandIcon, sx: {
+            borderRadius: theme.radius?.sm || theme.shape.borderRadius,
+            minHeight: 56,
+            fontWeight: 500,
+            '&.Mui-expanded': {
+                minHeight: 56,
+                borderBottomLeftRadius: 0,
+                borderBottomRightRadius: 0,
+                borderBottom: `1px solid ${theme.palette.divider}`,
+            },
+            '& .MuiAccordionSummary-content': {
+                margin: '12px 0',
+                '&.Mui-expanded': {
+                    margin: '12px 0',
+                },
+            },
+            '& .MuiAccordionSummary-expandIconWrapper': {
+                transition: theme.transitions.create('transform', {
+                    duration: theme.transitions.duration.shortest,
+                }),
+                '&.Mui-expanded': {
+                    transform: 'rotate(180deg)',
+                },
+            },
+            '&:hover': {
+                backgroundColor: theme.palette.action.hover,
+            },
+            ...sx,
+        }, ...props, children: children }));
+});
+// AccordionContent Component
+const AccordionContent = React.forwardRef(({ children, sx = {}, ...props }, ref) => {
+    const theme = material.useTheme();
+    return (jsxRuntime.jsx(material.AccordionDetails, { ref: ref, sx: {
+            padding: theme.spacing(2),
+            borderBottomLeftRadius: theme.radius?.sm || theme.shape.borderRadius,
+            borderBottomRightRadius: theme.radius?.sm || theme.shape.borderRadius,
+            ...sx,
+        }, ...props, children: children }));
+});
+// Set display names
+Accordion.displayName = 'Accordion';
+AccordionItem.displayName = 'AccordionItem';
+AccordionTrigger.displayName = 'AccordionTrigger';
+AccordionContent.displayName = 'AccordionContent';
+
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;
+exports.default = Accordion;

package/dist/Button/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ButtonProps as ButtonProps$1 } from '@mui/material';
+import { SxProps } from '@mui/system';
+
+interface ButtonProps extends Omit<ButtonProps$1, 'sx'> {
+    loading?: boolean;
+    loadingText?: string;
+    sx?: SxProps;
+    loaderSize?: number;
+    loaderPosition?: 'start' | 'end' | 'center';
+}
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, Button as default };
+export type { ButtonProps };

package/dist/Button/index.esm.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useTheme, Button as Button$1, CircularProgress } from '@mui/material';
+
+const Button = React.forwardRef(({ children, loading = false, loadingText, loaderSize = 18, loaderPosition = 'start', variant = 'contained', color = 'primary', size = 'medium', sx = {}, disabled, startIcon, endIcon, ...props }, ref) => {
+    const theme = useTheme();
+    const showStartSpinner = loading && loaderPosition === 'start';
+    const showEndSpinner = loading && loaderPosition === 'end';
+    const showCenterSpinner = loading && loaderPosition === 'center';
+    return (jsx(Button$1, { ref: ref, variant: variant, color: color, size: size, disabled: disabled || loading, startIcon: showStartSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : (startIcon), endIcon: showEndSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : (endIcon), sx: {
+            borderRadius: theme.radius.sm,
+            fontWeight: 500,
+            textTransform: 'none',
+            letterSpacing: '0.5px',
+            px: size === 'small' ? 1.5 : size === 'large' ? 3 : 2,
+            py: size === 'small' ? 0.5 : size === 'large' ? 1.5 : 1,
+            position: 'relative',
+            ...sx,
+        }, ...props, children: showCenterSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : loading && loadingText ? (loadingText) : (children) }));
+});
+Button.displayName = 'Button';
+
+export { Button, Button as default };

package/dist/Button/index.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+
+const Button = React.forwardRef(({ children, loading = false, loadingText, loaderSize = 18, loaderPosition = 'start', variant = 'contained', color = 'primary', size = 'medium', sx = {}, disabled, startIcon, endIcon, ...props }, ref) => {
+    const theme = material.useTheme();
+    const showStartSpinner = loading && loaderPosition === 'start';
+    const showEndSpinner = loading && loaderPosition === 'end';
+    const showCenterSpinner = loading && loaderPosition === 'center';
+    return (jsxRuntime.jsx(material.Button, { ref: ref, variant: variant, color: color, size: size, disabled: disabled || loading, startIcon: showStartSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : (startIcon), endIcon: showEndSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : (endIcon), sx: {
+            borderRadius: theme.radius.sm,
+            fontWeight: 500,
+            textTransform: 'none',
+            letterSpacing: '0.5px',
+            px: size === 'small' ? 1.5 : size === 'large' ? 3 : 2,
+            py: size === 'small' ? 0.5 : size === 'large' ? 1.5 : 1,
+            position: 'relative',
+            ...sx,
+        }, ...props, children: showCenterSpinner ? (jsxRuntime.jsx(material.CircularProgress, { size: loaderSize, color: "inherit" })) : loading && loadingText ? (loadingText) : (children) }));
+});
+Button.displayName = 'Button';
+
+exports.Button = Button;
+exports.default = Button;

package/dist/Card/index.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default from 'react';
+import { CardProps } from '@mui/material';
+import { SxProps } from '@mui/system';
+
+interface CardRootProps extends CardProps {
+    sx?: SxProps;
+    variant?: 'elevated' | 'outlined' | 'bordered';
+    children: React__default.ReactNode;
+}
+
+declare const Card: React$1.FC<CardRootProps> & {
+    Header: ({ title, subtitle, action, }: {
+        title?: string | React.ReactNode;
+        subtitle?: string | React.ReactNode;
+        action?: React.ReactNode;
+    }) => react_jsx_runtime.JSX.Element;
+    Content: ({ children, sx }: {
+        children: React.ReactNode;
+        sx?: any;
+    }) => react_jsx_runtime.JSX.Element;
+    Body: ({ children, sx }: {
+        children: React.ReactNode;
+        sx?: any;
+    }) => react_jsx_runtime.JSX.Element;
+    Actions: ({ children, sx }: {
+        children: React.ReactNode;
+        sx?: any;
+    }) => react_jsx_runtime.JSX.Element;
+    Image: ({ src, height, alt }: {
+        src: string;
+        height?: number | string;
+        alt?: string;
+    }) => react_jsx_runtime.JSX.Element;
+    Skeleton: ({ lines }: {
+        lines?: number;
+    }) => react_jsx_runtime.JSX.Element;
+};
+
+export { Card as default };

package/dist/Card/index.esm.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTheme, Card as Card$1, CardHeader as CardHeader$1, Typography, CardActions as CardActions$1, Box, Skeleton } from '@mui/material';
+import MuiCardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+
+const CardRoot = ({ children, sx = {}, elevation = 1, variant = 'elevated', ...props }) => {
+    const theme = useTheme();
+    return (jsx(Card$1, { elevation: variant === 'elevated' ? elevation : 0, variant: variant === 'outlined' ? 'outlined' : 'elevation', sx: {
+            borderRadius: theme.radius?.sm || 8,
+            border: variant === 'bordered' ? `1px solid ${theme.palette.divider}` : 'none',
+            overflow: 'hidden',
+            backgroundColor: theme.palette.background.paper,
+            ...sx,
+        }, ...props, children: children }));
+};
+
+const CardHeader = ({ title, subtitle, action, }) => (jsx(CardHeader$1, { title: typeof title === 'string' ? (jsx(Typography, { variant: "h6", fontWeight: 600, children: title })) : (title), subheader: typeof subtitle === 'string' ? (jsx(Typography, { variant: "body2", color: "text.secondary", children: subtitle })) : (subtitle), action: action }));
+
+const CardContent = ({ children, sx }) => (jsx(MuiCardContent, { sx: sx, children: children }));
+
+const CardActions = ({ children, sx }) => (jsx(CardActions$1, { sx: sx, children: children }));
+
+const CardImage = ({ src, height = 160, alt = 'card image' }) => (jsx(CardMedia, { component: "img", height: height, image: src, alt: alt }));
+
+const CardSkeleton = ({ lines = 3 }) => (jsxs(Box, { p: 2, children: [jsx(Skeleton, { variant: "rectangular", height: 140 }), [...Array(lines)].map((_, i) => (jsx(Skeleton, { variant: "text", height: 20, sx: { mt: 1 } }, i)))] }));
+
+const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Content: CardContent,
+    Body: CardContent, // alias
+    Actions: CardActions,
+    Image: CardImage,
+    Skeleton: CardSkeleton,
+});
+
+export { Card as default };

package/dist/Card/index.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var MuiCardContent = require('@mui/material/CardContent');
+var CardMedia = require('@mui/material/CardMedia');
+
+const CardRoot = ({ children, sx = {}, elevation = 1, variant = 'elevated', ...props }) => {
+    const theme = material.useTheme();
+    return (jsxRuntime.jsx(material.Card, { elevation: variant === 'elevated' ? elevation : 0, variant: variant === 'outlined' ? 'outlined' : 'elevation', sx: {
+            borderRadius: theme.radius?.sm || 8,
+            border: variant === 'bordered' ? `1px solid ${theme.palette.divider}` : 'none',
+            overflow: 'hidden',
+            backgroundColor: theme.palette.background.paper,
+            ...sx,
+        }, ...props, children: children }));
+};
+
+const CardHeader = ({ title, subtitle, action, }) => (jsxRuntime.jsx(material.CardHeader, { title: typeof title === 'string' ? (jsxRuntime.jsx(material.Typography, { variant: "h6", fontWeight: 600, children: title })) : (title), subheader: typeof subtitle === 'string' ? (jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: subtitle })) : (subtitle), action: action }));
+
+const CardContent = ({ children, sx }) => (jsxRuntime.jsx(MuiCardContent, { sx: sx, children: children }));
+
+const CardActions = ({ children, sx }) => (jsxRuntime.jsx(material.CardActions, { sx: sx, children: children }));
+
+const CardImage = ({ src, height = 160, alt = 'card image' }) => (jsxRuntime.jsx(CardMedia, { component: "img", height: height, image: src, alt: alt }));
+
+const CardSkeleton = ({ lines = 3 }) => (jsxRuntime.jsxs(material.Box, { p: 2, children: [jsxRuntime.jsx(material.Skeleton, { variant: "rectangular", height: 140 }), [...Array(lines)].map((_, i) => (jsxRuntime.jsx(material.Skeleton, { variant: "text", height: 20, sx: { mt: 1 } }, i)))] }));
+
+const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Content: CardContent,
+    Body: CardContent, // alias
+    Actions: CardActions,
+    Image: CardImage,
+    Skeleton: CardSkeleton,
+});
+
+module.exports = Card;

package/dist/Popover/index.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { PopoverProps as PopoverProps$1 } from '@mui/material';
+
+interface PopoverProps extends Partial<PopoverProps$1> {
+    open: boolean;
+    onClose: () => void;
+    anchorEl: HTMLElement | null;
+    children: React.ReactNode;
+    width?: number | string;
+    maxWidth?: number | string;
+    minWidth?: number | string;
+    padding?: number;
+    border?: boolean;
+}
+declare const Popover: ({ open, onClose, anchorEl, children, width, maxWidth, minWidth, padding, border, anchorOrigin, transformOrigin, ...rest }: PopoverProps) => react_jsx_runtime.JSX.Element;
+
+export { Popover, Popover as default };
+export type { PopoverProps };

package/dist/Popover/index.esm.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTheme, Popover as Popover$1, Fade } from '@mui/material';
+
+const Popover = ({ open, onClose, anchorEl, children, width = 240, maxWidth = '100%', minWidth = 200, padding = 2, border = true, anchorOrigin = { vertical: 'bottom', horizontal: 'left' }, transformOrigin = { vertical: 'top', horizontal: 'left' }, ...rest }) => {
+    const theme = useTheme();
+    return (jsx(Popover$1, { open: open, anchorEl: anchorEl, onClose: onClose, disableScrollLock: true, TransitionComponent: Fade, transitionDuration: 150, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, PaperProps: {
+            elevation: 0,
+            sx: {
+                boxShadow: 'none',
+                bgcolor: theme.palette.background.paper,
+                border: border ? `1px solid ${theme.palette.divider}` : 'none',
+                borderRadius: theme.radius.md,
+                px: theme.spacing(padding),
+                py: theme.spacing(padding),
+                width,
+                maxWidth,
+                minWidth,
+            },
+        }, ...rest, children: children }));
+};
+
+export { Popover, Popover as default };

package/dist/Popover/index.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+
+const Popover = ({ open, onClose, anchorEl, children, width = 240, maxWidth = '100%', minWidth = 200, padding = 2, border = true, anchorOrigin = { vertical: 'bottom', horizontal: 'left' }, transformOrigin = { vertical: 'top', horizontal: 'left' }, ...rest }) => {
+    const theme = material.useTheme();
+    return (jsxRuntime.jsx(material.Popover, { open: open, anchorEl: anchorEl, onClose: onClose, disableScrollLock: true, TransitionComponent: material.Fade, transitionDuration: 150, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, PaperProps: {
+            elevation: 0,
+            sx: {
+                boxShadow: 'none',
+                bgcolor: theme.palette.background.paper,
+                border: border ? `1px solid ${theme.palette.divider}` : 'none',
+                borderRadius: theme.radius.md,
+                px: theme.spacing(padding),
+                py: theme.spacing(padding),
+                width,
+                maxWidth,
+                minWidth,
+            },
+        }, ...rest, children: children }));
+};
+
+exports.Popover = Popover;
+exports.default = Popover;

package/dist/RadioGroup/index.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { SxProps } from '@mui/system';
+
+interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    description?: string;
+}
+interface RadioGroupProps {
+    label?: string;
+    options: RadioOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    helperText?: string;
+    row?: boolean;
+    size?: 'small' | 'medium';
+    color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+    sx?: SxProps;
+    radioSx?: SxProps;
+    labelSx?: SxProps;
+}
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+export { RadioGroup, RadioGroup as default };
+export type { RadioGroupProps, RadioOption };