npm - @bsuite/theme - Versions diffs - 0.1.0 - Mend

@bsuite/theme 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/README.md +143 -0
package/dist/index.d.ts +35 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +19 -0
package/dist/react/ThemeProvider.d.ts +15 -0
package/dist/react/ThemeProvider.d.ts.map +1 -0
package/dist/react/ThemeProvider.js +86 -0
package/dist/react/index.d.ts +6 -0
package/dist/react/index.d.ts.map +1 -0
package/dist/react/index.js +3 -0
package/dist/react/useTheme.d.ts +18 -0
package/dist/react/useTheme.d.ts.map +1 -0
package/dist/react/useTheme.js +26 -0
package/dist/ssr/index.d.ts +43 -0
package/dist/ssr/index.d.ts.map +1 -0
package/dist/ssr/index.js +42 -0
package/package.json +66 -0
package/src/css/index.css +13 -0
package/src/css/utilities.css +59 -0
package/src/css/vars.css +99 -0
package/src/preset-v4.css +90 -0
package/src/tailwind-preset.js +144 -0

package/README.md ADDED Viewed

@@ -0,0 +1,143 @@
+# @bsuite/theme
+Universal D2C Neon Electric theme for the BSuite monorepo. Ships the canonical palette, Tailwind tokens, CSS variables, React ThemeProvider, and a framework-agnostic FOUC-prevention script.
+## What's inside
+- **CSS variables** — 11 neon electric colours + light/dark surface tokens + WCAG AA-compliant text tokens
+- **Tailwind v3 preset** — drop-in `presets: [require('@bsuite/theme/tailwind-preset')]`
+- **Tailwind v4 `@theme` block** — `@import '@bsuite/theme/preset-v4.css'`
+- **`<ThemeProvider>`** + **`useTheme()`** with localStorage persistence + system preference
+- **`getThemeInitScript()`** — stringified JS for inline `<script>` tags to prevent FOUC
+## Install
+```bash
+pnpm add @bsuite/theme
+```
+## Consumer setup
+### Vite (v4 Tailwind) — BSU / CRM7 / R80.3
+**1.** `src/index.css` or equivalent global stylesheet:
+```css
+@import 'tailwindcss';
+@import '@bsuite/theme/preset-v4.css';
+@import '@bsuite/theme/css';
+/* your app-specific @theme {} overrides below */
+```
+**2.** `src/main.tsx`:
+```tsx
+import { ThemeProvider } from '@bsuite/theme/react'
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <ThemeProvider>
+    <App />
+  </ThemeProvider>
+)
+```
+**3.** `index.html` — FOUC prevention:
+Paste the result of `getThemeInitScript()` into `<head>` before stylesheets.
+### Next.js 16 (v4 Tailwind) — conduit
+**1.** `src/app/globals.css`:
+```css
+@import 'tailwindcss';
+@import '@bsuite/theme/preset-v4.css';
+@import '@bsuite/theme/css';
+```
+**2.** `src/app/layout.tsx` — inline theme-init script in `<head>`:
+```tsx
+import Script from 'next/script'
+import { getThemeInitScript } from '@bsuite/theme/ssr'
+import { ThemeProvider } from '@bsuite/theme/react'
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <Script id="bsuite-theme-init" strategy="beforeInteractive">
+          {getThemeInitScript()}
+        </Script>
+      </head>
+      <body>
+        <ThemeProvider>{children}</ThemeProvider>
+      </body>
+    </html>
+  )
+}
+```
+### Vite (v3 Tailwind) — throughput
+**1.** `tailwind.config.js`:
+```js
+module.exports = {
+  presets: [require('@bsuite/theme/tailwind-preset')],
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+}
+```
+**2.** Global stylesheet:
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import '@bsuite/theme/css';
+```
+**3.** `src/main.tsx` + `index.html` — same as the v4 Vite setup above.
+## Using the hook
+```tsx
+import { useTheme } from '@bsuite/theme/react'
+export function ThemeToggleButton() {
+  const { theme, resolvedTheme, isDark, setTheme } = useTheme()
+  return (
+    <button onClick={() => setTheme(isDark ? 'light' : 'dark')}>
+      {isDark ? '☀️' : '🌙'}
+    </button>
+  )
+}
+```
+The `resolvedTheme` always returns `'light'` or `'dark'` — use this when you need the _effective_ theme (it resolves `'system'` for you).
+## Palette
+All 11 canonical electric colours are available via Tailwind classes:
+| Token | Hex | Use |
+|---|---|---|
+| `neon-electric-blue` | `#2563eb` | Primary, highlights |
+| `neon-electric-cyan` | `#00cec9` | Accents, borders |
+| `neon-electric-indigo` | `#4f46e5` | Secondary actions |
+| `neon-electric-purple` | `#6c5ce7` | Gradients, effects |
+| `neon-electric-magenta` | `#fd79a8` | Interactive |
+| `neon-electric-pink` | `#ec4899` | Hover states |
+| `neon-electric-coral` | `#ff4757` | Alerts, destructive |
+| `neon-electric-orange` | `#ff7675` | Warnings |
+| `neon-electric-yellow` | `#fdcb6e` | Info |
+| `neon-electric-green` | `#22c55e` | Success |
+| `neon-electric-lavender` | `#a29bfe` | Subtle accents |
+WCAG AA compliance: use `text-color-accent-text` and `text-color-primary-text` for text on light backgrounds. These are the accessible equivalents of cyan and blue — same visual identity, 5:1+ contrast on `#f2f2f2`.
+## License
+UNLICENSED — internal BSuite use only.

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,35 @@
+/**
+ * @bsuite/theme — root export
+ *
+ * Shared types + constants for the BSuite D2C Neon Electric theme.
+ *
+ * Most consumers want one of the subpath exports:
+ *
+ *   import '@bsuite/theme/css'                          // CSS vars + utilities
+ *   import { ThemeProvider, useTheme } from '@bsuite/theme/react'
+ *   import { getThemeInitScript } from '@bsuite/theme/ssr'
+ *   // + either require('@bsuite/theme/tailwind-preset') (TW v3)
+ *   //   or @import '@bsuite/theme/preset-v4.css'       (TW v4)
+ */
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type ResolvedTheme = 'light' | 'dark';
+/**
+ * localStorage key used to persist the user's theme preference.
+ * Namespaced to avoid collision with apps that already store a plain
+ * 'theme' key.
+ */
+export declare const THEME_STORAGE_KEY = "bsuite_theme";
+export interface ThemeContextValue {
+    /** The user's stored preference ('light' | 'dark' | 'system'). */
+    theme: ThemeMode;
+    /**
+     * The effective theme after resolving `'system'` — always `'light'` or
+     * `'dark'`. Use this to conditionally render light/dark variants.
+     */
+    resolvedTheme: ResolvedTheme;
+    /** Shorthand: resolvedTheme === 'dark'. */
+    isDark: boolean;
+    /** Update the theme. Persists to localStorage and applies the class. */
+    setTheme: (mode: ThemeMode) => void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AACnD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA;AAE5C;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,iBAAiB,CAAA;AAE/C,MAAM,WAAW,iBAAiB;IAChC,kEAAkE;IAClE,KAAK,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,aAAa,EAAE,aAAa,CAAA;IAC5B,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAA;IACf,wEAAwE;IACxE,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;CACpC"}

package/dist/index.js ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * @bsuite/theme — root export
+ *
+ * Shared types + constants for the BSuite D2C Neon Electric theme.
+ *
+ * Most consumers want one of the subpath exports:
+ *
+ *   import '@bsuite/theme/css'                          // CSS vars + utilities
+ *   import { ThemeProvider, useTheme } from '@bsuite/theme/react'
+ *   import { getThemeInitScript } from '@bsuite/theme/ssr'
+ *   // + either require('@bsuite/theme/tailwind-preset') (TW v3)
+ *   //   or @import '@bsuite/theme/preset-v4.css'       (TW v4)
+ */
+/**
+ * localStorage key used to persist the user's theme preference.
+ * Namespaced to avoid collision with apps that already store a plain
+ * 'theme' key.
+ */
+export const THEME_STORAGE_KEY = 'bsuite_theme';

package/dist/react/ThemeProvider.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import { type ThemeContextValue, type ThemeMode } from '../index';
+export declare const ThemeContext: import("react").Context<ThemeContextValue | undefined>;
+export interface ThemeProviderProps {
+    children: ReactNode;
+    /** Initial theme if nothing is in localStorage yet. Default: 'system'. */
+    defaultTheme?: ThemeMode;
+    /**
+     * localStorage key override. Defaults to `THEME_STORAGE_KEY = 'bsuite_theme'`.
+     * Only set this during migrations from a legacy key.
+     */
+    storageKey?: string;
+}
+export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/react/ThemeProvider.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/react/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAyC,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAA;AAExG,eAAO,MAAM,YAAY,wDAA0D,CAAA;AAEnF,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAA;IACnB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AA6BD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAuB,EACvB,UAA8B,GAC/B,EAAE,kBAAkB,2CA4DpB"}

package/dist/react/ThemeProvider.js ADDED Viewed

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import { THEME_STORAGE_KEY } from '../index';
+export const ThemeContext = createContext(undefined);
+/**
+ * Resolve a stored ThemeMode to the effective ResolvedTheme.
+ *
+ * In SSR / pre-hydration contexts (no `window`), returns 'dark' as a safe
+ * default — matches what the inline FOUC-prevention script sets when there's
+ * no stored preference.
+ */
+function resolveTheme(mode) {
+    if (typeof window === 'undefined')
+        return 'dark';
+    if (mode === 'system') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    return mode;
+}
+function applyThemeClass(resolved) {
+    if (typeof document === 'undefined')
+        return;
+    const root = document.documentElement;
+    if (resolved === 'dark') {
+        root.classList.add('dark');
+        root.classList.remove('light');
+    }
+    else {
+        root.classList.add('light');
+        root.classList.remove('dark');
+    }
+}
+export function ThemeProvider({ children, defaultTheme = 'system', storageKey = THEME_STORAGE_KEY, }) {
+    // We use lazy init so the first render already has the correct theme when
+    // running in the browser — combined with the pre-React FOUC script, this
+    // means the class on <html> and the React state are in sync from mount.
+    const [theme, setThemeState] = useState(() => {
+        if (typeof window === 'undefined')
+            return defaultTheme;
+        try {
+            const stored = window.localStorage.getItem(storageKey);
+            if (stored === 'light' || stored === 'dark' || stored === 'system')
+                return stored;
+        }
+        catch {
+            // localStorage can throw in privacy modes; fall through to default
+        }
+        return defaultTheme;
+    });
+    const [resolvedTheme, setResolvedTheme] = useState(() => resolveTheme(theme));
+    // Apply + re-apply whenever theme changes or (for 'system') the OS
+    // preference changes.
+    useEffect(() => {
+        const next = resolveTheme(theme);
+        setResolvedTheme(next);
+        applyThemeClass(next);
+    }, [theme]);
+    useEffect(() => {
+        if (theme !== 'system' || typeof window === 'undefined')
+            return;
+        const mq = window.matchMedia('(prefers-color-scheme: dark)');
+        const listener = () => {
+            const next = mq.matches ? 'dark' : 'light';
+            setResolvedTheme(next);
+            applyThemeClass(next);
+        };
+        mq.addEventListener('change', listener);
+        return () => mq.removeEventListener('change', listener);
+    }, [theme]);
+    const setTheme = useCallback((mode) => {
+        setThemeState(mode);
+        try {
+            window.localStorage.setItem(storageKey, mode);
+        }
+        catch {
+            // Ignore — localStorage not available
+        }
+    }, [storageKey]);
+    const value = useMemo(() => ({
+        theme,
+        resolvedTheme,
+        isDark: resolvedTheme === 'dark',
+        setTheme,
+    }), [theme, resolvedTheme, setTheme]);
+    return _jsx(ThemeContext.Provider, { value: value, children: children });
+}

package/dist/react/index.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export { ThemeProvider } from './ThemeProvider';
+export type { ThemeProviderProps } from './ThemeProvider';
+export { useTheme } from './useTheme';
+export type { ThemeContextValue, ThemeMode, ResolvedTheme } from '../index';
+export { THEME_STORAGE_KEY } from '../index';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA"}

package/dist/react/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export { ThemeProvider } from './ThemeProvider';
+export { useTheme } from './useTheme';
+export { THEME_STORAGE_KEY } from '../index';

package/dist/react/useTheme.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import type { ThemeContextValue } from '../index';
+/**
+ * Hook to read + update the current theme.
+ *
+ * Must be called inside a tree that has a `<ThemeProvider>` mounted —
+ * throws an explanatory error otherwise (catches the "component rendered
+ * outside provider" footgun at dev time).
+ *
+ * @example
+ *   const { theme, resolvedTheme, isDark, setTheme } = useTheme()
+ *   return (
+ *     <button onClick={() => setTheme(isDark ? 'light' : 'dark')}>
+ *       {isDark ? 'Switch to light' : 'Switch to dark'}
+ *     </button>
+ *   )
+ */
+export declare function useTheme(): ThemeContextValue;
+//# sourceMappingURL=useTheme.d.ts.map

package/dist/react/useTheme.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/react/useTheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAGjD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,IAAI,iBAAiB,CAU5C"}

package/dist/react/useTheme.js ADDED Viewed

@@ -0,0 +1,26 @@
+import { useContext } from 'react';
+import { ThemeContext } from './ThemeProvider';
+/**
+ * Hook to read + update the current theme.
+ *
+ * Must be called inside a tree that has a `<ThemeProvider>` mounted —
+ * throws an explanatory error otherwise (catches the "component rendered
+ * outside provider" footgun at dev time).
+ *
+ * @example
+ *   const { theme, resolvedTheme, isDark, setTheme } = useTheme()
+ *   return (
+ *     <button onClick={() => setTheme(isDark ? 'light' : 'dark')}>
+ *       {isDark ? 'Switch to light' : 'Switch to dark'}
+ *     </button>
+ *   )
+ */
+export function useTheme() {
+    const ctx = useContext(ThemeContext);
+    if (!ctx) {
+        throw new Error('@bsuite/theme: useTheme() called outside <ThemeProvider>. ' +
+            'Wrap your app (typically in main.tsx or app/layout.tsx) with ' +
+            "<ThemeProvider> from '@bsuite/theme/react'.");
+    }
+    return ctx;
+}

package/dist/ssr/index.d.ts ADDED Viewed

@@ -0,0 +1,43 @@
+export interface InitScriptOptions {
+    /** localStorage key to read. Defaults to `THEME_STORAGE_KEY`. */
+    storageKey?: string;
+}
+/**
+ * Returns a self-contained JavaScript string that — when executed before
+ * your React app hydrates — applies the correct `.dark` or `.light` class
+ * to `<html>` based on the user's stored preference (or their system
+ * preference if they chose 'system', or 'dark' as the default).
+ *
+ * The returned string is produced by this package itself, not from user
+ * input, so it is safe to inline in `<head>` via the framework's inline
+ * script mechanism (e.g. Next.js `<Script strategy="beforeInteractive">`
+ * or an HTML `<script>` tag). It has no external dependencies and uses
+ * no identifiers that might collide with host-page globals (wrapped in
+ * an IIFE).
+ *
+ * Embed it in an inline `<script>` tag in `<head>` — **before** any
+ * stylesheet that uses `.dark` selectors. This is the only way to avoid
+ * FOUC: any script that runs after first paint will flash the wrong theme.
+ *
+ * @example Next.js App Router (src/app/layout.tsx)
+ *   import Script from 'next/script'
+ *   import { getThemeInitScript } from '@bsuite/theme/ssr'
+ *   export default function RootLayout({ children }) {
+ *     return (
+ *       <html lang="en" suppressHydrationWarning>
+ *         <head>
+ *           <Script id="bsuite-theme-init" strategy="beforeInteractive">
+ *             {getThemeInitScript()}
+ *           </Script>
+ *         </head>
+ *         <body>{children}</body>
+ *       </html>
+ *     )
+ *   }
+ *
+ * @example Vite (index.html)
+ *   <!-- paste the exact output of getThemeInitScript() inline -->
+ *   <script>(function(){ ... })();</script>
+ */
+export declare function getThemeInitScript(options?: InitScriptOptions): string;
+//# sourceMappingURL=index.d.ts.map

package/dist/ssr/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ssr/index.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB;IAChC,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,iBAAsB,GAAG,MAAM,CAG1E"}

package/dist/ssr/index.js ADDED Viewed

@@ -0,0 +1,42 @@
+import { THEME_STORAGE_KEY } from '../index';
+/**
+ * Returns a self-contained JavaScript string that — when executed before
+ * your React app hydrates — applies the correct `.dark` or `.light` class
+ * to `<html>` based on the user's stored preference (or their system
+ * preference if they chose 'system', or 'dark' as the default).
+ *
+ * The returned string is produced by this package itself, not from user
+ * input, so it is safe to inline in `<head>` via the framework's inline
+ * script mechanism (e.g. Next.js `<Script strategy="beforeInteractive">`
+ * or an HTML `<script>` tag). It has no external dependencies and uses
+ * no identifiers that might collide with host-page globals (wrapped in
+ * an IIFE).
+ *
+ * Embed it in an inline `<script>` tag in `<head>` — **before** any
+ * stylesheet that uses `.dark` selectors. This is the only way to avoid
+ * FOUC: any script that runs after first paint will flash the wrong theme.
+ *
+ * @example Next.js App Router (src/app/layout.tsx)
+ *   import Script from 'next/script'
+ *   import { getThemeInitScript } from '@bsuite/theme/ssr'
+ *   export default function RootLayout({ children }) {
+ *     return (
+ *       <html lang="en" suppressHydrationWarning>
+ *         <head>
+ *           <Script id="bsuite-theme-init" strategy="beforeInteractive">
+ *             {getThemeInitScript()}
+ *           </Script>
+ *         </head>
+ *         <body>{children}</body>
+ *       </html>
+ *     )
+ *   }
+ *
+ * @example Vite (index.html)
+ *   <!-- paste the exact output of getThemeInitScript() inline -->
+ *   <script>(function(){ ... })();</script>
+ */
+export function getThemeInitScript(options = {}) {
+    const key = options.storageKey ?? THEME_STORAGE_KEY;
+    return `(function(){try{var s=localStorage.getItem('${key}');var t=s||'dark';var r=t;if(t==='system'){r=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}var c=document.documentElement.classList;if(r==='dark'){c.add('dark');c.remove('light');}else{c.add('light');c.remove('dark');}}catch(e){}})();`;
+}

package/package.json ADDED Viewed

@@ -0,0 +1,66 @@
+{
+  "name": "@bsuite/theme",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GaryOcean428/bsuite.git",
+    "directory": "packages/theme"
+  },
+  "description": "BSuite Universal D2C Neon Electric theme — Tailwind preset, CSS vars, ThemeProvider, SSR init helper. Shared across BSU, CRM7, conduit, R80.3, throughput.",
+  "files": [
+    "dist",
+    "src/css",
+    "src/tailwind-preset.js",
+    "src/preset-v4.css"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react/index.js",
+      "types": "./dist/react/index.d.ts"
+    },
+    "./ssr": {
+      "import": "./dist/ssr/index.js",
+      "types": "./dist/ssr/index.d.ts"
+    },
+    "./tailwind-preset": "./src/tailwind-preset.js",
+    "./preset-v4.css": "./src/preset-v4.css",
+    "./css": "./src/css/index.css",
+    "./vars.css": "./src/css/vars.css",
+    "./utilities.css": "./src/css/utilities.css"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "prepublishOnly": "pnpm build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "tailwindcss": ">=3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^18.3.28",
+    "@vitejs/plugin-react": "^5.2.0",
+    "jsdom": "^28.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "~5.7.3",
+    "vitest": "^3.2.4"
+  }
+}

