@kitn.ai/ui 0.15.0 → 0.16.0

package/src/ui/skeleton.stories.tsx

@@ -1,337 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { Skeleton } from './skeleton';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Primitives/Skeleton',
-  component: Skeleton,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      controls: { exclude: ['use:eventListener'] },
-      description: componentDescription([
-        'A pulsing **placeholder** block used to indicate loading content. It has no shape of its own — size and rounding come from the `class` you pass.',
-        '**When to use:** while content (messages, lists, cards, tool output) is loading, to preserve layout and signal progress without a spinner.',
-        '**How to use:** compose one or more `Skeleton` elements and set width/height/rounding via utility classes (e.g. `class="h-4 w-3/4"`). Build skeletons that mirror the real layout they replace.',
-        '**Placement:** message bubbles, conversation lists, code blocks, tool calls, input areas, and full-page loading states.',
-      ]),
-    },
-  },
-  argTypes: {
-    class: {
-      control: 'text',
-      description: 'Utility classes that set the size and rounding of the placeholder.',
-    },
-  },
-  args: {
-    class: 'h-4 w-64',
-  },
-  render: (args) => <Skeleton {...args} />,
-} satisfies Meta<typeof Skeleton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { Skeleton } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — edit `class` to resize the placeholder. */
-export const Playground: Story = {
-  ...src(`<Skeleton class="h-4 w-64" />`),
-};
-
-export const Basic: Story = {
-  render: () => (
-    <div class="space-y-3 w-80">
-      <Skeleton class="h-4 w-full" />
-      <Skeleton class="h-4 w-3/4" />
-      <Skeleton class="h-4 w-1/2" />
-    </div>
-  ),
-  ...src(`<div class="space-y-3 w-80">
-  <Skeleton class="h-4 w-full" />
-  <Skeleton class="h-4 w-3/4" />
-  <Skeleton class="h-4 w-1/2" />
-</div>`),
-};
-
-export const MessageBubble: Story = {
-  name: 'Message Bubble',
-  render: () => (
-    <div class="space-y-6 w-full max-w-2xl">
-      {/* User message skeleton */}
-      <div class="flex justify-end">
-        <Skeleton class="h-12 w-64 rounded-3xl" />
-      </div>
-
-      {/* Assistant message skeleton */}
-      <div class="flex gap-3 items-start">
-        <Skeleton class="h-8 w-8 rounded-full shrink-0" />
-        <div class="flex-1 space-y-2">
-          <Skeleton class="h-4 w-full" />
-          <Skeleton class="h-4 w-full" />
-          <Skeleton class="h-4 w-5/6" />
-          <Skeleton class="h-4 w-2/3" />
-        </div>
-      </div>
-    </div>
-  ),
-  ...src(`<div class="space-y-6 w-full max-w-2xl">
-  <div class="flex justify-end">
-    <Skeleton class="h-12 w-64 rounded-3xl" />
-  </div>
-  <div class="flex gap-3 items-start">
-    <Skeleton class="h-8 w-8 rounded-full shrink-0" />
-    <div class="flex-1 space-y-2">
-      <Skeleton class="h-4 w-full" />
-      <Skeleton class="h-4 w-full" />
-      <Skeleton class="h-4 w-5/6" />
-      <Skeleton class="h-4 w-2/3" />
-    </div>
-  </div>
-</div>`),
-};
-
-export const MessageWithCode: Story = {
-  name: 'Message with Code Block',
-  render: () => (
-    <div class="flex gap-3 items-start w-full max-w-2xl">
-      <Skeleton class="h-8 w-8 rounded-full shrink-0" />
-      <div class="flex-1 space-y-3">
-        <div class="space-y-2">
-          <Skeleton class="h-4 w-full" />
-          <Skeleton class="h-4 w-4/5" />
-        </div>
-        {/* Code block skeleton */}
-        <Skeleton class="h-32 w-full rounded-xl" />
-        <div class="space-y-2">
-          <Skeleton class="h-4 w-full" />
-          <Skeleton class="h-4 w-3/5" />
-        </div>
-      </div>
-    </div>
-  ),
-  ...src(`<div class="flex gap-3 items-start w-full max-w-2xl">
-  <Skeleton class="h-8 w-8 rounded-full shrink-0" />
-  <div class="flex-1 space-y-3">
-    <div class="space-y-2">
-      <Skeleton class="h-4 w-full" />
-      <Skeleton class="h-4 w-4/5" />
-    </div>
-    <Skeleton class="h-32 w-full rounded-xl" />
-    <div class="space-y-2">
-      <Skeleton class="h-4 w-full" />
-      <Skeleton class="h-4 w-3/5" />
-    </div>
-  </div>
-</div>`),
-};
-
-export const ConversationList: Story = {
-  name: 'Conversation List',
-  render: () => (
-    <div class="w-64 space-y-1">
-      {/* Section header */}
-      <Skeleton class="h-3 w-12 mb-2" />
-      {[1, 2, 3].map(() => (
-        <div class="flex items-center gap-2 px-2 py-2">
-          <Skeleton class="h-4 w-4 rounded shrink-0" />
-          <Skeleton class="h-4 flex-1" />
-        </div>
-      ))}
-      {/* Section header */}
-      <Skeleton class="h-3 w-16 mt-4 mb-2" />
-      {[1, 2].map(() => (
-        <div class="flex items-center gap-2 px-2 py-2">
-          <Skeleton class="h-4 w-4 rounded shrink-0" />
-          <Skeleton class="h-4 flex-1" />
-        </div>
-      ))}
-    </div>
-  ),
-  ...src(`<div class="w-64 space-y-1">
-  <Skeleton class="h-3 w-12 mb-2" />
-  {[1, 2, 3].map(() => (
-    <div class="flex items-center gap-2 px-2 py-2">
-      <Skeleton class="h-4 w-4 rounded shrink-0" />
-      <Skeleton class="h-4 flex-1" />
-    </div>
-  ))}
-</div>`),
-};
-
-export const ToolCall: Story = {
-  name: 'Tool Call',
-  render: () => (
-    <div class="w-full max-w-2xl">
-      <div class="border border-border rounded-xl overflow-hidden">
-        {/* Tool header */}
-        <div class="flex items-center gap-2 px-3 py-2.5">
-          <Skeleton class="h-4 w-4 rounded-full" />
-          <Skeleton class="h-4 w-32" />
-          <Skeleton class="h-5 w-20 rounded-full" />
-        </div>
-        {/* Tool body */}
-        <div class="border-t border-border p-3 space-y-3">
-          <div>
-            <Skeleton class="h-3 w-10 mb-2" />
-            <Skeleton class="h-20 w-full rounded" />
-          </div>
-          <div>
-            <Skeleton class="h-3 w-12 mb-2" />
-            <Skeleton class="h-16 w-full rounded" />
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-  ...src(`<div class="w-full max-w-2xl">
-  <div class="border border-border rounded-xl overflow-hidden">
-    <div class="flex items-center gap-2 px-3 py-2.5">
-      <Skeleton class="h-4 w-4 rounded-full" />
-      <Skeleton class="h-4 w-32" />
-      <Skeleton class="h-5 w-20 rounded-full" />
-    </div>
-    <div class="border-t border-border p-3 space-y-3">
-      <Skeleton class="h-3 w-10 mb-2" />
-      <Skeleton class="h-20 w-full rounded" />
-    </div>
-  </div>
-</div>`),
-};
-
-export const Card: Story = {
-  name: 'Content Card',
-  render: () => (
-    <div class="w-72">
-      <Skeleton class="h-40 w-full rounded-xl mb-3" />
-      <div class="flex gap-3">
-        <Skeleton class="h-8 w-8 rounded-full shrink-0" />
-        <div class="flex-1 space-y-2">
-          <Skeleton class="h-4 w-full" />
-          <Skeleton class="h-3 w-24" />
-          <Skeleton class="h-3 w-32" />
-        </div>
-      </div>
-    </div>
-  ),
-  ...src(`<div class="w-72">
-  <Skeleton class="h-40 w-full rounded-xl mb-3" />
-  <div class="flex gap-3">
-    <Skeleton class="h-8 w-8 rounded-full shrink-0" />
-    <div class="flex-1 space-y-2">
-      <Skeleton class="h-4 w-full" />
-      <Skeleton class="h-3 w-24" />
-      <Skeleton class="h-3 w-32" />
-    </div>
-  </div>
-</div>`),
-};
-
-export const InputArea: Story = {
-  name: 'Input Area',
-  render: () => (
-    <div class="w-full max-w-2xl">
-      <div class="border border-border rounded-2xl p-3 space-y-3">
-        <Skeleton class="h-10 w-full rounded-lg" />
-        <div class="flex items-center justify-between">
-          <div class="flex gap-2">
-            <Skeleton class="h-8 w-8 rounded-full" />
-            <Skeleton class="h-8 w-8 rounded-full" />
-            <Skeleton class="h-8 w-8 rounded-full" />
-          </div>
-          <Skeleton class="h-8 w-8 rounded-full" />
-        </div>
-      </div>
-    </div>
-  ),
-  ...src(`<div class="w-full max-w-2xl">
-  <div class="border border-border rounded-2xl p-3 space-y-3">
-    <Skeleton class="h-10 w-full rounded-lg" />
-    <div class="flex items-center justify-between">
-      <div class="flex gap-2">
-        <Skeleton class="h-8 w-8 rounded-full" />
-        <Skeleton class="h-8 w-8 rounded-full" />
-        <Skeleton class="h-8 w-8 rounded-full" />
-      </div>
-      <Skeleton class="h-8 w-8 rounded-full" />
-    </div>
-  </div>
-</div>`),
-};
-
-export const FullChat: Story = {
-  name: 'Full Chat Layout',
-  render: () => (
-    <div class="flex w-full max-w-4xl h-96 border border-border rounded-xl overflow-hidden">
-      {/* Sidebar */}
-      <div class="w-56 border-r border-border p-3 space-y-3 shrink-0">
-        <Skeleton class="h-8 w-full rounded-lg" />
-        <div class="space-y-1 mt-4">
-          <Skeleton class="h-3 w-12 mb-2" />
-          {[1, 2, 3].map(() => (
-            <Skeleton class="h-8 w-full rounded-lg" />
-          ))}
-          <Skeleton class="h-3 w-16 mt-3 mb-2" />
-          {[1, 2].map(() => (
-            <Skeleton class="h-8 w-full rounded-lg" />
-          ))}
-        </div>
-      </div>
-
-      {/* Main */}
-      <div class="flex-1 flex flex-col">
-        {/* Header */}
-        <div class="flex items-center justify-between px-4 py-3 border-b border-border">
-          <Skeleton class="h-4 w-48" />
-          <div class="flex gap-2">
-            <Skeleton class="h-8 w-28 rounded-lg" />
-            <Skeleton class="h-8 w-8 rounded-full" />
-          </div>
-        </div>
-
-        {/* Messages */}
-        <div class="flex-1 p-4 space-y-6 overflow-hidden">
-          <div class="flex justify-end">
-            <Skeleton class="h-10 w-52 rounded-3xl" />
-          </div>
-          <div class="flex gap-3 items-start">
-            <Skeleton class="h-8 w-8 rounded-full shrink-0" />
-            <div class="flex-1 space-y-2">
-              <Skeleton class="h-4 w-full" />
-              <Skeleton class="h-4 w-5/6" />
-              <Skeleton class="h-4 w-2/3" />
-            </div>
-          </div>
-        </div>
-
-        {/* Input */}
-        <div class="p-3">
-          <Skeleton class="h-14 w-full rounded-2xl" />
-        </div>
-      </div>
-    </div>
-  ),
-  ...src(`<div class="flex w-full max-w-4xl h-96 border rounded-xl overflow-hidden">
-  <div class="w-56 border-r p-3 space-y-3 shrink-0">
-    <Skeleton class="h-8 w-full rounded-lg" />
-  </div>
-  <div class="flex-1 flex flex-col">
-    <div class="flex-1 p-4 space-y-6">
-      <div class="flex gap-3 items-start">
-        <Skeleton class="h-8 w-8 rounded-full shrink-0" />
-        <div class="flex-1 space-y-2">
-          <Skeleton class="h-4 w-full" />
-          <Skeleton class="h-4 w-5/6" />
-        </div>
-      </div>
-    </div>
-    <div class="p-3">
-      <Skeleton class="h-14 w-full rounded-2xl" />
-    </div>
-  </div>
-</div>`),
-};

package/src/ui/switch.stories.tsx

@@ -1,51 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { fn } from 'storybook/test';
-import { Switch, type SwitchProps } from './switch';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Primitives/Switch',
-  component: Switch,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A toggle **switch** (`role="switch"`) for an immediate on/off setting, built on a native `<button>`.',
-        '**When to use:** a preference that applies the moment it flips — "Temporary chat", notifications, a feature flag. For a labelled choice submitted with a form, prefer a checkbox.',
-        '**How to use:** uncontrolled via `defaultChecked`, or controlled via `checked` + `onChange`. Operable with Space/Enter. Pass `label` for the accessible name.',
-        '**Placement:** settings rows, preference panels, and popover menus such as a chat header model menu.',
-      ]),
-    },
-  },
-  argTypes: {
-    checked: { control: 'boolean', description: 'Controlled checked state. Drive it from `onChange`.' },
-    defaultChecked: { control: 'boolean', description: 'Initial state when uncontrolled.' },
-    disabled: { control: 'boolean', description: 'Disable interaction.' },
-    label: { control: 'text', description: 'Accessible label.' },
-  },
-  args: { label: 'Temporary chat', onChange: fn() },
-} satisfies Meta<typeof Switch>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Off by default; click or press Space to toggle. */
-export const Playground: Story = {};
-
-/** Starts on via `defaultChecked`. */
-export const On: Story = { args: { defaultChecked: true } };
-
-/** Non-interactive. */
-export const Disabled: Story = { args: { disabled: true } };
-
-/** The common shape: a labelled settings row with the switch trailing. */
-export const SettingsRow: Story = {
-  name: 'In a settings row',
-  render: (args: SwitchProps) => (
-    <div style={{ display: 'flex', 'align-items': 'center', 'justify-content': 'space-between', gap: '2rem', width: '18rem' }}>
-      <span style={{ 'font-size': '14px' }}>Temporary chat</span>
-      <Switch {...args} />
-    </div>
-  ),
-};

