@reddb-io/ui-kit 0.1.1

package/LICENSE

@@ -0,0 +1,17 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   Copyright 2026 reddb-io
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@reddb-io/ui-kit",
+  "version": "0.1.1",
+  "private": false,
+  "description": "Low-level RedDB UI design-system primitives.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "svelte": "./src/lib/index.ts",
+      "types": "./src/lib/index.ts"
+    },
+    "./tokens": "./src/tokens/index.ts",
+    "./tokens.css": "./src/tokens/tokens.css"
+  },
+  "files": [
+    "src/lib",
+    "src/tokens"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "svelte": "^5.20.0",
+    "svelte-check": "^4.1.4",
+    "typescript": "^5.7.2"
+  },
+  "dependencies": {
+    "tailwind-variants": "^2.1.0"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/reddb-io/red-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/reddb-io/red-ui.git",
+    "directory": "packages/ui-kit"
+  },
+  "bugs": {
+    "url": "https://github.com/reddb-io/red-ui/issues"
+  },
+  "scripts": {
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  }
+}

package/src/lib/Badge.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import { tv } from 'tailwind-variants'
+  export const badge = tv({
+    base:
+      'inline-flex items-center px-1.5 py-px rounded-full text-[10px] font-medium ' +
+      'font-mono uppercase tracking-[0.06em] border',
+    variants: {
+      tone: {
+        neutral: 'bg-bg-2 text-fg-2 border-line-2',
+        ok: 'bg-ok/15 text-ok border-ok/30',
+        warn: 'bg-warn/15 text-warn border-warn/30',
+        danger: 'bg-danger/15 text-danger border-danger/30',
+        info: 'bg-info/15 text-info border-info/30',
+        accent: 'bg-accent/15 text-accent border-accent/30',
+      },
+    },
+    defaultVariants: { tone: 'neutral' },
+  })
+</script>
+
+<script lang="ts">
+  interface Props {
+    tone?: 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'accent'
+    class?: string
+    children?: import('svelte').Snippet
+  }
+  let { tone = 'neutral', class: klass = '', children }: Props = $props()
+</script>
+
+<span class={badge({ tone, class: klass })}>{@render children?.()}</span>

package/src/lib/Button.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+  import { tv } from 'tailwind-variants'
+  export const button = tv({
+    base:
+      'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium tracking-tight ' +
+      'border border-transparent cursor-pointer transition-[background,border-color,color,box-shadow] duration-150 ' +
+      'active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed disabled:active:scale-100 ' +
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40',
+    variants: {
+      variant: {
+        primary:
+          'bg-accent text-white shadow-[0_0_0_1px_var(--color-accent),0_4px_14px_-4px_var(--color-accent-glow)] hover:bg-[#ff3868] hover:shadow-[0_0_0_1px_#ff3868,0_6px_18px_-4px_var(--color-accent-glow)]',
+        ghost:
+          'bg-bg-2 text-fg-1 border-line-2 hover:bg-bg-3 hover:text-fg-0 hover:border-line-3',
+        danger:
+          'bg-danger text-white hover:bg-[#ff6f88]',
+      },
+      size: {
+        sm: 'h-6 px-2.5 text-[11px]',
+        md: 'h-7 px-3 text-[12px]',
+        lg: 'h-8 px-4 text-[13px]',
+      },
+    },
+    defaultVariants: { variant: 'ghost', size: 'md' },
+  })
+</script>
+
+<script lang="ts">
+  interface Props {
+    variant?: 'primary' | 'ghost' | 'danger'
+    size?: 'sm' | 'md' | 'lg'
+    disabled?: boolean
+    onclick?: (e: MouseEvent) => void
+    class?: string
+    children?: import('svelte').Snippet
+  }
+  let { variant = 'ghost', size = 'md', disabled, onclick, class: klass = '', children }: Props = $props()
+</script>
+
+<button class={button({ variant, size, class: klass })} {disabled} {onclick}>
+  {@render children?.()}
+</button>

