@rdna/radiants 0.1.1 → 0.1.3

package/components/core/Popover/Popover.test.tsx

@@ -0,0 +1,122 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Popover, PopoverTrigger, PopoverContent } from './Popover';
+
+function TestPopover({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  return (
+    <Popover defaultOpen={defaultOpen}>
+      <PopoverTrigger asChild>
+        <button>Open Popover</button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <p>Popover content</p>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+describe('Popover', () => {
+  test('opens when trigger is clicked', async () => {
+    const user = userEvent.setup();
+    render(<TestPopover />);
+
+    expect(screen.queryByText('Popover content')).not.toBeInTheDocument();
+    await user.click(screen.getByText('Open Popover'));
+    expect(screen.getByText('Popover content')).toBeInTheDocument();
+  });
+
+  test('trigger works without asChild', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Popover>
+        <PopoverTrigger>
+          <span>Open Popover Text</span>
+        </PopoverTrigger>
+        <PopoverContent>
+          <p>Popover text content</p>
+        </PopoverContent>
+      </Popover>,
+    );
+
+    expect(screen.queryByText('Popover text content')).not.toBeInTheDocument();
+    await user.click(screen.getByText('Open Popover Text'));
+    expect(screen.getByText('Popover text content')).toBeInTheDocument();
+  });
+
+  test('closes on Escape key', async () => {
+    const user = userEvent.setup();
+    render(<TestPopover defaultOpen />);
+
+    expect(screen.getByText('Popover content')).toBeInTheDocument();
+    await user.keyboard('{Escape}');
+    expect(screen.queryByText('Popover content')).not.toBeInTheDocument();
+  });
+
+  test('closes on outside click', async () => {
+    const user = userEvent.setup();
+    render(
+      <div>
+        <TestPopover defaultOpen />
+        <button>Outside</button>
+      </div>
+    );
+
+    expect(screen.getByText('Popover content')).toBeInTheDocument();
+    await user.click(screen.getByText('Outside'));
+    expect(screen.queryByText('Popover content')).not.toBeInTheDocument();
+  });
+
+  test('preserves data-variant attribute', async () => {
+    const user = userEvent.setup();
+    render(<TestPopover />);
+
+    await user.click(screen.getByText('Open Popover'));
+    const content = screen.getByText('Popover content').closest('[data-variant="popover"]');
+    expect(content).toBeInTheDocument();
+  });
+
+  test('forwards eventDetails.reason from onOpenChange', async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <Popover defaultOpen onOpenChange={onOpenChange}>
+        <PopoverTrigger asChild><button>T</button></PopoverTrigger>
+        <PopoverContent><p>content</p></PopoverContent>
+      </Popover>
+    );
+    await user.keyboard('{Escape}');
+    expect(onOpenChange).toHaveBeenCalledWith(false, expect.objectContaining({ reason: expect.any(String) }));
+  });
+
+  test('actionsRef exposes close()', () => {
+    const actionsRef = { current: null as { close: () => void; unmount: () => void } | null };
+    render(
+      <Popover defaultOpen actionsRef={actionsRef}>
+        <PopoverTrigger asChild><button>T</button></PopoverTrigger>
+        <PopoverContent><p>content</p></PopoverContent>
+      </Popover>
+    );
+    expect(actionsRef.current?.close).toBeTypeOf('function');
+  });
+
+  test('supports controlled open state', async () => {
+    const onOpenChange = vi.fn();
+
+    function Controlled() {
+      return (
+        <Popover open={true} onOpenChange={onOpenChange}>
+          <PopoverTrigger asChild>
+            <button>Trigger</button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <p>Controlled content</p>
+          </PopoverContent>
+        </Popover>
+      );
+    }
+
+    render(<Controlled />);
+    expect(screen.getByText('Controlled content')).toBeInTheDocument();
+  });
+});

