@bsuite/ui 0.1.0

package/README.md

@@ -0,0 +1,53 @@
+# @bsuite/ui
+
+Shared UI primitives for the BSuite apps (D2C Neon Electric + Corporate brands).
+
+Ships as an npm package because Vercel deploys each BSuite app from its own
+GitHub repo — the parent monorepo's `packages/` directory does NOT exist in
+the Vercel build context. Consumers install from npm with a pinned semver.
+
+## Components
+
+### `DotPattern`
+
+Full-viewport dot-pattern background. SVG `<pattern>` tiling — ~1 DOM node
+(vs ~1,800 motion.circle nodes on a typical viewport).
+
+```tsx
+import { DotPattern } from '@bsuite/ui'
+
+<div className="relative">
+  <DotPattern
+    width={28}
+    height={28}
+    cr={1.5}
+    className="opacity-[0.35] [color:var(--accent-primary)]"
+  />
+  {/* page content */}
+</div>
+```
+
+Colour control via Tailwind `text-*` utilities or inline `[color:var(...)]`
+(dots use `fill="currentColor"`).
+
+## Utils
+
+### `cn(...classes)`
+
+shadcn-style className merger — `clsx` + `tailwind-merge`. Available for
+consumers that want to compose `@bsuite/ui` components with local overrides
+without pulling shadcn again.
+
+## Releases
+
+1. Edit source under `src/`.
+2. `pnpm -C packages/ui test` — all cases must pass.
+3. `pnpm -C packages/ui build` — emits `dist/`.
+4. Bump version in `package.json` (semver).
+5. `npm publish --access public` from `packages/ui/`.
+6. Update consumer `package.json` to the new version, regenerate lockfile
+   **outside** the bsuite tree (see root `CLAUDE.md` rule 7), commit the
+   lockfile + a consumer-side bump PR.
+
+**NEVER** use `workspace:*` or `file:../packages/ui` for this package in a
+consumer — Vercel builds can't resolve those.

package/dist/dot-pattern.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+/**
+ * DotPattern Component Props
+ *
+ * @param width  Horizontal spacing between dots (default 16)
+ * @param height Vertical spacing between dots (default 16)
+ * @param x      X-offset of the entire pattern (default 0)
+ * @param y      Y-offset of the entire pattern (default 0)
+ * @param cx     X-offset of individual dots within a tile (default 1)
+ * @param cy     Y-offset of individual dots within a tile (default 1)
+ * @param cr     Radius of each dot (default 1)
+ * @param glow   When true, the whole pattern receives an `animate-dot-glow`
+ *               class. Consumer app is responsible for defining that
+ *               @keyframes rule in its CSS (kept out of this package so
+ *               apps can theme the glow to their brand).
+ * @param className Additional classes merged via `tailwind-merge` so
+ *               consumers can override the default `text-neutral-400/80`
+ *               colour (dots use `fill="currentColor"` so overriding
+ *               `text-*` is the supported way to set colour).
+ */
+export interface DotPatternProps extends React.SVGProps<SVGSVGElement> {
+    width?: number;
+    height?: number;
+    x?: number;
+    y?: number;
+    cx?: number;
+    cy?: number;
+    cr?: number;
+    className?: string;
+    glow?: boolean;
+}
+/**
+ * Full-viewport dot pattern background.
+ *
+ * Implementation note: uses a single SVG `<pattern>` for browser-native
+ * tiling (~1 DOM node) rather than one `<motion.circle>` per dot
+ * (~1,800 nodes on a typical viewport). This is a ~100× difference in
+ * layout/paint cost on first render — measurable on lower-end Android
+ * devices and during theme transitions.
+ *
+ * Promoted from `crm7/src/components/magicui/dot-pattern.tsx` to this
+ * shared package so all four D2C apps (BSU, CRM7, R80.3, Throughput)
+ * render an identical background without copy-paste drift. The Braden
+ * corporate app deliberately does NOT use this — its brand is photo-
+ * forward, not a tech-grid aesthetic.
+ */
+export declare function DotPattern({ width, height, x, y, cx, cy, cr, className, glow, ...props }: DotPatternProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dot-pattern.d.ts.map

package/dist/dot-pattern.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dot-pattern.d.ts","sourceRoot":"","sources":["../src/dot-pattern.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAA;AAGpC;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAU,EACV,MAAW,EACX,CAAK,EACL,CAAK,EACL,EAAM,EACN,EAAM,EACN,EAAM,EACN,SAAS,EACT,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,eAAe,2CA4BjB"}

package/dist/dot-pattern.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cn } from './utils.js';
+/**
+ * Full-viewport dot pattern background.
+ *
+ * Implementation note: uses a single SVG `<pattern>` for browser-native
+ * tiling (~1 DOM node) rather than one `<motion.circle>` per dot
+ * (~1,800 nodes on a typical viewport). This is a ~100× difference in
+ * layout/paint cost on first render — measurable on lower-end Android
+ * devices and during theme transitions.
+ *
+ * Promoted from `crm7/src/components/magicui/dot-pattern.tsx` to this
+ * shared package so all four D2C apps (BSU, CRM7, R80.3, Throughput)
+ * render an identical background without copy-paste drift. The Braden
+ * corporate app deliberately does NOT use this — its brand is photo-
+ * forward, not a tech-grid aesthetic.
+ */
+export function DotPattern({ width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1, cr = 1, className, glow = false, ...props }) {
+    const id = useId();
+    return (_jsxs("svg", { "aria-hidden": "true", className: cn('pointer-events-none absolute inset-0 h-full w-full text-neutral-400/80', glow && 'animate-dot-glow', className), ...props, children: [_jsx("defs", { children: _jsx("pattern", { id: `${id}-pattern`, x: x, y: y, width: width, height: height, patternUnits: "userSpaceOnUse", children: _jsx("circle", { cx: cx, cy: cy, r: cr, fill: "currentColor" }) }) }), _jsx("rect", { width: "100%", height: "100%", fill: `url(#${id}-pattern)` })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { DotPattern, type DotPatternProps } from './dot-pattern.js';
+export { cn } from './utils.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { DotPattern } from './dot-pattern.js';
+export { cn } from './utils.js';

package/dist/utils.d.ts

@@ -0,0 +1,10 @@
+import { type ClassValue } from 'clsx';
+/**
+ * Merge Tailwind classNames, resolving conflicts (later wins).
+ *
+ * Behaviour-equivalent to the shadcn/ui `cn()` helper every BSuite app
+ * already uses locally — centralising it here so every `@bsuite/ui`
+ * component can share one implementation without consumers wiring it up.
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C;;;;;;GAMG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD"}

package/dist/utils.js

@@ -0,0 +1,12 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+/**
+ * Merge Tailwind classNames, resolving conflicts (later wins).
+ *
+ * Behaviour-equivalent to the shadcn/ui `cn()` helper every BSuite app
+ * already uses locally — centralising it here so every `@bsuite/ui`
+ * component can share one implementation without consumers wiring it up.
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@bsuite/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "UNLICENSED",
+  "description": "Shared UI primitives for the BSuite apps (D2C Neon Electric + Corporate brands).",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GaryOcean428/bsuite.git",
+    "directory": "packages/ui"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dot-pattern": {
+      "import": "./dist/dot-pattern.js",
+      "types": "./dist/dot-pattern.d.ts"
+    },
+    "./utils": {
+      "import": "./dist/utils.js",
+      "types": "./dist/utils.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.5"
+  },
+  "peerDependencies": {
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.6",
+    "@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"
+  }
+}