@regardio/react 0.4.7 → 0.5.5

package/package.json

@@ -1,223 +1,149 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
-  "author": "Bernd Matzner <bernd.matzner@regard.io>",
+  "name": "@regardio/react",
+  "version": "0.5.5",
+  "private": false,
+  "description": "Regardio React UI components",
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "regardio",
+    "tailwindcss"
+  ],
+  "homepage": "https://github.com/regardio/react/blob/main/README.md",
   "bugs": {
     "url": "https://github.com/regardio/react/issues"
   },
-  "dependencies": {
-    "@base-ui/react": "1.0.0",
-    "@maptiler/leaflet-maptilersdk": "4.1.1",
-    "@maptiler/sdk": "3.9.0",
-    "@mdx-js/react": "3.1.1",
-    "@regardio/js": "0.4.2",
-    "@supabase/supabase-js": "2.89.0",
-    "cmdk": "1.1.1",
-    "cva": "beta",
-    "embla-carousel": "8.6.0",
-    "embla-carousel-react": "8.6.0",
-    "fluid-tailwindcss": "1.0.5",
-    "input-otp": "1.4.2",
-    "intl-parse-accept-language": "1.0.0",
-    "leaflet": "alpha",
-    "lucide-react": "0.562.0",
-    "markdown-to-jsx": "9.5.0",
-    "react": "19.2.3",
-    "react-day-picker": "9.13.0",
-    "react-dom": "19.2.3",
-    "react-hook-form": "7.70.0",
-    "react-resizable-panels": "4.2.1",
-    "react-router": "7.11.0",
-    "tailwind-merge": "3.4.0",
-    "vaul": "1.1.2",
-    "zod": "4.3.5"
-  },
-  "description": "Regardio React UI components",
-  "devDependencies": {
-    "@regardio/dev": "1.10.1",
-    "@storybook/addon-a11y": "10.1.11",
-    "@storybook/addon-docs": "10.1.11",
-    "@storybook/addon-vitest": "10.1.11",
-    "@storybook/react-vite": "10.1.11",
-    "@tailwindcss/vite": "4.1.18",
-    "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "16.3.1",
-    "@total-typescript/ts-reset": "0.6.1",
-    "@types/leaflet": "1.9.21",
-    "@types/node": "25.0.3",
-    "@types/react": "19.2.7",
-    "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "5.1.2",
-    "@vitest/browser-playwright": "4.0.16",
-    "@vitest/coverage-v8": "4.0.16",
-    "@vitest/ui": "4.0.16",
-    "jsdom": "27.4.0",
-    "playwright": "1.57.0",
-    "storybook": "10.1.11",
-    "tailwindcss": "4.1.18",
-    "tsup": "8.5.1",
-    "typescript": "5.9.3",
-    "vite": "7.3.0",
-    "vitest": "4.0.16"
-  },
-  "engines": {
-    "node": ">=18"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/regardio/react.git"
   },
