@julseb-lib/react 0.1.11 → 0.1.13

package/README.md

@@ -1,19 +1,206 @@
-# React components library
+# @julseb-lib/react
 
-A small components library for React.
+A comprehensive React component library built with TypeScript and Tailwind CSS, providing a complete set of UI components for modern web applications.
 
-## Install in your project
+## Features
+
+🎨 Modern Design System - Built with Tailwind CSS v4 and custom design tokens
+
+📱 Responsive Components - Mobile-first approach with flexible layouts
+
+♿ Accessibility First - WCAG compliant components with proper ARIA support
+
+🎯 TypeScript Native - Full type safety with comprehensive TypeScript definitions
+
+🔧 Highly Customizable - Extensive prop interfaces for maximum flexibility
+
+📦 Tree Shakeable - Import only what you need
+
+🎭 Icon Integration - Built-in support for React Icons
+
+🌗 Theme Support - Custom CSS variables and design tokens
+
+## Installation
 
 ```shell
-npm i @julseb-lib/react
+# npm
+npm install @julseb-lib/react
+
+# yarn
+yarn add @julseb-lib/react
+
+# pnpm
+pnpm add @julseb-lib/react
+```
+
+### Setup
+
+Import the CSS file in your main application file:
+
+```typescript
+// main.tsx or App.tsx
+import '@julseb-lib/react/index.css'
+```
+
+## Type Exports
+
+Access comprehensive TypeScript definitions:
+
+```typescript
+import type { 
+  ILibButton, 
+  ILibText, 
+  LibAllColors,
+  LibSpacers 
+} from '@julseb-lib/react/types'
+```
+
+Component-specific prop types:
+
+```typescript
+import type { 
+  ILibButton,
+  ILibInput,
+  ILibModal 
+} from '@julseb-lib/react/component-props'
+```
+
+## Styling & Customization
+
+### CSS Variables
+
+The library uses CSS custom properties for theming:
+
+```css
+:root {
+  --color-primary-500: #3b82f6;
+  --color-secondary-500: #06b6d4;
+  --spacer-xs: 8px;
+  --spacer-sm: 16px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+}
+```
+
+### Design Tokens
+
+Access design tokens programmatically:
+
+```typescript
+import { COLORS, SPACERS, RADIUS } from '@julseb-lib/react'
+
+// Use in components
+<div style={{ color: COLORS.PRIMARY_500 }}>
+  Custom styled content
+</div>
+```
+
+### Tailwind Classes
+
+All components use Tailwind CSS classes that can be extended:
+
+```typescript
+<Button className="hover:scale-105 transition-transform">
+  Custom Button
+</Button>
+```
+
+## Advanced Usage
+
+Form Handling
+
+```typescript
+import { Input, Button, Flexbox } from '@julseb-lib/react'
+
+function ContactForm() {
+  return (
+    <form>
+      <Flexbox direction="column" gap="md">
+        <Input 
+          label="Email"
+          type="email"
+          required
+          validation="Please enter a valid email"
+        />
+        <Input 
+          label="Message"
+          element="textarea"
+          rows={4}
+        />
+        <Button type="submit" variant="primary">
+          Send Message
+        </Button>
+      </Flexbox>
+    </form>
+  )
+}
+```
+
+Modal with Form
+
+```typescript
+import { Modal, Button, Text } from '@julseb-lib/react'
+import { useState } from 'react'
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>
+        Open Modal
+      </Button>
+      
+      <Modal 
+        isOpen={isOpen} 
+        onClose={() => setIsOpen(false)}
+        title="Contact Form"
+      >
+        <Text>Modal content goes here</Text>
+      </Modal>
+    </>
+  )
+}
 ```
 
-or
+## Browser Support
+
+Chrome (latest)
+
+Firefox (latest)
+
+Safari (latest)
+
+Edge (latest)
+
+## Contributing
+
+Contributions are welcome! Please read our contributing guidelines before submitting PRs.
+
+## Development
 
 ```shell
-yarn add @julseb-lib/react
+# Install dependencies
+yarn install
+
+# Start development server
+yarn dev
+
+# Run type checking
+yarn check-errors
+
+# Build library
+yarn build
 ```
 
