@brika/ui-kit 0.3.0

package/src/nodes/select.ts

@@ -0,0 +1,44 @@
+import type { ActionHandler, BaseNode } from './_shared';
+import { resolveAction } from './_shared';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectNode extends BaseNode {
+  type: 'select';
+  /** Currently selected value */
+  value: string;
+  /** Available options */
+  options: SelectOption[];
+  /** Optional label above the select */
+  label?: string;
+  /** Placeholder when no value selected */
+  placeholder?: string;
+  /** Action dispatched when selection changes */
+  onChange: string;
+  /** Disable the select */
+  disabled?: boolean;
+  /** Lucide icon name */
+  icon?: string;
+}
+
+export function Select(props: {
+  value: string;
+  options: SelectOption[];
+  label?: string;
+  placeholder?: string;
+  onChange: ActionHandler;
+  disabled?: boolean;
+  icon?: string;
+}): SelectNode {
+  const { onChange, ...rest } = props;
+  return { type: 'select', ...rest, onChange: resolveAction(onChange) };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    select: SelectNode;
+  }
+}

package/src/nodes/skeleton.ts

@@ -0,0 +1,23 @@
+import type { BaseNode } from './_shared';
+
+export interface SkeletonNode extends BaseNode {
+  type: 'skeleton';
+  /** Shape of the skeleton placeholder */
+  variant: 'text' | 'circle' | 'rect';
+  /** Width (CSS value, e.g. "100%", "80px") */
+  width?: string;
+  /** Height (CSS value) */
+  height?: string;
+  /** Number of lines (for 'text' variant) */
+  lines?: number;
+}
+
+export function Skeleton(props: Omit<SkeletonNode, 'type'>): SkeletonNode {
+  return { type: 'skeleton', ...props };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    skeleton: SkeletonNode;
+  }
+}

package/src/nodes/slider.ts

@@ -0,0 +1,40 @@
+import type { ColorValue } from '../colors';
+import type { ActionHandler, BaseNode } from './_shared';
+import { resolveAction } from './_shared';
+
+export interface SliderNode extends BaseNode {
+  type: 'slider';
+  label?: string;
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  unit?: string;
+  onChange: string;
+  icon?: string;
+  color?: ColorValue;
+  /** Disable the slider */
+  disabled?: boolean;
+}
+
+export function Slider(props: {
+  label?: string;
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  unit?: string;
+  onChange: ActionHandler;
+  icon?: string;
+  color?: ColorValue;
+  disabled?: boolean;
+}): SliderNode {
+  const { onChange, ...rest } = props;
+  return { type: 'slider', ...rest, onChange: resolveAction(onChange) };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    slider: SliderNode;
+  }
+}

package/src/nodes/spacer.ts

@@ -0,0 +1,17 @@
+import type { BaseNode } from './_shared';
+
+export interface SpacerNode extends BaseNode {
+  type: 'spacer';
+  /** Fixed size. When omitted, spacer flexes to fill available space. */
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function Spacer(props?: { size?: 'sm' | 'md' | 'lg' }): SpacerNode {
+  return { type: 'spacer', ...props };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    spacer: SpacerNode;
+  }
+}

package/src/nodes/stat-value.ts

@@ -0,0 +1,26 @@
+import type { ColorValue } from '../colors';
+import type { BaseNode } from './_shared';
+
+export interface StatValueNode extends BaseNode {
+  type: 'stat-value';
+  label: string;
+  value: number | string;
+  unit?: string;
+  icon?: string;
+  trend?: 'up' | 'down' | 'flat';
+  color?: ColorValue;
+  /** Display value of the trend change (e.g. "+5.2%") */
+  trendValue?: string;
+  /** Sub-label / description below the value */
+  description?: string;
+}
+
+export function Stat(props: Omit<StatValueNode, 'type'>): StatValueNode {
+  return { type: 'stat-value', ...props };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    'stat-value': StatValueNode;
+  }
+}

package/src/nodes/status.ts

