@regardio/react 0.4.7 → 0.5.5

package/src/grid/grid.stories.tsx

@@ -0,0 +1,236 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Grid } from './index';
+
+const meta: Meta<typeof Grid.Root> = {
+  component: Grid.Root,
+  decorators: [
+    (Story) => (
+      <div
+        style={
+          {
+            '--spacing-grid-gutter': '1rem',
+            '--spacing-grid-max': '80rem',
+          } as React.CSSProperties
+        }
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'padded',
+  },
+  title: 'Components/Grid',
+};
+
+export default meta;
+type Story = StoryObj<typeof Grid.Root>;
+
+const ItemBox = ({ children, className }: { children: React.ReactNode; className?: string }) => (
+  <div className={`bg-blue-100 border border-blue-300 rounded p-4 text-center ${className ?? ''}`}>
+    {children}
+  </div>
+);
+
+export const Default: Story = {
+  render: () => (
+    <Grid.Root>
+      <Grid.Item span={12}>
+        <ItemBox>Full width (12 cols)</ItemBox>
+      </Grid.Item>
+      <Grid.Item span={6}>
+        <ItemBox>Half (6 cols)</ItemBox>
+      </Grid.Item>
+      <Grid.Item span={6}>
+        <ItemBox>Half (6 cols)</ItemBox>
+      </Grid.Item>
+      <Grid.Item span={4}>
+        <ItemBox>Third (4 cols)</ItemBox>
+      </Grid.Item>
+      <Grid.Item span={4}>
+        <ItemBox>Third (4 cols)</ItemBox>
+      </Grid.Item>
+      <Grid.Item span={4}>
+        <ItemBox>Third (4 cols)</ItemBox>
+      </Grid.Item>
+    </Grid.Root>
+  ),
+};
+
+export const ResponsiveSpan: Story = {
+  name: 'Responsive Span (Container Queries)',
+  render: () => (
+    <Grid.Root>
+      <Grid.Item
+        span={12}
+        spanLg={3}
+        spanMd={4}
+        spanSm={6}
+      >
+        <ItemBox>12 → 6 → 4 → 3</ItemBox>
+      </Grid.Item>
+      <Grid.Item
+        span={12}
+        spanLg={3}
+        spanMd={4}
+        spanSm={6}
+      >
+        <ItemBox>12 → 6 → 4 → 3</ItemBox>
+      </Grid.Item>
+      <Grid.Item
+        span={12}
+        spanLg={3}
+        spanMd={4}
+        spanSm={6}
+      >
+        <ItemBox>12 → 6 → 4 → 3</ItemBox>
+      </Grid.Item>
+      <Grid.Item
+        span={12}
+        spanLg={3}
+        spanMd={4}
+        spanSm={6}
+      >
+        <ItemBox>12 → 6 → 4 → 3</ItemBox>
+      </Grid.Item>
+    </Grid.Root>
+  ),
+};
+
+export const ColumnPositioning: Story = {
+  name: 'Column Start/End Positioning',
+  render: () => (
+    <Grid.Root>
+      <Grid.Item
+        end={5}
+        start={1}
+      >
+        <ItemBox>Cols 1-4</ItemBox>
+      </Grid.Item>
+      <Grid.Item
+        end={13}
+        start={5}
+      >
+        <ItemBox>Cols 5-12</ItemBox>
+      </Grid.Item>
+      <Grid.Item
+        span={8}
+        start={3}
+      >
+        <ItemBox>Start at 3, span 8</ItemBox>
+      </Grid.Item>
+    </Grid.Root>
+  ),
+};
+
+export const RowSpan: Story = {
+  name: 'Row Spanning',
+  render: () => (
+    <Grid.Root>
+      <Grid.Item
+        rowSpan={2}
+        span={4}
+      >
+        <ItemBox className="h-full">Spans 2 rows</ItemBox>
+      </Grid.Item>
+      <Grid.Item span={8}>
+        <ItemBox>Row 1</ItemBox>
+      </Grid.Item>
+      <Grid.Item span={8}>
+        <ItemBox>Row 2</ItemBox>
+      </Grid.Item>
+    </Grid.Root>
+  ),
+};
+
+export const FlowVariants: Story = {
+  name: 'Grid Flow Variants',
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="mb-2 font-semibold">Dense (default)</h3>
+        <Grid.Root flow="dense">
+          <Grid.Item span={8}>
+            <ItemBox>8 cols</ItemBox>
+          </Grid.Item>
+          <Grid.Item span={6}>
+            <ItemBox>6 cols</ItemBox>
+          </Grid.Item>
+          <Grid.Item span={4}>
+            <ItemBox>4 cols (fills gap)</ItemBox>
+          </Grid.Item>
+        </Grid.Root>
+      </div>
+      <div>
+        <h3 className="mb-2 font-semibold">Row</h3>
+        <Grid.Root flow="row">
+          <Grid.Item span={8}>
+            <ItemBox>8 cols</ItemBox>
+          </Grid.Item>
+          <Grid.Item span={6}>
+            <ItemBox>6 cols</ItemBox>
+          </Grid.Item>
+          <Grid.Item span={4}>
+            <ItemBox>4 cols (new row)</ItemBox>
+          </Grid.Item>
+        </Grid.Root>
+      </div>
+    </div>
+  ),
+};
+
+export const AlignVariants: Story = {
+  name: 'Content Alignment',
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="mb-2 font-semibold">Start</h3>
+        <Grid.Root
+          align="start"
+          className="min-h-[200px] bg-gray-50"
+        >
+          <Grid.Item span={4}>
+            <ItemBox>Item</ItemBox>
+          </Grid.Item>
+          <Grid.Item span={4}>
+            <ItemBox>Item</ItemBox>
+          </Grid.Item>
+        </Grid.Root>
+      </div>
+      <div>
+        <h3 className="mb-2 font-semibold">Center</h3>
+        <Grid.Root
+          align="center"
+          className="min-h-[200px] bg-gray-50"
+        >
+          <Grid.Item span={4}>
+            <ItemBox>Item</ItemBox>
+          </Grid.Item>
+          <Grid.Item span={4}>
+            <ItemBox>Item</ItemBox>
+          </Grid.Item>
+        </Grid.Root>
+      </div>
+    </div>
+  ),
+};
+
+export const StyleOverrides: Story = {
+  name: 'Style Overrides (tailwind-variants)',
+  render: () => (
+    <Grid.Root className="bg-linear-to-r from-purple-50 to-pink-50 p-4 rounded-lg">
+      <Grid.Item
+        className="bg-purple-200 rounded-lg p-6"
+        span={6}
+      >
+        Custom styled item
+      </Grid.Item>
+      <Grid.Item
+        className="bg-pink-200 rounded-lg p-6"
+        span={6}
+      >
+        Custom styled item
+      </Grid.Item>
+    </Grid.Root>
+  ),
+};

