@ktbsh/ui 0.1.0

package/dist/react/tabs.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/tabs.js';
+
+export const KitbashTabs = React.forwardRef(({ children, onKitbashChange, ...props }, ref) => {
+  const innerRef = React.useRef(null);
+
+  // kitbash-change is a CustomEvent — bridge manually. Native events (onClick, etc.)
+  // stay on ...props so React 19 binds them once (no double-fire).
+  React.useEffect(() => {
+    const el = innerRef.current;
+    if (!el || !onKitbashChange) return;
+
+    const handleCustomChange = (e) => onKitbashChange(e);
+    el.addEventListener('kitbash-change', handleCustomChange);
+    return () => el.removeEventListener('kitbash-change', handleCustomChange);
+  }, [onKitbashChange]);
+
+  // Callback ref: assign + clear on unmount / ref change (object + function refs).
+  const setRefs = React.useCallback((node) => {
+    innerRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref && typeof ref === 'object') {
+      ref.current = node;
+    }
+  }, [ref]);
+
+  return React.createElement('kitbash-tabs', { ref: setRefs, ...props }, children);
+});

package/dist/react/text.d.ts

@@ -0,0 +1,19 @@
+
+import * as React from 'react';
+
+export interface KitbashTextProps extends React.HTMLAttributes<HTMLElement> {
+  'size'?: string;
+  'tone'?: string;
+  'weight'?: string;
+  onKitbashChange?: (event: CustomEvent<{ props: Record<string, unknown>; state: Record<string, unknown> }>) => void;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kitbash-text': KitbashTextProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export declare const KitbashText: React.ForwardRefExoticComponent<KitbashTextProps & React.RefAttributes<HTMLElement>>;

package/dist/react/text.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/text.js';
+
+export const KitbashText = React.forwardRef(({ children, onKitbashChange, ...props }, ref) => {
+  const innerRef = React.useRef(null);
+
+  // kitbash-change is a CustomEvent — bridge manually. Native events (onClick, etc.)
+  // stay on ...props so React 19 binds them once (no double-fire).
+  React.useEffect(() => {
+    const el = innerRef.current;
+    if (!el || !onKitbashChange) return;
+
+    const handleCustomChange = (e) => onKitbashChange(e);
+    el.addEventListener('kitbash-change', handleCustomChange);
+    return () => el.removeEventListener('kitbash-change', handleCustomChange);
+  }, [onKitbashChange]);
+
+  // Callback ref: assign + clear on unmount / ref change (object + function refs).
+  const setRefs = React.useCallback((node) => {
+    innerRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref && typeof ref === 'object') {
+      ref.current = node;
+    }
+  }, [ref]);
+
+  return React.createElement('kitbash-text', { ref: setRefs, ...props }, children);
+});

package/dist/react/textarea.d.ts

@@ -0,0 +1,24 @@
+
+import * as React from 'react';
+
+export interface KitbashTextareaProps extends React.HTMLAttributes<HTMLElement> {
+  'name'?: string;
+  'value'?: string;
+  'placeholder'?: string;
+  'rows'?: number;
+  'required'?: boolean;
+  'invalid'?: boolean;
+  'disabled'?: boolean;
+  'readonly'?: boolean;
+  onKitbashChange?: (event: CustomEvent<{ props: Record<string, unknown>; state: Record<string, unknown> }>) => void;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kitbash-textarea': KitbashTextareaProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export declare const KitbashTextarea: React.ForwardRefExoticComponent<KitbashTextareaProps & React.RefAttributes<HTMLElement>>;

package/dist/react/textarea.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/textarea.js';
+
+export const KitbashTextarea = React.forwardRef(({ children, onKitbashChange, ...props }, ref) => {
+  const innerRef = React.useRef(null);
+
+  // kitbash-change is a CustomEvent — bridge manually. Native events (onClick, etc.)
+  // stay on ...props so React 19 binds them once (no double-fire).
+  React.useEffect(() => {
+    const el = innerRef.current;
+    if (!el || !onKitbashChange) return;
+
+    const handleCustomChange = (e) => onKitbashChange(e);
+    el.addEventListener('kitbash-change', handleCustomChange);
+    return () => el.removeEventListener('kitbash-change', handleCustomChange);
+  }, [onKitbashChange]);
+
+  // Callback ref: assign + clear on unmount / ref change (object + function refs).
+  const setRefs = React.useCallback((node) => {
+    innerRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref && typeof ref === 'object') {
+      ref.current = node;
+    }
+  }, [ref]);
+
+  return React.createElement('kitbash-textarea', { ref: setRefs, ...props }, children);
+});

