@sudobility/workflow-components 1.0.8

package/src/network-status.tsx

@@ -0,0 +1,60 @@
+import { cn } from '@sudobility/components';
+
+/**
+ * UnetworkUstatus Component
+ *
+ * A reusable UnetworkUstatus component with full dark mode support.
+ * Optimized for accessibility and AI-assisted development.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UnetworkUstatus 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/network-status}
+ */
+
+export interface UnetworkUstatusProps {
+  /** Additional CSS classes */
+  className?: string;
+  /** Component children */
+  children?: React.ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Callback when component is interacted with */
+  onClick?: () => void;
+}
+
+export const UnetworkUstatus = ({
+  className,
+  children,
+  disabled = false,
+  onClick,
+}: UnetworkUstatusProps) => {
+  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='UnetworkUstatus'
+    >
+      {children || 'UnetworkUstatus Component'}
+    </div>
+  );
+};

package/src/process-diagram.tsx

@@ -0,0 +1,60 @@
+import { cn } from '@sudobility/components';
+
+/**
+ * UprocessUdiagram Component
+ *
+ * A reusable UprocessUdiagram component with full dark mode support.
+ * Optimized for accessibility and AI-assisted development.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UprocessUdiagram 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/process-diagram}
+ */
+
+export interface UprocessUdiagramProps {
+  /** Additional CSS classes */
+  className?: string;
+  /** Component children */
+  children?: React.ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Callback when component is interacted with */
+  onClick?: () => void;
+}
+
+export const UprocessUdiagram = ({
+  className,
+  children,
+  disabled = false,
+  onClick,
+}: UprocessUdiagramProps) => {
+  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='UprocessUdiagram'
+    >
+      {children || 'UprocessUdiagram Component'}
+    </div>
+  );
+};

package/src/quote-generator.tsx

@@ -0,0 +1,41 @@
+import { cn } from '@sudobility/components';
+
+/**
+ * QuoteGenerator Component
+ *
+ * Insurance component with full dark mode support.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <QuoteGenerator className="custom-class" />
+ * ```
+ */
+export interface QuoteGeneratorProps {
+  className?: string;
+  children?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export const QuoteGenerator = ({
+  className,
+  children,
+  disabled,
+}: QuoteGeneratorProps) => {
+  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='QuoteGenerator'
+    >
+      {children || 'QuoteGenerator Component'}
+    </div>
+  );
+};

package/src/safety-checklist.tsx

@@ -0,0 +1,41 @@
+import { cn } from '@sudobility/components';
+
+/**
+ * SafetyChecklist Component
+ *
+ * Construction component with full dark mode support.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SafetyChecklist className="custom-class" />
+ * ```
+ */
+export interface SafetyChecklistProps {
+  className?: string;
+  children?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export const SafetyChecklist = ({
+  className,
+  children,
+  disabled,
+}: SafetyChecklistProps) => {
+  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='SafetyChecklist'
+    >
+      {children || 'SafetyChecklist Component'}
+    </div>
+  );
+};

