@brika/ui-kit 0.3.0

package/src/nodes/badge.ts

@@ -0,0 +1,29 @@
+import type { ColorValue } from '../colors';
+import type { ActionHandler, BaseNode } from './_shared';
+import { resolveAction } from './_shared';
+
+export interface BadgeNode extends BaseNode {
+  type: 'badge';
+  label: string;
+  /** Semantic variant */
+  variant?: 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'destructive';
+  /** Lucide icon name */
+  icon?: string;
+  /** Custom tint color (overrides variant) */
+  color?: ColorValue;
+  /** Action dispatched when clicked */
+  onPress?: string;
+}
+
+export function Badge(
+  props: Omit<BadgeNode, 'type' | 'onPress'> & { onPress?: ActionHandler }
+): BadgeNode {
+  const { onPress, ...rest } = props;
+  return { type: 'badge', ...rest, onPress: onPress ? resolveAction(onPress) : undefined };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    badge: BadgeNode;
+  }
+}

package/src/nodes/box.ts

@@ -0,0 +1,69 @@
+import type { BackgroundValue } from '../colors';
+import {
+  type ActionHandler,
+  type BaseNode,
+  type Child,
+  type ComponentNode,
+  normalizeChildren,
+  resolveAction,
+} from './_shared';
+
+export interface BoxNode extends BaseNode {
+  type: 'box';
+  children: ComponentNode[];
+
+  /** CSS color, gradient, or theme token (e.g. "#ff6b35", "muted", "card") */
+  background?: BackgroundValue;
+  /** Background image URL */
+  backgroundImage?: string;
+  /** How the background image fits */
+  backgroundFit?: 'cover' | 'contain' | 'fill';
+  /** Background image anchor position */
+  backgroundPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+  /** Backdrop blur level (glassmorphism) */
+  blur?: 'sm' | 'md' | 'lg';
+  /** Background layer opacity (0-1), useful with backgroundImage + background overlay */
+  opacity?: number;
+  /** Inner padding */
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  /** Border radius */
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+  /** Fill available space (flex-1) */
+  grow?: boolean;
+  /** Explicit width — CSS value like "50%", "200px" */
+  width?: string;
+  /** Explicit height — CSS value like "50%", "100px" */
+  height?: string;
+  /** Action dispatched when clicked */
+  onPress?: string;
+}
+
+export function Box(props: {
+  background?: BackgroundValue;
+  backgroundImage?: string;
+  backgroundFit?: 'cover' | 'contain' | 'fill';
+  backgroundPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+  blur?: 'sm' | 'md' | 'lg';
+  opacity?: number;
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+  grow?: boolean;
+  width?: string;
+  height?: string;
+  onPress?: ActionHandler;
+  children?: Child | Child[];
+}): BoxNode {
+  const { children, onPress, ...rest } = props;
+  return {
+    type: 'box',
+    ...rest,
+    onPress: onPress ? resolveAction(onPress) : undefined,
+    children: normalizeChildren(children),
+  };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    box: BoxNode;
+  }
+}

package/src/nodes/button.ts

@@ -0,0 +1,44 @@
+import type { ColorValue } from '../colors';
+import type { ActionHandler, BaseNode } from './_shared';
+import { resolveAction } from './_shared';
+
+export interface ButtonNode extends BaseNode {
+  type: 'button';
+  label?: string;
+  onPress?: string;
+  /** When set, clicking opens this URL in a new tab instead of dispatching an action. */
+  url?: string;
+  icon?: string;
+  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
+  color?: ColorValue;
+  /** Disable the button */
+  disabled?: boolean;
+  /** Show loading spinner */
+  loading?: boolean;
+  /** Button size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Stretch to full width */
+  fullWidth?: boolean;
+}
+
+export function Button(props: {
+  label?: string;
+  onPress?: ActionHandler;
+  url?: string;
+  icon?: string;
+  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
+  color?: ColorValue;
+  disabled?: boolean;
+  loading?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  fullWidth?: boolean;
+}): ButtonNode {
+  const { onPress, ...rest } = props;
+  return { type: 'button', ...rest, onPress: onPress ? resolveAction(onPress) : undefined };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    button: ButtonNode;
+  }
+}

