@regardio/react 0.5.1 → 0.5.7

package/README.md

@@ -65,7 +65,6 @@ import '@regardio/react/tailwind.css';
 | `Box` | Flexible container with variant-based styling |
 | `Carousel` | Embla-powered carousel with navigation controls |
 | `Countdown` | Dynamic countdown timer display |
-| `DefinitionList` | Semantic `<dl>` with `Dt` and `Dd` sub-components |
 | `GenericError` | React Router error boundary with i18n support |
 | `Heading` | Semantic headings (h1-h6) with consistent styling |
 | `Highlight` | Text highlighting with customizable styles |
@@ -75,14 +74,13 @@ import '@regardio/react/tailwind.css';
 | `Item` | Grid item with theme colors and link support |
 | `LeafletMap` | Leaflet map integration |
 | `Link` | React Router link with external URL detection |
-| `ListItem` | Styled list item component |
+| `List` | Compound list component with Root and Item |
 | `MaptilerMap` | MapTiler SDK integration |
 | `MarkdownContainer` | MDX/Markdown renderer with typography processing |
 | `PasswordInput` | Password field with visibility toggle |
 | `Picture` | Responsive images with srcset generation |
 | `ProtectedEmail` | Email obfuscation for spam protection |
 | `Text` | Typography component with variants |
-| `UnorderedList` | Styled unordered list with variants |
 
 ### Hooks
 

package/dist/hooks/{use-current-route-data/index.js → use-current-route-data.js}

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useLocation, useMatches } from 'react-router';
 
