@togo-framework/ui 0.1.0

package/dist/theme/index.d.ts

@@ -0,0 +1,184 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * brand.ts — Sentra dynamic theming primitives.
+ *
+ * Pure utilities: no React, no app context, no bridge dependency.
+ * A product imports these and wires its own org-settings fetch,
+ * then calls applyBrand() to override the CSS var baseline at runtime.
+ *
+ * CSS variables written (same set as app/src/components/BrandingProvider.tsx):
+ *   --primary              HSL "H S% L%"  — buttons, rings, active states
+ *   --brand-primary        HSL "H S% L%"  — alias kept for Situation Room glow
+ *   --brand-primary-glow   HSL with +7 lightness — glow variant
+ *   --ring                 same as --primary
+ *   --sidebar-primary      same as --primary
+ *   --sidebar-ring         same as --primary
+ *   --ai-glow              same as --primary
+ *   --accent-muted         accent HSL with -13 lightness
+ *   --logo-url             CSS url("…") string for background-image consumers
+ */
+/** Returns true for the HSL string form "H S% L%". */
+declare function isHSL(value: string): boolean;
+/** Returns true for "#RRGGBB" or "#RGB". */
+declare function isValidColor(value: string): boolean;
+/**
+ * Converts "#RRGGBB" or "#RGB" to the HSL string form "H S% L%".
+ * Returns an empty string when the input is not a valid hex color.
+ */
+declare function hexToHSL(hex: string): string;
+/**
+ * Normalises a hex or HSL value to the "H S% L%" form.
+ * Returns null when the value is unrecognised — callers should skip setting
+ * the var rather than writing a broken value.
+ */
+declare function toHSLSafe(color: string): string | null;
+/**
+ * Nudges the lightness of an "H S% L%" string by `delta` percentage points,
+ * clamped to [0, 100].
+ */
+declare function nudgeL(hsl: string, delta: number): string;
+/**
+ * SENTRA_BRAND — the platform's own brand tokens.
+ *
+ * These are the values used when no tenant branding is configured.
+ * BrandingProvider applies them on first render so the first paint is always
+ * branded; a tenant override writes over them once org-settings resolves.
+ */
+declare const SENTRA_BRAND: {
+    /** Brand primary: Sentra crimson (--primary 345 75% 33%). */
+    readonly primaryHex: "#931535";
+    /** Brand accent: Tailwind violet-500. */
+    readonly accentHex: "#daab4e";
+    /** Logo path — products serve this from their own /public directory. */
+    readonly logoUrl: "/sentra-logo-full.png";
+};
+interface BrandTokens {
+    /** Hex string ("#RRGGBB") or HSL string ("H S% L%") for the primary color. */
+    primaryHex?: string;
+    /** Hex string ("#RRGGBB") or HSL string ("H S% L%") for the accent color. */
+    accentHex?: string;
+    /** Absolute URL or relative path to the org logo image. */
+    logoUrl?: string;
+}
+/**
+ * applyBrand — writes brand CSS custom properties directly onto `root`
+ * (typically `document.documentElement`).
+ *
+ * Call this inside a useEffect whenever org-settings data changes.
+ * When a field is absent or invalid, the corresponding Sentra default fills
+ * the gap — the product always has a styled baseline.
+ *
+ * @param root      The element to set properties on (usually document.documentElement).
+ * @param tokens    The brand tokens from org-settings; all fields are optional.
+ */
+declare function applyBrand(root: HTMLElement, tokens?: BrandTokens): void;
+
+interface BrandContextValue extends Omit<BrandTokens, 'logoUrl'> {
+    /** The resolved primary hex/HSL that is currently active (may be the Sentra default). */
+    primaryHex: string;
+    /** The resolved accent hex/HSL that is currently active (may be the Sentra default). */
+    accentHex: string;
+    /**
+     * The RAW logo URL the tenant set, or null when none is configured.
+     * Intentionally NOT defaulted to the Sentra logo: consumers (AdminLayout,
+     * AuthCard) use null to decide "no logo → render the icon mark instead".
+     * (operator 2026-06-05: everything was showing /sentra-logo-full.png — the
+     * default — instead of the platform icon when no DB logo exists.)
+     * The `--logo-url` CSS var (set by applyBrand) still falls back to the Sentra
+     * default for pure background-image consumers; this context value does not.
+     */
+    logoUrl: string | null;
+    /** Lucide icon name (e.g. 'ShieldCheck') for the platform mark. Null if unset. */
+    iconName: string | null;
+    /** Resolved product/platform name (for the sidebar title). Empty if unset. */
+    productName: string;
+}
+/**
+ * useBrand — reads the currently-active brand tokens from context.
+ *
+ * Returns the Sentra defaults when no BrandingProvider is in the tree.
+ * Only use this when a component genuinely needs to read the color values
+ * (e.g. to pass them to a canvas API). For standard CSS theming the CSS
+ * vars (hsl(var(--primary)) etc.) are always preferred.
+ */
+declare function useBrand(): BrandContextValue;
+interface BrandingProviderProps extends BrandTokens {
+    /** Lucide icon name for the platform mark (from Fort branding.icon). */
+    iconName?: string | null;
+    /** Product/platform display name (from Fort branding.product_name_*). */
+    productName?: string;
+    children: ReactNode;
+}
+/**
+ * BrandingProvider — hot-applies org branding CSS vars and exposes the
+ * active tokens via BrandContext.
+ *
+ * Renders no additional DOM nodes — it is a pure side-effect + context provider.
+ *
+ * Props (all optional — Sentra defaults fill any missing value):
+ *   primaryHex   Hex "#RRGGBB" or HSL "H S% L%" for the brand primary color.
+ *   accentHex    Hex "#RRGGBB" or HSL "H S% L%" for the brand accent color.
+ *   logoUrl      Absolute URL or relative path to the org logo.
+ */
+declare const BrandingProvider: {
+    ({ primaryHex, accentHex, logoUrl, iconName, productName, children, }: BrandingProviderProps): React.JSX.Element;
+    displayName: string;
+};
+
+type ThemeBase = "dark" | "light";
+interface ThemeDef {
+    id: string;
+    label: string;
+    /** Whether this theme toggles the `.dark` class (keeps `dark:` utilities in sync). */
+    base: ThemeBase;
+}
+declare const themes: ThemeDef[];
+declare function themeBase(id: string): ThemeBase;
+declare const STORAGE_KEY = "togo-theme";
+/**
+ * Inline this string in a <script> in <head> to set the theme before first paint
+ * (no flash of the wrong theme). The framework injects it server-side.
+ *
+ *   <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
+ */
+declare const themeInitScript: string;
+
+type TogoTheme = "dark" | "light" | (string & {});
+type Dir = "ltr" | "rtl";
+/** Per-app brand overrides: any `--togo-*` (or bridged) custom property → value. */
+type ThemeOverrides = Record<string, string>;
+interface ThemeContextValue {
+    theme: TogoTheme;
+    setTheme: (t: TogoTheme) => void;
+    themes: ThemeDef[];
+    dir: Dir;
+    setDir: (d: Dir) => void;
+}
+interface ThemeProviderProps {
+    theme?: TogoTheme;
+    /** Per-app brand overrides applied as inline custom properties on the scope element. */
+    overrides?: ThemeOverrides;
+    dir?: Dir;
+    /** "html" (default) themes <html>; "self" themes a wrapper div (so themes can coexist on one page). */
+    scope?: "html" | "self";
+    themes?: ThemeDef[];
+    /** Persist theme/dir choice to localStorage and read it on first mount. */
+    persist?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * ThemeProvider — runtime theming. Sets `data-theme` + toggles `.dark` + `dir` on its
+ * scope (the <html> element, or a wrapper when scope="self"), applies per-app `overrides`
+ * as inline custom properties, and exposes `useTheme()`. SSR-safe (no DOM access at module
+ * top level; all mutations run in effects). For no-flash, also inline `themeInitScript`.
+ */
+declare function ThemeProvider({ theme: themeProp, overrides, dir: dirProp, scope, themes, persist, className, children, }: ThemeProviderProps): React.JSX.Element;
+declare namespace ThemeProvider {
+    var displayName: string;
+}
+declare function useTheme(): ThemeContextValue;
+
+export { type BrandContextValue, type BrandTokens, BrandingProvider, type BrandingProviderProps, type Dir, SENTRA_BRAND, STORAGE_KEY, type ThemeBase, type ThemeContextValue, type ThemeDef, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type TogoTheme, applyBrand, hexToHSL, isHSL, isValidColor, nudgeL, themeBase, themeInitScript, themes, toHSLSafe, useBrand, useTheme };

package/dist/theme/index.js

@@ -0,0 +1,36 @@
+"use client";
+import {
+  BrandingProvider,
+  SENTRA_BRAND,
+  STORAGE_KEY,
+  ThemeProvider,
+  applyBrand,
+  hexToHSL,
+  isHSL,
+  isValidColor,
+  nudgeL,
+  themeBase,
+  themeInitScript,
+  themes,
+  toHSLSafe,
+  useBrand,
+  useTheme
+} from "../chunk-KD4MPGYQ.js";
+export {
+  BrandingProvider,
+  SENTRA_BRAND,
+  STORAGE_KEY,
+  ThemeProvider,
+  applyBrand,
+  hexToHSL,
+  isHSL,
+  isValidColor,
+  nudgeL,
+  themeBase,
+  themeInitScript,
+  themes,
+  toHSLSafe,
+  useBrand,
+  useTheme
+};
+//# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/theme/tokens.primitive.css

@@ -0,0 +1,63 @@
+/*
+ * ToGO Design System — PRIMITIVE tokens.
+ *
+ * The raw brand palette + non-color scales. This is the ONLY file in the kit
+ * allowed to contain literal hex values (enforced by the lint guardrail).
+ * Semantic role tokens (tokens.semantic.css) reference these; components
+ * reference the semantic roles — never these primitives directly.
+ *
+ * Palette source: the official ToGO brand guidelines (Gopher Cyan → Cobalt).
+ */
+
+:root {
+  /* ── Brand ramp — Gopher Cyan → Stack Sky → Cobalt ── */
+  --togo-cyan-300:   #5CDDEC;
+  --togo-cyan-400:   #2FCFE2;
+  --togo-cyan-500:   #1FC7DC;  /* Gopher Cyan — primary accent */
+  --togo-sky-500:    #2D8CE6;  /* Stack Sky — secondary */
+  --togo-cobalt-500: #1659C8;  /* Cobalt — deep */
+  --togo-cobalt-600: #1247A3;
+
+  /* ── Neutrals ── */
+  --togo-ink-900:   #141A1D;   /* Ink — text / dark surfaces */
+  --togo-ink-700:   #2A363B;
+  --togo-slate-500: #5A6B72;   /* Slate — muted body */
+  --togo-slate-300: #9BAAB0;
+  --togo-line-200:  #E8EDEF;   /* hairline borders (light) */
+  --togo-mist-100:  #F4F7F8;   /* Mist — surfaces (light) */
+  --togo-white:     #FFFFFF;
+
+  /* ── Status ── */
+  --togo-success-500: #1F9D6B;
+  --togo-warn-500:    #E0A11B;
+  --togo-danger-500:  #D85563;
+
+  /* ── Brand gradient (ToGO Flow) ── */
+  --togo-flow: linear-gradient(110deg, var(--togo-cyan-500) 0%, var(--togo-sky-500) 52%, var(--togo-cobalt-500) 100%);
+
+  /* ── Non-color scales ── */
+  --togo-radius-sm: 6px;
+  --togo-radius-md: 12px;
+  --togo-radius-lg: 16px;
+  --togo-radius-pill: 999px;
+
+  --togo-space-1: 4px;
+  --togo-space-2: 8px;
+  --togo-space-3: 12px;
+  --togo-space-4: 16px;
+  --togo-space-6: 24px;
+  --togo-space-8: 32px;
+
+  --togo-shadow-sm: 0 1px 2px rgba(20, 26, 29, .06);
+  --togo-shadow-md: 0 8px 24px rgba(20, 26, 29, .10);
+  --togo-shadow-accent: 0 12px 24px rgba(22, 89, 200, .25);
+
+  /* ── Type families ──
+   * Latin display/body/mono. Lusail is the ARABIC face and is applied ONLY to
+   * RTL/Arabic content (see the [dir="rtl"], :lang(ar) rule in styles.css) — it is
+   * intentionally NOT in these Latin stacks, so if the brand fonts fail to load the
+   * fallback is clean system-ui, never Lusail rendering Latin (which looks heavy/wrong). */
+  --togo-font-display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --togo-font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --togo-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+}

package/dist/theme/tokens.semantic.css

@@ -0,0 +1,45 @@
+/*
+ * ToGO Design System — SEMANTIC role tokens.
+ *
+ * The roles components actually consume. Each theme is a `[data-theme="…"]`
+ * block that re-points the same roles — this is the runtime-theming switch
+ * surface. Add a tenant/brand theme by adding one more block here; no
+ * component changes required.
+ *
+ * No hex lives here — every value references a primitive (tokens.primitive.css).
+ */
+
+/* ── DARK (default) ── */
+:root,
+[data-theme="dark"] {
+  --togo-color-bg:            var(--togo-ink-900);
+  --togo-color-surface:       #1B2226;
+  --togo-color-surface-alt:   #222B30;
+  --togo-color-border:        #2C383E;
+  --togo-color-text:          #E8EEF0;
+  --togo-color-text-muted:    var(--togo-slate-300);
+  --togo-color-accent:        var(--togo-cyan-500);
+  --togo-color-accent-strong: var(--togo-sky-500);
+  --togo-color-on-accent:     var(--togo-ink-900);
+  --togo-color-focus-ring:    var(--togo-cyan-400);
+  --togo-color-success:       var(--togo-success-500);
+  --togo-color-warn:          var(--togo-warn-500);
+  --togo-color-danger:        var(--togo-danger-500);
+}
+
+/* ── LIGHT ── */
+[data-theme="light"] {
+  --togo-color-bg:            var(--togo-mist-100);
+  --togo-color-surface:       var(--togo-white);
+  --togo-color-surface-alt:   var(--togo-mist-100);
+  --togo-color-border:        var(--togo-line-200);
+  --togo-color-text:          var(--togo-ink-900);
+  --togo-color-text-muted:    var(--togo-slate-500);
+  --togo-color-accent:        var(--togo-cobalt-500);
+  --togo-color-accent-strong: var(--togo-sky-500);
+  --togo-color-on-accent:     var(--togo-white);
+  --togo-color-focus-ring:    var(--togo-sky-500);
+  --togo-color-success:       var(--togo-success-500);
+  --togo-color-warn:          var(--togo-warn-500);
+  --togo-color-danger:        var(--togo-danger-500);
+}

package/package.json

@@ -0,0 +1,123 @@
+{
+  "name": "@togo-framework/ui",
+  "version": "0.1.0",
+  "description": "togo UI kit — the prism-style admin + auth component library (layout, data, charts, primitives). Framework-agnostic, RTL-ready, dark-first.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./shadcn": {
+      "types": "./dist/shadcn.d.ts",
+      "import": "./dist/shadcn.js"
+    },
+    "./shadcn.css": "./dist/shadcn.css",
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "public"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "lint:tokens": "node scripts/check-tokens.mjs",
+    "dev": "tsup --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "typecheck": "tsc --noEmit",
+    "prepare": "tsup"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=0.400.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "highlight.js": "^11.11.1",
+    "html-to-image": "^1.11.13",
+    "i18next": "^24.2.3",
+    "input-otp": "^1.4.2",
+    "leaflet": "^1.9.4",
+    "mermaid": "^11.15.0",
+    "react-day-picker": "^8.10.1",
+    "react-hook-form": "^7.61.1",
+    "react-i18next": "^15.7.4",
+    "react-icons": "^5.6.0",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^2.1.9",
+    "recharts": "^2.15.4",
+    "rehype-highlight": "^7.0.2",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^2.6.0",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^0.9.9"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.4.0",
+    "@storybook/addon-themes": "^8.4.0",
+    "@storybook/react": "^8.4.0",
+    "@storybook/react-vite": "^8.4.0",
+    "@storybook/test": "^8.4.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/leaflet": "^1.9.12",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "lucide-react": "^0.462.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^8.4.0",
+    "tailwindcss": "^4.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  }
+}