+  "license": "MIT",
+  "author": "Bernd Matzner <bernd.matzner@regard.io>",
+  "sideEffects": [
+    "./src/tailwind.css"
+  ],
+  "type": "module",
   "exports": {
-    "./components/background-slideshow": {
-      "import": "./dist/components/background-slideshow.js",
-      "types": "./dist/components/background-slideshow.d.ts"
-    },
-    "./components/blurry-gradient": {
-      "import": "./dist/components/blurry-gradient.js",
-      "types": "./dist/components/blurry-gradient.d.ts"
-    },
-    "./components/box": {
-      "import": "./dist/components/box.js",
-      "types": "./dist/components/box.d.ts"
-    },
-    "./components/carousel": {
-      "import": "./dist/components/carousel.js",
-      "types": "./dist/components/carousel.d.ts"
-    },
-    "./components/countdown": {
-      "import": "./dist/components/countdown.js",
-      "types": "./dist/components/countdown.d.ts"
-    },
-    "./components/definition-list": {
-      "import": "./dist/components/definition-list.js",
-      "types": "./dist/components/definition-list.d.ts"
+    "./background-slideshow": {
+      "types": "./dist/background-slideshow/index.d.ts",
+      "import": "./dist/background-slideshow/index.js"
     },
-    "./components/generic-error": {
-      "import": "./dist/components/generic-error.js",
-      "types": "./dist/components/generic-error.d.ts"
+    "./blurry-gradient": {
+      "types": "./dist/blurry-gradient/index.d.ts",
+      "import": "./dist/blurry-gradient/index.js"
     },
-    "./components/heading": {
-      "import": "./dist/components/heading.js",
-      "types": "./dist/components/heading.d.ts"
+    "./carousel": {
+      "types": "./dist/carousel/index.d.ts",
+      "import": "./dist/carousel/index.js"
     },
-    "./components/highlight": {
-      "import": "./dist/components/highlight.js",
-      "types": "./dist/components/highlight.d.ts"
+    "./countdown": {
+      "types": "./dist/countdown/index.d.ts",
+      "import": "./dist/countdown/index.js"
     },
-    "./components/icon-button": {
-      "import": "./dist/components/icon-button.js",
-      "types": "./dist/components/icon-button.d.ts"
+    "./generic-error": {
+      "types": "./dist/generic-error/index.d.ts",
+      "import": "./dist/generic-error/index.js"
     },
-    "./components/if": {
-      "import": "./dist/components/if.js",
-      "types": "./dist/components/if.d.ts"
+    "./grid": {
+      "types": "./dist/grid/index.d.ts",
+      "import": "./dist/grid/index.js"
     },
-    "./components/iframe": {
-      "import": "./dist/components/iframe.js",
-      "types": "./dist/components/iframe.d.ts"
+    "./heading": {
+      "types": "./dist/heading/index.d.ts",
+      "import": "./dist/heading/index.js"
     },
-    "./components/item": {
-      "import": "./dist/components/item.js",
-      "types": "./dist/components/item.d.ts"
+    "./highlight": {
+      "types": "./dist/highlight/index.d.ts",
+      "import": "./dist/highlight/index.js"
     },
-    "./components/leaflet-map": {
-      "import": "./dist/components/leaflet-map.js",
-      "types": "./dist/components/leaflet-map.d.ts"
+    "./hooks/use-current-route-data": {
+      "types": "./dist/hooks/use-current-route-data.d.ts",
+      "import": "./dist/hooks/use-current-route-data.js"
     },
-    "./components/link": {
-      "import": "./dist/components/link.js",
-      "types": "./dist/components/link.d.ts"
+    "./hooks/use-focus-search": {
+      "types": "./dist/hooks/use-focus-search.d.ts",
+      "import": "./dist/hooks/use-focus-search.js"
     },
-    "./components/list-item": {
-      "import": "./dist/components/list-item.js",
-      "types": "./dist/components/list-item.d.ts"
+    "./hooks/use-matches-data": {
+      "types": "./dist/hooks/use-matches-data.d.ts",
+      "import": "./dist/hooks/use-matches-data.js"
     },
-    "./components/maptiler-map": {
-      "import": "./dist/components/maptiler-map.js",
-      "types": "./dist/components/maptiler-map.d.ts"
+    "./hooks/use-media-query": {
+      "types": "./dist/hooks/use-media-query.d.ts",
+      "import": "./dist/hooks/use-media-query.js"
     },
-    "./components/markdown-container": {
-      "import": "./dist/components/markdown-container.js",
-      "types": "./dist/components/markdown-container.d.ts"
+    "./hooks/use-mobile": {
+      "types": "./dist/hooks/use-mobile.d.ts",
+      "import": "./dist/hooks/use-mobile.js"
     },
-    "./components/password-input": {
-      "import": "./dist/components/password-input.js",
-      "types": "./dist/components/password-input.d.ts"
+    "./hooks/use-nonce": {
+      "types": "./dist/hooks/use-nonce.d.ts",
+      "import": "./dist/hooks/use-nonce.js"
     },
-    "./components/picture": {
-      "import": "./dist/components/picture.js",
-      "types": "./dist/components/picture.d.ts"
+    "./hooks/use-orientation": {
+      "types": "./dist/hooks/use-orientation.d.ts",
+      "import": "./dist/hooks/use-orientation.js"
     },
-    "./components/protected-email": {
-      "import": "./dist/components/protected-email.js",
-      "types": "./dist/components/protected-email.d.ts"
+    "./hooks/use-user": {
+      "types": "./dist/hooks/use-user.d.ts",
+      "import": "./dist/hooks/use-user.js"
     },
-    "./components/text": {
-      "import": "./dist/components/text.js",
-      "types": "./dist/components/text.d.ts"
+    "./icon-button": {
+      "types": "./dist/icon-button/index.d.ts",
+      "import": "./dist/icon-button/index.js"
     },
-    "./components/unordered-list": {
-      "import": "./dist/components/unordered-list.js",
-      "types": "./dist/components/unordered-list.d.ts"
+    "./if": {
+      "types": "./dist/if/index.d.ts",
+      "import": "./dist/if/index.js"
     },
-    "./hooks/use-current-route-data": {
-      "import": "./dist/hooks/use-current-route-data.js",
-      "types": "./dist/hooks/use-current-route-data.d.ts"
+    "./iframe": {
+      "types": "./dist/iframe/index.d.ts",
+      "import": "./dist/iframe/index.js"
     },
-    "./hooks/use-focus-search": {
-      "import": "./dist/hooks/use-focus-search.js",
-      "types": "./dist/hooks/use-focus-search.d.ts"
+    "./link": {
+      "types": "./dist/link/index.d.ts",
+      "import": "./dist/link/index.js"
     },
-    "./hooks/use-matches-data": {
-      "import": "./dist/hooks/use-matches-data.js",
-      "types": "./dist/hooks/use-matches-data.d.ts"
+    "./list": {
+      "types": "./dist/list/index.d.ts",
+      "import": "./dist/list/index.js"
     },
-    "./hooks/use-media-query": {
-      "import": "./dist/hooks/use-media-query.js",
-      "types": "./dist/hooks/use-media-query.d.ts"
+    "./markdown-container": {
+      "types": "./dist/markdown-container/index.d.ts",
+      "import": "./dist/markdown-container/index.js"
     },
-    "./hooks/use-mobile": {
-      "import": "./dist/hooks/use-mobile.js",
-      "types": "./dist/hooks/use-mobile.d.ts"
+    "./password-input": {
+      "types": "./dist/password-input/index.d.ts",
+      "import": "./dist/password-input/index.js"
     },
-    "./hooks/use-nonce": {
-      "import": "./dist/hooks/use-nonce.js",
-      "types": "./dist/hooks/use-nonce.d.ts"
+    "./picture": {
+      "types": "./dist/picture/index.d.ts",
+      "import": "./dist/picture/index.js"
     },
-    "./hooks/use-orientation": {
-      "import": "./dist/hooks/use-orientation.js",
-      "types": "./dist/hooks/use-orientation.d.ts"
+    "./protected-email": {
+      "types": "./dist/protected-email/index.d.ts",
+      "import": "./dist/protected-email/index.js"
     },
-    "./hooks/use-user": {
-      "import": "./dist/hooks/use-user.js",
-      "types": "./dist/hooks/use-user.d.ts"
+    "./tailwind.css": "./src/tailwind.css",
+    "./text": {
+      "types": "./dist/text/index.d.ts",
+      "import": "./dist/text/index.js"
     },
-    "./tailwind.css": "./src/styles/tailwind.css",
     "./utils/author": {
-      "import": "./dist/utils/author.js",
-      "types": "./dist/utils/author.d.ts"
-    },
-    "./utils/cn": {
-      "import": "./dist/utils/cn.js",
-      "types": "./dist/utils/cn.d.ts"
-    },
-    "./utils/is-route-active": {
-      "import": "./dist/utils/is-route-active.js",
-      "types": "./dist/utils/is-route-active.d.ts"
+      "types": "./dist/utils/author/index.d.ts",
+      "import": "./dist/utils/author/index.js"
     },
     "./utils/text": {
-      "import": "./dist/utils/text.js",
-      "types": "./dist/utils/text.d.ts"
+      "types": "./dist/utils/text/index.d.ts",
+      "import": "./dist/utils/text/index.js"
     }
   },
-  "files": ["dist", "src"],
-  "homepage": "https://github.com/regardio/react/blob/main/README.md",
-  "keywords": ["react", "components", "ui", "regardio", "tailwindcss"],
-  "license": "MIT",
-  "name": "@regardio/react",
-  "private": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/regardio/react.git"
-  },
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "build": "tsup && post-build-exports --preserve \"./tailwind.css\" && pnpm fix",
     "clean": "exec-clean .turbo dist",
@@ -225,13 +151,14 @@
     "fix": "exec-p fix:*",
     "fix:biome": "lint-biome check --write --unsafe .",
     "fix:md": "lint-md --fix",
+    "fix:pkg": "lint-package --fix",
     "lint": "exec-p lint:*",
     "lint:biome": "lint-biome check .",
     "lint:md": "lint-md",
+    "lint:pkg": "lint-package",
     "prepare": "exec-husky",
     "release": "flow-release",
-    "report": "exec-s report:*",
-    "report:unit": "vitest run --reporter html",
+    "report": "vitest run --coverage",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build -o storybook-static",
     "test": "exec-s test:*",
@@ -239,7 +166,63 @@
     "typecheck": "exec-tsc --noEmit",
     "version": "flow-changeset version"
   },
-  "sideEffects": ["./src/styles/tailwind.css"],
-  "type": "module",
-  "version": "0.4.7"
+  "dependencies": {
+    "@base-ui/react": "1.0.0",
+    "@maptiler/leaflet-maptilersdk": "4.1.1",
+    "@maptiler/sdk": "3.9.0",
+    "@mdx-js/react": "3.1.1",
+    "@regardio/js": "0.6.0",
+    "@regardio/tailwind": "0.1.3",
+    "@supabase/supabase-js": "2.90.0",
+    "cmdk": "1.1.1",
+    "embla-carousel": "8.6.0",
+    "embla-carousel-react": "8.6.0",
+    "input-otp": "1.4.2",
+    "intl-parse-accept-language": "1.0.0",
+    "leaflet": "alpha",
+    "lucide-react": "0.562.0",
+    "markdown-to-jsx": "9.5.1",
+    "react": "19.2.3",
+    "react-day-picker": "9.13.0",
+    "react-dom": "19.2.3",
+    "react-hook-form": "7.70.0",
+    "react-resizable-panels": "4.3.1",
+    "react-router": "7.12.0",
+    "tailwind-variants": "3.2.2",
+    "vaul": "1.1.2",
+    "zod": "4.3.5"
+  },
+  "devDependencies": {
+    "@regardio/dev": "1.11.1",
+    "@storybook/addon-a11y": "10.1.11",
+    "@storybook/addon-docs": "10.1.11",
+    "@storybook/addon-vitest": "10.1.11",
+    "@storybook/react-vite": "10.1.11",
+    "@tailwindcss/vite": "4.1.18",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.1",
+    "@total-typescript/ts-reset": "0.6.1",
+    "@types/leaflet": "1.9.21",
+    "@types/node": "25.0.3",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "5.1.2",
+    "@vitest/browser-playwright": "4.0.16",
+    "@vitest/coverage-v8": "4.0.16",
+    "@vitest/ui": "4.0.16",
+    "jsdom": "27.4.0",
+    "playwright": "1.57.0",
+    "storybook": "10.1.11",
+    "tailwindcss": "4.1.18",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3",
+    "vite": "7.3.1",
+    "vitest": "4.0.16"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/src/background-slideshow/background-slideshow.stories.tsx

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { BackgroundSlideshow, type ImageData } from './background-slideshow';
+
+const meta: Meta<typeof BackgroundSlideshow> = {
+  component: BackgroundSlideshow,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  title: 'Components/BackgroundSlideshow',
+};
+
+export default meta;
+type Story = StoryObj<typeof BackgroundSlideshow>;
+
+const sampleImages: ImageData[] = [
+  {
+    at: { de: 'Bild 1', en: 'Image 1' },
+    fn: 'image1.jpg',
+    hu: 200,
+    id: '1',
+    po: false,
+  },
+  {
+    at: { de: 'Bild 2', en: 'Image 2' },
+    fn: 'image2.jpg',
+    hu: 150,
+    id: '2',
+    po: false,
+  },
+  {
+    at: { de: 'Bild 3', en: 'Image 3' },
+    fn: 'image3.jpg',
+    hu: 100,
+    id: '3',
+    po: false,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    baseUrl: 'https://via.placeholder.com/{format}?text=Image+{id}',
+    className: 'h-[400px] w-full',
+    images: sampleImages,
+    locale: 'en',
+  },
+};
+
+export const WithoutSlideshow: Story = {
+  args: {
+    baseUrl: 'https://via.placeholder.com/{format}?text=Static',
+    className: 'h-[400px] w-full',
+    images: sampleImages,
+    locale: 'en',
+    slideshow: false,
+  },
+};
+
+export const FastTransition: Story = {
+  args: {
+    baseUrl: 'https://via.placeholder.com/{format}?text=Fast',
+    className: 'h-[400px] w-full',
+    images: sampleImages,
+    locale: 'en',
+    slideshowInterval: 2000,
+    transitionDuration: 1000,
+  },
+};
+
+export const SingleImage: Story = {
+  args: {
+    baseUrl: 'https://via.placeholder.com/{format}?text=Single',
+    className: 'h-[400px] w-full',
+    images: [sampleImages[0] as ImageData],
+    locale: 'en',
+    slideshow: true,
+  },
+};
+
+export const EmptyImages: Story = {
+  args: {
+    baseUrl: 'https://via.placeholder.com/{format}',
+    className: 'h-[400px] w-full bg-gray-200',
+    images: [],
+    locale: 'en',
+  },
+};
+
+export const WithFilter: Story = {
+  args: {
+    baseUrl: 'https://via.placeholder.com/{format}?text=Filtered',
+    className: 'h-[400px] w-full',
+    filter: (img: ImageData) => img.hu > 100,
+    images: sampleImages,
+    locale: 'en',
+  },
+};
+
+export const GermanLocale: Story = {
+  args: {
+    baseUrl: 'https://via.placeholder.com/{format}?text=German',
+    className: 'h-[400px] w-full',
+    images: sampleImages,
+    locale: 'de',
+  },
+};
+
+export const ShortTransition: Story = {
+  args: {
+    baseUrl: 'https://via.placeholder.com/{format}?text=Short',
+    className: 'h-[400px] w-full',
+    images: sampleImages,
+    locale: 'en',
+    slideshowInterval: 1000,
+    transitionDuration: 2000,
+  },
+};
+
+export const MediumTransition: Story = {
+  args: {
+    baseUrl: 'https://via.placeholder.com/{format}?text=Medium',
+    className: 'h-[400px] w-full',
+    images: sampleImages,
+    locale: 'en',
+    transitionDuration: 4000,
+  },
+};
+
+export const LongTransition: Story = {
+  args: {
+    baseUrl: 'https://via.placeholder.com/{format}?text=Long',
+    className: 'h-[400px] w-full',
+    images: sampleImages,
+    locale: 'en',
+    transitionDuration: 5000,
+  },
+};

package/src/{components → background-slideshow}/background-slideshow.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 import type { ReactElement } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Picture } from './picture';
+import { Picture } from '../picture';
 
 export type ImageData = {
   at: Record<string, string>; // Alt text in different languages

package/src/background-slideshow/index.ts

@@ -0,0 +1,2 @@
+export type { BackgroundSlideshowProps, ImageData } from './background-slideshow';
+export { BackgroundSlideshow } from './background-slideshow';

package/src/{stories/BlurryGradient.stories.tsx → blurry-gradient/blurry-gradient.stories.tsx}

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { BlurryGradient } from '../components/blurry-gradient';
+import { BlurryGradient } from './blurry-gradient';
 
 const meta: Meta<typeof BlurryGradient> = {
   component: BlurryGradient,

package/src/{components → blurry-gradient}/blurry-gradient.tsx

@@ -12,7 +12,13 @@ export interface BlurryGradientProps extends SVGProps<SVGSVGElement> {
 }
 
 export const BlurryGradient = (props: BlurryGradientProps) => {
-  const { description = 'Decorative blurry gradient', ...svgProps } = props;
+  const {
+    description = 'Decorative blurry gradient',
+    neutralColor,
+    primaryColor,
+    secondaryColor,
+    ...svgProps
+  } = props;
   const titleId = 'blurryGradientTitle';
 
   return (
@@ -50,7 +56,7 @@ export const BlurryGradient = (props: BlurryGradientProps) => {
         </filter>
       </defs>
       <rect
-        fill={props.primaryColor}
+        fill={primaryColor}
         height="1000"
         width="1000"
       />
@@ -58,37 +64,37 @@ export const BlurryGradient = (props: BlurryGradientProps) => {
         <circle
           cx="730"
           cy="559"
-          fill={props.secondaryColor}
+          fill={secondaryColor}
           r="357"
         />
         <circle
           cx="316"
           cy="248"
-          fill={props.primaryColor}
+          fill={primaryColor}
           r="357"
         />
         <circle
           cx="509"
           cy="410"
-          fill={props.neutralColor}
+          fill={neutralColor}
           r="357"
         />
         <circle
           cx="633"
           cy="232"
-          fill={props.secondaryColor}
+          fill={secondaryColor}
           r="357"
         />
         <circle
           cx="156"
           cy="82"
-          fill={props.primaryColor}
+          fill={primaryColor}
           r="357"
         />
         <circle
           cx="150"
           cy="389"
-          fill={props.neutralColor}
+          fill={neutralColor}
           r="357"
         />
       </g>

package/src/blurry-gradient/index.ts

@@ -0,0 +1,2 @@
+export type { BlurryGradientProps } from './blurry-gradient';
+export { BlurryGradient } from './blurry-gradient';