@zooid/ui 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 zooid-ai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@zooid/ui",
+  "version": "0.0.1",
+  "type": "module",
+  "license": "MIT",
+  "author": "Ori Ben",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zooid-ai/zooid",
+    "directory": "packages/ui"
+  },
+  "files": [
+    "src"
+  ],
+  "svelte": "./src/index.ts",
+  "exports": {
+    ".": {
+      "svelte": "./src/index.ts"
+    },
+    "./components/*": {
+      "svelte": "./src/components/*/index.ts"
+    },
+    "./lib/*": "./src/lib/*",
+    "./styles/*": "./src/styles/*"
+  },
+  "dependencies": {
+    "bits-ui": "^1.3.7",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.0",
+    "tailwind-variants": "^1.0.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}

package/src/components/badge/badge.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  export const badgeVariants = tv({
+    base: 'inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground shadow',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  });
+
+  export type Variant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+  import { cn } from '../../lib/utils';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    class: className,
+    variant = 'default',
+    children,
+    ...restProps
+  }: HTMLAttributes<HTMLDivElement> & {
+    variant?: Variant;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<div class={cn(badgeVariants({ variant }), className)} {...restProps}>
+  {@render children?.()}
+</div>

package/src/components/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export { badgeVariants } from './badge.svelte';

package/src/components/button/button.svelte

@@ -0,0 +1,59 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  export const buttonVariants = tv({
+    base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  });
+
+  export type Variant = VariantProps<typeof buttonVariants>['variant'];
+  export type Size = VariantProps<typeof buttonVariants>['size'];
+</script>
+
+<script lang="ts">
+  import { cn } from '../../lib/utils';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  let {
+    class: className,
+    variant = 'default',
+    size = 'default',
+    children,
+    ...restProps
+  }: HTMLButtonAttributes & {
+    variant?: Variant;
+    size?: Size;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<button
+  class={cn(buttonVariants({ variant, size }), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</button>

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './button.svelte';
+export { buttonVariants } from './button.svelte';

package/src/components/card/card-content.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from '../../lib/utils';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
+</script>
+
+<div class={cn('p-4 pt-0', className)} {...restProps}>
+  {@render children?.()}
+</div>

package/src/components/card/card-description.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from '../../lib/utils';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: HTMLAttributes<HTMLParagraphElement> & { children?: Snippet } = $props();
+</script>
+
+<p class={cn('text-sm text-muted-foreground', className)} {...restProps}>
+  {@render children?.()}
+</p>

package/src/components/card/card-header.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from '../../lib/utils';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
+</script>
+
+<div class={cn('flex flex-col gap-y-1.5 p-4', className)} {...restProps}>
+  {@render children?.()}
+</div>

package/src/components/card/card-title.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { cn } from '../../lib/utils';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: HTMLAttributes<HTMLHeadingElement> & { children?: Snippet } = $props();
+</script>
+
+<h3
+  class={cn('font-semibold leading-none tracking-tight', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</h3>

package/src/components/card/card.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn } from '../../lib/utils';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
+</script>
+
+<div
+  class={cn(
+    'rounded-xl border border-border bg-card text-card-foreground shadow',
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/src/components/card/index.ts

@@ -0,0 +1,5 @@
+export { default as Card } from './card.svelte';
+export { default as CardHeader } from './card-header.svelte';
+export { default as CardTitle } from './card-title.svelte';
+export { default as CardDescription } from './card-description.svelte';
+export { default as CardContent } from './card-content.svelte';

package/src/components/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './input.svelte';

package/src/components/input/input.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { cn } from '../../lib/utils';
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  let {
+    class: className,
+    value = $bindable(),
+    ...restProps
+  }: HTMLInputAttributes & { value?: string } = $props();
+</script>
+
+<input
+  class={cn(
+    'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+    className,
+  )}
+  bind:value
+  {...restProps}
+/>

package/src/components/scroll-area/index.ts

@@ -0,0 +1 @@
+export { default as ScrollArea } from './scroll-area.svelte';

package/src/components/scroll-area/scroll-area.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { cn } from '../../lib/utils';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
+</script>
+
+<div
+  class={cn('relative overflow-auto', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/src/components/separator/index.ts

@@ -0,0 +1 @@
+export { default as Separator } from './separator.svelte';

package/src/components/separator/separator.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn } from '../../lib/utils';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    class: className,
+    orientation = 'horizontal',
+    ...restProps
+  }: HTMLAttributes<HTMLDivElement> & {
+    orientation?: 'horizontal' | 'vertical';
+  } = $props();
+</script>
+
+<div
+  role="separator"
+  aria-orientation={orientation}
+  class={cn(
+    'shrink-0 bg-border',
+    orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+    className,
+  )}
+  {...restProps}
+></div>

package/src/index.ts

@@ -0,0 +1,7 @@
+export { cn } from './lib/utils';
+export { Card, CardHeader, CardTitle, CardDescription, CardContent } from './components/card/index';
+export { Badge, badgeVariants } from './components/badge/index';
+export { ScrollArea } from './components/scroll-area/index';
+export { Input } from './components/input/index';
+export { Button, buttonVariants } from './components/button/index';
+export { Separator } from './components/separator/index';

package/src/lib/utils.ts

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

package/src/styles/globals.css

@@ -0,0 +1,43 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-background: oklch(0.145 0 0);
+  --color-foreground: oklch(0.985 0 0);
+  --color-card: oklch(0.17 0 0);
+  --color-card-foreground: oklch(0.985 0 0);
+  --color-popover: oklch(0.17 0 0);
+  --color-popover-foreground: oklch(0.985 0 0);
+  --color-primary: oklch(0.75 0.18 160);
+  --color-primary-foreground: oklch(0.145 0 0);
+  --color-secondary: oklch(0.25 0 0);
+  --color-secondary-foreground: oklch(0.985 0 0);
+  --color-muted: oklch(0.25 0 0);
+  --color-muted-foreground: oklch(0.65 0 0);
+  --color-accent: oklch(0.25 0 0);
+  --color-accent-foreground: oklch(0.985 0 0);
+  --color-destructive: oklch(0.55 0.2 27);
+  --color-destructive-foreground: oklch(0.985 0 0);
+  --color-border: oklch(0.3 0 0);
+  --color-input: oklch(0.3 0 0);
+  --color-ring: oklch(0.75 0.18 160);
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+}
+
+body {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    'SF Mono',
+    Menlo,
+    Consolas,
+    'Liberation Mono',
+    monospace;
+}