package/dist/react/toast.d.ts

@@ -0,0 +1,19 @@
+
+import * as React from 'react';
+
+export interface KitbashToastProps extends React.HTMLAttributes<HTMLElement> {
+  'open'?: boolean;
+  'tone'?: string;
+  'title'?: string;
+  onKitbashChange?: (event: CustomEvent<{ props: Record<string, unknown>; state: Record<string, unknown> }>) => void;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kitbash-toast': KitbashToastProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export declare const KitbashToast: React.ForwardRefExoticComponent<KitbashToastProps & React.RefAttributes<HTMLElement>>;

package/dist/react/toast.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/toast.js';
+
+export const KitbashToast = React.forwardRef(({ children, onKitbashChange, ...props }, ref) => {
+  const innerRef = React.useRef(null);
+
+  // kitbash-change is a CustomEvent — bridge manually. Native events (onClick, etc.)
+  // stay on ...props so React 19 binds them once (no double-fire).
+  React.useEffect(() => {
+    const el = innerRef.current;
+    if (!el || !onKitbashChange) return;
+
+    const handleCustomChange = (e) => onKitbashChange(e);
+    el.addEventListener('kitbash-change', handleCustomChange);
+    return () => el.removeEventListener('kitbash-change', handleCustomChange);
+  }, [onKitbashChange]);
+
+  // Callback ref: assign + clear on unmount / ref change (object + function refs).
+  const setRefs = React.useCallback((node) => {
+    innerRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref && typeof ref === 'object') {
+      ref.current = node;
+    }
+  }, [ref]);
+
+  return React.createElement('kitbash-toast', { ref: setRefs, ...props }, children);
+});

package/dist/themes/dark.css

@@ -0,0 +1,52 @@
+/**
+ * GENERATED FILE — do not edit by hand.
+ * Source: src/tokens/semantic.ts
+ * Regenerate: bun run tokens:build
+ */
+:root[data-theme="dark"] {
+  --kb-color-bg-canvas: #0d1117;
+  --kb-color-bg-surface: #161b22;
+  --kb-color-bg-subtle: #21262d;
+  --kb-color-bg-inverse: #e6edf3;
+  --kb-color-fg-default: #e6edf3;
+  --kb-color-fg-muted: #8b949e;
+  --kb-color-fg-subtle: #6e7681;
+  --kb-color-fg-on-accent: #ffffff;
+  --kb-color-fg-on-inverse: #0d1117;
+  --kb-color-border-default: #30363d;
+  --kb-color-border-muted: #21262d;
+  --kb-color-border-focus: #2f81f7;
+  --kb-color-accent-default: #2f81f7;
+  --kb-color-accent-hover: #58a6ff;
+  --kb-color-accent-subtle: #121d2f;
+  --kb-color-danger-default: #f85149;
+  --kb-color-danger-subtle: #2d1214;
+  --kb-color-success-default: #3fb950;
+  --kb-color-success-subtle: #12261e;
+  --kb-color-warning-default: #d29922;
+  --kb-color-warning-subtle: #2a2111;
+  --kb-space-2xs: 2px;
+  --kb-space-xs: 4px;
+  --kb-space-sm: 8px;
+  --kb-space-md: 16px;
+  --kb-space-lg: 24px;
+  --kb-space-xl: 32px;
+  --kb-space-2xl: 48px;
+  --kb-radius-sm: 4px;
+  --kb-radius-md: 8px;
+  --kb-radius-lg: 12px;
+  --kb-radius-full: 9999px;
+  --kb-font-family-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --kb-font-size-sm: 0.875rem;
+  --kb-font-size-md: 1rem;
+  --kb-font-size-lg: 1.125rem;
+  --kb-font-size-xl: 1.25rem;
+  --kb-font-weight-regular: 400;
+  --kb-font-weight-medium: 500;
+  --kb-font-weight-semibold: 600;
+  --kb-line-height-tight: 1.25;
+  --kb-line-height-normal: 1.5;
+  --kb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --kb-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
+  --kb-focus-ring: 0 0 0 3px rgba(47, 129, 247, 0.45);
+}

package/dist/themes/light.css