package/src/nodes/callout.ts

@@ -0,0 +1,23 @@
+import type { BaseNode } from './_shared';
+
+export interface CalloutNode extends BaseNode {
+  type: 'callout';
+  /** Semantic variant controlling color and icon */
+  variant: 'info' | 'warning' | 'error' | 'success';
+  /** Main message text */
+  message: string;
+  /** Optional title */
+  title?: string;
+  /** Override the default icon (Lucide icon name) */
+  icon?: string;
+}
+
+export function Callout(props: Omit<CalloutNode, 'type'>): CalloutNode {
+  return { type: 'callout', ...props };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    callout: CalloutNode;
+  }
+}

package/src/nodes/chart.ts

@@ -0,0 +1,43 @@
+import type { ColorValue } from '../colors';
+import type { BaseNode } from './_shared';
+
+export interface ChartDataPoint {
+  ts: number;
+  value: number;
+}
+
+export interface ChartSeries {
+  key: string;
+  label?: string;
+  data: ChartDataPoint[];
+  color?: ColorValue;
+}
+
+export interface ChartNode extends BaseNode {
+  type: 'chart';
+  variant: 'line' | 'area' | 'bar';
+  data: ChartDataPoint[];
+  color?: ColorValue;
+  label?: string;
+  height?: number;
+  /** Multi-series data — when present, overrides data and color */
+  series?: ChartSeries[];
+  /** Show X-axis labels */
+  showXAxis?: boolean;
+  /** Show Y-axis labels */
+  showYAxis?: boolean;
+  /** Show grid lines */
+  showGrid?: boolean;
+  /** Show legend for multi-series */
+  showLegend?: boolean;
+}
+
+export function Chart(props: Omit<ChartNode, 'type'>): ChartNode {
+  return { type: 'chart', ...props };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    chart: ChartNode;
+  }
+}

package/src/nodes/checkbox.ts

@@ -0,0 +1,27 @@
+import { type ActionHandler, type BaseNode, resolveAction } from './_shared';
+
+export interface CheckboxNode extends BaseNode {
+  type: 'checkbox';
+  label: string;
+  checked: boolean;
+  /** Action dispatched when toggled */
+  onToggle: string;
+  /** Optional description below the label */
+  description?: string;
+  /** Lucide icon name */
+  icon?: string;
+  disabled?: boolean;
+}
+
+export function Checkbox(
+  props: Omit<CheckboxNode, 'type' | 'onToggle'> & { onToggle: ActionHandler }
+): CheckboxNode {
+  const { onToggle, ...rest } = props;
+  return { type: 'checkbox', ...rest, onToggle: resolveAction(onToggle) };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    checkbox: CheckboxNode;
+  }
+}

package/src/nodes/code-block.ts

@@ -0,0 +1,27 @@
+import type { BaseNode } from './_shared';
+
+export interface CodeBlockNode extends BaseNode {
+  type: 'code-block';
+  /** Code content */
+  code: string;
+  /** Programming language for syntax highlighting */
+  language?: string;
+  /** Show line numbers */
+  showLineNumbers?: boolean;
+  /** Max visible lines before scroll */
+  maxLines?: number;
+  /** Show copy button */
+  copyable?: boolean;
+  /** Optional label/filename above the block */
+  label?: string;
+}
+
+export function CodeBlock(props: Omit<CodeBlockNode, 'type'>): CodeBlockNode {
+  return { type: 'code-block', ...props };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    'code-block': CodeBlockNode;
+  }
+}

package/src/nodes/column.ts