package/src/lib/Card.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  interface Props {
+    title?: string
+    floating?: boolean
+    class?: string
+    children?: import('svelte').Snippet
+  }
+  let { title, floating = false, class: klass = '', children }: Props = $props()
+
+  const cardClass = $derived(
+    floating
+      ? 'bg-bg-1/[0.92] border-line-2 shadow-[0_16px_48px_rgba(0,0,0,0.6)]'
+      : 'bg-bg-1 border-line-1'
+  )
+</script>
+
+<section class="rounded-lg border overflow-hidden backdrop-blur-md {cardClass} {klass}">
+  {#if title}
+    <header class="px-4 h-9 flex items-center font-mono text-[10px] uppercase tracking-[0.1em] text-fg-2 border-b border-line-1 bg-bg-1">
+      {title}
+    </header>
+  {/if}
+  <div class="p-4">{@render children?.()}</div>
+</section>

package/src/lib/Kbd.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  interface Props { children?: import('svelte').Snippet }
+  let { children }: Props = $props()
+</script>
+
+<kbd class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1.5 font-mono text-[10px] text-fg-1 bg-bg-2 border border-line-2 border-b-2 rounded-sm">
+  {@render children?.()}
+</kbd>

package/src/lib/NodeBadge.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  type Role = 'primary' | 'replica' | 'embedded'
+  interface Props { role: Role; label?: string }
+  let { role, label }: Props = $props()
+
+  const dotColor = $derived(
+    ({
+      primary: 'bg-role-primary text-role-primary',
+      replica: 'bg-role-replica text-role-replica',
+      embedded: 'bg-role-embedded text-role-embedded',
+    } as const)[role]
+  )
+</script>
+
+<span class="inline-flex items-center gap-1.5 font-mono text-[11px] text-fg-1 uppercase tracking-[0.06em]">
+  <span class="w-1.5 h-1.5 rounded-full {dotColor} shadow-[0_0_0_3px_currentColor]/20"></span>
+  <span>{label ?? role}</span>
+</span>

package/src/lib/index.ts

@@ -0,0 +1,5 @@
+export { default as Button } from './Button.svelte'
+export { default as Badge } from './Badge.svelte'
+export { default as Card } from './Card.svelte'
+export { default as NodeBadge } from './NodeBadge.svelte'
+export { default as Kbd } from './Kbd.svelte'

package/src/tokens/index.ts

@@ -0,0 +1,21 @@
+export const colors = {
+  bg: { 0: '#07080a', 1: '#0c0e11', 2: '#14171c', 3: '#1c2027' },
+  fg: { 0: '#f7f8fa', 1: '#c8ccd4', 2: '#9ca1a9', 3: '#7a7f87' },
+  line: { 1: '#1a1d22', 2: '#262a31', 3: '#353a42' },
+  accent: '#ff2056',
+  ok: '#4ade80',
+  warn: '#fbbf24',
+  danger: '#ff5470',
+  info: '#60a5fa',
+  role: { primary: '#ff2056', replica: '#60a5fa', embedded: '#4ade80' },
+} as const
+
+export const radius = { sm: '4px', md: '6px', lg: '10px', xl: '14px' } as const
+export const font = {
+  sans: "'InterVariable', 'Inter Tight', 'Inter', system-ui, sans-serif",
+  mono: "'JetBrains Mono', 'Berkeley Mono', ui-monospace, monospace",
+} as const
+export const ease = {
+  out: 'cubic-bezier(0.16, 1, 0.3, 1)',          // ease-out-expo, ambient
+  snap: 'cubic-bezier(0.25, 1, 0.5, 1)',         // ease-out-quart, snappier UI
+} as const

package/src/tokens/tokens.css

@@ -0,0 +1,90 @@
+@import url('https://rsms.me/inter/inter.css');
+
+:root {
+  /* Surfaces — near-black with cool tint, Linear/Vercel territory */
+  --bg-0: #07080a;
+  --bg-1: #0c0e11;
+  --bg-2: #14171c;
+  --bg-3: #1c2027;
+
+  /* Foreground */
+  --fg-0: #f4f5f7;
+  --fg-1: #c8ccd4;
+  --fg-2: #7a8088;
+  --fg-3: #4a4f57;
+
+  /* Borders */
+  --line-1: #1a1d22;
+  --line-2: #262a31;
+  --line-3: #353a42;
+
+  /* Surgical accent — red of reddb, used sparingly */
+  --accent: #ff2056;
+  --accent-soft: rgba(255, 32, 86, 0.12);
+  --accent-glow: rgba(255, 32, 86, 0.45);
+
+  /* Semantic */
+  --ok: #4ade80;
+  --warn: #fbbf24;
+  --danger: #ff5470;
+  --info: #60a5fa;
+
+  /* Node roles */
+  --role-primary: #ff2056;
+  --role-replica: #60a5fa;
+  --role-embedded: #4ade80;
+
+  /* Geometry */
+  --r-sm: 4px;
+  --r-md: 6px;
+  --r-lg: 10px;
+  --r-xl: 14px;
+
+  /* Typography */
+  --font-sans: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Berkeley Mono', ui-monospace, monospace;
+
+  /* Motion */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-snap: cubic-bezier(0.25, 1, 0.5, 1);
+
+  /* Shadows */
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--line-2);
+  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--line-2);
+}
+
+@supports (font-variation-settings: normal) {
+  :root { --font-sans: 'InterVariable', 'Inter Tight', 'Inter', system-ui, sans-serif; }
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  background: var(--bg-0);
+  color: var(--fg-0);
+  font-family: var(--font-sans);
+  font-feature-settings: 'cv11', 'ss01', 'ss03';
+  letter-spacing: -0.005em;
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* Subtle ambient grid — Linear-style background texture */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image:
+    radial-gradient(circle at 50% 0%, rgba(255, 32, 86, 0.04), transparent 60%),
+    linear-gradient(var(--line-1) 1px, transparent 1px),
+    linear-gradient(90deg, var(--line-1) 1px, transparent 1px);
+  background-size: 100% 100%, 32px 32px, 32px 32px;
+  opacity: 0.6;
+  pointer-events: none;
+  z-index: 0;
+}
+
+button, input, select { font-family: inherit; color: inherit; }
+
+::selection { background: var(--accent-soft); color: var(--fg-0); }