@kitn.ai/ui 0.15.0 → 0.16.0

package/src/ui/popover.test.tsx

@@ -1,99 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import '@testing-library/jest-dom/vitest';
-import { render, cleanup, fireEvent } from '@solidjs/testing-library';
-import { Popover } from './popover';
-
-afterEach(cleanup);
-
-// createPresence unmounts on a microtask when there is no exit animation (jsdom),
-// so flush the queue before asserting a closed popover has left the DOM.
-const tick = () => new Promise((r) => setTimeout(r, 0));
-
-describe('Popover', () => {
-  it('renders the trigger and hides the content until opened', () => {
-    const { getByText, queryByText } = render(() => (
-      <Popover trigger={<button>Open menu</button>}>
-        <div>Panel body</div>
-      </Popover>
-    ));
-    expect(getByText('Open menu')).toBeInTheDocument();
-    expect(queryByText('Panel body')).not.toBeInTheDocument();
-  });
-
-  it('opens on trigger click and calls onOpenChange(true)', () => {
-    const onOpenChange = vi.fn();
-    const { getByText, queryByText } = render(() => (
-      <Popover trigger={<button>Open menu</button>} onOpenChange={onOpenChange}>
-        <div>Panel body</div>
-      </Popover>
-    ));
-    fireEvent.click(getByText('Open menu'));
-    expect(queryByText('Panel body')).toBeInTheDocument();
-    expect(onOpenChange).toHaveBeenCalledWith(true);
-  });
-
-  it('toggles closed on a second trigger click and calls onOpenChange(false)', async () => {
-    const onOpenChange = vi.fn();
-    const { getByText, queryByText } = render(() => (
-      <Popover trigger={<button>Open menu</button>} onOpenChange={onOpenChange}>
-        <div>Panel body</div>
-      </Popover>
-    ));
-    const trigger = getByText('Open menu');
-    fireEvent.click(trigger);
-    expect(queryByText('Panel body')).toBeInTheDocument();
-    fireEvent.click(trigger);
-    await tick();
-    expect(queryByText('Panel body')).not.toBeInTheDocument();
-    expect(onOpenChange).toHaveBeenLastCalledWith(false);
-  });
-
-  it('closes on Escape', async () => {
-    const { getByText, queryByText } = render(() => (
-      <Popover trigger={<button>Open menu</button>}>
-        <div>Panel body</div>
-      </Popover>
-    ));
-    fireEvent.click(getByText('Open menu'));
-    expect(queryByText('Panel body')).toBeInTheDocument();
-    fireEvent.keyDown(document, { key: 'Escape' });
-    await tick();
-    expect(queryByText('Panel body')).not.toBeInTheDocument();
-  });
-
-  it('stays open when clicking inside the panel, closes on an outside pointerdown', async () => {
-    const { getByText, queryByText } = render(() => (
-      <Popover trigger={<button>Open menu</button>}>
-        <div>Panel body</div>
-      </Popover>
-    ));
-    fireEvent.click(getByText('Open menu'));
-    fireEvent.pointerDown(getByText('Panel body'));
-    expect(queryByText('Panel body')).toBeInTheDocument();
-    fireEvent.pointerDown(document.body);
-    await tick();
-    expect(queryByText('Panel body')).not.toBeInTheDocument();
-  });
-
-  it('respects the controlled open prop', () => {
-    const { queryByText } = render(() => (
-      <Popover open trigger={<button>Open menu</button>}>
-        <div>Panel body</div>
-      </Popover>
-    ));
-    expect(queryByText('Panel body')).toBeInTheDocument();
-  });
-
-  it('does not change its own state when controlled — defers to onOpenChange', () => {
-    const onOpenChange = vi.fn();
-    const { getByText, queryByText } = render(() => (
-      <Popover open={false} trigger={<button>Open menu</button>} onOpenChange={onOpenChange}>
-        <div>Panel body</div>
-      </Popover>
-    ));
-    fireEvent.click(getByText('Open menu'));
-    // controlled: stays closed until the parent flips `open`
-    expect(queryByText('Panel body')).not.toBeInTheDocument();
-    expect(onOpenChange).toHaveBeenCalledWith(true);
-  });
-});

package/src/ui/resizable.stories.tsx