@@ -0,0 +1,37 @@
+import {
+  type ActionHandler,
+  type BaseNode,
+  type Child,
+  type ComponentNode,
+  type FlexLayoutProps,
+  normalizeChildren,
+  resolveAction,
+} from './_shared';
+
+export interface ColumnNode extends BaseNode, FlexLayoutProps {
+  type: 'column';
+  children: ComponentNode[];
+  /** Action dispatched when clicked */
+  onPress?: string;
+}
+
+export function Column(
+  props: FlexLayoutProps & {
+    onPress?: ActionHandler;
+    children?: Child | Child[];
+  }
+): ColumnNode {
+  const { children, onPress, ...rest } = props;
+  return {
+    type: 'column',
+    ...rest,
+    onPress: onPress ? resolveAction(onPress) : undefined,
+    children: normalizeChildren(children),
+  };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    column: ColumnNode;
+  }
+}

package/src/nodes/divider.ts

@@ -0,0 +1,25 @@
+import type { BaseNode } from './_shared';
+
+export interface DividerNode extends BaseNode {
+  type: 'divider';
+  /** Line direction (default: horizontal) */
+  direction?: 'horizontal' | 'vertical';
+  /** Custom color (default: border/50) */
+  color?: string;
+  /** Optional label displayed centered within the divider */
+  label?: string;
+}
+
+export function Divider(props?: {
+  direction?: 'horizontal' | 'vertical';
+  color?: string;
+  label?: string;
+}): DividerNode {
+  return { type: 'divider', ...props };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    divider: DividerNode;
+  }
+}

package/src/nodes/grid.ts

@@ -0,0 +1,44 @@
+import {
+  type ActionHandler,
+  type BaseNode,
+  type Child,
+  type ComponentNode,
+  normalizeChildren,
+  resolveAction,
+} from './_shared';
+
+export interface GridNode extends BaseNode {
+  type: 'grid';
+  columns?: number;
+  children: ComponentNode[];
+  gap?: 'sm' | 'md' | 'lg';
+  /** Use auto-fit columns based on minColumnWidth */
+  autoFit?: boolean;
+  /** Minimum column width in px when autoFit is true (default: 120) */
+  minColumnWidth?: number;
+  /** Action dispatched when clicked */
+  onPress?: string;
+}
+
+export function Grid(props: {
+  columns?: number;
+  gap?: 'sm' | 'md' | 'lg';
+  autoFit?: boolean;
+  minColumnWidth?: number;
+  onPress?: ActionHandler;
+  children?: Child | Child[];
+}): GridNode {
+  const { children, onPress, ...rest } = props;
+  return {
+    type: 'grid',
+    ...rest,
+    onPress: onPress ? resolveAction(onPress) : undefined,
+    children: normalizeChildren(children),
+  };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    grid: GridNode;
+  }
+}

package/src/nodes/icon.ts

@@ -0,0 +1,28 @@
+import type { ColorValue } from '../colors';
+import type { ActionHandler, BaseNode } from './_shared';
+import { resolveAction } from './_shared';
+
+export interface IconNode extends BaseNode {
+  type: 'icon';
+  /** Lucide icon name */
+  name: string;
+  /** Display size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Icon color */
+  color?: ColorValue;
+  /** Action dispatched when clicked */
+  onPress?: string;
+}
+
+export function Icon(
+  props: Omit<IconNode, 'type' | 'onPress'> & { onPress?: ActionHandler }
+): IconNode {
+  const { onPress, ...rest } = props;
+  return { type: 'icon', ...rest, onPress: onPress ? resolveAction(onPress) : undefined };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    icon: IconNode;
+  }
+}

package/src/nodes/image.ts