-## Full documentation
+### License
+
+MIT © [Julien Sebag](https://julien-sebag.com)
+
+### Links
+
+[Documentation](https://doc-julseb-lib-react.vercel.app/)
+
+[GitHub Repository](https://github.com/JulSeb42/julseb-lib-react)
 
-Find the full documentation here: [https://julseb-lib-documentation.vercel.app/](https://julseb-lib-documentation.vercel.app/).
+[NPM Package](https://www.npmjs.com/package/@julseb-lib/react)

package/dist/index.css

@@ -4,7 +4,8 @@
 
 :root {
 	--font-lato: "Lato", sans-serif;
-	--font-family-body: var(--font-lato);
+	--font-sans: var(--font-lato);
+	--font-mono: monospace;
 }
 
 @theme {
@@ -78,10 +79,6 @@
 	--color-background: var(--color-white);
 	--color-font: var(--color-black);
 
-	--font-lato: "Lato", sans-serif;
-	--font-family-body: var(--font-lato);
-	--font-family-code: monospace;
-
 	--font-weight-thin: 100;
 	--font-weight-light: 300;
 	--font-weight-normal: 400;
@@ -103,7 +100,16 @@
 		rgba(255, 255, 255, 0.35) 100%
 	);
 
-	--rounded-full: calc(infinity * 1px);
+	--font-sans: var(--font-lato);
+	--font-mono: monospace;
+
+	--spacer-2xs: 4px;
+	--spacer-xs: 8px;
+	--spacer-sm: 12px;
+	--spacer-md: 16px;
+	--spacer-lg: 24px;
+	--spacer-xl: 32px;
+	--spacer-2xl: 48px;
 
 	--main-default: 600px;
 	--main-large: 800px;
@@ -112,64 +118,54 @@
 	--aside-default: 250px;
 	--aside-small: 200px;
 
-	--shadow-2xl:
-		0px 10px 14px 8px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.3);
-	--shadow-xl:
-		0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
-	--shadow-lg:
-		0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
-	--shadow-md:
-		0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
-	--shadow-sm:
-		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+	--shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 	--shadow-xs:
 		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
-	--shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	--shadow-sm:
+		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+	--shadow-md:
+		0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
+	--shadow-lg:
+		0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
+	--shadow-xl:
+		0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
+	--shadow-2xl:
+		0px 10px 14px 8px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.3);
 	--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);
 	--shadow-none: none;
 
-	--spacer-2xs: 4px;
-	--spacer-xs: 8px;
-	--spacer-sm: 12px;
-	--spacer-md: 16px;
-	--spacer-lg: 24px;
-	--spacer-xl: 32px;
-	--spacer-2xl: 48px;
-
 	--animate-cubic-bezier: cubic-bezier(0.5, 0, 0.5, 1);
 
-	--font-size-display-h1: 5rem;
-	--font-size-display-h2: 4rem;
-	--font-size-display-h3: 3.5rem;
-	--font-size-display-h4: 3rem;
-	--font-size-display-h5: 2.5rem;
-	--font-size-h1: 2.5rem;
-	--font-size-h2: 2rem;
-	--font-size-h3: 1.8rem;
-	--font-size-h4: 1.5rem;
-	--font-size-h5: 1.3rem;
-	--font-size-h6: 1.1rem;
-	--font-size-body: 1rem;
-	--font-size-small: 0.875rem;
-}
-
-@layer base {
-	html,
-	body {
-		font-family: var(--font-family-body);
-	}
+	--transition-short: all 200ms ease;
+	--transition-long: all 500ms ease;
+	--transition-bezier: all 500ms cubic-bezier(0.25, 0.75, 0, 0.66);
+
+	--text-display-h1: 5rem;
+	--text-display-h2: 4rem;
+	--text-display-h3: 3.5rem;
+	--text-display-h4: 3rem;
+	--text-display-h5: 2.5rem;
+	--text-h1: 2.5rem;
+	--text-h2: 2rem;
+	--text-h3: 1.8rem;
+	--text-h4: 1.5rem;
+	--text-h5: 1.3rem;
+	--text-h6: 1.1rem;
+	--text-body: 1rem;
+	--text-small: 0.875rem;
 }
 
 /*====================== Common styles ======================*/
 
 html,
 body {
-	font-family: var(--font-family-body) !important;
+	font-family: var(--font-sans);
 	width: 100%;
 	min-height: 100vh;
 	background-color: var(--color-background);
 	color: var(--color-font);
 	max-width: 100dvw;
+	line-height: var(--leading-normal);
 
 	&.dark {
 		--color-background: var(--color-black);
@@ -184,7 +180,7 @@ body {
 a,
 button {
 	cursor: pointer;
-	transition: all 200ms ease;
+	transition: var(--transition-short);
 
 	&:disabled {
 		cursor: not-allowed;
@@ -198,73 +194,73 @@ button {
 		max-width: 100%;
 	}
 
-	.no-scrollbar::-webkit-scrollbar {
-		display: none;
-	}
-
 	.no-scrollbar {
 		-ms-overflow-style: none;
 		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
 	}
 
 	/*====================== Fonts ======================*/
 
 	.lato-thin {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-thin);
 		font-style: normal;
 	}
 
 	.lato-light {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-light);
 		font-style: normal;
 	}
 
 	.lato-regular {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-normal);
 		font-style: normal;
 	}
 
 	.lato-bold {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-bold);
 		font-style: normal;
 	}
 
 	.lato-black {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-black);
 		font-style: normal;
 	}
 
 	.lato-thin-italic {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-thin);
 		font-style: italic;
 	}
 
 	.lato-light-italic {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-light);
 		font-style: italic;
 	}
 
 	.lato-regular-italic {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-normal);
 		font-style: italic;
 	}
 
 	.lato-bold-italic {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-bold);
 		font-style: italic;
 	}
 
 	.lato-black-italic {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-black);
 		font-style: italic;
 	}
