@usequeek/theme-kit 0.1.0

package/stores/cart-store.ts

@@ -0,0 +1,172 @@
+'use client';
+
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+import type { CartAddon, CartItem } from '../types/cart';
+import type { Product, ProductVariant } from '../types/product';
+import { toast } from './toast-store';
+import { pushAddToCart } from '../apps/analytics-events';
+import { getActivePlatform, platformScopedStorage } from '../sdk/platform';
+import { productRequiresVariant } from '../utils/match-variant';
+
+interface CartState {
+  items: CartItem[];
+  /** Set once per vendor mount (see vendor-shell.tsx) — the store has no
+   *  React context, so this is how it learns the active vendor's currency
+   *  for GA4 event values. Defaults to the same 'NGN' fallback used
+   *  everywhere else in the storefront (see checkout-controller.tsx). */
+  currency: string;
+  setCurrency: (currency: string) => void;
+  addProduct: (product: Product, quantity?: number, variant?: ProductVariant | null) => void;
+  addItemWithAddons: (product: Product, quantity: number, addons: CartAddon[], variant?: ProductVariant | null) => void;
+  removeItem: (id: string, shopId: string) => void;
+  setQuantity: (id: string, shopId: string, quantity: number) => void;
+  clearShopCart: (shopId: string) => void;
+  /** Replaces a shop's items with the server-persisted cart — only called when
+   *  the local cart for that shop is empty (see use-cart-sync.ts), so this
+   *  never clobbers what the customer is actively looking at. */
+  adoptServerItems: (shopId: string, items: CartItem[]) => void;
+}
+
+/**
+ * `variantId` folds into the base id (not appended like addons) so a variant
+ * line and its product's plain (no-variant) line can never collide even if
+ * addons also match — two genuinely different purchasable things. Omitting it
+ * entirely for a no-variant product keeps every already-persisted cart's ids
+ * unchanged (existing localStorage carts, in-flight server carts) rather than
+ * reshaping ids for products that were never affected by this gap.
+ */
+export function makeItemId(productId: string, addons: CartAddon[], variantId?: string | null): string {
+  const base = variantId ? `${productId}::${variantId}` : productId;
+
+  if (addons.length === 0) {
+    return base;
+  }
+
+  return `${base}-${addons.map((addon) => addon.item_id).sort().join(',')}`;
+}
+
+export const useCartStore = create<CartState>()(
+  persist(
+    (set, get) => ({
+      items: [],
+      currency: 'NGN',
+      setCurrency: (currency) => set({ currency }),
+      addProduct: (product, quantity = 1, variant = null) => {
+        get().addItemWithAddons(product, quantity, [], variant);
+      },
+      addItemWithAddons: (product, quantity = 1, addons = [], variant = null) => {
+        // A variant-enabled product has no valid "no selection" line: the cart
+        // save fails server-side (DiscountService's VariantSelectionException),
+        // so persisting one only moves the failure to checkout. Themes gate
+        // their add button too, but a theme is presentation — correctness
+        // cannot depend on all seven, or on the next one, getting it right.
+        if (!variant && productRequiresVariant(product)) {
+          toast({
+            title: 'Select options',
+            description: `Choose an option for ${product.title} before adding it to your cart.`,
+          });
+          console.error('[cart] refused a variant-enabled product added with no variant:', product.id);
+          return;
+        }
+
+        const itemId = makeItemId(product.id, addons, variant?.id);
+        const addonTotal = addons.reduce((sum, addon) => sum + addon.price, 0);
+        // A variant's own price/stock override the base product's — the same
+        // precedence quick-add-page.tsx's matchedVariant already uses.
+        const unitPrice = (variant?.pricing.sale_amount ?? product.pricing.sale_amount) + addonTotal;
+        const itemImage = variant?.media.thumbnail ?? variant?.media.image ?? product.media.thumbnail ?? product.media.image ?? null;
+
+        // Confirm the add with a global toast (works across every theme) —
+        // except on QR, which has its own persistent cart bar (QrCartBar)
+        // always visible on screen, so a toast on top of it is redundant
+        // (and its "View cart" action has nothing QR-specific to open).
+        if (getActivePlatform() !== 'instore_qr') {
+          toast({
+            title: 'Added to cart',
+            description: variant?.title ? `${product.title} (${variant.title})` : product.title,
+            image: itemImage,
+            showCart: true,
+          });
+        }
+        pushAddToCart(
+          { item_id: product.id, item_name: product.title, price: unitPrice, quantity: Math.max(1, quantity) },
+          get().currency,
+        );
+
+        set((state) => {
+          const existing = state.items.findIndex(
+            (entry) => entry.id === itemId && entry.shop_id === product.shop_id,
+          );
+
+          if (existing >= 0) {
+            const items = [...state.items];
+            const current = items[existing];
+            items[existing] = {
+              ...current,
+              quantity: current.quantity + Math.max(1, quantity),
+              unit_price: unitPrice,
+            };
+
+            return { items };
+          }
+
+          return {
+            items: [
+              ...state.items,
+              {
+                id: itemId,
+                product_id: product.id,
+                shop_id: product.shop_id,
+                title: product.title,
+                slug: product.slug,
+                image: itemImage,
+                unit_price: unitPrice,
+                quantity: Math.max(1, quantity),
+                addons,
+                variant_id: variant?.id ?? null,
+                variant_title: variant?.title ?? null,
+              },
+            ],
+          };
+        });
+      },
+      removeItem: (id, shopId) => {
+        set((state) => ({
+          items: state.items.filter((entry) => !(entry.id === id && entry.shop_id === shopId)),
+        }));
+      },
+      setQuantity: (id, shopId, quantity) => {
+        if (quantity <= 0) {
+          get().removeItem(id, shopId);
+
+          return;
+        }
+
+        set((state) => ({
+          items: state.items.map((entry) => {
+            if (entry.id === id && entry.shop_id === shopId) {
+              return { ...entry, quantity };
+            }
+
+            return entry;
+          }),
+        }));
+      },
+      clearShopCart: (shopId) => {
+        set((state) => ({
+          items: state.items.filter((entry) => entry.shop_id !== shopId),
+        }));
+      },
+      adoptServerItems: (shopId, items) => {
+        set((state) => ({
+          items: [...state.items.filter((entry) => entry.shop_id !== shopId), ...items],
+        }));
+      },
+    }),
+    {
+      name: 'queek-storefront-cart',
+      storage: createJSONStorage(platformScopedStorage),
+    },
+  ),
+);

