react-restyle-components 0.4.12 → 0.4.13

package/lib/src/core-components/src/components/Selection/multi-select/multi-select.component.d.ts

@@ -1,9 +1,50 @@
+import { CSSProperties } from 'react';
+export interface MultiSelectClassNames {
+    /** Custom className for the container */
+    container?: string;
+    /** Custom className for the trigger/display span */
+    trigger?: string;
+    /** Custom className for the dropdown container */
+    dropdown?: string;
+    /** Custom className for the list */
+    list?: string;
+    /** Custom className for list items */
+    listItem?: string;
+    /** Custom className for the label */
+    label?: string;
+    /** Custom className for the checkbox */
+    checkbox?: string;
+    /** Custom className for the item text */
+    itemText?: string;
+}
+export interface MultiSelectStyles {
+    /** Custom style for the container */
+    container?: CSSProperties;
+    /** Custom style for the trigger/display span */
+    trigger?: CSSProperties;
+    /** Custom style for the dropdown container */
+    dropdown?: CSSProperties;
+    /** Custom style for the list */
+    list?: CSSProperties;
+    /** Custom style for list items */
+    listItem?: CSSProperties;
+    /** Custom style for the label */
+    label?: CSSProperties;
+    /** Custom style for the checkbox */
+    checkbox?: CSSProperties;
+    /** Custom style for the item text */
+    itemText?: CSSProperties;
+}
 interface MultiSelectProps {
     options: Array<string>;
     selectedItems?: Array<string>;
     hasError?: boolean;
+    /** Custom classNames for component parts */
+    classNames?: MultiSelectClassNames;
+    /** Custom inline styles for component parts */
+    styles?: MultiSelectStyles;
     onSelect: (item: any) => any;
 }
-export declare const MultiSelect: ({ options, selectedItems, hasError, onSelect, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: ({ options, selectedItems, hasError, classNames, styles, onSelect, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=multi-select.component.d.ts.map

package/lib/src/core-components/src/components/Selection/multi-select/multi-select.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Selection/multi-select/multi-select.component.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,oDAKrB,gBAAgB,4CA8HlB,CAAC"}
+{"version":3,"file":"multi-select.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Selection/multi-select/multi-select.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA8B,aAAa,EAAC,MAAM,OAAO,CAAC;AAIxE,MAAM,WAAW,qBAAqB;IACpC,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,qCAAqC;IACrC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,gDAAgD;IAChD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,gCAAgC;IAChC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,iCAAiC;IACjC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED,UAAU,gBAAgB;IACxB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,+CAA+C;IAC/C,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,wEAOrB,gBAAgB,4CAsIlB,CAAC"}

package/lib/src/core-components/src/components/Selection/multi-select/multi-select.component.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect, useRef } from 'react';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const MultiSelect = ({ options = [], selectedItems = [], hasError = false, onSelect, }) => {
+export const MultiSelect = ({ options = [], selectedItems = [], hasError = false, classNames = {}, styles = {}, onSelect, }) => {
     const [selectedOptions, setSelectedOptions] = useState([]);
     const [isListOpen, setIsListOpen] = useState(false);
     const useOutsideAlerter = (ref) => {
@@ -26,10 +26,10 @@ export const MultiSelect = ({ options = [], selectedItems = [], hasError = false
     return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border'], {
                 [s['border-red']]: hasError,
                 [s['border-gray-300']]: !hasError,
-            }), ref: wrapperRef, children: [_jsx("span", { className: cn(s['p-2'], s['shadow-sm']), onClick: () => {
+            }, classNames.container), style: styles.container, ref: wrapperRef, children: [_jsx("span", { className: cn(s['p-2'], s['shadow-sm'], classNames.trigger), style: styles.trigger, onClick: () => {
                         setIsListOpen(!isListOpen);
                     }, children: selectedOptions?.length > 0 ? selectedOptions?.join(',') : 'Select' }), _jsx("div", { className: cn(s['flex'], { [s['show']]: isListOpen, [s['hidden']]: !isListOpen }, s['relative']), children: options
-                        ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full']), style: { zIndex: 999 }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-1'], s['w-full'], s['bg-white'], s['shadow-md'], s['rounded-md'], s['border'], s['border-gray-200'], s['list-none'], s['m-0'], s['p-0']), children: options?.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-2']), children: _jsxs("label", { className: cn(s['flex'], s['gap-2']), children: [_jsx("input", { className: cn(s['flex'], s['h-4'], s['w-4']), type: "checkbox", checked: selectedOptions?.includes(item), onChange: () => {
+                        ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full'], classNames.dropdown), style: { zIndex: 999, ...styles.dropdown }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-1'], s['w-full'], s['bg-white'], s['shadow-md'], s['rounded-md'], s['border'], s['border-gray-200'], s['list-none'], s['m-0'], s['p-0'], classNames.list), style: styles.list, children: options?.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-2'], classNames.listItem), style: styles.listItem, children: _jsxs("label", { className: cn(s['flex'], s['gap-2'], classNames.label), style: styles.label, children: [_jsx("input", { className: cn(s['flex'], s['h-4'], s['w-4'], classNames.checkbox), style: styles.checkbox, type: "checkbox", checked: selectedOptions?.includes(item), onChange: () => {
                                                     if (selectedOptions?.includes(item)) {
                                                         setSelectedOptions(selectedOptions?.filter((e) => e != item));
                                                     }
@@ -44,6 +44,6 @@ export const MultiSelect = ({ options = [], selectedItems = [], hasError = false
                                                 }, onBlur: () => {
                                                     if (!isListOpen)
                                                         onSelect(selectedOptions);
-                                                } }), _jsx("span", { className: cn(s['flex'], s['h-4']), children: item })] }) }, index))) }) }))
+                                                } }), _jsx("span", { className: cn(s['flex'], s['h-4'], classNames.itemText), style: styles.itemText, children: item })] }) }, index))) }) }))
                         : null })] }) }));
 };

