Data & Presets

import {
  DEFAULT_COLOR_PALETTE,
  DEFAULT_FONT_FAMILIES,
  DEFAULT_CALLOUT_PRESETS,
  DEFAULT_EMOJIS,
} from "@blokhaus/core";

import type {
  ColorPalette,
  ColorEntry,
  FontFamilyEntry,
  CalloutPreset,
  EmojiItem,
} from "@blokhaus/core";

interface ColorPalette {
  text: ColorEntry[];
  highlight: ColorEntry[];
}

interface ColorEntry {
  label: string; // Human-readable label
  value: string; // CSS value (var() reference) or empty string for default
  swatch: string; // Raw color for rendering the picker dot
}

:root {
  --blokhaus-text-red: hsl(0 70% 50%);
  --blokhaus-highlight-red: hsl(0 70% 95%);
}

import { ColorPicker } from "@blokhaus/core";
import type { ColorPalette } from "@blokhaus/core";

const customPalette: ColorPalette = {
  text: [
    { label: "Default", value: "", swatch: "currentColor" },
    { label: "Brand", value: "var(--brand-color)", swatch: "#ff6600" },
  ],
  highlight: [
    { label: "Default", value: "", swatch: "transparent" },
    { label: "Brand Light", value: "var(--brand-bg)", swatch: "#fff3e6" },
  ],
};

<ColorPicker palette={customPalette} />;

interface FontFamilyEntry {
  label: string; // Human-readable label
  value: string; // CSS font-family value or empty string for default
  preview: string; // Font stack for rendering the preview text
}

:root {
  --blokhaus-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --blokhaus-font-serif: "Merriweather", ui-serif, Georgia, serif;
  --blokhaus-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --blokhaus-font-hand: "Caveat", cursive;
}

import { FontPicker, DEFAULT_FONT_FAMILIES } from "@blokhaus/core";

const fonts = [
  ...DEFAULT_FONT_FAMILIES,
  {
    label: "Comic",
    value: '"Comic Sans MS", cursive',
    preview: '"Comic Sans MS", cursive',
  },
];

<FontPicker fonts={fonts} />;

interface CalloutPreset {
  id: string; // Unique ID for CSS classes and serialization
  label: string; // Human-readable label
  emoji: string; // Default emoji
  bgSwatch: string; // Background color for the picker dot
  borderSwatch: string; // Border color for the picker dot
}

:root {
  --blokhaus-callout-{id}-bg: {background};
  --blokhaus-callout-{id}-border: {border};
}

:root {
  --blokhaus-callout-info-bg: #ddebf1;
  --blokhaus-callout-info-border: #0b6e99;
  --blokhaus-callout-warning-bg: #fbf3db;
  --blokhaus-callout-warning-border: #dfab01;
}

import { CalloutPlugin, DEFAULT_CALLOUT_PRESETS } from "@blokhaus/core";
import type { CalloutPreset } from "@blokhaus/core";

const customPresets: CalloutPreset[] = [
  ...DEFAULT_CALLOUT_PRESETS,
  {
    id: "brand",
    label: "Brand",
    emoji: "\u{1F680}",
    bgSwatch: "#fff3e6",
    borderSwatch: "#ff6600",
  },
];

<CalloutPlugin presets={customPresets} />;

interface EmojiItem {
  emoji: string; // The emoji character
  name: string; // Machine-readable name (e.g., "grinning_face")
  keywords: string[]; // Search terms for filtering
}

[
  {
    emoji: "😀",
    name: "grinning_face",
    keywords: ["happy", "smile", "joy", "grin"],
  },
  {
    emoji: "😂",
    name: "face_with_tears_of_joy",
    keywords: ["laugh", "cry", "happy", "tears", "lol", "funny"],
  },
  {
    emoji: "🤔",
    name: "thinking_face",
    keywords: ["think", "hmm", "ponder", "consider", "wondering"],
  },
  {
    emoji: "❤️",
    name: "red_heart",
    keywords: ["love", "heart", "like", "romance"],
  },
  { emoji: "🔥", name: "fire", keywords: ["hot", "flame", "lit", "trending"] },
  // ... 100+ more entries
];

import { EmojiPickerPlugin, DEFAULT_EMOJIS } from "@blokhaus/core";
import type { EmojiItem } from "@blokhaus/core";

// Add custom emojis
const customEmojis: EmojiItem[] = [
  ...DEFAULT_EMOJIS,
  {
    emoji: "🦄",
    name: "unicorn",
    keywords: ["magic", "fantasy", "horse", "mythical"],
  },
];

<EmojiPickerPlugin emojis={customEmojis} maxResults={12} />;

const brandEmojis: EmojiItem[] = [
  { emoji: "🚀", name: "rocket", keywords: ["launch", "ship", "deploy"] },
  { emoji: "✅", name: "check", keywords: ["done", "complete", "success"] },
  { emoji: "⚠️", name: "warning", keywords: ["alert", "caution", "danger"] },
  { emoji: "🐛", name: "bug", keywords: ["bug", "issue", "error"] },
];

<EmojiPickerPlugin emojis={brandEmojis} />;