react-restyle-components 0.4.11 → 0.4.13

package/lib/src/core-components/src/components/Button1/buttonGroup/buttonGroup.component.d.ts

@@ -1,7 +1,21 @@
+import { CSSProperties } from 'react';
 import { ReactNode } from 'react';
-export declare const ButtonGroup: ({ children, orientation, className, }: {
+export interface ButtonGroupClassNames {
+    /** Custom className for the container */
+    container?: string;
+}
+export interface ButtonGroupStyles {
+    /** Custom style for the container */
+    container?: CSSProperties;
+}
+export interface ButtonGroupProps {
     children: ReactNode;
-    orientation?: "horizontal" | "vertical" | undefined;
-    className?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+    /** Custom classNames for component parts */
+    classNames?: ButtonGroupClassNames;
+    /** Custom inline styles for component parts */
+    styles?: ButtonGroupStyles;
+}
+export declare const ButtonGroup: ({ children, orientation, className, classNames, styles, }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=buttonGroup.component.d.ts.map

package/lib/src/core-components/src/components/Button1/buttonGroup/buttonGroup.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Button1/buttonGroup/buttonGroup.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIhC,eAAO,MAAM,WAAW;cAKZ,SAAS;;;6CAepB,CAAC"}
+{"version":3,"file":"buttonGroup.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Button1/buttonGroup/buttonGroup.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIhC,MAAM,WAAW,qBAAqB;IACpC,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,qCAAqC;IACrC,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,+CAA+C;IAC/C,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,8DAMrB,gBAAgB,4CAclB,CAAC"}

package/lib/src/core-components/src/components/Button1/buttonGroup/buttonGroup.component.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const ButtonGroup = ({ children, orientation = 'horizontal', className, }) => (_jsx("div", { className: cn(s.flex, orientation == 'horizontal' ? s['flex-row'] : s['flex-col'], s['w-fit'], s['gap-2'], className), children: children }));
+export const ButtonGroup = ({ children, orientation = 'horizontal', className, classNames = {}, styles = {}, }) => (_jsx("div", { className: cn(s.flex, orientation == 'horizontal' ? s['flex-row'] : s['flex-col'], s['w-fit'], s['gap-2'], className, classNames.container), style: styles.container, children: children }));

package/lib/src/core-components/src/components/Icon/Icon.d.ts

@@ -1,29 +1,44 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { IconBaseProps } from 'react-icons/lib';
+export interface IconClassNames {
+    /** Custom className for the container wrapper */
+    container?: string;
+    /** Custom className for the icon element */
+    icon?: string;
+}
+export interface IconStyles {
+    /** Custom style for the container wrapper */
+    container?: CSSProperties;
+    /** Custom style for the icon element */
+    icon?: CSSProperties;
+}
 export interface IconProps {
+    /** Name of the icon from react-icons library (e.g., 'FaHeart', 'MdSettings') */
     nameIcon: string;
+    /** Props to pass to the underlying react-icon component */
     propsIcon?: IconBaseProps;
+    /** Additional className for the container */
     className?: string;
+    /** Tooltip text to display on hover */
     tooltip?: string;
+    /** Whether the icon is disabled */
     isDisable?: boolean;
+    /** Click handler */
     onClick?: () => void;
+    /** Custom classNames for internal elements */
+    classNames?: IconClassNames;
+    /** Custom styles for internal elements */
+    styles?: IconStyles;
 }
 export interface CompatIconProps {
     src: string | React.ReactNode;
     className?: string;
+    style?: CSSProperties;
     [key: string]: any;
 }
-export interface IconProps {
-    nameIcon: string;
-    propsIcon?: IconBaseProps;
-    className?: string;
-    tooltip?: string;
-    isDisable?: boolean;
-    onClick?: () => void;
-}
 export declare const Icon: {
-    ({ nameIcon, propsIcon, className, tooltip, isDisable, onClick, }: IconProps): JSX.Element;
-    SSR: ({ nameIcon, ...props }: IconProps) => JSX.Element;
-    Compat: ({ src, className, ...props }: CompatIconProps) => JSX.Element;
+    ({ nameIcon, propsIcon, className, tooltip, isDisable, classNames, styles, onClick, }: IconProps): JSX.Element;
+    SSR: ({ nameIcon, classNames, styles, ...props }: IconProps) => JSX.Element;
+    Compat: ({ src, className, style, ...props }: CompatIconProps) => JSX.Element;
 };
 //# sourceMappingURL=Icon.d.ts.map

package/lib/src/core-components/src/components/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAI9C,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA4BD,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,IAAI;uEAOd,SAAS,GAAG,WAAW;kCAxBa,SAAS,KAAG,WAAW;2CAd3D,eAAe,KAAG,WAAW;CAgH/B,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAK3C,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAI9C,MAAM,WAAW,cAAc;IAC7B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,UAAU;IACzB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,wCAAwC;IACxC,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACxB,gFAAgF;IAChF,QAAQ,EAAE,MAAM,CAAC;IACjB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,0CAA0C;IAC1C,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA4CD,eAAO,MAAM,IAAI;2FASd,SAAS,GAAG,WAAW;sDArBvB,SAAS,KAAG,WAAW;kDAzBvB,eAAe,KAAG,WAAW;CAiI/B,CAAC"}

package/lib/src/core-components/src/components/Icon/Icon.js

@@ -5,16 +5,16 @@ import { Tooltip } from '../Tooltip/tooltip.component';
 import loadable from '@loadable/component';
 import s from '../../tc.module.css';
 import { cn } from '../../utils';
-const CompatIcon = ({ src, className, ...props }) => {
+const CompatIcon = ({ src, className, style, ...props }) => {
     if (typeof src === 'string') {
-        return (_jsx("img", { src: src, className: cn(s.icon, className), ...props, alt: "" }));
+        return (_jsx("img", { src: src, className: cn(s.icon, className), style: style, ...props, alt: "" }));
     }
-    return (_jsx("div", { className: cn(s.icon, className), ...props, children: src }));
+    return (_jsx("div", { className: cn(s.icon, className), style: style, ...props, children: src }));
 };
-const SSRIcon = ({ nameIcon, ...props }) => {
-    return (_jsx("span", { className: cn(s.icon, props.className), "aria-hidden": "true", children: "\u26AB" }));
+const SSRIcon = ({ nameIcon, classNames = {}, styles = {}, ...props }) => {
+    return (_jsx("span", { className: cn(s.icon, props.className, classNames.icon), style: styles.icon, "aria-hidden": "true", children: "\u26AB" }));
 };
-export const Icon = ({ nameIcon, propsIcon, className, tooltip = '', isDisable = false, onClick, }) => {
+export const Icon = ({ nameIcon, propsIcon, className, tooltip = '', isDisable = false, classNames = {}, styles = {}, onClick, }) => {
     try {
         const iconProps = {
             ...propsIcon,
@@ -65,10 +65,10 @@ export const Icon = ({ nameIcon, propsIcon, className, tooltip = '', isDisable =
         const ElementIcon = loadable(loadLibrary, {
             resolveComponent: (el) => el[nameIcon] != null ? el[nameIcon] : el[Object.keys(el.default)[0]],
         });
-        return (_jsx("div", { className: cn(s.iconContainer, className), onClick: () => {
+        return (_jsx("div", { className: cn(s.iconContainer, className, classNames.container), style: styles.container, onClick: () => {
                 if (!isDisable)
                     onClick && onClick();
-            }, children: !_.isEmpty(tooltip) ? (_jsx(Tooltip, { content: tooltip, children: _jsx(ElementIcon, { ...iconProps, className: cn(s.icon) }) })) : (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(ElementIcon, { ...iconProps, className: cn(s.icon) }) })) }));
+            }, children: !_.isEmpty(tooltip) ? (_jsx(Tooltip, { content: tooltip, children: _jsx(ElementIcon, { ...iconProps, className: cn(s.icon, classNames.icon), style: styles.icon }) })) : (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(ElementIcon, { ...iconProps, className: cn(s.icon, classNames.icon), style: styles.icon }) })) }));
     }
     catch (error) {
         return _jsx(_Fragment, {});

package/lib/src/core-components/src/components/Loader/loader.component.d.ts

@@ -1,5 +1,38 @@
+import { CSSProperties } from 'react';
 export type LoaderVariant = 'spinner' | 'dots' | 'bars' | 'pulse';
 export type LoaderSize = 'sm' | 'md' | 'lg';
+export interface LoaderClassNames {
+    /** Custom className for the outer wrapper */
+    wrapper?: string;
+    /** Custom className for the loader container */
+    container?: string;
+    /** Custom className for the spinner element */
+    spinner?: string;
+    /** Custom className for the dot elements */
+    dot?: string;
+    /** Custom className for the bar elements */
+    bar?: string;
+    /** Custom className for the pulse element */
+    pulse?: string;
+    /** Custom className for the loading text */
+    text?: string;
+}
+export interface LoaderStyles {
+    /** Custom style for the outer wrapper */
+    wrapper?: CSSProperties;
+    /** Custom style for the loader container */
+    container?: CSSProperties;
+    /** Custom style for the spinner element */
+    spinner?: CSSProperties;
+    /** Custom style for the dot elements */
+    dot?: CSSProperties;
+    /** Custom style for the bar elements */
+    bar?: CSSProperties;
+    /** Custom style for the pulse element */
+    pulse?: CSSProperties;
+    /** Custom style for the loading text */
+    text?: CSSProperties;
+}
 export interface LoadingAnimateSpinProps {
     /** Wrapper className for positioning */
     classWarper?: string;
@@ -21,8 +54,12 @@ export interface LoadingAnimateSpinProps {
     textFontSize?: string;
     /** Loading text to display below the spinner. If not provided, no text is shown. */
     loadingText?: string;
+    /** Custom classNames for component parts */
+    classNames?: LoaderClassNames;
+    /** Custom inline styles for component parts */
+    styles?: LoaderStyles;
     /** Accessibility label */
     'aria-label'?: string;
 }
-export declare const LoadingAnimateSpin: ({ classWarper, className, variant, size, color, borderWidth, width, height, textFontSize, loadingText, "aria-label": ariaLabel, }: LoadingAnimateSpinProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingAnimateSpin: ({ classWarper, className, variant, size, color, borderWidth, width, height, textFontSize, loadingText, classNames, styles, "aria-label": ariaLabel, }: LoadingAnimateSpinProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=loader.component.d.ts.map

package/lib/src/core-components/src/components/Loader/loader.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loader.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Loader/loader.component.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAClE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,wCAAwC;IACxC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,yGAAyG;IACzG,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IAC3E,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iHAAiH;IACjH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kHAAkH;IAClH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAqHD,eAAO,MAAM,kBAAkB,sIAY5B,uBAAuB,4CA8LzB,CAAC"}
+{"version":3,"file":"loader.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Loader/loader.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAI3C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAClE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,gBAAgB;IAC/B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,yCAAyC;IACzC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,wCAAwC;IACxC,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,wCAAwC;IACxC,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,yCAAyC;IACzC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,wCAAwC;IACxC,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,wCAAwC;IACxC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,yGAAyG;IACzG,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IAC3E,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iHAAiH;IACjH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kHAAkH;IAClH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuJD,eAAO,MAAM,kBAAkB,0JAc5B,uBAAuB,4CAkNzB,CAAC"}

package/lib/src/core-components/src/components/Loader/loader.component.js

@@ -105,56 +105,96 @@ const extractRgbForOpacity = (colorValue) => {
     // Default fallback to white
     return [255, 255, 255];
 };
-export const LoadingAnimateSpin = ({ classWarper = '', className = '', variant = 'spinner', size = 'md', color = 'blue', borderWidth = '10px', width, height, textFontSize = '1.125rem', loadingText, 'aria-label': ariaLabel = 'Loading', }) => {
+// Helper to calculate proportional border width based on spinner size
+// Default ratio: 10px border for 4rem (64px) spinner = ~15.6%
+const calculateBorderWidth = (sizeValue, explicitBorderWidth) => {
+    // If explicit borderWidth is provided, use it
+    if (explicitBorderWidth) {
+        return explicitBorderWidth;
+    }
+    // Default border width if no size specified
+    if (!sizeValue) {
+        return '10px';
+    }
+    // Parse the size value to pixels
+    let sizeInPx;
+    if (sizeValue.endsWith('rem')) {
+        sizeInPx = parseFloat(sizeValue) * 16;
+    }
+    else if (sizeValue.endsWith('px')) {
+        sizeInPx = parseFloat(sizeValue);
+    }
+    else if (sizeValue.endsWith('em')) {
+        sizeInPx = parseFloat(sizeValue) * 16;
+    }
+    else {
+        // Fallback for unknown units
+        return '10px';
+    }
+    // Calculate proportional border (about 15.6% of size, min 2px, max 16px)
+    const borderPx = Math.max(2, Math.min(16, Math.round(sizeInPx * 0.156)));
+    return `${borderPx}px`;
+};
+export const LoadingAnimateSpin = ({ classWarper = '', className = '', variant = 'spinner', size = 'md', color = 'blue', borderWidth, width, height, textFontSize = '1.125rem', loadingText, classNames = {}, styles = {}, 'aria-label': ariaLabel = 'Loading', }) => {
     const sizeConfig = sizeClasses[size];
     const renderSpinner = () => {
         const colorValue = getColorValue(color);
         // Extract RGB values for opacity border - making it more subtle
         const [r, g, b] = extractRgbForOpacity(colorValue);
         const baseBorderColor = `rgba(${r}, ${g}, ${b}, 0.15)`;
-        return (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['items-center'], s['justify-center'], className), "aria-label": ariaLabel, role: "status", children: [_jsx("div", { className: cn(sizeConfig.spinner, s['rounded-full'], s['animate-spin']), style: {
-                        ...(width ? { width } : {}),
-                        ...(height ? { height } : {}),
-                        borderWidth: borderWidth,
+        // Calculate spinner dimensions
+        const spinnerWidth = width || '4rem';
+        const spinnerHeight = height || '4rem';
+        // Calculate proportional border width based on spinner size
+        const calculatedBorderWidth = calculateBorderWidth(spinnerWidth, borderWidth);
+        return (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['items-center'], s['justify-center'], className, classNames.container), style: styles.container, "aria-label": ariaLabel, role: "status", children: [_jsx("div", { className: cn(sizeConfig.spinner, s['rounded-full'], s['animate-spin'], classNames.spinner), style: {
+                        width: spinnerWidth,
+                        height: spinnerHeight,
+                        borderWidth: calculatedBorderWidth,
                         borderStyle: 'solid',
                         borderTopColor: colorValue,
                         borderRightColor: colorValue,
                         borderBottomColor: baseBorderColor,
                         borderLeftColor: baseBorderColor,
                         animation: 'spin 1s linear infinite',
-                    } }), loadingText && (_jsx("p", { className: cn(s['mt-4'], s['text-white'], s['text-lg'], s['font-semibold'], s['animate-pulse']), style: {
+                        ...styles.spinner,
+                    } }), loadingText && (_jsx("p", { className: cn(s['mt-4'], s['text-white'], s['text-lg'], s['font-semibold'], s['animate-pulse'], classNames.text), style: {
                         marginTop: '1rem',
                         color: colorValue,
                         fontSize: textFontSize,
                         fontWeight: 600,
                         animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        ...styles.text,
                     }, children: loadingText }))] }));
     };
     const renderDots = () => {
         const colorValue = getColorValue(color);
-        return (_jsx("div", { className: cn(s['flex'], s['gap-2'], s['items-center'], className), "aria-label": ariaLabel, role: "status", children: [0, 1, 2].map((i) => (_jsx("div", { className: cn(sizeConfig.dots, s['rounded-full']), style: {
+        return (_jsx("div", { className: cn(s['flex'], s['gap-2'], s['items-center'], className, classNames.container), style: styles.container, "aria-label": ariaLabel, role: "status", children: [0, 1, 2].map((i) => (_jsx("div", { className: cn(sizeConfig.dots, s['rounded-full'], classNames.dot), style: {
                     backgroundColor: colorValue,
                     animation: `bounce 1.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite`,
                     animationDelay: `${i * 0.16}s`,
                     animationFillMode: 'both',
+                    ...styles.dot,
                 } }, i))) }));
     };
     const renderBars = () => {
         const colorValue = getColorValue(color);
-        return (_jsx("div", { className: cn(s['flex'], s['gap-1'], s['items-center'], className), "aria-label": ariaLabel, role: "status", children: [0, 1, 2].map((i) => (_jsx("div", { className: cn(sizeConfig.bars, s.rounded), style: {
+        return (_jsx("div", { className: cn(s['flex'], s['gap-1'], s['items-center'], className, classNames.container), style: styles.container, "aria-label": ariaLabel, role: "status", children: [0, 1, 2].map((i) => (_jsx("div", { className: cn(sizeConfig.bars, s.rounded, classNames.bar), style: {
                     backgroundColor: colorValue,
                     borderRadius: '0.125rem',
                     animation: `pulse 1.2s ease-in-out infinite`,
                     animationDelay: `${i * 0.15}s`,
                     animationFillMode: 'both',
+                    ...styles.bar,
                 } }, i))) }));
     };
     const renderPulse = () => {
         const colorValue = getColorValue(color);
-        return (_jsx("div", { className: cn(sizeConfig.pulse, s['rounded-full'], className), style: {
+        return (_jsx("div", { className: cn(sizeConfig.pulse, s['rounded-full'], className, classNames.pulse), style: {
                 backgroundColor: colorValue,
                 animation: `pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite`,
                 animationFillMode: 'both',
+                ...styles.pulse,
             }, "aria-label": ariaLabel, role: "status" }));
     };
     const renderLoader = () => {
@@ -170,7 +210,7 @@ export const LoadingAnimateSpin = ({ classWarper = '', className = '', variant =
                 return renderSpinner();
         }
     };
-    return (_jsxs("div", { className: cn(s['absolute'], s['inset-0'], s['flex'], s['justify-center'], s['items-center'], classWarper), children: [_jsx("style", { children: `
+    return (_jsxs("div", { className: cn(s['flex'], s['justify-center'], s['items-center'], classWarper, classNames.wrapper), style: styles.wrapper, children: [_jsx("style", { children: `
         @keyframes spin {
           from {
             transform: rotate(0deg);

package/lib/src/core-components/src/components/Modal/BasicModal/modal.component.d.ts

@@ -1,6 +1,42 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export type ModalPosition = 'center' | 'top' | 'bottom';
+export interface ModalClassNames {
+    /** Custom className for the overlay */
+    overlay?: string;
+    /** Custom className for the modal container */
+    container?: string;
+    /** Custom className for the modal wrapper */
+    wrapper?: string;
+    /** Custom className for the modal content */
+    content?: string;
+    /** Custom className for the header */
+    header?: string;
+    /** Custom className for the title */
+    title?: string;
+    /** Custom className for the close button */
+    closeButton?: string;
+    /** Custom className for the body/children container */
+    body?: string;
+}
+export interface ModalStyles {
+    /** Custom style for the overlay */
+    overlay?: CSSProperties;
+    /** Custom style for the modal container */
+    container?: CSSProperties;
+    /** Custom style for the modal wrapper */
+    wrapper?: CSSProperties;
+    /** Custom style for the modal content */
+    content?: CSSProperties;
+    /** Custom style for the header */
+    header?: CSSProperties;
+    /** Custom style for the title */
+    title?: CSSProperties;
+    /** Custom style for the close button */
+    closeButton?: CSSProperties;
+    /** Custom style for the body/children container */
+    body?: CSSProperties;
+}
 export interface ModalProps {
     /** Controls modal visibility */
     visible: boolean;
@@ -54,8 +90,12 @@ export interface ModalProps {
     headerPadding?: string;
     /** Animation duration (in ms) */
     animationDuration?: number;
+    /** Custom classNames for component parts */
+    classNames?: ModalClassNames;
+    /** Custom inline styles for component parts */
+    styles?: ModalStyles;
     /** Modal content */
     children: React.ReactNode;
 }
-export declare const Modal: ({ visible, title, className, contentClassName, headerClassName, style, contentStyle, onClose, isAutoClose, autoCloseDelay, size, position, showCloseButton, closeButton, overlayOpacity, overlayColor, closeOnOverlayClick, closeOnEscape, showHeader, headerBgColor, headerTextColor, borderRadius, maxWidth, contentPadding, headerPadding, animationDuration, children, }: ModalProps) => JSX.Element | null;
+export declare const Modal: ({ visible, title, className, contentClassName, headerClassName, style, contentStyle, onClose, isAutoClose, autoCloseDelay, size, position, showCloseButton, closeButton, overlayOpacity, overlayColor, closeOnOverlayClick, closeOnEscape, showHeader, headerBgColor, headerTextColor, borderRadius, maxWidth, contentPadding, headerPadding, animationDuration, classNames, styles, children, }: ModalProps) => JSX.Element | null;
 //# sourceMappingURL=modal.component.d.ts.map

package/lib/src/core-components/src/components/Modal/BasicModal/modal.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Modal/BasicModal/modal.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AAExD,MAAM,WAAW,UAAU;IACzB,gCAAgC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,uDAAuD;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uCAAuC;IACvC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,6BAA6B;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kCAAkC;IAClC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,uCAAuC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0BAA0B;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wBAAwB;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,iXA4Bf,UAAU,KAAG,WAAW,GAAG,IAmP7B,CAAC"}
+{"version":3,"file":"modal.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Modal/BasicModal/modal.component.tsx"],"names":[],"mappings":"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"}

package/lib/src/core-components/src/components/Modal/BasicModal/modal.component.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from 'react';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const Modal = ({ visible, title = '', className = '', contentClassName = '', headerClassName = '', style = {}, contentStyle = {}, onClose, isAutoClose = false, autoCloseDelay = 1000, size = 'md', position = 'center', showCloseButton = true, closeButton, overlayOpacity = 0.5, overlayColor, closeOnOverlayClick = true, closeOnEscape = true, showHeader = true, headerBgColor, headerTextColor, borderRadius = '0.5rem', maxWidth, contentPadding = '1rem', headerPadding = '1rem', animationDuration = 300, children, }) => {
+export const Modal = ({ visible, title = '', className = '', contentClassName = '', headerClassName = '', style = {}, contentStyle = {}, onClose, isAutoClose = false, autoCloseDelay = 1000, size = 'md', position = 'center', showCloseButton = true, closeButton, overlayOpacity = 0.5, overlayColor, closeOnOverlayClick = true, closeOnEscape = true, showHeader = true, headerBgColor, headerTextColor, borderRadius = '0.5rem', maxWidth, contentPadding = '1rem', headerPadding = '1rem', animationDuration = 300, classNames = {}, styles = {}, children, }) => {
     const [showModal, setShowModal] = useState(visible);
     const [isAnimating, setIsAnimating] = useState(false);
     useEffect(() => {
@@ -58,15 +58,17 @@ export const Modal = ({ visible, title = '', className = '', contentClassName =
     const modalMaxWidth = maxWidth || (size !== 'full' ? sizeMaxWidths[size] : '95%');
     if (!showModal)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['fixed'], s['inset-0'], s['z-40'], s['bg-black']), style: {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['fixed'], s['inset-0'], s['z-40'], s['bg-black'], classNames.overlay), style: {
                     opacity: isAnimating ? overlayOpacity : 0,
                     transition: `opacity ${animationDuration}ms ease-in-out`,
                     backgroundColor: overlayColor || undefined,
-                }, onClick: handleOverlayClick }), _jsx("div", { className: cn(s['flex'], s['justify-center'], positionClasses[position], s['overflow-x-hidden'], s['overflow-y-auto'], s['fixed'], s['inset-0'], s['z-50'], s['outline-none'], s['focus:outline-none'], className), style: {
+                    ...styles.overlay,
+                }, onClick: handleOverlayClick }), _jsx("div", { className: cn(s['flex'], s['justify-center'], positionClasses[position], s['overflow-x-hidden'], s['overflow-y-auto'], s['fixed'], s['inset-0'], s['z-50'], s['outline-none'], s['focus:outline-none'], className, classNames.container), style: {
                     ...style,
                     transition: `opacity ${animationDuration}ms ease-in-out`,
                     opacity: isAnimating ? 1 : 0,
-                }, onClick: handleOverlayClick, children: _jsx("div", { className: cn(s['relative'], s['w-full'], s['my-5'], s['mx-auto']), style: {
+                    ...styles.container,
+                }, onClick: handleOverlayClick, children: _jsx("div", { className: cn(s['relative'], s['w-full'], s['my-5'], s['mx-auto'], classNames.wrapper), style: {
                         maxWidth: modalMaxWidth,
                         marginLeft: size === 'full' ? '1rem' : undefined,
                         marginRight: size === 'full' ? '1rem' : undefined,
@@ -83,18 +85,22 @@ export const Modal = ({ visible, title = '', className = '', contentClassName =
                                     : 'translateY(20px)',
                         transition: `transform ${animationDuration}ms ease-out, opacity ${animationDuration}ms ease-out`,
                         opacity: isAnimating ? 1 : 0,
-                    }, onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: cn(s['border-0'], s['shadow-xl'], s['relative'], s['flex'], s['flex-col'], s['bg-white'], s['outline-none'], s['focus:outline-none'], contentClassName), style: {
+                        ...styles.wrapper,
+                    }, onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: cn(s['border-0'], s['shadow-xl'], s['relative'], s['flex'], s['flex-col'], s['bg-white'], s['outline-none'], s['focus:outline-none'], contentClassName, classNames.content), style: {
                             borderRadius,
                             ...contentStyle,
-                        }, children: [showHeader && (_jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-between'], s['border-b'], s['border-solid'], s['border-gray-200'], headerClassName), style: {
+                            ...styles.content,
+                        }, children: [showHeader && (_jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-between'], s['border-b'], s['border-solid'], s['border-gray-200'], headerClassName, classNames.header), style: {
                                     padding: headerPadding,
                                     backgroundColor: headerBgColor,
                                     borderTopLeftRadius: borderRadius,
                                     borderTopRightRadius: borderRadius,
                                     borderBottom: title || showCloseButton ? undefined : 'none',
-                                }, children: [title && (_jsx("h3", { className: cn(s['text-xl'], s['font-semibold'], s['m-0'], s['flex-1']), style: { color: headerTextColor }, children: title })), showCloseButton && (_jsx("button", { type: "button", className: cn(s['p-1'], s['ml-4'], s['border-0'], s['bg-transparent'], s['cursor-pointer'], s['outline-none'], s['focus:outline-none'], s['transition-colors'], s['hover:bg-gray-100'], s['rounded']), onClick: handleClose, "aria-label": "Close modal", style: {
+                                    ...styles.header,
+                                }, children: [title && (_jsx("h3", { className: cn(s['text-xl'], s['font-semibold'], s['m-0'], s['flex-1'], classNames.title), style: { color: headerTextColor, ...styles.title }, children: title })), showCloseButton && (_jsx("button", { type: "button", className: cn(s['p-1'], s['ml-4'], s['border-0'], s['bg-transparent'], s['cursor-pointer'], s['outline-none'], s['focus:outline-none'], s['transition-colors'], s['hover:bg-gray-100'], s['rounded'], classNames.closeButton), onClick: handleClose, "aria-label": "Close modal", style: {
                                             marginLeft: title ? '1rem' : 0,
                                             marginRight: title ? 0 : 'auto',
+                                            ...styles.closeButton,
                                         }, children: closeButton || (_jsx("span", { className: cn(s['block'], s['text-2xl'], s['leading-none'], s['font-light']), style: {
                                                 color: headerTextColor || '#1f2937',
                                                 height: '1.5rem',
@@ -103,7 +109,8 @@ export const Modal = ({ visible, title = '', className = '', contentClassName =
                                                 alignItems: 'center',
                                                 justifyContent: 'center',
                                                 lineHeight: 1,
-                                            }, children: "\u00D7" })) }))] })), _jsx("div", { className: cn(s['flex'], s['flex-col'], s['w-full'], s['h-auto'], s['overflow-y-auto']), style: {
+                                            }, children: "\u00D7" })) }))] })), _jsx("div", { className: cn(s['flex'], s['flex-col'], s['w-full'], s['h-auto'], s['overflow-y-auto'], classNames.body), style: {
                                     padding: contentPadding,
+                                    ...styles.body,
                                 }, children: children })] }) }) })] }));
 };

package/lib/src/core-components/src/components/Modal/modal-confirm/modal-confirm.component.d.ts

@@ -1,4 +1,52 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+export interface ModalConfirmClassNames {
+    /** Custom className for the overlay */
+    overlay?: string;
+    /** Custom className for the container */
+    container?: string;
+    /** Custom className for the modal wrapper */
+    wrapper?: string;
+    /** Custom className for the content */
+    content?: string;
+    /** Custom className for the header */
+    header?: string;
+    /** Custom className for the title */
+    title?: string;
+    /** Custom className for the close button */
+    closeButton?: string;
+    /** Custom className for the body */
+    body?: string;
+    /** Custom className for the footer */
+    footer?: string;
+    /** Custom className for the cancel button */
+    cancelButton?: string;
+    /** Custom className for the submit button */
+    submitButton?: string;
+}
+export interface ModalConfirmStyles {
+    /** Custom style for the overlay */
+    overlay?: CSSProperties;
+    /** Custom style for the container */
+    container?: CSSProperties;
+    /** Custom style for the modal wrapper */
+    wrapper?: CSSProperties;
+    /** Custom style for the content */
+    content?: CSSProperties;
+    /** Custom style for the header */
+    header?: CSSProperties;
+    /** Custom style for the title */
+    title?: CSSProperties;
+    /** Custom style for the close button */
+    closeButton?: CSSProperties;
+    /** Custom style for the body */
+    body?: CSSProperties;
+    /** Custom style for the footer */
+    footer?: CSSProperties;
+    /** Custom style for the cancel button */
+    cancelButton?: CSSProperties;
+    /** Custom style for the submit button */
+    submitButton?: CSSProperties;
+}
 export interface ModalConfirmProps {
     visible: boolean;
     title?: string;
@@ -7,8 +55,12 @@ export interface ModalConfirmProps {
     closeTitle?: string;
     isClick?: boolean;
     isClose?: boolean;
+    /** Custom classNames for component parts */
+    classNames?: ModalConfirmClassNames;
+    /** Custom inline styles for component parts */
+    styles?: ModalConfirmStyles;
     onClick: () => void;
     onClose: () => void;
 }
-export declare const ModalConfirm: ({ visible, title, message, submitTitle, closeTitle, isClick, isClose, onClick, onClose, }: ModalConfirmProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalConfirm: ({ visible, title, message, submitTitle, closeTitle, isClick, isClose, classNames, styles, onClick, onClose, }: ModalConfirmProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=modal-confirm.component.d.ts.map

package/lib/src/core-components/src/components/Modal/modal-confirm/modal-confirm.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-confirm.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Modal/modal-confirm/modal-confirm.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,8FAUtB,iBAAiB,4CA0LnB,CAAC"}
+{"version":3,"file":"modal-confirm.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Modal/modal-confirm/modal-confirm.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAsB,aAAa,EAAC,MAAM,OAAO,CAAC;AAMhE,MAAM,WAAW,sBAAsB;IACrC,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,mCAAmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,qCAAqC;IACrC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,yCAAyC;IACzC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mCAAmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,kCAAkC;IAClC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,iCAAiC;IACjC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,wCAAwC;IACxC,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,gCAAgC;IAChC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kCAAkC;IAClC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,yCAAyC;IACzC,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,yCAAyC;IACzC,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,+CAA+C;IAC/C,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,kHAYtB,iBAAiB,4CAwMnB,CAAC"}

package/lib/src/core-components/src/components/Modal/modal-confirm/modal-confirm.component.js

@@ -3,19 +3,19 @@ import { useEffect, useState } from 'react';
 import { Container } from 'reactstrap';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const ModalConfirm = ({ visible = false, title = 'Confirm', message, submitTitle = 'Send', closeTitle = 'Close', isClick = true, isClose = true, onClick, onClose, }) => {
+export const ModalConfirm = ({ visible = false, title = 'Confirm', message, submitTitle = 'Send', closeTitle = 'Close', isClick = true, isClose = true, classNames = {}, styles = {}, onClick, onClose, }) => {
     const [showModal, setShowModal] = useState(visible);
     useEffect(() => {
         setShowModal(visible);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [visible]);
-    return (_jsx(_Fragment, { children: _jsx(Container, { children: showModal && (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['flex'], s['justify-center'], s['items-center'], s['overflow-x-hidden'], s['overflow-y-auto'], s['fixed'], s['inset-0'], s['z-50'], s['outline-none'], s['focus:outline-none']), children: _jsx("div", { className: cn(s['relative'], s['my-6'], s['mx-auto']), children: _jsxs("div", { className: cn(s['border-0'], s['rounded-lg'], s['shadow-lg'], s['relative'], s['flex'], s['flex-col'], s['w-fit'], s['min-w-80'], s['bg-white'], s['outline-none'], s['focus:outline-none']), children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-between'], s['p-2'], s['border-b'], s['border-solid'], s['border-gray-300'], s['rounded-t']), children: [_jsx("h3", { className: cn(s['text-2xl'], s['font-semibold']), children: title }), _jsx("button", { className: cn(s['p-1'], s['border-0'], s['text-black'], s['opacity-1'], s['ml-6'], s['float-right'], s['text-3xl'], s['leading-none'], s['font-semibold'], s['outline-none'], s['focus:outline-none']), onClick: () => {
+    return (_jsx(_Fragment, { children: _jsx(Container, { children: showModal && (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['flex'], s['justify-center'], s['items-center'], s['overflow-x-hidden'], s['overflow-y-auto'], s['fixed'], s['inset-0'], s['z-50'], s['outline-none'], s['focus:outline-none'], classNames.container), style: styles.container, children: _jsx("div", { className: cn(s['relative'], s['my-6'], s['mx-auto'], classNames.wrapper), style: styles.wrapper, children: _jsxs("div", { className: cn(s['border-0'], s['rounded-lg'], s['shadow-lg'], s['relative'], s['flex'], s['flex-col'], s['w-fit'], s['min-w-80'], s['bg-white'], s['outline-none'], s['focus:outline-none'], classNames.content), style: styles.content, children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-between'], s['p-2'], s['border-b'], s['border-solid'], s['border-gray-300'], s['rounded-t'], classNames.header), style: styles.header, children: [_jsx("h3", { className: cn(s['text-2xl'], s['font-semibold'], classNames.title), style: styles.title, children: title }), _jsx("button", { className: cn(s['p-1'], s['border-0'], s['text-black'], s['opacity-1'], s['ml-6'], s['float-right'], s['text-3xl'], s['leading-none'], s['font-semibold'], s['outline-none'], s['focus:outline-none'], classNames.closeButton), style: styles.closeButton, onClick: () => {
                                                     setShowModal(false);
                                                     onClose && onClose();
-                                                }, children: _jsx("span", { className: cn(s['text-black'], s['h-6'], s['w-6'], s['text-2xl'], s['block'], s['outline-none'], s['focus:outline-none']), children: "\u00D7" }) })] }), _jsx("div", { className: cn(s['flex'], s['p-2']), children: _jsx("div", { className: cn(s['flex']), children: typeof message === 'string' ? (_jsx("span", { className: cn(s['text-md']), children: message })) : (message) }) }), _jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-end'], s['p-2'], s['border-t'], s['border-solid'], s['border-gray-300'], s['rounded-b']), children: [isClose && (_jsx("button", { className: cn(s['text-red-500'], s['background-transparent'], s['font-bold'], s['uppercase'], s['p-2'], s['text-sm'], s['outline-none'], s['focus:outline-none'], s['mr-1'], s['mb-1']), type: "button", style: { transition: 'all .15s ease' }, onClick: () => {
+                                                }, children: _jsx("span", { className: cn(s['text-black'], s['h-6'], s['w-6'], s['text-2xl'], s['block'], s['outline-none'], s['focus:outline-none']), children: "\u00D7" }) })] }), _jsx("div", { className: cn(s['flex'], s['p-2'], classNames.body), style: styles.body, children: _jsx("div", { className: cn(s['flex']), children: typeof message === 'string' ? (_jsx("span", { className: cn(s['text-md']), children: message })) : (message) }) }), _jsxs("div", { className: cn(s['flex'], s['items-center'], s['justify-end'], s['p-2'], s['border-t'], s['border-solid'], s['border-gray-300'], s['rounded-b'], classNames.footer), style: styles.footer, children: [isClose && (_jsx("button", { className: cn(s['text-red-500'], s['background-transparent'], s['font-bold'], s['uppercase'], s['p-2'], s['text-sm'], s['outline-none'], s['focus:outline-none'], s['mr-1'], s['mb-1'], classNames.cancelButton), type: "button", style: { transition: 'all .15s ease', ...styles.cancelButton }, onClick: () => {
                                                     setShowModal(false);
                                                     onClose && onClose();
-                                                }, children: closeTitle })), isClick && (_jsx("button", { className: cn(s['bg-green-500'], s['text-white'], s['active:bg-green-600'], s['font-bold'], s['uppercase'], s['text-sm'], s['p-2'], s['rounded'], s['shadow'], s['hover:shadow-lg'], s['outline-none'], s['focus:outline-none'], s['mr-1'], s['mb-1']), type: "button", style: { transition: 'all .15s ease' }, onClick: () => {
+                                                }, children: closeTitle })), isClick && (_jsx("button", { className: cn(s['bg-green-500'], s['text-white'], s['active:bg-green-600'], s['font-bold'], s['uppercase'], s['text-sm'], s['p-2'], s['rounded'], s['shadow'], s['hover:shadow-lg'], s['outline-none'], s['focus:outline-none'], s['mr-1'], s['mb-1'], classNames.submitButton), type: "button", style: { transition: 'all .15s ease', ...styles.submitButton }, onClick: () => {
                                                     onClick();
-                                                }, children: submitTitle }))] })] }) }) }), _jsx("div", { className: cn(s['opacity-25'], s['fixed'], s['inset-0'], s['z-40'], s['bg-black']) })] })) }) }));
+                                                }, children: submitTitle }))] })] }) }) }), _jsx("div", { className: cn(s['opacity-25'], s['fixed'], s['inset-0'], s['z-40'], s['bg-black'], classNames.overlay), style: styles.overlay })] })) }) }));
 };

package/lib/src/core-components/src/components/Picker/color-picker/color-picker.component.d.ts

@@ -1,6 +1,28 @@
+import { CSSProperties } from 'react';
 import './color-picker.css';
-export declare const ColorPicker: ({ color, onChange }: {
-    color: any;
-    onChange: any;
-}) => import("react/jsx-runtime").JSX.Element;
+export interface ColorPickerClassNames {
+    /** Custom className for the picker container */
+    container?: string;
+    /** Custom className for the color swatch */
+    swatch?: string;
+    /** Custom className for the popover */
+    popover?: string;
+}
+export interface ColorPickerStyles {
+    /** Custom style for the picker container */
+    container?: CSSProperties;
+    /** Custom style for the color swatch */
+    swatch?: CSSProperties;
+    /** Custom style for the popover */
+    popover?: CSSProperties;
+}
+export interface ColorPickerProps {
+    color: string;
+    onChange: (color: string) => void;
+    /** Custom classNames for component parts */
+    classNames?: ColorPickerClassNames;
+    /** Custom inline styles for component parts */
+    styles?: ColorPickerStyles;
+}
+export declare const ColorPicker: ({ color, onChange, classNames, styles }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=color-picker.component.d.ts.map