@@ -0,0 +1,29 @@
+import { type ActionHandler, type BaseNode, resolveAction } from './_shared';
+
+export interface ImageNode extends BaseNode {
+  type: 'image';
+  src: string;
+  alt?: string;
+  /** px number or CSS string like "30%" */
+  width?: number | string;
+  height?: number | string;
+  fit?: 'cover' | 'contain' | 'fill';
+  rounded?: boolean;
+  aspectRatio?: string;
+  caption?: string;
+  /** Action dispatched when clicked */
+  onPress?: string;
+}
+
+export function Image(
+  props: Omit<ImageNode, 'type' | 'onPress'> & { onPress?: ActionHandler }
+): ImageNode {
+  const { onPress, ...rest } = props;
+  return { type: 'image', ...rest, onPress: onPress ? resolveAction(onPress) : undefined };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    image: ImageNode;
+  }
+}

package/src/nodes/index.ts

@@ -0,0 +1,54 @@
+// Shared types — ComponentNode and NodeTypeMap are auto-derived via declaration merging
+export type {
+  ActionHandler,
+  BaseNode,
+  ComponentNode,
+  FlexLayoutProps,
+  I18nRef,
+  IntlRef,
+  NodeTypeMap,
+  TextContent,
+} from './_shared';
+export {
+  _setActionRegistrar,
+  type Child,
+  i18nRef,
+  intlRef,
+  isI18nRef,
+  isIntlRef,
+  normalizeChildren,
+  resolveAction,
+  resolveIntlRef,
+} from './_shared';
+export { Avatar, type AvatarNode } from './avatar';
+export { Badge, type BadgeNode } from './badge';
+export { Box, type BoxNode } from './box';
+export { Button, type ButtonNode } from './button';
+export { Callout, type CalloutNode } from './callout';
+export { Chart, type ChartDataPoint, type ChartNode, type ChartSeries } from './chart';
+export { Checkbox, type CheckboxNode } from './checkbox';
+export { CodeBlock, type CodeBlockNode } from './code-block';
+export { Column, type ColumnNode } from './column';
+export { Divider, type DividerNode } from './divider';
+export { Grid, type GridNode } from './grid';
+export { Icon, type IconNode } from './icon';
+export { Image, type ImageNode } from './image';
+export { KeyValue, type KeyValueItem, type KeyValueNode } from './key-value';
+export { Link, type LinkNode } from './link';
+export { Markdown, type MarkdownNode } from './markdown';
+export { Progress, type ProgressNode } from './progress';
+// Node types + components (each file self-registers into NodeTypeMap)
+export { Row, type RowNode } from './row';
+export { Section, type SectionNode } from './section';
+export { Select, type SelectNode, type SelectOption } from './select';
+export { Skeleton, type SkeletonNode } from './skeleton';
+export { Slider, type SliderNode } from './slider';
+export { Spacer, type SpacerNode } from './spacer';
+export { Stat, type StatValueNode } from './stat-value';
+export { Status, type StatusNode } from './status';
+export { Table, type TableColumn, type TableNode } from './table';
+export { type TabItem, Tabs, type TabsNode } from './tabs';
+export { Text, type TextNode, type TextProps } from './text';
+export { TextInput, type TextInputNode } from './text-input';
+export { Toggle, type ToggleNode } from './toggle';
+export { Video, type VideoNode } from './video';

package/src/nodes/key-value.ts

@@ -0,0 +1,31 @@
+import type { ColorValue } from '../colors';
+import type { BaseNode } from './_shared';
+
+export interface KeyValueItem {
+  label: string;
+  value: string | number;
+  icon?: string;
+  color?: ColorValue;
+  copyable?: boolean;
+}
+
+export interface KeyValueNode extends BaseNode {
+  type: 'key-value';
+  items: KeyValueItem[];
+  /** Label/value arrangement */
+  layout?: 'horizontal' | 'stacked';
+  /** Show dividers between items */
+  dividers?: boolean;
+  /** Compact spacing */
+  compact?: boolean;
+}
+
+export function KeyValue(props: Omit<KeyValueNode, 'type'>): KeyValueNode {
+  return { type: 'key-value', ...props };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    'key-value': KeyValueNode;
+  }
+}

package/src/nodes/link.ts

