npm - @youngonesworks/ui - Versions diffs - 0.1.20 → 0.1.24 - Mend

@youngonesworks/ui 0.1.20 → 0.1.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/README.md +210 -13
package/dist/components/checkbox/index.d.ts +10 -8
package/dist/components/favouriteButton/index.d.ts +6 -11
package/dist/index.cjs +196 -48
package/dist/index.cjs.map +1 -1
package/dist/index.d.ts +2 -0
package/dist/index.js +187 -47
package/dist/index.js.map +1 -1
package/dist/styles/index.d.ts +9 -0
package/dist/styles/utilities.css +200 -0
package/dist/styles/variables.css +228 -0
package/dist/theme/fonts.d.ts +29 -0
package/dist/theme/index.d.ts +5 -0
package/dist/theme/variables.d.ts +62 -0
package/package.json +32 -14
package/dist/components/calendar/index.d.ts +0 -0
package/dist/components/checkbox/Checkbox.stories.d.ts +0 -9

package/README.md CHANGED Viewed

@@ -1,27 +1,33 @@
 # @youngonesworks/ui
-A React component library built with Tailwind CSS v4.
+A comprehensive React component library built with Tailwind CSS v4, featuring modular CSS variables, optimized fonts, and TypeScript support.
 ## Features
-- React components built with TypeScript
-- Styled with Tailwind CSS v4
-- Fully customizable components
-- Tree-shakeable (only import what you need)
-- TypeScript support
-- Modern build with Rolldown (Rust-based bundler)
+- 🧩 **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
+- 🎯 **CSS Variables & Utilities** - Exportable design tokens
+- 🌳 **Tree-shakeable** - Only import what you need
+- 📝 **Full TypeScript support** - Type-safe CSS variable helpers
+- ⚡ **Modern build** - Rolldown (Rust-based bundler)
 ## Installation
 ```bash
 # yarn
 yarn add @youngonesworks/ui
+# npm
+npm install @youngonesworks/ui
 ```
 ### Peer Dependencies
-- react: ^18 || ^19
-- react-dom: ^18 || ^19
+- **react**: ^18 || ^19
+- **react-dom**: ^18 || ^19
+- **next**: ^14 || ^15 *(for Next.js projects)*
 ### Tailwind CSS v4 setup
