@youngonesworks/ui 0.1.134 → 1.0.1

package/README.md

@@ -28,27 +28,54 @@ npm install @youngonesworks/ui
 - **react-dom**: ^18 || ^19
 - **next**: ^14 || ^15 _(for Next.js projects)_
 
-### Tailwind CSS v4 setup
+### Tailwind CSS v4 setup (required for component styles)
 
-```bash
-yarn add -D tailwindcss@4 postcss autoprefixer
-yarn tailwindcss init -p
-````
+Component classes (e.g. KebabMenu title, buttons, layout) are Tailwind utilities. Your app must **scan the library’s built output** so Tailwind generates those classes.
+
+**1. Import the library CSS** in your main stylesheet (e.g. `app.css` or `globals.css`):
+
+```css
+@import "tailwindcss";
+@import "@youngonesworks/ui/styles.css";
+```
+
+**2. Add the library to Tailwind’s source** so utilities used by components are generated. In the **same** main CSS file, add:
+
+```css
+@source "../node_modules/@youngonesworks/ui/dist";
+```
 
-Update `tailwind.config.js`:
+Use the path that resolves to the library from your CSS file (e.g. `../../node_modules/...` if your CSS lives under `src/`).
+
+**Example full setup:**
+
+```css
+/* app.css or src/globals.css */
+@import "tailwindcss";
+@source "../node_modules/@youngonesworks/ui/dist";
+@import "@youngonesworks/ui/globals.css";
+```
+
+Without `@source`, components like KebabMenu (e.g. the visible title and dropdown styles) will not get their Tailwind styles in the built CSS.
+
+### Tailwind CSS v3 (legacy)
+
+If you still use Tailwind v3 with `tailwind.config.js`, include the library in `content`:
 
 ```js
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
-    "./node_modules/@youngonesworks/ui/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/@youngonesworks/ui/dist/**/*.{js,jsx,ts,tsx}",
   ],
   theme: { extend: {} },
   plugins: [],
 };
 ```
 
+Note: use the **dist** folder, because that is what gets published and where the class names appear.
+
 ## Usage
 
 ### 🧩 React Components
@@ -257,3 +284,4 @@ ISC License - see [LICENSE](LICENSE) file for details.
 ---
 
 **Built with ❤️ by YoungOnes** | [Website](https://youngones.work) | [GitHub](https://github.com/youngonesworks)
+````

package/dist/globals.css

@@ -11,12 +11,4 @@
 @import "react-phone-input-2/lib/style.css";
 @import "./styles/editor.css";
 @import "./styles/typography.css";
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+@import "./styles/base.css";

package/dist/index.cjs

@@ -88,17 +88,20 @@ const AccordionItem = ({ controlContent, panelContent, style = "light", border =
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					onClick: () => setIsActive(!isActive),
 					className: `duration-300${isActive ? "rotate-180" : ""}`,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconChevronDown, { size: 18 })
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconChevronDown, {
+						size: 18,
+						color: style === "dark" ? "white" : "black"
+					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					onClick: () => setIsActive(!isActive),
-					className: `flex w-full flex-row justify-between ${style === "dark" && "font-medium"} leading-8`,
+					className: `flex w-full flex-row justify-between ${style === "dark" && "text-white"} leading-8 text-lg`,
 					children: controlContent
 				}),
 				endContent
 			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: `transition-max-height overflow-hidden duration-500 ease-in-out ${isActive ? "max-h-1000" : "max-h-0"} leading-6 font-normal`,
+			className: `transition-max-height overflow-hidden duration-500 ease-in-out ${isActive ? "max-h-1000" : "max-h-0"} leading-6 text-base`,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "px-4 py-3",
 				children: panelContent
@@ -1628,7 +1631,7 @@ Island.displayName = "Island";
 const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "default" }) => {
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
 	const menuRef = (0, react.useRef)(null);
-	const defaultStyling = "text-black flex items-center justify-self-end gap-1 bg-transparent font-medium py-1 h-9 min-w-9 cursor-pointer px-0";
+	const defaultStyling = "flex items-center justify-self-end gap-1 bg-transparent py-1 h-9 min-w-9 cursor-pointer px-0";
 	const handleToggle = () => {
 		if (!disabled) setIsOpen((prev) => !prev);
 	};
@@ -1656,7 +1659,7 @@ const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "
 		disabled,
 		onClick: handleToggle,
 		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "hidden md:block",
+			className: "yo-text-small hidden md:block",
 			children: title
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tabler_icons_react.IconDotsVertical, {
 			size: 20,