package/lib/src/core-components/src/components/Selection/single-select/single-select.component.d.ts

@@ -1,4 +1,36 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+export interface SingleSelectClassNames {
+    /** Custom className for the container */
+    container?: string;
+    /** Custom className for the trigger/display span */
+    trigger?: string;
+    /** Custom className for the icon wrapper */
+    icon?: string;
+    /** Custom className for the dropdown container */
+    dropdown?: string;
+    /** Custom className for the list */
+    list?: string;
+    /** Custom className for list items */
+    listItem?: string;
+    /** Custom className for the item text */
+    itemText?: string;
+}
+export interface SingleSelectStyles {
+    /** Custom style for the container */
+    container?: CSSProperties;
+    /** Custom style for the trigger/display span */
+    trigger?: CSSProperties;
+    /** Custom style for the icon wrapper */
+    icon?: CSSProperties;
+    /** Custom style for the dropdown container */
+    dropdown?: CSSProperties;
+    /** Custom style for the list */
+    list?: CSSProperties;
+    /** Custom style for list items */
+    listItem?: CSSProperties;
+    /** Custom style for the item text */
+    itemText?: CSSProperties;
+}
 interface SingleSelectProps {
     options: Array<any>;
     displayKey?: string;
@@ -6,8 +38,12 @@ interface SingleSelectProps {
     hasError?: boolean;
     className?: string;
     style?: React.CSSProperties;
+    /** Custom classNames for component parts */
+    classNames?: SingleSelectClassNames;
+    /** Custom inline styles for component parts */
+    styles?: SingleSelectStyles;
     onSelect: (item: any) => any;
 }
-export declare const SingleSelect: ({ options, displayKey, displayValue, hasError, className, style, onSelect, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleSelect: ({ options, displayKey, displayValue, hasError, className, style, classNames, styles, onSelect, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=single-select.component.d.ts.map

package/lib/src/core-components/src/components/Selection/single-select/single-select.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"single-select.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Selection/single-select/single-select.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAKzD,UAAU,iBAAiB;IACzB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,iFAQtB,iBAAiB,4CAsLnB,CAAC"}
+{"version":3,"file":"single-select.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Selection/single-select/single-select.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA8B,aAAa,EAAC,MAAM,OAAO,CAAC;AAKxE,MAAM,WAAW,sBAAsB;IACrC,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,qCAAqC;IACrC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,gDAAgD;IAChD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,wCAAwC;IACxC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,gCAAgC;IAChC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,4CAA4C;IAC5C,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,+CAA+C;IAC/C,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,qGAUtB,iBAAiB,4CA8LnB,CAAC"}

package/lib/src/core-components/src/components/Selection/single-select/single-select.component.js

@@ -3,7 +3,7 @@ import { useState, useEffect, useRef } from 'react';
 import { Icon } from '../../Icon/Icon';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const SingleSelect = ({ options = [], displayKey = 'title', displayValue = '', hasError = false, className = '', style = {}, onSelect, }) => {
+export const SingleSelect = ({ options = [], displayKey = 'title', displayValue = '', hasError = false, className = '', style = {}, classNames = {}, styles = {}, onSelect, }) => {
     const [value, setValue] = useState('');
     const [isListOpen, setIsListOpen] = useState(false);
     // Arrow navigation state
@@ -61,10 +61,10 @@ export const SingleSelect = ({ options = [], displayKey = 'title', displayValue
     return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border'], {
                 [s['border-red']]: hasError,
                 [s['border-gray-300']]: !hasError,
-            }, className), ref: wrapperRef, style: style, children: [_jsxs("span", { className: cn(s['p-2'], s['shadow-sm'], s['flex'], s['justify-between'], s['items-center']), onClick: () => {
+            }, className, classNames.container), ref: wrapperRef, style: { ...style, ...styles.container }, children: [_jsxs("span", { className: cn(s['p-2'], s['shadow-sm'], s['flex'], s['justify-between'], s['items-center'], classNames.trigger), onClick: () => {
                         setIsListOpen(!isListOpen);
-                    }, tabIndex: 0, style: { cursor: 'pointer' }, children: [value ? value : 'Select', _jsx("span", { children: isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: { size: 16 } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: { size: 16 } })) })] }), _jsx("div", { className: cn(s['flex'], { [s['show']]: isListOpen, [s['hidden']]: !isListOpen }, s['relative']), children: options
-                        ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full']), style: {
+                    }, tabIndex: 0, style: { cursor: 'pointer', ...styles.trigger }, children: [value ? value : 'Select', _jsx("span", { className: classNames.icon, style: styles.icon, children: isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: { size: 16 } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: { size: 16 } })) })] }), _jsx("div", { className: cn(s['flex'], { [s['show']]: isListOpen, [s['hidden']]: !isListOpen }, s['relative']), children: options
+                        ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full'], classNames.dropdown), style: {
                                 zIndex: 999,
                                 top: 'calc(100% + 0.5rem)',
                                 left: 0,
@@ -73,13 +73,15 @@ export const SingleSelect = ({ options = [], displayKey = 'title', displayValue
                                 padding: 0,
                                 animation: 'fadeIn 0.15s ease-out',
                                 transformOrigin: 'top',
-                            }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-1'], s['w-full'], s['bg-white'], s['shadow-md'], s['rounded-md'], s['border'], s['border-gray-200'], s['list-none'], s['m-0'], s['p-0']), children: options?.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-2'], highlightedIndex === index && s['bg-blue-100']), style: {
+                                ...styles.dropdown,
+                            }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-1'], s['w-full'], s['bg-white'], s['shadow-md'], s['rounded-md'], s['border'], s['border-gray-200'], s['list-none'], s['m-0'], s['p-0'], classNames.list), style: styles.list, children: options?.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-2'], highlightedIndex === index && s['bg-blue-100'], classNames.listItem), style: {
                                         cursor: 'pointer',
                                         background: highlightedIndex === index ? '#e0e7ff' : undefined,
+                                        ...styles.listItem,
                                     }, onClick: () => {
                                         setValue(item[displayKey]);
                                         onSelect(item);
                                         setIsListOpen(false);
-                                    }, onMouseEnter: () => setHighlightedIndex(index), children: _jsx("label", { className: cn(s['flex'], s['gap-2']), children: _jsx("span", { className: cn(s['flex'], s['h-4']), children: item[displayKey] }) }) }, index))) }) }))
+                                    }, onMouseEnter: () => setHighlightedIndex(index), children: _jsx("label", { className: cn(s['flex'], s['gap-2']), children: _jsx("span", { className: cn(s['flex'], s['h-4'], classNames.itemText), style: styles.itemText, children: item[displayKey] }) }) }, index))) }) }))
                         : null })] }) }));
 };