package/src/ui/switch.test.tsx

@@ -1,59 +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 { Switch } from './switch';
-
-afterEach(cleanup);
-
-describe('Switch', () => {
-  it('renders a switch role, off by default', () => {
-    const { getByRole } = render(() => <Switch label="Temporary chat" />);
-    const sw = getByRole('switch');
-    expect(sw).toHaveAttribute('aria-checked', 'false');
-    expect(sw).toHaveAttribute('aria-label', 'Temporary chat');
-  });
-
-  it('honours defaultChecked for the initial (uncontrolled) state', () => {
-    const { getByRole } = render(() => <Switch defaultChecked />);
-    expect(getByRole('switch')).toHaveAttribute('aria-checked', 'true');
-  });
-
-  it('toggles on click and reports the new state', () => {
-    const onChange = vi.fn();
-    const { getByRole } = render(() => <Switch onChange={onChange} />);
-    const sw = getByRole('switch');
-    fireEvent.click(sw);
-    expect(sw).toHaveAttribute('aria-checked', 'true');
-    expect(onChange).toHaveBeenCalledWith(true);
-    fireEvent.click(sw);
-    expect(sw).toHaveAttribute('aria-checked', 'false');
-    expect(onChange).toHaveBeenLastCalledWith(false);
-  });
-
-  it('toggles with the keyboard (Space / Enter)', () => {
-    const onChange = vi.fn();
-    const { getByRole } = render(() => <Switch onChange={onChange} />);
-    fireEvent.keyDown(getByRole('switch'), { key: ' ' });
-    expect(onChange).toHaveBeenCalledWith(true);
-  });
-
-  it('is controlled when `checked` is set — defers state to the parent', () => {
-    const onChange = vi.fn();
-    const { getByRole } = render(() => <Switch checked={false} onChange={onChange} />);
-    const sw = getByRole('switch');
-    fireEvent.click(sw);
-    expect(onChange).toHaveBeenCalledWith(true);
-    // controlled: stays off until the parent flips `checked`
-    expect(sw).toHaveAttribute('aria-checked', 'false');
-  });
-
-  it('does not toggle when disabled', () => {
-    const onChange = vi.fn();
-    const { getByRole } = render(() => <Switch disabled onChange={onChange} />);
-    const sw = getByRole('switch');
-    fireEvent.click(sw);
-    expect(onChange).not.toHaveBeenCalled();
-    expect(sw).toHaveAttribute('aria-checked', 'false');
-    expect(sw).toBeDisabled();
-  });
-});