@@ -0,0 +1,25 @@
+import type { BaseNode } from './_shared';
+
+export interface LinkNode extends BaseNode {
+  type: 'link';
+  /** Display text */
+  label: string;
+  /** URL to open in a new tab */
+  url: string;
+  /** Lucide icon name */
+  icon?: string;
+  /** Visual style */
+  variant?: 'default' | 'muted' | 'underline';
+  /** Font size */
+  size?: 'xs' | 'sm' | 'md';
+}
+
+export function Link(props: Omit<LinkNode, 'type'>): LinkNode {
+  return { type: 'link', ...props };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    link: LinkNode;
+  }
+}

package/src/nodes/markdown.ts

@@ -0,0 +1,16 @@
+import type { BaseNode } from './_shared';
+
+export interface MarkdownNode extends BaseNode {
+  type: 'markdown';
+  content: string;
+}
+
+export function Markdown(props: Omit<MarkdownNode, 'type'>): MarkdownNode {
+  return { type: 'markdown', ...props };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    markdown: MarkdownNode;
+  }
+}

package/src/nodes/progress.ts

@@ -0,0 +1,28 @@
+import type { ColorValue } from '../colors';
+import type { BaseNode } from './_shared';
+
+export interface ProgressNode extends BaseNode {
+  type: 'progress';
+  /** Progress value (0-100) */
+  value: number;
+  /** Optional label above the bar */
+  label?: string;
+  /** Bar color (default: primary) */
+  color?: ColorValue;
+  /** Show percentage text */
+  showValue?: boolean;
+  /** Bar thickness */
+  size?: 'sm' | 'md' | 'lg';
+  /** Visual style */
+  variant?: 'bar' | 'ring';
+}
+
+export function Progress(props: Omit<ProgressNode, 'type'>): ProgressNode {
+  return { type: 'progress', ...props };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    progress: ProgressNode;
+  }
+}

package/src/nodes/row.ts

@@ -0,0 +1,37 @@
+import {
+  type ActionHandler,
+  type BaseNode,
+  type Child,
+  type ComponentNode,
+  type FlexLayoutProps,
+  normalizeChildren,
+  resolveAction,
+} from './_shared';
+
+export interface RowNode extends BaseNode, FlexLayoutProps {
+  type: 'row';
+  children: ComponentNode[];
+  /** Action dispatched when clicked */
+  onPress?: string;
+}
+
+export function Row(
+  props: FlexLayoutProps & {
+    onPress?: ActionHandler;
+    children?: Child | Child[];
+  }
+): RowNode {
+  const { children, onPress, ...rest } = props;
+  return {
+    type: 'row',
+    ...rest,
+    onPress: onPress ? resolveAction(onPress) : undefined,
+    children: normalizeChildren(children),
+  };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    row: RowNode;
+  }
+}

package/src/nodes/section.ts

@@ -0,0 +1,42 @@
+import {
+  type ActionHandler,
+  type BaseNode,
+  type Child,
+  type ComponentNode,
+  normalizeChildren,
+  resolveAction,
+} from './_shared';
+
+export interface SectionNode extends BaseNode {
+  type: 'section';
+  title: string;
+  children: ComponentNode[];
+  /** Action dispatched when clicked */
+  onPress?: string;
+  /** Gap between children */
+  gap?: 'sm' | 'md' | 'lg';
+  /** Lucide icon name shown before the title */
+  icon?: string;
+}
+
+export function Section(props: {
+  title: string;
+  onPress?: ActionHandler;
+  gap?: 'sm' | 'md' | 'lg';
+  icon?: string;
+  children?: Child | Child[];
+}): SectionNode {
+  const { children, onPress, ...rest } = props;
+  return {
+    type: 'section',
+    ...rest,
+    onPress: onPress ? resolveAction(onPress) : undefined,
+    children: normalizeChildren(children),
+  };
+}
+
+declare module './_shared' {
+  interface NodeTypeMap {
+    section: SectionNode;
+  }
+}