@regardio/react 0.4.7 → 0.5.1

package/src/list/list.test.tsx

@@ -0,0 +1,168 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { List } from './index';
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('List.Root', () => {
+  it('renders as ul by default', () => {
+    render(
+      <List.Root data-testid="list">
+        <List.Item>Item 1</List.Item>
+      </List.Root>,
+    );
+
+    const list = screen.getByTestId('list');
+    expect(list.tagName).toBe('UL');
+  });
+
+  it('renders as ol when specified', () => {
+    render(
+      <List.Root
+        data-testid="list"
+        render="ol"
+      >
+        <List.Item>Item 1</List.Item>
+      </List.Root>,
+    );
+
+    const list = screen.getByTestId('list');
+    expect(list.tagName).toBe('OL');
+  });
+
+  it('renders as dl when specified', () => {
+    render(
+      <List.Root
+        data-testid="list"
+        render="dl"
+      >
+        <List.Item render="dt">Term</List.Item>
+        <List.Item render="dd">Definition</List.Item>
+      </List.Root>,
+    );
+
+    const list = screen.getByTestId('list');
+    expect(list.tagName).toBe('DL');
+  });
+
+  it('renders as div when specified', () => {
+    render(
+      <List.Root
+        data-testid="list"
+        render="div"
+      >
+        <List.Item render="div">Item 1</List.Item>
+      </List.Root>,
+    );
+
+    const list = screen.getByTestId('list');
+    expect(list.tagName).toBe('DIV');
+  });
+
+  it('passes className to root element', () => {
+    render(
+      <List.Root
+        className="custom-class"
+        data-testid="list"
+      >
+        <List.Item>Item 1</List.Item>
+      </List.Root>,
+    );
+
+    const list = screen.getByTestId('list');
+    expect(list.className).toBe('custom-class');
+  });
+});
+
+describe('List.Item', () => {
+  it('renders as li by default', () => {
+    render(
+      <List.Root>
+        <List.Item data-testid="item">Item 1</List.Item>
+      </List.Root>,
+    );
+
+    const item = screen.getByTestId('item');
+    expect(item.tagName).toBe('LI');
+  });
+
+  it('renders as dd when parent is dl', () => {
+    render(
+      <List.Root render="dl">
+        <List.Item data-testid="item">Definition</List.Item>
+      </List.Root>,
+    );
+
+    const item = screen.getByTestId('item');
+    expect(item.tagName).toBe('DD');
+  });
+
+  it('allows explicit render override', () => {
+    render(
+      <List.Root render="dl">
+        <List.Item
+          data-testid="item"
+          render="dt"
+        >
+          Term
+        </List.Item>
+      </List.Root>,
+    );
+
+    const item = screen.getByTestId('item');
+    expect(item.tagName).toBe('DT');
+  });
+
+  it('applies defaultItemClassName from context', () => {
+    render(
+      <List.Root defaultItemClassName="default-item-class">
+        <List.Item data-testid="item">Item 1</List.Item>
+      </List.Root>,
+    );
+
+    const item = screen.getByTestId('item');
+    expect(item.className).toBe('default-item-class');
+  });
+
+  it('merges defaultItemClassName with item className', () => {
+    render(
+      <List.Root defaultItemClassName="default-class">
+        <List.Item
+          className="custom-class"
+          data-testid="item"
+        >
+          Item 1
+        </List.Item>
+      </List.Root>,
+    );
+
+    const item = screen.getByTestId('item');
+    expect(item.className).toBe('default-class custom-class');
+  });
+
+  it('passes className when no defaultItemClassName', () => {
+    render(
+      <List.Root>
+        <List.Item
+          className="custom-class"
+          data-testid="item"
+        >
+          Item 1
+        </List.Item>
+      </List.Root>,
+    );
+
+    const item = screen.getByTestId('item');
+    expect(item.className).toBe('custom-class');
+  });
+
+  it('works without List.Root context', () => {
+    render(<List.Item data-testid="item">Standalone Item</List.Item>);
+
+    const item = screen.getByTestId('item');
+    expect(item.tagName).toBe('LI');
+    expect(item.textContent).toBe('Standalone Item');
+  });
+});

package/src/markdown-container/index.ts