package/src/css/index.css ADDED Viewed

@@ -0,0 +1,13 @@
+/*
+ * @bsuite/theme — root CSS entry point
+ *
+ * Import this once at the top of your app's global stylesheet:
+ *
+ *   @import '@bsuite/theme/css';
+ *
+ * Provides the full D2C Neon Electric palette as CSS custom properties
+ * plus reusable glow / neon-text utility classes.
+ */
+@import './vars.css';
+@import './utilities.css';

package/src/css/utilities.css ADDED Viewed

@@ -0,0 +1,59 @@
+/*
+ * @bsuite/theme — utility classes
+ *
+ * Pure CSS (no Tailwind @apply) so this file is safe to import from any
+ * consumer regardless of their Tailwind version (v3 or v4).
+ */
+/* ===== Glow effects (use box-shadow with alpha scaled by glow-strength) ===== */
+.glow-electric-blue {
+  box-shadow: 0 0 20px rgb(var(--neon-electric-blue-rgb) / var(--glow-strength));
+}
+.glow-electric-cyan {
+  box-shadow: 0 0 20px rgb(var(--neon-electric-cyan-rgb) / var(--glow-strength));
+}
+.glow-electric-indigo {
+  box-shadow: 0 0 20px rgb(var(--neon-electric-indigo-rgb) / var(--glow-strength));
+}
+.glow-electric-purple {
+  box-shadow: 0 0 20px rgb(var(--neon-electric-purple-rgb) / var(--glow-strength));
+}
+.glow-electric-pink {
+  box-shadow: 0 0 20px rgb(var(--neon-electric-pink-rgb) / var(--glow-strength));
+}
+.glow-electric-coral {
+  box-shadow: 0 0 20px rgb(var(--neon-electric-coral-rgb) / var(--glow-strength));
+}
+.glow-electric-magenta {
+  box-shadow: 0 0 20px rgb(var(--neon-electric-magenta-rgb) / var(--glow-strength));
+}
+/* ===== Neon text shadows ===== */
+.neon-text-cyan {
+  text-shadow: 0 0 10px rgb(var(--neon-electric-cyan-rgb) / 0.5),
+               0 0 20px rgb(var(--neon-electric-cyan-rgb) / 0.3);
+}
+.neon-text-electric {
+  text-shadow: 0 0 10px rgb(var(--neon-electric-blue-rgb) / 0.5),
+               0 0 20px rgb(var(--neon-electric-blue-rgb) / 0.3);
+}
+/* ===== Smooth theme transition ===== */
+.transition-theme {
+  transition:
+    background-color 300ms ease,
+    border-color 300ms ease,
+    color 300ms ease,
+    box-shadow 300ms ease;
+}
+/* ===== prefers-reduced-motion — cap animation duration ===== */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/src/css/vars.css ADDED Viewed

