@zimyo/ui 1.1.8 → 1.1.10

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/Modal/index.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DialogProps } from '@mui/material';
+import { ReactNode } from 'react';
+
+interface ModalProps extends Omit<DialogProps, 'title'> {
+    open: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    content?: ReactNode;
+    actions?: ReactNode;
+    maxWidth?: DialogProps['maxWidth'];
+    fullWidth?: boolean;
+}
+declare const Modal: ({ open, onClose, title, content, actions, fullWidth, maxWidth, ...rest }: ModalProps) => react_jsx_runtime.JSX.Element;
+
+export { Modal, Modal as default };
+export type { ModalProps };

package/dist/Modal/index.esm.js

@@ -0,0 +1,144 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Typography, useTheme, Dialog, DialogTitle, IconButton, DialogContent, DialogActions } from '@mui/material';
+import { forwardRef, createElement } from 'react';
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+};
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const Icon = forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => createElement(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef(
+    ({ className, ...props }, ref) => createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode);
+
+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 Modal = ({ open, onClose, title, content, actions, fullWidth = true, maxWidth = 'sm', ...rest }) => {
+    const theme = useTheme();
+    return (jsxs(Dialog, { open: open, onClose: onClose, fullWidth: fullWidth, maxWidth: maxWidth, scroll: "body", PaperProps: {
+            sx: {
+                borderRadius: 1.5,
+                p: 1,
+                backgroundColor: theme.palette.background.paper,
+            },
+        }, ...rest, children: [!!title && (jsxs(DialogTitle, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsx(Heading, { level: 6, children: title }), jsx(IconButton, { edge: "end", onClick: onClose, children: jsx(X, { size: 18, strokeWidth: 2 }) })] })), !!content && jsx(DialogContent, { dividers: true, children: content }), !!actions && jsx(DialogActions, { children: actions })] }));
+};
+
+export { Modal, Modal as default };

package/dist/Modal/index.js

@@ -0,0 +1,149 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var react = require('react');
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+};
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const Icon = react.forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => react.createElement(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => react.createElement(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const createLucideIcon = (iconName, iconNode) => {
+  const Component = react.forwardRef(
+    ({ className, ...props }, ref) => react.createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode);
+
+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 Modal = ({ open, onClose, title, content, actions, fullWidth = true, maxWidth = 'sm', ...rest }) => {
+    const theme = material.useTheme();
+    return (jsxRuntime.jsxs(material.Dialog, { open: open, onClose: onClose, fullWidth: fullWidth, maxWidth: maxWidth, scroll: "body", PaperProps: {
+            sx: {
+                borderRadius: 1.5,
+                p: 1,
+                backgroundColor: theme.palette.background.paper,
+            },
+        }, ...rest, children: [!!title && (jsxRuntime.jsxs(material.DialogTitle, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxRuntime.jsx(Heading, { level: 6, children: title }), jsxRuntime.jsx(material.IconButton, { edge: "end", onClick: onClose, children: jsxRuntime.jsx(X, { size: 18, strokeWidth: 2 }) })] })), !!content && jsxRuntime.jsx(material.DialogContent, { dividers: true, children: content }), !!actions && jsxRuntime.jsx(material.DialogActions, { children: actions })] }));
+};
+
+exports.Modal = Modal;
+exports.default = Modal;

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,91 @@
+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 }))] }));
+});
+
+export { RadioGroup, RadioGroup as default };

package/dist/RadioGroup/index.js

@@ -0,0 +1,96 @@
+'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 }))] }));
+});
+
+exports.RadioGroup = RadioGroup;
+exports.default = RadioGroup;

package/dist/Select/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { SelectProps as SelectProps$1, SelectChangeEvent } from '@mui/material';
+
+interface OptionType {
+    label: string;
+    value: string | number;
+}
+interface SelectProps extends Omit<SelectProps$1, 'value' | 'onChange'> {
+    label?: string;
+    options: OptionType[];
+    error?: boolean;
+    helperText?: string;
+    required?: boolean;
+    placeholder?: string;
+    value?: any;
+    onChange?: (event: SelectChangeEvent<any>) => void;
+    isMulti?: boolean;
+}
+declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<any>>;
+
+export { Select, Select as default };
+export type { SelectProps };