react-restyle-components 0.2.31 → 0.2.32

package/lib/package.json

@@ -81,6 +81,7 @@
     "@vitest/coverage-c8": "^0.31.4",
     "@vitest/ui": "^0.31.4",
     "autoprefixer": "^10.4.19",
+    "clsx": "^2.1.1",
     "copyfiles": "^2.4.1",
     "craco-alias": "^3.0.1",
     "css-loader": "^7.1.2",
@@ -98,6 +99,7 @@
     "storybook": "^8.0.6",
     "storybook-multilevel-sort": "^2.0.1",
     "style-loader": "^4.0.0",
+    "tailwind-merge": "^2.5.5",
     "tailwindcss": "^3.4.14",
     "ts-jest": "^29.2.5",
     "vitest": "^0.31.4",

package/lib/src/App.js

@@ -7,8 +7,8 @@ function App() {
         React.createElement(Button, null, "Title"),
         React.createElement(Tabs, { options: [{ title: 'Work History' }, { title: 'Book Order' }] },
             React.createElement(Tab, { title: "Work History" },
-                React.createElement("div", null, "hi")),
+                React.createElement("div", null, "Work")),
             React.createElement(Tab, { title: "Book Order" },
-                React.createElement("div", null, "hi")))));
+                React.createElement("div", null, "Book")))));
 }
 export default App;

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

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

@@ -1 +1,2 @@
 export * from './unit-test.utils';
+export * from './utility.util';

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

@@ -1 +1,2 @@
 export * from './unit-test.utils';
+export * from './utility.util';

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

@@ -0,0 +1 @@
+export declare const cn: (...inputs: any[]) => string;

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

@@ -0,0 +1,5 @@
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export const cn = (...inputs) => {
+    return twMerge(clsx(inputs));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "private": false,
   "description": "Easy use restyle components",
   "author": {
@@ -81,6 +81,7 @@
     "@vitest/coverage-c8": "^0.31.4",
     "@vitest/ui": "^0.31.4",
     "autoprefixer": "^10.4.19",
+    "clsx": "^2.1.1",
     "copyfiles": "^2.4.1",
     "craco-alias": "^3.0.1",
     "css-loader": "^7.1.2",
@@ -98,6 +99,7 @@
     "storybook": "^8.0.6",
     "storybook-multilevel-sort": "^2.0.1",
     "style-loader": "^4.0.0",
+    "tailwind-merge": "^2.5.5",
     "tailwindcss": "^3.4.14",
     "ts-jest": "^29.2.5",
     "vitest": "^0.31.4",