@@ -0,0 +1,53 @@
+/**
+ * GENERATED FILE — do not edit by hand.
+ * Source: src/tokens/semantic.ts
+ * Regenerate: bun run tokens:build
+ */
+:root,
+:root[data-theme="light"] {
+  --kb-color-bg-canvas: #ffffff;
+  --kb-color-bg-surface: #f6f8fa;
+  --kb-color-bg-subtle: #eef1f4;
+  --kb-color-bg-inverse: #1f2328;
+  --kb-color-fg-default: #1f2328;
+  --kb-color-fg-muted: #656d76;
+  --kb-color-fg-subtle: #8c959f;
+  --kb-color-fg-on-accent: #ffffff;
+  --kb-color-fg-on-inverse: #ffffff;
+  --kb-color-border-default: #d0d7de;
+  --kb-color-border-muted: #e6ebf0;
+  --kb-color-border-focus: #0969da;
+  --kb-color-accent-default: #0969da;
+  --kb-color-accent-hover: #0860ca;
+  --kb-color-accent-subtle: #ddf4ff;
+  --kb-color-danger-default: #cf222e;
+  --kb-color-danger-subtle: #ffebe9;
+  --kb-color-success-default: #1a7f37;
+  --kb-color-success-subtle: #dafbe1;
+  --kb-color-warning-default: #9a6700;
+  --kb-color-warning-subtle: #fff8c5;
+  --kb-space-2xs: 2px;
+  --kb-space-xs: 4px;
+  --kb-space-sm: 8px;
+  --kb-space-md: 16px;
+  --kb-space-lg: 24px;
+  --kb-space-xl: 32px;
+  --kb-space-2xl: 48px;
+  --kb-radius-sm: 4px;
+  --kb-radius-md: 8px;
+  --kb-radius-lg: 12px;
+  --kb-radius-full: 9999px;
+  --kb-font-family-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --kb-font-size-sm: 0.875rem;
+  --kb-font-size-md: 1rem;
+  --kb-font-size-lg: 1.125rem;
+  --kb-font-size-xl: 1.25rem;
+  --kb-font-weight-regular: 400;
+  --kb-font-weight-medium: 500;
+  --kb-font-weight-semibold: 600;
+  --kb-line-height-tight: 1.25;
+  --kb-line-height-normal: 1.5;
+  --kb-shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.08);
+  --kb-shadow-md: 0 4px 12px rgba(31, 35, 40, 0.1);
+  --kb-focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.35);
+}

package/dist/tokens/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Public token / theme API for @ktbsh/ui consumers and docs.
+ * Import theme CSS in the app (or Storybook) so variables resolve:
+ *   import '@ktbsh/ui/themes/light.css'
+ *   import '@ktbsh/ui/themes/dark.css'
+ */
+export { applyTheme, cssVar, cssVarName, getTheme, type KitbashTheme, type SemanticTokenName, semanticTokens, type TokenValue, } from './semantic.ts';

package/dist/tokens/index.js

@@ -0,0 +1,7 @@
+/**
+ * Public token / theme API for @ktbsh/ui consumers and docs.
+ * Import theme CSS in the app (or Storybook) so variables resolve:
+ *   import '@ktbsh/ui/themes/light.css'
+ *   import '@ktbsh/ui/themes/dark.css'
+ */
+export { applyTheme, cssVar, cssVarName, getTheme, semanticTokens, } from "./semantic.js";

package/dist/tokens/semantic.d.ts

