@envive-ai/react-toolkit-v3 0.3.5

package/src/components/DocumentRetrievalCard/hooks/useGetBorderProperties.ts

@@ -0,0 +1,19 @@
+import { Theme } from '../../../../tokens/theme/theme';
+
+export const useGetBorderProperties = (theme: Theme) => {
+  const borderClassMap: Partial<Record<Theme, string>> = {
+    [Theme.STANDARD]:
+      'envive-tw-border envive-tw-border-solid envive-tw-border-[color-mix(in_srgb,var(--envive-colors-background-secondary)_90%,#000000)]',
+    [Theme.MODERN]:
+      'envive-tw-border envive-tw-border-solid envive-tw-border-[color-mix(in_srgb,var(--envive-colors-background-secondary)_90%,#000000)]',
+    [Theme.MINIMAL]:
+      'envive-tw-border envive-tw-border-solid envive-tw-border-[color-mix(in_srgb,var(--envive-colors-background-secondary)_90%,#000000)]',
+  };
+
+  const borderClass = borderClassMap[theme] || undefined;
+
+  const hoverBorderColorClass =
+    'hover:envive-tw-border-[color-mix(in_srgb,var(--envive-colors-background-secondary)_90%,#000000)]';
+
+  return { borderClass, hoverBorderColorClass };
+};

package/src/components/DocumentRetrievalCard/hooks/useGetBorderRadiusProperties.ts

@@ -0,0 +1,13 @@
+import { Theme } from '../../../../tokens/theme/theme';
+
+export const useGetBorderRadiusProperties = (theme: Theme) => {
+  const borderRadiusClassMap: Partial<Record<Theme, string>> = {
+    [Theme.STANDARD]: 'envive-tw-rounded-global-custom',
+    [Theme.MODERN]: 'envive-tw-rounded-[4px]',
+    [Theme.MINIMAL]: 'envive-tw-rounded-none',
+  };
+
+  const borderRadiusClass = borderRadiusClassMap[theme] || undefined;
+
+  return { borderRadiusClass };
+};

package/src/components/DocumentRetrievalCard/hooks/useGetCardWidthProperties.ts

@@ -0,0 +1,5 @@
+export const useGetCardWidthProperties = (hasImage: boolean) => {
+  const widthClass = hasImage ? 'envive-tw-w-[208px]' : 'envive-tw-w-[319px]';
+
+  return { widthClass };
+};

package/src/components/DocumentRetrievalCard/hooks/useGetIconBackgroundProperties.ts

@@ -0,0 +1,14 @@
+import { Theme } from '../../../../tokens/theme/theme';
+
+export const useGetIconBackgroundProperties = (theme: Theme) => {
+  const iconBackgroundClassMap: Partial<Record<Theme, string | undefined>> = {
+    [Theme.STANDARD]: 'envive-tw-bg-text-link group-hover/card:envive-tw-bg-text-primary',
+    [Theme.MODERN]:
+      'envive-tw-bg-[color-mix(in_srgb,var(--envive-colors-background-secondary)_90%,#000000)]',
+    [Theme.MINIMAL]: undefined,
+  };
+
+  const iconBackgroundClass = iconBackgroundClassMap[theme];
+
+  return { iconBackgroundClass };
+};

package/src/components/DocumentRetrievalCard/hooks/useGetIconColorProperties.ts

@@ -0,0 +1,14 @@
+import { Theme } from '../../../../tokens/theme/theme';
+
+export const useGetIconColorProperties = (theme: Theme) => {
+  const iconColorClassMap: Partial<Record<Theme, string>> = {
+    [Theme.STANDARD]: 'envive-tw-text-white',
+    [Theme.MODERN]:
+      'envive-tw-text-text-link group-hover/card:envive-tw-text-[--envive-colors-text-primary]',
+    [Theme.MINIMAL]: '',
+  };
+
+  const iconColorClass = iconColorClassMap[theme];
+
+  return { iconColorClass };
+};

package/src/components/DocumentRetrievalCard/hooks/useGetLabelTextCaseProperties.ts