@@ -1,236 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { fn } from 'storybook/test';
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle, Resizable } from './resizable';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Primitives/Resizable',
-  component: ResizablePanelGroup,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      controls: { exclude: ['use:eventListener'] },
-      description: componentDescription([
-        'A **resizable split layout**: `ResizablePanelGroup` lays out `ResizablePanel` children along an axis, divided by a draggable `ResizableHandle`.',
-        '**When to use:** to let users adjust the relative size of two or more regions — e.g. a collapsible sidebar next to the main chat, or a chat pane next to an inspector.',
-        '**How to use:** wrap panels in `ResizablePanelGroup` and set `orientation` (`horizontal` row / `vertical` column). Give panels a `defaultSize` (percent) and optional `minSize`/`maxSize`; min/max are read from `data-min-size`/`data-max-size` attributes at drag time. Place a `ResizableHandle` (add `withHandle` for a visible grip) between panels. The group needs a sized container (height/width).',
-        '**Placement:** app shells — sidebar + conversation, conversation + context/inspector panels, or stacked editor/preview regions.',
-      ]),
-    },
-  },
-  argTypes: {
-    orientation: {
-      control: 'select',
-      options: ['horizontal', 'vertical'],
-      description: 'Axis the panels are laid out along.',
-      table: { defaultValue: { summary: 'horizontal' } },
-    },
-  },
-  args: {
-    orientation: 'horizontal',
-  },
-  render: (args) => (
-    <div class="h-48 w-full max-w-2xl rounded-lg border border-border overflow-hidden">
-      <ResizablePanelGroup {...args}>
-        <ResizablePanel defaultSize={30} data-min-size="100" data-max-size="400">
-          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
-            <span class="text-sm text-muted-foreground">Sidebar</span>
-          </div>
-        </ResizablePanel>
-        <ResizableHandle withHandle />
-        <ResizablePanel>
-          <div class="flex h-full items-center justify-center p-4">
-            <span class="text-sm text-muted-foreground">Content</span>
-          </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </div>
-  ),
-} satisfies Meta<typeof ResizablePanelGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — flip the orientation, then drag the handle. */
-export const Playground: Story = {
-  ...src(`<ResizablePanelGroup orientation="horizontal">
-  <ResizablePanel defaultSize={30} data-min-size="100" data-max-size="400">
-    Sidebar
-  </ResizablePanel>
-  <ResizableHandle withHandle />
-  <ResizablePanel>Content</ResizablePanel>
-</ResizablePanelGroup>`),
-};
-
-export const Horizontal: Story = {
-  args: { orientation: 'horizontal' },
-  ...src(`<ResizablePanelGroup orientation="horizontal">
-  <ResizablePanel defaultSize={30} data-min-size="100" data-max-size="400">
-    Sidebar
-  </ResizablePanel>
-  <ResizableHandle withHandle />
-  <ResizablePanel>Content</ResizablePanel>
-</ResizablePanelGroup>`),
-};
-
-/** Stacked top/bottom split (showcase). */
-export const Vertical: Story = {
-  render: () => (
-    <div class="h-96 w-full max-w-md rounded-lg border border-border overflow-hidden">
-      <ResizablePanelGroup orientation="vertical">
-        <ResizablePanel defaultSize={40} data-min-size="60" data-max-size="300">
-          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
-            <span class="text-sm text-muted-foreground">Top</span>
-          </div>
-        </ResizablePanel>
-        <ResizableHandle withHandle />
-        <ResizablePanel>
-          <div class="flex h-full items-center justify-center p-4">
-            <span class="text-sm text-muted-foreground">Bottom</span>
-          </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </div>
-  ),
-  ...src(`<ResizablePanelGroup orientation="vertical">
-  <ResizablePanel defaultSize={40} data-min-size="60" data-max-size="300">
-    Top
-  </ResizablePanel>
-  <ResizableHandle withHandle />
-  <ResizablePanel>Bottom</ResizablePanel>
-</ResizablePanelGroup>`),
-};
-
-/** Three panels with two handles (showcase). */
-export const ThreePanels: Story = {
-  name: 'Three Panels',
-  render: () => (
-    <div class="h-48 w-full max-w-2xl rounded-lg border border-border overflow-hidden">
-      <ResizablePanelGroup orientation="horizontal">
-        <ResizablePanel defaultSize={25} data-min-size="80" data-max-size="300">
-          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
-            <span class="text-sm text-muted-foreground">Left</span>
-          </div>
-        </ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel>
-          <div class="flex h-full items-center justify-center p-4">
-            <span class="text-sm text-muted-foreground">Center</span>
-          </div>
-        </ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel defaultSize={25} data-min-size="80" data-max-size="300">
-          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
-            <span class="text-sm text-muted-foreground">Right</span>
-          </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </div>
-  ),
-  ...src(`<ResizablePanelGroup orientation="horizontal">
-  <ResizablePanel defaultSize={25} data-min-size="80" data-max-size="300">Left</ResizablePanel>
-  <ResizableHandle />
-  <ResizablePanel>Center</ResizablePanel>
-  <ResizableHandle />
-  <ResizablePanel defaultSize={25} data-min-size="80" data-max-size="300">Right</ResizablePanel>
-</ResizablePanelGroup>`),
-};
-
-/** Handle without a visible grip; reports drag deltas via `onPanelResize` (showcase). */
-export const NoHandle: Story = {
-  name: 'Without Handle',
-  render: () => (
-    <div class="h-48 w-full max-w-2xl rounded-lg border border-border overflow-hidden">
-      <ResizablePanelGroup orientation="horizontal">
-        <ResizablePanel defaultSize={40}>
-          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
-            <span class="text-sm text-muted-foreground">Panel A</span>
-          </div>
-        </ResizablePanel>
-        <ResizableHandle onPanelResize={fn()} />
-        <ResizablePanel>
-          <div class="flex h-full items-center justify-center p-4">
-            <span class="text-sm text-muted-foreground">Panel B</span>
-          </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </div>
-  ),
-  ...src(`<ResizablePanelGroup orientation="horizontal">
-  <ResizablePanel defaultSize={40}>Panel A</ResizablePanel>
-  <ResizableHandle onPanelResize={(delta) => console.log(delta)} />
-  <ResizablePanel>Panel B</ResizablePanel>
-</ResizablePanelGroup>`),
-};
-
-/**
- * The `Resizable` convenience: pass `ResizablePanel` children and it
- * auto-inserts a handle between each visible pair. A `locked` panel makes its
- * neighbouring handle a static (non-draggable) divider; a `hidden` panel drops
- * its divider entirely.
- */
-export const ConvenienceGroup: Story = {
-  name: 'Resizable (convenience)',
-  render: () => (
-    <div class="h-48 w-full max-w-2xl rounded-lg border border-border overflow-hidden">
-      <Resizable orientation="horizontal" withHandle onChange={(sizes) => console.log('sizes', sizes)}>
-        <ResizablePanel defaultSize="240px" locked>
-          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
-            <span class="text-sm text-muted-foreground">Locked sidebar (240px)</span>
-          </div>
-        </ResizablePanel>
-        <ResizablePanel>
-          <div class="flex h-full items-center justify-center p-4">
-            <span class="text-sm text-muted-foreground">Chat</span>
-          </div>
-        </ResizablePanel>
-        <ResizablePanel defaultSize="30%" minSize="160px">
-          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
-            <span class="text-sm text-muted-foreground">Preview</span>
-          </div>
-        </ResizablePanel>
-      </Resizable>
-    </div>
-  ),
-  ...src(`<Resizable orientation="horizontal" withHandle onChange={(sizes) => console.log(sizes)}>
-  <ResizablePanel defaultSize="240px" locked>Locked sidebar</ResizablePanel>
-  <ResizablePanel>Chat</ResizablePanel>
-  <ResizablePanel defaultSize="30%" minSize="160px">Preview</ResizablePanel>
-</Resizable>`),
-};
-
-/**
- * Min/max + keyboard: focus the handle (Tab) and use ←/→ to nudge, Home/End to
- * jump to the panel's min/max. Sizes accept px or %.
- */
-export const MinMaxKeyboard: Story = {
-  name: 'Min/Max + Keyboard',
-  render: () => (
-    <div class="h-48 w-full max-w-2xl rounded-lg border border-border overflow-hidden">
-      <ResizablePanelGroup orientation="horizontal">
-        <ResizablePanel defaultSize="30%" minSize="120px" maxSize="50%">
-          <div class="flex h-full items-center justify-center bg-muted/30 p-4">
-            <span class="text-sm text-muted-foreground">min 120px · max 50%</span>
-          </div>
-        </ResizablePanel>
-        <ResizableHandle withHandle />
-        <ResizablePanel minSize="160px">
-          <div class="flex h-full items-center justify-center p-4">
-            <span class="text-sm text-muted-foreground">Content (min 160px)</span>
-          </div>
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </div>
-  ),
-  ...src(`<ResizablePanelGroup orientation="horizontal">
-  <ResizablePanel defaultSize="30%" minSize="120px" maxSize="50%">Sidebar</ResizablePanel>
-  <ResizableHandle withHandle />
-  <ResizablePanel minSize="160px">Content</ResizablePanel>
-</ResizablePanelGroup>`),
-};

