@sudobility/monitoring-components 1.0.8

package/src/break-timer.tsx

@@ -0,0 +1,60 @@
+import { cn } from '@sudobility/components';
+
+/**
+ * UbreakUtimer Component
+ *
+ * A reusable UbreakUtimer component with full dark mode support.
+ * Optimized for accessibility and AI-assisted development.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UbreakUtimer className="custom-class" />
+ * ```
+ *
+ * @remarks
+ * This component supports:
+ * - Light and dark themes automatically
+ * - Responsive design
+ * - Accessibility features
+ * - TypeScript type safety
+ *
+ * @see {@link https://docs.example.com/components/break-timer}
+ */
+
+export interface UbreakUtimerProps {
+  /** Additional CSS classes */
+  className?: string;
+  /** Component children */
+  children?: React.ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Callback when component is interacted with */
+  onClick?: () => void;
+}
+
+export const UbreakUtimer = ({
+  className,
+  children,
+  disabled = false,
+  onClick,
+}: UbreakUtimerProps) => {
+  return (
+    <div
+      className={cn(
+        'p-4 rounded-lg border transition-colors',
+        'bg-white dark:bg-gray-900',
+        'border-gray-200 dark:border-gray-700',
+        'text-gray-900 dark:text-white',
+        disabled && 'opacity-50 cursor-not-allowed',
+        'hover:bg-gray-50 dark:hover:bg-gray-800',
+        className
+      )}
+      onClick={disabled ? undefined : onClick}
+      role='region'
+      aria-label='UbreakUtimer'
+    >
+      {children || 'UbreakUtimer Component'}
+    </div>
+  );
+};

package/src/copy-button.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { cn, useCopyToClipboard } from '@sudobility/components';
+import { ClipboardDocumentIcon, CheckIcon } from '@heroicons/react/24/outline';
+
+export interface CopyButtonProps {
+  /** Text to copy to clipboard */
+  text: string;
+  /** Button size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Button variant */
+  variant?: 'icon' | 'text' | 'outline';
+  /** Custom label (for text/outline variants) */
+  label?: string;
+  /** Custom success label (for text/outline variants) */
+  successLabel?: string;
+  /** Icon position (for text/outline variants) */
+  iconPosition?: 'left' | 'right';
+  /** Additional className */
+  className?: string;
+  /** Custom tooltip text */
+  title?: string;
+  /** Callback after successful copy */
+  onCopySuccess?: () => void;
+  /** Callback after copy error */
+  onCopyError?: (error: Error) => void;
+}
+
+/**
+ * CopyButton Component
+ *
+ * A button that copies text to the clipboard with visual feedback.
+ * Commonly used for copying IDs, addresses, code snippets, or URLs.
+ *
+ * @example
+ * ```tsx
+ * // Icon button (default)
+ * <CopyButton text="0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb" />
+ *
+ * // Text button with label
+ * <CopyButton
+ *   text="https://example.com?referral=abc123"
+ *   variant="text"
+ *   label="Copy Link"
+ *   successLabel="Copied!"
+ * />
+ *
+ * // Outline button
+ * <CopyButton
+ *   text={templateId}
+ *   variant="outline"
+ *   label="Copy ID"
+ * />
+ * ```
+ */
+export const CopyButton: React.FC<CopyButtonProps> = ({
+  text,
+  size = 'md',
+  variant = 'icon',
+  label = 'Copy',
+  successLabel = 'Copied!',
+  iconPosition = 'left',
+  className,
+  title,
+  onCopySuccess,
+  onCopyError,
+}) => {
+  const { copyToClipboard, isCopied } = useCopyToClipboard({
+    successDuration: 2000,
+    onSuccess: onCopySuccess,
+    onError: onCopyError,
+  });
+
+  const copied = isCopied(text);
+
+  const handleClick = () => {
+    copyToClipboard(text);
+  };
+
+  // Size configurations
+  const sizeClasses = {
+    sm: {
+      icon: 'h-3.5 w-3.5',
+      button: 'p-1',
+      text: 'text-xs px-2 py-1',
+    },
+    md: {
+      icon: 'h-4 w-4',
+      button: 'p-1.5',
+      text: 'text-sm px-3 py-1.5',
+    },
+    lg: {
+      icon: 'h-5 w-5',
+      button: 'p-2',
+      text: 'text-base px-4 py-2',
+    },
+  };
+
+  const sizeConfig = sizeClasses[size];
+  const Icon = copied ? CheckIcon : ClipboardDocumentIcon;
+
+  // Icon-only button
+  if (variant === 'icon') {
+    return (
+      <button
+        onClick={handleClick}
+        className={cn(
+          'inline-flex items-center justify-center rounded transition-colors',
+          copied
+            ? 'text-green-600 dark:text-green-400'
+            : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300',
+          sizeConfig.button,
+          className
+        )}
+        title={title || (copied ? 'Copied!' : 'Copy to clipboard')}
+        type='button'
+      >
+        <Icon className={sizeConfig.icon} />
+      </button>
+    );
+  }
+
+  // Text or outline button
+  const baseTextClasses = cn(
+    'inline-flex items-center gap-2 rounded font-medium transition-colors',
+    sizeConfig.text
+  );
+
+  const variantClasses = {
+    text: cn(
+      copied
+        ? 'text-green-600 dark:text-green-400'
+        : 'text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300'
+    ),
+    outline: cn(
+      'border',
+      copied
+        ? 'border-green-600 text-green-600 dark:border-green-400 dark:text-green-400'
+        : 'border-gray-300 text-gray-700 hover:border-gray-400 dark:border-gray-600 dark:text-gray-300 dark:hover:border-gray-500'
+    ),
+  };
+
+  const displayLabel = copied ? successLabel : label;
+
+  return (
+    <button
+      onClick={handleClick}
+      className={cn(baseTextClasses, variantClasses[variant], className)}
+      title={title || (copied ? 'Copied!' : 'Copy to clipboard')}
+      type='button'
+    >
+      {iconPosition === 'left' && <Icon className={sizeConfig.icon} />}
+      <span>{displayLabel}</span>
+      {iconPosition === 'right' && <Icon className={sizeConfig.icon} />}
+    </button>
+  );
+};

