react-restyle-components 0.2.38 → 0.2.39

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.2.37",
+  "version": "0.2.38",
   "private": false,
   "description": "Easy use restyle components",
   "author": {
@@ -71,6 +71,7 @@
     "@storybook/addon-interactions": "^8.0.6",
     "@storybook/addon-links": "^8.0.6",
     "@storybook/addon-onboarding": "^8.0.6",
+    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-themes": "^8.4.7",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
     "@storybook/blocks": "^8.0.6",
@@ -92,7 +93,6 @@
     "husky": "^7.0.4",
     "jest": "^29.7.0",
     "lint-staged": "^12.4.0",
-    "postcss": "^8.4.49",
     "postcss-loader": "^8.1.1",
     "prettier": "^3.3.3",
     "react-router-dom": "^7.0.2",

package/lib/src/App.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import './App.css';
-import { Tab, Tabs } from './core-components';
+import { Tab, Tabs } from './core-components/atoms/tabs/_tabs.component';
 function App() {
     const [color, setColor] = useState('#aabbcc');
     return (React.createElement("div", { className: "flex flex-col gap-4 p-4" },

package/lib/src/core-components/atoms/button/Button.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TooltipProvider } from '../tooltip/tooltip.component';
-import { Button } from './button.component';
+import { Button } from './_button.component';
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
     title: 'Design System/Atoms/Button',

package/lib/src/core-components/atoms/button/_button.component.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ButtonProps } from './Button.types';
+import '../../../tc.module.css';
+/**
+ * It's a `<button>button</button>`. Pass in regular button props such as onClick as well as any of the props defined here.
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/lib/src/core-components/atoms/button/_button.component.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { forwardRef } from 'react';
+import { Tooltip } from '../tooltip/tooltip.component';
+import '../../../tc.module.css';
+/**
+ * It's a `<button>button</button>`. Pass in regular button props such as onClick as well as any of the props defined here.
+ */
+export const Button = forwardRef(({ variant = 'solid', tooltip, disabled = false, type = 'button', className, children, ...args }, ref) => {
+    const buttonColorClass = variant === 'solid'
+        ? 'text-white bg-[#007BFF] hover:bg-[#007BFF] hover:shadow-lg text-white'
+        : 'dark:text-white  text-black border border-gray-400 hover:shadow-lg';
+    const button = (React.createElement("button", { ref: ref, ...args, className: `${className} rounded-100px px-3 py-1  text-md ${buttonColorClass} pt-2 pb-2 font-nunitoSansRegular ${disabled ? 'opacity-50' : 'opacity-100'}`, type: type, disabled: disabled }, children));
+    if (tooltip) {
+        return React.createElement(Tooltip, { content: tooltip }, button);
+    }
+    else {
+        return button;
+    }
+});
+Button.displayName = 'Button';

package/lib/src/core-components/atoms/button/button.component.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ButtonProps } from './Button.types';
-import '../../../tc.css';
 /**
  * It's a `<button>button</button>`. Pass in regular button props such as onClick as well as any of the props defined here.
  */

package/lib/src/core-components/atoms/button/button.component.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import { forwardRef } from 'react';
 import { Tooltip } from '../tooltip/tooltip.component';
-import '../../../tc.css';
+import s from '../../../tc.module.css';
+import { cn } from '../../../core-utils';
 /**
  * It's a `<button>button</button>`. Pass in regular button props such as onClick as well as any of the props defined here.
  */
 export const Button = forwardRef(({ variant = 'solid', tooltip, disabled = false, type = 'button', className, children, ...args }, ref) => {
     const buttonColorClass = variant === 'solid'
-        ? 'text-white bg-[#007BFF] hover:bg-[#007BFF] hover:shadow-lg text-white'
-        : 'dark:text-white  text-black border border-gray-400 hover:shadow-lg';
-    const button = (React.createElement("button", { ref: ref, ...args, className: `${className} rounded-100px px-3 py-1  text-md ${buttonColorClass} pt-2 pb-2 font-nunitoSansRegular ${disabled ? 'opacity-50' : 'opacity-100'}`, type: type, disabled: disabled }, children));
+        ? cn(s['text-white'], s['bg-[#007BFF]'], s['hover:bg-[#007BFF]'], s['hover:shadow-lg'], s['text-white'])
+        : cn(s['dark:text-white'], s['text-black'], s['border'], s['border-gray-400'], s['hover:shadow-lg']);
+    const button = (React.createElement("button", { ref: ref, ...args, className: cn(s['rounded-100px'], s['px-3'], s['py-1'], s['text-md'], buttonColorClass, s['pt-2'], s['pb-2'], s['font-nunitoSansRegular'], disabled ? s['opacity-50'] : s['opacity-100'], className), type: type, disabled: disabled }, children));
     if (tooltip) {
         return React.createElement(Tooltip, { content: tooltip }, button);
     }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ReactNode } from 'react';
-import '../../../../tc.css';
+import '../../../../tc.module.css';
 export declare const ButtonGroup: ({ children, orientation, className, }: {
     children: ReactNode;
     orientation?: "horizontal" | "vertical" | undefined;

package/lib/src/core-components/atoms/button/buttonGroup/buttonGroup.component.js

@@ -1,3 +1,3 @@
 import React from 'react';
-import '../../../../tc.css';
+import '../../../../tc.module.css';
 export const ButtonGroup = ({ children, orientation = 'horizontal', className, }) => (React.createElement("div", { className: `flex ${orientation == 'horizontal' ? 'flex-row' : 'flex-col'} w-fit gap-2 ${className}` }, children));

package/lib/src/core-components/atoms/check-box/checkBox.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface CheckBoxProps {
     title: string;
     data: Array<any>;

package/lib/src/core-components/atoms/check-box/checkBox.component.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 import { UnCheckbox, CheckedBox } from '../../../library/assets/svg';
 import { InputWrapper } from '../form/form.component';
 export const CheckBox = ({ title = 'Banks', data = [{ title: 'SBI Bank', checked: false }], className, onChange, }) => {

package/lib/src/core-components/atoms/date-picker/date-picker.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 import 'react-datepicker/dist/react-datepicker.css';
 interface DatePickerProps {
     title: string;

package/lib/src/core-components/atoms/date-picker/date-picker.component.js

@@ -1,5 +1,5 @@
 import React, { useState, forwardRef } from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { DatePickerSvg } from '../../../library/assets/svg';

package/lib/src/core-components/atoms/form/form.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface LabelProps {
     htmlFor: string;
     hasError?: boolean;

package/lib/src/core-components/atoms/form/form.component.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const Label = (props) => (React.createElement(React.Fragment, null,
     React.createElement("label", { htmlFor: props.htmlFor, className: `${props.hasError ? 'text-red-400' : 'text-current'} block text-3xs font-medium  mb-1`, style: { ...props.style } }, props.children)));
 export const InputWrapper = (props) => (React.createElement("div", { className: props.className, ref: props.ref },

package/lib/src/core-components/atoms/grid/grid.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface GridProps {
     cols?: number;
     children?: React.ReactNode;

package/lib/src/core-components/atoms/grid/grid.component.js

@@ -1,3 +1,3 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const Grid = (props) => (React.createElement("div", { className: `xl:grid sm:inline-block grid-cols-${props.cols || 1} gap-3` }, props.children));

package/lib/src/core-components/atoms/icons/icons.component.d.ts

@@ -1,5 +1,5 @@
 import { IconBaseProps } from 'react-icons/lib';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface IconProps {
     nameIcon: string;
     propsIcon?: IconBaseProps;

package/lib/src/core-components/atoms/icons/icons.component.js

@@ -2,7 +2,7 @@ import React, { Suspense } from 'react';
 import _ from 'lodash';
 import { Tooltip } from '../tooltip/tooltip.component';
 import loadable from '@loadable/component';
-import '../../../tc.css';
+import '../../../tc.module.css';
 let lib = 'md';
 export const Icon = ({ nameIcon, propsIcon, tooltip = '', isDisable = false, onClick, }) => {
     try {

package/lib/src/core-components/atoms/input/input-otp.component.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import './input-otp.styles.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface PinInputGridProps {
     title?: string;
     hasError?: boolean;

package/lib/src/core-components/atoms/input/input-otp.component.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React, { useEffect, useRef } from 'react';
 import './input-otp.styles.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const InputOtp = ({ className, pin, onPinChanged, }) => {
     const pinLength = 6;
     const Pin_Min_Value = 0;

package/lib/src/core-components/atoms/input/input-pin.component.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import './input.styles.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface PinInputGridProps {
     title: string;
     hasError?: any;

package/lib/src/core-components/atoms/input/input-pin.component.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import React, { useRef, useState } from 'react';
 import './input.styles.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const InputPin = ({ title, className, defaultPin, errorMsg, defaultMsg, hasError, onPinChanged, }) => {
     const pin = useRef([]);
     const [reload, setReload] = useState(false);

package/lib/src/core-components/atoms/input/input.component.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import './input.styles.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface InputProps {
     title: string;
     defaultValue: string;

package/lib/src/core-components/atoms/input/input.component.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React, { useState } from 'react';
 import './input.styles.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const Input = ({ title, defaultValue, className, disable, hasError, errorMsg, defaultMsg, inputStyle, autoComplete, maxlength = 40, onChange, onBlur, }) => {
     const [value, setValue] = useState(defaultValue);
     const onKeyUpValue = (event) => {

package/lib/src/core-components/atoms/input-dropdown/input-dropdown.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface InputDropdownProps {
     title: string;
     items: Array<string>;

package/lib/src/core-components/atoms/input-dropdown/input-dropdown.component.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { UpArrow, DownArrow } from '../../../library/assets/svg';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const InputDropdown = ({ items, className, hasError, title, onChange, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState('');

package/lib/src/core-components/atoms/list/list.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface ListProps {
     direction?: 'row' | 'col';
     space?: number;

package/lib/src/core-components/atoms/list/list.component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const List = (props) => {
     const spacingClass = props.space
         ? `space-${props.direction === 'col' ? 'y' : 'x'}-${props.space}`

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export declare const Loader: () => React.JSX.Element;
 export declare const ModalLoader: () => React.JSX.Element;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Container, Row, Spinner } from 'reactstrap';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const Loader = () => (React.createElement(Container, { fluid: true, className: "vh-50 d-flex" },
     React.createElement(Row, { className: "justify-content-center align-self-center w-100 text-center" },
         React.createElement(Spinner, { color: "primary" }))));

package/lib/src/core-components/atoms/radio/radio.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface RadioProps {
     title: string;
     data: Array<any>;

package/lib/src/core-components/atoms/radio/radio.component.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { CheckedRadio, UncheckRadio } from '../../../library/assets/svg';
 import { InputWrapper } from '../form/form.component';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const Radio = ({ title = 'Source', data = [], className, onChange, }) => {
     const [list, setList] = useState(data);
     const width = 20;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface StepperProps {
     className?: string;
     steps: Array<string>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const Stepper = ({ className = '', steps, currentStep = 1, onStepClick, }) => {
     const finalClass = `${className} w-full px-4 sm:px-8`;
     const progressClass = 'absolute my-4 top-1/2 left-0 h-0.5  transform -translate-y-1/2 bg-orange transition-width ease-in-out duration-500';

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

@@ -0,0 +1,16 @@
+import React from 'react';
+interface TabProps {
+    title: string;
+    children: React.JSX.Element;
+}
+export declare const Tab: ({ title, children }: TabProps) => React.JSX.Element;
+export interface TabsProps {
+    options: Array<{
+        title: string;
+        content?: React.JSX.Element;
+        inActive?: boolean;
+    }>;
+    children: React.JSX.Element[];
+}
+export declare const Tabs: ({ options, children }: TabsProps) => React.JSX.Element;
+export {};

package/lib/src/core-components/atoms/tabs/_tabs.component.js

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { cn } from '../../../core-utils';
+export const Tab = ({ title, children }) => {
+    return (React.createElement("div", { className: cn('flex'), key: title }, children));
+};
+export const Tabs = ({ options, children }) => {
+    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 (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: cn('flex flex-col w-full') },
+            React.createElement("div", { className: cn('flex border-b') }, options?.map((tab, index) => (React.createElement("button", { type: "button", key: index, className: cn('py-2', 'px-4', 'mr-1', 'border-none', 'rounded-t-md', 'shadow-inner', 'cursor-pointer', activeTab === index && 'bg-blue-500', activeTab === index && 'border-none', activeTab === index && 'text-white'), onClick: () => {
+                    setSelected(tab?.title);
+                    !tab.inActive && setActiveTab(index);
+                }, disabled: tab.inActive }, tab.title)))),
+            React.createElement("div", { className: cn('p-2', 'border', 'border-solid', 'border-slate-600', 'rounded-b-md') }, options[activeTab]?.content
+                ? options[activeTab]?.content
+                : tabs[options?.findIndex((item) => item.title === selected)]))));
+};

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

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-// import s from './tabs.module.css';
 import s from '../../../tc.module.css';
 import { cn } from '../../../core-utils';
 export const Tab = ({ title, children }) => {

package/lib/src/core-components/atoms/tabs/tabs.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Tabs } from './tabs.component';
+import { Tabs } from './_tabs.component';
 declare const meta: Meta<typeof Tabs>;
 export default meta;
 type Story = StoryObj<typeof Tabs>;

package/lib/src/core-components/atoms/tabs/tabs.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tabs, Tab } from './tabs.component';
+import { Tabs, Tab } from './_tabs.component';
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
     title: 'Design System/Atoms/Tabs',

package/lib/src/core-components/atoms/timer/timer.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface TimerProps {
     onClear: () => void;
 }

package/lib/src/core-components/atoms/timer/timer.component.js

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import React, { useEffect, useState, useImperativeHandle } from 'react';
 import { TimerSVG } from '../../../library/assets/svg';
-import '../../../tc.css';
+import '../../../tc.module.css';
 // eslint-disable-next-line react/display-name
 export const Timer = React.forwardRef(({ onClear }, ref) => {
     const width = 15;

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

@@ -1 +1,2 @@
+export * from './atoms/button/button.component';
 export * from './atoms/tabs/tabs.component';

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

@@ -1,5 +1,5 @@
 // import * as Form from './atoms/form/form.component';
-// export * from './atoms/button/button.component';
+export * from './atoms/button/button.component';
 // export * from './atoms/button/buttonGroup/buttonGroup.component';
 // export * from './atoms/check-box/checkBox.component';
 // export * from './atoms/date-picker/date-picker.component';

package/lib/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps {
     uniqueField?: string;
     isSelectedStringArray?: boolean;

package/lib/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js

@@ -1,7 +1,7 @@
 /* eslint-disable  */
 import React, { useState, useEffect, useRef } from 'react';
 import { Icon } from '../../atoms/icons/icons.component';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', isSelectedStringArray = false, loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, onFilter, onUpdate, onSelect, onBlur, }) => {
     const [value, setValue] = useState('');
     const [options, setOptions] = useState();

package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface AutoCompleteFilterSingleSelectMultiFieldsDisplayProps {
     loader?: boolean;
     disable?: boolean;

package/lib/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js

@@ -1,7 +1,7 @@
 /* eslint-disable  */
 import React, { useState, useEffect, useRef } from 'react';
 import { Icon } from '../../atoms/icons/icons.component';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, className, posstion = 'absolute', onFilter, onSelect, onBlur, }) => {
     const [value, setValue] = useState(displayValue);
     const [options, setOptions] = useState(data.list);

package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface AutocompleteGroupByProps {
     data: any[];
     onChange?: (item: any, children: any) => void;

package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.js

@@ -2,7 +2,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Icon } from '../../atoms/icons/icons.component';
 // import PerfectScrollbar from 'react-perfect-scrollbar';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const AutocompleteGroupBy = (props) => {
     //const [userRouter, setUserRouter] = useState<any>()
     const [value, setValue] = useState(props.displayValue);

package/lib/src/core-components/molecules/autocomplete/autocomplete.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface AutocompleteProps {
     value: string;
     onValueChange: (value: string) => void;

package/lib/src/core-components/molecules/autocomplete/autocomplete.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 // import './autocomplete.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 const LI_ELEMENT_HEIGHT = 34;
 export const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
     const [activeOption, setActiveOption] = useState(value === '' || options.indexOf(value) === -1 ? 0 : options.indexOf(value));

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import './color-picker-modal.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface ColorPickerModalProps {
     color: string;
     onChange: (color: string) => void;

package/lib/src/core-components/molecules/color-picker-modal/color-picker-modal.component.js

@@ -2,7 +2,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import { useClickOutside } from '../../../hooks';
 import './color-picker-modal.css';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const ColorPickerModal = ({ color, onChange, onClose, }) => {
     const popover = useRef();
     const [isOpen, toggle] = useState(false);

package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.component.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface CSSMultilineProps {
     label?: string;
     defaultValue?: string;

package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.component.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import * as Form from '../../atoms/form/form.component';
 import { properties as propertiesObj } from './css-properties';
-import '../../../tc.css';
+import '../../../tc.module.css';
 const mapToArray = (arr) => {
     const res = [];
     arr.forEach(function (obj, index) {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 interface MultiSelectProps {
     options: Array<string>;
     selectedItems?: Array<string>;

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import '../../../tc.css';
+import '../../../tc.module.css';
 export const MultiSelect = ({ options = [], selectedItems = [], hasError = false, onSelect, }) => {
     const [selectedOptions, setSelectedOptions] = useState([]);
     const [isListOpen, setIsListOpen] = useState(false);

package/lib/src/core-components/molecules/multi-select-with-field/multi-select-with-field.component.js

@@ -4,7 +4,7 @@ import _ from 'lodash';
 export const MultiSelectWithField = ({ displayField = '', options = [], selectedItems = [], hasError = false, onSelect, }) => {
     const [selectedOptions, setSelectedOptions] = useState([]);
     const [isListOpen, setIsListOpen] = useState(false);
-    const useOutsideAlerter = ref => {
+    const useOutsideAlerter = (ref) => {
         useEffect(() => {
             function handleClickOutside(event) {
                 if (ref.current && !ref.current.contains(event.target) && isListOpen) {
@@ -24,20 +24,20 @@ export const MultiSelectWithField = ({ displayField = '', options = [], selected
     useOutsideAlerter(wrapperRef);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `flex dark:bg-boxdark dark:text-white flex-col w-full rounded-md border-2 ${hasError ? 'border-red  ' : 'border-gray-300'}`, ref: wrapperRef },
-            React.createElement("span", { className: 'p-2 mt-1 shadow-sm', onClick: () => {
+            React.createElement("span", { className: "p-2 mt-1 shadow-sm", onClick: () => {
                     setIsListOpen(!isListOpen);
                 } }, selectedOptions?.length > 0
                 ? `${selectedOptions?.length} Items`
                 : 'Select'),
             React.createElement("div", { className: `flex mx-2 ${isListOpen ? `show` : `hidden`}` }, options
-                ? options?.length > 0 && (React.createElement("ul", { className: 'flex flex-col gap-1 p-2' }, options?.map((item, index) => (React.createElement("li", { key: index, className: 'flex items-center' },
-                    React.createElement("input", { className: 'flex bg-black', type: 'checkbox', checked: !_.isEmpty(selectedOptions?.find(e => e[displayField]?.toUpperCase() ==
+                ? options?.length > 0 && (React.createElement("ul", { className: "flex flex-col gap-1 p-2" }, options?.map((item, index) => (React.createElement("li", { key: index, className: "flex items-center" },
+                    React.createElement("input", { className: "flex bg-black", type: "checkbox", checked: !_.isEmpty(selectedOptions?.find((e) => e[displayField]?.toUpperCase() ==
                             item[displayField]?.toUpperCase()))
                             ? true
                             : false, onChange: () => {
-                            if (!_.isEmpty(selectedOptions?.find(e => e[displayField]?.toUpperCase() ==
+                            if (!_.isEmpty(selectedOptions?.find((e) => e[displayField]?.toUpperCase() ==
                                 item[displayField]?.toUpperCase()))) {
-                                setSelectedOptions(selectedOptions?.filter(e => e[displayField]?.toUpperCase() !=
+                                setSelectedOptions(selectedOptions?.filter((e) => e[displayField]?.toUpperCase() !=
                                     item[displayField]?.toUpperCase()));
                             }
                             else {
@@ -53,6 +53,6 @@ export const MultiSelectWithField = ({ displayField = '', options = [], selected
                                 onSelect(selectedOptions);
                         } }),
                     ' ',
-                    React.createElement("span", { className: 'flex ml-2  dark:text-white text-center' }, item[displayField]))))))
+                    React.createElement("span", { className: "flex ml-2  dark:text-white text-center" }, item[displayField]))))))
                 : null))));
 };

package/lib/src/core-utils/utility.util.d.ts

@@ -1,3 +1,2 @@
 import { ClassValue } from 'clsx';
 export declare const cn: (...inputs: ClassValue[]) => string;
-export declare const classNames: (styles: any, classes: string[]) => string;

package/lib/src/core-utils/utility.util.js

@@ -3,6 +3,3 @@ import { twMerge } from 'tailwind-merge';
 export const cn = (...inputs) => {
     return twMerge(clsx(inputs));
 };
-export const classNames = (styles, classes) => {
-    return classes.map((className) => styles[className]).join(' ');
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.2.38",
+  "version": "0.2.39",
   "private": false,
   "description": "Easy use restyle components",
   "author": {
@@ -71,6 +71,7 @@
     "@storybook/addon-interactions": "^8.0.6",
     "@storybook/addon-links": "^8.0.6",
     "@storybook/addon-onboarding": "^8.0.6",
+    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addon-themes": "^8.4.7",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
     "@storybook/blocks": "^8.0.6",
@@ -92,7 +93,6 @@
     "husky": "^7.0.4",
     "jest": "^29.7.0",
     "lint-staged": "^12.4.0",
-    "postcss": "^8.4.49",
     "postcss-loader": "^8.1.1",
     "prettier": "^3.3.3",
     "react-router-dom": "^7.0.2",

package/lib/src/core-components/atoms/pdf/pdf-images.components.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Style } from '@react-pdf/types';
-interface PdfImageProps {
-    src?: string | any;
-    style?: Style | Style[];
-    fixed?: boolean;
-}
-export declare const PdfImage: ({ src, style, }: PdfImageProps) => React.JSX.Element;
-export {};

package/lib/src/core-components/atoms/pdf/pdf-images.components.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Image } from '@react-pdf/renderer';
-export const PdfImage = ({ src = 'https://picsum.photos/200/300', style, }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Image, { style: {
-                ...style,
-            }, src: src })));
-};

package/lib/src/core-components/atoms/pdf/pdf-table.components.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Style } from '@react-pdf/types';
-interface PdfTableProps {
-    style?: Style;
-    headerStyle?: Style;
-    headerFixed?: boolean;
-    fields: Array<any>;
-    data: Array<any>;
-}
-export declare const PdfTable: ({ headerFixed, fields, data, style, headerStyle, }: PdfTableProps) => React.JSX.Element;
-export {};

package/lib/src/core-components/atoms/pdf/pdf-table.components.js

@@ -1,56 +0,0 @@
-import React from 'react';
-import { Text, View, StyleSheet } from '@react-pdf/renderer';
-import { PdfSmall } from './pdf-typography.components';
-import { PdfBorderView } from './pdf-wrapped-view.components';
-const styles = StyleSheet.create({
-    table: {
-        borderColor: '#000000',
-        borderWidth: 1,
-        marginHorizontal: 20,
-        flexFlow: 1,
-    },
-    tableRow: {
-        flexDirection: 'row',
-    },
-    headerBg: {
-        backgroundColor: '#aaa',
-        borderStyle: 'solid',
-        borderColor: '#000000',
-        borderWidth: 1,
-    },
-    tableCellHeader: {
-        margin: 2,
-        fontSize: 10,
-        fontWeight: 'bold',
-        textAlign: 'center',
-    },
-    tableCell: {
-        margin: 2,
-        fontSize: 12,
-    },
-    textCenter: {
-        textAlign: 'center',
-    },
-});
-export const PdfTable = ({ headerFixed = false, fields, data, style, headerStyle, }) => (React.createElement(View, { style: [styles.table, { ...style }] },
-    React.createElement(View, { style: [styles.tableRow, styles.headerBg, { ...headerStyle }], fixed: headerFixed }, fields.map((item, index) => (React.createElement(View, { key: index, style: [{ width: item.width + '%' }] },
-        React.createElement(Text, { style: [styles.tableCellHeader] }, item?.title))))),
-    data?.map((item, index) => (React.createElement(View, { key: index, style: styles.tableRow }, Object.entries(item).map((_item, _idx) => (React.createElement(PdfBorderView, { key: _idx, style: {
-            width: fields[_idx]?.width + '%',
-            borderStyle: 'solid',
-        }, mh: 0, mv: 0, p: 0, bw: 1, borderColor: "#000000" }, typeof _item[1] == 'object' ? (React.createElement(React.Fragment, null,
-        React.createElement(PdfSmall, { style: { textAlign: 'center' } }, _item[1]?.panelDesc
-            ? `Panel Description : ${_item[1]?.panelDesc} \n`
-            : ''),
-        React.createElement(PdfSmall, { style: { textAlign: 'center' } }, _item[1]?.panelMethodName
-            ? `Panel Method Name: ${_item[1]?.panelMethodName} \n`
-            : ''),
-        React.createElement(PdfSmall, { style: { textAlign: 'center' } }, _item[1]?.testMethodName
-            ? `Test Method Name: ${_item[1]?.testMethodName} \n`
-            : ''),
-        React.createElement(PdfSmall, { style: { textAlign: 'center' } }, _item[1]?.analyteDesc
-            ? `Analyte Description: ${_item[1]?.analyteDesc} \n`
-            : ''),
-        React.createElement(PdfSmall, { style: { textAlign: 'center' } }, _item[1]?.analyteMethodName
-            ? `Analyte Method Name: ${_item[1]?.analyteMethodName}`
-            : ''))) : (React.createElement(PdfSmall, { style: { textAlign: 'center' } }, _item[1] || ''))))))))));

package/lib/src/core-components/atoms/pdf/pdf-typography.components.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Style } from '@react-pdf/types';
-interface PdfTextProps {
-    fontWeight?: 'bold' | 'medium' | 'normal';
-    fontSize?: number;
-    fontFamily?: 'ArimaRegular' | 'ArimaBold' | string;
-    textAlign?: 'center' | 'left' | 'right';
-    style?: Style | Style[];
-    lineHeight?: number;
-    bottom?: number;
-    fixed?: boolean;
-    children?: React.ReactNode;
-}
-export declare const PdfHeading: ({ fontWeight, fontSize, fontFamily, style, children, }: PdfTextProps) => React.JSX.Element;
-export declare const PdfSubHeading: ({ fontWeight, fontSize, fontFamily, style, children, }: PdfTextProps) => React.JSX.Element;
-export declare const PdfMedium: ({ fontWeight, fontSize, textAlign, fontFamily, style, children, }: PdfTextProps) => React.JSX.Element;
-export declare const PdfRegular: ({ fontWeight, fontSize, textAlign, fontFamily, style, children, }: PdfTextProps) => React.JSX.Element;
-export declare const PdfSmall: ({ fontSize, fontFamily, fontWeight, textAlign, lineHeight, fixed, style, children, }: PdfTextProps) => React.JSX.Element;
-export declare const PdfPageNumber: ({ style, bottom }: PdfTextProps) => React.JSX.Element;
-export {};

package/lib/src/core-components/atoms/pdf/pdf-typography.components.js

@@ -1,70 +0,0 @@
-import React from 'react';
-import { Text, Font } from '@react-pdf/renderer';
-Font.register({
-    family: 'ArimaBold',
-    fonts: [
-        {
-            src: '../../../library/assets/fonts/arima/arima-bold.ttf',
-            fontStyle: 'normal',
-            fontWeight: 'bold',
-        },
-    ],
-});
-Font.register({
-    family: 'ArimaRegular',
-    src: '../../../library/assets/fonts/arima/arima-regular.ttf',
-});
-export const PdfHeading = ({ fontWeight = 'bold', fontSize = 22, fontFamily = 'ArimaRegular', style, children, }) => {
-    return (React.createElement(Text, { style: {
-            fontWeight: fontWeight,
-            fontSize: fontSize,
-            fontFamily: fontFamily,
-            ...style,
-        } }, children));
-};
-export const PdfSubHeading = ({ fontWeight = 'bold', fontSize = 20, fontFamily = 'ArimaRegular', style, children, }) => {
-    return (React.createElement(Text, { style: {
-            fontWeight: fontWeight,
-            fontSize: fontSize,
-            fontFamily: fontFamily,
-            ...style,
-        } }, children));
-};
-export const PdfMedium = ({ fontWeight = 'medium', fontSize = 16, textAlign = 'left', fontFamily = 'ArimaRegular', style, children, }) => {
-    return (React.createElement(Text, { style: {
-            fontWeight: fontWeight,
-            fontSize: fontSize,
-            fontFamily: fontFamily,
-            textAlign: textAlign,
-            ...style,
-        } }, children));
-};
-export const PdfRegular = ({ fontWeight = 'normal', fontSize = 12, textAlign = 'left', fontFamily = 'ArimaRegular', style, children, }) => {
-    return (React.createElement(Text, { style: {
-            fontWeight: fontWeight,
-            fontSize: fontSize,
-            fontFamily: fontFamily,
-            textAlign: textAlign,
-            ...style,
-        } }, children));
-};
-export const PdfSmall = ({ fontSize = 10, fontFamily = 'ArimaRegular', fontWeight = 'normal', textAlign = 'left', lineHeight = 0, fixed = false, style, children, }) => {
-    return (React.createElement(Text, { style: {
-            fontSize: fontSize,
-            fontFamily: fontFamily,
-            fontWeight: fontWeight,
-            lineHeight: lineHeight,
-            textAlign: textAlign,
-            ...style,
-        }, fixed: fixed }, children));
-};
-export const PdfPageNumber = ({ style, bottom = 55 }) => {
-    return (React.createElement(Text, { style: {
-            position: 'absolute',
-            bottom: bottom,
-            right: 14,
-            fontSize: 10,
-            color: 'black',
-            ...style,
-        }, render: ({ pageNumber, totalPages }) => `Page ${pageNumber} of ${totalPages}`, fixed: true }));
-};

package/lib/src/core-components/atoms/pdf/pdf-wrapped-view.components.d.ts

@@ -1,52 +0,0 @@
-import React from 'react';
-import { Style } from '@react-pdf/types';
-interface PdfViewProps {
-    mh?: number;
-    mt?: number;
-    mv?: number;
-    p?: number;
-    borderColor?: string;
-    bg?: string;
-    bw?: number;
-    height?: string | number;
-    alignItems?: 'flex-end' | 'flex-start' | 'center';
-    flexDirection?: 'row' | 'column';
-    fixed?: boolean;
-    isBreak?: boolean;
-    isWrap?: boolean;
-    style?: Style | Style[] | any;
-    children?: React.ReactNode;
-}
-export declare const PdfView: ({ mh, p, flexDirection, style, fixed, isBreak, alignItems, mt, isWrap, children, }: PdfViewProps) => React.JSX.Element;
-export declare const PdfBorderView: ({ mh, mv, p, borderColor, bw, style, flexDirection, fixed, isBreak, children, }: PdfViewProps) => React.JSX.Element;
-interface PdfHeaderProps {
-    bg?: string;
-    p?: number;
-    alignItems?: React.CSSProperties['alignItems'] | any;
-    fixed?: boolean;
-    style?: React.CSSProperties | any;
-    children?: React.ReactNode;
-}
-export declare const PdfHeader: ({ bg, p, alignItems, fixed, style, children, }: PdfHeaderProps) => React.JSX.Element;
-export declare const PdfSubHeader: ({ bg, p, alignItems, fixed, style, children, }: PdfViewProps) => React.JSX.Element;
-interface PdfFooterViewProps {
-    bottom?: number;
-    left?: number;
-    right?: number;
-    bg?: string;
-    p?: number;
-    alignItems?: React.CSSProperties['alignItems'];
-    fixed?: boolean;
-    height?: string | number;
-    style?: React.CSSProperties | any;
-    children: React.ReactNode;
-}
-export declare const PdfFooterView: ({ bottom, left, right, bg, p, alignItems, fixed, height, style, children, }: PdfFooterViewProps) => React.JSX.Element;
-interface GridProps {
-    cols?: number;
-    bg?: 'transparent' | string;
-    style?: Style | Style[];
-    children?: React.ReactNode;
-}
-export declare const PdfGrid: React.FunctionComponent<GridProps>;
-export {};

package/lib/src/core-components/atoms/pdf/pdf-wrapped-view.components.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import { View } from '@react-pdf/renderer';
-export const PdfView = ({ mh = 20, p = 2, flexDirection = 'column', style, fixed = false, isBreak = false, alignItems, mt, isWrap = true, children, }) => {
-    return (React.createElement(View, { break: isBreak, style: {
-            marginHorizontal: mh,
-            marginTop: mt,
-            padding: p,
-            flexDirection: flexDirection,
-            alignItems: alignItems,
-            ...style,
-        }, fixed: fixed, wrap: isWrap }, children));
-};
-export const PdfBorderView = ({ mh = 20, mv = 50, p = 2, borderColor = 'gray', bw = 2, style, flexDirection = 'column', fixed = false, isBreak = false, children, }) => {
-    return (React.createElement(View, { break: isBreak, style: {
-            flexDirection: flexDirection,
-            marginHorizontal: mh,
-            marginVertical: mv,
-            padding: p,
-            borderColor: borderColor,
-            borderWidth: bw,
-            ...style,
-        }, fixed: fixed }, children));
-};
-export const PdfHeader = ({ bg = 'orange', p = 10, alignItems = 'flex-start', fixed = false, style, children, }) => {
-    return (React.createElement(View, { style: {
-            backgroundColor: bg,
-            alignItems: alignItems,
-            padding: p,
-            ...style,
-        }, fixed: fixed }, children));
-};
-export const PdfSubHeader = ({ bg = 'yellow', p = 4, alignItems = 'flex-end', fixed = false, style, children, }) => {
-    return (React.createElement(View, { style: {
-            backgroundColor: bg,
-            alignItems: alignItems,
-            padding: p,
-            ...style,
-        }, fixed: fixed }, children));
-};
-export const PdfFooterView = ({ bottom = 0, left = 0, right = 0, bg = 'orange', p = 10, alignItems = 'center', fixed = false, height = '100%', style, children, }) => {
-    return (React.createElement(View, { style: [
-            { position: 'absolute', bottom, left, right, height },
-            { backgroundColor: bg, padding: p, alignItems: alignItems, ...style },
-        ], fixed: fixed }, children));
-};
-export const PdfGrid = ({ cols = 1, bg = 'white', style, children, }) => (React.createElement(View, { style: {
-        width: `${100 / cols}%`,
-        backgroundColor: bg,
-        ...style,
-    } }, children));