package/src/ui/textarea.stories.tsx

@@ -1,76 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import type { JSX } from 'solid-js';
-import { Textarea } from './textarea';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Primitives/Textarea',
-  component: Textarea,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A single-line-by-default textarea that auto-grows with its content up to an optional `maxHeight`, after which it scrolls. It is **transparent and borderless by design** — it is meant to drop into a composed input frame that owns the visual boundary and focus ring (the demos below wrap it exactly the way `PromptInput` / `<kai-prompt-input>` does, with `focus-within` on the frame). This is the editable surface behind `PromptInput`.',
-        '**When to use:** free-text entry that may span multiple lines — a chat composer, a comment box, an editable note.',
-        '**How to use:** drop it inside a framed container and use it like a native `<textarea>` (`value`, `placeholder`, `onInput`, …). Auto-resize is on by default; set `maxHeight` (px) to cap growth, or `autoResize={false}` for a fixed-height field.',
-      ]),
-    },
-  },
-  argTypes: {
-    placeholder: { control: 'text', description: 'Placeholder text.' },
-    maxHeight: { control: 'number', description: 'Max height (px) before the field scrolls instead of growing.' },
-    autoResize: { control: 'boolean', description: 'Grow with content. Default true.' },
-    class: { control: 'text', description: 'Extra classes.' },
-  },
-  args: {
-    placeholder: 'Ask anything… (Shift+Enter for a newline)',
-    maxHeight: 200,
-  },
-  render: (args) => (
-    <Frame>
-      <Textarea {...args} class="focus-visible:ring-0" />
-    </Frame>
-  ),
-} satisfies Meta<typeof Textarea>;
-
-/**
- * The composed input frame, mirroring how `PromptInput` wraps the textarea: the
- * FRAME owns the boundary + focus ring (`focus-within`), and the transparent
- * textarea inside has its own ring neutralized so there's no nested box.
- */
-function Frame(props: { children: JSX.Element }) {
-  return (
-    <div class="w-96 cursor-text rounded-xl border border-border bg-muted/40 p-3 shadow-xs transition-shadow focus-within:border-ring focus-within:ring-2 focus-within:ring-ring">
-      {props.children}
-    </div>
-  );
-}
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { Textarea } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Type several lines — the field grows until `maxHeight`, then scrolls. Focus the field: the ring is on the frame, not a nested box. */
-export const Playground: Story = {
-  ...src(`{/* The frame owns the focus ring; the textarea's own ring is neutralized. */}
-<div class="cursor-text rounded-xl border bg-muted/40 p-3 focus-within:ring-2 focus-within:ring-ring">
-  <Textarea placeholder="Ask anything…" maxHeight={200} class="focus-visible:ring-0" />
-</div>`),
-};
-
-/** A fixed-height field (auto-resize disabled). */
-export const FixedHeight: Story = {
-  render: () => (
-    <Frame>
-      <Textarea autoResize={false} rows={4} placeholder="Fixed at 4 rows…" class="focus-visible:ring-0" />
-    </Frame>
-  ),
-  ...src(`<div class="cursor-text rounded-xl border bg-muted/40 p-3 focus-within:ring-2 focus-within:ring-ring">
-  <Textarea autoResize={false} rows={4} placeholder="Fixed at 4 rows…" class="focus-visible:ring-0" />
-</div>`),
-};

