@sudobility/workflow-components 1.0.8

package/dist/network-status.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 declare const UnetworkUstatus: ({ className, children, disabled, onClick, }: UnetworkUstatusProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=network-status.d.ts.map

package/dist/network-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"network-status.d.ts","sourceRoot":"","sources":["../src/network-status.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,MAAM,WAAW,oBAAoB;IACnC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,GAAI,6CAK7B,oBAAoB,4CAmBtB,CAAC"}

package/dist/process-diagram.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 declare const UprocessUdiagram: ({ className, children, disabled, onClick, }: UprocessUdiagramProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=process-diagram.d.ts.map

package/dist/process-diagram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-diagram.d.ts","sourceRoot":"","sources":["../src/process-diagram.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,MAAM,WAAW,qBAAqB;IACpC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,GAAI,6CAK9B,qBAAqB,4CAmBvB,CAAC"}

package/dist/quote-generator.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 declare const QuoteGenerator: ({ className, children, disabled, }: QuoteGeneratorProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=quote-generator.d.ts.map

package/dist/quote-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quote-generator.d.ts","sourceRoot":"","sources":["../src/quote-generator.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,GAAI,oCAI5B,mBAAmB,4CAiBrB,CAAC"}

package/dist/safety-checklist.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 declare const SafetyChecklist: ({ className, children, disabled, }: SafetyChecklistProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=safety-checklist.d.ts.map

package/dist/safety-checklist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"safety-checklist.d.ts","sourceRoot":"","sources":["../src/safety-checklist.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,GAAI,oCAI7B,oBAAoB,4CAiBtB,CAAC"}

package/dist/status-badge.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export type StatusType = 'verified' | 'connected' | 'disconnected' | 'pending' | 'error' | 'success' | 'warning';
+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';
+}
+export declare const StatusBadge: React.FC<StatusBadgeProps>;
+export declare const ChainBadge: React.FC<ChainBadgeProps>;
+export {};
+//# sourceMappingURL=status-badge.d.ts.map

package/dist/status-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../src/status-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,UAAU,GAClB,UAAU,GACV,WAAW,GACX,cAAc,GACd,SAAS,GACT,OAAO,GACP,SAAS,GACT,SAAS,CAAC;AAGd,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErD,UAAU,gBAAgB;IACxB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,UAAU,eAAe;IACvB,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAiCD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0DlD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqBhD,CAAC"}

package/dist/sticky-note.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 declare const UstickyUnote: ({ className, children, disabled, onClick, }: UstickyUnoteProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sticky-note.d.ts.map

package/dist/sticky-note.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky-note.d.ts","sourceRoot":"","sources":["../src/sticky-note.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,MAAM,WAAW,iBAAiB;IAChC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,GAAI,6CAK1B,iBAAiB,4CAmBnB,CAAC"}

package/dist/system-status.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 declare const UsystemUstatus: ({ className, children, disabled, onClick, }: UsystemUstatusProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=system-status.d.ts.map

package/dist/system-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-status.d.ts","sourceRoot":"","sources":["../src/system-status.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,GAAI,6CAK5B,mBAAmB,4CAmBrB,CAAC"}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@sudobility/workflow-components",
+  "version": "1.0.8",
+  "description": "Business workflow components for checklists, status tracking, and process management",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite build --watch",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@sudobility/components": "^3.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@sudobility/components": "^3.0.0",
+    "@sudobility/design": "^1.1.10",
+    "@types/node": "^24.7.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwind-merge": "^3.3.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "typescript"
+  ],
+  "author": "",
+  "license": "MIT"
+}

package/src/blockquote.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { cn } from '@sudobility/components';
+
+export interface BlockquoteProps {
+  /** Quote content */
+  children: React.ReactNode;
+  /** Citation/author */
+  cite?: string;
+  /** Variant style */
+  variant?: 'default' | 'bordered' | 'accent';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Blockquote Component
+ *
+ * Displays quoted text with optional citation and various styling options.
+ * Uses semantic HTML for proper document structure.
+ *
+ * @example
+ * ```tsx
+ * <Blockquote cite="John Doe">
+ *   This is a great quote about something important.
+ * </Blockquote>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Blockquote variant="accent" size="lg">
+ *   Innovation distinguishes between a leader and a follower.
+ * </Blockquote>
+ * ```
+ */
+export const Blockquote: React.FC<BlockquoteProps> = ({
+  children,
+  cite,
+  variant = 'default',
+  size = 'md',
+  className,
+}) => {
+  // Size configurations
+  const sizeClasses = {
+    sm: 'text-sm p-3',
+    md: 'text-base p-4',
+    lg: 'text-lg p-6',
+  };
+
+  const citeSize = {
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base',
+  };
+
+  // Variant configurations
+  const variantClasses = {
+    default:
+      'border-l-4 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800/50',
+    bordered:
+      'border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800',
+    accent:
+      'border-l-4 border-blue-500 dark:border-blue-400 bg-blue-50 dark:bg-blue-900/20',
+  };
+
+  return (
+    <blockquote
+      className={cn(
+        'rounded-r-lg',
+        sizeClasses[size],
+        variantClasses[variant],
+        className
+      )}
+    >
+      <p className='text-gray-800 dark:text-gray-200 italic'>{children}</p>
+      {cite && (
+        <footer
+          className={cn(
+            'mt-2 text-gray-600 dark:text-gray-400',
+            citeSize[size]
+          )}
+        >
+          — <cite className='not-italic font-medium'>{cite}</cite>
+        </footer>
+      )}
+    </blockquote>
+  );
+};

package/src/checklist-progress.tsx

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

package/src/form-builder.tsx

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

package/src/form-template.tsx

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

package/src/form-validator.tsx

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

package/src/index.ts

@@ -0,0 +1,20 @@
+/**
+ * workflow-components
+ *
+ * Specialized components for the workflow domain
+ *
+ * @package @sudobility/workflow-components
+ */
+
+export * from './blockquote';
+export * from './checklist-progress';
+export * from './form-builder';
+export * from './form-template';
+export * from './form-validator';
+export * from './network-status';
+export * from './process-diagram';
+export * from './quote-generator';
+export * from './safety-checklist';
+export * from './status-badge';
+export * from './sticky-note';
+export * from './system-status';