@regardio/react 0.5.7 → 0.6.0

package/src/toggle/toggle.stories.tsx

@@ -0,0 +1,232 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type React from 'react';
+import { useState } from 'react';
+import { Button } from '../button';
+import { Toggle } from './toggle';
+
+const meta: Meta<typeof Toggle> = {
+  argTypes: {
+    defaultPressed: {
+      control: 'boolean',
+      description: 'Initial pressed state (uncontrolled)',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the toggle',
+    },
+    pressed: {
+      control: 'boolean',
+      description: 'Pressed state (controlled)',
+    },
+    size: {
+      control: 'select',
+      description: 'Toggle size',
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: 'select',
+      description: 'Toggle variant',
+      options: ['default', 'outline', 'ghost'],
+    },
+  },
+  component: Toggle,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Toggle',
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const HeartIcon = ({ filled = false }) => (
+  <svg
+    fill={filled ? 'currentColor' : 'none'}
+    height="16"
+    stroke="currentColor"
+    strokeWidth="2"
+    viewBox="0 0 16 16"
+    width="16"
+  >
+    <path d="M7.99961 13.8667C7.88761 13.8667 7.77561 13.8315 7.68121 13.7611C7.43321 13.5766 1.59961 9.1963 1.59961 5.8667C1.59961 3.80856 3.27481 2.13336 5.33294 2.13336C6.59054 2.13336 7.49934 2.81176 7.99961 3.3131C8.49988 2.81176 9.40868 2.13336 10.6663 2.13336C12.7244 2.13336 14.3996 3.80803 14.3996 5.8667C14.3996 9.1963 8.56601 13.5766 8.31801 13.7616C8.22361 13.8315 8.11161 13.8667 7.99961 13.8667Z" />
+  </svg>
+);
+
+const StarIcon = ({ filled = false }) => (
+  <svg
+    fill={filled ? 'currentColor' : 'none'}
+    height="16"
+    stroke="currentColor"
+    strokeWidth="2"
+    viewBox="0 0 16 16"
+    width="16"
+  >
+    <path d="m8 1.62 1.94 3.93 4.34.63-3.14 3.06.74 4.32L8 12.22l-3.88 2.34.74-4.32-3.14-3.06 4.34-.63L8 1.62Z" />
+  </svg>
+);
+
+const SettingsIcon = () => (
+  <svg
+    fill="none"
+    height="16"
+    stroke="currentColor"
+    strokeWidth="2"
+    viewBox="0 0 16 16"
+    width="16"
+  >
+    <circle
+      cx="8"
+      cy="8"
+      r="2"
+    />
+    <path d="m8 1v3m0 6v3m2.83-9.83 2.12 2.12M1.17 5.17l2.12 2.12m9.42 0 2.12 2.12M1.17 10.83l2.12-2.12" />
+  </svg>
+);
+
+export const Default: Story = {
+  args: {
+    children: <HeartIcon />,
+    title: 'Favorite',
+  },
+};
+
+export const Pressed: Story = {
+  args: {
+    children: <HeartIcon filled />,
+    defaultPressed: true,
+    title: 'Favorite',
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [pressed, setPressed] = useState(false);
+    return (
+      <Toggle
+        onPressedChange={setPressed}
+        pressed={pressed}
+        title="Favorite"
+      >
+        <HeartIcon filled={pressed} />
+      </Toggle>
+    );
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    children: <StarIcon />,
+    title: 'Star',
+    variant: 'ghost',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    children: <SettingsIcon />,
+    size: 'sm',
+    title: 'Settings',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    children: <SettingsIcon />,
+    size: 'lg',
+    title: 'Settings',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: <HeartIcon />,
+    disabled: true,
+    title: 'Favorite',
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Toggle title="Default">
+        <HeartIcon />
+      </Toggle>
+      <Toggle
+        title="Outline"
+        variant="outline"
+      >
+        <StarIcon />
+      </Toggle>
+      <Toggle
+        title="Ghost"
+        variant="ghost"
+      >
+        <SettingsIcon />
+      </Toggle>
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Toggle
+        size="sm"
+        title="Small"
+      >
+        <HeartIcon />
+      </Toggle>
+      <Toggle
+        size="md"
+        title="Medium"
+      >
+        <HeartIcon />
+      </Toggle>
+      <Toggle
+        size="lg"
+        title="Large"
+      >
+        <HeartIcon />
+      </Toggle>
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [pressed, setPressed] = useState(false);
+    return (
+      <div className="space-y-4">
+        <Toggle
+          onPressedChange={setPressed}
+          pressed={pressed}
+          title="Toggle favorite"
+        >
+          <HeartIcon filled={pressed} />
+        </Toggle>
+        <p className="text-sm text-gray-600">State: {pressed ? 'pressed' : 'not pressed'}</p>
+      </div>
+    );
+  },
+};
+
+export const CustomRender: Story = {
+  args: {
+    render: (props: React.ComponentProps<'button'>) => (
+      <Button
+        {...props}
+        className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 text-white hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+      >
+        <svg
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path d="m6.5 3.5 3 3-3 3" />
+        </svg>
+      </Button>
+    ),
+  },
+};

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/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 };