@kitn.ai/ui 0.14.1

package/src/ui/separator.stories.tsx

@@ -0,0 +1,81 @@
+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>`),
+};

package/src/ui/separator.tsx

@@ -0,0 +1,10 @@
+import { type JSX, splitProps } from 'solid-js';
+import { cn } from '../utils/cn';
+
+export interface SeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> { orientation?: 'horizontal' | 'vertical'; }
+
+export function Separator(props: SeparatorProps) {
+  const [local, rest] = splitProps(props, ['orientation', 'class']);
+  const isVertical = () => local.orientation === 'vertical';
+  return <div role="separator" class={cn('shrink-0 bg-border', isVertical() ? 'h-full w-px' : 'h-px w-full', local.class)} {...rest} />;
+}

package/src/ui/skeleton.stories.tsx

@@ -0,0 +1,337 @@
+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/skeleton.tsx

@@ -0,0 +1,16 @@
+import { type JSX, splitProps } from 'solid-js';
+import { cn } from '../utils/cn';
+
+export interface SkeletonProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+
+function Skeleton(props: SkeletonProps) {
+  const [local, rest] = splitProps(props, ['class']);
+  return (
+    <div
+      class={cn('animate-pulse rounded-md bg-muted', local.class)}
+      {...rest}
+    />
+  );
+}
+
+export { Skeleton };

package/src/ui/switch.stories.tsx

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,59 @@
+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/switch.tsx

@@ -0,0 +1,62 @@
+import { createSignal } from 'solid-js';
+import { cn } from '../utils/cn';
+
+export interface SwitchProps {
+  /** Controlled checked state. When set, the component defers state to the
+   *  parent — drive it from `onChange`. Omit for uncontrolled (internal) state. */
+  checked?: boolean;
+  /** Initial checked state when uncontrolled. */
+  defaultChecked?: boolean;
+  /** Disable interaction. */
+  disabled?: boolean;
+  /** Accessible label for the control. */
+  label?: string;
+  /** Fires with the next checked state on toggle. */
+  onChange?: (checked: boolean) => void;
+  class?: string;
+}
+
+/**
+ * A toggle switch (`role="switch"`). Controlled via `checked`, or uncontrolled
+ * from `defaultChecked`. Keyboard-operable (Space/Enter) and theme-tokened.
+ */
+export function Switch(props: SwitchProps) {
+  const [internal, setInternal] = createSignal(props.defaultChecked ?? false);
+  const isControlled = () => props.checked !== undefined;
+  const isOn = () => (isControlled() ? !!props.checked : internal());
+
+  const toggle = () => {
+    if (props.disabled) return;
+    const next = !isOn();
+    if (!isControlled()) setInternal(next);
+    props.onChange?.(next);
+  };
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isOn()}
+      aria-label={props.label}
+      disabled={props.disabled}
+      onClick={toggle}
+      onKeyDown={(e) => {
+        if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); toggle(); }
+      }}
+      class={cn(
+        'relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        isOn() ? 'bg-primary' : 'bg-muted',
+        props.class,
+      )}
+    >
+      <span
+        class={cn(
+          'inline-block h-4 w-4 rounded-full bg-white shadow transition-transform',
+          isOn() ? 'translate-x-[1.125rem]' : 'translate-x-0.5',
+        )}
+      />
+    </button>
+  );
+}