@@ -0,0 +1,209 @@
+/**
+ * Design tokens — single source of truth for names and light/dark values.
+ * CSS themes + kitbash `tokens.json` are generated from this module.
+ *
+ * CSS custom property for key `color-bg-canvas` → `--kb-color-bg-canvas`
+ */
+export type KitbashTheme = 'light' | 'dark';
+export type TokenValue = {
+    readonly light: string;
+    readonly dark: string;
+};
+/**
+ * Flat semantic map. Keys are stable public IDs (kebab after `--kb-`).
+ * Prefer semantic roles over raw brand names in components.
+ */
+export declare const semanticTokens: {
+    readonly 'color-bg-canvas': {
+        readonly light: "#ffffff";
+        readonly dark: "#0d1117";
+    };
+    readonly 'color-bg-surface': {
+        readonly light: "#f6f8fa";
+        readonly dark: "#161b22";
+    };
+    readonly 'color-bg-subtle': {
+        readonly light: "#eef1f4";
+        readonly dark: "#21262d";
+    };
+    readonly 'color-bg-inverse': {
+        readonly light: "#1f2328";
+        readonly dark: "#e6edf3";
+    };
+    readonly 'color-fg-default': {
+        readonly light: "#1f2328";
+        readonly dark: "#e6edf3";
+    };
+    readonly 'color-fg-muted': {
+        readonly light: "#656d76";
+        readonly dark: "#8b949e";
+    };
+    readonly 'color-fg-subtle': {
+        readonly light: "#8c959f";
+        readonly dark: "#6e7681";
+    };
+    readonly 'color-fg-on-accent': {
+        readonly light: "#ffffff";
+        readonly dark: "#ffffff";
+    };
+    readonly 'color-fg-on-inverse': {
+        readonly light: "#ffffff";
+        readonly dark: "#0d1117";
+    };
+    readonly 'color-border-default': {
+        readonly light: "#d0d7de";
+        readonly dark: "#30363d";
+    };
+    readonly 'color-border-muted': {
+        readonly light: "#e6ebf0";
+        readonly dark: "#21262d";
+    };
+    readonly 'color-border-focus': {
+        readonly light: "#0969da";
+        readonly dark: "#2f81f7";
+    };
+    readonly 'color-accent-default': {
+        readonly light: "#0969da";
+        readonly dark: "#2f81f7";
+    };
+    readonly 'color-accent-hover': {
+        readonly light: "#0860ca";
+        readonly dark: "#58a6ff";
+    };
+    readonly 'color-accent-subtle': {
+        readonly light: "#ddf4ff";
+        readonly dark: "#121d2f";
+    };
+    readonly 'color-danger-default': {
+        readonly light: "#cf222e";
+        readonly dark: "#f85149";
+    };
+    readonly 'color-danger-subtle': {
+        readonly light: "#ffebe9";
+        readonly dark: "#2d1214";
+    };
+    readonly 'color-success-default': {
+        readonly light: "#1a7f37";
+        readonly dark: "#3fb950";
+    };
+    readonly 'color-success-subtle': {
+        readonly light: "#dafbe1";
+        readonly dark: "#12261e";
+    };
+    readonly 'color-warning-default': {
+        readonly light: "#9a6700";
+        readonly dark: "#d29922";
+    };
+    readonly 'color-warning-subtle': {
+        readonly light: "#fff8c5";
+        readonly dark: "#2a2111";
+    };
+    readonly 'space-2xs': {
+        readonly light: "2px";
+        readonly dark: "2px";
+    };
+    readonly 'space-xs': {
+        readonly light: "4px";
+        readonly dark: "4px";
+    };
+    readonly 'space-sm': {
+        readonly light: "8px";
+        readonly dark: "8px";
+    };
+    readonly 'space-md': {
+        readonly light: "16px";
+        readonly dark: "16px";
+    };
+    readonly 'space-lg': {
+        readonly light: "24px";
+        readonly dark: "24px";
+    };
+    readonly 'space-xl': {
+        readonly light: "32px";
+        readonly dark: "32px";
+    };
+    readonly 'space-2xl': {
+        readonly light: "48px";
+        readonly dark: "48px";
+    };
+    readonly 'radius-sm': {
+        readonly light: "4px";
+        readonly dark: "4px";
+    };
+    readonly 'radius-md': {
+        readonly light: "8px";
+        readonly dark: "8px";
+    };
+    readonly 'radius-lg': {
+        readonly light: "12px";
+        readonly dark: "12px";
+    };
+    readonly 'radius-full': {
+        readonly light: "9999px";
+        readonly dark: "9999px";
+    };
+    readonly 'font-family-sans': {
+        readonly light: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+        readonly dark: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+    };
+    readonly 'font-size-sm': {
+        readonly light: "0.875rem";
+        readonly dark: "0.875rem";
+    };
+    readonly 'font-size-md': {
+        readonly light: "1rem";
+        readonly dark: "1rem";
+    };
+    readonly 'font-size-lg': {
+        readonly light: "1.125rem";
+        readonly dark: "1.125rem";
+    };
+    readonly 'font-size-xl': {
+        readonly light: "1.25rem";
+        readonly dark: "1.25rem";
+    };
+    readonly 'font-weight-regular': {
+        readonly light: "400";
+        readonly dark: "400";
+    };
+    readonly 'font-weight-medium': {
+        readonly light: "500";
+        readonly dark: "500";
+    };
+    readonly 'font-weight-semibold': {
+        readonly light: "600";
+        readonly dark: "600";
+    };
+    readonly 'line-height-tight': {
+        readonly light: "1.25";
+        readonly dark: "1.25";
+    };
+    readonly 'line-height-normal': {
+        readonly light: "1.5";
+        readonly dark: "1.5";
+    };
+    readonly 'shadow-sm': {
+        readonly light: "0 1px 2px rgba(31, 35, 40, 0.08)";
+        readonly dark: "0 1px 2px rgba(0, 0, 0, 0.4)";
+    };
+    readonly 'shadow-md': {
+        readonly light: "0 4px 12px rgba(31, 35, 40, 0.1)";
+        readonly dark: "0 4px 16px rgba(0, 0, 0, 0.45)";
+    };
+    readonly 'focus-ring': {
+        readonly light: "0 0 0 3px rgba(9, 105, 218, 0.35)";
+        readonly dark: "0 0 0 3px rgba(47, 129, 247, 0.45)";
+    };
+};
+export type SemanticTokenName = keyof typeof semanticTokens;
+/** CSS custom property name, e.g. `--kb-color-bg-canvas`. */
+export declare function cssVarName(token: SemanticTokenName): `--kb-${SemanticTokenName}`;
+/** `var(--kb-…)` reference for use in component styles. */
+export declare function cssVar(token: SemanticTokenName): string;
+/**
+ * Apply theme on an element (default: document root in browsers).
+ * No-op without a DOM root (SSR) unless `root` is passed explicitly.
+ */
+export declare function applyTheme(theme: KitbashTheme, root?: HTMLElement): void;
+/** Defaults to `light` when no DOM / no data-theme (SSR-safe). */
+export declare function getTheme(root?: HTMLElement): KitbashTheme;

