@reddb-io/ui-kit 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reddb-io/ui-kit",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "private": false,
   "description": "Low-level RedDB UI design-system primitives.",
   "type": "module",
@@ -10,11 +10,13 @@
       "types": "./src/lib/index.ts"
     },
     "./tokens": "./src/tokens/index.ts",
-    "./tokens.css": "./src/tokens/tokens.css"
+    "./tokens.css": "./src/tokens/tokens.css",
+    "./styles.css": "./src/tokens/styles.css"
   },
   "files": [
     "src/lib",
-    "src/tokens"
+    "src/tokens",
+    "vendor/ds"
   ],
   "publishConfig": {
     "access": "public"
@@ -22,14 +24,12 @@
   "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",
-    "@reddb-io/kit-app": "0.0.0"
+    "@lucide/svelte": "^1.0.1",
+    "@internationalized/date": "^3.12.4",
+    "bits-ui": "^2.19.5",
+    "libphonenumber-js": "1.13.15",
+    "tailwind-variants": "^3.1.1"
   },
   "engines": {
     "node": ">=20"
@@ -44,7 +44,5 @@
   "bugs": {
     "url": "https://github.com/reddb-io/red-ui/issues"
   },
-  "scripts": {
-    "check": "svelte-check --tsconfig ./tsconfig.json"
-  }
+  "scripts": {}
 }

package/src/lib/Badge.svelte

@@ -1,30 +1,10 @@
-<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()
+  import { Badge } from '../../vendor/ds/kits/base/src/index.ts'
+  import type { ComponentProps } from 'svelte'
+  import { resolveTone, type LegacyTone } from './tone'
+
+  type Props = Omit<ComponentProps<typeof Badge>, 'tone'> & { tone?: LegacyTone }
+  let { tone = 'neutral', ...rest }: Props = $props()
 </script>
 
-<span class={badge({ tone, class: klass })}>{@render children?.()}</span>
+<Badge {...rest} tone={resolveTone(tone)} />

package/src/lib/Button.svelte

@@ -1,42 +1,19 @@
-<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">
+  import { Button } from '../../vendor/ds/kits/base/src/index.ts'
+  import type { Snippet } from 'svelte'
+  import type { Tone } from '../../vendor/ds/kits/base/src/index.ts'
+
+  // Temporary facade: the published ui-kit API called a destructive fill a variant.
   interface Props {
     variant?: 'primary' | 'ghost' | 'danger'
     size?: 'sm' | 'md' | 'lg'
+    tone?: Tone
     disabled?: boolean
-    onclick?: (e: MouseEvent) => void
+    onclick?: (event: MouseEvent) => void
     class?: string
-    children?: import('svelte').Snippet
+    children?: Snippet
   }
-  let { variant = 'ghost', size = 'md', disabled, onclick, class: klass = '', children }: Props = $props()
+  let { variant = 'ghost', tone, ...rest }: Props = $props()
 </script>
 
-<button class={button({ variant, size, class: klass })} {disabled} {onclick}>
-  {@render children?.()}
-</button>
+<Button {...rest} variant={variant === 'danger' ? 'primary' : variant} tone={variant === 'danger' ? 'danger' : tone} />

package/src/lib/Card.svelte

@@ -1,24 +1,9 @@
 <script lang="ts">
-  interface Props {
-    title?: string
-    floating?: boolean
-    class?: string
-    children?: import('svelte').Snippet
-  }
-  let { title, floating = false, class: klass = '', children }: Props = $props()
+  import { Card } from '../../vendor/ds/kits/base/src/index.ts'
+  import type { ComponentProps } from 'svelte'
 
-  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'
-  )
+  type Props = ComponentProps<typeof Card> & { floating?: boolean }
+  let { floating = false, raised = floating, ...rest }: Props = $props()
 </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>
+<Card {...rest} {raised} />

package/src/lib/EmptyState.svelte

@@ -1,30 +1,9 @@
 <script lang="ts">
-  // The "live or empty — never fake" fallback: a centered icon + title +
-  // optional description, with an optional `action` slot (a fix command, a
-  // primary button). Used when a list has no rows or a surface is unreachable.
-  import type { Snippet } from 'svelte'
+  import { EmptyState } from '../../vendor/ds/kits/base/src/index.ts'
+  import type { ComponentProps, Snippet } from 'svelte'
 
