@kitnai/chat 0.1.0

package/src/ui/textarea.tsx

@@ -0,0 +1,21 @@
+import { type JSX, splitProps } from 'solid-js';
+import { cn } from '../utils/cn';
+import { useAutoResize } from '../primitives/use-auto-resize';
+
+export interface TextareaProps extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  maxHeight?: number;
+  autoResize?: boolean;
+}
+
+export function Textarea(props: TextareaProps) {
+  const [local, rest] = splitProps(props, ['class', 'maxHeight', 'autoResize']);
+  const { ref } = useAutoResize({ maxHeight: local.maxHeight });
+  return (
+    <textarea
+      ref={local.autoResize !== false ? ref : undefined}
+      class={cn('w-full resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none', local.class)}
+      rows={1}
+      {...rest}
+    />
+  );
+}

package/src/ui/tooltip.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { Tooltip } from './tooltip';
+import { Button } from './button';
+
+const meta = {
+  title: 'UI/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: [
+          'A small floating label that appears on hover/focus of its trigger element, built on Kobalte `Tooltip` with an 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.',
+        ].join('\n\n'),
+      },
+      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 '@kitnai/chat';`;
+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">
+        <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>`),
+};

package/src/ui/tooltip.tsx

@@ -0,0 +1,22 @@
+import { Tooltip as KTooltip } from '@kobalte/core/tooltip';
+import { type JSX, splitProps } from 'solid-js';
+import { cn } from '../utils/cn';
+import { useChatConfig } from '../primitives/chat-config';
+
+export interface TooltipProps { content: string; children: JSX.Element; class?: string; }
+
+export function Tooltip(props: TooltipProps) {
+  const [local] = splitProps(props, ['content', 'children', 'class']);
+  const config = useChatConfig();
+  return (
+    <KTooltip>
+      <KTooltip.Trigger as="span">{local.children}</KTooltip.Trigger>
+      <KTooltip.Portal mount={config.portalMount()}>
+        <KTooltip.Content class={cn('z-50 rounded-md bg-foreground px-2.5 py-1 text-xs text-background shadow-md animate-in fade-in-0 zoom-in-95', local.class)}>
+          <KTooltip.Arrow />
+          {local.content}
+        </KTooltip.Content>
+      </KTooltip.Portal>
+    </KTooltip>
+  );
+}

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/theme.css

