@archbase/components 3.0.25 → 4.0.0

package/src/editors/index.tsx

@@ -26,6 +26,9 @@ export { ArchbaseChipItem } from './ArchbaseChipItem';
 export type { ArchbaseColorPickerProps } from './ArchbaseColorPicker';
 export { ArchbaseColorPicker } from './ArchbaseColorPicker';
 
+export { ArchbaseDualListbox } from './ArchbaseDualListbox';
+export type { ArchbaseDualListboxProps, ArchbaseDualListboxOption } from './ArchbaseDualListbox';
+
 export type { ArchbaseDatePickerRangeProps } from './ArchbaseDatePickerRange';
 export { ArchbaseDatePickerRange } from './ArchbaseDatePickerRange';
 
@@ -119,3 +122,92 @@ export type { ArchbaseTimeEditProps } from './ArchbaseTimeEdit'
 export { ArchbaseAvatarEdit } from './ArchbaseAvatarEdit'
 
 export type { ArchbaseAvatarEditProps } from './ArchbaseAvatarEdit'
+
+export { ArchbaseTagInput } from './ArchbaseTagInput'
+export type { ArchbaseTagInputProps } from './ArchbaseTagInput'
+
+export { ArchbasePhoneInput } from './ArchbasePhoneInput'
+export type { ArchbasePhoneInputProps } from './ArchbasePhoneInput'
+
+export { ArchbaseMultiEmail } from './ArchbaseMultiEmail'
+export type { ArchbaseMultiEmailProps } from './ArchbaseMultiEmail'
+
+export { ArchbaseMentionInput } from './ArchbaseMentionInput'
+export type { ArchbaseMentionInputProps, ArchbaseMentionConfig } from './ArchbaseMentionInput'
+
+export { ArchbaseSignaturePad } from './ArchbaseSignaturePad'
+export type { ArchbaseSignaturePadProps } from './ArchbaseSignaturePad'
+
+export { ArchbaseBarcodeScanner } from './ArchbaseBarcodeScanner'
+export type { ArchbaseBarcodeScannerProps } from './ArchbaseBarcodeScanner'
+
+export { ArchbaseSpreadsheet } from './ArchbaseSpreadsheet'
+export type { ArchbaseSpreadsheetProps, ArchbaseColumnDef, ArchbaseColumnType } from './ArchbaseSpreadsheet'
+
+export { ArchbaseLightGrid } from './ArchbaseLightGrid'
+export type { ArchbaseLightGridProps, ArchbaseLightGridColumn } from './ArchbaseLightGrid'
+
+export { ArchbaseCurrencyInput } from './ArchbaseCurrencyInput'
+export type { ArchbaseCurrencyInputProps, CurrencyCode } from './ArchbaseCurrencyInput'
+
+export { ArchbaseCpfCnpjInput, validateCPF, validateCNPJ, formatCPF, formatCNPJ, detectDocumentType } from './ArchbaseCpfCnpjInput'
+export type { ArchbaseCpfCnpjInputProps, DocumentType } from './ArchbaseCpfCnpjInput'
+
+export { ArchbaseCepInput, formatCep } from './ArchbaseCepInput'
+export type { ArchbaseCepInputProps, CepAddress } from './ArchbaseCepInput'
+
+export { ArchbaseOTPInput } from './ArchbaseOTPInput'
+export type { ArchbaseOTPInputProps } from './ArchbaseOTPInput'
+
+export { ArchbaseRangeSlider } from './ArchbaseRangeSlider'
+export type { ArchbaseRangeSliderProps, RangeValue } from './ArchbaseRangeSlider'
+
+export { ArchbaseInPlaceEditor } from './ArchbaseInPlaceEditor'
+export type { ArchbaseInPlaceEditorProps, InPlaceEditorType, SelectOption } from './ArchbaseInPlaceEditor'
+
+export { ArchbaseNumberStepper } from './ArchbaseNumberStepper'
+export type { ArchbaseNumberStepperProps } from './ArchbaseNumberStepper'
+
+export { ArchbaseAIPromptInput, useArchbasePromptHistory } from './ArchbaseAIPromptInput'
+export type {
+  ArchbaseAIPromptInputProps,
+  ArchbaseAIPromptSuggestion,
+  UseArchbasePromptHistoryOptions,
+  UseArchbasePromptHistoryReturn,
+} from './ArchbaseAIPromptInput'
+
+export { ArchbaseColorGradientPicker, ArchbaseFlatColorPicker } from './ArchbaseColorGradientPicker'
+export type {
+  ArchbaseColorGradientPickerProps,
+  ArchbaseFlatColorPickerProps,
+  ArchbaseColorFormat,
+} from './ArchbaseColorGradientPicker'
+
+export {
+  useArchbaseSpeechToText,
+  ArchbaseSpeechToTextButton,
+  ArchbaseSpeechToTextInput,
+  ArchbaseSpeechToTextArea,
+} from './ArchbaseSpeechToTextInput'
+export type {
+  UseArchbaseSpeechToTextOptions,
+  UseArchbaseSpeechToTextReturn,
+  ArchbaseSpeechToTextButtonProps,
+  ArchbaseSpeechToTextInputProps,
+  ArchbaseSpeechToTextAreaProps,
+} from './ArchbaseSpeechToTextInput'
+
+export {
+  ArchbaseMultiViewCalendar,
+  ArchbaseMultiViewCalendarWithPresets,
+  ArchbaseDateRangeQuickPicker,
+  defaultDatePresets,
+  createDatePreset,
+} from './ArchbaseMultiViewCalendar'
+export type {
+  ArchbaseMultiViewCalendarProps,
+  ArchbaseMultiViewCalendarWithPresetsProps,
+  ArchbaseDateRangeQuickPickerProps,
+  DateRangePreset,
+} from './ArchbaseMultiViewCalendar'
+

