@youngonesworks/ui 0.1.121 → 0.1.122

package/README.md

@@ -1,13 +1,13 @@
 # @youngonesworks/ui
 
-A comprehensive React component library built with Tailwind CSS v4, featuring modular CSS variables, optimized fonts, and TypeScript support.
+A comprehensive React component library built with Tailwind CSS v4, featuring modular CSS variables and TypeScript support.
 
 ## Features
 
 - 🧩 **React components built with TypeScript**
 - 🎨 **Styled with Tailwind CSS v4**
 - 📦 **Modular CSS exports** - Import only what you need
-- 🔤 **Next.js optimized fonts** - Gotham font family with automatic optimization
+- 🔤 **Font-agnostic design** – Works seamlessly with app-level fonts (e.g. Work Sans via Google Fonts)
 - 🎯 **CSS Variables & Utilities** - Exportable design tokens
 - 🌳 **Tree-shakeable** - Only import what you need
 - 📝 **Full TypeScript support** - Type-safe CSS variable helpers
@@ -15,26 +15,25 @@ A comprehensive React component library built with Tailwind CSS v4, featuring mo
 
 ## Installation
 
-```bash
+````bash
 # yarn
 yarn add @youngonesworks/ui
 
 # npm
 npm install @youngonesworks/ui
-```
 
 ### Peer Dependencies
 
 - **react**: ^18 || ^19
 - **react-dom**: ^18 || ^19
-- **next**: ^14 || ^15 *(for Next.js projects)*
+- **next**: ^14 || ^15 _(for Next.js projects)_
 
 ### Tailwind CSS v4 setup
 
 ```bash
 yarn add -D tailwindcss@4 postcss autoprefixer
 yarn tailwindcss init -p
-```
+````
 
 Update `tailwind.config.js`:
 
@@ -42,8 +41,8 @@ Update `tailwind.config.js`:
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './src/**/*.{js,jsx,ts,tsx}',
-    './node_modules/@youngonesworks/ui/**/*.{js,jsx,ts,tsx}',
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/@youngonesworks/ui/**/*.{js,jsx,ts,tsx}",
   ],
   theme: { extend: {} },
   plugins: [],
@@ -55,14 +54,18 @@ module.exports = {
 ### 🧩 React Components
 
 ```tsx
-import { Button } from '@youngonesworks/ui';
+import { Button } from "@youngonesworks/ui";
 
 function App() {
   return (
     <>
       <Button>Default</Button>
-      <Button variant="secondary" size="sm">Small Secondary</Button>
-      <Button variant="outline" size="lg">Large Outline</Button>
+      <Button variant="secondary" size="sm">
+        Small Secondary
+      </Button>
+      <Button variant="outline" size="lg">
+        Large Outline
+      </Button>
     </>
   );
 }
@@ -74,13 +77,13 @@ function App() {
 
 ```css
 /* Import in your CSS file */
-@import '@youngonesworks/ui/styles/variables.css';
-@import '@youngonesworks/ui/styles/utilities.css';
+@import "@youngonesworks/ui/styles/variables.css";
+@import "@youngonesworks/ui/styles/utilities.css";
 
 .my-component {
-  color: var(--color-primary);          /* #10d1bb */
-  font-family: var(--font-family-sans); /* Gotham font */
-  font-size: var(--font-lg-size);       /* 1.125rem */
+  color: var(--color-primary); /* #10d1bb */
+  font-family: var(--font-family-sans); /* App-defined sans font */
+  font-size: var(--font-lg-size); /* 1.125rem */
   transition: var(--transition-duration-sidebar);
 }
 ```
@@ -88,26 +91,30 @@ function App() {
 #### TypeScript CSS Variable Helpers
 
 ```tsx
-import { getCSSVariable, setCSSVariable, type CSSVariables } from '@youngonesworks/ui/theme';
+import {
+  getCSSVariable,
+  setCSSVariable,
+  type CSSVariables,
+} from "@youngonesworks/ui/theme";
 
 // Get CSS variable values
-const primaryColor = getCSSVariable('--color-primary');
-const fontSize = getCSSVariable('--font-lg-size');
+const primaryColor = getCSSVariable("--color-primary");
+const fontSize = getCSSVariable("--font-lg-size");
 
 // Set CSS variables dynamically
-setCSSVariable('--color-primary', '#ff6b35');
-setCSSVariable('--font-lg-size', '1.25rem');
+setCSSVariable("--color-primary", "#ff6b35");
+setCSSVariable("--font-lg-size", "1.25rem");
 
 // Type-safe variable names
 const variables: CSSVariables = {
   colors: {
-    primary: '#10d1bb',
-    secondary: '#6366f1'
+    primary: "#10d1bb",
+    secondary: "#6366f1",
   },
   typography: {
-    fontLgSize: '1.125rem',
-    fontBaseLine: '1.5rem'
-  }
+    fontLgSize: "1.125rem",
+    fontBaseLine: "1.5rem",
+  },
 };
 ```
 
@@ -117,15 +124,20 @@ const variables: CSSVariables = {
 
 ```tsx
 // app/layout.tsx