package/src/cursor-tracker.tsx

@@ -0,0 +1,60 @@
+import { cn } from '@sudobility/components';
+
+/**
+ * UcursorUtracker Component
+ *
+ * A reusable UcursorUtracker component with full dark mode support.
+ * Optimized for accessibility and AI-assisted development.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UcursorUtracker className="custom-class" />
+ * ```
+ *
+ * @remarks
+ * This component supports:
+ * - Light and dark themes automatically
+ * - Responsive design
+ * - Accessibility features
+ * - TypeScript type safety
+ *
+ * @see {@link https://docs.example.com/components/cursor-tracker}
+ */
+
+export interface UcursorUtrackerProps {
+  /** Additional CSS classes */
+  className?: string;
+  /** Component children */
+  children?: React.ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Callback when component is interacted with */
+  onClick?: () => void;
+}
+
+export const UcursorUtracker = ({
+  className,
+  children,
+  disabled = false,
+  onClick,
+}: UcursorUtrackerProps) => {
+  return (
+    <div
+      className={cn(
+        'p-4 rounded-lg border transition-colors',
+        'bg-white dark:bg-gray-900',
+        'border-gray-200 dark:border-gray-700',
+        'text-gray-900 dark:text-white',
+        disabled && 'opacity-50 cursor-not-allowed',
+        'hover:bg-gray-50 dark:hover:bg-gray-800',
+        className
+      )}
+      onClick={disabled ? undefined : onClick}
+      role='region'
+      aria-label='UcursorUtracker'
+    >
+      {children || 'UcursorUtracker Component'}
+    </div>
+  );
+};

package/src/gas-tracker.tsx

@@ -0,0 +1,60 @@
+import { cn } from '@sudobility/components';
+
+/**
+ * UgasUtracker Component
+ *
+ * A reusable UgasUtracker component with full dark mode support.
+ * Optimized for accessibility and AI-assisted development.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UgasUtracker className="custom-class" />
+ * ```
+ *
+ * @remarks
+ * This component supports:
+ * - Light and dark themes automatically
+ * - Responsive design
+ * - Accessibility features
+ * - TypeScript type safety
+ *
+ * @see {@link https://docs.example.com/components/gas-tracker}
+ */
+
+export interface UgasUtrackerProps {
+  /** Additional CSS classes */
+  className?: string;
+  /** Component children */
+  children?: React.ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Callback when component is interacted with */
+  onClick?: () => void;
+}
+
+export const UgasUtracker = ({
+  className,
+  children,
+  disabled = false,
+  onClick,
+}: UgasUtrackerProps) => {
+  return (
+    <div
+      className={cn(
+        'p-4 rounded-lg border transition-colors',
+        'bg-white dark:bg-gray-900',
+        'border-gray-200 dark:border-gray-700',
+        'text-gray-900 dark:text-white',
+        disabled && 'opacity-50 cursor-not-allowed',
+        'hover:bg-gray-50 dark:hover:bg-gray-800',
+        className
+      )}
+      onClick={disabled ? undefined : onClick}
+      role='region'
+      aria-label='UgasUtracker'
+    >
+      {children || 'UgasUtracker Component'}
+    </div>
+  );
+};

