@zimyo/ui 1.1.0 → 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 };

package/dist/RadioGroup/index.esm.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useTheme, FormControl, FormLabel, Typography, RadioGroup as RadioGroup$1, Box, FormControlLabel, Radio, FormHelperText } from '@mui/material';
+
+const RadioGroup = React.forwardRef(({ label, options = [], value, defaultValue, onChange, name, disabled = false, required = false, error = false, helperText, row = false, size = 'medium', color = 'primary', sx = {}, radioSx = {}, labelSx = {}, ...props }, ref) => {
+    const theme = useTheme();
+    const [internalValue, setInternalValue] = React.useState(value || defaultValue || '');
+    // Sync with external value prop
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setInternalValue(value);
+        }
+    }, [value]);
+    const handleChange = (event) => {
+        const newValue = event.target.value;
+        if (value === undefined) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+    };
+    const currentValue = value !== undefined ? value : internalValue;
+    return (jsxs(FormControl, { ref: ref, component: "fieldset", variant: "standard", disabled: disabled, required: required, error: error, sx: {
+            borderRadius: '8px',
+            ...sx,
+        }, ...props, children: [label && (jsxs(FormLabel, { component: "legend", sx: {
+                    fontWeight: 500,
+                    fontSize: size === 'small' ? '0.875rem' : '1rem',
+                    color: disabled
+                        ? theme.palette.text.disabled
+                        : error
+                            ? theme.palette.error.main
+                            : theme.palette.text.primary,
+                    '&.Mui-focused': {
+                        color: error
+                            ? theme.palette.error.main
+                            : `${theme.palette[color].main}`,
+                    },
+                    mb: 1,
+                    ...labelSx,
+                }, children: [label, required && (jsx(Typography, { component: "span", sx: {
+                            color: theme.palette.error.main,
+                            ml: 0.5,
+                            fontSize: 'inherit',
+                        }, children: "*" }))] })), jsx(RadioGroup$1, { name: name, value: currentValue, onChange: handleChange, row: row, sx: {
+                    gap: size === 'small' ? 1 : 1.5,
+                    '& .MuiFormControlLabel-root': {
+                        marginLeft: 0,
+                        marginRight: row ? 2 : 0,
+                    },
+                }, children: options.map((option) => (jsx(Box, { children: jsx(FormControlLabel, { value: option.value, disabled: disabled || option.disabled, control: jsx(Radio, { size: size, color: color, sx: {
+                                '&.Mui-checked': {
+                                    color: error
+                                        ? theme.palette.error.main
+                                        : `${theme.palette[color].main}`,
+                                },
+                                alignSelf: option.description ? 'flex-start' : 'center',
+                                mt: option.description ? 0.25 : 0,
+                                ...radioSx,
+                            } }), label: jsxs(Box, { sx: { display: 'flex', flexDirection: 'column' }, children: [jsx(Typography, { variant: size === 'small' ? 'body2' : 'body1', sx: {
+                                        fontWeight: 400,
+                                        color: disabled || option.disabled
+                                            ? theme.palette.text.disabled
+                                            : theme.palette.text.primary,
+                                        lineHeight: 1.5,
+                                    }, children: option.label }), option.description && (jsx(Typography, { variant: "caption", sx: {
+                                        color: disabled || option.disabled
+                                            ? theme.palette.text.disabled
+                                            : theme.palette.text.secondary,
+                                        mt: 0.25,
+                                        lineHeight: 1.4,
+                                    }, children: option.description }))] }), sx: {
+                            alignItems: option.description ? 'flex-start' : 'center',
+                            margin: 0,
+                            display: 'flex',
+                            '& .MuiFormControlLabel-label': {
+                                ml: 1,
+                                flex: 1,
+                            },
+                            '& .MuiButtonBase-root': {
+                                p: size === 'small' ? 0.5 : 1,
+                            },
+                        } }) }, option.value))) }), helperText && (jsx(FormHelperText, { sx: {
+                    mt: 1,
+                    fontSize: size === 'small' ? '0.75rem' : '0.875rem',
+                    color: error
+                        ? theme.palette.error.main
+                        : theme.palette.text.secondary,
+                }, children: helperText }))] }));
+});
+RadioGroup.displayName = 'RadioGroup';
+
+export { RadioGroup, RadioGroup as default };