-// src/hooks/use-current-route-data/use-current-route-data.ts
+// src/hooks/use-current-route-data.ts
 function useCurrentRouteData() {
   const location = useLocation();
   const matchingRoutes = useMatches();

package/dist/hooks/{use-focus-search/index.js → use-focus-search.js}

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-// src/hooks/use-focus-search/use-focus-search.ts
+// src/hooks/use-focus-search.ts
 function useFocusSearch(ref) {
   useEffect(() => {
     function handleKeyDown(event) {

package/dist/hooks/{use-matches-data/index.js → use-matches-data.js}

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useMatches } from 'react-router';
 
-// src/hooks/use-matches-data/use-matches-data.ts
+// src/hooks/use-matches-data.ts
 function useMatchesData(id) {
   const matchingRoutes = useMatches();
   const route = useMemo(() => {

package/dist/hooks/{use-media-query/index.js → use-media-query.js}

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-// src/hooks/use-media-query/use-media-query.ts
+// src/hooks/use-media-query.ts
 function useMediaQuery(query) {
   const [matches, setMatches] = useState(false);
   useEffect(() => {

package/dist/hooks/{use-mobile/index.js → use-mobile.js}

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-// src/hooks/use-mobile/use-mobile.ts
+// src/hooks/use-mobile.ts
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
   const [isMobile, setIsMobile] = useState(void 0);

package/dist/hooks/{use-nonce/index.d.ts → use-nonce.d.ts}

@@ -1,6 +1,7 @@
 import * as react from 'react';
 
+declare const NonceContext: react.Context<string>;
 declare const NonceProvider: react.Provider<string>;
 declare const useNonce: () => string;
 
-export { NonceProvider, useNonce };
+export { NonceContext, NonceProvider, useNonce };

package/dist/hooks/{use-nonce/index.js → use-nonce.js}

@@ -1,8 +1,8 @@
 import { createContext, useContext } from 'react';
 
-// src/hooks/use-nonce/use-nonce.ts
+// src/hooks/use-nonce.ts
 var NonceContext = createContext("");
 var NonceProvider = NonceContext.Provider;
 var useNonce = () => useContext(NonceContext);
 
-export { NonceProvider, useNonce };
+export { NonceContext, NonceProvider, useNonce };

package/dist/hooks/{use-orientation/index.d.ts → use-orientation.d.ts}

@@ -8,4 +8,4 @@ type Orientation = 'portrait' | 'landscape';
  */
 declare function useOrientation(): Orientation;
 
-export { useOrientation };
+export { type Orientation, useOrientation };

package/dist/hooks/{use-orientation/index.js → use-orientation.js}

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-// src/hooks/use-orientation/use-orientation.ts
+// src/hooks/use-orientation.ts
 function useOrientation() {
   const [orientation, setOrientation] = useState(() => {
     if (typeof window !== "undefined") {

package/dist/hooks/{use-user/index.js → use-user.js}

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-// src/hooks/use-user/use-user.tsx
+// src/hooks/use-user.tsx
 var defaultContextValue = {
   isLoading: false,
   user: null

package/package.json

@@ -1,194 +1,149 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
-  "author": "Bernd Matzner <bernd.matzner@regard.io>",
+  "name": "@regardio/react",
+  "version": "0.5.7",
+  "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.5.0",
-    "@regardio/tailwind": "0.1.2",
-    "@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.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.3.0",
-    "react-router": "7.11.0",
-    "tailwind-variants": "3.2.2",
-    "vaul": "1.1.2",
-    "zod": "4.3.5"
-  },
-  "description": "Regardio React UI components",
-  "devDependencies": {
-    "@regardio/dev": "1.10.3",
-    "@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"
+  "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": {
     "./background-slideshow": {
-      "import": "./dist/background-slideshow/index.js",
-      "types": "./dist/background-slideshow/index.d.ts"
+      "types": "./dist/background-slideshow/index.d.ts",
+      "import": "./dist/background-slideshow/index.js"
     },
     "./blurry-gradient": {
-      "import": "./dist/blurry-gradient/index.js",
-      "types": "./dist/blurry-gradient/index.d.ts"
+      "types": "./dist/blurry-gradient/index.d.ts",
+      "import": "./dist/blurry-gradient/index.js"
     },
     "./carousel": {
-      "import": "./dist/carousel/index.js",
-      "types": "./dist/carousel/index.d.ts"
+      "types": "./dist/carousel/index.d.ts",
+      "import": "./dist/carousel/index.js"
     },
     "./countdown": {
-      "import": "./dist/countdown/index.js",
-      "types": "./dist/countdown/index.d.ts"
+      "types": "./dist/countdown/index.d.ts",
+      "import": "./dist/countdown/index.js"
     },
     "./generic-error": {
-      "import": "./dist/generic-error/index.js",
-      "types": "./dist/generic-error/index.d.ts"
+      "types": "./dist/generic-error/index.d.ts",
+      "import": "./dist/generic-error/index.js"
     },
     "./grid": {
-      "import": "./dist/grid/index.js",
-      "types": "./dist/grid/index.d.ts"
+      "types": "./dist/grid/index.d.ts",
+      "import": "./dist/grid/index.js"
     },
     "./heading": {
-      "import": "./dist/heading/index.js",
-      "types": "./dist/heading/index.d.ts"
+      "types": "./dist/heading/index.d.ts",
+      "import": "./dist/heading/index.js"
     },
     "./highlight": {
-      "import": "./dist/highlight/index.js",
-      "types": "./dist/highlight/index.d.ts"
+      "types": "./dist/highlight/index.d.ts",
+      "import": "./dist/highlight/index.js"
     },
     "./hooks/use-current-route-data": {
-      "import": "./dist/hooks/use-current-route-data/index.js",
-      "types": "./dist/hooks/use-current-route-data/index.d.ts"
+      "types": "./dist/hooks/use-current-route-data.d.ts",
+      "import": "./dist/hooks/use-current-route-data.js"
     },
     "./hooks/use-focus-search": {
-      "import": "./dist/hooks/use-focus-search/index.js",
-      "types": "./dist/hooks/use-focus-search/index.d.ts"
+      "types": "./dist/hooks/use-focus-search.d.ts",
+      "import": "./dist/hooks/use-focus-search.js"
     },
     "./hooks/use-matches-data": {
-      "import": "./dist/hooks/use-matches-data/index.js",
-      "types": "./dist/hooks/use-matches-data/index.d.ts"
+      "types": "./dist/hooks/use-matches-data.d.ts",
+      "import": "./dist/hooks/use-matches-data.js"
     },
     "./hooks/use-media-query": {
-      "import": "./dist/hooks/use-media-query/index.js",
-      "types": "./dist/hooks/use-media-query/index.d.ts"
+      "types": "./dist/hooks/use-media-query.d.ts",
+      "import": "./dist/hooks/use-media-query.js"
     },
     "./hooks/use-mobile": {
-      "import": "./dist/hooks/use-mobile/index.js",
-      "types": "./dist/hooks/use-mobile/index.d.ts"
+      "types": "./dist/hooks/use-mobile.d.ts",
+      "import": "./dist/hooks/use-mobile.js"
     },
     "./hooks/use-nonce": {
-      "import": "./dist/hooks/use-nonce/index.js",
-      "types": "./dist/hooks/use-nonce/index.d.ts"
+      "types": "./dist/hooks/use-nonce.d.ts",
+      "import": "./dist/hooks/use-nonce.js"
     },
     "./hooks/use-orientation": {
-      "import": "./dist/hooks/use-orientation/index.js",
-      "types": "./dist/hooks/use-orientation/index.d.ts"
+      "types": "./dist/hooks/use-orientation.d.ts",
+      "import": "./dist/hooks/use-orientation.js"
     },
     "./hooks/use-user": {
-      "import": "./dist/hooks/use-user/index.js",
-      "types": "./dist/hooks/use-user/index.d.ts"
+      "types": "./dist/hooks/use-user.d.ts",
+      "import": "./dist/hooks/use-user.js"
     },
     "./icon-button": {
-      "import": "./dist/icon-button/index.js",
-      "types": "./dist/icon-button/index.d.ts"
+      "types": "./dist/icon-button/index.d.ts",
+      "import": "./dist/icon-button/index.js"
     },
     "./if": {
-      "import": "./dist/if/index.js",
-      "types": "./dist/if/index.d.ts"
+      "types": "./dist/if/index.d.ts",
+      "import": "./dist/if/index.js"
     },
     "./iframe": {
-      "import": "./dist/iframe/index.js",
-      "types": "./dist/iframe/index.d.ts"
+      "types": "./dist/iframe/index.d.ts",
+      "import": "./dist/iframe/index.js"
     },
     "./link": {
-      "import": "./dist/link/index.js",
-      "types": "./dist/link/index.d.ts"
+      "types": "./dist/link/index.d.ts",
+      "import": "./dist/link/index.js"
     },
     "./list": {
-      "import": "./dist/list/index.js",
-      "types": "./dist/list/index.d.ts"
+      "types": "./dist/list/index.d.ts",
+      "import": "./dist/list/index.js"
     },
     "./markdown-container": {
-      "import": "./dist/markdown-container/index.js",
-      "types": "./dist/markdown-container/index.d.ts"
+      "types": "./dist/markdown-container/index.d.ts",
+      "import": "./dist/markdown-container/index.js"
     },
     "./password-input": {
-      "import": "./dist/password-input/index.js",
-      "types": "./dist/password-input/index.d.ts"
+      "types": "./dist/password-input/index.d.ts",
+      "import": "./dist/password-input/index.js"
     },
     "./picture": {
-      "import": "./dist/picture/index.js",
-      "types": "./dist/picture/index.d.ts"
+      "types": "./dist/picture/index.d.ts",
+      "import": "./dist/picture/index.js"
     },
     "./protected-email": {
-      "import": "./dist/protected-email/index.js",
-      "types": "./dist/protected-email/index.d.ts"
+      "types": "./dist/protected-email/index.d.ts",
+      "import": "./dist/protected-email/index.js"
     },
     "./tailwind.css": "./src/tailwind.css",
     "./text": {
-      "import": "./dist/text/index.js",
-      "types": "./dist/text/index.d.ts"
+      "types": "./dist/text/index.d.ts",
+      "import": "./dist/text/index.js"
     },
     "./utils/author": {
-      "import": "./dist/utils/author/index.js",
-      "types": "./dist/utils/author/index.d.ts"
+      "types": "./dist/utils/author/index.d.ts",
+      "import": "./dist/utils/author/index.js"
     },
     "./utils/text": {
-      "import": "./dist/utils/text/index.js",
-      "types": "./dist/utils/text/index.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",
@@ -196,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:*",
@@ -210,7 +166,63 @@
     "typecheck": "exec-tsc --noEmit",
     "version": "flow-changeset version"
   },
-  "sideEffects": ["./src/tailwind.css"],
-  "type": "module",
-  "version": "0.5.1"
+  "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.2.0",
+    "@supabase/supabase-js": "2.90.1",
+    "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.7",
+    "react": "19.2.3",
+    "react-day-picker": "9.13.0",
+    "react-dom": "19.2.3",
+    "react-hook-form": "7.71.0",
+    "react-resizable-panels": "4.4.0",
+    "react-router": "7.12.0",
+    "tailwind-variants": "3.2.2",
+    "vaul": "1.1.2",
+    "zod": "4.3.5"
+  },
+  "devDependencies": {
+    "@regardio/dev": "1.11.4",
+    "@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.8",
+    "@types/react": "19.2.8",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "5.1.2",
+    "@vitest/browser-playwright": "4.0.17",
+    "@vitest/coverage-v8": "4.0.17",
+    "@vitest/ui": "4.0.17",
+    "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.17"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
 }

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

@@ -66,3 +66,72 @@ export const FastTransition: Story = {
     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/carousel/carousel.stories.tsx

@@ -87,3 +87,49 @@ export const ManySlides: Story = {
     </Carousel.Root>
   ),
 };
+
+export const VerticalOrientation: Story = {
+  render: () => (
+    <Carousel.Root
+      className="w-full max-w-md h-[400px]"
+      orientation="vertical"
+    >
+      <Carousel.Content className="flex-col gap-4">
+        <Carousel.Item>
+          <SlideCard>Vertical Slide 1</SlideCard>
+        </Carousel.Item>
+        <Carousel.Item>
+          <SlideCard>Vertical Slide 2</SlideCard>
+        </Carousel.Item>
+        <Carousel.Item>
+          <SlideCard>Vertical Slide 3</SlideCard>
+        </Carousel.Item>
+      </Carousel.Content>
+    </Carousel.Root>
+  ),
+};
+
+export const WithOptions: Story = {
+  render: () => (
+    <Carousel.Root
+      className="w-full max-w-md"
+      opts={{ align: 'start', loop: true }}
+    >
+      <Carousel.Content className="gap-4">
+        <Carousel.Item>
+          <SlideCard>Loop Slide 1</SlideCard>
+        </Carousel.Item>
+        <Carousel.Item>
+          <SlideCard>Loop Slide 2</SlideCard>
+        </Carousel.Item>
+        <Carousel.Item>
+          <SlideCard>Loop Slide 3</SlideCard>
+        </Carousel.Item>
+      </Carousel.Content>
+      <div className="flex justify-center gap-4 mt-4">
+        <Carousel.Previous className="px-4 py-2 bg-gray-200 rounded">←</Carousel.Previous>
+        <Carousel.Next className="px-4 py-2 bg-gray-200 rounded">→</Carousel.Next>
+      </div>
+    </Carousel.Root>
+  ),
+};

package/src/hooks/{use-nonce/use-nonce.ts → use-nonce.ts}

@@ -8,13 +8,3 @@ export const NonceContext = createContext<string>('');
 export const NonceProvider = NonceContext.Provider;
 
 export const useNonce = () => useContext(NonceContext);
-
-/**
- * Generate a cryptographically secure nonce for CSP.
- * @returns A base64-encoded random nonce
- */
-export function generateNonce(): string {
-  const array = new Uint8Array(16);
-  crypto.getRandomValues(array);
-  return btoa(String.fromCharCode(...array));
-}

package/src/link/link.stories.tsx

@@ -56,3 +56,54 @@ export const AllVariants: Story = {
     </div>
   ),
 };
+
+export const TelephoneLink: Story = {
+  args: {
+    children: 'Call Us',
+    to: 'tel:+1234567890',
+  },
+};
+
+export const MailtoLink: Story = {
+  args: {
+    children: 'Email Us',
+    to: 'mailto:hello@example.com',
+  },
+};
+
+export const HashLink: Story = {
+  args: {
+    children: 'Jump to Section',
+    to: '#section-id',
+  },
+};
+
+export const WithSearchAndHash: Story = {
+  args: {
+    children: 'Link with Query',
+    to: { hash: '#results', pathname: '/search', search: '?q=test' },
+  },
+};
+
+export const EmptyPath: Story = {
+  args: {
+    children: 'No destination',
+    to: '',
+  },
+};
+
+export const WithArrow: Story = {
+  args: {
+    arrow: 'rarr',
+    children: 'Link with Arrow',
+    to: '/arrow',
+  },
+};
+
+export const ButtonVariant: Story = {
+  args: {
+    children: 'Button Style Link',
+    to: '/button',
+    variant: 'button',
+  },
+};

package/src/link/link.test.tsx

@@ -0,0 +1,169 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { Link, LinkBase, MarkdownLink, PathResolverProvider } from './link';
+
+afterEach(() => {
+  cleanup();
+});
+
+const renderWithRouter = (ui: React.ReactNode) => {
+  return render(<MemoryRouter>{ui}</MemoryRouter>);
+};
+
+describe('LinkBase', () => {
+  it('renders internal link with NavLink', () => {
+    renderWithRouter(<LinkBase to="/about">About</LinkBase>);
+    expect(screen.getByText('About')).toBeDefined();
+  });
+
+  it('renders external http link as anchor', () => {
+    renderWithRouter(<LinkBase to="https://example.com">External</LinkBase>);
+    const link = screen.getByText('External');
+    expect(link.tagName).toBe('A');
+    expect(link.getAttribute('href')).toBe('https://example.com');
+  });
+
+  it('renders mailto link as anchor', () => {
+    renderWithRouter(<LinkBase to="mailto:test@example.com">Email</LinkBase>);
+    const link = screen.getByText('Email');
+    expect(link.tagName).toBe('A');
+    expect(link.getAttribute('href')).toBe('mailto:test@example.com');
+  });
+
+  it('renders tel link as anchor', () => {
+    renderWithRouter(<LinkBase to="tel:+1234567890">Call</LinkBase>);
+    const link = screen.getByText('Call');
+    expect(link.tagName).toBe('A');
+    expect(link.getAttribute('href')).toBe('tel:+1234567890');
+  });
+
+  it('uses pathResolver when routeKey is provided', () => {
+    const resolver = vi.fn().mockReturnValue('/resolved-path');
+    renderWithRouter(
+      <PathResolverProvider value={resolver}>
+        <LinkBase routeKey="home">Home</LinkBase>
+      </PathResolverProvider>,
+    );
+    expect(resolver).toHaveBeenCalledWith('home');
+    expect(screen.getByText('Home')).toBeDefined();
+  });
+
+  it('handles object to prop with pathname, search, and hash', () => {
+    renderWithRouter(
+      <LinkBase to={{ hash: '#section', pathname: '/page', search: '?q=test' }}>Complex</LinkBase>,
+    );
+    expect(screen.getByText('Complex')).toBeDefined();
+  });
+
+  it('renders children only when path is empty', () => {
+    renderWithRouter(<LinkBase>No Link</LinkBase>);
+    expect(screen.getByText('No Link')).toBeDefined();
+  });
+
+  it('calls onClick handler', () => {
+    const handleClick = vi.fn();
+    renderWithRouter(
+      <LinkBase
+        onClick={handleClick}
+        to="/test"
+      >
+        Click Me
+      </LinkBase>,
+    );
+    fireEvent.click(screen.getByText('Click Me'));
+    expect(handleClick).toHaveBeenCalled();
+  });
+
+  it('opens external http link in new window', () => {
+    const windowOpen = vi.spyOn(window, 'open').mockImplementation(() => null);
+    renderWithRouter(<LinkBase to="https://example.com">External</LinkBase>);
+    fireEvent.click(screen.getByText('External'));
+    expect(windowOpen).toHaveBeenCalledWith('https://example.com', '_blank', 'noopener,noreferrer');
+    windowOpen.mockRestore();
+  });
+
+  it('scrolls to element for hash links', () => {
+    const scrollIntoView = vi.fn();
+    const element = document.createElement('div');
+    element.id = 'section';
+    element.scrollIntoView = scrollIntoView;
+    document.body.appendChild(element);
+
+    renderWithRouter(<LinkBase to="#section">Jump</LinkBase>);
+    fireEvent.click(screen.getByText('Jump'));
+    expect(scrollIntoView).toHaveBeenCalledWith({ behavior: 'smooth' });
+
+    document.body.removeChild(element);
+  });
+
+  it('handles hash link when element not found', () => {
+    renderWithRouter(<LinkBase to="#nonexistent">Jump</LinkBase>);
+    fireEvent.click(screen.getByText('Jump'));
+  });
+
+  it('does not prevent default for tel links', () => {
+    renderWithRouter(<LinkBase to="tel:+1234567890">Call</LinkBase>);
+    const link = screen.getByText('Call');
+    const event = fireEvent.click(link);
+    expect(event).toBe(true);
+  });
+
+  it('respects defaultPrevented in onClick', () => {
+    const handleClick = vi.fn((e: React.MouseEvent) => e.preventDefault());
+    const windowOpen = vi.spyOn(window, 'open').mockImplementation(() => null);
+
+    renderWithRouter(
+      <LinkBase
+        onClick={handleClick}
+        to="https://example.com"
+      >
+        External
+      </LinkBase>,
+    );
+    fireEvent.click(screen.getByText('External'));
+    expect(handleClick).toHaveBeenCalled();
+    expect(windowOpen).not.toHaveBeenCalled();
+
+    windowOpen.mockRestore();
+  });
+});
+
+describe('Link', () => {
+  it('renders with variant', () => {
+    renderWithRouter(
+      <Link
+        to="/test"
+        variant="button"
+      >
+        Button Link
+      </Link>,
+    );
+    expect(screen.getByText('Button Link')).toBeDefined();
+  });
+
+  it('renders with arrow', () => {
+    renderWithRouter(
+      <Link
+        arrow="rarr"
+        to="/test"
+      >
+        Arrow Link
+      </Link>,
+    );
+    expect(screen.getByText('Arrow Link')).toBeDefined();
+  });
+});
+
+describe('MarkdownLink', () => {
+  it('renders Link when href is provided', () => {
+    renderWithRouter(<MarkdownLink href="/page">Markdown</MarkdownLink>);
+    expect(screen.getByText('Markdown')).toBeDefined();
+  });
+
+  it('returns null when href is not provided', () => {
+    const { container } = renderWithRouter(<MarkdownLink>No Link</MarkdownLink>);
+    expect(container.innerHTML).toBe('');
+  });
+});

package/src/markdown-container/markdown-container.stories.tsx

@@ -74,3 +74,58 @@ export const WithCharacterLimit: Story = {
     locale: 'en',
   },
 };
+
+export const WithMDXComponents: Story = {
+  args: {
+    children: `# Custom Components
+
+This text uses custom MDX components.`,
+    locale: 'en',
+    mdxComponents: {},
+  },
+};
+
+export const WithMarkdownOverrides: Story = {
+  args: {
+    children: `# Overridden Heading
+
+This paragraph has custom styling applied.`,
+    locale: 'en',
+    markdownOverrides: {
+      h1: {
+        props: {
+          className: 'text-4xl font-bold text-blue-600',
+        },
+      },
+    },
+  },
+};
+
+export const WithInternalLink: Story = {
+  args: {
+    children: 'Check out [our page](https://regardio.com/about) for more info.',
+    locale: 'en',
+  },
+};
+
+export const WithExternalLink: Story = {
+  args: {
+    children: 'Visit [external site](https://example.com) for details.',
+    locale: 'en',
+  },
+};
+
+export const EmptyContent: Story = {
+  args: {
+    children: '',
+    locale: 'en',
+  },
+};
+
+export const WithClassName: Story = {
+  args: {
+    children: '**Bold text** in a styled container.',
+    className: 'bg-gray-100 p-4 rounded',
+    locale: 'en',
+  },
+};

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/src/hooks/use-current-route-data/index.ts

@@ -1 +0,0 @@
-export { useCurrentRouteData } from './use-current-route-data';

package/src/hooks/use-focus-search/index.ts

@@ -1 +0,0 @@
-export { useFocusSearch } from './use-focus-search';

package/src/hooks/use-matches-data/index.ts

@@ -1 +0,0 @@
-export { useMatchesData } from './use-matches-data';

package/src/hooks/use-media-query/index.ts

@@ -1 +0,0 @@
-export { useMediaQuery } from './use-media-query';

package/src/hooks/use-mobile/index.ts

@@ -1 +0,0 @@
-export { useIsMobile } from './use-mobile';

package/src/hooks/use-nonce/index.ts

@@ -1 +0,0 @@
-export { NonceProvider, useNonce } from './use-nonce';

package/src/hooks/use-orientation/index.ts

@@ -1 +0,0 @@
-export { useOrientation } from './use-orientation';

package/src/hooks/use-user/index.ts

@@ -1,2 +0,0 @@
-export type { UserContextProviderProps, UserContextType } from './use-user';
-export { UserContext, UserContextProvider, useUser } from './use-user';