@@ -0,0 +1,2 @@
+export type { MarkdownContainerProps, MarkdownOverrides, MDXComponent } from './markdown-container';
+export { MarkdownContainer, transformLink } from './markdown-container';

package/src/{stories/MarkdownContainer.stories.tsx → markdown-container/markdown-container.stories.tsx}

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

package/src/{components → markdown-container}/markdown-container.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 import { MDXProvider } from '@mdx-js/react';
+import { cn } from '@regardio/tailwind/utils';
 import Markdown, { type MarkdownToJSX } from 'markdown-to-jsx';
 import type React from 'react';
-import { cn } from '../utils/cn';
 import { replaceSpecialChars } from '../utils/text';
 
 const doubleNewlineRegex = /\n\n+/;

package/src/password-input/index.ts

@@ -0,0 +1,2 @@
+export type { InputProps, PasswordInputProps } from './password-input';
+export { PasswordInput } from './password-input';

package/src/{stories/PasswordInput.stories.tsx → password-input/password-input.stories.tsx}

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

package/src/{components → password-input}/password-input.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 import { Button } from '@base-ui/react/button';
 import { Input } from '@base-ui/react/input';
+import { cn } from '@regardio/tailwind/utils';
 import { useState } from 'react';
-import { cn } from '../utils/cn';
 
 export interface InputProps extends React.ComponentPropsWithoutRef<typeof Input> {}
 
@@ -9,7 +11,7 @@ export interface PasswordInputProps extends InputProps {
   className?: string;
 }
 