-  interface Props {
-    title: string
-    description?: string
-    /** Leading icon, rendered muted above the title. */
-    icon?: Snippet
-    /** Optional call to action beneath the copy. */
-    action?: Snippet
-    class?: string
-  }
-  let { title, description, icon, action, class: klass = '' }: Props = $props()
+  type Props = ComponentProps<typeof EmptyState> & { icon?: Snippet; action?: Snippet }
+  let { icon, action, media = icon, actions = action, bordered = false, ...rest }: Props = $props()
 </script>
 
-<div class="flex flex-col items-center justify-center gap-2 px-6 py-10 text-center {klass}">
-  {#if icon}
-    <span class="flex size-8 items-center justify-center text-fg-3">{@render icon()}</span>
-  {/if}
-  <p class="text-[13px] text-fg-1">{title}</p>
-  {#if description}
-    <p class="max-w-prose text-[12px] leading-relaxed text-fg-2">{description}</p>
-  {/if}
-  {#if action}
-    <div class="mt-2">{@render action()}</div>
-  {/if}
-</div>
+<EmptyState {...rest} {media} {actions} {bordered} />

package/src/lib/ListRow.svelte

@@ -1,67 +1,32 @@
 <script lang="ts">
-  // A settings/governance row: a `title` (+ optional `description` and a mono
-  // `hint`) on the left, a right-aligned `action` slot, and an optional `below`
-  // slot that spans the row's full width (for inline editors, diffs, warnings).
-  //
-  // `wide` flips the layout to a stacked variant: the label block sits on top
-  // and the action drops to its own full-width line beneath — for actions that
-  // are too large to sit inline (a long input, a segmented control).
+  import { ListRow } from '../../vendor/ds/kits/app/src/index.ts'
   import type { Snippet } from 'svelte'
 
+  // Settings-specific slots retained for existing ui-kit consumers.
   interface Props {
     title: string
-    /** Secondary line under the title. */
     description?: string
-    /** Mono hint — a value, key, or id rendered in the data typeface. */
     hint?: string
-    /** Right-aligned (inline) or full-width-below (wide) action. */
     action?: Snippet
-    /** Full-width content beneath the row — editors, diffs, warnings. */
     below?: Snippet
-    /** Stack the action beneath the label block instead of inline-right. */
     wide?: boolean
     class?: string
   }
-  let {
-    title,
-    description,
-    hint,
-    action,
-    below,
-    wide = false,
-    class: klass = '',
-  }: Props = $props()
+  let { title, description, hint, action, below, wide = false, class: klass = '' }: Props = $props()
 </script>
 
-<div
-  data-wide={wide ? '' : undefined}
-  class={[
-    'px-3 py-2.5',
-    wide ? 'flex flex-col gap-2' : 'flex items-center gap-3',
-    klass,
-  ].join(' ')}
->
-  <div class={['flex min-w-0 items-baseline gap-2', wide ? '' : 'flex-1'].join(' ')}>
-    <div class="min-w-0">
-      <div class="flex items-baseline gap-2">
-        <span class="truncate text-[13px] text-fg-0">{title}</span>
-        {#if hint}
-          <span class="shrink-0 font-mono text-[11px] text-fg-2">{hint}</span>
-        {/if}
-      </div>
-      {#if description}
-        <p class="mt-0.5 text-[12px] leading-snug text-fg-2">{description}</p>
-      {/if}
-    </div>
-  </div>
-
-  {#if action}
-    <div class={['flex items-center gap-2', wide ? 'w-full' : 'shrink-0'].join(' ')}>
-      {@render action()}
-    </div>
+<div data-wide={wide ? '' : undefined} class={klass}>
+  <ListRow trailing={wide ? undefined : action}>
+    <span class="flex items-baseline gap-[var(--reddb-spatial-gap-md)]">
+      <span>{title}</span>
+      {#if hint}<span class="font-mono text-sm text-ink-muted">{hint}</span>{/if}
+    </span>
+    {#if description}<span class="text-sm text-ink-muted">{description}</span>{/if}
+  </ListRow>
+  {#if wide && action}
+    <div class="flex flex-col px-[var(--reddb-spatial-inset-md)] pb-[var(--reddb-spatial-inset-md)]">{@render action()}</div>
   {/if}
-
   {#if below}
-    <div class="w-full">{@render below()}</div>
+    <div class="w-full px-[var(--reddb-spatial-inset-md)] pb-[var(--reddb-spatial-inset-md)]">{@render below()}</div>
   {/if}
 </div>

package/src/lib/NodeBadge.svelte

@@ -1,18 +1,10 @@
 <script lang="ts">
-  type Role = 'primary' | 'replica' | 'embedded'
-  interface Props { role: Role; label?: string }
-  let { role, label }: Props = $props()
+  import { Badge } from '../../vendor/ds/kits/base/src/index.ts'
 
-  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]
-  )
+  // The legacy marker names a role, not reachability. Do not manufacture an
+  // online status to fit the DS NodeBadge's different domain contract.
+  interface Props { role: 'primary' | 'replica' | 'embedded'; label?: string }
+  let { role, label }: Props = $props()
 </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>
+<Badge tone="neutral">{label ?? role}</Badge>

package/src/lib/Pill.svelte

@@ -1,28 +1,10 @@
-<script lang="ts" module>
-  import { tv } from 'tailwind-variants'
-  // A small meta chip for counts/labels next to a heading — quieter than Badge
-  // (no uppercase/tracking), tuned for inline use beside a SectionHeading.
-  export const pill = tv({
-    base:
-      'inline-flex items-center gap-1 px-1.5 h-[18px] rounded-full text-[11px] ' +
-      'font-mono leading-none border',
-    variants: {
-      tone: {
-        muted: 'bg-bg-2 text-fg-2 border-line-2',
-        accent: 'bg-accent/15 text-accent border-accent/30',
-      },
-    },
-    defaultVariants: { tone: 'muted' },
-  })
-</script>
-
 <script lang="ts">
-  interface Props {
-    tone?: 'muted' | 'accent'
-    class?: string
-    children?: import('svelte').Snippet
-  }
-  let { tone = 'muted', class: klass = '', children }: Props = $props()
+  import { Pill } from '../../vendor/ds/kits/app/src/index.ts'
+  import type { ComponentProps } from 'svelte'
+  import { resolveTone, type LegacyTone } from './tone'
+
+  type Props = Omit<ComponentProps<typeof Pill>, 'tone'> & { tone?: LegacyTone }
+  let { tone = 'neutral', ...rest }: Props = $props()
 </script>
 
-<span class={pill({ tone, class: klass })}>{@render children?.()}</span>
+<Pill {...rest} tone={resolveTone(tone)} />

package/src/lib/SectionHeading.svelte

@@ -1,25 +1,12 @@
 <script lang="ts">
-  // A section title row: optional leading icon + title + optional trailing meta
-  // (typically a `Pill` count). Density-first — sits above a stack of ListRows.
-  import type { Snippet } from 'svelte'
+  import { SectionHeading } from '../../vendor/ds/kits/base/src/index.ts'
+  import type { ComponentProps, Snippet } from 'svelte'
 
-  interface Props {
-    title: string
-    /** Leading icon (e.g. a lucide component rendered in a snippet). */
-    icon?: Snippet
-    /** Trailing meta — usually a `Pill` with a count. */
-    meta?: Snippet
-    class?: string
-  }
-  let { title, icon, meta, class: klass = '' }: Props = $props()
+  type Props = ComponentProps<typeof SectionHeading> & { icon?: Snippet; meta?: Snippet }
+  let { icon, meta, actions = meta, rule = false, size = 'sm', class: klass, ...rest }: Props = $props()
 </script>
 
-<div class="flex items-center gap-2 {klass}">
-  {#if icon}
-    <span class="flex size-4 shrink-0 items-center justify-center text-fg-2">{@render icon()}</span>
-  {/if}
-  <h2 class="text-[11px] font-mono uppercase tracking-[0.1em] text-fg-2">{title}</h2>
-  {#if meta}
-    <span class="ml-0.5">{@render meta()}</span>
-  {/if}
+<div class="flex items-center gap-[var(--reddb-spatial-gap-md)] {klass ?? ''}">
+  {#if icon}<span aria-hidden="true" class="text-ink-muted">{@render icon()}</span>{/if}
+  <SectionHeading {...rest} {actions} {rule} {size} class="min-w-0 flex-1" />
 </div>

package/src/lib/index.ts

@@ -1,25 +1,14 @@
-// ui-kit is the alias layer over the vendored DS application Kit (ADR 0002 /
-// Brand ADR 0006 no-flag-day seam): call sites keep importing @reddb-io/ui-kit
-// while each export resolves to the DS component when compatible, or to the
-// local override when red-ui deliberately diverges (documented per export).
-export { Kbd, NavItem, SplitView } from "@reddb-io/kit-app";
-// Local overrides — each is a recorded divergence, reconciled at its own pace
-// (Brand ADR 0006: one diff per component, never a silent fork):
-// - Button: keeps the `danger` variant (Brand ships no feedback colors yet)
-//   and red-ui's ghost-default, denser sizing until the DS Density axis lands.
-// - LoadingState: red-ui's spinner respects prefers-reduced-motion
-//   (motion-safe:); the DS one does not yet — kept local, gap filed upstream.
-// - ListRow / SectionHeading / Pill / EmptyState: red-ui's slot/prop APIs
-//   (hint, wide, icon+meta, tone, action) drifted from the DS shape; kept
-//   local until mapped or upstreamed.
-// - Badge (tone) / Card (floating) / NodeBadge (label): same API drift —
-//   red-ui call sites use props the DS shapes don't carry; kept local until
-//   the call sites migrate to the DS API in their own slice.
+// Published compatibility facade. Every visual primitive delegates to the
+// pinned DS; new product code imports canonical DS subpaths directly.
+export {
+  Kbd,
+  LoadingIndicator as LoadingState,
+} from "../../vendor/ds/kits/base/src/index.ts";
+export { NavItem, SplitView } from "../../vendor/ds/kits/app/src/index.ts";
 export { default as Badge } from "./Badge.svelte";
 export { default as Card } from "./Card.svelte";
 export { default as NodeBadge } from "./NodeBadge.svelte";
 export { default as Button } from "./Button.svelte";
-export { default as LoadingState } from "./LoadingState.svelte";
 export { default as ListRow } from "./ListRow.svelte";
 export { default as SectionHeading } from "./SectionHeading.svelte";
 export { default as Pill } from "./Pill.svelte";

package/src/lib/tone.ts

@@ -0,0 +1,11 @@
+import type { Tone } from "../../vendor/ds/kits/base/src/index.ts";
+
+/** Compatibility for published ui-kit consumers; new code uses the DS vocabulary. */
+export type LegacyTone = Tone | "ok" | "warn" | "accent" | "muted";
+
+export function resolveTone(tone: LegacyTone): Tone {
+  if (tone === "ok") return "success";
+  if (tone === "warn") return "warning";
+  if (tone === "accent" || tone === "muted") return "neutral";
+  return tone;
+}

package/src/tokens/index.ts

@@ -1,21 +1,44 @@
 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
+  bg: {
+    0: "var(--reddb-color-background)",
+    1: "var(--reddb-color-elevation-base-surface)",
+    2: "var(--reddb-color-muted)",
+    3: "var(--reddb-color-elevation-raised-surface)",
+  },
+  fg: {
+    0: "var(--reddb-color-foreground)",
+    1: "var(--reddb-color-foreground)",
+    2: "var(--reddb-color-ink-muted)",
+    3: "var(--reddb-color-ink-muted)",
+  },
+  line: {
+    1: "var(--reddb-color-border-subtle)",
+    2: "var(--reddb-color-control-edge)",
+    3: "var(--reddb-color-border-strong)",
+  },
+  accent: "var(--reddb-color-primary)",
+  ok: "var(--reddb-color-feedback-success-foreground)",
+  warn: "var(--reddb-color-feedback-warning-foreground)",
+  danger: "var(--reddb-color-feedback-danger-foreground)",
+  info: "var(--reddb-color-feedback-info-foreground)",
+  role: {
+    primary: "var(--reddb-color-primary)",
+    replica: "var(--reddb-color-feedback-info-foreground)",
+    embedded: "var(--reddb-color-feedback-success-foreground)",
+  },
+} as const;
 
-export const radius = { sm: '4px', md: '6px', lg: '10px', xl: '14px' } as const
+export const radius = {
+  sm: "var(--reddb-radius-sm)",
+  md: "var(--reddb-radius-md)",
+  lg: "var(--reddb-radius-lg)",
+  xl: "var(--reddb-radius-xl)",
+} as const;
 export const font = {
-  sans: "'InterVariable', 'Inter Tight', 'Inter', system-ui, sans-serif",
-  mono: "'JetBrains Mono', 'Berkeley Mono', ui-monospace, monospace",
-} as const
+  sans: "var(--reddb-font-family-sans)",
+  mono: "var(--reddb-font-family-mono)",
+} 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
+  out: "var(--reddb-easing-entrance)",
+  snap: "var(--reddb-easing-entrance)",
+} as const;

package/src/tokens/styles.css

@@ -0,0 +1,4 @@
+@import "../../vendor/ds/styles/all.css";
+@import "./tokens.css";
+@source "../lib";
+@source "../../vendor/ds/kits";