package/src/feedback/ArchbaseChunkProgressBar.tsx

@@ -0,0 +1,156 @@
+import React, { forwardRef, useMemo } from 'react';
+import { Progress, MantineColor, MantineSize, Box, Text, Stack } from '@mantine/core';
+
+export interface ArchbaseChunkProgressBarProps {
+  /** Valor atual (0-100) */
+  value: number;
+  /** Quantidade de chunks */
+  chunkCount?: number;
+  /** Gap entre os chunks em pixels */
+  gap?: number;
+  /** Cor dos chunks incompletos */
+  color?: MantineColor;
+  /** Cor dos chunks completos */
+  completedColor?: MantineColor;
+  /** Se deve animar os chunks */
+  animated?: boolean;
+  /** Se deve ter listras */
+  striped?: boolean;
+  /** Tamanho da barra */
+  size?: MantineSize | number;
+  /** Raio da barra */
+  radius?: MantineSize | number;
+  /** Label opcional */
+  label?: string;
+  /** Se deve mostrar o percentual */
+  showPercentage?: boolean;
+  /** Formato do percentual */
+  percentageFormat?: (value: number) => string;
+  /** Largura */
+  width?: number | string;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: React.CSSProperties;
+}
+
+export const ArchbaseChunkProgressBar = forwardRef<HTMLDivElement, ArchbaseChunkProgressBarProps>(
+  (
+    {
+      value,
+      chunkCount = 10,
+      gap = 2,
+      color = 'gray.3',
+      completedColor = 'blue',
+      animated = false,
+      striped = false,
+      size = 'md',
+      radius = 'sm',
+      label,
+      showPercentage = false,
+      percentageFormat,
+      width,
+      className,
+      style,
+    },
+    ref
+  ) => {
+    // Calcula as seções do progress baseado no valor e chunks
+    const sections = useMemo(() => {
+      const clampedValue = Math.min(100, Math.max(0, value));
+      const chunkSize = 100 / chunkCount;
+      const completedChunks = Math.floor(clampedValue / chunkSize);
+      const partialChunk = (clampedValue % chunkSize) / chunkSize;
+
+      const result: Array<{ value: number; color: MantineColor }> = [];
+
+      // Chunks completos
+      for (let i = 0; i < completedChunks; i++) {
+        result.push({
+          value: chunkSize - (gap * (chunkCount - 1)) / chunkCount,
+          color: completedColor,
+        });
+        if (i < chunkCount - 1) {
+          result.push({
+            value: gap / chunkCount,
+            color: 'transparent' as MantineColor,
+          });
+        }
+      }
+
+      // Chunk parcial
+      if (completedChunks < chunkCount && partialChunk > 0) {
+        const partialValue = (chunkSize - (gap * (chunkCount - 1)) / chunkCount) * partialChunk;
+        result.push({
+          value: partialValue,
+          color: completedColor,
+        });
+        result.push({
+          value: chunkSize - partialValue - (gap * (chunkCount - 1)) / chunkCount,
+          color: color,
+        });
+        if (completedChunks < chunkCount - 1) {
+          result.push({
+            value: gap / chunkCount,
+            color: 'transparent' as MantineColor,
+          });
+        }
+      }
+
+      // Chunks restantes vazios
+      for (let i = completedChunks + (partialChunk > 0 ? 1 : 0); i < chunkCount; i++) {
+        result.push({
+          value: chunkSize - (gap * (chunkCount - 1)) / chunkCount,
+          color: color,
+        });
+        if (i < chunkCount - 1) {
+          result.push({
+            value: gap / chunkCount,
+            color: 'transparent' as MantineColor,
+          });
+        }
+      }
+
+      return result;
+    }, [chunkCount, color, completedColor, gap, value]);
+
+    // Formato do percentual
+    const formattedPercentage = useMemo(() => {
+      const clampedValue = Math.min(100, Math.max(0, value));
+      if (percentageFormat) return percentageFormat(clampedValue);
+      return `${Math.round(clampedValue)}%`;
+    }, [percentageFormat, value]);
+
+    return (
+      <Stack ref={ref} gap={4} className={className} style={{ ...style, width }}>
+        {(label || showPercentage) && (
+          <Box style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            {label && (
+              <Text size="sm" fw={500}>
+                {label}
+              </Text>
+            )}
+            {showPercentage && (
+              <Text size="sm" c="dimmed">
+                {formattedPercentage}
+              </Text>
+            )}
+          </Box>
+        )}
+        <Progress.Root size={size} radius={radius}>
+          {sections.map((section, index) => (
+            <Progress.Section
+              key={index}
+              value={section.value}
+              color={section.color}
+              animated={animated && section.color === completedColor}
+              striped={striped && section.color === completedColor}
+            />
+          ))}
+        </Progress.Root>
+      </Stack>
+    );
+  }
+);
+
+ArchbaseChunkProgressBar.displayName = 'ArchbaseChunkProgressBar';