package/dist/tokens/semantic.js

@@ -0,0 +1,102 @@
+/**
+ * Design tokens — single source of truth for names and light/dark values.
+ * CSS themes + kitbash `tokens.json` are generated from this module.
+ *
+ * CSS custom property for key `color-bg-canvas` → `--kb-color-bg-canvas`
+ */
+/**
+ * Flat semantic map. Keys are stable public IDs (kebab after `--kb-`).
+ * Prefer semantic roles over raw brand names in components.
+ */
+export const semanticTokens = {
+    /* Color — surfaces */
+    'color-bg-canvas': { light: '#ffffff', dark: '#0d1117' },
+    'color-bg-surface': { light: '#f6f8fa', dark: '#161b22' },
+    'color-bg-subtle': { light: '#eef1f4', dark: '#21262d' },
+    'color-bg-inverse': { light: '#1f2328', dark: '#e6edf3' },
+    /* Color — foreground */
+    'color-fg-default': { light: '#1f2328', dark: '#e6edf3' },
+    'color-fg-muted': { light: '#656d76', dark: '#8b949e' },
+    'color-fg-subtle': { light: '#8c959f', dark: '#6e7681' },
+    'color-fg-on-accent': { light: '#ffffff', dark: '#ffffff' },
+    'color-fg-on-inverse': { light: '#ffffff', dark: '#0d1117' },
+    /* Color — border */
+    'color-border-default': { light: '#d0d7de', dark: '#30363d' },
+    'color-border-muted': { light: '#e6ebf0', dark: '#21262d' },
+    'color-border-focus': { light: '#0969da', dark: '#2f81f7' },
+    /* Color — accent / status */
+    'color-accent-default': { light: '#0969da', dark: '#2f81f7' },
+    'color-accent-hover': { light: '#0860ca', dark: '#58a6ff' },
+    'color-accent-subtle': { light: '#ddf4ff', dark: '#121d2f' },
+    'color-danger-default': { light: '#cf222e', dark: '#f85149' },
+    'color-danger-subtle': { light: '#ffebe9', dark: '#2d1214' },
+    'color-success-default': { light: '#1a7f37', dark: '#3fb950' },
+    'color-success-subtle': { light: '#dafbe1', dark: '#12261e' },
+    'color-warning-default': { light: '#9a6700', dark: '#d29922' },
+    'color-warning-subtle': { light: '#fff8c5', dark: '#2a2111' },
+    /* Space */
+    'space-2xs': { light: '2px', dark: '2px' },
+    'space-xs': { light: '4px', dark: '4px' },
+    'space-sm': { light: '8px', dark: '8px' },
+    'space-md': { light: '16px', dark: '16px' },
+    'space-lg': { light: '24px', dark: '24px' },
+    'space-xl': { light: '32px', dark: '32px' },
+    'space-2xl': { light: '48px', dark: '48px' },
+    /* Radius */
+    'radius-sm': { light: '4px', dark: '4px' },
+    'radius-md': { light: '8px', dark: '8px' },
+    'radius-lg': { light: '12px', dark: '12px' },
+    'radius-full': { light: '9999px', dark: '9999px' },
+    /* Typography */
+    'font-family-sans': {
+        light: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        dark: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    },
+    'font-size-sm': { light: '0.875rem', dark: '0.875rem' },
+    'font-size-md': { light: '1rem', dark: '1rem' },
+    'font-size-lg': { light: '1.125rem', dark: '1.125rem' },
+    'font-size-xl': { light: '1.25rem', dark: '1.25rem' },
+    'font-weight-regular': { light: '400', dark: '400' },
+    'font-weight-medium': { light: '500', dark: '500' },
+    'font-weight-semibold': { light: '600', dark: '600' },
+    'line-height-tight': { light: '1.25', dark: '1.25' },
+    'line-height-normal': { light: '1.5', dark: '1.5' },
+    /* Elevation / focus */
+    'shadow-sm': {
+        light: '0 1px 2px rgba(31, 35, 40, 0.08)',
+        dark: '0 1px 2px rgba(0, 0, 0, 0.4)',
+    },
+    'shadow-md': {
+        light: '0 4px 12px rgba(31, 35, 40, 0.1)',
+        dark: '0 4px 16px rgba(0, 0, 0, 0.45)',
+    },
+    'focus-ring': {
+        light: '0 0 0 3px rgba(9, 105, 218, 0.35)',
+        dark: '0 0 0 3px rgba(47, 129, 247, 0.45)',
+    },
+};
+/** CSS custom property name, e.g. `--kb-color-bg-canvas`. */
+export function cssVarName(token) {
+    return `--kb-${token}`;
+}
+/** `var(--kb-…)` reference for use in component styles. */
+export function cssVar(token) {
+    return `var(${cssVarName(token)})`;
+}
+/**
+ * Apply theme on an element (default: document root in browsers).
+ * No-op without a DOM root (SSR) unless `root` is passed explicitly.
+ */
+export function applyTheme(theme, root) {
+    const el = root ??
+        (typeof document !== 'undefined' ? document.documentElement : undefined);
+    if (el) {
+        el.dataset.theme = theme;
+    }
+}
+/** Defaults to `light` when no DOM / no data-theme (SSR-safe). */
+export function getTheme(root) {
+    const el = root ??
+        (typeof document !== 'undefined' ? document.documentElement : undefined);
+    return el?.dataset.theme === 'dark' ? 'dark' : 'light';
+}