package/dist/RadioGroup/index.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+
+const RadioGroup = React.forwardRef(({ label, options = [], value, defaultValue, onChange, name, disabled = false, required = false, error = false, helperText, row = false, size = 'medium', color = 'primary', sx = {}, radioSx = {}, labelSx = {}, ...props }, ref) => {
+    const theme = material.useTheme();
+    const [internalValue, setInternalValue] = React.useState(value || defaultValue || '');
+    // Sync with external value prop
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setInternalValue(value);
+        }
+    }, [value]);
+    const handleChange = (event) => {
+        const newValue = event.target.value;
+        if (value === undefined) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+    };
+    const currentValue = value !== undefined ? value : internalValue;
+    return (jsxRuntime.jsxs(material.FormControl, { ref: ref, component: "fieldset", variant: "standard", disabled: disabled, required: required, error: error, sx: {
+            borderRadius: '8px',
+            ...sx,
+        }, ...props, children: [label && (jsxRuntime.jsxs(material.FormLabel, { component: "legend", sx: {
+                    fontWeight: 500,
+                    fontSize: size === 'small' ? '0.875rem' : '1rem',
+                    color: disabled
+                        ? theme.palette.text.disabled
+                        : error
+                            ? theme.palette.error.main
+                            : theme.palette.text.primary,
+                    '&.Mui-focused': {
+                        color: error
+                            ? theme.palette.error.main
+                            : `${theme.palette[color].main}`,
+                    },
+                    mb: 1,
+                    ...labelSx,
+                }, children: [label, required && (jsxRuntime.jsx(material.Typography, { component: "span", sx: {
+                            color: theme.palette.error.main,
+                            ml: 0.5,
+                            fontSize: 'inherit',
+                        }, children: "*" }))] })), jsxRuntime.jsx(material.RadioGroup, { name: name, value: currentValue, onChange: handleChange, row: row, sx: {
+                    gap: size === 'small' ? 1 : 1.5,
+                    '& .MuiFormControlLabel-root': {
+                        marginLeft: 0,
+                        marginRight: row ? 2 : 0,
+                    },
+                }, children: options.map((option) => (jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsx(material.FormControlLabel, { value: option.value, disabled: disabled || option.disabled, control: jsxRuntime.jsx(material.Radio, { size: size, color: color, sx: {
+                                '&.Mui-checked': {
+                                    color: error
+                                        ? theme.palette.error.main
+                                        : `${theme.palette[color].main}`,
+                                },
+                                alignSelf: option.description ? 'flex-start' : 'center',
+                                mt: option.description ? 0.25 : 0,
+                                ...radioSx,
+                            } }), label: jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsx(material.Typography, { variant: size === 'small' ? 'body2' : 'body1', sx: {
+                                        fontWeight: 400,
+                                        color: disabled || option.disabled
+                                            ? theme.palette.text.disabled
+                                            : theme.palette.text.primary,
+                                        lineHeight: 1.5,
+                                    }, children: option.label }), option.description && (jsxRuntime.jsx(material.Typography, { variant: "caption", sx: {
+                                        color: disabled || option.disabled
+                                            ? theme.palette.text.disabled
+                                            : theme.palette.text.secondary,
+                                        mt: 0.25,
+                                        lineHeight: 1.4,
+                                    }, children: option.description }))] }), sx: {
+                            alignItems: option.description ? 'flex-start' : 'center',
+                            margin: 0,
+                            display: 'flex',
+                            '& .MuiFormControlLabel-label': {
+                                ml: 1,
+                                flex: 1,
+                            },
+                            '& .MuiButtonBase-root': {
+                                p: size === 'small' ? 0.5 : 1,
+                            },
+                        } }) }, option.value))) }), helperText && (jsxRuntime.jsx(material.FormHelperText, { sx: {
+                    mt: 1,
+                    fontSize: size === 'small' ? '0.75rem' : '0.875rem',
+                    color: error
+                        ? theme.palette.error.main
+                        : theme.palette.text.secondary,
+                }, children: helperText }))] }));
+});
+RadioGroup.displayName = 'RadioGroup';
+
+exports.RadioGroup = RadioGroup;
+exports.default = RadioGroup;