@@ -46,6 +52,8 @@ module.exports = {
 ## Usage
+### 🧩 React Components
 ```tsx
 import { Button } from '@youngonesworks/ui';
@@ -60,9 +68,133 @@ function App() {
 }
 ```
-### Components
+### 🎨 CSS Variables & Utilities
+#### Import CSS Variables
+```css
+/* Import in your CSS file */
+@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 */
+  transition: var(--transition-duration-sidebar);
+}
+```
+#### TypeScript CSS Variable Helpers
+```tsx
+import { getCSSVariable, setCSSVariable, type CSSVariables } from '@youngonesworks/ui/theme';
+// Get CSS variable values
+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');
+// Type-safe variable names
+const variables: CSSVariables = {
+  colors: {
+    primary: '#10d1bb',
+    secondary: '#6366f1'
+  },
+  typography: {
+    fontLgSize: '1.125rem',
+    fontBaseLine: '1.5rem'
+  }
+};
+```
+### 🔤 Next.js Fonts
+#### Setup in Next.js App Router
+```tsx
+// app/layout.tsx
+import { gothamFont } from '@youngonesworks/ui/theme/fonts';
+import '@youngonesworks/ui/styles/variables.css';
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={gothamFont.variable}>
+      <body className={gothamFont.className}>
+        {children}
+      </body>
+    </html>
+  );
+}
+```
+#### Use Font Utilities
+```tsx
+import { FONT_FAMILIES, FONT_CLASS_NAMES, FONT_WEIGHTS } from '@youngonesworks/ui/theme/fonts';
+function MyComponent() {
+  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>
+  );
+}
+```
+### 📦 Available Exports
-#### Button
+```tsx
+// Components
+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';
+// CSS files (import in CSS/SCSS)
+// @import '@youngonesworks/ui/styles/variables.css';
+// @import '@youngonesworks/ui/styles/utilities.css';
+```
+## 📊 Available CSS Variables
+### Colors
+- `--color-primary` - Primary brand color (#10d1bb)
+- `--color-secondary` - Secondary brand color
+- `--color-background` - Background colors
+- `--color-foreground` - Text colors
+### Typography
+- `--font-family-sans` - Gotham font stack
+- `--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.)
+## Components
+### Button
 ```tsx
 <Button
@@ -74,10 +206,75 @@ function App() {
 </Button>
 ```
+## 🚀 Development
+### Setup
+```bash
+git clone https://github.com/youngonesworks/ui.git
+cd ui
+yarn install
+```
+### Available Scripts
+```bash
+# Development
+yarn dev          # Start Storybook development server
+yarn watch        # Watch and build library
+# Building
+yarn build        # Build library for production
+yarn build-storybook  # Build Storybook for deployment
+# Publishing
+yarn buildAndPublish  # Build and publish to npm
+# Code Quality
+yarn lint         # ESLint
+yarn lint:fix     # Auto-fix ESLint issues
+yarn format       # Prettier formatting
+yarn test         # Run Jest tests
+```
+### Project Structure
+```
+src/
+├── components/     # React components
+├── styles/         # Modular CSS files
+    ├── variables.css   # CSS custom properties
+    ├── utilities.css   # Utility classes
+    └── fonts.css       # Font-face declarations
+├── theme/          # TypeScript theme utilities
+    ├── variables.ts    # CSS variable helpers
+    ├── fonts.ts        # Next.js font configuration
+    └── index.ts        # Theme exports
+└── index.ts        # Main entry point
+```
 ## Contributing
-Contributions are welcome! Please follow the conventional commits spec and ensure all tests pass before opening a PR.
+Contributions are welcome! Please follow these guidelines:
+1. **Fork the repository** and create a feature branch
+2. **Follow conventional commits** spec for commit messages
+3. **Add tests** for new components or utilities
+4. **Update documentation** including README and Storybook stories
+5. **Ensure all checks pass** (lint, format, test, build)
+6. **Submit a PR** with a clear description
+### 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
 ## License
-MIT
+ISC License - see [LICENSE](LICENSE) file for details.
+---
+**Built with ❤️ by YoungOnes** | [Website](https://youngones.work) | [GitHub](https://github.com/youngonesworks)

package/dist/components/checkbox/index.d.ts CHANGED Viewed

@@ -1,11 +1,13 @@
-import { type InputHTMLAttributes, type ReactNode } from 'react';
-export interface ICheckbox extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'size' | 'disabled'> {
-    size?: 'sm' | 'md';
-    mediumBoldText?: boolean;
-    label?: ReactNode;
-    disabled?: boolean;
+import { type JSX } from 'react';
+interface ICheckbox extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     className?: string;
-    indeterminate?: boolean;
+    mediumBoldText?: boolean;
     error?: string;
+    label?: React.ReactNode;
+    indeterminate?: boolean;
+    size?: 'sm' | 'md';
 }
-export declare const Checkbox: import("react").ForwardRefExoticComponent<ICheckbox & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: (props: ICheckbox & {
+    ref?: React.Ref<HTMLInputElement>;
+}) => JSX.Element;
+export {};

package/dist/components/favouriteButton/index.d.ts CHANGED Viewed

@@ -1,17 +1,9 @@
-import { type ReactNode } from 'react';
-interface IFavouriteButtonProps {
+import { type JSX, type ReactNode } from 'react';
+interface IFavouriteButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'size'> {
     onClick: () => void;
     favourite: boolean;
     iconOutline?: ReactNode;
     iconFilled?: ReactNode;
-    /**
-     * @deprecated Can be removed and replaced by iconSize
-     */
-    width?: string;
-    /**
-     * @deprecated Can be removed and replaced by iconSize
-     */
-    height?: string;
     iconSize?: number;
     className?: string;
     favouriteTitle?: string;
@@ -19,6 +11,9 @@ interface IFavouriteButtonProps {
     iconColor?: string;
     iconColorSelected?: string;
     styleVariant?: 'transparent' | 'small' | 'default' | 'round' | undefined;
+    children?: React.ReactNode;
 }
-export declare const FavouriteButton: import("react").ForwardRefExoticComponent<IFavouriteButtonProps & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
+export declare const FavouriteButton: (props: IFavouriteButtonProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => JSX.Element;
 export {};

package/dist/index.cjs CHANGED Viewed

@@ -27,6 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 const react = __toESM(require("react"));
 const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
 const react_dom = __toESM(require("react-dom"));
+const next_font_local = __toESM(require("next/font/local"));
 //#region src/jsx-runtime-shim.ts
 const jsx$2 = react.createElement;
@@ -103438,7 +103439,7 @@ function Button({ type = "button", variant = "primary", ariaLabel, block = false
 		type,
 		"aria-label": ariaLabel,
 		"data-testid": dataTestId,
-		className: cn(buttonVariants[variant], className, block && "w-full"),
+		className: cn(buttonVariants[variant], className, block && "w-full text-sm"),
 		onClick: handleOnClick,
 		...props,
 		children: [
@@ -103452,7 +103453,7 @@ Button.displayName = "Button";
 //#endregion
 //#region src/components/checkbox/index.tsx
-const Checkbox = (0, react.forwardRef)(({ size: size$3 = "md", className, error: error$1, mediumBoldText, label, indeterminate = false, disabled = false,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+const CheckboxComponent = ({ size: size$3 = "md", className, error: error$1, mediumBoldText, label, indeterminate = false, disabled = false,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	className: cn("relative grid gap-2", className),
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 		className: cn("flex cursor-pointer items-center gap-3"),
@@ -103464,8 +103465,8 @@ const Checkbox = (0, react.forwardRef)(({ size: size$3 = "md", className, error:
 					type: "checkbox",
 					"data-testid": "checkbox",
 					disabled,
-					ref,
-					...props
+					...props,
+					ref
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 					className: cn("pointer-events-none absolute top-1/2 left-1/2 hidden -translate-x-1/2 -translate-y-1/2 stroke-white outline-hidden peer-checked:block", { "stroke-gray-300": disabled }, size$3 === "sm" ? "size-3" : "size-4"),
@@ -103503,17 +103504,35 @@ const Checkbox = (0, react.forwardRef)(({ size: size$3 = "md", className, error:
 		className: "text-xs font-normal text-red-500",
 		children: error$1
 	})]
-}));
-Checkbox.displayName = "Checkbox";
+});
+const Checkbox = (0, react.forwardRef)(CheckboxComponent);
 //#endregion
 //#region src/components/divider/index.tsx
 const Divider = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-component": "divider",
-	className: clsx_default("block h-px w-full bg-[#CCCCCC]", className),
+	className: clsx_default("block h-px w-full bg-gray-200", className),
 	...props
 });
+//#endregion
+//#region src/components/favouriteButton/index.tsx
+const FavouriteButton = (0, react.forwardRef)((props, ref) => {
+	const { onClick, favourite, iconFilled, iconOutline, favouriteTitle, iconColorSelected = "text-pink", iconColor = "text-gray-800", iconSize, className = "", styleVariant = "transparent", children,...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
+		onClick,
+		"data-component": "favouriteButton",
+		title: favouriteTitle || "Favorite",
+		styleVariant,
+		className: `${favourite ? iconColorSelected : iconColor} ${className}`.trim(),
+		iconSize,
+		ref,
+		icon: favourite ? iconFilled ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconHeartFilled, {}) : iconOutline ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconHeart, {}),
+		...rest,
+		children
+	});
+});
 //#endregion
 //#region src/components/filters/FilterButton.tsx
 const FilterButton = ({ onClick, hasFilters, reset, filtersText, resetText }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -111927,9 +111946,9 @@ var jsx = function jsx$3(type, props) {
 	}
 	return react.createElement.apply(null, createElementArgArray);
 };
-(function(_jsx$65) {
+(function(_jsx$66) {
 	var JSX;
-	(function(_JSX) {})(JSX || (JSX = _jsx$65.JSX || (_jsx$65.JSX = {})));
+	(function(_JSX) {})(JSX || (JSX = _jsx$66.JSX || (_jsx$66.JSX = {})));
 })(jsx || (jsx = {}));
 var Global = /* @__PURE__ */ withEmotionCache(function(props, cache) {
 	var styles = props.styles;
@@ -137800,37 +137819,8 @@ function isClassComponent(Component$1) {
 * @returns {boolean}
 */
 function isForwardRefComponent(Component$1) {
-	return !!(typeof Component$1 === "object" && Component$1.$$typeof && (Component$1.$$typeof.toString() === "Symbol(react.forward_ref)" || Component$1.$$typeof.description === "react.forward_ref"));
-}
-/**
-* Check if a component is a memoized component.
-* @param Component
-* @returns {boolean}
-*/
-function isMemoComponent(Component$1) {
-	return !!(typeof Component$1 === "object" && Component$1.$$typeof && (Component$1.$$typeof.toString() === "Symbol(react.memo)" || Component$1.$$typeof.description === "react.memo"));
-}
-/**
-* Check if a component can safely receive a ref prop.
-* This includes class components, forwardRef components, and memoized components
-* that wrap forwardRef or class components.
-* @param Component
-* @returns {boolean}
-*/
-function canReceiveRef(Component$1) {
-	if (isClassComponent(Component$1)) {
-		return true;
-	}
-	if (isForwardRefComponent(Component$1)) {
-		return true;
-	}
-	if (isMemoComponent(Component$1)) {
-		const wrappedComponent = Component$1.type;
-		if (wrappedComponent) {
-			return isClassComponent(wrappedComponent) || isForwardRefComponent(wrappedComponent);
-		}
-	}
-	return false;
+	var _a;
+	return !!(typeof Component$1 === "object" && ((_a = Component$1.$$typeof) === null || _a === void 0 ? void 0 : _a.toString()) === "Symbol(react.forward_ref)");
 }
 /**
 * Check if we're running React 19+ by detecting if function components support ref props
@@ -137888,15 +137878,19 @@ var ReactRenderer = class {
 		const props = this.props;
 		const editor = this.editor;
 		const isReact19 = isReact19Plus();
-		const componentCanReceiveRef = canReceiveRef(Component$1);
+		const isClassComp = isClassComponent(Component$1);
+		const isForwardRefComp = isForwardRefComponent(Component$1);
 		const elementProps = { ...props };
-		if (elementProps.ref && !(isReact19 || componentCanReceiveRef)) {
-			delete elementProps.ref;
-		}
-		if (!elementProps.ref && (isReact19 || componentCanReceiveRef)) {
-			elementProps.ref = (ref) => {
-				this.ref = ref;
-			};
+		if (!elementProps.ref) {
+			if (isReact19) {
+				elementProps.ref = (ref) => {
+					this.ref = ref;
+				};
+			} else if (isClassComp || isForwardRefComp) {
+				elementProps.ref = (ref) => {
+					this.ref = ref;
+				};
+			}
 		}
 		this.reactElement = react.default.createElement(Component$1, { ...elementProps });
 		(_a = editor === null || editor === void 0 ? void 0 : editor.contentComponent) === null || _a === void 0 ? void 0 : _a.setRenderer(this.id, this);
@@ -140314,6 +140308,152 @@ const WysiwygEditor = (0, react.forwardRef)(({ id, content, className, placehold
 	})] });
 });
+//#endregion
+//#region src/theme/variables.ts
+const CSS_VARIABLE_KEYS = [
+	"--color-primary",
+	"--color-primary-light",
+	"--color-primary-dark",
+	"--color-black",
+	"--color-navy-blue",
+	"--color-white",
+	"--color-accent-blue",
+	"--color-ultra-light-blue",
+	"--color-green",
+	"--color-green-light",
+	"--color-pink",
+	"--color-purple",
+	"--color-orange",
+	"--color-warning",
+	"--color-warning-light",
+	"--color-warning-dark"
+];
+const getCSSVariable = (variable) => {
+	if (typeof window !== "undefined") {
+		return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+	}
+	return "";
+};
+const setCSSVariable = (variable, value) => {
+	if (typeof window !== "undefined") {
+		document.documentElement.style.setProperty(variable, value);
+	}
+};
+//#endregion
+//#region src/theme/fonts.ts
+const gothamFont = (0, next_font_local.default)({
+	src: [
+		{
+			path: "../assets/fonts/woff2/Gotham-Thin_Web.woff2",
+			weight: "100",
+			style: "normal"
+		},
+		{
+			path: "../assets/fonts/woff2/Gotham-ThinItalic_Web.woff2",
+			weight: "100",
+			style: "italic"
+		},
+		{
+			path: "../assets/fonts/woff2/Gotham-XLight_Web.woff2",
+			weight: "200",
+			style: "normal"
+		},
+		{
+			path: "../assets/fonts/woff2/Gotham-XLightItalic_Web.woff2",
+			weight: "200",
+			style: "italic"
+		},
+		{
+			path: "../assets/fonts/woff2/Gotham-Light_Web.woff2",
+			weight: "300",
+			style: "normal"
+		},
+		{
+			path: "../assets/fonts/woff2/Gotham-LightItalic_Web.woff2",
+			weight: "300",
+			style: "italic"
+		},
+		{
+			path: "../assets/fonts/woff2/Gotham-Book_Web.woff2",
+			weight: "400",
+			style: "normal"
+		},
+		{
+			path: "../assets/fonts/woff2/Gotham-BookItalic_Web.woff2",
+			weight: "400",
+			style: "italic"
+		},
+		{
+			path: "../assets/fonts/woff2/Gotham-Medium_Web.woff2",
+			weight: "500",
+			style: "normal"
+		},
+		{
+			path: "../assets/fonts/woff2/Gotham-MediumItalic_Web.woff2",
+			weight: "500",
+			style: "italic"
+		},
+		{
+			path: "../assets/fonts/woff2/Gotham-Bold_Web.woff2",
+			weight: "700",
+			style: "normal"
+		},
+		{
+			path: "../assets/fonts/woff2/Gotham-BoldItalic_Web.woff2",
+			weight: "700",
+			style: "italic"
+		},
+		{
+			path: "../assets/fonts/woff2/Gotham-Black_Web.woff2",
+			weight: "800",
+			style: "normal"
+		},
+		{
+			path: "../assets/fonts/woff2/Gotham-BlackItalic_Web.woff2",
+			weight: "800",
+			style: "italic"
+		},
+		{
+			path: "../assets/fonts/woff2/Gotham-Ultra_Web.woff2",
+			weight: "900",
+			style: "normal"
+		},
+		{
+			path: "../assets/fonts/woff2/Gotham-UltraItalic_Web.woff2",
+			weight: "900",
+			style: "italic"
+		}
+	],
+	variable: "--font-gotham",
+	display: "swap",
+	preload: true
+});
+const FONT_FAMILIES = {
+	gotham: "var(--font-gotham), Gotham, ui-sans-serif, system-ui, sans-serif",
+	sans: "ui-sans-serif, system-ui, sans-serif",
+	serif: "ui-serif, Georgia, serif",
+	mono: "ui-monospace, SFMono-Regular, Consolas, monospace"
+};
+const FONT_WEIGHTS = {
+	thin: "100",
+	extraLight: "200",
+	light: "300",
+	normal: "400",
+	medium: "500",
+	semiBold: "600",
+	bold: "700",
+	extraBold: "800",
+	black: "900"
+};
+const FONT_CLASS_NAMES = {
+	gotham: gothamFont.className,
+	sans: "font-sans",
+	serif: "font-serif",
+	mono: "font-mono"
+};
+var fonts_default = gothamFont;
 //#endregion
 exports.AccordionItem = AccordionItem;
 exports.AccordionWrapper = AccordionWrapper;
@@ -140327,8 +140467,13 @@ exports.Badge = Badge;
 exports.BigBadge = BigBadge;
 exports.BreadCrumb = BreadCrumb;
 exports.Button = Button;
+exports.CSS_VARIABLE_KEYS = CSS_VARIABLE_KEYS;
 exports.Checkbox = Checkbox;
 exports.Divider = Divider;
+exports.FONT_CLASS_NAMES = FONT_CLASS_NAMES;
+exports.FONT_FAMILIES = FONT_FAMILIES;
+exports.FONT_WEIGHTS = FONT_WEIGHTS;
+exports.FavouriteButton = FavouriteButton;
 exports.Filters = Filters;
 exports.GoogleAppButtonIcon = GoogleAppButtonIcon;
 exports.HR = HR;
@@ -140375,4 +140520,7 @@ exports.UnorderedListItem = UnorderedListItem;
 exports.UnstyledButton = UnstyledButton;
 exports.WysiwygEditor = WysiwygEditor;
 exports.buttonVariants = buttonVariants;
+exports.getCSSVariable = getCSSVariable;
+exports.gothamFont = gothamFont;
+exports.setCSSVariable = setCSSVariable;
 //# sourceMappingURL=index.cjs.map