package/stores/checkout-store.ts

@@ -0,0 +1,167 @@
+'use client';
+
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+import { platformScopedStorage } from '../sdk/platform';
+
+export interface ScheduleSlot {
+  id: string;
+  date: string;
+  min_time: string;
+  max_time: string;
+  time?: string;
+}
+
+export type CheckoutTab = 'summary' | 'checkout';
+export type DeliveryType = 'instant' | 'schedule';
+
+/** The Shipbubble courier the customer picked. Its price is re-derived from the
+ *  server-cached quote (via request_token + service_code) at fee/order time —
+ *  never trusted from the client — so display == charge. */
+export interface ShipbubbleSelection {
+  request_token: string;
+  service_code: string;
+  courier_id: string;
+}
+
+/** Which of the vendor's (possibly several) active bank accounts the customer
+ *  picked for a bank_transfer order — submitted with checkout and re-verified
+ *  server-side against the vendor's real accounts before it's ever recorded. */
+export interface SelectedBankAccount {
+  bank_name: string;
+  bank_code: string;
+  account_name: string;
+  account_number: string;
+}
+
+interface CheckoutState {
+  deliveryMode: string | null;
+  deliveryType: DeliveryType;
+  selectedSlot: ScheduleSlot | null;
+  paymentMethodId: string | null;
+  paymentMethodName: string | null;
+  selectedBankAccount: SelectedBankAccount | null;
+  /** instore_qr dine-in only — which of the vendor's tables the customer is
+   *  sitting at (App\Models\VendorTable id). Null for every other flow. */
+  selectedTableId: string | null;
+  promoCode: string;
+  vendorNote: string;
+  riderNote: string;
+  activeTab: CheckoutTab;
+  /** Selected delivery source when two options (queek/vendor) are available */
+  deliverySource: string | null;
+  /** Shipping zone UUID — required for a MANUAL shipping order */
+  shippingZoneId: string | null;
+  shippingZoneName: string | null;
+  /** The picked Shipbubble courier for an AUTOMATED shipping order (transient) */
+  shipbubbleSelection: ShipbubbleSelection | null;
+  /** Total order weight in kg — needed when selected zone has has_weight_pricing: true */
+  weightKg: number | null;
+  /** Transient (not persisted). When true, checkout will auto-resume
+   *  to the checkout tab once the user authenticates. Set by the
+   *  controller when a guest clicks "Proceed to checkout". */
+  pendingAuthResume: boolean;
+  /** Transient. True while the customer is searching/changing their delivery
+   *  address — the resolved fee is stale then, so surfaces hide it. */
+  isEditingAddress: boolean;
+  /** The customer's saved address (CustomerAddress uuid) currently selected for
+   *  delivery, when they picked one from their address book instead of
+   *  searching a fresh address. Lets the backend reuse the cached courier
+   *  geocode. Null whenever the address came from a fresh Google search. */
+  savedAddressId: string | null;
+
+  setDeliveryMode: (mode: string | null) => void;
+  setDeliveryType: (type: DeliveryType) => void;
+  setSelectedSlot: (slot: ScheduleSlot | null) => void;
+  setPaymentMethod: (id: string | null, name: string | null) => void;
+  setSelectedBankAccount: (account: SelectedBankAccount | null) => void;
+  setSelectedTableId: (tableId: string | null) => void;
+  setPromoCode: (code: string) => void;
+  setVendorNote: (note: string) => void;
+  setRiderNote: (note: string) => void;
+  setActiveTab: (tab: CheckoutTab) => void;
+  setDeliverySource: (source: string | null) => void;
+  setShippingZone: (id: string | null, name: string | null) => void;
+  setShipbubbleSelection: (selection: ShipbubbleSelection | null) => void;
+  setWeightKg: (weight: number | null) => void;
+  setPendingAuthResume: (value: boolean) => void;
+  setEditingAddress: (value: boolean) => void;
+  setSavedAddressId: (id: string | null) => void;
+  reset: () => void;
+}
+
+export const useCheckoutStore = create<CheckoutState>()(
+  persist(
+    (set) => ({
+      deliveryMode: null,
+      deliveryType: 'instant',
+      selectedSlot: null,
+      paymentMethodId: null,
+      paymentMethodName: null,
+      selectedBankAccount: null,
+      selectedTableId: null,
+      promoCode: '',
+      vendorNote: '',
+      riderNote: '',
+      activeTab: 'summary',
+      deliverySource: null,
+      shippingZoneId: null,
+      shippingZoneName: null,
+      shipbubbleSelection: null,
+      weightKg: null,
+      pendingAuthResume: false,
+      isEditingAddress: false,
+      savedAddressId: null,
+
+      setDeliveryMode: (deliveryMode) => set({ deliveryMode, deliverySource: null, shippingZoneId: null, shippingZoneName: null, shipbubbleSelection: null }),
+      setDeliveryType: (deliveryType) => set({ deliveryType }),
+      setSelectedSlot: (selectedSlot) => set({ selectedSlot }),
+      // Changing the method invalidates a bank choice made for the previous one.
+      setPaymentMethod: (paymentMethodId, paymentMethodName) => set({ paymentMethodId, paymentMethodName, selectedBankAccount: null }),
+      setSelectedBankAccount: (selectedBankAccount) => set({ selectedBankAccount }),
+      setSelectedTableId: (selectedTableId) => set({ selectedTableId }),
+      setPromoCode: (promoCode) => set({ promoCode }),
+      setVendorNote: (vendorNote) => set({ vendorNote }),
+      setRiderNote: (riderNote) => set({ riderNote }),
+      setActiveTab: (activeTab) => set({ activeTab }),
+      setDeliverySource: (deliverySource) => set({ deliverySource }),
+      setShippingZone: (shippingZoneId, shippingZoneName) => set({ shippingZoneId, shippingZoneName }),
+      setShipbubbleSelection: (shipbubbleSelection) => set({ shipbubbleSelection }),
+      setWeightKg: (weightKg) => set({ weightKg }),
+      setPendingAuthResume: (pendingAuthResume) => set({ pendingAuthResume }),
+      setEditingAddress: (isEditingAddress) => set({ isEditingAddress }),
+      setSavedAddressId: (savedAddressId) => set({ savedAddressId }),
+      reset: () => set({
+        deliveryMode: null,
+        deliveryType: 'instant',
+        selectedSlot: null,
+        selectedBankAccount: null,
+        selectedTableId: null,
+        promoCode: '',
+        vendorNote: '',
+        riderNote: '',
+        activeTab: 'summary',
+        deliverySource: null,
+        shippingZoneId: null,
+        shipbubbleSelection: null,
+        shippingZoneName: null,
+        weightKg: null,
+        pendingAuthResume: false,
+        isEditingAddress: false,
+        savedAddressId: null,
+      }),
+    }),
+    {
+      name: 'queek-storefront-checkout',
+      storage: createJSONStorage(platformScopedStorage),
+      partialize: (state) => ({
+        deliveryMode: state.deliveryMode,
+        deliveryType: state.deliveryType,
+        selectedSlot: state.selectedSlot,
+        paymentMethodId: state.paymentMethodId,
+        paymentMethodName: state.paymentMethodName,
+        selectedTableId: state.selectedTableId,
+      }),
+    },
+  ),
+);

