@lp-labs/ui-components 0.0.0-stage → 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,41 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.0] - 2024-11-06
+
+### Added
+
+- Initial release of @lp-labs/ui-components
+- Pre-built React components:
+  - Button (multiple variants: primary, secondary, danger, ghost)
+  - Card (with elevation and padding options)
+  - Input (with validation states and help text)
+  - Modal (with header, body, and footer sub-components)
+  - Badge (with multiple variants and sizes)
+  - Alert (with success, warning, danger, info variants)
+  - Dropdown (with menu items and dividers)
+  - Navbar (with brand, navigation, and toggle components)
+- Comprehensive theming system with CSS variables
+- Utility-first class names and helper functions
+- CSS-in-JS style utilities
+- Full TypeScript support with type definitions
+- Comprehensive CSS stylesheet with animations and responsive utilities
+- Accessible components following WCAG 2.1 AA standards
+- Dark mode theme support
+- Responsive design utilities
+- ESM and CommonJS distribution formats
+
+### Features
+
+- 🎨 Pre-built Components - Ready-to-use React components
+- ⚙️ Utility Classes - Flexible utility-first approach
+- 🎭 Theming System - CSS variables and theme provider
+- ♿ Accessibility - WCAG 2.1 AA compliant
+- 📦 Tree-shakeable - Only pay for what you use
+- 🔄 Type-safe - Full TypeScript support
+- 📱 Responsive - Mobile-first design
+- ✨ Dark Mode - Built-in theme switching

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Libin Prasanth
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,257 @@
-# Temporary Holding Version
+# @lp-labs/ui-components
+
+A comprehensive hybrid UI component library with built-in components, utilities, and theming support. Designed for React applications with a focus on accessibility, customization, and developer experience.
+
+## Features
+
+- 🎨 **Pre-built Components** - Ready-to-use components (Button, Card, Input, Modal, Navbar, Badge, Alert, Dropdown, etc.)
+- ⚙️ **Utility Classes** - Flexible utility-first approach for fine-grained control
+- 🎭 **Theming System** - Powerful customization with CSS variables and theme provider
+- ♿ **Accessible** - WCAG 2.1 AA compliant components
+- 📦 **Tree-shakeable** - Only pay for what you use
+- 🔄 **Framework Agnostic Core** - Utilities work anywhere, React components for React
+- 📱 **Responsive** - Mobile-first design approach
+- ✨ **TypeScript** - Full type safety and intellisense
+
+## Installation
+
+```bash
+npm install @lp-labs/ui-components
+```
+
+## Quick Start
+
+### Using Components
+
+```jsx
+import { Button, Card, Input } from '@lp-labs/ui-components/components';
+
+export function App() {
+  return (
+    <Card>
+      <h2>Welcome</h2>
+      <Input placeholder="Enter your name" />
+      <Button variant="primary">Submit</Button>
+    </Card>
+  );
+}
+```
+
+### Using Utilities
+
+```jsx
+import { cn, spacing, colors } from '@lp-labs/ui-components/utilities';
+
+export function MyComponent() {
+  return (
+    <div className={cn(
+      spacing.padding.medium,
+      colors.background.light,
+      'rounded-lg'
+    )}>
+      Content
+    </div>
+  );
+}
+```
+
+### Using Theme
+
+```jsx
+import { ThemeProvider, useTheme } from '@lp-labs/ui-components/theme';
+
+export function App() {
+  return (
+    <ThemeProvider theme="dark">
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+
+function MyComponent() {
+  const { colors, spacing } = useTheme();
+  return <div style={{ color: colors.primary }}>{/* ... */}</div>;
+}
+```
+
+## Available Components
+
+### Core Components
+
+- **Button** - Interactive button with multiple variants and sizes
+- **Card** - Container component with elevation support
+- **Input** - Text input with validation states
+- **Modal** - Dialog component with backdrop
+- **Navbar** - Navigation bar with responsive menu
+- **Badge** - Label component for status and categories
+- **Alert** - Notification/alert component
+- **Dropdown** - Dropdown menu component
+
+### Additional Components
+
+- **Tabs** - Tab navigation
+- **Progress** - Progress indicator
+- **Spinner** - Loading spinner
+- **Tooltip** - Hover tooltips
+- **Checkbox** - Checkbox input
+- **Radio** - Radio button input
+- **Select** - Dropdown select
+- **Textarea** - Multi-line input
+
+## Styling Approaches
+
+### CSS Modules (Recommended)
+
+```jsx
+import styles from '@lp-labs/ui-components/styles';
+import { Button } from '@lp-labs/ui-components/components';
+```
+
+### CSS Classes
+
+```jsx
+import '@lp-labs/ui-components/styles';
+import { Button } from '@lp-labs/ui-components/components';
+```
+
+### Utilities Only
+
+```jsx
+import { cn, spacing, colors, typography } from '@lp-labs/ui-components/utilities';
+```
+
+## Theming
+
+### Built-in Themes
+
+- **light** - Light color scheme
+- **dark** - Dark color scheme
+- **auto** - Follows system preference
+
+### Custom Theme
+
+```jsx
+import { ThemeProvider } from '@lp-labs/ui-components/theme';
+
+const customTheme = {
+  colors: {
+    primary: '#007bff',
+    secondary: '#6c757d',
+    // ...
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+  },
+};
+
+export function App() {
+  return (
+    <ThemeProvider theme={customTheme}>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+## Configuration
+
+### CSS Variables
+
+The library exposes all theme values as CSS variables:
+
+```css
+:root {
+  --color-primary: #007bff;
+  --color-secondary: #6c757d;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  /* ... more variables ... */
+}
+```
+
+### Customization
+
+Override CSS variables in your application:
+
+```css
+:root {
+  --color-primary: #ff0000;
+  --spacing-base: 8px;
+}
+```
+
+## API Documentation
+
+### Button
+
+```jsx
+<Button
+  variant="primary" // 'primary' | 'secondary' | 'danger' | 'ghost'
+  size="md" // 'sm' | 'md' | 'lg'
+  disabled={false}
+  onClick={handleClick}
+>
+  Click me
+</Button>
+```
+
+### Card
+
+```jsx
+<Card
+  elevation="md" // 'none' | 'sm' | 'md' | 'lg'
+  padding="md" // 'sm' | 'md' | 'lg'
+  border={true}
+>
+  Card content
+</Card>
+```
+
+### Input
+
+```jsx
+<Input
+  type="text"
+  placeholder="Enter text"
+  value={value}
+  onChange={handleChange}
+  error={false}
+  disabled={false}
+/>
+```
+
+### Modal
+
+```jsx
+<Modal open={isOpen} onClose={handleClose}>
+  <Modal.Header>Title</Modal.Header>
+  <Modal.Body>Content</Modal.Body>
+  <Modal.Footer>
+    <Button>Cancel</Button>
+    <Button variant="primary">Confirm</Button>
+  </Modal.Footer>
+</Modal>
+```
+
+## Browser Support
+
+- Chrome/Edge: Latest 2 versions
+- Firefox: Latest 2 versions
+- Safari: Latest 2 versions
+- Mobile browsers: Latest versions
+
+## Contributing
+
+Contributions are welcome! Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+## Support
+
+If this library is useful to you, consider supporting its maintenance with a [donation via PayPal](https://www.paypal.me/LibinPrasanth).
+
+## Author
+
+Created by [Libin Prasanth](https://www.linkedin.com/in/libinprasanth/). Connect on LinkedIn for updates and discussion.

package/dist/cjs/components/Accordion.d.ts

@@ -0,0 +1,78 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: Array<{
+    id: string;
+    title: string;
+    content: React.ReactNode;
+  }>;
+  allowMultiple?: boolean;
+}
+
+export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  (
+    {
+      items,
+      allowMultiple = false,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [openItems, setOpenItems] = React.useState<Set<string>>(new Set());
+
+    const toggleItem = (id: string) => {
+      const newOpen = new Set(openItems);
+      if (newOpen.has(id)) {
+        newOpen.delete(id);
+      } else {
+        if (!allowMultiple) {
+          newOpen.clear();
+        }
+        newOpen.add(id);
+      }
+      setOpenItems(newOpen);
+    };
+
+    return (
+      <div ref={ref} className={cn('border border-gray-200 rounded-lg', className)} {...props}>
+        {items.map((item, index) => (
+          <div
+            key={item.id}
+            className={cn(
+              'border-b border-gray-200',
+              index === items.length - 1 && 'border-b-0',
+            )}
+          >
+            <button
+              onClick={() => toggleItem(item.id)}
+              className="w-full px-4 py-4 text-left font-medium hover:bg-gray-50 flex justify-between items-center transition-colors"
+              aria-expanded={openItems.has(item.id)}
+            >
+              {item.title}
+              <svg
+                className={cn(
+                  'w-5 h-5 transition-transform',
+                  openItems.has(item.id) && 'transform rotate-180',
+                )}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+              </svg>
+            </button>
+            {openItems.has(item.id) && (
+              <div className="px-4 py-4 text-gray-700 border-t border-gray-200">
+                {item.content}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  },
+);
+
+Accordion.displayName = 'Accordion';

package/dist/cjs/components/Accordion.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: Array<{
+    id: string;
+    title: string;
+    content: React.ReactNode;
+  }>;
+  allowMultiple?: boolean;
+}
+
+export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  (
+    {
+      items,
+      allowMultiple = false,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [openItems, setOpenItems] = React.useState<Set<string>>(new Set());
+
+    const toggleItem = (id: string) => {
+      const newOpen = new Set(openItems);
+      if (newOpen.has(id)) {
+        newOpen.delete(id);
+      } else {
+        if (!allowMultiple) {
+          newOpen.clear();
+        }
+        newOpen.add(id);
+      }
+      setOpenItems(newOpen);
+    };
+
+    return (
+      <div ref={ref} className={cn('border border-gray-200 rounded-lg', className)} {...props}>
+        {items.map((item, index) => (
+          <div
+            key={item.id}
+            className={cn(
+              'border-b border-gray-200',
+              index === items.length - 1 && 'border-b-0',
+            )}
+          >
+            <button
+              onClick={() => toggleItem(item.id)}
+              className="w-full px-4 py-4 text-left font-medium hover:bg-gray-50 flex justify-between items-center transition-colors"
+              aria-expanded={openItems.has(item.id)}
+            >
+              {item.title}
+              <svg
+                className={cn(
+                  'w-5 h-5 transition-transform',
+                  openItems.has(item.id) && 'transform rotate-180',
+                )}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+              </svg>
+            </button>
+            {openItems.has(item.id) && (
+              <div className="px-4 py-4 text-gray-700 border-t border-gray-200">
+                {item.content}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  },
+);
+
+Accordion.displayName = 'Accordion';