@@ -363,24 +359,6 @@ button {
 		}
 	}
 
-	.animate-shine {
-		position: relative;
-		overflow: hidden;
-
-		&:before {
-			content: "";
-			position: absolute;
-			top: -200px;
-			bottom: -200px;
-			background-color: var(--color-white);
-			opacity: 0.7;
-			filter: blur(20px);
-			width: 100px;
-			transform: skew(-15deg);
-			animation: shine 2000ms ease-in-out infinite;
-		}
-	}
-
 	@keyframes spin {
 		from {
 			transform: rotate(0deg);
@@ -391,15 +369,6 @@ button {
 		}
 	}
 
-	.animate-spin {
-		animation: spin 1200ms linear infinite;
-	}
-
-	.animate-bezier {
-		animation: spin 1200ms var(--animate-cubic-bezier) infinite;
-		animation-delay: var(--spinner-delay);
-	}
-
 	@keyframes loader-pulse {
 		0%,
 		100% {
@@ -411,30 +380,6 @@ button {
 		}
 	}
 
-	.dot {
-		animation: loader-pulse 1200ms linear infinite;
-		animation-delay: var(--dot-delay);
-	}
-
-	input::-webkit-slider-thumb {
-		box-shadow: var(--shadow-lg);
-	}
-
-	@keyframes toast-timer-animation {
-		0% {
-			width: 100%;
-		}
-
-		100% {
-			width: 0;
-		}
-	}
-
-	.toast-timer {
-		animation: toast-timer-animation var(--toast-timer-duration) linear
-			forwards;
-	}
-
 	.Toastify__progress-bar--bg {
 		background-color: transparent !important;
 	}
@@ -448,8 +393,4 @@ button {
 			width: var(--meter-value);
 		}
 	}
-
-	.progress-bar-animated:before {
-		animation: progress-bar calc(var(--progress-speed) * 50ms) ease forwards;
-	}
 }