@@ -0,0 +1,99 @@
+/*
+ * @bsuite/theme — CSS custom properties (:root + .dark)
+ *
+ * Canonical D2C Neon Electric palette. Both hex values and RGB triplets are
+ * exported so consumers can use either pattern:
+ *
+ *   color: var(--neon-electric-blue);
+ *   background: rgb(var(--neon-electric-blue-rgb) / 0.4);
+ *
+ * The RGB-triplet form is what the Tailwind preset uses under the hood so
+ * `<alpha-value>` modifiers in Tailwind classes (e.g. bg-neon-electric-blue/40)
+ * resolve correctly.
+ */
+:root {
+  /* ===== Neon Electric (11 colours — FROZEN per D2C spec v1.00A) ===== */
+  --neon-electric-blue: #2563eb;
+  --neon-electric-cyan: #00cec9;
+  --neon-electric-indigo: #4f46e5;
+  --neon-electric-purple: #6c5ce7;
+  --neon-electric-magenta: #fd79a8;
+  --neon-electric-pink: #ec4899;
+  --neon-electric-coral: #ff4757;
+  --neon-electric-orange: #ff7675;
+  --neon-electric-yellow: #fdcb6e;
+  --neon-electric-green: #22c55e;
+  --neon-electric-lavender: #a29bfe;
+  /* RGB triplets for rgba() use and Tailwind alpha-value substitution */
+  --neon-electric-blue-rgb: 37 99 235;
+  --neon-electric-cyan-rgb: 0 206 201;
+  --neon-electric-indigo-rgb: 79 70 229;
+  --neon-electric-purple-rgb: 108 92 231;
+  --neon-electric-magenta-rgb: 253 121 168;
+  --neon-electric-pink-rgb: 236 72 153;
+  --neon-electric-coral-rgb: 255 71 87;
+  --neon-electric-orange-rgb: 255 118 117;
+  --neon-electric-yellow-rgb: 253 203 110;
+  --neon-electric-green-rgb: 34 197 94;
+  --neon-electric-lavender-rgb: 162 155 254;
+  /* ===== Light theme surfaces ===== */
+  --light-bg-primary: #f2f2f2;
+  --light-bg-secondary: #f8f9fa;
+  --light-bg-tertiary: #f1f3f4;
+  --light-bg-accent: #ffffff;
+  --light-text-primary: #2d3436;
+  --light-text-secondary: #636e72;
+  --light-text-tertiary: #74b9ff;
+  --light-text-quaternary: #a4afb7;
+  --light-border: #e9ecef;
+  --light-hover: #f1f3f4;
+  /* ===== Dark theme surfaces ===== */
+  --dark-bg-primary: #0a0e1a;
+  --dark-bg-secondary: #1a1f2e;
+  --dark-bg-tertiary: #2c3447;
+  --dark-bg-quaternary: #3c4558;
+  --dark-bg-accent: #252b3d;
+  --dark-text-primary: #f8f9fa;
+  --dark-text-secondary: #adb5bd;
+  --dark-text-tertiary: #6c757d;
+  --dark-text-quaternary: #495057;
+  --dark-border: #495057;
+  --dark-hover: #3c4558;
+  /* ===== Semantic status colours ===== */
+  --status-success: #00b894;
+  --status-warning: #fdcb6e;
+  --status-error: #ff4757;
+  --status-info: #00cec9;
+  /* ===== WCAG AA compliant text pairs =====
+   *
+   * Raw neon cyan #00cec9 on light #f2f2f2 is 1.76:1 — fails WCAG AA 4.5:1.
+   * These tokens are the accessible text equivalents for the same visual
+   * identity. Use these for any text, border, or icon that needs to pass
+   * contrast checks; use raw --neon-electric-cyan for backgrounds and
+   * decorative elements only. */
+  --color-accent-text: #006e6b;   /* Dark cyan — passes AA on light bg */
+  --color-primary-text: #0a47e5;  /* Saturated blue — passes AA on light bg */
+  /* ===== Glow + shadow strength multipliers ===== */
+  --glow-strength: 0.4;
+  --shadow-strength: 1;
+}
+.dark {
+  /* Neon palette is identical in dark mode — same raw colours, same RGB
+   * triplets. What changes is the intensity of glow/shadow effects, which
+   * we scale down to suit dark surfaces. */
+  --glow-strength: 0.6;
+  --shadow-strength: 0.8;
+  /* Accent/primary text tokens flip to the raw neons in dark mode because
+   * contrast on #0a0e1a navy is already ≥ 9:1 for those values. */
+  --color-accent-text: #00cec9;
+  --color-primary-text: #3b82f6;
+}