package/src/status-badge.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { variants, getStatusIndicatorColor } from '@sudobility/design';
+
+export type StatusType =
+  | 'verified'
+  | 'connected'
+  | 'disconnected'
+  | 'pending'
+  | 'error'
+  | 'success'
+  | 'warning';
+
+// Local ChainType enum to avoid @johnqh/lib dependency
+export type ChainType = 'evm' | 'solana' | 'unknown';
+
+interface StatusBadgeProps {
+  status: StatusType;
+  label?: string;
+  showDot?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+interface ChainBadgeProps {
+  chainType: ChainType;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+// Map StatusType to design system status indicator types
+const getStatusDotColor = (status: StatusType) => {
+  switch (status) {
+    case 'verified':
+    case 'success':
+      return getStatusIndicatorColor('success');
+    case 'connected':
+    case 'warning':
+      return getStatusIndicatorColor('warning');
+    case 'disconnected':
+    case 'error':
+      return getStatusIndicatorColor('error');
+    case 'pending':
+      return getStatusIndicatorColor('info');
+    default:
+      return getStatusIndicatorColor('neutral');
+  }
+};
+
+// Dot size classes for different badge sizes
+const getDotSizeClass = (size: 'sm' | 'md' | 'lg') => {
+  switch (size) {
+    case 'sm':
+      return 'w-1.5 h-1.5';
+    case 'lg':
+      return 'w-3 h-3';
+    default: // md
+      return 'w-2 h-2';
+  }
+};
+
+export const StatusBadge: React.FC<StatusBadgeProps> = ({
+  status,
+  label,
+  showDot = true,
+  size = 'md',
+}) => {
+  const defaultLabels: Record<StatusType, string> = {
+    verified: 'Verified',
+    connected: 'Connected',
+    disconnected: 'Disconnected',
+    pending: 'Pending',
+    error: 'Error',
+    success: 'Success',
+    warning: 'Warning',
+  };
+
+  const displayLabel = label || defaultLabels[status];
+
+  // Use design system badge variants for consistent styling
+  const getDesignSystemVariant = (
+    status: StatusType,
+    size: 'sm' | 'md' | 'lg'
+  ) => {
+    const sizeMap = { sm: 'small', md: 'default', lg: 'large' } as const;
+    const variantMap = {
+      verified: 'success',
+      success: 'success',
+      connected: 'warning',
+      warning: 'warning',
+      disconnected: 'error',
+      error: 'error',
+      pending: 'primary',
+    } as const;
+
+    const variant = variantMap[status] || 'default';
+    const badgeSize = sizeMap[size];
+
+    if (badgeSize === 'default') {
+      return variants.badge[variant as keyof typeof variants.badge]() as string;
+    } else {
+      return variants.badge[badgeSize](variant) as string;
+    }
+  };
+
+  const badgeClass = getDesignSystemVariant(status, size);
+  const dotColor = getStatusDotColor(status);
+  const dotSize = getDotSizeClass(size);
+
+  return (
+    <span className={badgeClass}>
+      {showDot && (
+        <span
+          className={`inline-block ${dotSize} rounded-full ${dotColor} mr-1`}
+        />
+      )}
+      {displayLabel}
+    </span>
+  );
+};
+
+export const ChainBadge: React.FC<ChainBadgeProps> = ({
+  chainType,
+  size = 'md',
+}) => {
+  if (chainType === 'unknown') return null;
+
+  const chainLabel = chainType === 'solana' ? 'SOL' : 'ETH';
+  const sizeMap = { sm: 'small', md: 'default', lg: 'large' } as const;
+  const badgeSize = sizeMap[size];
+
+  // Use design system Web3 badge variants
+  const getBadgeClass = () => {
+    const badgeType = chainType === 'solana' ? 'solana' : 'ethereum';
+    if (badgeSize === 'default') {
+      return variants.badge[badgeType]();
+    } else {
+      return variants.badge[badgeSize](badgeType);
+    }
+  };
+
+  return <span className={getBadgeClass() as string}>{chainLabel}</span>;
+};

package/src/sticky-note.tsx

@@ -0,0 +1,60 @@
+import { cn } from '@sudobility/components';
+
+/**
+ * UstickyUnote Component
+ *
+ * A reusable UstickyUnote component with full dark mode support.
+ * Optimized for accessibility and AI-assisted development.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UstickyUnote 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/sticky-note}
+ */
+
+export interface UstickyUnoteProps {
+  /** Additional CSS classes */
+  className?: string;
+  /** Component children */
+  children?: React.ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Callback when component is interacted with */
+  onClick?: () => void;
+}
+
+export const UstickyUnote = ({
+  className,
+  children,
+  disabled = false,
+  onClick,
+}: UstickyUnoteProps) => {
+  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='UstickyUnote'
+    >
+      {children || 'UstickyUnote Component'}
+    </div>
+  );
+};

package/src/system-status.tsx

@@ -0,0 +1,60 @@
+import { cn } from '@sudobility/components';
+
+/**
+ * UsystemUstatus Component
+ *
+ * A reusable UsystemUstatus component with full dark mode support.
+ * Optimized for accessibility and AI-assisted development.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UsystemUstatus 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/system-status}
+ */
+
+export interface UsystemUstatusProps {
+  /** Additional CSS classes */
+  className?: string;
+  /** Component children */
+  children?: React.ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Callback when component is interacted with */
+  onClick?: () => void;
+}
+
+export const UsystemUstatus = ({
+  className,
+  children,
+  disabled = false,
+  onClick,
+}: UsystemUstatusProps) => {
+  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='UsystemUstatus'
+    >
+      {children || 'UsystemUstatus Component'}
+    </div>
+  );
+};