package/src/index.ts

@@ -0,0 +1,19 @@
+/**
+ * monitoring-components
+ *
+ * Specialized components for the monitoring domain
+ *
+ * @package @sudobility/monitoring-components
+ */
+
+export * from './break-timer';
+export * from './copy-button';
+export * from './cursor-tracker';
+export * from './gas-tracker';
+export * from './overtime-tracker';
+export * from './portal';
+export * from './recycling-tracker';
+export * from './show';
+export * from './sleep-tracker';
+export * from './time-tracker';
+export * from './water-intake';

package/src/overtime-tracker.tsx

@@ -0,0 +1,60 @@
+import { cn } from '@sudobility/components';
+
+/**
+ * UovertimeUtracker Component
+ *
+ * A reusable UovertimeUtracker component with full dark mode support.
+ * Optimized for accessibility and AI-assisted development.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UovertimeUtracker className="custom-class" />
+ * ```
+ *
+ * @remarks
+ * This component supports:
+ * - Light and dark themes automatically
+ * - Responsive design
+ * - Accessibility features
+ * - TypeScript type safety
+ *
+ * @see {@link https://docs.example.com/components/overtime-tracker}
+ */
+
+export interface UovertimeUtrackerProps {
+  /** Additional CSS classes */
+  className?: string;
+  /** Component children */
+  children?: React.ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Callback when component is interacted with */
+  onClick?: () => void;
+}
+
+export const UovertimeUtracker = ({
+  className,
+  children,
+  disabled = false,
+  onClick,
+}: UovertimeUtrackerProps) => {
+  return (
+    <div
+      className={cn(
+        'p-4 rounded-lg border transition-colors',
+        'bg-white dark:bg-gray-900',
+        'border-gray-200 dark:border-gray-700',
+        'text-gray-900 dark:text-white',
+        disabled && 'opacity-50 cursor-not-allowed',
+        'hover:bg-gray-50 dark:hover:bg-gray-800',
+        className
+      )}
+      onClick={disabled ? undefined : onClick}
+      role='region'
+      aria-label='UovertimeUtracker'
+    >
+      {children || 'UovertimeUtracker Component'}
+    </div>
+  );
+};

package/src/portal.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+export interface PortalProps {
+  /** Content to portal */
+  children: React.ReactNode;
+  /** Target container (defaults to document.body) */
+  container?: Element | null;
+}
+
+/**
+ * Portal Component
+ *
+ * Renders children into a DOM node outside the parent component's hierarchy.
+ * Useful for modals, tooltips, and overlays that need to break out of z-index stacking.
+ *
+ * @example
+ * ```tsx
+ * <Portal>
+ *   <Modal>Content</Modal>
+ * </Portal>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Portal container={customElement}>
+ *   <Tooltip>Tooltip content</Tooltip>
+ * </Portal>
+ * ```
+ */
+export const Portal: React.FC<PortalProps> = ({ children, container }) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  if (!mounted) return null;
+
+  const target = container || document.body;
+
+  return createPortal(children, target);
+};

package/src/recycling-tracker.tsx

