@zimyo/ui 1.1.8 → 1.1.10

package/dist/Select/index.esm.js

@@ -0,0 +1,195 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { forwardRef, createElement } from 'react';
+import { useTheme, FormControl, Select as Select$1, OutlinedInput, IconButton, MenuItem, ListItemText, FormHelperText, Box, Chip } 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$1 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$1);
+
+/**
+ * @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 Select = React.forwardRef(({ label = '', options = [], value, onChange, error = false, helperText = '', required = false, placeholder = 'Select...', isMulti = false, disabled = false, ...rest }, ref) => {
+    useTheme();
+    const handleRemoveChip = (chipValue) => (e) => {
+        e.stopPropagation();
+        const newValue = value.filter((v) => v !== chipValue);
+        onChange?.({
+            target: {
+                name: rest.name,
+                value: newValue,
+            },
+        });
+    };
+    const renderValue = (selected) => {
+        if (isMulti && Array.isArray(selected)) {
+            return (jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 }, children: selected.map((val) => {
+                    const label = options.find((o) => o.value === val)?.label || val;
+                    return jsx(Box, { onMouseDown: (e) => e.stopPropagation(), children: jsx(Chip, { onDelete: handleRemoveChip(val), label: label, sx: { borderRadius: '12px' } }) }, val);
+                }) }));
+        }
+        return options.find((o) => o.value === selected)?.label || placeholder;
+    };
+    const handleClearSelection = (e) => {
+        e.stopPropagation();
+        const emptyValue = isMulti ? [] : '';
+        onChange?.({
+            target: {
+                name: rest.name,
+                value: emptyValue,
+            },
+        });
+    };
+    return (jsxs(FormControl, { fullWidth: true, error: error, disabled: disabled, sx: {
+            '& .MuiOutlinedInput-root': {
+                borderRadius: '8px',
+                minHeight: '44px',
+                // backgroundColor: theme.palette.background.paper,
+                fontSize: '14px'
+            },
+            '& .MuiSelect-select': {
+                fontSize: '14px',
+                padding: '10px 14px',
+            },
+            '& .MuiSelect-placeholder': {
+                fontSize: '14px',
+            },
+            '& .MuiMenuItem-root': {
+                fontSize: '14px',
+            },
+            '& .MuiChip-label': {
+                fontSize: '14px',
+            },
+        }, children: [jsx(Select$1, { displayEmpty: true, 
+                //   labelId={labelId}
+                multiple: isMulti, value: value || (isMulti ? [] : ''), onChange: onChange, input: jsx(OutlinedInput, { label: label }), renderValue: renderValue, ref: ref, IconComponent: ChevronDown, endAdornment: value && !isMulti && ((isMulti && value.length > 0) || (!isMulti && value !== '')) ? (jsx(IconButton, { sx: { marginRight: '1rem' }, size: "small", onClick: handleClearSelection, children: jsx(X, { fontSize: "small" }) })) : null, variant: "outlined", ...rest, children: options && options.map((option) => (jsx(MenuItem, { value: option.value, children: isMulti ? (jsx(Fragment, { children: jsx(ListItemText, { primary: option.label }) })) : (option.label || placeholder) }, option.value))) }), helperText && jsx(FormHelperText, { children: helperText })] }));
+});
+
+export { Select, Select as default };

package/dist/Select/index.js

@@ -0,0 +1,200 @@
+'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$1 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$1);
+
+/**
+ * @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 Select = React.forwardRef(({ label = '', options = [], value, onChange, error = false, helperText = '', required = false, placeholder = 'Select...', isMulti = false, disabled = false, ...rest }, ref) => {
+    material.useTheme();
+    const handleRemoveChip = (chipValue) => (e) => {
+        e.stopPropagation();
+        const newValue = value.filter((v) => v !== chipValue);
+        onChange?.({
+            target: {
+                name: rest.name,
+                value: newValue,
+            },
+        });
+    };
+    const renderValue = (selected) => {
+        if (isMulti && Array.isArray(selected)) {
+            return (jsxRuntime.jsx(material.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 }, children: selected.map((val) => {
+                    const label = options.find((o) => o.value === val)?.label || val;
+                    return jsxRuntime.jsx(material.Box, { onMouseDown: (e) => e.stopPropagation(), children: jsxRuntime.jsx(material.Chip, { onDelete: handleRemoveChip(val), label: label, sx: { borderRadius: '12px' } }) }, val);
+                }) }));
+        }
+        return options.find((o) => o.value === selected)?.label || placeholder;
+    };
+    const handleClearSelection = (e) => {
+        e.stopPropagation();
+        const emptyValue = isMulti ? [] : '';
+        onChange?.({
+            target: {
+                name: rest.name,
+                value: emptyValue,
+            },
+        });
+    };
+    return (jsxRuntime.jsxs(material.FormControl, { fullWidth: true, error: error, disabled: disabled, sx: {
+            '& .MuiOutlinedInput-root': {
+                borderRadius: '8px',
+                minHeight: '44px',
+                // backgroundColor: theme.palette.background.paper,
+                fontSize: '14px'
+            },
+            '& .MuiSelect-select': {
+                fontSize: '14px',
+                padding: '10px 14px',
+            },
+            '& .MuiSelect-placeholder': {
+                fontSize: '14px',
+            },
+            '& .MuiMenuItem-root': {
+                fontSize: '14px',
+            },
+            '& .MuiChip-label': {
+                fontSize: '14px',
+            },
+        }, children: [jsxRuntime.jsx(material.Select, { displayEmpty: true, 
+                //   labelId={labelId}
+                multiple: isMulti, value: value || (isMulti ? [] : ''), onChange: onChange, input: jsxRuntime.jsx(material.OutlinedInput, { label: label }), renderValue: renderValue, ref: ref, IconComponent: ChevronDown, endAdornment: value && !isMulti && ((isMulti && value.length > 0) || (!isMulti && value !== '')) ? (jsxRuntime.jsx(material.IconButton, { sx: { marginRight: '1rem' }, size: "small", onClick: handleClearSelection, children: jsxRuntime.jsx(X, { fontSize: "small" }) })) : null, variant: "outlined", ...rest, children: options && options.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.value, children: isMulti ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.ListItemText, { primary: option.label }) })) : (option.label || placeholder) }, option.value))) }), helperText && jsxRuntime.jsx(material.FormHelperText, { children: helperText })] }));
+});
+
+exports.Select = Select;
+exports.default = Select;

package/dist/Switch/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SwitchProps as SwitchProps$1 } from '@mui/material';
+
+interface SwitchProps extends Omit<SwitchProps$1, 'onChange'> {
+    label?: string;
+    helperText?: string;
+    error?: boolean;
+    required?: boolean | number;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+}
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Switch, Switch as default };
+export type { SwitchProps };

package/dist/Switch/index.esm.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { FormControl, FormControlLabel, Switch as Switch$1, FormHelperText } from '@mui/material';
+
+const Switch = React.forwardRef(({ label = '', helperText = '', error = false, onChange, checked, required = false, disabled = false, ...rest }, ref) => {
+    return (jsxs(FormControl, { error: error, disabled: disabled, component: "fieldset", children: [jsx(FormControlLabel, { control: jsx(Switch$1, { inputRef: ref, checked: checked, onChange: (e, checked) => onChange?.(e, checked), disabled: disabled, required: required == 1 || required === true ? true : false, ...rest }), label: label }), helperText && jsx(FormHelperText, { children: helperText })] }));
+});
+
+export { Switch, Switch as default };

package/dist/Switch/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var material = require('@mui/material');
+
+const Switch = React.forwardRef(({ label = '', helperText = '', error = false, onChange, checked, required = false, disabled = false, ...rest }, ref) => {
+    return (jsxRuntime.jsxs(material.FormControl, { error: error, disabled: disabled, component: "fieldset", children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Switch, { inputRef: ref, checked: checked, onChange: (e, checked) => onChange?.(e, checked), disabled: disabled, required: required == 1 || required === true ? true : false, ...rest }), label: label }), helperText && jsxRuntime.jsx(material.FormHelperText, { children: helperText })] }));
+});
+
+exports.Switch = Switch;
+exports.default = Switch;

package/dist/Tabs/index.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { TabProps, TabsProps as TabsProps$1 } from '@mui/material';
+import { SxProps, Theme } from '@mui/system';
+
+interface TabItem {
+    label: string;
+    value: string | number;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    badge?: string | number;
+}
+interface CustomTabProps extends Omit<TabProps, 'sx'> {
+    sx?: SxProps<Theme>;
+    badge?: string | number;
+}
+interface TabsProps extends Omit<TabsProps$1, 'children' | 'sx' | 'indicatorColor' | 'textColor'> {
+    items: TabItem[];
+    value: string | number;
+    onChange: (event: React.SyntheticEvent, newValue: string | number) => void;
+    variant?: 'standard' | 'scrollable' | 'fullWidth';
+    orientation?: 'horizontal' | 'vertical';
+    styleVariant?: 'default' | 'filled' | 'outlined' | 'pills' | 'underlined';
+    size?: 'small' | 'medium' | 'large';
+    centered?: boolean;
+    allowScrollButtonsMobile?: boolean;
+    scrollButtons?: boolean | 'auto';
+    sx?: SxProps<Theme>;
+    tabSx?: SxProps<Theme>;
+    iconPosition?: 'start' | 'end' | 'top' | 'bottom';
+    indicatorColor?: TabsProps$1['indicatorColor'];
+    textColor?: TabsProps$1['textColor'];
+}
+declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Tabs, Tabs as default };
+export type { CustomTabProps, TabItem, TabsProps };

package/dist/Tabs/index.esm.js

@@ -0,0 +1,202 @@
+import React from 'react';
+import { useTheme, Box, Tab, Tabs as Tabs$1, alpha } from '@mui/material';
+
+// Custom Tab Component
+const CustomTab = React.forwardRef(({ badge, sx, label, ...props }, ref) => {
+    const theme = useTheme();
+    const tabLabel = badge ? React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } }, label, React.createElement(Box, {
+        component: 'span',
+        sx: {
+            backgroundColor: theme.palette.error.main,
+            color: theme.palette.error.contrastText,
+            borderRadius: '10px',
+            padding: '2px 6px',
+            fontSize: '0.75rem',
+            fontWeight: 600,
+            minWidth: '18px',
+            height: '18px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            lineHeight: 1,
+        }
+    }, badge)) : label;
+    return React.createElement(Tab, {
+        ref,
+        sx: {
+            position: 'relative',
+            ...sx,
+        },
+        label: tabLabel,
+        ...props
+    });
+});
+CustomTab.displayName = 'CustomTab';
+// Main Tabs Component
+const Tabs = React.forwardRef(({ items, value, onChange, variant = 'standard', orientation = 'horizontal', styleVariant = 'default', size = 'medium', centered = false, allowScrollButtonsMobile = false, scrollButtons = 'auto', sx = {}, tabSx = {}, iconPosition = 'start', indicatorColor = 'primary', textColor = 'primary', ...props }, ref) => {
+    const theme = useTheme();
+    // Get size-based styling
+    const getSizeStyles = () => {
+        switch (size) {
+            case 'small':
+                return {
+                    minHeight: 36,
+                    fontSize: '0.875rem',
+                    padding: '6px 12px',
+                };
+            case 'large':
+                return {
+                    minHeight: 56,
+                    fontSize: '1rem',
+                    padding: '12px 24px',
+                };
+            default:
+                return {
+                    minHeight: 48,
+                    fontSize: '0.9375rem',
+                    padding: '8px 16px',
+                };
+        }
+    };
+    // Get style variant specific styling
+    const getStyleVariantStyles = () => {
+        const baseStyles = getSizeStyles();
+        switch (styleVariant) {
+            case 'filled':
+                return {
+                    '& .MuiTab-root': {
+                        ...baseStyles,
+                        backgroundColor: alpha(theme.palette.action.hover, 0.08),
+                        borderRadius: theme.shape.borderRadius,
+                        margin: '0 4px',
+                        border: 'none',
+                        '&.Mui-selected': {
+                            backgroundColor: theme.palette.primary.main,
+                            color: theme.palette.primary.contrastText,
+                        },
+                        '&:hover': {
+                            backgroundColor: alpha(theme.palette.action.hover, 0.12),
+                        },
+                    },
+                    '& .MuiTabs-indicator': {
+                        display: 'none',
+                    },
+                };
+            case 'outlined':
+                return {
+                    '& .MuiTab-root': {
+                        ...baseStyles,
+                        border: `1px solid ${alpha(theme.palette.divider, 0.5)}`,
+                        borderRadius: theme.shape.borderRadius,
+                        margin: '0 2px',
+                        '&.Mui-selected': {
+                            borderColor: theme.palette.primary.main,
+                            backgroundColor: alpha(theme.palette.primary.main, 0.08),
+                            color: theme.palette.primary.main,
+                        },
+                        '&:hover': {
+                            borderColor: alpha(theme.palette.primary.main, 0.5),
+                        },
+                    },
+                    '& .MuiTabs-indicator': {
+                        display: 'none',
+                    },
+                };
+            case 'pills':
+                return {
+                    '& .MuiTab-root': {
+                        ...baseStyles,
+                        borderRadius: 25,
+                        margin: '0 4px',
+                        backgroundColor: 'transparent',
+                        border: `1px solid transparent`,
+                        '&.Mui-selected': {
+                            backgroundColor: theme.palette.primary.main,
+                            color: theme.palette.primary.contrastText,
+                        },
+                        '&:hover': {
+                            backgroundColor: alpha(theme.palette.action.hover, 0.08),
+                        },
+                    },
+                    '& .MuiTabs-indicator': {
+                        display: 'none',
+                    },
+                };
+            case 'underlined':
+                return {
+                    '& .MuiTab-root': {
+                        ...baseStyles,
+                        borderBottom: `2px solid transparent`,
+                        '&.Mui-selected': {
+                            borderBottomColor: theme.palette.primary.main,
+                        },
+                    },
+                    '& .MuiTabs-indicator': {
+                        display: 'none',
+                    },
+                };
+            default:
+                return {
+                    '& .MuiTab-root': {
+                        ...baseStyles,
+                    },
+                };
+        }
+    };
+    return React.createElement(Box, { ref }, React.createElement(Tabs$1, {
+        value,
+        onChange,
+        variant,
+        orientation,
+        centered,
+        allowScrollButtonsMobile,
+        scrollButtons,
+        indicatorColor,
+        textColor,
+        sx: {
+            ...getStyleVariantStyles(),
+            '& .MuiTab-root': {
+                textTransform: 'none',
+                fontWeight: 500,
+                letterSpacing: '0.5px',
+                transition: 'all 0.2s ease-in-out',
+                ...getStyleVariantStyles()['& .MuiTab-root'],
+                ...tabSx,
+            },
+            ...sx,
+        },
+        ...props,
+    }, ...items.map((item) => {
+        // Create the label content based on icon position
+        let labelContent;
+        if (item.icon) {
+            switch (iconPosition) {
+                case 'end':
+                    labelContent = React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexDirection: 'row-reverse' } }, item.icon, item.label);
+                    break;
+                case 'top':
+                    labelContent = React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5, flexDirection: 'column' } }, item.icon, item.label);
+                    break;
+                case 'bottom':
+                    labelContent = React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5, flexDirection: 'column-reverse' } }, item.icon, item.label);
+                    break;
+                default: // 'start'
+                    labelContent = React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } }, item.icon, item.label);
+                    break;
+            }
+        }
+        else {
+            labelContent = item.label;
+        }
+        return React.createElement(CustomTab, {
+            key: item.value,
+            value: item.value,
+            disabled: item.disabled,
+            badge: item.badge,
+            label: labelContent,
+        });
+    })));
+});
+Tabs.displayName = 'Tabs';
+
+export { Tabs, Tabs as default };