package/components/core/Popover/Popover.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import React from 'react';
+import { Popover as BasePopover } from '@base-ui/react/popover';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+
+interface PopoverProps {
+  /** Controlled open state */
+  open?: boolean;
+  /** Default open state */
+  defaultOpen?: boolean;
+  /** Callback when open state changes — receives Base UI eventDetails as second arg */
+  onOpenChange?: (open: boolean, eventDetails?: unknown) => void;
+  /** Callback fired after open/close animations complete */
+  onOpenChangeComplete?: (open: boolean) => void;
+  /** Ref for imperative actions (close, unmount) */
+  actionsRef?: React.RefObject<{ close: () => void; unmount: () => void } | null>;
+  /** Position relative to trigger */
+  position?: PopoverPosition;
+  /** Children */
+  children: React.ReactNode;
+}
+
+// ============================================================================
+// Internal context for position passthrough
+// ============================================================================
+
+const PopoverPositionContext = React.createContext<PopoverPosition>('bottom');
+
+// ============================================================================
+// Popover Root
+// ============================================================================
+
+export function Popover({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  onOpenChangeComplete,
+  actionsRef,
+  position = 'bottom',
+  children,
+}: PopoverProps) {
+  return (
+    <PopoverPositionContext value={position}>
+      <BasePopover.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={(openState, eventDetails) => onOpenChange?.(openState, eventDetails)}
+        onOpenChangeComplete={onOpenChangeComplete}
+        actionsRef={actionsRef}
+      >
+        {children}
+      </BasePopover.Root>
+    </PopoverPositionContext>
+  );
+}
+
+// ============================================================================
+// Popover Trigger
+// ============================================================================
+
+interface PopoverTriggerProps {
+  /** Trigger element */
+  children: React.ReactElement;
+  /** Pass through as child instead of wrapping */
+  asChild?: boolean;
+}
+
+export function PopoverTrigger({ children, asChild = false }: PopoverTriggerProps) {
+  if (asChild) {
+    return (
+      <BasePopover.Trigger
+        className="cursor-pointer focus-visible:outline-none"
+        render={children}
+      />
+    );
+  }
+
+  return (
+    <BasePopover.Trigger
+      className="cursor-pointer focus-visible:outline-none"
+    >
+      {children}
+    </BasePopover.Trigger>
+  );
+}
+
+// ============================================================================
+// Popover Content
+// ============================================================================
+
+interface PopoverContentProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+  /** Alignment relative to trigger */
+  align?: 'start' | 'center' | 'end';
+}
+
+export function PopoverContent({ className = '', children, align = 'center' }: PopoverContentProps) {
+  const position = React.use(PopoverPositionContext);
+
+  return (
+    <BasePopover.Portal>
+      <BasePopover.Positioner
+        side={position}
+        align={align}
+        sideOffset={8}
+      >
+        <BasePopover.Popup
+          data-rdna="popover"
+          className={`
+            z-50
+            pixel-shadow-raised
+            transition-[opacity,transform,filter] duration-150 ease-out
+            data-[starting-style]:opacity-0 data-[starting-style]:translate-y-1
+            data-[ending-style]:opacity-0 data-[ending-style]:blur-sm
+          `.trim()}
+          data-variant="popover"
+        >
+          <div className={`
+            bg-page
+            pixel-rounded-sm
+            p-4
+            ${className}
+          `.trim()}>
+            {children}
+          </div>
+        </BasePopover.Popup>
+      </BasePopover.Positioner>
+    </BasePopover.Portal>
+  );
+}
+
+export default Popover;

package/components/core/PreviewCard/PreviewCard.meta.ts

@@ -0,0 +1,38 @@
+import { defineComponentMeta } from "@rdna/preview/define-component-meta";
+
+interface PreviewCardProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: string;
+}
+
+export const PreviewCardMeta = defineComponentMeta<PreviewCardProps>()({
+  name: "PreviewCard",
+  description:
+    "Hover-triggered floating card for rich content previews. Appears on hover with a configurable delay.",
+  subcomponents: ["PreviewCardTrigger", "PreviewCardContent"],
+  props: {
+    open: {
+      type: "boolean",
+    },
+    defaultOpen: {
+      type: "boolean",
+    },
+    onOpenChange: {
+      type: "string",
+      description: "Callback fired when card opens or closes",
+    },
+  },
+  slots: {},
+  examples: [
+    {
+      name: "Basic preview card",
+      code: "<PreviewCard.Root>\n  <PreviewCardTrigger>Hover me</PreviewCardTrigger>\n  <PreviewCardContent>\n    <h3>Preview title</h3>\n    <p>Preview description</p>\n  </PreviewCardContent>\n</PreviewCard.Root>",
+    },
+  ],
+  registry: {
+    category: "overlay",
+    tags: ["preview", "hover", "card", "popup"],
+    renderMode: "custom",
+  },
+});