package/src/ui/scroll-area.stories.tsx

@@ -1,50 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { For } from 'solid-js';
-import { ScrollArea } from './scroll-area';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Primitives/ScrollArea',
-  component: ScrollArea,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A vertically scrollable container with thin, themed scrollbars (`scrollbar-thin` + muted thumb, transparent track). A thin styling layer over native overflow — no custom scroll hijacking, so momentum, keyboard, and accessibility behave exactly like the platform expects. Constrain it with a height (or let a flex parent bound it) and overflow content scrolls.',
-        '**When to use:** any bounded region whose content can exceed its height — the conversation/history sidebar, a long menu, a tall card body.',
-        '**How to use:** set a height via `class` and drop the scrollable content inside. All other div props (e.g. `aria-label`) are forwarded.',
-      ]),
-    },
-  },
-  render: () => (
-    <ScrollArea class="h-56 w-72 rounded-lg border border-border p-2">
-      <ul class="space-y-1">
-        <For each={Array.from({ length: 24 }, (_, i) => i + 1)}>
-          {(n) => (
-            <li class="rounded-md px-3 py-2 text-sm text-foreground hover:bg-muted">
-              Conversation {n}
-            </li>
-          )}
-        </For>
-      </ul>
-    </ScrollArea>
-  ),
-} satisfies Meta<typeof ScrollArea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { ScrollArea } from '@kitn.ai/ui';`;
-
-/** A bounded list that scrolls. Note macOS hides overlay scrollbars until you scroll. */
-export const Playground: Story = {
-  parameters: {
-    docs: {
-      source: {
-        code: `${IMPORT}\n\n<ScrollArea class="h-56 w-72 rounded-lg border p-2">\n  <For each={conversations}>{(c) => <Row {...c} />}</For>\n</ScrollArea>`,
-        language: 'tsx',
-      },
-    },
-  },
-};

package/src/ui/separator.stories.tsx

@@ -1,81 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { Separator } from './separator';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Primitives/Separator',
-  component: Separator,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      controls: { exclude: ['use:eventListener'] },
-      description: componentDescription([
-        'A thin **divider** line (a `role="separator"` element) that visually splits content either horizontally or vertically.',
-        '**When to use:** to separate stacked sections, group items in a menu/list, or divide inline controls in a toolbar.',
-        '**How to use:** set `orientation` to `horizontal` (full-width line) or `vertical` (full-height line). For a vertical separator, give the parent a height so the line has something to fill.',
-        '**Placement:** between message groups, in dropdown/menu sections, header toolbars, and between sidebar regions.',
-      ]),
-    },
-  },
-  argTypes: {
-    orientation: {
-      control: 'select',
-      options: ['horizontal', 'vertical'],
-      description: 'Direction of the divider line.',
-      table: { defaultValue: { summary: 'horizontal' } },
-    },
-  },
-  args: {
-    orientation: 'horizontal',
-  },
-  render: (args) => (
-    <div class="w-64 p-4">
-      <p class="text-sm text-foreground mb-3">Above</p>
-      <Separator {...args} />
-      <p class="text-sm text-foreground mt-3">Below</p>
-    </div>
-  ),
-} satisfies Meta<typeof Separator>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { Separator } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — flip the orientation. */
-export const Playground: Story = {
-  ...src(`<Separator orientation="horizontal" />`),
-};
-
-export const Horizontal: Story = {
-  args: { orientation: 'horizontal' },
-  ...src(`<div class="w-64 p-4">
-  <p class="text-sm mb-3">Above</p>
-  <Separator />
-  <p class="text-sm mt-3">Below</p>
-</div>`),
-};
-
-/** Vertical divider — needs a parent with a fixed height (showcase). */
-export const Vertical: Story = {
-  render: () => (
-    <div class="flex items-center gap-3 p-4">
-      <span class="text-sm text-foreground">Left</span>
-      <div class="h-6">
-        <Separator orientation="vertical" />
-      </div>
-      <span class="text-sm text-foreground">Right</span>
-    </div>
-  ),
-  ...src(`<div class="flex items-center gap-3 p-4">
-  <span class="text-sm">Left</span>
-  <div class="h-6">
-    <Separator orientation="vertical" />
-  </div>
-  <span class="text-sm">Right</span>
-</div>`),
-};