@@ -0,0 +1,115 @@
+/* @kitnai/chat design system — import after `@import "tailwindcss"`.
+   Defines ONLY namespaced (--color-*) tokens, component keyframes, animation
+   utilities, and the .chat-markdown styles. Contains NO global base/reset rules,
+   so importing it restyles nothing on its own — a host opts in via the kit's
+   components + classes. Rebrand by overriding the --color-* values (optionally
+   scoped to a subtree). */
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(240 10% 3.9%);
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(240 10% 3.9%);
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(240 10% 3.9%);
+  --color-primary: hsl(240 5.9% 10%);
+  --color-primary-foreground: hsl(0 0% 98%);
+  --color-secondary: hsl(240 4.8% 95.9%);
+  --color-secondary-foreground: hsl(240 5.9% 10%);
+  --color-muted: hsl(240 4.8% 95.9%);
+  --color-muted-foreground: hsl(240 3.8% 46.1%);
+  --color-accent: hsl(240 4.8% 95.9%);
+  --color-accent-foreground: hsl(240 5.9% 10%);
+  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(0 0% 98%);
+  --color-border: hsl(240 5.9% 90%);
+  --color-input: hsl(240 5.9% 90%);
+  --color-ring: hsl(240 10% 3.9%);
+  --color-sidebar: hsl(0 0% 100%);
+
+  /* Inline `code` accent. Blue text on a translucent blue chip. */
+  --color-code-foreground: hsl(224.3 76.3% 48%);
+
+  --radius: 0.6rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  @keyframes typing { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(-2px); opacity: 1 } }
+  @keyframes loading-dots { 0%,100% { opacity: 0 } 50% { opacity: 1 } }
+  @keyframes wave { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(.6) } }
+  @keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }
+  @keyframes text-blink { 0%,100% { color: var(--color-primary) } 50% { color: var(--color-muted-foreground) } }
+  @keyframes bounce-dots { 0%,100% { transform: scale(.8); opacity: .5 } 50% { transform: scale(1.2); opacity: 1 } }
+  @keyframes thin-pulse { 0%,100% { transform: scale(.95); opacity: .8 } 50% { transform: scale(1.05); opacity: .4 } }
+  @keyframes pulse-dot { 0%,100% { transform: scale(1); opacity: .8 } 50% { transform: scale(1.5); opacity: 1 } }
+  @keyframes shimmer-text { 0% { background-position: 150% center } 100% { background-position: -150% center } }
+  @keyframes wave-bars { 0%,100% { transform: scaleY(1); opacity: .5 } 50% { transform: scaleY(.6); opacity: 1 } }
+  @keyframes shimmer { 0% { background-position: 200% 50% } 100% { background-position: -200% 50% } }
+  @keyframes spinner-fade { 0% { opacity: 0 } 100% { opacity: 1 } }
+  @keyframes collapsible-down { from { height: 0; opacity: 0 } to { height: var(--kb-collapsible-content-height); opacity: 1 } }
+  @keyframes collapsible-up { from { height: var(--kb-collapsible-content-height); opacity: 1 } to { height: 0; opacity: 0 } }
+}
+
+.dark {
+  --color-background: hsl(50 2% 9%);
+  --color-foreground: hsl(0 0% 98%);
+  --color-card: hsl(240 10% 3.9%);
+  --color-card-foreground: hsl(0 0% 98%);
+  --color-popover: hsl(240 10% 3.9%);
+  --color-popover-foreground: hsl(0 0% 98%);
+  --color-primary: hsl(0 0% 98%);
+  --color-primary-foreground: hsl(240 5.9% 10%);
+  --color-secondary: hsl(240 3.7% 15.9%);
+  --color-secondary-foreground: hsl(0 0% 98%);
+  --color-muted: hsl(240 3.7% 15.9%);
+  --color-muted-foreground: hsl(240 5% 64.9%);
+  --color-accent: hsl(240 3.7% 15.9%);
+  --color-accent-foreground: hsl(0 0% 98%);
+  --color-destructive: hsl(0 62.8% 30.6%);
+  --color-destructive-foreground: hsl(0 0% 98%);
+  --color-border: hsl(240 3.7% 15.9%);
+  --color-input: hsl(240 3.7% 15.9%);
+  --color-ring: hsl(240 4.9% 83.9%);
+  --color-sidebar: hsl(50 2% 7%);
+  --color-code-foreground: hsl(213 94% 78%);
+}
+
+/* Self-contained markdown styling — replaces the typography plugin's `prose`.
+   Keyed on --color-* tokens so it themes with the rest of the kit. */
+.chat-markdown { color: var(--color-foreground); line-height: 1.6; }
+.chat-markdown > div:first-child > :first-child { margin-top: 0; }
+.chat-markdown > div:last-child > :last-child { margin-bottom: 0; }
+.chat-markdown p { margin: 0 0 0.75em; }
+.chat-markdown p:last-child { margin-bottom: 0; }
+.chat-markdown h1, .chat-markdown h2, .chat-markdown h3, .chat-markdown h4 {
+  margin: 1.2em 0 0.5em; font-weight: 600; line-height: 1.3; color: var(--color-foreground);
+}
+.chat-markdown h1 { font-size: 1.4em; } .chat-markdown h2 { font-size: 1.25em; }
+.chat-markdown h3 { font-size: 1.1em; } .chat-markdown h4 { font-size: 1em; }
+.chat-markdown ul, .chat-markdown ol { margin: 0 0 0.75em; padding-left: 1.4em; }
+.chat-markdown li { margin: 0.2em 0; }
+.chat-markdown ul { list-style: disc; } .chat-markdown ol { list-style: decimal; }
+.chat-markdown a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
+.chat-markdown strong { font-weight: 600; color: var(--color-foreground); }
+.chat-markdown em { font-style: italic; }
+.chat-markdown blockquote {
+  margin: 0 0 0.75em; padding-left: 0.9em; border-left: 2px solid var(--color-border);
+  color: var(--color-muted-foreground);
+}
+.chat-markdown hr { margin: 1em 0; border: 0; border-top: 1px solid var(--color-border); }
+.chat-markdown code:not(pre code) {
+  background: color-mix(in oklab, var(--color-code-foreground) 15%, transparent);
+  color: var(--color-code-foreground);
+  border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.875em;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+}
+.chat-markdown table { width: 100%; border-collapse: collapse; margin: 0 0 0.75em; font-size: 0.9em; }
+.chat-markdown th, .chat-markdown td { border: 1px solid var(--color-border); padding: 0.4em 0.6em; text-align: left; }
+.chat-markdown th { font-weight: 600; background: color-mix(in oklab, var(--color-muted-foreground) 8%, transparent); }
+
+.scrollbar-thin { scrollbar-width: thin; scrollbar-color: var(--color-muted) transparent; }