package/stores/edit-preview-store.ts

@@ -0,0 +1,61 @@
+'use client';
+
+import { create } from 'zustand';
+import type { Block } from '../types/block';
+
+interface EditPreviewState {
+  /** Draft sections streamed from the merchant editor. `null` = render what the server sent. */
+  blocks: Block[] | null;
+  /** Order of the newest draft. */
+  streamedSeq: number;
+  /** Order of the last refresh request — a payload can only carry what was
+   *  already saved at that moment. */
+  refreshSeq: number;
+  setBlocks: (blocks: Block[]) => void;
+  markRefreshRequested: () => void;
+  /** Yield to the server, unless the draft is newer than the refresh that produced it. */
+  reconcile: () => void;
+}
+
+/**
+ * Draft page content streamed live from the merchant editor, so a section edit
+ * renders immediately instead of waiting for a network round trip.
+ *
+ * Before this, every field change took the long way: 900ms debounce → PUT the
+ * draft → postMessage 'refresh' → router.refresh() → RSC fetch → backend
+ * render, and the preview showed the OLD content the whole time. The merchant
+ * already holds the edited section in its own state; sending it costs nothing
+ * and removes both network hops from the interactive path.
+ *
+ * Design tokens have worked this way all along (design-token-preview.tsx) — this
+ * is the same idea applied to section content, which is the thing merchants
+ * actually spend their time editing.
+ *
+ * The server stays authoritative: PageRenderer drops this override the moment a
+ * fresh server payload arrives, so the debounced save still reconciles and a
+ * drifted preview cannot outlive one refresh.
+ */
+/**
+ * A monotonic counter, not a clock. Two events in the same millisecond are
+ * indistinguishable by Date.now(), and "typed at the same moment the refresh
+ * was requested" is precisely the case that has to resolve correctly.
+ */
+let sequence = 0;
+const nextSeq = (): number => (sequence += 1);
+
+export const useEditPreviewStore = create<EditPreviewState>()((set, get) => ({
+  blocks: null,
+  streamedSeq: 0,
+  refreshSeq: 0,
+  setBlocks: (blocks) => set({ blocks, streamedSeq: nextSeq() }),
+  markRefreshRequested: () => set({ refreshSeq: nextSeq() }),
+  reconcile: () => {
+    // Typing DURING the save round trip is the case this protects: the payload
+    // was rendered from what had been saved when the refresh was requested, so
+    // a draft streamed after that point is strictly newer. Clearing it there
+    // would flash the vendor's screen back to older content until their next
+    // keystroke re-streamed it.
+    if (get().streamedSeq > get().refreshSeq) return;
+    set({ blocks: null });
+  },
+}));

