@ktbsh/ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Public package entry for `@ktbsh/ui`.
+ *
+ * Components are **side-effect imports** (custom element registration):
+ *   import '@ktbsh/ui/vanilla/button'
+ *   import { KitbashButton } from '@ktbsh/ui/react/button'
+ *
+ * Theme CSS (load once in the app shell):
+ *   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 './tokens/index.ts';
+export type { KitbashBadgeTone, KitbashButtonVariant, KitbashContainerWidth, KitbashFeedbackTone, KitbashHeadingLevel, KitbashLinkTone, KitbashSize, KitbashSkeletonVariant, KitbashSpace, KitbashStackAlign, KitbashStackDirection, KitbashStackJustify, KitbashTextTone, } from './types/index.ts';

package/dist/index.js

@@ -0,0 +1,12 @@
+/**
+ * Public package entry for `@ktbsh/ui`.
+ *
+ * Components are **side-effect imports** (custom element registration):
+ *   import '@ktbsh/ui/vanilla/button'
+ *   import { KitbashButton } from '@ktbsh/ui/react/button'
+ *
+ * Theme CSS (load once in the app shell):
+ *   import '@ktbsh/ui/themes/light.css'
+ *   import '@ktbsh/ui/themes/dark.css'
+ */
+export { applyTheme, cssVar, cssVarName, getTheme, semanticTokens, } from "./tokens/index.js";

package/dist/react/alert.d.ts

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

package/dist/react/alert.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/alert.js';
+
+export const KitbashAlert = 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-alert', { ref: setRefs, ...props }, children);
+});

package/dist/react/badge.d.ts

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

package/dist/react/badge.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/badge.js';
+
+export const KitbashBadge = 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-badge', { ref: setRefs, ...props }, children);
+});

package/dist/react/box.d.ts

@@ -0,0 +1,22 @@
+
+import * as React from 'react';
+
+export interface KitbashBoxProps extends React.HTMLAttributes<HTMLElement> {
+  'padding'?: string;
+  'paddingX'?: string;
+  'paddingY'?: string;
+  'radius'?: string;
+  'border'?: boolean;
+  'surface'?: boolean;
+  onKitbashChange?: (event: CustomEvent<{ props: Record<string, unknown>; state: Record<string, unknown> }>) => void;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kitbash-box': KitbashBoxProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export declare const KitbashBox: React.ForwardRefExoticComponent<KitbashBoxProps & React.RefAttributes<HTMLElement>>;

package/dist/react/box.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/box.js';
+
+export const KitbashBox = 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-box', { ref: setRefs, ...props }, children);
+});

package/dist/react/breadcrumb.d.ts

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

package/dist/react/breadcrumb.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/breadcrumb.js';
+
+export const KitbashBreadcrumb = 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-breadcrumb', { ref: setRefs, ...props }, children);
+});

package/dist/react/button.d.ts

@@ -0,0 +1,20 @@
+
+import * as React from 'react';
+
+export interface KitbashButtonProps extends React.HTMLAttributes<HTMLElement> {
+  'variant'?: string;
+  'size'?: string;
+  'disabled'?: boolean;
+  'type'?: string;
+  onKitbashChange?: (event: CustomEvent<{ props: Record<string, unknown>; state: Record<string, unknown> }>) => void;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kitbash-button': KitbashButtonProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export declare const KitbashButton: React.ForwardRefExoticComponent<KitbashButtonProps & React.RefAttributes<HTMLElement>>;

package/dist/react/button.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/button.js';
+
+export const KitbashButton = 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-button', { ref: setRefs, ...props }, children);
+});

package/dist/react/checkbox.d.ts

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

package/dist/react/checkbox.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/checkbox.js';
+
+export const KitbashCheckbox = 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-checkbox', { ref: setRefs, ...props }, children);
+});

package/dist/react/container.d.ts

@@ -0,0 +1,18 @@
+
+import * as React from 'react';
+
+export interface KitbashContainerProps extends React.HTMLAttributes<HTMLElement> {
+  'width'?: string;
+  'padding'?: string;
+  onKitbashChange?: (event: CustomEvent<{ props: Record<string, unknown>; state: Record<string, unknown> }>) => void;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kitbash-container': KitbashContainerProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export declare const KitbashContainer: React.ForwardRefExoticComponent<KitbashContainerProps & React.RefAttributes<HTMLElement>>;

package/dist/react/container.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/container.js';
+
+export const KitbashContainer = 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-container', { ref: setRefs, ...props }, children);
+});

package/dist/react/field.d.ts

@@ -0,0 +1,20 @@
+
+import * as React from 'react';
+
+export interface KitbashFieldProps extends React.HTMLAttributes<HTMLElement> {
+  'label'?: string;
+  'hint'?: string;
+  'error'?: string;
+  'required'?: boolean;
+  onKitbashChange?: (event: CustomEvent<{ props: Record<string, unknown>; state: Record<string, unknown> }>) => void;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kitbash-field': KitbashFieldProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export declare const KitbashField: React.ForwardRefExoticComponent<KitbashFieldProps & React.RefAttributes<HTMLElement>>;

package/dist/react/field.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/field.js';
+
+export const KitbashField = 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-field', { ref: setRefs, ...props }, children);
+});

package/dist/react/heading.d.ts

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

package/dist/react/heading.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/heading.js';
+
+export const KitbashHeading = 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-heading', { ref: setRefs, ...props }, children);
+});

package/dist/react/input.d.ts

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

package/dist/react/input.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/input.js';
+
+export const KitbashInput = 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-input', { ref: setRefs, ...props }, children);
+});

package/dist/react/label.d.ts

@@ -0,0 +1,18 @@
+
+import * as React from 'react';
+
+export interface KitbashLabelProps extends React.HTMLAttributes<HTMLElement> {
+  'for'?: string;
+  'required'?: boolean;
+  onKitbashChange?: (event: CustomEvent<{ props: Record<string, unknown>; state: Record<string, unknown> }>) => void;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kitbash-label': KitbashLabelProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export declare const KitbashLabel: React.ForwardRefExoticComponent<KitbashLabelProps & React.RefAttributes<HTMLElement>>;

package/dist/react/label.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/label.js';
+
+export const KitbashLabel = 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-label', { ref: setRefs, ...props }, children);
+});

package/dist/react/link.d.ts

@@ -0,0 +1,21 @@
+
+import * as React from 'react';
+
+export interface KitbashLinkProps extends React.HTMLAttributes<HTMLElement> {
+  'href'?: string;
+  'target'?: string;
+  'rel'?: string;
+  'tone'?: string;
+  'disabled'?: boolean;
+  onKitbashChange?: (event: CustomEvent<{ props: Record<string, unknown>; state: Record<string, unknown> }>) => void;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kitbash-link': KitbashLinkProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export declare const KitbashLink: React.ForwardRefExoticComponent<KitbashLinkProps & React.RefAttributes<HTMLElement>>;

package/dist/react/link.js

@@ -0,0 +1,30 @@
+
+import * as React from 'react';
+import '../vanilla/link.js';
+
+export const KitbashLink = 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-link', { ref: setRefs, ...props }, children);
+});