@@ -0,0 +1,20 @@
+import type { ColorValue } from '../colors';
+import type { BaseNode } from './_shared';
+
+export interface StatusNode extends BaseNode {
+  type: 'status';
+  label: string;
+  status: 'online' | 'offline' | 'warning' | 'error' | 'idle';
+  icon?: string;
+  color?: ColorValue;
+}
+
+export function Status(props: Omit<StatusNode, 'type'>): StatusNode {
+  return { type: 'status', ...props };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    status: StatusNode;
+  }
+}

package/src/nodes/table.ts

@@ -0,0 +1,35 @@
+import { type ActionHandler, type BaseNode, resolveAction } from './_shared';
+
+export interface TableColumn {
+  key: string;
+  label: string;
+  align?: 'left' | 'center' | 'right';
+  width?: number | string;
+}
+
+export interface TableNode extends BaseNode {
+  type: 'table';
+  columns: TableColumn[];
+  rows: Record<string, string | number>[];
+  /** Show zebra-striped rows */
+  striped?: boolean;
+  /** Compact row height */
+  compact?: boolean;
+  /** Max visible rows before scrolling */
+  maxRows?: number;
+  /** Action dispatched when a row is clicked */
+  onRowPress?: string;
+}
+
+export function Table(
+  props: Omit<TableNode, 'type' | 'onRowPress'> & { onRowPress?: ActionHandler }
+): TableNode {
+  const { onRowPress, ...rest } = props;
+  return { type: 'table', ...rest, onRowPress: onRowPress ? resolveAction(onRowPress) : undefined };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    table: TableNode;
+  }
+}

package/src/nodes/tabs.ts

@@ -0,0 +1,52 @@
+import {
+  type ActionHandler,
+  type BaseNode,
+  type Child,
+  type ComponentNode,
+  normalizeChildren,
+  resolveAction,
+} from './_shared';
+
+export interface TabItem {
+  key: string;
+  label: string;
+  icon?: string;
+  children: ComponentNode[];
+}
+
+export interface TabsNode extends BaseNode {
+  type: 'tabs';
+  /** Currently active tab key */
+  value: string;
+  tabs: TabItem[];
+  /** Action dispatched when tab changes */
+  onChange: string;
+  /** Visual style */
+  variant?: 'default' | 'pills';
+}
+
+export function Tabs(props: {
+  value: string;
+  tabs: { key: string; label: string; icon?: string; children?: Child | Child[] }[];
+  onChange: ActionHandler;
+  variant?: 'default' | 'pills';
+}): TabsNode {
+  const { tabs, onChange, ...rest } = props;
+  return {
+    type: 'tabs',
+    ...rest,
+    tabs: tabs.map((tab) => ({
+      key: tab.key,
+      label: tab.label,
+      icon: tab.icon,
+      children: normalizeChildren(tab.children),
+    })),
+    onChange: resolveAction(onChange),
+  };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    tabs: TabsNode;
+  }
+}

package/src/nodes/text-input.ts

@@ -0,0 +1,53 @@
+import type { ActionHandler, BaseNode } from './_shared';
+import { resolveAction } from './_shared';
+
+export interface TextInputNode extends BaseNode {
+  type: 'text-input';
+  /** Current value */
+  value: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Label above the input */
+  label?: string;
+  /** Lucide icon name (left side) */
+  icon?: string;
+  /** Action dispatched when value changes (debounced) */
+  onChange: string;
+  /** Action dispatched on Enter key */
+  onSubmit?: string;
+  /** Disable the input */
+  disabled?: boolean;
+  /** Input type */
+  inputType?: 'text' | 'password' | 'email' | 'number';
+  /** Render as textarea instead of input */
+  multiline?: boolean;
+  /** Number of visible rows when multiline (default 3) */
+  rows?: number;
+}
+
+export function TextInput(props: {
+  value: string;
+  placeholder?: string;
+  label?: string;
+  icon?: string;
+  onChange: ActionHandler;
+  onSubmit?: ActionHandler;
+  disabled?: boolean;
+  inputType?: 'text' | 'password' | 'email' | 'number';
+  multiline?: boolean;
+  rows?: number;
+}): TextInputNode {
+  const { onChange, onSubmit, ...rest } = props;
+  return {
+    type: 'text-input',
+    ...rest,
+    onChange: resolveAction(onChange),
+    onSubmit: onSubmit ? resolveAction(onSubmit) : undefined,
+  };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    'text-input': TextInputNode;
+  }
+}