package/stores/location-store.ts

@@ -0,0 +1,41 @@
+'use client';
+
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+import { platformScopedStorage } from '../sdk/platform';
+
+const DEFAULT_LAT = 4.77149;
+const DEFAULT_LNG = 7.01435;
+
+interface LocationState {
+  latitude: number;
+  longitude: number;
+  address: string;
+  stateId: string | null;
+  setLocation: (lat: number, lng: number, address: string, stateId?: string | null) => void;
+  clearLocation: () => void;
+}
+
+export const useLocationStore = create<LocationState>()(
+  persist(
+    (set) => ({
+      latitude: DEFAULT_LAT,
+      longitude: DEFAULT_LNG,
+      address: '',
+      stateId: null,
+      setLocation: (latitude, longitude, address, stateId = null) =>
+        set({ latitude, longitude, address, stateId }),
+      clearLocation: () =>
+        set({ latitude: DEFAULT_LAT, longitude: DEFAULT_LNG, address: '', stateId: null }),
+    }),
+    {
+      name: 'queek-storefront-location',
+      storage: createJSONStorage(platformScopedStorage),
+      merge: (persisted, current) => ({
+        ...current,
+        ...(persisted as Partial<LocationState>),
+        stateId: (persisted as Partial<LocationState>)?.stateId ?? null,
+      }),
+    },
+  ),
+);

