@regardio/react 0.4.7 → 0.5.5

package/src/list/list-root-context.ts

@@ -0,0 +1,21 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+
+export interface ListRootContextValue {
+  /**
+   * Default element type for list items.
+   * @default 'li'
+   */
+  defaultItemElement: 'li' | 'dd' | 'dt' | 'div' | 'span';
+  /**
+   * Default className to apply to all list items.
+   */
+  defaultItemClassName?: string;
+}
+
+export const ListRootContext = createContext<ListRootContextValue | undefined>(undefined);
+
+export function useListRootContext(): ListRootContextValue | undefined {
+  return useContext(ListRootContext);
+}

package/src/list/list-root.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type ForwardedRef,
+  forwardRef,
+  type ReactNode,
+  useMemo,
+} from 'react';
+import { ListRootContext, type ListRootContextValue } from './list-root-context';
+
+type ListRootElement = 'ul' | 'ol' | 'dl' | 'div' | 'menu' | 'nav';
+
+export type ListRootProps<T extends ListRootElement = 'ul'> = Omit<
+  ComponentPropsWithoutRef<T>,
+  'children'
+> & {
+  /**
+   * The element type to render.
+   * @default 'ul'
+   */
+  render?: T;
+  /**
+   * The content of the list.
+   */
+  children?: ReactNode;
+  /**
+   * Default element type for list items.
+   * When render is 'dl', defaults to 'dd'. Otherwise defaults to 'li'.
+   */
+  defaultItemElement?: ListRootContextValue['defaultItemElement'];
+  /**
+   * Default className to apply to all list items.
+   */
+  defaultItemClassName?: string;
+};
+
+function ListRootImpl<T extends ListRootElement = 'ul'>(
+  props: ListRootProps<T>,
+  ref: ForwardedRef<HTMLElement>,
+) {
+  const {
+    render = 'ul' as T,
+    children,
+    defaultItemElement,
+    defaultItemClassName,
+    ...elementProps
+  } = props;
+
+  const resolvedDefaultItemElement = defaultItemElement ?? (render === 'dl' ? 'dd' : 'li');
+
+  const contextValue = useMemo<ListRootContextValue>(
+    () => ({
+      defaultItemClassName,
+      defaultItemElement: resolvedDefaultItemElement,
+    }),
+    [resolvedDefaultItemElement, defaultItemClassName],
+  );
+
+  const Component = render as ElementType;
+
+  return (
+    <ListRootContext.Provider value={contextValue}>
+      <Component
+        ref={ref}
+        {...elementProps}
+      >
+        {children}
+      </Component>
+    </ListRootContext.Provider>
+  );
+}
+
+export const ListRoot = forwardRef(ListRootImpl) as <T extends ListRootElement = 'ul'>(
+  props: ListRootProps<T> & { ref?: ForwardedRef<HTMLElement> },
+) => ReturnType<typeof ListRootImpl>;
+
+export namespace ListRoot {
+  export type Props<T extends ListRootElement = 'ul'> = ListRootProps<T>;
+}

package/src/list/list.css

@@ -0,0 +1,32 @@
+/**
+ * CSS custom properties for List component styling.
+ * These can be overridden at any level to customize the appearance.
+ *
+ * Usage with CSS Modules or plain CSS:
+ * .my-list {
+ *   --list-gap: 1rem;
+ *   --list-padding: 0;
+ * }
+ *
+ * Usage with Tailwind (via arbitrary properties):
+ * <List.Root className="[--list-gap:1rem]">
+ */
+
+:root {
+  /* List Root */
+  --list-gap: 0;
+  --list-padding: 0;
+  --list-margin: 0;
+  --list-style: none;
+
+  /* List Item */
+  --list-item-padding: 0;
+  --list-item-margin: 0;
+
+  /* Definition List specific */
+  --list-dl-grid-columns: auto 1fr;
+  --list-dl-gap-x: 0.5rem;
+  --list-dl-gap-y: 0.25rem;
+  --list-dt-font-weight: 600;
+  --list-dd-margin: 0;
+}

package/src/list/list.stories.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { List } from './index';
+
+const meta: Meta<typeof List.Root> = {
+  component: List.Root,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  title: 'Components/List',
+};
+
+export default meta;
+type Story = StoryObj<typeof List.Root>;
+
+export const UnorderedList: Story = {
+  render: () => (
+    <List.Root>
+      <List.Item>First item</List.Item>
+      <List.Item>Second item</List.Item>
+      <List.Item>Third item</List.Item>
+    </List.Root>
+  ),
+};
+
+export const OrderedList: Story = {
+  render: () => (
+    <List.Root render="ol">
+      <List.Item>Step one</List.Item>
+      <List.Item>Step two</List.Item>
+      <List.Item>Step three</List.Item>
+    </List.Root>
+  ),
+};
+
+export const DefinitionList: Story = {
+  render: () => (
+    <List.Root
+      className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2"
+      render="dl"
+    >
+      <List.Item
+        className="font-semibold"
+        render="dt"
+      >
+        Email
+      </List.Item>
+      <List.Item>contact@example.com</List.Item>
+      <List.Item
+        className="font-semibold"
+        render="dt"
+      >
+        Phone
+      </List.Item>
+      <List.Item>+1 234 567 890</List.Item>
+      <List.Item
+        className="font-semibold"
+        render="dt"
+      >
+        Address
+      </List.Item>
+      <List.Item>123 Main Street, City, Country</List.Item>
+    </List.Root>
+  ),
+};
+
+export const WithDefaultItemClassName: Story = {
+  render: () => (
+    <List.Root defaultItemClassName="py-2 border-b border-gray-200 last:border-0">
+      <List.Item>Styled item one</List.Item>
+      <List.Item>Styled item two</List.Item>
+      <List.Item>Styled item three</List.Item>
+    </List.Root>
+  ),
+};
+
+export const InlineList: Story = {
+  render: () => (
+    <List.Root className="flex flex-wrap gap-2 list-none p-0">
+      <List.Item className="px-2 py-1 bg-gray-100 rounded">Tag 1</List.Item>
+      <List.Item className="px-2 py-1 bg-gray-100 rounded">Tag 2</List.Item>
+      <List.Item className="px-2 py-1 bg-gray-100 rounded">Tag 3</List.Item>
+    </List.Root>
+  ),
+};
+
+export const NavigationMenu: Story = {
+  render: () => (
+    <List.Root
+      className="flex gap-4"
+      defaultItemElement="div"
+      render="nav"
+    >
+      <List.Item className="hover:text-blue-600 cursor-pointer">Home</List.Item>
+      <List.Item className="hover:text-blue-600 cursor-pointer">About</List.Item>
+      <List.Item className="hover:text-blue-600 cursor-pointer">Contact</List.Item>
+    </List.Root>
+  ),
+};
+
+export const CustomElements: Story = {
+  render: () => (
+    <List.Root
+      className="flex gap-2"
+      defaultItemElement="span"
+      render="div"
+    >
+      <List.Item className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
+        React
+      </List.Item>
+      <List.Item className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">
+        TypeScript
+      </List.Item>
+      <List.Item className="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">
+        Tailwind
+      </List.Item>
+    </List.Root>
+  ),
+};

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,
@@ -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/{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>
+  );
+};