@@ -0,0 +1,41 @@
+import { cn } from '@sudobility/components';
+
+/**
+ * RecyclingTracker Component
+ *
+ * Environmental/sustainability component with full dark mode support.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <RecyclingTracker className="custom-class" />
+ * ```
+ */
+export interface RecyclingTrackerProps {
+  className?: string;
+  children?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export const RecyclingTracker = ({
+  className,
+  children,
+  disabled,
+}: RecyclingTrackerProps) => {
+  return (
+    <div
+      className={cn(
+        'p-4 rounded-lg border transition-colors',
+        'bg-white dark:bg-gray-900',
+        'border-gray-200 dark:border-gray-700',
+        'text-gray-900 dark:text-white',
+        disabled && 'opacity-50 cursor-not-allowed',
+        className
+      )}
+      role='region'
+      aria-label='RecyclingTracker'
+    >
+      {children || 'RecyclingTracker Component'}
+    </div>
+  );
+};

package/src/show.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+export interface ShowProps {
+  /** Condition to evaluate */
+  when: boolean;
+  /** Content to show when condition is true */
+  children: React.ReactNode;
+  /** Fallback content when condition is false */
+  fallback?: React.ReactNode;
+}
+
+/**
+ * Show Component
+ *
+ * Conditional rendering component with optional fallback.
+ * Provides cleaner syntax than ternary operators for conditional UI.
+ *
+ * @example
+ * ```tsx
+ * <Show when={isLoading} fallback={<Content />}>
+ *   <Spinner />
+ * </Show>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Show when={user !== null}>
+ *   <WelcomeMessage user={user} />
+ * </Show>
+ * ```
+ */
+export const Show: React.FC<ShowProps> = ({
+  when,
+  children,
+  fallback = null,
+}) => {
+  return <>{when ? children : fallback}</>;
+};

package/src/sleep-tracker.tsx

@@ -0,0 +1,60 @@
+import { cn } from '@sudobility/components';
+
+/**
+ * UsleepUtracker Component
+ *
+ * A reusable UsleepUtracker component with full dark mode support.
+ * Optimized for accessibility and AI-assisted development.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UsleepUtracker className="custom-class" />
+ * ```
+ *
+ * @remarks
+ * This component supports:
+ * - Light and dark themes automatically
+ * - Responsive design
+ * - Accessibility features
+ * - TypeScript type safety
+ *
+ * @see {@link https://docs.example.com/components/sleep-tracker}
+ */
+
+export interface UsleepUtrackerProps {
+  /** Additional CSS classes */
+  className?: string;
+  /** Component children */
+  children?: React.ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Callback when component is interacted with */
+  onClick?: () => void;
+}
+
+export const UsleepUtracker = ({
+  className,
+  children,
+  disabled = false,
+  onClick,
+}: UsleepUtrackerProps) => {
+  return (
+    <div
+      className={cn(
+        'p-4 rounded-lg border transition-colors',
+        'bg-white dark:bg-gray-900',
+        'border-gray-200 dark:border-gray-700',
+        'text-gray-900 dark:text-white',
+        disabled && 'opacity-50 cursor-not-allowed',
+        'hover:bg-gray-50 dark:hover:bg-gray-800',
+        className
+      )}
+      onClick={disabled ? undefined : onClick}
+      role='region'
+      aria-label='UsleepUtracker'
+    >
+      {children || 'UsleepUtracker Component'}
+    </div>
+  );
+};

package/src/time-tracker.tsx

@@ -0,0 +1,60 @@
+import { cn } from '@sudobility/components';
+
+/**
+ * UtimeUtracker Component
+ *
+ * A reusable UtimeUtracker component with full dark mode support.
+ * Optimized for accessibility and AI-assisted development.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UtimeUtracker className="custom-class" />
+ * ```
+ *
+ * @remarks
+ * This component supports:
+ * - Light and dark themes automatically
+ * - Responsive design
+ * - Accessibility features
+ * - TypeScript type safety
+ *
+ * @see {@link https://docs.example.com/components/time-tracker}
+ */
+
+export interface UtimeUtrackerProps {
+  /** Additional CSS classes */
+  className?: string;
+  /** Component children */
+  children?: React.ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Callback when component is interacted with */
+  onClick?: () => void;
+}
+
+export const UtimeUtracker = ({
+  className,
+  children,
+  disabled = false,
+  onClick,
+}: UtimeUtrackerProps) => {
+  return (
+    <div
+      className={cn(
+        'p-4 rounded-lg border transition-colors',
+        'bg-white dark:bg-gray-900',
+        'border-gray-200 dark:border-gray-700',
+        'text-gray-900 dark:text-white',
+        disabled && 'opacity-50 cursor-not-allowed',
+        'hover:bg-gray-50 dark:hover:bg-gray-800',
+        className
+      )}
+      onClick={disabled ? undefined : onClick}
+      role='region'
+      aria-label='UtimeUtracker'
+    >
+      {children || 'UtimeUtracker Component'}
+    </div>
+  );
+};