@@ -0,0 +1,7 @@
+import { Theme } from '../../../../tokens/theme/theme';
+
+export const useGetLabelTextCaseProperties = (theme: Theme) => {
+  const textCaseClassName = theme === Theme.STANDARD ? undefined : 'envive-tw-uppercase';
+
+  return { textCaseClassName };
+};

package/src/components/DocumentRetrievalCard/hooks/useGetLabelTypographyProperties.ts

@@ -0,0 +1,14 @@
+import { TypographyVariant } from '../../Typography';
+import { Theme } from '../../../../tokens/theme/theme';
+
+export const useGetLabelTypographyProperties = (theme: Theme) => {
+  const typographyVariantMap: Partial<Record<Theme, TypographyVariant>> = {
+    [Theme.STANDARD]: TypographyVariant.B3_MD,
+    [Theme.MODERN]: TypographyVariant.L2_SB,
+    [Theme.MINIMAL]: TypographyVariant.L2_SB,
+  };
+
+  const typographyVariant = typographyVariantMap[theme];
+
+  return { typographyVariant };
+};

package/src/components/DocumentRetrievalCard/hooks/useGetLabelUnderlineProperties.ts

@@ -0,0 +1,12 @@
+export const useGetLabelUnderlineProperties = (shouldUnderline: boolean) => {
+  const underlineClassName = shouldUnderline
+    ? 'envive-tw-inline-block envive-tw-underline'
+    : undefined;
+
+  const underlineStyle = shouldUnderline ? { textDecoration: 'underline' } : undefined;
+
+  return {
+    underlineClassName,
+    underlineStyle,
+  };
+};

package/src/components/DocumentRetrievalCard/hooks/useGetPaddingProperties.ts

@@ -0,0 +1,6 @@
+export const useGetPaddingProperties = (hasImage: boolean) => {
+  const articlePaddingClass = !hasImage ? 'envive-tw-p-4' : undefined;
+  const contentPaddingClass = hasImage ? 'envive-tw-p-3' : undefined;
+
+  return { articlePaddingClass, contentPaddingClass };
+};

package/src/components/DocumentRetrievalCard/hooks/useGetStackLayoutProperties.ts

@@ -0,0 +1,14 @@
+import type { StackAlign, StackDirection } from '../../Stack/types';
+import type { StackGap } from '../../Stack';
+
+export const useGetStackLayoutProperties = (hasImage: boolean) => {
+  const direction: StackDirection = hasImage ? 'column' : 'row';
+  const gap: StackGap = hasImage ? '0' : '2';
+  const align: StackAlign = hasImage ? 'stretch' : 'start';
+
+  return {
+    direction,
+    gap,
+    align,
+  };
+};

package/src/components/DocumentRetrievalCard/hooks/useGetThemeProperties.ts

@@ -0,0 +1,37 @@
+import { Theme } from '../../../../tokens/theme/theme';
+import { useGetBackgroundColorsProperties } from './useGetBackgroundColorsProperties';
+import { useGetBorderRadiusProperties } from './useGetBorderRadiusProperties';
+import { useGetBorderProperties } from './useGetBorderProperties';
+import { useGetIconBackgroundProperties } from './useGetIconBackgroundProperties';
+import { useGetIconColorProperties } from './useGetIconColorProperties';
+import { useGetLabelTypographyProperties } from './useGetLabelTypographyProperties';
+import { useGetLabelTextCaseProperties } from './useGetLabelTextCaseProperties';
+
+export const useGetThemeProperties = (theme: Theme) => {
+  const { backgroundColorClass, hoverBackgroundColorClass } =
+    useGetBackgroundColorsProperties(theme);
+
+  const { borderRadiusClass } = useGetBorderRadiusProperties(theme);
+
+  const { borderClass, hoverBorderColorClass } = useGetBorderProperties(theme);
+
+  const { iconBackgroundClass } = useGetIconBackgroundProperties(theme);
+
+  const { iconColorClass } = useGetIconColorProperties(theme);
+
+  const { typographyVariant } = useGetLabelTypographyProperties(theme);
+
+  const { textCaseClassName } = useGetLabelTextCaseProperties(theme);
+
+  return {
+    backgroundColorClass,
+    hoverBackgroundColorClass,
+    borderRadiusClass,
+    borderClass,
+    hoverBorderColorClass,
+    iconBackgroundClass,
+    iconColorClass,
+    typographyVariant,
+    textCaseClassName,
+  };
+};