-import { gothamFont } from '@youngonesworks/ui/theme/fonts';
-import '@youngonesworks/ui/styles/variables.css';
+// app/layout.tsx
+import { Work_Sans } from "next/font/google";
+import "@youngonesworks/ui/styles/variables.css";
+
+const workSans = Work_Sans({
+  subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700", "900"],
+  variable: "--font-family-sans",
+});
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en" className={gothamFont.variable}>
-      <body className={gothamFont.className}>
-        {children}
-      </body>
+    <html lang="en" className={workSans.variable}>
+      <body>{children}</body>
     </html>
   );
 }
@@ -134,22 +146,21 @@ export default function RootLayout({ children }) {
 #### Use Font Utilities
 
 ```tsx
-import { FONT_FAMILIES, FONT_CLASS_NAMES, FONT_WEIGHTS } from '@youngonesworks/ui/theme/fonts';
+// app/layout.tsx
+import { Work_Sans } from "next/font/google";
+import "@youngonesworks/ui/styles/variables.css";
+
+const workSans = Work_Sans({
+  subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700", "900"],
+  variable: "--font-family-sans",
+});
 
-function MyComponent() {
+export default function RootLayout({ children }) {
   return (
-    <div>
-      {/* Using CSS class */}
-      <h1 className={FONT_CLASS_NAMES.gotham}>Optimized Gotham</h1>
-      
-      {/* Using inline styles */}
-      <p style={{ 
-        fontFamily: FONT_FAMILIES.gotham,
-        fontWeight: FONT_WEIGHTS.medium 
-      }}>
-        Custom styled text
-      </p>
-    </div>
+    <html lang="en" className={workSans.variable}>
+      <body>{children}</body>
+    </html>
   );
 }
 ```
@@ -158,13 +169,10 @@ function MyComponent() {
 
 ```tsx
 // Components
-import { Button, Card, Input } from '@youngonesworks/ui';
+import { Button, Card, Input } from "@youngonesworks/ui";
 
 // CSS Variables (TypeScript helpers)
-import { getCSSVariable, setCSSVariable } from '@youngonesworks/ui/theme';
-
-// Font utilities
-import { gothamFont, FONT_FAMILIES } from '@youngonesworks/ui/theme/fonts';
+import { getCSSVariable, setCSSVariable } from "@youngonesworks/ui/theme";
 
 // CSS files (import in CSS/SCSS)
 // @import '@youngonesworks/ui/styles/variables.css';
@@ -174,21 +182,25 @@ import { gothamFont, FONT_FAMILIES } from '@youngonesworks/ui/theme/fonts';
 ## 📊 Available CSS Variables
 
 ### Colors
+
 - `--color-primary` - Primary brand color (#10d1bb)
-- `--color-secondary` - Secondary brand color  
+- `--color-secondary` - Secondary brand color
 - `--color-background` - Background colors
 - `--color-foreground` - Text colors
 
 ### Typography
-- `--font-family-sans` - Gotham font stack
+
+- `--font-family-sans` - Application-defined sans font stack (e.g. Work Sans)
 - `--font-xs-size` to `--font-9xl-size` - Font sizes (0.75rem - 8rem)
 - `--font-xs-line` to `--font-9xl-line` - Line heights
 
 ### Spacing & Sizing
+
 - `--spacing-*` - Consistent spacing scale
 - `--sizing-*` - Width/height utilities
 
 ### Transitions & Animations
+
 - `--transition-duration-*` - Duration presets
 - Custom animation utilities (`.animate-spin-slow`, etc.)
 
@@ -198,9 +210,9 @@ import { gothamFont, FONT_FAMILIES } from '@youngonesworks/ui/theme/fonts';
 
 ```tsx
 <Button
-  variant="primary"  // 'primary' | 'secondary' | 'outline'
-  size="md"          // 'sm' | 'md' | 'lg'
-  onClick={() => console.log('clicked')}
+  variant="primary" // 'primary' | 'secondary' | 'outline'
+  size="md" // 'sm' | 'md' | 'lg'
+  onClick={() => console.log("clicked")}
 >
   Click me
 </Button>
@@ -267,6 +279,7 @@ Contributions are welcome! Please follow these guidelines:
 ### CSS Variables
 
 When adding new CSS variables:
+
 1. Add them to `src/styles/variables.css`
 2. Update TypeScript interfaces in `src/theme/variables.ts`
 3. Document them in this README

package/dist/components/button/buttonVariants.d.ts

@@ -7,4 +7,5 @@ export declare const buttonVariants: {
     readonly search: string;
     readonly icon__primary: string;
     readonly icon__danger: string;
+    readonly action: string;
 };

package/dist/globals.css

@@ -2,10 +2,10 @@
  * Global CSS Styles
  * Main stylesheet for the YoungOnes B2B Dashboard
  */
+@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;900&display=swap");
 
 @import "tailwindcss";
 
-@import "./styles/fonts.css";
 @import "./styles/variables.css";
 @import "./styles/utilities.css";
 @import "react-phone-input-2/lib/style.css";
@@ -19,5 +19,3 @@
     transform: rotate(360deg);
   }
 }