package/src/preset-v4.css ADDED Viewed

@@ -0,0 +1,90 @@
+/*
+ * @bsuite/theme — Tailwind v4 @theme block
+ *
+ * Tailwind v4 removed the preset system; design tokens are exposed to the
+ * Tailwind engine via CSS `@theme {}` blocks. Import this before any
+ * app-specific @theme overrides:
+ *
+ *   @import 'tailwindcss';
+ *   @import '@bsuite/theme/preset-v4.css';
+ *
+ *   @theme {
+ *     --color-app-primary: oklch(0.45 0.18 142);
+ *     ... app-specific overrides below
+ *   }
+ *
+ * Tailwind v4 generates classes automatically from @theme variables. So
+ * `--color-neon-electric-blue` → `bg-neon-electric-blue`, `text-neon-electric-blue`,
+ * `border-neon-electric-blue`, etc.
+ */
+@theme {
+  /* ===== Neon Electric palette (11 colours, canonical D2C) ===== */
+  --color-neon-electric-blue: #2563eb;
+  --color-neon-electric-cyan: #00cec9;
+  --color-neon-electric-indigo: #4f46e5;
+  --color-neon-electric-purple: #6c5ce7;
+  --color-neon-electric-magenta: #fd79a8;
+  --color-neon-electric-pink: #ec4899;
+  --color-neon-electric-coral: #ff4757;
+  --color-neon-electric-orange: #ff7675;
+  --color-neon-electric-yellow: #fdcb6e;
+  --color-neon-electric-green: #22c55e;
+  --color-neon-electric-lavender: #a29bfe;
+  /* ===== Light surface tokens ===== */
+  --color-light-bg-primary: #f2f2f2;
+  --color-light-bg-secondary: #f8f9fa;
+  --color-light-bg-tertiary: #f1f3f4;
+  --color-light-bg-accent: #ffffff;
+  --color-light-text-primary: #2d3436;
+  --color-light-text-secondary: #636e72;
+  /* ===== Dark surface tokens ===== */
+  --color-dark-bg-primary: #0a0e1a;
+  --color-dark-bg-secondary: #1a1f2e;
+  --color-dark-bg-tertiary: #2c3447;
+  --color-dark-bg-accent: #252b3d;
+  --color-dark-text-primary: #f8f9fa;
+  --color-dark-text-secondary: #adb5bd;
+  /* ===== Semantic status ===== */
+  --color-status-success: #00b894;
+  --color-status-warning: #fdcb6e;
+  --color-status-error: #ff4757;
+  --color-status-info: #00cec9;
+  /* ===== Animations (Tailwind v4 exposes via --animate-*) ===== */
+  --animate-pulse-soft: pulse-soft 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-glow: glow 2s ease-in-out infinite alternate;
+  --animate-neon-pulse: neon-pulse 2s ease-in-out infinite;
+  --animate-float: float 3s ease-in-out infinite;
+  --animate-shimmer: shimmer 2s infinite;
+  --animate-typing: typing 1.5s infinite;
+}
+/* Keyframes live outside @theme because v4 doesn't expose them there. */
+@keyframes pulse-soft {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+@keyframes glow {
+  0% { box-shadow: 0 0 5px rgba(0, 206, 201, 0.2); }
+  100% { box-shadow: 0 0 20px rgba(0, 206, 201, 0.6); }
+}
+@keyframes neon-pulse {
+  0%, 100% { text-shadow: 0 0 10px rgba(0, 206, 201, 0.3); }
+  50% { text-shadow: 0 0 20px rgba(0, 206, 201, 0.8); }
+}
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+}
+@keyframes shimmer {
+  0% { background-position: -1000px 0; }
+  100% { background-position: 1000px 0; }
+}
+@keyframes typing {
+  0%, 60% { opacity: 1; }
+  30% { opacity: 0.4; }
+}