package/dist/types/index.d.ts

@@ -0,0 +1,15 @@
+/** Shared public unions for @ktbsh/ui components and consumer DX. */
+export type KitbashSize = 'sm' | 'md' | 'lg';
+export type KitbashButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type KitbashBadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
+export type KitbashLinkTone = 'default' | 'muted' | 'accent';
+/** Spacing token keys used by layout (maps to --kb-space-*). */
+export type KitbashSpace = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type KitbashStackDirection = 'row' | 'column';
+export type KitbashStackAlign = 'start' | 'center' | 'end' | 'stretch';
+export type KitbashStackJustify = 'start' | 'center' | 'end' | 'between' | 'around';
+export type KitbashTextTone = 'default' | 'muted' | 'subtle' | 'accent' | 'danger';
+export type KitbashHeadingLevel = '1' | '2' | '3' | '4' | '5' | '6';
+export type KitbashContainerWidth = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type KitbashFeedbackTone = 'info' | 'success' | 'warning' | 'danger';
+export type KitbashSkeletonVariant = 'text' | 'rect' | 'circle';

package/dist/types/index.js

@@ -0,0 +1,2 @@
+/** Shared public unions for @ktbsh/ui components and consumer DX. */
+export {};

package/dist/vanilla/alert.d.ts

@@ -0,0 +1,2 @@
+/** Side-effect import — registers the custom element. */
+export {};