@zimyo/ui 1.1.4 → 1.1.6

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,239 @@
+import { jsx } from 'react/jsx-runtime';
+import React, { forwardRef, createElement } from 'react';
+import { useTheme, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from '@mui/material';
+
+/**
+ * @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: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode);
+
+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(ChevronDown, {});
+    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 }));
+});
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Accordion as default };

package/dist/Accordion/index.js

@@ -0,0 +1,247 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+
+/**
+ * @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: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode);
+
+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(ChevronDown, {});
+    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 }));
+});
+
+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) => {
+    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) => {
+    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 };