package/src/feedback/ArchbaseRipple.tsx

@@ -0,0 +1,278 @@
+import React, { forwardRef, useCallback, useState, ReactNode, MouseEvent, CSSProperties } from 'react';
+import { Box, MantineColor } from '@mantine/core';
+
+interface RippleItem {
+  id: number;
+  x: number;
+  y: number;
+  size: number;
+}
+
+export interface ArchbaseRippleProps {
+  /** Conteúdo a ser envolvido */
+  children: ReactNode;
+  /** Cor do ripple */
+  color?: MantineColor;
+  /** Opacidade do ripple */
+  opacity?: number;
+  /** Duração da animação em ms */
+  duration?: number;
+  /** Se o ripple deve ser centralizado */
+  centered?: boolean;
+  /** Se está desabilitado */
+  disabled?: boolean;
+  /** Se deve cobrir todo o elemento */
+  unbounded?: boolean;
+  /** Classe CSS */
+  className?: string;
+  /** Estilo */
+  style?: CSSProperties;
+}
+
+export const ArchbaseRipple = forwardRef<HTMLDivElement, ArchbaseRippleProps>(
+  (
+    {
+      children,
+      color = 'blue',
+      opacity = 0.3,
+      duration = 600,
+      centered = false,
+      disabled = false,
+      unbounded = false,
+      className,
+      style,
+    },
+    ref
+  ) => {
+    const [ripples, setRipples] = useState<RippleItem[]>([]);
+    const [nextId, setNextId] = useState(0);
+
+    const handleClick = useCallback(
+      (event: MouseEvent<HTMLDivElement>) => {
+        if (disabled) return;
+
+        const element = event.currentTarget;
+        const rect = element.getBoundingClientRect();
+
+        let x: number;
+        let y: number;
+        let size: number;
+
+        if (centered) {
+          x = rect.width / 2;
+          y = rect.height / 2;
+          size = Math.max(rect.width, rect.height);
+        } else {
+          x = event.clientX - rect.left;
+          y = event.clientY - rect.top;
+          // Calcula o tamanho para cobrir todo o elemento
+          const dx = Math.max(x, rect.width - x);
+          const dy = Math.max(y, rect.height - y);
+          size = Math.sqrt(dx * dx + dy * dy) * 2;
+        }
+
+        const newRipple: RippleItem = {
+          id: nextId,
+          x,
+          y,
+          size,
+        };
+
+        setRipples((prev) => [...prev, newRipple]);
+        setNextId((prev) => prev + 1);
+
+        // Remove o ripple após a animação
+        setTimeout(() => {
+          setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));
+        }, duration);
+      },
+      [centered, disabled, duration, nextId]
+    );
+
+    const rippleColor = color.includes('.')
+      ? `var(--mantine-color-${color})`
+      : `var(--mantine-color-${color}-4)`;
+
+    return (
+      <Box
+        ref={ref}
+        className={className}
+        style={{
+          ...style,
+          position: 'relative',
+          overflow: unbounded ? 'visible' : 'hidden',
+          cursor: disabled ? 'default' : 'pointer',
+        }}
+        onClick={handleClick}
+      >
+        {children}
+
+        {/* Ripples container */}
+        <Box
+          style={{
+            position: 'absolute',
+            inset: 0,
+            pointerEvents: 'none',
+            overflow: unbounded ? 'visible' : 'hidden',
+          }}
+        >
+          {ripples.map((ripple) => (
+            <span
+              key={ripple.id}
+              style={{
+                position: 'absolute',
+                left: ripple.x - ripple.size / 2,
+                top: ripple.y - ripple.size / 2,
+                width: ripple.size,
+                height: ripple.size,
+                borderRadius: '50%',
+                backgroundColor: rippleColor,
+                opacity: opacity,
+                transform: 'scale(0)',
+                animation: `archbase-ripple ${duration}ms ease-out forwards`,
+                pointerEvents: 'none',
+              }}
+            />
+          ))}
+        </Box>
+
+        {/* Keyframes injection */}
+        <style>
+          {`
+            @keyframes archbase-ripple {
+              0% {
+                transform: scale(0);
+                opacity: ${opacity};
+              }
+              100% {
+                transform: scale(1);
+                opacity: 0;
+              }
+            }
+          `}
+        </style>
+      </Box>
+    );
+  }
+);
+
+ArchbaseRipple.displayName = 'ArchbaseRipple';
+
+// ================== Hook para uso em componentes customizados ==================
+
+export interface UseArchbaseRippleOptions {
+  color?: MantineColor;
+  opacity?: number;
+  duration?: number;
+  centered?: boolean;
+  disabled?: boolean;
+}
+
+export interface UseArchbaseRippleReturn {
+  ripples: RippleItem[];
+  handleClick: (event: MouseEvent<HTMLElement>) => void;
+  RippleContainer: React.FC;
+}
+
+export function useArchbaseRipple(options: UseArchbaseRippleOptions = {}): UseArchbaseRippleReturn {
+  const {
+    color = 'blue',
+    opacity = 0.3,
+    duration = 600,
+    centered = false,
+    disabled = false,
+  } = options;
+
+  const [ripples, setRipples] = useState<RippleItem[]>([]);
+  const [nextId, setNextId] = useState(0);
+
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLElement>) => {
+      if (disabled) return;
+
+      const element = event.currentTarget;
+      const rect = element.getBoundingClientRect();
+
+      let x: number;
+      let y: number;
+      let size: number;
+
+      if (centered) {
+        x = rect.width / 2;
+        y = rect.height / 2;
+        size = Math.max(rect.width, rect.height);
+      } else {
+        x = event.clientX - rect.left;
+        y = event.clientY - rect.top;
+        const dx = Math.max(x, rect.width - x);
+        const dy = Math.max(y, rect.height - y);
+        size = Math.sqrt(dx * dx + dy * dy) * 2;
+      }
+
+      const newRipple: RippleItem = {
+        id: nextId,
+        x,
+        y,
+        size,
+      };
+
+      setRipples((prev) => [...prev, newRipple]);
+      setNextId((prev) => prev + 1);
+
+      setTimeout(() => {
+        setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));
+      }, duration);
+    },
+    [centered, disabled, duration, nextId]
+  );
+
+  const rippleColor = color.includes('.')
+    ? `var(--mantine-color-${color})`
+    : `var(--mantine-color-${color}-4)`;
+
+  const RippleContainer: React.FC = useCallback(
+    () => (
+      <>
+        {ripples.map((ripple) => (
+          <span
+            key={ripple.id}
+            style={{
+              position: 'absolute',
+              left: ripple.x - ripple.size / 2,
+              top: ripple.y - ripple.size / 2,
+              width: ripple.size,
+              height: ripple.size,
+              borderRadius: '50%',
+              backgroundColor: rippleColor,
+              opacity: opacity,
+              transform: 'scale(0)',
+              animation: `archbase-ripple ${duration}ms ease-out forwards`,
+              pointerEvents: 'none',
+            }}
+          />
+        ))}
+        <style>
+          {`
+            @keyframes archbase-ripple {
+              0% {
+                transform: scale(0);
+                opacity: ${opacity};
+              }
+              100% {
+                transform: scale(1);
+                opacity: 0;
+              }
+            }
+          `}
+        </style>
+      </>
+    ),
+    [duration, opacity, rippleColor, ripples]
+  );
+
+  return {
+    ripples,
+    handleClick,
+    RippleContainer,
+  };
+}