package/src/grid/index.parts.ts

@@ -0,0 +1,2 @@
+export { GridItem as Item } from './grid-item';
+export { GridRoot as Root } from './grid-root';

package/src/grid/index.ts

@@ -0,0 +1,5 @@
+export type { GridItemProps, GridItemVariants } from './grid-item';
+export { gridItem } from './grid-item';
+export type { GridRootProps } from './grid-root';
+export { useGrid } from './grid-root';
+export * as Grid from './index.parts';

package/src/{stories/Heading.stories.tsx → heading/heading.stories.tsx}

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

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

@@ -1,43 +1,36 @@
+import { cn, tv } from '@regardio/tailwind/utils';
 import type { ElementType, HTMLAttributes } from 'react';
-import { cn, cva, type VariantProps } from '../utils/cn';
 import { lowerCaseSzett, shy } from '../utils/text';
 
-const heading = cva({
+const levelVariants = {
+  1: ['text-2xl'],
+  2: ['text-xl'],
+  3: ['text-lg'],
+  4: ['text-md'],
+  5: ['text-sm'],
+  6: ['text-xs'],
+} as const;
+
+const heading = tv({
   base: [],
   defaultVariants: {
     level: 3,
   },
   variants: {
-    level: {
-      1: ['text-2xl'],
-      2: ['text-xl'],
-      3: ['text-lg'],
-      4: ['text-md'],
-      5: ['text-sm'],
-      6: ['text-xs'],
-    },
-    variant: {},
+    level: levelVariants,
   },
 });
 
-export interface HeadingProps
-  extends HTMLAttributes<HTMLHeadingElement>,
-    VariantProps<typeof heading> {
+export type HeadingLevel = keyof typeof levelVariants;
+
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
   as?: ElementType;
   className?: string;
+  level?: HeadingLevel;
   locale?: string;
 }
 
-export type HeadingLevel = HeadingProps['level'];
-
-export const Heading = ({
-  as,
-  children,
-  className,
-  level = 2,
-  variant,
-  ...props
-}: HeadingProps) => {
+export const Heading = ({ as, children, className, level = 2, ...props }: HeadingProps) => {
   const word = lowerCaseSzett(shy(children));
   const Component: ElementType = as || `h${level}`;
 
@@ -46,7 +39,6 @@ export const Heading = ({
       className={cn(
         heading({
           level,
-          variant,
         }),
         className,
       )}

package/src/heading/index.ts

@@ -0,0 +1,2 @@
+export type { HeadingLevel, HeadingProps } from './heading';
+export { Heading } from './heading';

package/src/{stories/Highlight.stories.tsx → highlight/highlight.stories.tsx}

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

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

@@ -1,25 +1,29 @@
+import { tv } from '@regardio/tailwind/utils';
 import type { ComponentProps } from 'react';
-import { cva, type VariantProps } from '../utils/cn';
 
-const li = cva({
+const highlightVariants = {
+  primary: ['highlight'],
+} as const;
+
+const highlight = tv({
   defaultVariants: {
     variant: 'primary',
   },
   variants: {
-    variant: {
-      primary: ['highlight'],
-    },
+    variant: highlightVariants,
   },
 });
 
-export interface HighlightProps extends ComponentProps<'mark'>, VariantProps<typeof li> {}
+export type HighlightVariant = keyof typeof highlightVariants;
 
-export const Highlight = (props: HighlightProps) => {
-  const { children, className, variant } = props;
+export interface HighlightProps extends ComponentProps<'mark'> {
+  variant?: HighlightVariant;
+}
 
+export const Highlight = ({ children, className, variant }: HighlightProps) => {
   return (
     <mark
-      className={li({
+      className={highlight({
         className,
         variant,
       })}

package/src/highlight/index.ts

@@ -0,0 +1,2 @@
+export type { HighlightProps } from './highlight';
+export { Highlight } from './highlight';

package/src/hooks/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/{stories/IconButton.stories.tsx → icon-button/icon-button.stories.tsx}

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

package/src/icon-button/index.ts

@@ -0,0 +1,2 @@
+export type { IconButtonProps } from './icon-button';
+export { IconButton } from './icon-button';

package/src/{stories/If.stories.tsx → if/if.stories.tsx}

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

package/src/if/index.ts

@@ -0,0 +1 @@
+export { If } from './if';

package/src/{stories/Iframe.stories.tsx → iframe/iframe.stories.tsx}

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

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

@@ -1,5 +1,5 @@
+import { cn } from '@regardio/tailwind/utils';
 import type React from 'react';
-import { cn } from '../utils/cn';
 
 export type IframeProps = {
   src: string;

package/src/iframe/index.ts

@@ -0,0 +1,2 @@
+export type { IframeProps } from './iframe';
+export { Iframe } from './iframe';

package/src/link/index.ts

@@ -0,0 +1,2 @@
+export type { LinkBaseProps, LinkProps, MarkdownLinkProps, PathResolver } from './link';
+export { Link, LinkBase, MarkdownLink, PathResolverProvider, usePathResolver } from './link';

package/src/{stories/Link.stories.tsx → link/link.stories.tsx}

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { MemoryRouter } from 'react-router';
-import { Link } from '../components/link';
+import { Link } from './link';
 
 const meta: Meta<typeof Link> = {
   component: Link,
@@ -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/{components → link}/link.tsx

@@ -1,7 +1,9 @@
+'use client';
+
+import { tv } from '@regardio/tailwind/utils';
 import { createContext, useCallback, useContext } from 'react';
 import type { NavLinkProps, NavLinkRenderProps } from 'react-router';
 import { NavLink } from 'react-router';
-import { cva, type VariantProps } from '../utils/cn';
 import { lowerCaseSzett } from '../utils/text';
 
 /**
@@ -120,42 +122,51 @@ export const LinkBase = ({
   );
 };
 
-const link = cva({
+const arrowVariants = {
+  darr: 'darr',
+  larr: 'larr',
+  rarr: 'rarr',
+  uarr: 'uarr',
+} as const;
+
+const linkVariants = {
+  button: [
+    'block',
+    'button',
+    'mt-s',
+    'relative',
+    'rarr',
+    'text-right',
+    'text-sm',
+    'tracking-wider',
+    'uppercase',
+  ],
+  code: ['font-monospace'],
+  link: ['rarr', '!bg-transparent', 'uppercase', '!tracking-wider'],
+  navtitle: ['block', 'uppercase', 'tracking-wider'],
+  primary: [],
+  subtitle: ['text-lg'],
+} as const;
+
+const link = tv({
   base: [],
   defaultVariants: {
     variant: 'primary',
   },
   variants: {
-    arrow: {
-      darr: 'darr',
-      larr: 'larr',
-      rarr: 'rarr',
-      uarr: 'uarr',
-    },
-    variant: {
-      button: [
-        'block',
-        'button',
-        'mt-s',
-        'relative',
-        'rarr',
-        'text-right',
-        'text-sm',
-        'tracking-wider',
-        'uppercase',
-      ],
-      code: ['font-monospace'],
-      link: ['rarr', '!bg-transparent', 'uppercase', '!tracking-wider'],
-      navtitle: ['block', 'uppercase', 'tracking-wider'],
-      primary: [],
-      subtitle: ['text-lg'],
-    },
+    arrow: arrowVariants,
+    variant: linkVariants,
   },
 });
 
-export interface LinkProps extends Omit<NavLinkProps, 'to'>, VariantProps<typeof link> {
+export type LinkArrow = keyof typeof arrowVariants;
+export type LinkVariant = keyof typeof linkVariants;
+
+export interface LinkProps extends Omit<NavLinkProps, 'to'> {
+  arrow?: LinkArrow;
   to?: string | Partial<{ pathname?: string; search?: string; hash?: string }>;
   routeKey?: string;
+  variant?: LinkVariant;
   viewTransition?: boolean;
 }
 
@@ -174,7 +185,7 @@ export const Link = ({
       {...props}
       className={link({
         arrow,
-        className,
+        className: typeof className === 'string' ? className : undefined,
         variant,
       })}
       routeKey={routeKey}

package/src/list/index.parts.ts

@@ -0,0 +1,2 @@
+export { ListItem as Item } from './list-item';
+export { ListRoot as Root } from './list-root';

package/src/list/index.ts

@@ -0,0 +1,4 @@
+export * as List from './index.parts';
+export type { ListItemProps } from './list-item';
+export type { ListRootProps } from './list-root';
+export type { ListRootContextValue } from './list-root-context';

package/src/list/list-item.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type ForwardedRef,
+  forwardRef,
+  type ReactNode,
+} from 'react';
+import { useListRootContext } from './list-root-context';
+
+type ListItemElement = 'li' | 'dd' | 'dt' | 'div' | 'span';
+
+export type ListItemProps<T extends ListItemElement = 'li'> = Omit<
+  ComponentPropsWithoutRef<T>,
+  'children'
+> & {
+  /**
+   * The element type to render.
+   * Falls back to the defaultItemElement from ListRoot context, or 'li'.
+   */
+  render?: T;
+  /**
+   * The content of the list item.
+   */
+  children?: ReactNode;
+};
+
+function ListItemImpl<T extends ListItemElement = 'li'>(
+  props: ListItemProps<T>,
+  ref: ForwardedRef<HTMLElement>,
+) {
+  const context = useListRootContext();
+
+  const { render, children, className, ...elementProps } = props;
+
+  const resolvedElement = render ?? context?.defaultItemElement ?? 'li';
+  const resolvedClassName = context?.defaultItemClassName
+    ? className
+      ? `${context.defaultItemClassName} ${className}`
+      : context.defaultItemClassName
+    : className;
+
+  const Component = resolvedElement as ElementType;
+
+  return (
+    <Component
+      className={resolvedClassName}
+      ref={ref}
+      {...elementProps}
+    >
+      {children}
+    </Component>
+  );
+}
+
+export const ListItem = forwardRef(ListItemImpl) as <T extends ListItemElement = 'li'>(
+  props: ListItemProps<T> & { ref?: ForwardedRef<HTMLElement> },
+) => ReturnType<typeof ListItemImpl>;
+
+export namespace ListItem {
+  export type Props<T extends ListItemElement = 'li'> = ListItemProps<T>;
+}