package/dist/Typography/index.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TypographyProps, SxProps } from '@mui/material';
+
+interface HeadingProps extends TypographyProps {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+declare const Heading: ({ level, ...props }: HeadingProps) => react_jsx_runtime.JSX.Element;
+
+interface TextProps extends TypographyProps {
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Text: ({ size, ...props }: TextProps) => react_jsx_runtime.JSX.Element;
+
+declare const Lead: (props: TypographyProps) => react_jsx_runtime.JSX.Element;
+
+declare const Muted: (props: TypographyProps) => react_jsx_runtime.JSX.Element;
+
+declare const Strong: (props: TypographyProps) => react_jsx_runtime.JSX.Element;
+
+declare const Caption: (props: TypographyProps) => react_jsx_runtime.JSX.Element;
+
+declare const Blockquote: (props: TypographyProps) => react_jsx_runtime.JSX.Element;
+
+interface CodeProps {
+    children: React.ReactNode;
+    sx?: SxProps;
+}
+declare const Code: ({ children, sx }: CodeProps) => react_jsx_runtime.JSX.Element;
+
+export { Blockquote, Caption, Code, Heading, Lead, Muted, Strong, Text };

package/dist/Typography/index.esm.js

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import { Typography, Box } from '@mui/material';
+
+const Heading = ({ level = 1, ...props }) => {
+    const variant = `h${level}`;
+    return (jsx(Typography, { variant: variant, component: props.component || `h${level}`, fontWeight: 600, gutterBottom: true, ...props }));
+};
+
+const Text = ({ size = 'md', ...props }) => {
+    const variantMap = {
+        sm: 'body2',
+        md: 'body1',
+        lg: 'subtitle1',
+    };
+    return (jsx(Typography, { variant: variantMap[size], component: props.component || 'p', ...props }));
+};
+
+const Lead = (props) => {
+    return (jsx(Typography, { variant: "subtitle1", component: props.component || 'p', fontWeight: 400, color: "text.secondary", ...props }));
+};
+
+const Muted = (props) => {
+    return (jsx(Typography, { variant: "body2", component: props.component || 'span', color: "text.disabled", ...props }));
+};
+
+const Strong = (props) => {
+    return (jsx(Typography, { component: props.component || 'strong', fontWeight: 700, display: "inline", ...props }));
+};
+
+const Caption = (props) => {
+    return (jsx(Typography, { variant: "caption", color: "text.secondary", component: props.component || 'span', ...props }));
+};
+
+const Blockquote = (props) => {
+    return (jsx(Typography, { component: "blockquote", sx: {
+            borderLeft: '4px solid',
+            borderColor: 'divider',
+            pl: 2,
+            color: 'text.secondary',
+            fontStyle: 'italic',
+        }, ...props }));
+};
+
+const Code = ({ children, sx }) => {
+    return (jsx(Box, { component: "code", sx: {
+            fontFamily: 'monospace',
+            backgroundColor: 'grey.100',
+            color: 'primary.main',
+            px: 0.5,
+            py: 0.25,
+            borderRadius: 1,
+            fontSize: '0.875rem',
+            ...sx,
+        }, children: children }));
+};
+
+export { Blockquote, Caption, Code, Heading, Lead, Muted, Strong, Text };

package/dist/Typography/index.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+
+const Heading = ({ level = 1, ...props }) => {
+    const variant = `h${level}`;
+    return (jsxRuntime.jsx(material.Typography, { variant: variant, component: props.component || `h${level}`, fontWeight: 600, gutterBottom: true, ...props }));
+};
+
+const Text = ({ size = 'md', ...props }) => {
+    const variantMap = {
+        sm: 'body2',
+        md: 'body1',
+        lg: 'subtitle1',
+    };
+    return (jsxRuntime.jsx(material.Typography, { variant: variantMap[size], component: props.component || 'p', ...props }));
+};
+
+const Lead = (props) => {
+    return (jsxRuntime.jsx(material.Typography, { variant: "subtitle1", component: props.component || 'p', fontWeight: 400, color: "text.secondary", ...props }));
+};
+
+const Muted = (props) => {
+    return (jsxRuntime.jsx(material.Typography, { variant: "body2", component: props.component || 'span', color: "text.disabled", ...props }));
+};
+
+const Strong = (props) => {
+    return (jsxRuntime.jsx(material.Typography, { component: props.component || 'strong', fontWeight: 700, display: "inline", ...props }));
+};
+
+const Caption = (props) => {
+    return (jsxRuntime.jsx(material.Typography, { variant: "caption", color: "text.secondary", component: props.component || 'span', ...props }));
+};
+
+const Blockquote = (props) => {
+    return (jsxRuntime.jsx(material.Typography, { component: "blockquote", sx: {
+            borderLeft: '4px solid',
+            borderColor: 'divider',
+            pl: 2,
+            color: 'text.secondary',
+            fontStyle: 'italic',
+        }, ...props }));
+};
+
+const Code = ({ children, sx }) => {
+    return (jsxRuntime.jsx(material.Box, { component: "code", sx: {
+            fontFamily: 'monospace',
+            backgroundColor: 'grey.100',
+            color: 'primary.main',
+            px: 0.5,
+            py: 0.25,
+            borderRadius: 1,
+            fontSize: '0.875rem',
+            ...sx,
+        }, children: children }));
+};
+
+exports.Blockquote = Blockquote;
+exports.Caption = Caption;
+exports.Code = Code;
+exports.Heading = Heading;
+exports.Lead = Lead;
+exports.Muted = Muted;
+exports.Strong = Strong;
+exports.Text = Text;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zimyo/ui",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Scalable UI component library built on MUI Material",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -26,6 +26,31 @@
       "require": "./dist/Typography/index.js",
       "types": "./dist/Typography/index.d.ts"
     },
+    "./Card": {
+      "import": "./dist/Card/index.esm.js",
+      "require": "./dist/Card/index.js",
+      "types": "./dist/Card/index.d.ts"
+    },
+    "./Accordion": {
+      "import": "./dist/Accordion/index.esm.js",
+      "require": "./dist/Accordion/index.js",
+      "types": "./dist/Accordion/index.d.ts"
+    },
+    "./Select": {
+      "import": "./dist/Select/index.esm.js",
+      "require": "./dist/Select/index.js",
+      "types": "./dist/Select/index.d.ts"
+    },
+    "./TextInput": {
+      "import": "./dist/Input/index.esm.js",
+      "require": "./dist/Input/index.js",
+      "types": "./dist/Input/index.d.ts"
+    },
+    "./Switch": {
+      "import": "./dist/Switch/index.esm.js",
+      "require": "./dist/Switch/index.js",
+      "types": "./dist/Switch/index.d.ts"
+    },
     "./theme": {
       "import": "./dist/theme/index.esm.js",
       "require": "./dist/theme/index.js",
@@ -45,7 +70,7 @@
     "typecheck": "tsc --noEmit",
     "generate:exports": "node scripts/generate-exports.js",
     "version": "changeset version",
-    "release": "changeset publish --access public"
+    "release": "changeset publish"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.0.0",
@@ -88,5 +113,8 @@
     "extends": [
       "plugin:storybook/recommended"
     ]
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }