@sudobility/workflow-components 1.1.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/workflow-components",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Business workflow components for checklists, status tracking, and process management",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.esm.js",

package/src/index.ts

@@ -6,15 +6,10 @@
  * @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';

package/dist/blockquote.d.ts

@@ -1,35 +0,0 @@
-import { default as React } from 'react';
-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 declare const Blockquote: React.FC<BlockquoteProps>;
-//# sourceMappingURL=blockquote.d.ts.map

package/dist/blockquote.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"blockquote.d.ts","sourceRoot":"","sources":["../src/blockquote.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,eAAe;IAC9B,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC5C,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoDhD,CAAC"}

package/dist/form-builder.d.ts

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

package/dist/form-builder.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-builder.d.ts","sourceRoot":"","sources":["../src/form-builder.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,MAAM,WAAW,kBAAkB;IACjC,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,aAAa,GAAI,6CAK3B,kBAAkB,4CAmBpB,CAAC"}

package/dist/form-template.d.ts

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

package/dist/form-template.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-template.d.ts","sourceRoot":"","sources":["../src/form-template.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/dist/form-validator.d.ts

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

package/dist/form-validator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-validator.d.ts","sourceRoot":"","sources":["../src/form-validator.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/status-badge.d.ts

@@ -1,16 +0,0 @@
-import { default as React } from 'react';
-export type StatusType = 'verified' | 'connected' | 'disconnected' | 'pending' | 'error' | 'success' | 'warning';
-export type ChainType = 'evm' | 'solana' | 'unknown';
-export interface StatusBadgeProps {
-    status: StatusType;
-    label?: string;
-    showDot?: boolean;
-    size?: 'sm' | 'md' | 'lg';
-}
-export interface ChainBadgeProps {
-    chainType: ChainType;
-    size?: 'sm' | 'md' | 'lg';
-}
-export declare const StatusBadge: React.FC<StatusBadgeProps>;
-export declare const ChainBadge: React.FC<ChainBadgeProps>;
-//# sourceMappingURL=status-badge.d.ts.map

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

@@ -1 +0,0 @@
-{"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,MAAM,WAAW,gBAAgB;IAC/B,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,MAAM,WAAW,eAAe;IAC9B,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/src/blockquote.tsx

@@ -1,89 +0,0 @@
-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/form-builder.tsx

@@ -1,60 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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/status-badge.tsx

@@ -1,140 +0,0 @@
-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';
-
-export interface StatusBadgeProps {
-  status: StatusType;
-  label?: string;
-  showDot?: boolean;
-  size?: 'sm' | 'md' | 'lg';
-}
-
-export 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>;
-};