-const PasswordInput = ({ className, ...props }: PasswordInputProps) => {
+export const PasswordInput = ({ className, ...props }: PasswordInputProps) => {
   const [showPassword, setShowPassword] = useState(false);
 
   const togglePasswordVisibility = () => {
@@ -45,5 +47,3 @@ const PasswordInput = ({ className, ...props }: PasswordInputProps) => {
     </div>
   );
 };
-
-export { PasswordInput };

package/src/picture/index.ts

@@ -0,0 +1,2 @@
+export type { ImageFormat, PictureProps } from './picture';
+export { Picture, screenSizeVariants } from './picture';

package/src/{stories/Picture.stories.tsx → picture/picture.stories.tsx}

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

package/src/{components → picture}/picture.tsx

@@ -1,5 +1,5 @@
+import { cn } from '@regardio/tailwind/utils';
 import type React from 'react';
-import { cn } from '../utils/cn';
 
 // Define screen size variants for responsive images
 // Define screen size variants for responsive images (used in srcset generation)
@@ -40,7 +40,7 @@ export interface PictureProps {
  * @param placeholder - Placeholder to replace in baseUrl (default: '{format}')
  * @param sizes - Custom sizes attribute
  */
-const Picture: React.FC<PictureProps> = ({
+export const Picture: React.FC<PictureProps> = ({
   alt,
   baseUrl,
   className,
@@ -103,5 +103,3 @@ const Picture: React.FC<PictureProps> = ({
     </picture>
   );
 };
-
-export { Picture };

package/src/protected-email/index.ts

@@ -0,0 +1,2 @@
+export type { ProtectedEmailProps } from './protected-email';
+export { ProtectedEmail } from './protected-email';

package/src/{stories/ProtectedEmail.stories.tsx → protected-email/protected-email.stories.tsx}

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

package/src/{components → protected-email}/protected-email.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
-interface ProtectedEmailProps {
+export interface ProtectedEmailProps {
   username: string;
   domain: string;
   text?: string;

package/src/tailwind.css

@@ -0,0 +1,10 @@
+/**
+ * Tailwind CSS Source Scanning for @regardio/react
+ *
+ * This file enables Tailwind to detect utility classes used in @regardio/react components.
+ * Import this in your app's main CSS file to ensure component styles are included:
+ *
+ * @import "@regardio/react/tailwind.css";
+ */
+
+@source "../";

package/src/text/index.ts

@@ -0,0 +1,2 @@
+export type { TextProps } from './text';
+export { Text } from './text';

package/src/{stories/Text.stories.tsx → text/text.stories.tsx}

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

package/src/text/text.tsx

@@ -0,0 +1,46 @@
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps } from 'react';
+
+const themeColorVariants = {
+  primary: [],
+} as const;
+
+const textVariants = {
+  code: ['font-light', 'font-monospace'],
+  primary: [],
+  subtitle: ['text-lg'],
+} as const;
+
+const text = tv({
+  base: ['relative', 'block'],
+  defaultVariants: {
+    themeColor: 'primary',
+    variant: 'primary',
+  },
+  variants: {
+    themeColor: themeColorVariants,
+    variant: textVariants,
+  },
+});
+
+export type TextThemeColor = keyof typeof themeColorVariants;
+export type TextVariant = keyof typeof textVariants;
+
+export interface TextProps extends ComponentProps<'p'> {
+  themeColor?: TextThemeColor;
+  variant?: TextVariant;
+}
+
+export const Text = ({ children, className, variant, themeColor }: TextProps) => {
+  return (
+    <div
+      className={text({
+        className,
+        themeColor,
+        variant,
+      })}
+    >
+      {children}
+    </div>
+  );
+};

package/src/utils/author/author.tsx

@@ -0,0 +1,36 @@
+import { parseAuthorString } from '@regardio/js/text';
+
+export function generateLinkFromAuthorString(input: string): React.ReactNode {
+  const match = parseAuthorString(input);
+
+  if (match.name) {
+    // Generate email link if email is present
+    if (match.email) {
+      return (
+        <a
+          className={'u-email p-name'}
+          href={`mailto:${match.email}`}
+        >
+          {match.name}
+        </a>
+      );
+    }
+
+    // Generate URL link if URL is present (including relative URLs that start with a slash)
+    if (match.url && (match.url.startsWith('/') || match.url.startsWith('http'))) {
+      return (
+        <a
+          className={'u-url p-name'}
+          href={match.url}
+        >
+          {match.name}
+        </a>
+      );
+    }
+
+    // Return plain name with microformat class if only name is present
+    return <span className={'p-name'}>{match.name}</span>;
+  }
+
+  return;
+}

package/src/utils/author/index.ts

@@ -0,0 +1 @@
+export { generateLinkFromAuthorString } from './author';

package/src/utils/text/index.ts

@@ -0,0 +1 @@
+export { lowerCaseSzett, replaceSpecialChars, shy, wrapSentences } from './text';

package/src/utils/text/text.tsx

@@ -0,0 +1,103 @@
+import { replaceShyInString, splitIntoSentences, typographicQuotes } from '@regardio/js/text';
+import React, { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';
+
+export const lowerCaseSzett = (text: ReactNode | string, _returnType?: 'string'): ReactNode => {
+  // Helper function to process strings
+  const processString = (str: string): ReactNode | string => {
+    const parts = str.split(/(ß)/g);
+    return parts.map((part, index) =>
+      part === 'ß' ? (
+        <span
+          className="lowercase"
+          key={index.toString()}
+        >
+          {part}
+        </span>
+      ) : (
+        part
+      ),
+    );
+  };
+
+  // Handle strings
+  if (typeof text === 'string') {
+    return processString(text);
+  }
+
+  // Handle valid React elements with correct type assertion
+  if (isValidElement(text)) {
+    const element = text as ReactElement<{ children?: ReactNode }>;
+    const { children, ...props } = element.props;
+
+    return cloneElement(element, {
+      ...props,
+      children: lowerCaseSzett(children),
+    });
+  }
+
+  // Handle arrays
+  if (Array.isArray(text)) {
+    return text.map((child, index) => (
+      <React.Fragment key={index.toString()}>{lowerCaseSzett(child as ReactNode)}</React.Fragment>
+    ));
+  }
+
+  // Return other types as is
+  return text;
+};
+
+// Recursive function to traverse ReactNode and replace &shy; in string nodes
+function replaceShyInReactNode(node: ReactNode): ReactNode {
+  if (typeof node === 'string') {
+    // Replace soft hyphen (&shy;) with an empty string or custom logic
+    return node.replace(/\u00AD/g, '');
+  }
+
+  if (isValidElement(node)) {
+    const element = node as ReactElement<{ children?: ReactNode }>;
+    const { children, ...props } = element.props;
+
+    return cloneElement(element, {
+      ...props,
+      children: replaceShyInReactNode(children),
+    });
+  }
+
+  if (Array.isArray(node)) {
+    return node.map((child, index) => (
+      <React.Fragment key={index.toString()}>
+        {replaceShyInReactNode(child as ReactNode)}
+      </React.Fragment>
+    ));
+  }
+
+  return node;
+}
+
+export function shy(input: string | ReactNode | null): string | ReactNode | null {
+  if (input === null) {
+    return null;
+  }
+
+  if (typeof input === 'string') {
+    return replaceShyInString(input);
+  }
+
+  return replaceShyInReactNode(input);
+}
+
+/**
+ * Replace special characters in text: typographic quotes and soft hyphens.
+ * This is a React-aware version that handles ReactNode trees.
+ */
+export function replaceSpecialChars(text: string, locale: string): string | ReactNode | null {
+  return shy(typographicQuotes(text, locale));
+}
+
+/**
+ * Wrap sentences in span elements
+ */
+export function wrapSentences(text: string): ReactNode {
+  const sentences = splitIntoSentences(text);
+  return sentences.map((sentence, index) => <span key={index.toString()}>{sentence} </span>);
+}

package/dist/components/box.d.ts

@@ -1,20 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as cva from 'cva';
-import { VariantProps } from 'cva';
-import { ComponentProps, ElementType } from 'react';
-
-declare const box: (props?: ({
-    variant?: "grid" | "main" | "primary" | "aside" | "code" | "container" | "flex" | "section" | undefined;
-} & ({
-    class?: cva.ClassValue;
-    className?: never;
-} | {
-    class?: never;
-    className?: cva.ClassValue;
-})) | undefined) => string;
-interface BoxProps extends ComponentProps<'div'>, VariantProps<typeof box> {
-    as?: ElementType;
-}
-declare const Box: ({ as: Component, children, className, variant, ...props }: BoxProps) => react_jsx_runtime.JSX.Element;
-
-export { Box, type BoxProps };

package/dist/components/box.js

@@ -1,50 +0,0 @@
-import { defineConfig } from 'cva';
-import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
-import { jsx } from 'react/jsx-runtime';
-
-// src/utils/cn.ts
-var { cva, compose } = defineConfig({
-  hooks: {
-    onComplete: (className) => {
-      return twMerge(className);
-    }
-  }
-});
-var box = cva({
-  defaultVariants: {
-    variant: "primary"
-  },
-  variants: {
-    variant: {
-      aside: [],
-      code: ["font-monospace", "overflow-scroll"],
-      container: ["u-container"],
-      flex: ["flex"],
-      grid: ["u-grid"],
-      main: [],
-      primary: [],
-      section: ["u-grid", "content-start"]
-    }
-  }
-});
-var Box = ({
-  as: Component = "div",
-  children,
-  className,
-  variant,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      className: box({
-        className,
-        variant
-      }),
-      ...props,
-      children
-    }
-  );
-};
-
-export { Box };

package/dist/components/definition-list.d.ts

@@ -1,43 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as cva from 'cva';
-import { VariantProps } from 'cva';
-import { ComponentProps } from 'react';
-
-declare const dl: (props?: ({
-    variant?: "primary" | "unstyled" | undefined;
-} & ({
-    class?: cva.ClassValue;
-    className?: never;
-} | {
-    class?: never;
-    className?: cva.ClassValue;
-})) | undefined) => string;
-declare const dt: (props?: ({
-    variant?: "primary" | undefined;
-} & ({
-    class?: cva.ClassValue;
-    className?: never;
-} | {
-    class?: never;
-    className?: cva.ClassValue;
-})) | undefined) => string;
-declare const dd: (props?: ({
-    variant?: "primary" | undefined;
-} & ({
-    class?: cva.ClassValue;
-    className?: never;
-} | {
-    class?: never;
-    className?: cva.ClassValue;
-})) | undefined) => string;
-interface DefinitionListProps extends ComponentProps<'dl'>, VariantProps<typeof dl> {
-}
-interface DtProps extends ComponentProps<'dt'>, VariantProps<typeof dt> {
-}
-interface DdProps extends ComponentProps<'dd'>, VariantProps<typeof dd> {
-}
-declare const DefinitionList: (props: DefinitionListProps) => react_jsx_runtime.JSX.Element;
-declare const Dt: (props: DtProps) => react_jsx_runtime.JSX.Element;
-declare const Dd: (props: DdProps) => react_jsx_runtime.JSX.Element;
-
-export { Dd, type DdProps, DefinitionList, type DefinitionListProps, Dt, type DtProps };