@zimyo/ui 1.1.1 → 1.1.3

package/README.md

@@ -0,0 +1,15 @@
+# 📦 @zimyo/ui
+
+A scalable and customizable UI component library built on top of [MUI (Material UI)](https://mui.com/) — optimized for performance, accessibility, and developer experience.
+
+> Built with [React](https://reactjs.org/), [TypeScript](https://www.typescriptlang.org/), and bundled using [Rollup](https://rollupjs.org/).  
+> Versioned and released via [Changesets](https://github.com/changesets/changesets).
+
+---
+
+## 📋 Prerequisites & Installation
+
+To install `@zimyo/ui` **with all required peer dependencies**, run:
+
+```bash
+npm install @zimyo/ui @mui/material@5 @emotion/react @emotion/styled

package/package.json

@@ -1,10 +1,17 @@
 {
   "name": "@zimyo/ui",
-  "version": "1.1.1",
-  "description": "Scalable UI component library built on MUI Material",
+  "version": "1.1.3",
+  "description": "Zimyo UI library built on MUI Material",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "author": "Zimyo Team <developer@zimyo.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/zimyoTech/zimyo_core#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zimyoTech/zimyo_core"
+  },
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
@@ -61,7 +68,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs",
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 rollup -c --bundleConfigAsCjs",
     "build:watch": "rollup -c -w",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -75,6 +82,7 @@
   "peerDependencies": {
     "@emotion/react": ">=11.0.0",
     "@emotion/styled": ">=11.0.0",
+    "@mui/icons-material": ">=5.0.0",
     "@mui/material": ">=5.0.0",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
@@ -84,6 +92,8 @@
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
+    "@storybook/addon-docs": "^9.0.15",
+    "@storybook/addon-themes": "^9.0.15",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
     "@storybook/react-webpack5": "^9.0.14",
     "@testing-library/jest-dom": "^6.6.3",
@@ -91,6 +101,7 @@
     "@types/jest": "^30.0.0",
     "@types/node": "^20.9.0",
     "@types/react": "^18.0.0",
+    "cross-env": "^7.0.3",
     "eslint": "^8.0.0",
     "eslint-plugin-storybook": "^9.0.14",
     "jest": "^29.7.0",
@@ -105,9 +116,9 @@
   "dependencies": {
     "@emotion/react": ">=11.0.0",
     "@emotion/styled": ">=11.0.0",
-    "@mui/icons-material": "^7.1.2",
-    "@mui/material": ">=5.0.0",
-    "@mui/styles": "^6.4.8"
+    "@fontsource/inter": "^5.2.6",
+    "@mui/icons-material": ">=5.0.0",
+    "@mui/material": ">=5.0.0"
   },
   "eslintConfig": {
     "extends": [
@@ -116,5 +127,19 @@
   },
   "publishConfig": {
     "access": "public"
-  }
-}
+  },
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=7.0.0"
+  },
+  "keywords": [
+    "react",
+    "mui",
+    "material-ui",
+    "ui-library",
+    "storybook",
+    "typescript",
+    "component-library",
+    "design-system"
+  ]
+}

package/dist/Accordion/index.d.ts

@@ -1,34 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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

@@ -1,137 +0,0 @@
-'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

@@ -1,15 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,28 +0,0 @@
-'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

@@ -1,41 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,38 +0,0 @@
-'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

@@ -1,19 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,27 +0,0 @@
-'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

@@ -1,31 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,97 +0,0 @@
-'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

@@ -1,30 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,66 +0,0 @@
-'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;