package/src/nodes/text.ts

@@ -0,0 +1,66 @@
+import type { ColorValue } from '../colors';
+import type { ActionHandler, BaseNode, IntlRef, TextContent } from './_shared';
+import { isI18nRef, isIntlRef, resolveAction, resolveIntlRef } from './_shared';
+
+/** Wire-format node — sent over IPC to the UI renderer. */
+export interface TextNode extends BaseNode {
+  type: 'text';
+  content: string;
+  /** When set, the UI renderer resolves this via i18next instead of using content. */
+  i18n?: { ns: string; key: string; params?: Record<string, string | number> };
+  /** When set, the UI renderer formats this value via Intl APIs with the user's locale. */
+  intl?: IntlRef;
+  variant?: 'body' | 'caption' | 'heading';
+  color?: ColorValue;
+  align?: 'left' | 'center' | 'right';
+  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+  maxLines?: number;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  onPress?: string;
+}
+
+/** Props accepted by the Text() builder. */
+export interface TextProps {
+  /** Text content — string, I18nRef from t(), or IntlRef from formatters. */
+  content?: TextContent;
+  /** Alias for content — allows `<Text>hello</Text>` JSX syntax. */
+  children?: TextContent;
+  variant?: 'body' | 'caption' | 'heading';
+  color?: ColorValue;
+  align?: 'left' | 'center' | 'right';
+  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+  maxLines?: number;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  onPress?: ActionHandler;
+}
+
+export function Text(props: TextProps): TextNode {
+  const { onPress, children, content: contentProp, ...rest } = props;
+  const content = contentProp ?? children ?? '';
+  const press = onPress ? resolveAction(onPress) : undefined;
+  if (isI18nRef(content)) {
+    return {
+      type: 'text',
+      ...rest,
+      content: content.key,
+      i18n: { ns: content.ns, key: content.key, params: content.params },
+      onPress: press,
+    };
+  }
+  if (isIntlRef(content)) {
+    return {
+      type: 'text',
+      ...rest,
+      content: resolveIntlRef(content),
+      intl: content,
+      onPress: press,
+    };
+  }
+  return { type: 'text', ...rest, content, onPress: press };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    text: TextNode;
+  }
+}

package/src/nodes/toggle.ts

@@ -0,0 +1,32 @@
+import type { ColorValue } from '../colors';
+import type { ActionHandler, BaseNode } from './_shared';
+import { resolveAction } from './_shared';
+
+export interface ToggleNode extends BaseNode {
+  type: 'toggle';
+  label: string;
+  checked: boolean;
+  onToggle: string;
+  icon?: string;
+  color?: ColorValue;
+  /** Disable the toggle */
+  disabled?: boolean;
+}
+
+export function Toggle(props: {
+  label: string;
+  checked: boolean;
+  onToggle: ActionHandler;
+  icon?: string;
+  color?: ColorValue;
+  disabled?: boolean;
+}): ToggleNode {
+  const { onToggle, ...rest } = props;
+  return { type: 'toggle', ...rest, onToggle: resolveAction(onToggle) };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    toggle: ToggleNode;
+  }
+}

package/src/nodes/video.ts

@@ -0,0 +1,24 @@
+import type { BaseNode } from './_shared';
+
+export interface VideoNode extends BaseNode {
+  type: 'video';
+  src: string;
+  format: 'hls' | 'mjpeg';
+  poster?: string;
+  aspectRatio?: string;
+  muted?: boolean;
+  /** Show native video controls */
+  controls?: boolean;
+  /** Loop playback */
+  loop?: boolean;
+}
+
+export function Video(props: Omit<VideoNode, 'type'>): VideoNode {
+  return { type: 'video', ...props };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    video: VideoNode;
+  }
+}