package/src/ui/tooltip.stories.tsx

@@ -1,74 +0,0 @@
-import type { Meta, StoryObj } from 'storybook-solidjs-vite';
-import { Tooltip } from './tooltip';
-import { Button } from './button';
-import { componentDescription } from '../stories/docs/element-controls';
-
-const meta = {
-  title: 'Solid (Advanced)/Primitives/Tooltip',
-  component: Tooltip,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: componentDescription([
-        'A small floating label that appears on hover/focus of its trigger element, built with a DIY overlay-core implementation (no third-party dependency, no arrow).',
-        '**When to use:** to clarify the purpose of icon-only buttons or terse controls — short, supplementary hints that are not essential to complete the action.',
-        '**How to use:** wrap a single interactive `children` element and set `content` to the hint text. The child becomes the trigger.',
-        '**Placement:** toolbars, message action rows, and any compact icon control where a label would not otherwise fit.',
-      ]),
-      controls: { exclude: ['use:eventListener'] },
-    },
-  },
-  argTypes: {
-    content: {
-      control: 'text',
-      description: 'Text shown inside the tooltip bubble.',
-    },
-    children: {
-      control: false,
-      description: 'The trigger element the tooltip is attached to.',
-    },
-    class: {
-      control: 'text',
-      description: 'Extra classes applied to the tooltip content bubble.',
-    },
-  },
-  args: {
-    content: 'This is a tooltip',
-    children: <Button variant="outline">Hover me</Button>,
-  },
-  render: (args) => <Tooltip {...args} />,
-} satisfies Meta<typeof Tooltip>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const IMPORT = `import { Tooltip } from '@kitn.ai/ui';`;
-const src = (code: string) => ({
-  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
-});
-
-/** Interactive playground — set the tooltip text and hover the trigger. */
-export const Playground: Story = {
-  ...src(`<Tooltip content="This is a tooltip">
-  <Button variant="outline">Hover me</Button>
-</Tooltip>`),
-};
-
-export const OnIconButton: Story = {
-  render: () => (
-    <Tooltip content="Add new item">
-      <Button variant="ghost" size="icon-sm" aria-label="Add new item">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <line x1="12" y1="5" x2="12" y2="19" />
-          <line x1="5" y1="12" x2="19" y2="12" />
-        </svg>
-      </Button>
-    </Tooltip>
-  ),
-  ...src(`<Tooltip content="Add new item">
-  <Button variant="ghost" size="icon-sm">
-    <PlusIcon />
-  </Button>
-</Tooltip>`),
-};