package/components/core/PreviewCard/PreviewCard.schema.json

@@ -0,0 +1,27 @@
+{
+  "name": "PreviewCard",
+  "description": "Hover-triggered floating card for rich content previews. Appears on hover with a configurable delay.",
+  "subcomponents": [
+    "PreviewCardTrigger",
+    "PreviewCardContent"
+  ],
+  "props": {
+    "open": {
+      "type": "boolean"
+    },
+    "defaultOpen": {
+      "type": "boolean"
+    },
+    "onOpenChange": {
+      "type": "string",
+      "description": "Callback fired when card opens or closes"
+    }
+  },
+  "slots": {},
+  "examples": [
+    {
+      "name": "Basic preview card",
+      "code": "<PreviewCard.Root>\n  <PreviewCardTrigger>Hover me</PreviewCardTrigger>\n  <PreviewCardContent>\n    <h3>Preview title</h3>\n    <p>Preview description</p>\n  </PreviewCardContent>\n</PreviewCard.Root>"
+    }
+  ]
+}

package/components/core/PreviewCard/PreviewCard.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { PreviewCard, PreviewCardTrigger, PreviewCardContent } from './PreviewCard';
+
+describe('PreviewCard', () => {
+  test('renders trigger element', () => {
+    render(
+      <PreviewCard>
+        <PreviewCardTrigger asChild>
+          <a href="#">Hover me</a>
+        </PreviewCardTrigger>
+        <PreviewCardContent>Preview content</PreviewCardContent>
+      </PreviewCard>
+    );
+    expect(screen.getByText('Hover me')).toBeInTheDocument();
+  });
+
+  test('forwards eventDetails signature in onOpenChange', () => {
+    const onOpenChange = vi.fn<[boolean, unknown?]>();
+    render(
+      <PreviewCard onOpenChange={onOpenChange}>
+        <PreviewCardTrigger asChild><a href="#">T</a></PreviewCardTrigger>
+        <PreviewCardContent>content</PreviewCardContent>
+      </PreviewCard>
+    );
+    expect(onOpenChange).toBeDefined();
+    // Verify the type signature is correct (checked at build time)
+    expect(PreviewCard).toBeDefined();
+  });
+});

package/components/core/PreviewCard/PreviewCard.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import React from 'react';
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface PreviewCardProps {
+  /** Controlled open state */
+  open?: boolean;
+  /** Default open state */
+  defaultOpen?: boolean;
+  /** Callback when open state changes — receives Base UI eventDetails as second arg */
+  onOpenChange?: (open: boolean, eventDetails?: unknown) => void;
+  /** Callback fired after open/close animations complete */
+  onOpenChangeComplete?: (open: boolean) => void;
+  /** Children */
+  children: React.ReactNode;
+}
+
+// ============================================================================
+// PreviewCard Root
+// ============================================================================
+
+/**
+ * Hover preview card that shows a popup on hover
+ */
+export function PreviewCard({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  onOpenChangeComplete,
+  children,
+}: PreviewCardProps) {
+  return (
+    <BasePreviewCard.Root
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={(openState, eventDetails) => onOpenChange?.(openState, eventDetails)}
+      onOpenChangeComplete={onOpenChangeComplete}
+    >
+      {children}
+    </BasePreviewCard.Root>
+  );
+}
+
+// ============================================================================
+// PreviewCard Trigger
+// ============================================================================
+
+interface PreviewCardTriggerProps {
+  /** Trigger element */
+  children: React.ReactElement;
+  /** Additional classes */
+  className?: string;
+}
+
+export function PreviewCardTrigger({ children, className = '' }: PreviewCardTriggerProps) {
+  return (
+    <BasePreviewCard.Trigger
+      className={`cursor-pointer focus-visible:outline-none ${className}`.trim()}
+      render={children}
+    />
+  );
+}
+
+// ============================================================================
+// PreviewCard Content
+// ============================================================================
+
+interface PreviewCardContentProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+  /** Alignment relative to trigger */
+  align?: 'start' | 'center' | 'end';
+  /** Side relative to trigger */
+  side?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export function PreviewCardContent({
+  className = '',
+  children,
+  align = 'center',
+  side = 'bottom',
+}: PreviewCardContentProps) {
+  return (
+    <BasePreviewCard.Portal>
+      <BasePreviewCard.Positioner
+        side={side}
+        align={align}
+        sideOffset={8}
+      >
+        <div className="pixel-shadow-raised">
+          <BasePreviewCard.Popup
+            data-rdna="previewcard"
+            className={`
+              z-50
+              bg-card
+              pixel-rounded-xs
+              p-4
+              transition-[opacity,transform,filter] duration-150 ease-out
+              data-[starting-style]:opacity-0 data-[starting-style]:translate-y-1
+              data-[ending-style]:opacity-0 data-[ending-style]:blur-sm
+              ${className}
+            `.trim()}
+            data-variant="preview-card"
+          >
+            {children}
+          </BasePreviewCard.Popup>
+        </div>
+      </BasePreviewCard.Positioner>
+    </BasePreviewCard.Portal>
+  );
+}
+
+export default PreviewCard;