package/src/tailwind-preset.js ADDED Viewed

@@ -0,0 +1,144 @@
+/**
+ * @bsuite/theme — Tailwind v3 preset
+ *
+ * Consume via:
+ *   // tailwind.config.js (CommonJS)
+ *   module.exports = {
+ *     presets: [require('@bsuite/theme/tailwind-preset')],
+ *     content: ['./src/**\/*.{js,ts,jsx,tsx}'],
+ *   }
+ *
+ * Extends Tailwind's theme with the D2C Neon Electric palette, light/dark
+ * surface tokens, semantic status colours, gradients, glow shadows, and
+ * the six canonical animations. Does not override Tailwind's default scale.
+ *
+ * The `rgb(var(--*-rgb) / <alpha-value>)` pattern makes Tailwind alpha-value
+ * modifiers work (e.g. `bg-neon-electric-blue/40`). Requires the companion
+ * CSS vars to be loaded via `@import '@bsuite/theme/css'`.
+ *
+ * NOTE: Tailwind v4 apps should import `@bsuite/theme/preset-v4.css` instead.
+ * v4 removed the preset system — presets exist only for v3.
+ */
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  theme: {
+    extend: {
+      colors: {
+        neon: {
+          'electric-blue': 'rgb(var(--neon-electric-blue-rgb) / <alpha-value>)',
+          'electric-cyan': 'rgb(var(--neon-electric-cyan-rgb) / <alpha-value>)',
+          'electric-indigo': 'rgb(var(--neon-electric-indigo-rgb) / <alpha-value>)',
+          'electric-purple': 'rgb(var(--neon-electric-purple-rgb) / <alpha-value>)',
+          'electric-magenta': 'rgb(var(--neon-electric-magenta-rgb) / <alpha-value>)',
+          'electric-pink': 'rgb(var(--neon-electric-pink-rgb) / <alpha-value>)',
+          'electric-coral': 'rgb(var(--neon-electric-coral-rgb) / <alpha-value>)',
+          'electric-orange': 'rgb(var(--neon-electric-orange-rgb) / <alpha-value>)',
+          'electric-yellow': 'rgb(var(--neon-electric-yellow-rgb) / <alpha-value>)',
+          'electric-green': 'rgb(var(--neon-electric-green-rgb) / <alpha-value>)',
+          'electric-lavender': 'rgb(var(--neon-electric-lavender-rgb) / <alpha-value>)',
+        },
+        light: {
+          bg: {
+            primary: 'var(--light-bg-primary)',
+            secondary: 'var(--light-bg-secondary)',
+            tertiary: 'var(--light-bg-tertiary)',
+            accent: 'var(--light-bg-accent)',
+          },
+          text: {
+            primary: 'var(--light-text-primary)',
+            secondary: 'var(--light-text-secondary)',
+            tertiary: 'var(--light-text-tertiary)',
+            quaternary: 'var(--light-text-quaternary)',
+          },
+          border: 'var(--light-border)',
+          hover: 'var(--light-hover)',
+        },
+        dark: {
+          bg: {
+            primary: 'var(--dark-bg-primary)',
+            secondary: 'var(--dark-bg-secondary)',
+            tertiary: 'var(--dark-bg-tertiary)',
+            quaternary: 'var(--dark-bg-quaternary)',
+            accent: 'var(--dark-bg-accent)',
+          },
+          text: {
+            primary: 'var(--dark-text-primary)',
+            secondary: 'var(--dark-text-secondary)',
+            tertiary: 'var(--dark-text-tertiary)',
+            quaternary: 'var(--dark-text-quaternary)',
+          },
+          border: 'var(--dark-border)',
+          hover: 'var(--dark-hover)',
+        },
+        status: {
+          success: 'var(--status-success)',
+          warning: 'var(--status-warning)',
+          error: 'var(--status-error)',
+          info: 'var(--status-info)',
+        },
+      },
+      backgroundImage: {
+        'gradient-brand':
+          'linear-gradient(135deg, #ff4757 0%, #ff7675 25%, #fdcb6e 50%, #00cec9 75%, #a29bfe 100%)',
+        'gradient-electric':
+          'linear-gradient(135deg, #2563eb 0%, #00cec9 50%, #ec4899 100%)',
+        'gradient-neon':
+          'linear-gradient(90deg, #00cec9 0%, #6c5ce7 50%, #ff4757 100%)',
+        'gradient-chat-user':
+          'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        'gradient-chat-agent':
+          'linear-gradient(135deg, #2563eb 0%, #ec4899 100%)',
+        'gradient-neural':
+          'radial-gradient(circle at center, rgba(0, 206, 201, 0.1) 0%, transparent 50%)',
+      },
+      boxShadow: {
+        'glow-electric-blue': '0 0 20px rgb(var(--neon-electric-blue-rgb) / var(--glow-strength))',
+        'glow-electric-cyan': '0 0 20px rgb(var(--neon-electric-cyan-rgb) / var(--glow-strength))',
+        'glow-electric-purple': '0 0 20px rgb(var(--neon-electric-purple-rgb) / var(--glow-strength))',
+        'glow-electric-pink': '0 0 20px rgb(var(--neon-electric-pink-rgb) / var(--glow-strength))',
+        'glow-electric-coral': '0 0 20px rgb(var(--neon-electric-coral-rgb) / var(--glow-strength))',
+        'glow-electric-magenta': '0 0 20px rgb(var(--neon-electric-magenta-rgb) / var(--glow-strength))',
+      },
+      animation: {
+        'pulse-soft': 'pulse-soft 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        glow: 'glow 2s ease-in-out infinite alternate',
+        typing: 'typing 1.5s infinite',
+        shimmer: 'shimmer 2s infinite',
+        float: 'float 3s ease-in-out infinite',
+        'neon-pulse': 'neon-pulse 2s ease-in-out infinite',
+      },
+      keyframes: {
+        'pulse-soft': {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.7' },
+        },
+        glow: {
+          '0%': { boxShadow: '0 0 5px rgba(0, 206, 201, 0.2)' },
+          '100%': { boxShadow: '0 0 20px rgba(0, 206, 201, 0.6)' },
+        },
+        typing: {
+          '0%, 60%': { opacity: '1' },
+          '30%': { opacity: '0.4' },
+        },
+        shimmer: {
+          '0%': { backgroundPosition: '-1000px 0' },
+          '100%': { backgroundPosition: '1000px 0' },
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0px)' },
+          '50%': { transform: 'translateY(-10px)' },
+        },
+        'neon-pulse': {
+          '0%, 100%': { textShadow: '0 0 10px rgba(0, 206, 201, 0.3)' },
+          '50%': { textShadow: '0 0 20px rgba(0, 206, 201, 0.8)' },
+        },
+      },
+    },
+  },
+}