package/src/components/DocumentRetrievalCard/index.ts

@@ -0,0 +1,4 @@
+export { DocumentRetrievalCard } from './DocumentRetrievalCard';
+export type { DocumentRetrievalCardProps } from './types';
+export { DocumentRetrievalCardVariant } from './types';
+export { Theme } from '../../../tokens/theme/theme';

package/src/components/DocumentRetrievalCard/types/index.ts

@@ -0,0 +1,70 @@
+import { Theme } from '../../../../tokens/theme/theme';
+
+/**
+ * Props accepted by the `DocumentRetrievalCard` component.
+ */
+export type DocumentRetrievalCardProps = {
+  /**
+   * The title of the document/article.
+   */
+  title: string;
+  /**
+   * The description or excerpt of the document/article.
+   */
+  description: string;
+  /**
+   * Optional image URL to display in the card.
+   * When provided, the card will render with image variant.
+   */
+  imageUrl?: string;
+  /**
+   * Alt text for the image when imageUrl is provided.
+   */
+  imageAlt?: string;
+  /**
+   * Visual theme of the card that controls its styling.
+   * @default Theme.GLOBAL_CUSTOM
+   */
+  theme?: Theme;
+  /**
+   * Unique `id` attribute attached to the rendered element.
+   */
+  id?: string;
+  /**
+   * Adds a `data-testid` attribute for testing utilities.
+   */
+  testId?: string;
+  /**
+   * Additional class names appended to the computed card classes.
+   */
+  className?: string;
+  /**
+   * Inline styles forwarded to the rendered element.
+   */
+  style?: React.CSSProperties;
+  /**
+   * URL of the article to open when the "View Article" button is clicked.
+   * When provided, opens the URL in a new tab. If both `articleUrl` and `onViewArticle` are provided,
+   * `onViewArticle` takes precedence.
+   */
+  articleUrl?: string;
+  /**
+   * Callback function invoked when the "View Article" button is clicked.
+   * If provided, this takes precedence over `articleUrl`.
+   */
+  onViewArticle?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * Accessible label for the card, used by screen readers.
+   */
+  ariaLabel?: string;
+  /**
+   * Text label for the "View Article" button.
+   * @default "View Article"
+   */
+  viewArticleLabel?: string;
+};
+
+export enum DocumentRetrievalCardVariant {
+  NO_IMAGE = 'noImage',
+  WITH_IMAGE = 'withImage',
+}

package/src/components/DocumentRetrievalCard/utils/functions.ts

@@ -0,0 +1,25 @@
+import { DocumentRetrievalCardVariant } from '../types';
+import { Theme } from '../../../../tokens/theme/theme';
+
+/**
+ * Determines the variant based on whether an image URL is provided.
+ */
+export const getVariant = (imageUrl?: string): DocumentRetrievalCardVariant => {
+  return imageUrl ? DocumentRetrievalCardVariant.WITH_IMAGE : DocumentRetrievalCardVariant.NO_IMAGE;
+};
+
+/**
+ * Determines whether the icon should be shown based on theme and image presence.
+ * Icon is shown when theme is not MINIMAL and there is no image.
+ */
+export const shouldShowIcon = (theme: Theme, hasImage: boolean): boolean => {
+  return theme !== Theme.MINIMAL && !hasImage;
+};
+
+/**
+ * Determines whether the label should be underlined based on theme and image presence.
+ * Underline is shown when theme is STANDARD and there is an image.
+ */
+export const shouldUnderlineLabel = (theme: Theme, hasImage: boolean): boolean => {
+  return theme === Theme.STANDARD && hasImage;
+};

package/src/components/FloatingButton/FloatingButton.tsx

@@ -0,0 +1,55 @@
+import { FloatingButtonComponents } from './components';
+import { FloatingButtonProps, FloatingButtonVariant } from './types/types';
+
+export const FloatingButton = ({
+  id,
+  testId,
+  className,
+  style,
+  customIcon,
+  variant = FloatingButtonVariant.ATTACHED,
+  mode,
+  show,
+  location,
+  backgroundColor,
+  hasInteractionHappened,
+  onClick,
+  ariaLabel,
+}: FloatingButtonProps) => {
+  const button = (
+    <FloatingButtonComponents.Button
+      variant={variant}
+      mode={mode}
+      backgroundColor={backgroundColor}
+      onClick={onClick}
+      ariaLabel={ariaLabel}
+    >
+      <FloatingButtonComponents.Icon
+        variant={variant}
+        mode={mode}
+        customIcon={customIcon}
+      />
+    </FloatingButtonComponents.Button>
+  );
+
+  return (
+    <FloatingButtonComponents.Container
+      id={id}
+      testId={testId}
+      location={location}
+      show={show}
+      variant={variant}
+      hasInteractionHappened={hasInteractionHappened}
+      className={className}
+      style={style}
+    >
+      {variant === FloatingButtonVariant.ATTACHED ? (
+        <FloatingButtonComponents.Wrapper location={location}>
+          {button}
+        </FloatingButtonComponents.Wrapper>
+      ) : (
+        button
+      )}
+    </FloatingButtonComponents.Container>
+  );
+};

package/src/components/FloatingButton/components/Button.tsx

@@ -0,0 +1,62 @@
+import classNames from 'classnames';
+import { useGetButtonProperties } from '../hooks/useGetButtonProperties';
+import { useGetButtonHoverProperties } from '../hooks/useGetButtonHoverProperties';
+import { FloatingButtonMode, FloatingButtonProps, FloatingButtonVariant } from '../types/types';
+
+export type ButtonProps = {
+  variant?: FloatingButtonVariant;
+  mode?: FloatingButtonMode;
+  backgroundColor?: FloatingButtonProps['backgroundColor'];
+  onClick?: () => void;
+  children: React.ReactNode;
+  className?: string;
+  ariaLabel: string;
+};
+
+export const Button = ({
+  variant = FloatingButtonVariant.ATTACHED,
+  mode = FloatingButtonMode.LIGHT,
+  backgroundColor,
+  onClick,
+  children,
+  className = '',
+  ariaLabel,
+}: ButtonProps) => {
+  const {
+    sizeClasses,
+    backgroundColorClass,
+    borderRadiusClass,
+    boxShadowClass,
+    aspectSquareClass,
+  } = useGetButtonProperties(variant, mode, backgroundColor);
+  const { hoverSizeClasses, hoverBoxShadowClass } = useGetButtonHoverProperties(variant);
+
+  const allClasses = classNames(
+    sizeClasses,
+    backgroundColorClass,
+    borderRadiusClass,
+    boxShadowClass,
+    aspectSquareClass,
+    hoverSizeClasses,
+    hoverBoxShadowClass,
+    'envive-tw-flex',
+    'envive-tw-justify-center',
+    'envive-tw-items-center',
+    'envive-tw-cursor-pointer',
+    'envive-tw-transition-all',
+    'envive-tw-duration-300',
+    'envive-tw-ease-in-out',
+    className,
+  );
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={allClasses}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </button>
+  );
+};

package/src/components/FloatingButton/components/Container.tsx

@@ -0,0 +1,60 @@
+import classNames from 'classnames';
+import { useGetContainerProperties } from '../hooks/useGetContainerProperties';
+import { FloatingButtonLocation, FloatingButtonShow, FloatingButtonVariant } from '../types/types';
+
+export type ContainerProps = {
+  location?: FloatingButtonLocation;
+  show?: FloatingButtonShow;
+  variant?: FloatingButtonVariant;
+  hasInteractionHappened?: boolean;
+  children: React.ReactNode;
+  id?: string;
+  testId?: string;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const Container = ({
+  location = FloatingButtonLocation.BOTTOM_RIGHT,
+  show = FloatingButtonShow.ALWAYS,
+  variant = FloatingButtonVariant.ATTACHED,
+  hasInteractionHappened = false,
+  children,
+  id,
+  testId,
+  className = '',
+  style,
+}: ContainerProps) => {
+  const { positionClasses, locationClasses, zIndexClass, shouldRender } = useGetContainerProperties(
+    location,
+    show,
+    variant,
+    hasInteractionHappened,
+  );
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  const allClasses = classNames(
+    'envive-tw-group/floatingbutton',
+    positionClasses,
+    locationClasses,
+    zIndexClass,
+    'envive-tw-transition-all',
+    'envive-tw-duration-300',
+    'envive-tw-ease-in-out',
+    className,
+  );
+
+  return (
+    <div
+      id={id}
+      data-testid={testId}
+      className={allClasses}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/FloatingButton/components/Icon.tsx

@@ -0,0 +1,43 @@
+import Sparkles from '@envive-ai/react-icons/Sparkles';
+import { CustomIcon } from '../../utils/CustomIcon';
+import { useGetIconProperties } from '../hooks/useGetIconProperties';
+import { FloatingButtonMode, FloatingButtonVariant } from '../types/types';
+
+export type IconProps = {
+  variant?: FloatingButtonVariant;
+  mode?: FloatingButtonMode;
+  customIcon?: string;
+};
+
+const removeSvgWidthAndHeight = (svgString: string): string => {
+  // This allows CSS classes to control the custom icon size
+  return svgString
+    .replace(/\s+width\s*=\s*["'][^"']*["']/gi, '')
+    .replace(/\s+height\s*=\s*["'][^"']*["']/gi, '');
+};
+
+export const Icon = ({
+  variant = FloatingButtonVariant.ATTACHED,
+  mode = FloatingButtonMode.LIGHT,
+  customIcon,
+}: IconProps) => {
+  const { iconClasses } = useGetIconProperties(variant, mode);
+
+  if (customIcon) {
+    const processedSvg = removeSvgWidthAndHeight(customIcon);
+    return (
+      <div
+        className={iconClasses}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: processedSvg }}
+      />
+    );
+  }
+
+  return (
+    <CustomIcon
+      IconComponent={<Sparkles />}
+      className={iconClasses}
+    />
+  );
+};

package/src/components/FloatingButton/components/Wrapper.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import { useGetWrapperProperties } from '../hooks/useGetWrapperProperties';
+import { FloatingButtonLocation } from '../types/types';
+
+export type WrapperProps = {
+  location?: FloatingButtonLocation;
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const Wrapper = ({
+  location = FloatingButtonLocation.BOTTOM_RIGHT,
+  children,
+  className = '',
+}: WrapperProps) => {
+  const {
+    sizeClasses,
+    backgroundColorClass,
+    borderRadiusClass,
+    justifyContentClass,
+    alignItemsClass,
+    boxShadowClass,
+    hoverSizeClasses,
+  } = useGetWrapperProperties(location);
+
+  const allClasses = classNames(
+    sizeClasses,
+    hoverSizeClasses,
+    backgroundColorClass,
+    borderRadiusClass,
+    'envive-tw-flex',
+    justifyContentClass,
+    alignItemsClass,
+    boxShadowClass,
+    'envive-tw-transition-all',
+    'envive-tw-duration-300',
+    'envive-tw-ease-in-out',
+    className,
+  );
+
+  return <div className={allClasses}>{children}</div>;
+};

package/src/components/FloatingButton/components/index.ts

@@ -0,0 +1,11 @@
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { Wrapper } from './Wrapper';
+import { Container } from './Container';
+
+export const FloatingButtonComponents = {
+  Button,
+  Icon,
+  Wrapper,
+  Container,
+};

package/src/components/FloatingButton/hooks/index.ts

@@ -0,0 +1,6 @@
+export { useGetButtonProperties } from './useGetButtonProperties';
+export { useGetButtonHoverProperties } from './useGetButtonHoverProperties';
+export { useGetIconProperties } from './useGetIconProperties';
+export { useGetWrapperProperties } from './useGetWrapperProperties';
+export { useGetContainerProperties } from './useGetContainerProperties';
+export { useGetFloatingButtonProperties as useGetFloatingButtonStyles } from './useGetFloatingButtonStyles';

package/src/components/FloatingButton/hooks/useGetButtonHoverProperties.ts

@@ -0,0 +1,31 @@
+import { FloatingButtonVariant } from '../types/types';
+
+/**
+ * Hook to get button hover properties based on variant.
+ */
+export const useGetButtonHoverProperties = (
+  variant: FloatingButtonVariant = FloatingButtonVariant.ATTACHED,
+) => {
+  let hoverSizeClasses = '';
+
+  if (variant === FloatingButtonVariant.DETACHED) {
+    // Detached: 64x64px -> 72x72px
+    hoverSizeClasses =
+      'group-hover/floatingbutton:envive-tw-w-[72px] group-hover/floatingbutton:envive-tw-h-[72px]';
+  } else {
+    // Attached: 44x44px -> 51x51px
+    hoverSizeClasses =
+      'group-hover/floatingbutton:envive-tw-w-[51px] group-hover/floatingbutton:envive-tw-h-[51px]';
+  }
+
+  // For Attached, shadow is handled by the Wrapper
+  const hoverBoxShadowClass =
+    variant === FloatingButtonVariant.DETACHED
+      ? 'group-hover/floatingbutton:envive-tw-shadow-[2px_2px_8px_0_rgba(0,0,0,0.25)]'
+      : '';
+
+  return {
+    hoverSizeClasses,
+    hoverBoxShadowClass,
+  };
+};

package/src/components/FloatingButton/hooks/useGetButtonProperties.ts

@@ -0,0 +1,45 @@
+import { ColorNames, enviveColorVar } from 'src/models/colorsConfig';
+import { FloatingButtonMode, FloatingButtonProps, FloatingButtonVariant } from '../types/types';
+
+/**
+ * Hook to get button properties based on variant, mode, and backgroundColor.
+ */
+export const useGetButtonProperties = (
+  variant: FloatingButtonVariant = FloatingButtonVariant.ATTACHED,
+  mode: FloatingButtonMode = FloatingButtonMode.LIGHT,
+  backgroundColor?: FloatingButtonProps['backgroundColor'],
+) => {
+  const sizeClasses =
+    variant === FloatingButtonVariant.DETACHED
+      ? 'envive-tw-w-[64px] envive-tw-h-[64px]'
+      : 'envive-tw-w-[44px] envive-tw-h-[44px]';
+
+  const customBackgroundColor = enviveColorVar(backgroundColor as ColorNames);
+  const customBackgroundColorClass = `envive-tw-bg-[${customBackgroundColor}]`;
+
+  const defaultBackgroundColorClass =
+    mode === FloatingButtonMode.LIGHT
+      ? 'envive-tw-bg-background-primary'
+      : 'envive-tw-bg-background-dark';
+
+  const backgroundColorClass =
+    backgroundColor !== undefined ? customBackgroundColorClass : defaultBackgroundColorClass;
+
+  const borderRadiusClass = 'envive-tw-rounded-[50px]';
+
+  const boxShadowClass =
+    variant === FloatingButtonVariant.DETACHED
+      ? 'envive-tw-shadow-[2px_2px_8px_0_rgba(0,0,0,0.25)]'
+      : '';
+
+  const aspectSquareClass =
+    variant === FloatingButtonVariant.DETACHED ? 'envive-tw-aspect-square' : '';
+
+  return {
+    sizeClasses,
+    backgroundColorClass,
+    borderRadiusClass,
+    boxShadowClass,
+    aspectSquareClass,
+  };
+};