@regardio/react 0.5.5 → 0.6.0

package/src/toggle/toggle.test.tsx

@@ -0,0 +1,149 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Toggle } from './toggle';
+
+const TestIcon = () => (
+  <svg
+    data-testid="test-icon"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+  >
+    <circle
+      cx="8"
+      cy="8"
+      r="6"
+    />
+  </svg>
+);
+
+describe('Toggle', () => {
+  it('renders with children', () => {
+    render(
+      <Toggle>
+        <TestIcon />
+      </Toggle>,
+    );
+    expect(screen.getByTestId('test-icon')).toBeInTheDocument();
+  });
+
+  it('applies variant styles', () => {
+    render(
+      <Toggle
+        data-testid="variant-toggle"
+        variant="ghost"
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByTestId('variant-toggle');
+    expect(toggle).toHaveClass('bg-transparent', 'text-gray-700');
+  });
+
+  it('applies size styles', () => {
+    render(
+      <Toggle
+        data-testid="size-toggle"
+        size="lg"
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByTestId('size-toggle');
+    expect(toggle).toHaveClass('h-12', 'w-12', 'p-3');
+  });
+
+  it('handles pressed state', () => {
+    render(
+      <Toggle
+        data-testid="pressed-toggle"
+        defaultPressed
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByTestId('pressed-toggle');
+    expect(toggle).toHaveAttribute('data-pressed');
+  });
+
+  it('handles controlled pressed state', () => {
+    render(
+      <Toggle
+        data-testid="controlled-toggle"
+        pressed
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByTestId('controlled-toggle');
+    expect(toggle).toHaveAttribute('data-pressed');
+  });
+
+  it('handles disabled state', () => {
+    render(
+      <Toggle
+        data-testid="disabled-toggle"
+        disabled
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByTestId('disabled-toggle');
+    expect(toggle).toBeDisabled();
+    expect(toggle).toHaveClass('disabled:opacity-50');
+  });
+
+  it('applies custom className', () => {
+    render(
+      <Toggle
+        aria-label="Custom toggle"
+        className="custom-toggle"
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByRole('button', { name: 'Custom toggle' });
+    expect(toggle).toHaveClass('custom-toggle');
+  });
+
+  it('sets title attribute', () => {
+    render(
+      <Toggle
+        aria-label="Toggle"
+        title="Toggle setting"
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByRole('button', { name: 'Toggle' });
+    expect(toggle).toHaveAttribute('title', 'Toggle setting');
+  });
+
+  it('passes through other props', () => {
+    render(
+      <Toggle
+        aria-label="Custom toggle"
+        data-testid="custom-toggle"
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByTestId('custom-toggle');
+    expect(toggle).toHaveAttribute('aria-label', 'Custom toggle');
+  });
+
+  it('calls onPressedChange when clicked', () => {
+    const onPressedChange = vi.fn();
+    render(
+      <Toggle
+        aria-label="Test toggle"
+        onPressedChange={onPressedChange}
+      >
+        <TestIcon />
+      </Toggle>,
+    );
+    const toggle = screen.getByRole('button', { name: 'Test toggle' });
+    toggle.click();
+    expect(onPressedChange).toHaveBeenCalledWith(true, expect.any(Object));
+  });
+});

package/src/toggle/toggle.tsx

@@ -0,0 +1,88 @@
+import { Toggle as BaseUIToggle } from '@base-ui/react/toggle';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps, ReactNode } from 'react';
+
+const toggle = tv({
+  base: [
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'rounded-md',
+    'text-sm',
+    'font-medium',
+    'transition-colors',
+    'duration-200',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-blue-500',
+    'focus:ring-offset-2',
+    'disabled:pointer-events-none',
+    'disabled:opacity-50',
+  ],
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+  },
+  variants: {
+    size: {
+      lg: ['h-12', 'w-12', 'p-3'],
+      md: ['h-10', 'w-10', 'p-2'],
+      sm: ['h-8', 'w-8', 'p-1'],
+    },
+    variant: {
+      default: [],
+      ghost: [
+        'bg-transparent',
+        'text-gray-700',
+        'hover:bg-gray-100',
+        'hover:text-gray-900',
+        'data-[pressed]:bg-gray-200',
+        'data-[pressed]:text-gray-900',
+      ],
+      outline: [
+        'border',
+        'border-gray-300',
+        'bg-white',
+        'text-gray-700',
+        'hover:bg-gray-50',
+        'hover:text-gray-900',
+        'data-[pressed]:bg-gray-100',
+        'data-[pressed]:text-gray-900',
+      ],
+    },
+  },
+});
+
+export type ToggleVariant = keyof typeof toggle.variants.variant;
+export type ToggleSize = keyof typeof toggle.variants.size;
+
+export interface ToggleProps extends Omit<ComponentProps<typeof BaseUIToggle>, 'className'> {
+  className?: string;
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+  children?: ReactNode;
+  title?: string;
+}
+
+export const Toggle = ({
+  className,
+  variant = 'outline',
+  size = 'md',
+  title,
+  children,
+  ...props
+}: ToggleProps) => {
+  return (
+    <BaseUIToggle
+      className={toggle({
+        className,
+        size,
+        variant,
+      })}
+      title={title}
+      {...props}
+    >
+      {children}
+    </BaseUIToggle>
+  );
+};

package/src/utils/text/text.test.tsx

@@ -0,0 +1,110 @@
+import { isValidElement, type ReactNode } from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { lowerCaseSzett, replaceSpecialChars, shy, wrapSentences } from './text';
+
+describe('lowerCaseSzett', () => {
+  it('wraps ß in lowercase span for strings', () => {
+    const result = lowerCaseSzett('Straße') as ReactNode[];
+    expect(Array.isArray(result)).toBe(true);
+    expect(result).toHaveLength(3);
+    expect(result[0]).toBe('Stra');
+    expect(isValidElement(result[1])).toBe(true);
+    expect((result[1] as { props: { className: string } }).props.className).toBe('lowercase');
+    expect((result[1] as { props: { children: string } }).props.children).toBe('ß');
+    expect(result[2]).toBe('e');
+  });
+
+  it('handles strings without ß', () => {
+    const result = lowerCaseSzett('Hello') as ReactNode[];
+    expect(Array.isArray(result)).toBe(true);
+    expect(result).toEqual(['Hello']);
+  });
+
+  it('handles React elements with children containing ß', () => {
+    const element = <div>Straße</div>;
+    const result = lowerCaseSzett(element);
+    expect(isValidElement(result)).toBe(true);
+    const children = (result as { props: { children: ReactNode[] } }).props.children;
+    expect(Array.isArray(children)).toBe(true);
+  });
+
+  it('handles nested React elements', () => {
+    const element = (
+      <div>
+        <span>Große Straße</span>
+      </div>
+    );
+    const result = lowerCaseSzett(element);
+    expect(isValidElement(result)).toBe(true);
+  });
+
+  it('handles arrays of children', () => {
+    const result = lowerCaseSzett(['Straße', ' und ', 'Größe']);
+    expect(Array.isArray(result)).toBe(true);
+  });
+
+  it('returns non-string/element values as-is', () => {
+    expect(lowerCaseSzett(null)).toBeNull();
+    expect(lowerCaseSzett(undefined)).toBeUndefined();
+    expect(lowerCaseSzett(123 as unknown as string)).toBe(123);
+  });
+});
+
+describe('shy', () => {
+  it('returns null for null input', () => {
+    expect(shy(null)).toBeNull();
+  });
+
+  it('replaces soft hyphens in strings', () => {
+    const input = 'Weihnachts\u00ADspende';
+    const result = shy(input);
+    expect(typeof result).toBe('string');
+    expect(result).toContain('\u00AD');
+  });
+
+  it('handles React elements with soft hyphens', () => {
+    const element = <div>Weihnachts­spende</div>;
+    const result = shy(element);
+    expect(isValidElement(result)).toBe(true);
+    const children = (result as { props: { children: string } }).props.children;
+    expect(children).toBe('Weihnachtsspende');
+  });
+
+  it('handles nested React elements with soft hyphens', () => {
+    const element = (
+      <div>
+        <span>Weihnachts­spende</span>
+      </div>
+    );
+    const result = shy(element);
+    expect(isValidElement(result)).toBe(true);
+  });
+
+  it('handles arrays in React nodes', () => {
+    const element = <div>{['Weihnachts­spende', ' ', 'Test­wort']}</div>;
+    const result = shy(element);
+    expect(isValidElement(result)).toBe(true);
+  });
+});
+
+describe('replaceSpecialChars', () => {
+  it('applies typographic quotes and shy', () => {
+    const result = replaceSpecialChars('"Hello"', 'de');
+    expect(typeof result).toBe('string');
+    expect(result).toBe('\u201EHello\u201D');
+  });
+});
+
+describe('wrapSentences', () => {
+  it('wraps each sentence in a span', () => {
+    const result = wrapSentences('First sentence. Second sentence.');
+    expect(Array.isArray(result)).toBe(true);
+    expect((result as ReactNode[]).length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('handles single sentence', () => {
+    const result = wrapSentences('Just one sentence.');
+    expect(Array.isArray(result)).toBe(true);
+  });
+});

package/dist/background-slideshow/index.d.ts

@@ -1,24 +0,0 @@
-import { ReactElement } from 'react';
-
-type ImageData = {
-    at: Record<string, string>;
-    fn: string;
-    hu: number;
-    id: string;
-    po: boolean;
-};
-interface BackgroundSlideshowProps {
-    baseUrl: string;
-    className?: string;
-    imgClassName?: string;
-    locale: string;
-    pictureClassName?: string;
-    images: ImageData[];
-    filter?: (image: ImageData) => boolean;
-    slideshow?: boolean;
-    slideshowInterval?: number;
-    transitionDuration?: number;
-}
-declare function BackgroundSlideshow({ baseUrl, className, imgClassName, locale, pictureClassName, images, slideshow, slideshowInterval, transitionDuration, filter, }: BackgroundSlideshowProps): ReactElement;
-
-export { BackgroundSlideshow, type BackgroundSlideshowProps, type ImageData };

package/dist/background-slideshow/index.js

@@ -1,165 +0,0 @@
-import { useMemo, useState, useRef, useEffect } from 'react';
-import { cn } from '@regardio/tailwind/utils';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-// src/background-slideshow/background-slideshow.tsx
-var Picture = ({
-  alt,
-  baseUrl,
-  className,
-  formats,
-  imgClassName,
-  placeholder = "{format}",
-  sizes = "(max-width: 480px) 480px, (max-width: 768px) 600px, (max-width: 1200px) 1024px, 1920px"
-}) => {
-  const imageFormats = formats || [
-    { size: "480x360", width: 480 },
-    { size: "600x600", width: 600 },
-    { size: "1024x768", width: 1024 },
-    { size: "1920x1440", width: 1920 }
-  ];
-  if (imageFormats.length === 0) {
-    return null;
-  }
-  const isSimpleImage = imageFormats.length === 1 && imageFormats[0]?.size === "" || !baseUrl.includes(placeholder);
-  if (isSimpleImage) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        alt,
-        className: cn(className, imgClassName),
-        src: baseUrl
-      }
-    );
-  }
-  const srcSet = imageFormats.map(({ size, width }) => {
-    const url = baseUrl.replace(placeholder, size);
-    return `${url} ${width}w`;
-  }).join(", ");
-  const defaultFormat = imageFormats[0];
-  const defaultSrc = defaultFormat ? baseUrl.replace(placeholder, defaultFormat.size) : baseUrl;
-  return /* @__PURE__ */ jsxs("picture", { className, children: [
-    /* @__PURE__ */ jsx(
-      "source",
-      {
-        sizes,
-        srcSet
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        alt,
-        className: cn(imgClassName),
-        src: defaultSrc
-      }
-    )
-  ] });
-};
-function BackgroundSlideshow({
-  baseUrl,
-  className = "",
-  imgClassName = "",
-  locale,
-  pictureClassName = "",
-  images = [],
-  slideshow = true,
-  slideshowInterval = 6e3,
-  transitionDuration = 6e3,
-  filter
-}) {
-  const validatedImages = useMemo(() => {
-    return images.map((img) => {
-      if (typeof img !== "object" || img === null) return null;
-      return {
-        at: img.at || {},
-        fn: img.fn || "",
-        hu: img.hu || 0,
-        id: img.id || "",
-        po: img.po || false
-      };
-    }).filter((img) => img !== null);
-  }, [images]);
-  const availableImages = useMemo(() => {
-    const filtered = filter ? validatedImages.filter(filter) : validatedImages;
-    return filtered.length > 0 ? filtered : validatedImages;
-  }, [validatedImages, filter]);
-  const firstImage = availableImages[0] || null;
-  const [slideshowStarted, setSlideshowStarted] = useState(false);
-  const [overlayImage, setOverlayImage] = useState(null);
-  const [overlayVisible, setOverlayVisible] = useState(false);
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const timerRef = useRef(void 0);
-  const isTransitioning = useRef(false);
-  useEffect(() => {
-    if (!slideshow || availableImages.length <= 1) return;
-    const timeout = window.setTimeout(() => {
-      setSlideshowStarted(true);
-    }, slideshowInterval);
-    return () => window.clearTimeout(timeout);
-  }, [slideshow, availableImages.length, slideshowInterval]);
-  useEffect(() => {
-    if (!slideshowStarted || availableImages.length <= 1) return;
-    if (timerRef.current) window.clearTimeout(timerRef.current);
-    const cycleImages = () => {
-      if (isTransitioning.current) return;
-      isTransitioning.current = true;
-      const nextIdx = (currentIndex + 1) % availableImages.length;
-      const nextImage = availableImages[nextIdx];
-      if (!nextImage) {
-        isTransitioning.current = false;
-        return;
-      }
-      setOverlayImage(nextImage);
-      window.setTimeout(() => {
-        setOverlayVisible(true);
-        window.setTimeout(() => {
-          setCurrentIndex(nextIdx);
-          setOverlayVisible(false);
-          isTransitioning.current = false;
-          timerRef.current = window.setTimeout(cycleImages, slideshowInterval);
-        }, transitionDuration);
-      }, 100);
-    };
-    cycleImages();
-    return () => {
-      if (timerRef.current) window.clearTimeout(timerRef.current);
-    };
-  }, [slideshowStarted, availableImages, currentIndex, slideshowInterval, transitionDuration]);
-  if (validatedImages.length === 0 || !firstImage) {
-    return /* @__PURE__ */ jsx("div", { className });
-  }
-  const baseImage = availableImages[currentIndex] || firstImage;
-  return /* @__PURE__ */ jsxs("div", { className, children: [
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 w-full h-full", children: /* @__PURE__ */ jsx(
-      Picture,
-      {
-        alt: baseImage.at[locale] || "",
-        baseUrl: baseUrl.replace("{id}", baseImage.id).replace("{fn}", baseImage.fn),
-        className: pictureClassName,
-        formats: [{ size: "", width: 1080 }],
-        imgClassName,
-        placeholder: ""
-      }
-    ) }),
-    overlayImage && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `absolute inset-0 w-full h-full transition-opacity ${overlayVisible ? "opacity-100" : "opacity-0"} ${transitionDuration <= 3e3 ? "duration-3000" : transitionDuration <= 4e3 ? "duration-4000" : transitionDuration <= 5e3 ? "duration-5000" : "duration-6000"}`,
-        children: /* @__PURE__ */ jsx(
-          Picture,
-          {
-            alt: overlayImage.at[locale] || "",
-            baseUrl: baseUrl.replace("{id}", overlayImage.id).replace("{fn}", overlayImage.fn),
-            className: pictureClassName,
-            formats: [{ size: "", width: 1080 }],
-            imgClassName,
-            placeholder: ""
-          }
-        )
-      }
-    )
-  ] });
-}
-
-export { BackgroundSlideshow };

package/dist/blurry-gradient/index.d.ts

@@ -1,16 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { SVGProps } from 'react';
-
-interface BlurryGradientProps extends SVGProps<SVGSVGElement> {
-    primaryColor: string;
-    secondaryColor: string;
-    neutralColor: string;
-    /**
-     * Accessible description for the gradient (for screen readers)
-     * @default 'Decorative blurry gradient'
-     */
-    description?: string;
-}
-declare const BlurryGradient: (props: BlurryGradientProps) => react_jsx_runtime.JSX.Element;
-
-export { BlurryGradient, type BlurryGradientProps };

package/dist/blurry-gradient/index.js

@@ -1,128 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-// src/blurry-gradient/blurry-gradient.tsx
-var BlurryGradient = (props) => {
-  const {
-    description = "Decorative blurry gradient",
-    neutralColor,
-    primaryColor,
-    secondaryColor,
-    ...svgProps
-  } = props;
-  const titleId = "blurryGradientTitle";
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      "aria-labelledby": titleId,
-      preserveAspectRatio: "none",
-      role: "img",
-      viewBox: "0 0 1000 1000",
-      ...svgProps,
-      children: [
-        /* @__PURE__ */ jsx("title", { id: titleId, children: description }),
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
-          "filter",
-          {
-            colorInterpolationFilters: "sRGB",
-            filterUnits: "userSpaceOnUse",
-            height: "120%",
-            width: "120%",
-            x: "-10%",
-            y: "-10%",
-            children: [
-              /* @__PURE__ */ jsx(
-                "feFlood",
-                {
-                  floodOpacity: "0",
-                  result: "BackgroundImageFix"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "feBlend",
-                {
-                  in: "SourceGraphic",
-                  in2: "BackgroundImageFix",
-                  mode: "normal",
-                  result: "shape"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "feGaussianBlur",
-                {
-                  result: "effect1_foregroundBlur",
-                  stdDeviation: "161"
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            fill: primaryColor,
-            height: "1000",
-            width: "1000"
-          }
-        ),
-        /* @__PURE__ */ jsxs("g", { filter: "url(#blurryGradient)", children: [
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx: "730",
-              cy: "559",
-              fill: secondaryColor,
-              r: "357"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx: "316",
-              cy: "248",
-              fill: primaryColor,
-              r: "357"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx: "509",
-              cy: "410",
-              fill: neutralColor,
-              r: "357"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx: "633",
-              cy: "232",
-              fill: secondaryColor,
-              r: "357"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx: "156",
-              cy: "82",
-              fill: primaryColor,
-              r: "357"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx: "150",
-              cy: "389",
-              fill: neutralColor,
-              r: "357"
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-
-export { BlurryGradient };