package/components/core/ScrollArea/ScrollArea.meta.ts

@@ -0,0 +1,46 @@
+import { defineComponentMeta } from "@rdna/preview/define-component-meta";
+
+interface ScrollAreaProps {
+  orientation?: string;
+  type?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const ScrollAreaMeta = defineComponentMeta<ScrollAreaProps>()({
+  name: "ScrollArea",
+  description:
+    "Custom scrollable container with styled scrollbars. Provides consistent scroll UI across browsers.",
+  subcomponents: ["ScrollAreaViewport"],
+  props: {
+    orientation: {
+      type: "string",
+      description: "Scroll direction: horizontal, vertical, or both",
+    },
+    type: {
+      type: "string",
+      description:
+        "Scrollbar visibility behavior: auto, always, scroll, hover",
+    },
+    className: {
+      type: "string",
+      description: "Additional CSS classes",
+    },
+  },
+  slots: {
+    children: {
+      description: "Scrollable content",
+    },
+  },
+  examples: [
+    {
+      name: "Vertical scroll area",
+      code: '<ScrollArea className="h-48">\n  <div className="p-4">\n    {Array.from({length: 20}, (_, i) => <p key={i}>Item {i + 1}</p>)}\n  </div>\n</ScrollArea>',
+    },
+  ],
+  registry: {
+    category: "layout",
+    tags: ["scroll", "overflow", "container"],
+    renderMode: "custom",
+  },
+});

package/components/core/ScrollArea/ScrollArea.schema.json

@@ -0,0 +1,32 @@
+{
+  "name": "ScrollArea",
+  "description": "Custom scrollable container with styled scrollbars. Provides consistent scroll UI across browsers.",
+  "subcomponents": [
+    "ScrollAreaViewport"
+  ],
+  "props": {
+    "orientation": {
+      "type": "string",
+      "description": "Scroll direction: horizontal, vertical, or both"
+    },
+    "type": {
+      "type": "string",
+      "description": "Scrollbar visibility behavior: auto, always, scroll, hover"
+    },
+    "className": {
+      "type": "string",
+      "description": "Additional CSS classes"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "Scrollable content"
+    }
+  },
+  "examples": [
+    {
+      "name": "Vertical scroll area",
+      "code": "<ScrollArea className=\"h-48\">\n  <div className=\"p-4\">\n    {Array.from({length: 20}, (_, i) => <p key={i}>Item {i + 1}</p>)}\n  </div>\n</ScrollArea>"
+    }
+  ]
+}

package/components/core/ScrollArea/ScrollArea.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import { ScrollArea } from './ScrollArea';
+import type { ComponentProps } from 'react';
+
+describe('ScrollArea', () => {
+  test('renders scrollable content', () => {
+    render(
+      <ScrollArea.Root className="h-32">
+        <p>Scrollable content</p>
+      </ScrollArea.Root>
+    );
+    expect(screen.getByText('Scrollable content')).toBeInTheDocument();
+  });
+
+  test('type prop is removed from the public API', () => {
+    // type is a dead prop — Base UI ScrollArea has no type concept.
+    // Verify it no longer exists on ScrollAreaRootProps.
+    type Props = ComponentProps<typeof ScrollArea.Root>;
+    type HasType = 'type' extends keyof Props ? true : false;
+    const result: HasType = false as HasType; // should compile only if type is absent
+    expect(result).toBe(false);
+  });
+});