package/stores/orders-sheet-store.ts

@@ -0,0 +1,21 @@
+'use client';
+
+import { create } from 'zustand';
+
+interface OrdersSheetState {
+  isOpen: boolean;
+  activeOrderId: string | null;
+  open: () => void;
+  close: () => void;
+  openDetail: (id: string) => void;
+  closeDetail: () => void;
+}
+
+export const useOrdersSheetStore = create<OrdersSheetState>()((set) => ({
+  isOpen: false,
+  activeOrderId: null,
+  open: () => set({ isOpen: true, activeOrderId: null }),
+  close: () => set({ isOpen: false, activeOrderId: null }),
+  openDetail: (id) => set({ activeOrderId: id }),
+  closeDetail: () => set({ activeOrderId: null }),
+}));

package/stores/policy-modal-store.ts

@@ -0,0 +1,15 @@
+'use client';
+
+import { create } from 'zustand';
+
+interface PolicyModalState {
+  activeSlug: string | null;
+  open: (slug: string) => void;
+  close: () => void;
+}
+
+export const usePolicyModalStore = create<PolicyModalState>()((set) => ({
+  activeSlug: null,
+  open: (slug) => set({ activeSlug: slug }),
+  close: () => set({ activeSlug: null }),
+}));

package/stores/product-modal-store.ts

@@ -0,0 +1,18 @@
+'use client';
+
+import { create } from 'zustand';
+import type { Product } from '../types/product';
+
+interface ProductModalState {
+  isOpen: boolean;
+  product: Product | null;
+  open: (product: Product) => void;
+  close: () => void;
+}
+
+export const useProductModalStore = create<ProductModalState>()((set) => ({
+  isOpen: false,
+  product: null,
+  open: (product) => set({ isOpen: true, product }),
+  close: () => set({ isOpen: false, product: null }),
+}));

package/stores/search-modal-store.ts

@@ -0,0 +1,17 @@
+'use client';
+
+import { create } from 'zustand';
+
+interface SearchModalState {
+  isOpen: boolean;
+  initialQuery: string;
+  open: (query?: string) => void;
+  close: () => void;
+}
+
+export const useSearchModalStore = create<SearchModalState>()((set) => ({
+  isOpen: false,
+  initialQuery: '',
+  open: (query) => set({ isOpen: true, initialQuery: query ?? '' }),
+  close: () => set({ isOpen: false }),
+}));

package/stores/toast-store.ts