package/lib/src/core-components/src/components/Stepper2/stepper.component.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 export type StepperSize = 'sm' | 'md' | 'lg';
 export type StepperStepStatus = 'completed' | 'current' | 'pending';
 export interface StepperStep {
@@ -27,6 +27,38 @@ export interface StepperColors {
     /** Text color for pending steps */
     pendingTextColor?: string;
 }
+export interface StepperClassNames {
+    /** Custom className for the root container */
+    container?: string;
+    /** Custom className for the steps wrapper */
+    stepsWrapper?: string;
+    /** Custom className for the background line */
+    backgroundLine?: string;
+    /** Custom className for the progress line */
+    progressLine?: string;
+    /** Custom className for individual step wrapper */
+    stepWrapper?: string;
+    /** Custom className for the step circle */
+    stepCircle?: string;
+    /** Custom className for the step description */
+    stepDescription?: string;
+}
+export interface StepperStyles {
+    /** Custom style for the root container */
+    container?: CSSProperties;
+    /** Custom style for the steps wrapper */
+    stepsWrapper?: CSSProperties;
+    /** Custom style for the background line */
+    backgroundLine?: CSSProperties;
+    /** Custom style for the progress line */
+    progressLine?: CSSProperties;
+    /** Custom style for individual step wrapper */
+    stepWrapper?: CSSProperties;
+    /** Custom style for the step circle */
+    stepCircle?: CSSProperties;
+    /** Custom style for the step description */
+    stepDescription?: CSSProperties;
+}
 export interface StepperProps {
     /** Additional className for the container */
     className?: string;
@@ -52,6 +84,10 @@ export interface StepperProps {
     style?: React.CSSProperties;
     /** Orientation (horizontal is default) */
     orientation?: 'horizontal' | 'vertical';
+    /** Custom classNames for component parts */
+    classNames?: StepperClassNames;
+    /** Custom inline styles for component parts */
+    styles?: StepperStyles;
 }
-export declare const Stepper: ({ className, steps, currentStep, onStepClick, size, colors, showNumbers, lineThickness, stepSize, clickable, style, orientation, }: StepperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Stepper: ({ className, steps, currentStep, onStepClick, size, colors, showNumbers, lineThickness, stepSize, clickable, style, orientation, classNames: customClassNames, styles: customStyles, }: StepperProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=stepper.component.d.ts.map

package/lib/src/core-components/src/components/Stepper2/stepper.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Stepper2/stepper.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAEpE,MAAM,WAAW,WAAW;IAC1B,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,WAAW,aAAa;IAC5B,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;IACnC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,WAAW,CAAC,EAAE,CACZ,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,MAAM,GAAG,WAAW,EAC1B,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;IACV,mBAAmB;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,oBAAoB;IACpB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,0CAA0C;IAC1C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAqBD,eAAO,MAAM,OAAO,uIAajB,YAAY,4CA4Ld,CAAC"}
+{"version":3,"file":"stepper.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Stepper2/stepper.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAI3C,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAEpE,MAAM,WAAW,WAAW;IAC1B,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,WAAW,aAAa;IAC5B,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,yCAAyC;IACzC,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,2CAA2C;IAC3C,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,yCAAyC;IACzC,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,uCAAuC;IACvC,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,4CAA4C;IAC5C,eAAe,CAAC,EAAE,aAAa,CAAC;CACjC;AAED,MAAM,WAAW,YAAY;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;IACnC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,WAAW,CAAC,EAAE,CACZ,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,MAAM,GAAG,WAAW,EAC1B,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;IACV,mBAAmB;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,oBAAoB;IACpB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,0CAA0C;IAC1C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,4CAA4C;IAC5C,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAqBD,eAAO,MAAM,OAAO,2LAejB,YAAY,4CAoMd,CAAC"}

package/lib/src/core-components/src/components/Stepper2/stepper.component.js

@@ -15,12 +15,12 @@ const SIZE_CONFIG = {
     md: { stepSize: 32, fontSize: '0.75rem', padding: 4 },
     lg: { stepSize: 40, fontSize: '0.875rem', padding: 6 },
 };
-export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, size = 'md', colors = {}, showNumbers = true, lineThickness = 2, stepSize, clickable = true, style, orientation = 'horizontal', }) => {
+export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, size = 'md', colors = {}, showNumbers = true, lineThickness = 2, stepSize, clickable = true, style, orientation = 'horizontal', classNames: customClassNames = {}, styles: customStyles = {}, }) => {
     const mergedColors = { ...DEFAULT_COLORS, ...colors };
     const sizeConfig = SIZE_CONFIG[size];
     const finalStepSize = stepSize || sizeConfig.stepSize;
     const linePosition = sizeConfig.padding + finalStepSize / 2;
-    const finalClass = cn(className, s['w-full'], s['px-4'], s['sm:px-8']);
+    const finalClass = cn(className, s['w-full'], s['px-4'], s['sm:px-8'], customClassNames.container);
     // Helper to get step info
     const getStepInfo = (step, index) => {
         if (typeof step === 'string') {
@@ -93,11 +93,12 @@ export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, s
         }
         return (_jsxs("div", { style: {
                 left: steps.length > 1 ? `${(index / (steps.length - 1)) * 100}%` : '50%',
-            }, className: cn(s['absolute']), children: [_jsx("span", { className: cn(stepClass, s['font-arimaRegular']), style: stepStyles, onClick: () => {
+                ...customStyles.stepWrapper,
+            }, className: cn(s['absolute'], customClassNames.stepWrapper), children: [_jsx("span", { className: cn(stepClass, s['font-arimaRegular'], customClassNames.stepCircle), style: { ...stepStyles, ...customStyles.stepCircle }, onClick: () => {
                         if (clickable && onStepClick) {
                             onStepClick(stepNumber, step, index);
                         }
-                    }, children: showNumbers ? stepNumber : stepInfo.label }), !showNumbers && stepInfo.description && (_jsx("div", { style: {
+                    }, children: showNumbers ? stepNumber : stepInfo.label }), !showNumbers && stepInfo.description && (_jsx("div", { className: customClassNames.stepDescription, style: {
                         position: 'absolute',
                         top: `${finalStepSize + 8}px`,
                         left: '50%',
@@ -107,6 +108,7 @@ export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, s
                             ? mergedColors.activeColor
                             : mergedColors.pendingTextColor,
                         whiteSpace: 'nowrap',
+                        ...customStyles.stepDescription,
                     }, children: stepInfo.description }))] }, `step-${index}-${stepInfo.label}`));
     });
     // Calculate progress width based on current step
@@ -114,21 +116,24 @@ export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, s
         ? `${((currentStep - 1) / (steps.length - 1)) * 100}%`
         : '0%';
     const containerHeight = sizeConfig.padding * 2 + finalStepSize;
-    return (_jsx("div", { className: finalClass, style: style, children: _jsxs("div", { className: cn(s['w-full'], s['relative']), style: {
+    return (_jsx("div", { className: finalClass, style: { ...style, ...customStyles.container }, children: _jsxs("div", { className: cn(s['w-full'], s['relative'], customClassNames.stepsWrapper), style: {
                 minHeight: `${containerHeight}px`,
                 paddingTop: `${sizeConfig.padding}px`,
-            }, children: [_jsx("div", { className: cn(s['absolute'], s['left-0'], s['w-full'], s['transition-width'], s['ease-in-out'], s['duration-500']), style: {
+                ...customStyles.stepsWrapper,
+            }, children: [_jsx("div", { className: cn(s['absolute'], s['left-0'], s['w-full'], s['transition-width'], s['ease-in-out'], s['duration-500'], customClassNames.backgroundLine), style: {
                         top: `${linePosition}px`,
                         height: `${lineThickness}px`,
                         backgroundColor: mergedColors.lineColor,
                         transform: 'translateY(-50%)',
                         zIndex: 0,
-                    } }), _jsx("div", { className: cn(s['absolute'], s['left-0'], s['transition-width'], s['ease-in-out'], s['duration-500']), style: {
+                        ...customStyles.backgroundLine,
+                    } }), _jsx("div", { className: cn(s['absolute'], s['left-0'], s['transition-width'], s['ease-in-out'], s['duration-500'], customClassNames.progressLine), style: {
                         top: `${linePosition}px`,
                         width: progressWidth,
                         height: `${lineThickness}px`,
                         backgroundColor: mergedColors.completedColor,
                         transform: 'translateY(-50%)',
                         zIndex: 1,
+                        ...customStyles.progressLine,
                     } }), _jsx("div", { className: cn(s['relative'], s['sm:block']), style: { zIndex: 2 }, children: Steps })] }) }));
 };

package/lib/src/core-components/src/components/Tabs/tabs.component.d.ts

@@ -1,9 +1,35 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+export interface TabsClassNames {
+    /** Custom className for the root container */
+    container?: string;
+    /** Custom className for the tabs header container */
+    tabsHeader?: string;
+    /** Custom className for individual tab button */
+    tabButton?: string;
+    /** Custom className for active tab button */
+    activeTabButton?: string;
+    /** Custom className for the content container */
+    contentContainer?: string;
+}
+export interface TabsStyles {
+    /** Custom style for the root container */
+    container?: CSSProperties;
+    /** Custom style for the tabs header container */
+    tabsHeader?: CSSProperties;
+    /** Custom style for individual tab button */
+    tabButton?: CSSProperties;
+    /** Custom style for active tab button */
+    activeTabButton?: CSSProperties;
+    /** Custom style for the content container */
+    contentContainer?: CSSProperties;
+}
 interface TabProps {
     title: string;
     children: React.JSX.Element;
+    className?: string;
+    style?: CSSProperties;
 }
-export declare const Tab: ({ title, children }: TabProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tab: ({ title, children, className, style }: TabProps) => import("react/jsx-runtime").JSX.Element;
 export interface TabsProps {
     options: Array<{
         title: string;
@@ -12,7 +38,11 @@ export interface TabsProps {
     }>;
     onSelect?: (item: any, index: number) => void;
     children: React.ReactNode;
+    /** Custom classNames for component parts */
+    classNames?: TabsClassNames;
+    /** Custom inline styles for component parts */
+    styles?: TabsStyles;
 }
-export declare const Tabs: ({ options, onSelect, children }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ options, onSelect, children, classNames, styles }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=tabs.component.d.ts.map

package/lib/src/core-components/src/components/Tabs/tabs.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Tabs/tabs.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,GAAG,wBAAuB,QAAQ,4CAM9C,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;QAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,IAAI,oCAAmC,SAAS,4CAqD5D,CAAC"}
+{"version":3,"file":"tabs.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Tabs/tabs.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAW,aAAa,EAAC,MAAM,OAAO,CAAC;AAIrD,MAAM,WAAW,cAAc;IAC7B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,UAAU;IACzB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,iDAAiD;IACjD,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,yCAAyC;IACzC,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,aAAa,CAAC;CAClC;AAED,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,GAAG,0CAAyC,QAAQ,4CAMhE,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;QAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,eAAO,MAAM,IAAI,wDAAiE,SAAS,4CA6D1F,CAAC"}

package/lib/src/core-components/src/components/Tabs/tabs.component.js

@@ -2,18 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useState } from 'react';
 import s from '../../tc.module.css';
 import { cn } from '../../utils';
-export const Tab = ({ title, children }) => {
-    return (_jsx("div", { className: cn(s.flex), children: children }, title));
+export const Tab = ({ title, children, className, style }) => {
+    return (_jsx("div", { className: cn(s.flex, className), style: style, children: children }, title));
 };
-export const Tabs = ({ options, onSelect, children }) => {
+export const Tabs = ({ options, onSelect, children, classNames = {}, styles = {} }) => {
     const [activeTab, setActiveTab] = useState(0);
     const [selected, setSelected] = useState(options[0].title);
     const tabs = React.Children.toArray(children).filter((child) => React.isValidElement(child) && child.type === Tab);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s.flex, s['flex-col'], s['w-full']), children: [_jsx("div", { className: cn(s.flex, s['border-b']), children: options?.map((tab, index) => (_jsx("button", { type: "button", className: cn(s['py-2'], s['px-4'], s['mr-1'], s['border-none'], s['rounded-t-md'], s['shadow-inner'], s['cursor-pointer'], activeTab === index && s['bg-blue-500'], activeTab === index && s['border-none'], activeTab === index && s['text-white']), onClick: () => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s.flex, s['flex-col'], s['w-full'], classNames.container), style: styles.container, children: [_jsx("div", { className: cn(s.flex, s['border-b'], classNames.tabsHeader), style: styles.tabsHeader, children: options?.map((tab, index) => (_jsx("button", { type: "button", className: cn(s['py-2'], s['px-4'], s['mr-1'], s['border-none'], s['rounded-t-md'], s['shadow-inner'], s['cursor-pointer'], activeTab === index && s['bg-blue-500'], activeTab === index && s['border-none'], activeTab === index && s['text-white'], classNames.tabButton, activeTab === index && classNames.activeTabButton), style: {
+                            ...styles.tabButton,
+                            ...(activeTab === index ? styles.activeTabButton : {}),
+                        }, onClick: () => {
                             setSelected(tab?.title);
                             onSelect && onSelect(tab, index);
                             !tab.inActive && setActiveTab(index);
-                        }, disabled: tab.inActive, children: tab.title }, index))) }), _jsx("div", { className: cn(s['p-2'], s.border, s['border-solid'], s['border-slate-600'], s['rounded-b-md']), children: options[activeTab]?.content
+                        }, disabled: tab.inActive, children: tab.title }, index))) }), _jsx("div", { className: cn(s['p-2'], s.border, s['border-solid'], s['border-slate-600'], s['rounded-b-md'], classNames.contentContainer), style: styles.contentContainer, children: options[activeTab]?.content
                         ? options[activeTab]?.content
                         : tabs[options?.findIndex((item) => item.title === selected)] })] }) }));
 };

package/lib/src/core-components/src/components/Tags1/Tags.component.d.ts

@@ -1,3 +1,44 @@
+import { CSSProperties } from 'react';
+export interface TagsClassNames {
+    /** Custom className for the root container */
+    container?: string;
+    /** Custom className for the label */
+    label?: string;
+    /** Custom className for the tags container (input wrapper) */
+    tagsContainer?: string;
+    /** Custom className for individual tag */
+    tag?: string;
+    /** Custom className for the tag text */
+    tagText?: string;
+    /** Custom className for the remove button */
+    removeButton?: string;
+    /** Custom className for the input field */
+    input?: string;
+    /** Custom className for the helper/error text container */
+    helperText?: string;
+    /** Custom className for error message */
+    errorMessage?: string;
+}
+export interface TagsStyles {
+    /** Custom style for the root container */
+    container?: CSSProperties;
+    /** Custom style for the label */
+    label?: CSSProperties;
+    /** Custom style for the tags container (input wrapper) */
+    tagsContainer?: CSSProperties;
+    /** Custom style for individual tag */
+    tag?: CSSProperties;
+    /** Custom style for the tag text */
+    tagText?: CSSProperties;
+    /** Custom style for the remove button */
+    removeButton?: CSSProperties;
+    /** Custom style for the input field */
+    input?: CSSProperties;
+    /** Custom style for the helper/error text container */
+    helperText?: CSSProperties;
+    /** Custom style for error message */
+    errorMessage?: CSSProperties;
+}
 export interface TagsProps {
     /** Array of initial tags */
     defaultTags?: string[];
@@ -21,6 +62,10 @@ export interface TagsProps {
     tagVariant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
     /** Size of tags */
     size?: 'sm' | 'md' | 'lg';
+    /** Custom classNames for component parts */
+    classNames?: TagsClassNames;
+    /** Custom inline styles for component parts */
+    styles?: TagsStyles;
     /** Callback when tags change */
     onChange?: (tags: string[]) => void;
     /** Callback when input loses focus */
@@ -30,5 +75,5 @@ export interface TagsProps {
     /** Callback when a tag is removed */
     onTagRemove?: (tag: string, index: number) => void;
 }
-export declare const Tags: ({ defaultTags, placeholder, maxTags, disabled, className, label, hasError, errorMessage, removable, tagVariant, size, onChange, onBlur, onTagAdd, onTagRemove, }: TagsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tags: ({ defaultTags, placeholder, maxTags, disabled, className, label, hasError, errorMessage, removable, tagVariant, size, classNames, styles, onChange, onBlur, onTagAdd, onTagRemove, }: TagsProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tags.component.d.ts.map

package/lib/src/core-components/src/components/Tags1/Tags.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tags.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Tags1/Tags.component.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,SAAS;IACxB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,UAAU,CAAC,EACP,SAAS,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;IACb,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAClC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,qCAAqC;IACrC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,IAAI,qKAgBd,SAAS,4CAoRX,CAAC"}
+{"version":3,"file":"Tags.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Tags1/Tags.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAkC,aAAa,EAAC,MAAM,OAAO,CAAC;AAI5E,MAAM,WAAW,cAAc;IAC7B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,sCAAsC;IACtC,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,yCAAyC;IACzC,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,uCAAuC;IACvC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,uDAAuD;IACvD,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,qCAAqC;IACrC,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B;AAED,MAAM,WAAW,SAAS;IACxB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,UAAU,CAAC,EACP,SAAS,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;IACb,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,4CAA4C;IAC5C,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAClC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,qCAAqC;IACrC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,IAAI,yLAkBd,SAAS,4CAgSX,CAAC"}

package/lib/src/core-components/src/components/Tags1/Tags.component.js

@@ -2,7 +2,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState, useRef } from 'react';
 import s from '../../tc.module.css';
 import { cn } from '../../utils';
-export const Tags = ({ defaultTags = [], placeholder = 'Type and press Enter to add tags...', maxTags, disabled = false, className = '', label, hasError = false, errorMessage, removable = true, tagVariant = 'default', size = 'md', onChange, onBlur, onTagAdd, onTagRemove, }) => {
+export const Tags = ({ defaultTags = [], placeholder = 'Type and press Enter to add tags...', maxTags, disabled = false, className = '', label, hasError = false, errorMessage, removable = true, tagVariant = 'default', size = 'md', classNames = {}, styles = {}, onChange, onBlur, onTagAdd, onTagRemove, }) => {
     const [tags, setTags] = useState(defaultTags);
     const [inputValue, setInputValue] = useState('');
     const [isFocused, setIsFocused] = useState(false);
@@ -100,7 +100,7 @@ export const Tags = ({ defaultTags = [], placeholder = 'Type and press Enter to
             inputRef.current?.focus();
         }
     };
-    return (_jsxs("div", { className: cn(s.flex, s['flex-col'], s['w-full'], className), children: [label && (_jsxs("label", { className: cn(s['text-sm'], s['font-medium'], s['mb-2'], hasError ? s['text-red-600'] : s['text-gray-700']), children: [label, maxTags && (_jsxs("span", { className: cn(s['text-xs'], s['text-gray-500'], s['ml-2']), children: ["(", tags.length, "/", maxTags, ")"] }))] })), _jsxs("div", { onClick: handleContainerClick, className: cn(s['min-h-10'], s['w-full'], s['border'], s['rounded-md'], s['bg-white'], s['flex'], s['flex-wrap'], s['gap-2'], s['p-2'], s['cursor-text'], s['transition-colors'], 
+    return (_jsxs("div", { className: cn(s.flex, s['flex-col'], s['w-full'], className, classNames.container), style: styles.container, children: [label && (_jsxs("label", { className: cn(s['text-sm'], s['font-medium'], s['mb-2'], hasError ? s['text-red-600'] : s['text-gray-700'], classNames.label), style: styles.label, children: [label, maxTags && (_jsxs("span", { className: cn(s['text-xs'], s['text-gray-500'], s['ml-2']), children: ["(", tags.length, "/", maxTags, ")"] }))] })), _jsxs("div", { onClick: handleContainerClick, className: cn(s['min-h-10'], s['w-full'], s['border'], s['rounded-md'], s['bg-white'], s['flex'], s['flex-wrap'], s['gap-2'], s['p-2'], s['cursor-text'], s['transition-colors'], 
                 // Focus styles
                 isFocused &&
                     !hasError &&
@@ -110,9 +110,9 @@ export const Tags = ({ defaultTags = [], placeholder = 'Type and press Enter to
                 // Disabled styles
                 disabled && s['bg-gray-50'] + ' ' + s['cursor-not-allowed'], 
                 // Hover styles
-                !disabled && s['hover:border-gray-400']), children: [tags.map((tag, index) => (_jsxs("span", { className: cn(s['flex'], s['inline-flex'], s['items-center'], s['border'], s['rounded-full'], s['font-medium'], s['transition-colors'], s['items-center'], sizeStyles[size].tag, tagVariants[tagVariant], disabled && s['opacity-60']), children: [_jsx("span", { className: cn(s['truncate'], s['max-w-32']), children: tag }), removable && !disabled && (_jsx("button", { type: "button", onClick: (e) => {
+                !disabled && s['hover:border-gray-400'], classNames.tagsContainer), style: styles.tagsContainer, children: [tags.map((tag, index) => (_jsxs("span", { className: cn(s['flex'], s['inline-flex'], s['items-center'], s['border'], s['rounded-full'], s['font-medium'], s['transition-colors'], s['items-center'], sizeStyles[size].tag, tagVariants[tagVariant], disabled && s['opacity-60'], classNames.tag), style: styles.tag, children: [_jsx("span", { className: cn(s['truncate'], s['max-w-32'], classNames.tagText), style: styles.tagText, children: tag }), removable && !disabled && (_jsx("button", { type: "button", onClick: (e) => {
                                     e.stopPropagation();
                                     removeTag(index);
-                                }, className: cn(s['ml-2'], s['flex-shrink-0'], s['rounded-full'], s['hover:bg-black'], s['hover:bg-opacity-10'], s['transition-colors'], s['focus:outline-none'], s['focus:ring-2'], s['focus:ring-offset-1'], s['focus:ring-gray-500']), "aria-label": `Remove ${tag} tag`, children: _jsx("svg", { className: cn(sizeStyles[size].removeBtn), fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) }))] }, `${tag}-${index}`))), (!maxTags || tags.length < maxTags) && (_jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: handleInputBlur, placeholder: tags.length === 0 ? placeholder : '', disabled: disabled, className: cn(s['flex-1'], s['min-w-32'], s['border-0'], s['outline-none'], s['bg-transparent'], sizeStyles[size].input.replace(s['p-3'], s['p-1']), // Adjust padding for input inside container
-                        disabled && s['cursor-not-allowed']), "aria-label": "Add new tag" }))] }), (errorMessage || maxTags) && (_jsxs("div", { className: cn(s['mt-1'], s['flex'], s['justify-between'], s['text-xs']), children: [errorMessage && hasError && (_jsx("span", { className: cn(s['text-red-600']), children: errorMessage })), maxTags && !hasError && (_jsxs("span", { className: cn(s['text-gray-500'], s['ml-auto']), children: [tags.length, "/", maxTags, " tags"] }))] })), !hasError && !errorMessage && (_jsx("p", { className: cn(s['mt-1'], s['text-xs'], s['text-gray-500']), children: "Press Enter to add tags, Backspace to remove last tag" }))] }));
+                                }, className: cn(s['ml-2'], s['flex-shrink-0'], s['rounded-full'], s['hover:bg-black'], s['hover:bg-opacity-10'], s['transition-colors'], s['focus:outline-none'], s['focus:ring-2'], s['focus:ring-offset-1'], s['focus:ring-gray-500'], classNames.removeButton), style: styles.removeButton, "aria-label": `Remove ${tag} tag`, children: _jsx("svg", { className: cn(sizeStyles[size].removeBtn), fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) }))] }, `${tag}-${index}`))), (!maxTags || tags.length < maxTags) && (_jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: handleInputBlur, placeholder: tags.length === 0 ? placeholder : '', disabled: disabled, className: cn(s['flex-1'], s['min-w-32'], s['border-0'], s['outline-none'], s['bg-transparent'], sizeStyles[size].input.replace(s['p-3'], s['p-1']), // Adjust padding for input inside container
+                        disabled && s['cursor-not-allowed'], classNames.input), style: styles.input, "aria-label": "Add new tag" }))] }), (errorMessage || maxTags) && (_jsxs("div", { className: cn(s['mt-1'], s['flex'], s['justify-between'], s['text-xs'], classNames.helperText), style: styles.helperText, children: [errorMessage && hasError && (_jsx("span", { className: cn(s['text-red-600'], classNames.errorMessage), style: styles.errorMessage, children: errorMessage })), maxTags && !hasError && (_jsxs("span", { className: cn(s['text-gray-500'], s['ml-auto']), children: [tags.length, "/", maxTags, " tags"] }))] })), !hasError && !errorMessage && (_jsx("p", { className: cn(s['mt-1'], s['text-xs'], s['text-gray-500'], classNames.helperText), style: styles.helperText, children: "Press Enter to add tags, Backspace to remove last tag" }))] }));
 };

package/lib/src/core-components/src/components/Tooltip/tooltip.component.d.ts

@@ -1,10 +1,29 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { PropsWithChildren } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { TooltipProps } from './types';
+export interface TooltipClassNames {
+    /** Custom className for the trigger wrapper */
+    trigger?: string;
+    /** Custom className for the content container */
+    content?: string;
+    /** Custom className for the arrow */
+    arrow?: string;
+}
+export interface TooltipStyles {
+    /** Custom style for the trigger wrapper */
+    trigger?: CSSProperties;
+    /** Custom style for the content container */
+    content?: CSSProperties;
+    /** Custom style for the arrow */
+    arrow?: CSSProperties;
+}
 /**
  *  The `Tooltip` must be nested somewhere inside the `TooltipProvider` in the component tree.
  */
-export declare const Tooltip: ({ align, side, children, content, avoidCollisions, alignOffset, sideOffset, disabled, delay, className, }: PropsWithChildren<TooltipProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ align, side, children, content, avoidCollisions, alignOffset, sideOffset, disabled, delay, className, classNames, styles, }: React.PropsWithChildren<TooltipProps & {
+    classNames?: TooltipClassNames | undefined;
+    styles?: TooltipStyles | undefined;
+}>) => import("react/jsx-runtime").JSX.Element;
 export declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
 //# sourceMappingURL=tooltip.component.d.ts.map

package/lib/src/core-components/src/components/Tooltip/tooltip.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Tooltip/tooltip.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAErC;;GAEG;AACH,eAAO,MAAM,OAAO,8GAWjB,kBAAkB,YAAY,CAAC,4CA4BjC,CAAC;AACF,eAAO,MAAM,eAAe,iDAA4B,CAAC"}
+{"version":3,"file":"tooltip.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Tooltip/tooltip.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAErC,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,iCAAiC;IACjC,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO;;;8CA8CnB,CAAC;AACF,eAAO,MAAM,eAAe,iDAA4B,CAAC"}

package/lib/src/core-components/src/components/Tooltip/tooltip.component.js

@@ -3,8 +3,8 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 /**
  *  The `Tooltip` must be nested somewhere inside the `TooltipProvider` in the component tree.
  */
-export const Tooltip = ({ align = 'center', side = 'bottom', children, content, avoidCollisions = true, alignOffset = 0, sideOffset = 5, disabled = false, delay = 400, className, }) => {
+export const Tooltip = ({ align = 'center', side = 'bottom', children, content, avoidCollisions = true, alignOffset = 0, sideOffset = 5, disabled = false, delay = 400, className, classNames = {}, styles = {}, }) => {
     const isChildrenString = typeof children === 'string';
-    return (_jsxs(TooltipPrimitive.Root, { delayDuration: delay, children: [_jsx(TooltipPrimitive.Trigger, { asChild: !isChildrenString, disabled: disabled, className: className, children: children }), _jsx(TooltipPrimitive.Portal, { children: !disabled && content && (_jsxs(TooltipPrimitive.Content, { className: className, avoidCollisions: avoidCollisions, side: side, align: align, alignOffset: alignOffset, sideOffset: sideOffset, children: [content, _jsx(TooltipPrimitive.Arrow, { className: className })] })) })] }));
+    return (_jsxs(TooltipPrimitive.Root, { delayDuration: delay, children: [_jsx(TooltipPrimitive.Trigger, { asChild: !isChildrenString, disabled: disabled, className: className || classNames.trigger, style: styles.trigger, children: children }), _jsx(TooltipPrimitive.Portal, { children: !disabled && content && (_jsxs(TooltipPrimitive.Content, { className: className || classNames.content, style: styles.content, avoidCollisions: avoidCollisions, side: side, align: align, alignOffset: alignOffset, sideOffset: sideOffset, children: [content, _jsx(TooltipPrimitive.Arrow, { className: classNames.arrow, style: styles.arrow })] })) })] }));
 };
 export const TooltipProvider = TooltipPrimitive.Provider;