-
-

package/dist/index.cjs

@@ -765,7 +765,7 @@ const AvatarIndicator = ({ indicatorCount, className,...props }) => /* @__PURE__
 	"data-testid": "AvatarIndicator",
 	...props,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "font-['Gotham'] text-[10px] leading-[10px] text-black",
+		className: "font-[var(--font-family-sans)] text-[10px] leading-[10px] text-black",
 		children: `+${indicatorCount}`
 	})
 });
@@ -842,7 +842,8 @@ const buttonVariants = {
 	outline: (0, clsx.default)(defaultButtonStyling, "border-solid border-gray-200 bg-transparent text-white hover:border-gray-800 hover:bg-[rgba(255,255,255,0.1)] disabled:text-gray-800 disabled:hover:border-gray-200 disabled:hover:bg-white"),
 	search: (0, clsx.default)(defaultButtonStyling, "absolute top-0 right-0 h-full w-[50px] border-0 bg-transparent bg-no-repeat"),
 	icon__primary: (0, clsx.default)(defaultButtonStyling, "flex! items-center justify-center"),
-	icon__danger: (0, clsx.default)(defaultButtonStyling, "flex! items-center justify-center")
+	icon__danger: (0, clsx.default)(defaultButtonStyling, "flex! items-center justify-center"),
+	action: (0, clsx.default)(defaultButtonStyling, "w-full bg-transparent border border-gray-200 whitespace-nowrap", "lg:w-[36px] lg:h-[36px]", "lg:p-0 lg:gap-0", "lg:hover:bg-transparent lg:hover:border-black", "lg:[&_svg]:-ml-2 lg:[&_svg]:-mr-2")
 };
 
 //#endregion
@@ -2684,7 +2685,7 @@ const NumberedStepper = ({ steps, active, className, stepsCompleted, completedLa
 				className: "flex size-12 flex-auto items-center justify-center whitespace-nowrap",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					"data-testid": `stepper-number-${index}`,
-					className: `grid size-12 place-content-center rounded-full leading-[36px]! md:leading-[40px]! ${index === 0 && active === 1 ? "bg-light-blue text-white" : "bg-transparent!"} ${index <= active ? "border-light-blue text-light-blue border" : "border border-gray-500 text-gray-500"} align-middle font-["Gotham"] font-bold md:text-2xl`,
+					className: `grid size-12 place-content-center rounded-full leading-[36px]! md:leading-[40px]! ${index === 0 && active === 1 ? "bg-light-blue text-white" : "bg-transparent!"} ${index <= active ? "border-light-blue text-light-blue border" : "border border-gray-500 text-gray-500"} align-middle font-sans font-bold md:text-2xl`,
 					children: index + 1
 				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {