@redacto.io/consent-sdk-react 10.0.0-beta.1 → 10.0.0-beta.12

package/src/RedactoPrivacyCenter/ui/PCAccordion.tsx

@@ -1,93 +0,0 @@
-import { type ReactNode, type CSSProperties, type HTMLAttributes } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-
-export type PCAccordionProps = Readonly<
-  HTMLAttributes<HTMLDivElement> & {
-    children: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-  }
->;
-
-export function PCAccordion({ children, className = '', style = {}, ...props }: PCAccordionProps) {
-  const accordionStyle: CSSProperties = {
-    ...pcStyles.accordion,
-    ...style,
-  };
-
-  return (
-    <div className={`pc-accordion ${className}`} style={accordionStyle} {...props}>
-      {children}
-    </div>
-  );
-}
-
-export type PCAccordionHeaderProps = Readonly<
-  Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
-    children: ReactNode | ((props: { open: boolean; toggle: () => void }) => ReactNode);
-    className?: string;
-    style?: CSSProperties;
-    open?: boolean;
-    onToggle?: () => void;
-  }
->;
-
-export function PCAccordionHeader({
-  children,
-  className = '',
-  style = {},
-  open = false,
-  onToggle,
-  ...props
-}: PCAccordionHeaderProps) {
-  const headerStyle: CSSProperties = {
-    ...pcStyles.accordionHeader,
-    ...style,
-  };
-
-  return (
-    <div
-      className={`pc-accordion-header ${className}`}
-      style={headerStyle}
-      onClick={onToggle}
-      {...props}
-    >
-      {typeof children === 'function' ? children({ open, toggle: onToggle || (() => {}) }) : children}
-    </div>
-  );
-}
-
-export type PCAccordionBodyProps = Readonly<
-  HTMLAttributes<HTMLDivElement> & {
-    children: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-    open?: boolean;
-  }
->;
-
-export function PCAccordionBody({
-  children,
-  className = '',
-  style = {},
-  open = false,
-  ...props
-}: PCAccordionBodyProps) {
-  const bodyStyle: CSSProperties = {
-    ...pcStyles.accordionBody,
-    maxHeight: open ? '1000px' : '0',
-    overflow: open ? 'visible' : 'hidden',
-    padding: open ? pcStyles.accordionBody.padding : '0',
-    ...style,
-  };
-
-  return (
-    <div className={`pc-accordion-body ${className}`} style={bodyStyle} {...props}>
-      {children}
-    </div>
-  );
-}
-
-// Compound component pattern
-PCAccordion.Header = PCAccordionHeader;
-PCAccordion.Body = PCAccordionBody;

package/src/RedactoPrivacyCenter/ui/PCActionIcon.tsx

@@ -1,47 +0,0 @@
-import { type ReactNode, type CSSProperties, type ButtonHTMLAttributes, forwardRef } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-
-export interface PCActionIconProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-  variant?: 'default' | 'outline';
-  size?: 'sm' | 'md';
-  disabled?: boolean;
-  'aria-label': string;
-}
-
-export const PCActionIcon = forwardRef<HTMLButtonElement, PCActionIconProps>(({
-  children,
-  className = '',
-  style = {},
-  variant = 'default',
-  size = 'md',
-  disabled = false,
-  type = 'button',
-  ...props
-}, ref) => {
-  const baseStyle: CSSProperties = {
-    ...pcStyles.actionIcon,
-    ...(variant === 'outline' && pcStyles.actionIconOutline),
-    ...(size === 'sm' && pcStyles.actionIconSm),
-    ...(size === 'md' && pcStyles.actionIconMd),
-    ...(disabled && pcStyles.actionIconDisabled),
-    ...style,
-  };
-
-  return (
-    <button
-      ref={ref}
-      type={type}
-      className={`pc-action-icon ${className}`}
-      style={baseStyle}
-      disabled={disabled}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-});
-
-PCActionIcon.displayName = 'PCActionIcon';

package/src/RedactoPrivacyCenter/ui/PCAvatar.tsx

@@ -1,69 +0,0 @@
-import { type CSSProperties } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-
-export interface PCAvatarProps {
-  name?: string;
-  src?: string;
-  className?: string;
-  style?: CSSProperties;
-  size?: 'sm' | 'md' | 'lg';
-  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
-}
-
-function getInitials(name: string): string {
-  return name
-    .split(' ')
-    .map((n) => n[0])
-    .join('')
-    .toUpperCase()
-    .slice(0, 2);
-}
-
-function getColor(color: string): string {
-  const colorMap: Record<string, string> = {
-    primary: getVar('--pc-primary'),
-    secondary: getVar('--pc-secondary'),
-    success: getVar('--pc-success'),
-    error: getVar('--pc-error'),
-    warning: getVar('--pc-warning'),
-    info: getVar('--pc-info'),
-  };
-  return colorMap[color] || colorMap.primary;
-}
-
-const getVar = (varName: string): string => `var(${varName})`;
-
-export function PCAvatar({
-  name = '',
-  src,
-  className = '',
-  style = {},
-  size = 'md',
-  color = 'primary',
-}: PCAvatarProps) {
-  const avatarStyle: CSSProperties = {
-    ...pcStyles.avatar,
-    ...(size === 'sm' && pcStyles.avatarSm),
-    ...(size === 'md' && pcStyles.avatarMd),
-    ...(size === 'lg' && pcStyles.avatarLg),
-    backgroundColor: getColor(color),
-    ...style,
-  };
-
-  if (src) {
-    return (
-      <img
-        src={src}
-        alt={name}
-        className={className}
-        style={avatarStyle}
-      />
-    );
-  }
-
-  return (
-    <div className={className} style={avatarStyle}>
-      {name ? getInitials(name) : '?'}
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/ui/PCBadge.tsx

@@ -1,48 +0,0 @@
-import { type ReactNode, type CSSProperties } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-
-export interface PCBadgeProps {
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-  variant?: 'success' | 'error' | 'warning' | 'info' | 'secondary';
-  size?: 'sm' | 'md';
-  renderAsDot?: boolean;
-}
-
-export function PCBadge({
-  children,
-  className = '',
-  style = {},
-  variant = 'secondary',
-  size = 'md',
-  renderAsDot = false,
-}: PCBadgeProps) {
-  const badgeStyle: CSSProperties = {
-    ...pcStyles.badge,
-    ...(variant === 'success' && pcStyles.badgeSuccess),
-    ...(variant === 'error' && pcStyles.badgeError),
-    ...(variant === 'warning' && pcStyles.badgeWarning),
-    ...(variant === 'info' && pcStyles.badgeInfo),
-    ...(variant === 'secondary' && pcStyles.badgeSecondary),
-    ...(size === 'sm' && pcStyles.badgeSm),
-    ...(renderAsDot && {
-      width: size === 'sm' ? '6px' : '8px',
-      height: size === 'sm' ? '6px' : '8px',
-      padding: 0,
-      borderRadius: '50%',
-      display: 'inline-block',
-    }),
-    ...style,
-  };
-
-  if (renderAsDot) {
-    return <span className={className} style={badgeStyle} />;
-  }
-
-  return (
-    <span className={className} style={badgeStyle}>
-      {children}
-    </span>
-  );
-}

package/src/RedactoPrivacyCenter/ui/PCButton.tsx

@@ -1,77 +0,0 @@
-import { type ReactNode, type CSSProperties, type ButtonHTMLAttributes } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-
-const getVar = (varName: string): string => `var(${varName})`;
-
-export interface PCButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
-  children: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-  variant?: 'primary' | 'secondary' | 'outline' | 'text' | 'danger';
-  size?: 'sm' | 'md' | 'lg';
-  isLoading?: boolean;
-  disabled?: boolean;
-}
-
-export function PCButton({
-  children,
-  className = '',
-  style = {},
-  variant = 'primary',
-  size = 'md',
-  isLoading = false,
-  disabled = false,
-  type = 'button',
-  ...props
-}: PCButtonProps) {
-  const variantClass = `pc-button-${variant}`;
-  const baseStyle: CSSProperties = {
-    ...pcStyles.button,
-    ...(variant === 'primary' && pcStyles.buttonPrimary),
-    ...(variant === 'secondary' && pcStyles.buttonSecondary),
-    ...(variant === 'outline' && pcStyles.buttonOutline),
-    ...(variant === 'text' && pcStyles.buttonText),
-    ...(variant === 'danger' && pcStyles.buttonDanger),
-    ...(size === 'sm' && pcStyles.buttonSm),
-    ...(size === 'lg' && pcStyles.buttonLg),
-    ...(disabled && pcStyles.buttonDisabled),
-    ...style,
-  };
-
-  // Determine loader color based on variant
-  const loaderColor = variant === 'primary' || variant === 'danger' || variant === 'secondary'
-    ? 'inverse'
-    : 'primary';
-
-  return (
-    <button
-      type={type}
-      className={`pc-button ${variantClass} ${className}`}
-      style={baseStyle}
-      disabled={disabled || isLoading}
-      {...props}
-    >
-      {isLoading ? (
-        <span style={{
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: '6px',
-        }}>
-          <div style={{
-            ...pcStyles.loader,
-            ...pcStyles.loaderMd,
-            ...(loaderColor === 'inverse'
-              ? { borderColor: `${getVar('--pc-text-inverse')} transparent ${getVar('--pc-text-inverse')} transparent` }
-              : pcStyles.loaderPrimary
-            ),
-          }} />
-          {children}
-        </span>
-      ) : (
-        children
-      )}
-    </button>
-  );
-}
-

package/src/RedactoPrivacyCenter/ui/PCCheckbox.tsx

@@ -1,55 +0,0 @@
-import { type ReactNode, type CSSProperties, type InputHTMLAttributes } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-
-export interface PCCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'size' | 'type'> {
-  className?: string;
-  style?: CSSProperties;
-  label?: ReactNode;
-  labelClassName?: string;
-  size?: 'sm' | 'md';
-  checked?: boolean;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export function PCCheckbox({
-  className = '',
-  style = {},
-  label,
-  labelClassName = '',
-  size = 'md',
-  checked,
-  onChange,
-  ...props
-}: PCCheckboxProps) {
-  const checkboxStyle: CSSProperties = {
-    ...pcStyles.checkbox,
-    ...(size === 'sm' && pcStyles.checkboxSm),
-    ...style,
-  };
-
-  const labelStyle: CSSProperties = {
-    ...pcStyles.checkboxLabel,
-  };
-
-  const checkbox = (
-    <input
-      type="checkbox"
-      className={`pc-checkbox ${size === 'sm' ? 'pc-checkbox-sm' : ''} ${className}`}
-      style={checkboxStyle}
-      checked={checked}
-      onChange={onChange}
-      {...props}
-    />
-  );
-
-  if (label) {
-    return (
-      <label className={labelClassName} style={labelStyle}>
-        {checkbox}
-        <span>{label}</span>
-      </label>
-    );
-  }
-
-  return checkbox;
-}

package/src/RedactoPrivacyCenter/ui/PCCollapse.tsx

@@ -1,107 +0,0 @@
-import { type ReactNode, type CSSProperties, type HTMLAttributes, useState } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-
-export type PCCollapseProps = Readonly<
-  Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
-    children: ReactNode | ((props: { open: boolean; toggle: () => void }) => ReactNode);
-    defaultOpen?: boolean;
-    className?: string;
-    style?: CSSProperties;
-  }
->;
-
-export function PCCollapse({
-  children,
-  defaultOpen = false,
-  className = '',
-  style = {},
-  ...props
-}: PCCollapseProps) {
-  const [open, setOpen] = useState(defaultOpen);
-
-  const toggle = () => setOpen(!open);
-
-  const collapseStyle: CSSProperties = {
-    ...style,
-  };
-
-  return (
-    <div className={`pc-collapse ${className}`} style={collapseStyle} {...props}>
-      {typeof children === 'function' ? children({ open, toggle }) : children}
-    </div>
-  );
-}
-
-export type PCCollapseHeaderProps = Readonly<
-  Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
-    children: ReactNode | ((props: { open: boolean; toggle: () => void }) => ReactNode);
-    className?: string;
-    style?: CSSProperties;
-    open?: boolean;
-    toggle?: () => void;
-  }
->;
-
-export function PCCollapseHeader({
-  children,
-  className = '',
-  style = {},
-  open = false,
-  toggle,
-  ...props
-}: PCCollapseHeaderProps) {
-  const headerStyle: CSSProperties = {
-    ...pcStyles.accordionHeader,
-    ...style,
-  };
-
-  const rendered: ReactNode = typeof children === 'function'
-    ? children({ open, toggle: toggle || (() => {}) })
-    : children;
-
-  return (
-    <div
-      className={`pc-collapse-header ${className}`}
-      style={headerStyle}
-      onClick={toggle}
-      {...props}
-    >
-      {rendered}
-    </div>
-  );
-}
-
-export type PCCollapseBodyProps = Readonly<
-  HTMLAttributes<HTMLDivElement> & {
-    children: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-    open?: boolean;
-  }
->;
-
-export function PCCollapseBody({
-  children,
-  className = '',
-  style = {},
-  open = false,
-  ...props
-}: PCCollapseBodyProps) {
-  const bodyStyle: CSSProperties = {
-    ...pcStyles.accordionBody,
-    maxHeight: open ? '1000px' : '0',
-    overflow: open ? 'visible' : 'hidden',
-    padding: open ? pcStyles.accordionBody.padding : '0',
-    ...style,
-  };
-
-  return (
-    <div className={`pc-collapse-body ${className}`} style={bodyStyle} {...props}>
-      {children}
-    </div>
-  );
-}
-
-// Compound component pattern
-PCCollapse.Header = PCCollapseHeader;
-PCCollapse.Body = PCCollapseBody;

package/src/RedactoPrivacyCenter/ui/PCEmpty.tsx

@@ -1,35 +0,0 @@
-import { type ReactNode, type CSSProperties } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-
-export interface PCEmptyProps {
-  icon?: ReactNode;
-  title?: ReactNode;
-  description?: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export function PCEmpty({
-  icon,
-  title,
-  description,
-  className = '',
-  style = {},
-}: PCEmptyProps) {
-  const emptyStyle: CSSProperties = {
-    ...pcStyles.empty,
-    ...style,
-  };
-
-  return (
-    <div className={`pc-empty ${className}`} style={emptyStyle}>
-      {icon && <div style={pcStyles.emptyIcon}>{icon}</div>}
-      {title && (
-        <div style={{ ...pcStyles.emptyText, fontWeight: pcStyles.fontWeightSemibold.fontWeight, marginBottom: pcStyles.gapSm.gap }}>
-          {title}
-        </div>
-      )}
-      {description && <div style={pcStyles.emptyText}>{description}</div>}
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/ui/PCInput.tsx

@@ -1,132 +0,0 @@
-import { type ReactNode, type CSSProperties, type InputHTMLAttributes, useState, useRef, useEffect } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-import { X } from 'lucide-react';
-
-export type PCInputProps = Readonly<
-  Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'size' | 'prefix'> & {
-    className?: string;
-    style?: CSSProperties;
-    label?: ReactNode;
-    error?: boolean;
-    clearable?: boolean;
-    onClear?: () => void;
-    prefix?: ReactNode;
-    suffix?: ReactNode;
-    inputClassName?: string;
-    size?: 'sm' | 'md' | 'lg';
-    clearAriaLabel?: string;
-  }
->;
-
-export function PCInput({
-  className = '',
-  style = {},
-  label,
-  error = false,
-  clearable = false,
-  onClear,
-  prefix,
-  suffix,
-  inputClassName = '',
-  size = 'md',
-  clearAriaLabel = 'Clear input',
-  value,
-  onChange,
-  ...props
-}: PCInputProps) {
-  const [showClear, setShowClear] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (clearable && value && String(value).length > 0) {
-      setShowClear(true);
-    } else {
-      setShowClear(false);
-    }
-  }, [value, clearable]);
-
-  const handleClear = () => {
-    if (inputRef.current) {
-      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
-        window.HTMLInputElement.prototype,
-        'value'
-      )?.set;
-      nativeInputValueSetter?.call(inputRef.current, '');
-      const ev = new Event('input', { bubbles: true });
-      inputRef.current.dispatchEvent(ev);
-    }
-    onClear?.();
-  };
-
-  const inputStyle: CSSProperties = {
-    ...pcStyles.input,
-    ...(size === 'sm' && pcStyles.inputSm),
-    ...(size === 'lg' && pcStyles.inputLg),
-    ...(error && pcStyles.inputError),
-    ...(props.disabled && pcStyles.inputDisabled),
-  };
-
-  const wrapperStyle: CSSProperties = {
-    ...pcStyles.inputWrapper,
-    ...style,
-  };
-
-  if (prefix || suffix || clearable) {
-    return (
-      <div className={className} style={wrapperStyle}>
-        {label && <label style={pcStyles.inputLabel}>{label}</label>}
-        <div className="pc-input-affix" style={pcStyles.inputWithPrefix}>
-          {prefix && <span style={pcStyles.inputPrefix}>{prefix}</span>}
-          <input
-            ref={inputRef}
-            className={`pc-input ${inputClassName}`}
-            style={{
-              ...inputStyle,
-              border: 'none',
-              flex: 1,
-              paddingLeft: prefix ? 0 : undefined,
-              paddingRight: (suffix || showClear) ? 0 : undefined,
-            }}
-            value={value}
-            onChange={onChange}
-            {...props}
-          />
-          {showClear && (
-            <button
-              type="button"
-              onClick={handleClear}
-              style={{
-                ...pcStyles.actionIcon,
-                padding: '0.25rem',
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                color: pcStyles.textSecondary.color,
-              }}
-              aria-label={clearAriaLabel}
-            >
-              <X size={16} />
-            </button>
-          )}
-          {suffix && <span style={pcStyles.inputSuffix}>{suffix}</span>}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={className} style={wrapperStyle}>
-      {label && <label style={pcStyles.inputLabel}>{label}</label>}
-      <input
-        ref={inputRef}
-        className={`pc-input ${inputClassName}`}
-        style={inputStyle}
-        value={value}
-        onChange={onChange}
-        {...props}
-      />
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/ui/PCLoader.tsx

@@ -1,31 +0,0 @@
-import { type CSSProperties } from 'react';
-import { pcStyles } from '../styles/pcStyles';
-
-export interface PCLoaderProps {
-  className?: string;
-  style?: CSSProperties;
-  size?: 'sm' | 'md' | 'lg';
-  color?: 'primary' | 'info';
-  variant?: 'spinner';
-  ariaLabel?: string;
-}
-
-export function PCLoader({
-  className = '',
-  style = {},
-  size = 'md',
-  color = 'primary',
-  ariaLabel = 'Loading',
-}: PCLoaderProps) {
-  const loaderStyle: CSSProperties = {
-    ...pcStyles.loader,
-    ...(size === 'sm' && pcStyles.loaderSm),
-    ...(size === 'md' && pcStyles.loaderMd),
-    ...(size === 'lg' && pcStyles.loaderLg),
-    ...(color === 'primary' && pcStyles.loaderPrimary),
-    ...(color === 'info' && pcStyles.loaderInfo),
-    ...style,
-  };
-
-  return <div className={className} style={loaderStyle} aria-label={ariaLabel} role="status" />;
-}