@@ -0,0 +1,46 @@
+'use client';
+
+import { create } from 'zustand';
+
+export interface Toast {
+  id: string;
+  title: string;
+  description?: string;
+  /** Product thumbnail — shown instead of the generic checkmark icon when set. */
+  image?: string | null;
+  /** Show a "View cart" action that opens the cart panel. */
+  showCart?: boolean;
+  /** Auto-dismiss after this many ms (default 3200). */
+  duration?: number;
+}
+
+interface ToastState {
+  toasts: Toast[];
+  show: (toast: Omit<Toast, 'id'>) => string;
+  dismiss: (id: string) => void;
+}
+
+function makeId(): string {
+  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) return crypto.randomUUID();
+  return `t_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+}
+
+const MAX_TOASTS = 3;
+
+export const useToastStore = create<ToastState>((set) => ({
+  toasts: [],
+  show: (toast) => {
+    const id = makeId();
+    set((state) => ({ toasts: [...state.toasts, { ...toast, id }].slice(-MAX_TOASTS) }));
+    return id;
+  },
+  dismiss: (id) => set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) })),
+}));
+
+/**
+ * Headless helper so non-React code (the cart store) can raise a toast.
+ * Kept out of React render paths — call it from event handlers / store actions.
+ */
+export function toast(toast: Omit<Toast, 'id'>): string {
+  return useToastStore.getState().show(toast);
+}

package/stores/user-store.ts

@@ -0,0 +1,88 @@
+'use client';
+
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+export interface StorefrontUser {
+  id: string;
+  name: string;
+  first_name: string;
+  last_name: string;
+  email: string | null;
+  phone: string;
+  avatar: string | null;
+  /** Backend flag: false for social/email signups that still lack a real phone. */
+  profile_complete?: boolean;
+  delivery_info?: {
+    map_lat: number;
+    map_lng: number;
+    address: string;
+  };
+}
+
+/**
+ * A signed-in customer whose account is missing the details we require to
+ * fulfil an order. The backend's `profile_complete` is itself derived purely
+ * from phone+name presence (`ClientAuthUserResource`: `phone !== null && name
+ * !== ''`), so both it and the raw `!user.phone` check are gated by
+ * `requiresPhone` together — there's no case where one applies without the
+ * other.
+ *
+ * `requiresPhone` — defaults true (delivery/pickup orders need a real number
+ * to reach the customer). Pass false for in-person channels like instore_qr:
+ * the vendor already has the customer physically present, so a phone is not
+ * needed to fulfil the order (matches POS, which never requires it either).
+ *
+ * `requiresEmail` — pass true for an automated-shipping vendor: Shipbubble's
+ * courier lookup needs a real email, which a phone-OTP-only signup never has.
+ * Defaults false everywhere else so this stays a no-op for every other caller.
+ */
+export function isProfileIncomplete(
+  user: StorefrontUser | null,
+  options: { requiresPhone?: boolean; requiresEmail?: boolean } = {},
+): boolean {
+  if (!user) {
+    return false;
+  }
+  const { requiresPhone = true, requiresEmail = false } = options;
+  return (requiresPhone && (user.profile_complete === false || !user.phone)) || (requiresEmail && !user.email);
+}
+
+interface UserState {
+  user: StorefrontUser | null;
+  isAuthenticated: boolean;
+  setUser: (user: StorefrontUser) => void;
+  updateDeliveryInfo: (info: { map_lat: number; map_lng: number; address: string }) => void;
+  logout: () => void;
+}
+
+const STORAGE_KEY = 'queek-storefront-user';
+
+export const useUserStore = create<UserState>()(
+  persist(
+    (set) => ({
+      user: null,
+      isAuthenticated: false,
+      setUser: (user) => set({ user, isAuthenticated: true }),
+      updateDeliveryInfo: (info) =>
+        set((state) => ({
+          user: state.user ? { ...state.user, delivery_info: info } : null,
+        })),
+      logout: () => set({ user: null, isAuthenticated: false }),
+    }),
+    {
+      name: STORAGE_KEY,
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+);
+
+// Cross-tab sync: when another tab logs in or out, rehydrate this tab
+// so auth state stays consistent everywhere the SDK is used.
+if (typeof window !== 'undefined') {
+  window.addEventListener('storage', (event) => {
+    if (event.key === STORAGE_KEY) {
+      void useUserStore.persist.rehydrate();
+    }
+  });
+}

package/theme-context.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { createContext, useContext, type ReactNode } from 'react';
+import type { ThemeModule } from './types/theme';
+
+const ThemeContext = createContext<ThemeModule | null>(null);
+
+export function ThemeProvider({
+  theme,
+  children,
+}: {
+  theme: ThemeModule;
+  children: ReactNode;
+}): JSX.Element {
+  return (
+    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeModule {
+  const theme = useContext(ThemeContext);
+
+  if (!theme) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+
+  return theme;
+}