@sudobility/components 2.0.3

package/README.md

@@ -0,0 +1,169 @@
+# @johnqh/mail-box-components
+
+A comprehensive React component library and design system for building modern web applications.
+
+## Features
+
+- 🎨 **Complete Design System** - Professional design tokens, colors, typography
+- 🧩 **20+ UI Components** - Forms, modals, cards, alerts, and more
+- ♿ **Accessibility First** - Built with Radix UI primitives
+- 🌙 **Dark Mode Support** - Full dark/light theme support
+- 📱 **Responsive Design** - Mobile-first approach
+- 🎯 **TypeScript** - Fully typed with excellent IntelliSense
+- 🎭 **Tailwind CSS** - Utility-first styling with customization
+- ⚡ **Performance Optimized** - Tree-shakeable and lightweight
+
+## Installation
+
+### Quick Start
+
+```bash
+npm install @johnqh/mail-box-components
+```
+
+### Required Peer Dependencies
+
+The library requires these peer dependencies to be installed:
+
+```bash
+npm install react@^18.0.0 react-dom@^18.0.0 \
+  @heroicons/react@^2.0.0 \
+  @radix-ui/react-alert-dialog@^1.0.0 \
+  @radix-ui/react-dialog@^1.0.0 \
+  @radix-ui/react-label@^2.0.0 \
+  @radix-ui/react-select@^2.0.0 \
+  @radix-ui/react-slot@^1.0.0 \
+  @radix-ui/react-switch@^1.0.0 \
+  @radix-ui/react-tabs@^1.0.0 \
+  class-variance-authority@^0.7.0 \
+  clsx@^2.1.1 \
+  tailwind-merge@^3.0.0
+```
+
+### Optional Dependencies
+
+Install these only if you need specific features:
+
+```bash
+# For internationalization (LanguageSelector, CodeBlock)
+npm install react-i18next@^16.0.0 i18next@^25.0.0
+
+# For routing (SmartLink, Breadcrumb)
+npm install react-router-dom@^7.0.0
+
+# For SEO/Meta tags (AIMeta)
+npm install react-helmet-async@^2.0.0
+
+# For social sharing (Breadcrumb sharing feature)
+npm install react-share@^5.0.0
+
+# For performance monitoring
+npm install web-vitals@^5.0.0
+
+# For additional icons
+npm install lucide-react@^0.400.0
+```
+
+### Complete Installation (All Features)
+
+To install everything at once:
+
+```bash
+npm install @johnqh/mail-box-components \
+  react@^18.0.0 react-dom@^18.0.0 \
+  @heroicons/react@^2.0.0 \
+  @radix-ui/react-alert-dialog@^1.0.0 \
+  @radix-ui/react-dialog@^1.0.0 \
+  @radix-ui/react-label@^2.0.0 \
+  @radix-ui/react-select@^2.0.0 \
+  @radix-ui/react-slot@^1.0.0 \
+  @radix-ui/react-switch@^1.0.0 \
+  @radix-ui/react-tabs@^1.0.0 \
+  class-variance-authority@^0.7.0 \
+  clsx@^2.1.1 \
+  tailwind-merge@^3.0.0 \
+  react-i18next@^16.0.0 \
+  i18next@^25.0.0 \
+  react-router-dom@^7.0.0 \
+  react-helmet-async@^2.0.0 \
+  react-share@^5.0.0 \
+  web-vitals@^5.0.0 \
+  lucide-react@^0.400.0
+```
+
+> **Migrating from v1.x?** See [MIGRATION.md](./MIGRATION.md) for detailed upgrade instructions.
+
+## Usage
+
+```tsx
+import { Button, Card, Alert } from '@johnqh/mail-box-components'
+
+function App() {
+  return (
+    <div>
+      <Card>
+        <Button variant="primary">Click me</Button>
+        <Alert variant="success">Success message</Alert>
+      </Card>
+    </div>
+  )
+}
+```
+
+## Components
+
+### Form Controls
+- `Button` - Feature-rich button with variants and animations
+- `Input` - Form input with validation states
+- `Label` - Accessible form labels
+- `Select` - Dropdown select component
+- `Switch` - Toggle switch component
+- `Tabs` - Tabbed interface component
+
+### Layout & Display
+- `Card` - Flexible card component
+- `Modal` - Accessible modal dialogs
+- `Alert` - Alert messages with multiple states
+- `Spinner` - Loading spinners
+- `LoadingState` - Comprehensive loading states
+- `EmptyState` - Empty state placeholders
+
+### Navigation
+- `Breadcrumb` - SEO-optimized breadcrumbs
+- `ConfirmationDialog` - Confirmation prompts
+
+### Typography
+- `Typography` - Text components (PageTitle, SectionTitle, BodyText, TextLink)
+
+## Design System
+
+The library includes a complete design system with:
+
+- **Colors** - Semantic color palette with dark mode support
+- **Typography** - Consistent text styles and hierarchy
+- **Spacing** - Standardized spacing scale
+- **Shadows** - Elevation system
+- **Tokens** - Design tokens for consistency
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build library
+npm run build
+
+# Run tests
+npm test
+
+# Lint code
+npm run lint
+```
+
+## License
+
+MIT

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+export declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void): void;
+//# sourceMappingURL=useClickOutside.d.ts.map

package/dist/hooks/useClickOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../src/hooks/useClickOutside.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACjE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,QAmBhC"}

package/dist/hooks/useCodeLoader.d.ts

@@ -0,0 +1,8 @@
+interface UseCodeLoaderReturn {
+    code: string;
+    loading: boolean;
+    error: string | null;
+}
+export declare const useCodeLoader: (filename: string) => UseCodeLoaderReturn;
+export {};
+//# sourceMappingURL=useCodeLoader.d.ts.map

package/dist/hooks/useCodeLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCodeLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useCodeLoader.ts"],"names":[],"mappings":"AAEA,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,GAAI,UAAU,MAAM,KAAG,mBAkChD,CAAC"}

package/dist/hooks/useCopyToClipboard.d.ts

@@ -0,0 +1,64 @@
+export interface CopyToClipboardOptions {
+    successDuration?: number;
+    onSuccess?: (text: string) => void;
+    onError?: (error: Error) => void;
+}
+export interface CopyToClipboardResult {
+    copiedValue: string | null;
+    copyToClipboard: (text: string) => Promise<boolean>;
+    isCopied: (text: string) => boolean;
+    resetCopiedState: () => void;
+}
+/**
+ * Hook for managing copy-to-clipboard functionality with feedback
+ *
+ * Features:
+ * - Async clipboard API with fallback
+ * - Visual feedback state management
+ * - Automatic timeout for feedback reset
+ * - Error handling
+ * - Multiple copy tracking
+ *
+ * @param options - Configuration options
+ * @returns Object with copy function and state
+ *
+ * @example
+ * const { copyToClipboard, isCopied } = useCopyToClipboard({
+ *   successDuration: 2000,
+ *   onSuccess: (text) => console.log('Copied:', text)
+ * });
+ *
+ * // In component
+ * <button onClick={() => copyToClipboard('Hello World')}>
+ *   {isCopied('Hello World') ? '✓ Copied!' : 'Copy'}
+ * </button>
+ */
+export declare const useCopyToClipboard: (options?: CopyToClipboardOptions) => CopyToClipboardResult;
+/**
+ * Hook for managing multiple copy states simultaneously
+ *
+ * Useful when you have multiple copyable items on the same page
+ * and want to track their individual copy states.
+ *
+ * @param options - Configuration options
+ * @returns Object with copy function and state management
+ *
+ * @example
+ * const { copyToClipboard, isCopied } = useMultipleCopyToClipboard();
+ *
+ * // Each item has its own copy state
+ * <button onClick={() => copyToClipboard('code1', 'item1')}>
+ *   {isCopied('item1') ? '✓ Copied!' : 'Copy'}
+ * </button>
+ * <button onClick={() => copyToClipboard('code2', 'item2')}>
+ *   {isCopied('item2') ? '✓ Copied!' : 'Copy'}
+ * </button>
+ */
+export declare const useMultipleCopyToClipboard: (options?: CopyToClipboardOptions) => {
+    copiedStates: Record<string, boolean>;
+    copyToClipboard: (text: string, key: string) => Promise<boolean>;
+    isCopied: (key: string) => boolean;
+    resetCopiedState: (key?: string) => void;
+};
+export default useCopyToClipboard;
+//# sourceMappingURL=useCopyToClipboard.d.ts.map

package/dist/hooks/useCopyToClipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCopyToClipboard.d.ts","sourceRoot":"","sources":["../../src/hooks/useCopyToClipboard.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACpD,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,kBAAkB,GAC7B,UAAS,sBAA2B,KACnC,qBAmEF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,0BAA0B,GACrC,UAAS,sBAA2B;;4BAOrB,MAAM,OAAO,MAAM,KAAG,OAAO,CAAC,OAAO,CAAC;oBA6C7C,MAAM,KAAG,OAAO;6BAMoB,MAAM;CAcnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}