@bsuite/ui 0.1.0 → 0.3.0

package/README.md

@@ -30,6 +30,113 @@ import { DotPattern } from '@bsuite/ui'
 Colour control via Tailwind `text-*` utilities or inline `[color:var(...)]`
 (dots use `fill="currentColor"`).
 
+### `Logo`
+
+Slot-aware, theme-aware, branding-aware logo component for all BSuite apps.
+
+```tsx
+import { Logo } from '@bsuite/ui'
+
+<Logo slot="header" colorScheme="auto" />
+```
+
+### `D2CDefaultLogo`
+
+Inline D2C Neon Electric SVG logo (no asset dependency).
+
+```tsx
+import { D2CDefaultLogo } from '@bsuite/ui'
+
+<D2CDefaultLogo className="h-8 w-auto" />
+```
+
+## Branding Components (v0.3.0+)
+
+### `OklchColorPicker`
+
+A color input component for OKLCH color format (BSuite standard).
+
+```tsx
+import { OklchColorPicker } from '@bsuite/ui'
+
+<OklchColorPicker
+  value="oklch(0.546 0.215 262.9)"
+  onChange={(value) => console.log(value)}
+  label="Primary Color"
+  description="Your brand's primary color in OKLCH format"
+/>
+```
+
+**Features:**
+- Live color preview
+- Input fields for L (lightness), C (chroma), H (hue)
+- Slider controls for easy adjustment
+- Validation of OKLCH format
+- Accessible labels and error messages
+
+### `ColorEditorSheet`
+
+A sheet/dialog for editing branding colors with a slot-based color editor.
+
+```tsx
+import { ColorEditorSheet, OklchColorPicker } from '@bsuite/ui'
+
+<ColorEditorSheet
+  open={isOpen}
+  onOpenChange={setIsOpen}
+  title="Edit Primary Color"
+  description="Adjust the OKLCH color values"
+  value="oklch(0.546 0.215 262.9)"
+  onSave={(value) => updateBranding('primary', value)}
+  renderEditor={(props) => <OklchColorPicker {...props} />}
+/>
+```
+
+**Features:**
+- Slide-out sheet interface
+- Slot-based color editor (inject your own picker)
+- Save/Cancel actions
+- Responsive design
+- Accessible dialog implementation
+
+### `BrandingCard`
+
+A card component for displaying and editing tenant branding configuration.
+
+```tsx
+import { BrandingCard, OklchColorPicker } from '@bsuite/ui'
+
+<BrandingCard
+  branding={{
+    primary: "oklch(0.546 0.215 262.9)",
+    accent: "oklch(0.769 0.132 191.7)",
+    logo_url: "https://example.com/logo.svg",
+    company_name: "Acme Corp"
+  }}
+  onUpdate={async (key, value) => {
+    await updateTenantBranding(key, value)
+  }}
+  renderColorEditor={(props) => <OklchColorPicker {...props} />}
+/>
+```
+
+**Features:**
+- Display current branding values (colors, logos, company name)
+- Edit buttons for each branding property
+- Integrated color editing with ColorEditorSheet
+- Image preview for logos
+- Accessible and responsive design
+- Support for light/dark mode logo variants
+
+**Branding Properties:**
+- `primary` - Primary action color (OKLCH)
+- `accent` - Accent/secondary color (OKLCH)
+- `logo_url` - Main logo URL
+- `logo_light_url` - Light mode logo variant (optional)
+- `logo_dark_url` - Dark mode logo variant (optional)
+- `favicon_url` - Favicon URL (16x16 or 32x32)
+- `company_name` - Company name for alt text
+
 ## Utils
 
 ### `cn(...classes)`
@@ -38,6 +145,27 @@ shadcn-style className merger — `clsx` + `tailwind-merge`. Available for
 consumers that want to compose `@bsuite/ui` components with local overrides
 without pulling shadcn again.
 
+## Module Exports
+
+The package provides subpath exports for better tree-shaking:
+
+```tsx
+// Main exports
+import { Logo, BrandingCard } from '@bsuite/ui'
+
+// Dot pattern only
+import { DotPattern } from '@bsuite/ui/dot-pattern'
+
+// Utils only
+import { cn } from '@bsuite/ui/utils'
+
+// Branding components only
+import { BrandingCard, ColorEditorSheet, OklchColorPicker } from '@bsuite/ui/branding'
+
+// SVG asset
+import logoSvg from '@bsuite/ui/assets/d2c-default-logo.svg'
+```
+
 ## Releases
 
 1. Edit source under `src/`.

package/dist/Logo.d.ts

@@ -0,0 +1,97 @@
+export type LogoSlot = 'favicon' | 'sidebar' | 'auth' | 'marketing' | 'header';
+export type LogoColorScheme = 'light' | 'dark' | 'auto';
+export type AppSlug = 'crm7' | 'bsu' | 'conduit' | 'r80' | 'throughput' | 'braden';
+/**
+ * Shape consumed by the resolver. Each field corresponds to a branding tier;
+ * `null` / `undefined` signals "not set at this tier — fall through".
+ *
+ * The Tier-0 sub-org walk happens server-side in
+ * `branding_json_for_tenant()` so by the time the client sees these values
+ * the parent_tenant_id chain has already collapsed into Tier 2/3 fields.
+ * The dedicated `app_*` fields keep Tier 3 (per-app override) distinct from
+ * Tier 2 (per-tenant) so the resolver can express the four-step precedence.
+ */
+export interface LogoBranding {
+    /** App-specific override logo URL (any scheme). */
+    app_logo_url?: string | null;
+    /** App-specific override logo URL for light mode. */
+    app_logo_light_url?: string | null;
+    /** App-specific override logo URL for dark mode. */
+    app_logo_dark_url?: string | null;
+    /** Tenant-level logo URL (any scheme). */
+    logo_url?: string | null;
+    /** Tenant-level logo URL for light mode. */
+    logo_light_url?: string | null;
+    /** Tenant-level logo URL for dark mode. */
+    logo_dark_url?: string | null;
+    /** Tenant-level favicon URL (square mark). */
+    favicon_url?: string | null;
+    /** Tenant-level mark / icon (square). */
+    mark_url?: string | null;
+    /** Platform default logo URL (any scheme). */
+    platform_logo_url?: string | null;
+    /** Platform default light-mode logo URL. */
+    platform_logo_light_url?: string | null;
+    /** Platform default dark-mode logo URL. */
+    platform_logo_dark_url?: string | null;
+    /** Platform default mark/icon URL. */
+    platform_mark_url?: string | null;
+    /** Platform default favicon URL. */
+    platform_favicon_url?: string | null;
+    /** Display name used as alt-text fallback when no `alt` prop is supplied. */
+    company_name?: string | null;
+}
+export interface ResolvedLogo {
+    /** Final URL, or `null` if every tier produced no candidate. */
+    src: string | null;
+    /** Which tier produced the URL — `'default'` means the SVG fallback. */
+    tier: 'app' | 'tenant' | 'platform' | 'default';
+    /** Resolved colour scheme (`'auto'` collapsed to concrete value). */
+    scheme: 'light' | 'dark';
+}
+export interface LogoProps {
+    /** Layout slot. Drives default dimensions. */
+    slot?: LogoSlot;
+    /** Colour scheme. `'auto'` reads `<html class="dark">` at render time. */
+    colorScheme?: LogoColorScheme;
+    /** Optional className for the rendered element. */
+    className?: string;
+    /** Image alt text. Defaults to `branding.company_name ?? 'BSuite'`. */
+    alt?: string;
+    /** Explicit width override (px). */
+    width?: number;
+    /** Explicit height override (px). */
+    height?: number;
+    /**
+     * Fully-resolved 4-tier branding shape. Pass `null` / `undefined` to render
+     * the default SVG mark. Consumers typically wire this from their app-level
+     * `useBranding({tenantId, appSlug})` hook.
+     */
+    branding?: LogoBranding | null;
+    /**
+     * Optional app slug — used as a tie-breaker when picking a Tier-1 platform
+     * default that may have app-specific entries in the future. Currently
+     * informational only (kept for forward-compat with bsuite#320 sub-org work).
+     */
+    appSlug?: AppSlug;
+}
+/**
+ * Resolve the final logo URL across all four tiers.
+ *
+ * Pure function. Stable, deterministic, and tested for 100% branch coverage.
+ *
+ * @param branding — merged 4-tier branding shape (server-resolved sub-org chain).
+ * @param slot     — layout slot. `favicon` prefers mark/favicon fields.
+ * @param scheme   — concrete colour scheme (callers should pre-resolve `'auto'`).
+ */
+export declare function resolveLogoUrl(branding: LogoBranding | null | undefined, slot: LogoSlot, scheme: 'light' | 'dark'): ResolvedLogo;
+/**
+ * Slot-aware, theme-aware, branding-aware logo component.
+ *
+ * Renders an `<img>` for resolved URLs and the inline D2C default SVG when
+ * no URL is available at any tier. Memoised because the same component
+ * frequently mounts in app shells (header, sidebar, auth gate) and the
+ * resolver inputs are stable.
+ */
+export declare const Logo: import("react").MemoExoticComponent<({ slot, colorScheme, className, alt, width, height, branding, appSlug, }: LogoProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=Logo.d.ts.map

package/dist/Logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../src/Logo.tsx"],"names":[],"mappings":"AAgCA,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;AAC9E,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AACvD,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG,QAAQ,CAAA;AAElF;;;;;;;;;GASG;AACH,MAAM,WAAW,YAAY;IAE3B,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,qDAAqD;IACrD,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC,oDAAoD;IACpD,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAGjC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAGxB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,4CAA4C;IAC5C,uBAAuB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvC,2CAA2C;IAC3C,sBAAsB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtC,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,oCAAoC;IACpC,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAGpC,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B;AAED,MAAM,WAAW,YAAY;IAC3B,gEAAgE;IAChE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,wEAAwE;IACxE,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;IAC/C,qEAAqE;IACrE,MAAM,EAAE,OAAO,GAAG,MAAM,CAAA;CACzB;AAED,MAAM,WAAW,SAAS;IACxB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,0EAA0E;IAC1E,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uEAAuE;IACvE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAqBD;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,EACzC,IAAI,EAAE,QAAQ,EACd,MAAM,EAAE,OAAO,GAAG,MAAM,GACvB,YAAY,CA2Cd;AAaD;;;;;;;GAOG;AACH,eAAO,MAAM,IAAI,iHASd,SAAS,6CAuCV,CAAA"}

package/dist/Logo.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * <Logo /> — slot-aware, theme-aware, branding-aware logo for all BSuite apps.
+ *
+ * Resolves the rendered image URL across **four tiers**, in order:
+ *
+ *   Tier 0  sub-org      — server-side walks parent_tenant_id chain via the
+ *                          `branding_json_for_tenant()` SECURITY DEFINER RPC,
+ *                          so by the time the value arrives client-side it has
+ *                          already been resolved through the sub-org chain
+ *                          and surfaces in the `app_*` / `logo_*` fields below.
+ *   Tier 3  app override — `app_logo_url` / `app_logo_light_url` /
+ *                          `app_logo_dark_url` from `tenant_app_branding`
+ *                          (highest precedence when supplied).
+ *   Tier 2  enterprise   — `logo_url` / `logo_light_url` / `logo_dark_url`
+ *                          from `tenant_branding`.
+ *   Tier 1  platform     — `platform_logo_url` / variants from
+ *                          `platform_branding` (D2C defaults).
+ *   Default              — Inline D2C Neon Electric SVG (no asset dependency).
+ *
+ * The resolver is a pure function (`resolveLogoUrl`) — unit-tested for 100%
+ * branch coverage. The component is a thin shell that calls the resolver and
+ * picks the SVG default when the URL is null.
+ *
+ * To keep `@bsuite/ui` portable (it must work in BSU, CRM7, conduit, R80.3,
+ * throughput AND braden, which all have different branding hooks), the
+ * component itself does NOT call any `useBranding` hook. It reads from props.
+ * Each consumer wires its own hook in a thin wrapper (BSU's `BSULogo.tsx`).
+ */
+import { memo } from 'react';
+import { D2CDefaultLogo } from './default-logo.js';
+import { cn } from './utils.js';
+/** Default dimensions per slot. Matches BSU's existing BSULogo contract. */
+const SLOT_SIZES = {
+    favicon: { width: 32, height: 32 },
+    sidebar: { width: 112, height: 28 },
+    auth: { width: 160, height: 40 },
+    marketing: { width: 200, height: 50 },
+    header: { width: 120, height: 30 },
+};
+function pickFirstString(...candidates) {
+    for (const value of candidates) {
+        if (typeof value === 'string') {
+            const trimmed = value.trim();
+            if (trimmed.length > 0)
+                return trimmed;
+        }
+    }
+    return null;
+}
+/**
+ * Resolve the final logo URL across all four tiers.
+ *
+ * Pure function. Stable, deterministic, and tested for 100% branch coverage.
+ *
+ * @param branding — merged 4-tier branding shape (server-resolved sub-org chain).
+ * @param slot     — layout slot. `favicon` prefers mark/favicon fields.
+ * @param scheme   — concrete colour scheme (callers should pre-resolve `'auto'`).
+ */
+export function resolveLogoUrl(branding, slot, scheme) {
+    if (!branding) {
+        return { src: null, tier: 'default', scheme };
+    }
+    // Favicon slot has its own field family — mark/favicon, not the wordmark.
+    if (slot === 'favicon') {
+        const appTier = pickFirstString(branding.app_logo_url);
+        if (appTier)
+            return { src: appTier, tier: 'app', scheme };
+        const tenantTier = pickFirstString(branding.favicon_url, branding.mark_url, branding.logo_url);
+        if (tenantTier)
+            return { src: tenantTier, tier: 'tenant', scheme };
+        const platformTier = pickFirstString(branding.platform_favicon_url, branding.platform_mark_url, branding.platform_logo_url);
+        if (platformTier)
+            return { src: platformTier, tier: 'platform', scheme };
+        return { src: null, tier: 'default', scheme };
+    }
+    // Wordmark slots: prefer scheme-specific, then scheme-neutral, at each tier.
+    const appCandidates = scheme === 'dark'
+        ? [branding.app_logo_dark_url, branding.app_logo_url, branding.app_logo_light_url]
+        : [branding.app_logo_light_url, branding.app_logo_url, branding.app_logo_dark_url];
+    const appTier = pickFirstString(...appCandidates);
+    if (appTier)
+        return { src: appTier, tier: 'app', scheme };
+    const tenantCandidates = scheme === 'dark'
+        ? [branding.logo_dark_url, branding.logo_url, branding.logo_light_url]
+        : [branding.logo_light_url, branding.logo_url, branding.logo_dark_url];
+    const tenantTier = pickFirstString(...tenantCandidates);
+    if (tenantTier)
+        return { src: tenantTier, tier: 'tenant', scheme };
+    const platformCandidates = scheme === 'dark'
+        ? [branding.platform_logo_dark_url, branding.platform_logo_url, branding.platform_logo_light_url]
+        : [branding.platform_logo_light_url, branding.platform_logo_url, branding.platform_logo_dark_url];
+    const platformTier = pickFirstString(...platformCandidates);
+    if (platformTier)
+        return { src: platformTier, tier: 'platform', scheme };
+    return { src: null, tier: 'default', scheme };
+}
+/**
+ * Collapse the `'auto'` colour scheme to a concrete value by reading the
+ * `dark` class on `<html>`. SSR-safe: returns `'light'` when document is
+ * undefined.
+ */
+function resolveAutoScheme(scheme) {
+    if (scheme !== 'auto')
+        return scheme;
+    if (typeof document === 'undefined')
+        return 'light';
+    return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+}
+/**
+ * Slot-aware, theme-aware, branding-aware logo component.
+ *
+ * Renders an `<img>` for resolved URLs and the inline D2C default SVG when
+ * no URL is available at any tier. Memoised because the same component
+ * frequently mounts in app shells (header, sidebar, auth gate) and the
+ * resolver inputs are stable.
+ */
+export const Logo = memo(function Logo({ slot = 'sidebar', colorScheme = 'auto', className, alt, width, height, branding, appSlug, }) {
+    const resolvedScheme = resolveAutoScheme(colorScheme);
+    const { src, tier } = resolveLogoUrl(branding, slot, resolvedScheme);
+    const dims = SLOT_SIZES[slot];
+    const finalWidth = width ?? dims.width;
+    const finalHeight = height ?? dims.height;
+    const finalAlt = alt ?? (typeof branding?.company_name === 'string' ? branding.company_name : 'BSuite');
+    if (src) {
+        return (_jsx("img", { src: src, alt: finalAlt, width: finalWidth, height: finalHeight, className: cn('inline-block object-contain', className), style: { width: finalWidth, height: finalHeight }, loading: "eager", "data-slot": slot, "data-tier": tier, "data-scheme": resolvedScheme, "data-app": appSlug }));
+    }
+    return (_jsx(D2CDefaultLogo, { title: finalAlt, width: finalWidth, height: finalHeight, className: cn('inline-block', className), "data-slot": slot, "data-tier": tier, "data-scheme": resolvedScheme, "data-app": appSlug }));
+});

package/dist/branding/BrandingCard.d.ts

@@ -0,0 +1,56 @@
+/**
+ * BrandingCard — A card component for displaying and editing branding settings
+ *
+ * This component provides a UI for viewing and editing tenant branding
+ * configuration, including colors, logos, and other brand properties.
+ *
+ * Features:
+ * - Display current branding values
+ * - Edit buttons for each branding property
+ * - Integration with ColorEditorSheet for color editing
+ * - Accessible and responsive design
+ * - Supports OKLCH color format
+ *
+ * Usage:
+ *   <BrandingCard
+ *     branding={{
+ *       primary: "oklch(0.546 0.215 262.9)",
+ *       accent: "oklch(0.769 0.132 191.7)",
+ *       logo_url: "https://example.com/logo.svg"
+ *     }}
+ *     onUpdate={(key, value) => console.log('Updated:', key, value)}
+ *     renderColorEditor={(props) => <OklchColorPicker {...props} />}
+ *   />
+ */
+import { type ReactNode } from 'react';
+export interface BrandingCardProps {
+    /** Current branding configuration */
+    branding: {
+        primary?: string;
+        accent?: string;
+        logo_url?: string;
+        logo_light_url?: string;
+        logo_dark_url?: string;
+        favicon_url?: string;
+        company_name?: string;
+        font_stack?: string | null;
+    };
+    /** Callback when a branding property is updated */
+    onUpdate: (key: string, value: string) => void | Promise<void>;
+    /** Render function for the color editor component */
+    renderColorEditor: (props: {
+        value: string;
+        onChange: (value: string) => void;
+        disabled?: boolean;
+    }) => ReactNode;
+    /** Optional className for the card */
+    className?: string;
+    /** Whether editing is disabled */
+    disabled?: boolean;
+    /** Optional title for the card */
+    title?: string;
+    /** Optional description for the card */
+    description?: string;
+}
+export declare function BrandingCard({ branding, onUpdate, renderColorEditor, className, disabled, title, description, }: BrandingCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BrandingCard.d.ts.map

package/dist/branding/BrandingCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandingCard.d.ts","sourceRoot":"","sources":["../../src/branding/BrandingCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGhD,MAAM,WAAW,iBAAiB;IAChC,qCAAqC;IACrC,QAAQ,EAAE;QACR,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAC3B,CAAA;IACD,mDAAmD;IACnD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC9D,qDAAqD;IACrD,iBAAiB,EAAE,CAAC,KAAK,EAAE;QACzB,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;QACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,KAAK,SAAS,CAAA;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AASD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,QAAgB,EAChB,KAAwB,EACxB,WAAW,GACZ,EAAE,iBAAiB,2CA8QnB"}

package/dist/branding/BrandingCard.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * BrandingCard — A card component for displaying and editing branding settings
+ *
+ * This component provides a UI for viewing and editing tenant branding
+ * configuration, including colors, logos, and other brand properties.
+ *
+ * Features:
+ * - Display current branding values
+ * - Edit buttons for each branding property
+ * - Integration with ColorEditorSheet for color editing
+ * - Accessible and responsive design
+ * - Supports OKLCH color format
+ *
+ * Usage:
+ *   <BrandingCard
+ *     branding={{
+ *       primary: "oklch(0.546 0.215 262.9)",
+ *       accent: "oklch(0.769 0.132 191.7)",
+ *       logo_url: "https://example.com/logo.svg"
+ *     }}
+ *     onUpdate={(key, value) => console.log('Updated:', key, value)}
+ *     renderColorEditor={(props) => <OklchColorPicker {...props} />}
+ *   />
+ */
+import { useState } from 'react';
+import { cn } from '../utils.js';
+export function BrandingCard({ branding, onUpdate, renderColorEditor, className, disabled = false, title = 'Brand Settings', description, }) {
+    const [colorEditor, setColorEditor] = useState({
+        open: false,
+        field: '',
+        label: '',
+        value: '',
+    });
+    const openColorEditor = (field, label, currentValue) => {
+        setColorEditor({
+            open: true,
+            field,
+            label,
+            value: currentValue || '',
+        });
+    };
+    const closeColorEditor = () => {
+        setColorEditor(prev => ({ ...prev, open: false }));
+    };
+    const handleColorSave = async (value) => {
+        await onUpdate(colorEditor.field, value);
+        closeColorEditor();
+    };
+    const handleTextUpdate = async (field, value) => {
+        await onUpdate(field, value);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn('rounded-lg border border-input bg-card text-card-foreground shadow-sm', className), children: [_jsxs("div", { className: "border-b border-border px-6 py-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: title }), description && (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description }))] }), _jsxs("div", { className: "divide-y divide-border", children: [_jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "h-10 w-10 rounded border border-input shadow-sm", style: { backgroundColor: branding.primary || 'oklch(0.546 0.215 262.9)' }, "aria-label": "Primary color preview" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: "Primary Color" }), _jsx("div", { className: "text-sm text-muted-foreground", children: branding.primary || 'Not set' })] })] }), _jsx("button", { type: "button", onClick: () => openColorEditor('primary', 'Primary Color', branding.primary || 'oklch(0.546 0.215 262.9)'), disabled: disabled, className: cn('rounded-md border border-input bg-background px-4 py-2 text-sm font-medium', 'hover:bg-accent hover:text-accent-foreground', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50'), children: "Edit" })] }), _jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "h-10 w-10 rounded border border-input shadow-sm", style: { backgroundColor: branding.accent || 'oklch(0.769 0.132 191.7)' }, "aria-label": "Accent color preview" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: "Accent Color" }), _jsx("div", { className: "text-sm text-muted-foreground", children: branding.accent || 'Not set' })] })] }), _jsx("button", { type: "button", onClick: () => openColorEditor('accent', 'Accent Color', branding.accent || 'oklch(0.769 0.132 191.7)'), disabled: disabled, className: cn('rounded-md border border-input bg-background px-4 py-2 text-sm font-medium', 'hover:bg-accent hover:text-accent-foreground', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50'), children: "Edit" })] }), _jsxs("div", { className: "flex flex-col gap-2 px-6 py-4", children: [_jsx("label", { htmlFor: "company-name", className: "font-medium", children: "Company Name" }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("input", { id: "company-name", type: "text", value: branding.company_name || '', onChange: (e) => handleTextUpdate('company_name', e.target.value), disabled: disabled, placeholder: "Enter company name", className: cn('flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm', 'focus:outline-none focus:ring-2 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50') }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Used in logo alt text and other branding contexts" })] }), _jsxs("div", { className: "flex flex-col gap-2 px-6 py-4", children: [_jsx("label", { htmlFor: "logo-url", className: "font-medium", children: "Logo URL" }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("input", { id: "logo-url", type: "url", value: branding.logo_url || '', onChange: (e) => handleTextUpdate('logo_url', e.target.value), disabled: disabled, placeholder: "https://example.com/logo.svg", className: cn('flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm', 'focus:outline-none focus:ring-2 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50') }) }), branding.logo_url && (_jsx("div", { className: "mt-2 flex items-center gap-2", children: _jsx("img", { src: branding.logo_url, alt: "Logo preview", className: "h-12 object-contain", onError: (e) => {
+                                                e.currentTarget.style.display = 'none';
+                                            } }) }))] }), _jsxs("div", { className: "flex flex-col gap-2 px-6 py-4", children: [_jsx("label", { htmlFor: "logo-light-url", className: "font-medium", children: "Logo URL (Light Mode)" }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("input", { id: "logo-light-url", type: "url", value: branding.logo_light_url || '', onChange: (e) => handleTextUpdate('logo_light_url', e.target.value), disabled: disabled, placeholder: "https://example.com/logo-light.svg", className: cn('flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm', 'focus:outline-none focus:ring-2 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50') }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Optional: Use a different logo for light mode" })] }), _jsxs("div", { className: "flex flex-col gap-2 px-6 py-4", children: [_jsx("label", { htmlFor: "logo-dark-url", className: "font-medium", children: "Logo URL (Dark Mode)" }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("input", { id: "logo-dark-url", type: "url", value: branding.logo_dark_url || '', onChange: (e) => handleTextUpdate('logo_dark_url', e.target.value), disabled: disabled, placeholder: "https://example.com/logo-dark.svg", className: cn('flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm', 'focus:outline-none focus:ring-2 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50') }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Optional: Use a different logo for dark mode" })] }), _jsxs("div", { className: "flex flex-col gap-2 px-6 py-4", children: [_jsx("label", { htmlFor: "favicon-url", className: "font-medium", children: "Favicon URL" }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("input", { id: "favicon-url", type: "url", value: branding.favicon_url || '', onChange: (e) => handleTextUpdate('favicon_url', e.target.value), disabled: disabled, placeholder: "https://example.com/favicon.ico", className: cn('flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm', 'focus:outline-none focus:ring-2 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50') }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Square icon shown in browser tabs (16x16 or 32x32)" })] })] })] }), colorEditor.open && (_jsx(ColorEditorSheetWrapper, { open: colorEditor.open, title: `Edit ${colorEditor.label}`, description: "Adjust the OKLCH color values using the sliders below", value: colorEditor.value, onSave: handleColorSave, onCancel: closeColorEditor, renderEditor: renderColorEditor }))] }));
+}
+function ColorEditorSheetWrapper({ open, title, description, value, onSave, onCancel, renderEditor, }) {
+    const [editValue, setEditValue] = useState(value);
+    const [hasChanges, setHasChanges] = useState(false);
+    const handleChange = (newValue) => {
+        setEditValue(newValue);
+        setHasChanges(newValue !== value);
+    };
+    const handleSave = () => {
+        onSave(editValue);
+    };
+    if (!open)
+        return null;
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex", role: "dialog", "aria-modal": "true", "aria-labelledby": "color-editor-title", "aria-describedby": "color-editor-description", children: [_jsx("div", { className: "fixed inset-0 bg-background/80 backdrop-blur-sm", onClick: onCancel, "aria-hidden": "true" }), _jsxs("div", { className: "fixed inset-y-0 right-0 z-50 flex w-full flex-col border-l bg-background shadow-lg sm:max-w-md", children: [_jsxs("div", { className: "flex items-center justify-between border-b px-6 py-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h2", { id: "color-editor-title", className: "text-lg font-semibold text-foreground", children: title }), _jsx("p", { id: "color-editor-description", className: "text-sm text-muted-foreground", children: description })] }), _jsx("button", { type: "button", onClick: onCancel, className: cn('rounded-sm opacity-70 ring-offset-background transition-opacity', 'hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'), "aria-label": "Close", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4", children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-6 py-6", children: renderEditor({
+                            value: editValue,
+                            onChange: handleChange,
+                        }) }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t px-6 py-4", children: [_jsx("button", { type: "button", onClick: onCancel, className: cn('inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium', 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'), children: "Cancel" }), _jsx("button", { type: "button", onClick: handleSave, disabled: !hasChanges, className: cn('inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium', 'bg-primary text-text-on-primary hover:bg-primary/90', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50'), children: "Save Changes" })] })] })] }));
+}

package/dist/branding/ColorEditorSheet.d.ts

@@ -0,0 +1,68 @@
+/**
+ * ColorEditorSheet — A sheet/dialog for editing branding colors
+ *
+ * This component provides a slide-out sheet interface for editing
+ * color values. It uses a slot-based design for the color editor
+ * to allow consumers to inject their own color picker implementation
+ * (e.g., OklchColorPicker, or a custom one).
+ *
+ * Features:
+ * - Slot-based color editor (renderEditor prop)
+ * - Save/Cancel actions
+ * - Accessible dialog implementation
+ * - Responsive design
+ *
+ * Usage:
+ *   <ColorEditorSheet
+ *     open={isOpen}
+ *     onOpenChange={setIsOpen}
+ *     title="Edit Primary Color"
+ *     value="oklch(0.546 0.215 262.9)"
+ *     onSave={(value) => console.log('Saved:', value)}
+ *     renderEditor={(props) => <OklchColorPicker {...props} />}
+ *   />
+ *
+ * Note: Consumers must have shadcn Sheet component installed:
+ *   npx shadcn@latest add sheet
+ */
+import { type ReactNode } from 'react';
+export interface ColorEditorSheetProps {
+    /** Whether the sheet is open */
+    open: boolean;
+    /** Callback when open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** Sheet title */
+    title?: string;
+    /** Description text */
+    description?: string;
+    /** Current color value */
+    value: string;
+    /** Callback when Save is clicked */
+    onSave: (value: string) => void;
+    /** Callback when Cancel is clicked (optional, defaults to closing sheet) */
+    onCancel?: () => void;
+    /** Render function for the color editor component */
+    renderEditor: (props: {
+        value: string;
+        onChange: (value: string) => void;
+        disabled?: boolean;
+    }) => ReactNode;
+    /** Optional className for the sheet content */
+    className?: string;
+    /** Whether save button should be disabled */
+    disabled?: boolean;
+}
+/**
+ * ColorEditorSheet - Generic sheet for editing colors
+ *
+ * This is a "bring your own Sheet" component. Consumers must:
+ * 1. Have shadcn Sheet installed in their app
+ * 2. Pass this component to their app-specific Sheet wrapper
+ *
+ * For consumers WITHOUT shadcn Sheet, they can use this as a
+ * regular dialog/modal by wrapping it in their own dialog primitive.
+ *
+ * Internal implementation uses basic HTML + Tailwind for flexibility.
+ */
+export declare function ColorEditorSheet({ open, onOpenChange, title, description, value, onSave, onCancel, renderEditor, className, disabled, }: ColorEditorSheetProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ColorEditorSheet.d.ts.map

package/dist/branding/ColorEditorSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorEditorSheet.d.ts","sourceRoot":"","sources":["../../src/branding/ColorEditorSheet.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG3D,MAAM,WAAW,qBAAqB;IACpC,gCAAgC;IAChC,IAAI,EAAE,OAAO,CAAA;IACb,uCAAuC;IACvC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,oCAAoC;IACpC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,qDAAqD;IACrD,YAAY,EAAE,CAAC,KAAK,EAAE;QACpB,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;QACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,KAAK,SAAS,CAAA;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,YAAY,EACZ,KAAoB,EACpB,WAAW,EACX,KAAK,EACL,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,QAAgB,GACjB,EAAE,qBAAqB,kDAuIvB"}

package/dist/branding/ColorEditorSheet.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ColorEditorSheet — A sheet/dialog for editing branding colors
+ *
+ * This component provides a slide-out sheet interface for editing
+ * color values. It uses a slot-based design for the color editor
+ * to allow consumers to inject their own color picker implementation
+ * (e.g., OklchColorPicker, or a custom one).
+ *
+ * Features:
+ * - Slot-based color editor (renderEditor prop)
+ * - Save/Cancel actions
+ * - Accessible dialog implementation
+ * - Responsive design
+ *
+ * Usage:
+ *   <ColorEditorSheet
+ *     open={isOpen}
+ *     onOpenChange={setIsOpen}
+ *     title="Edit Primary Color"
+ *     value="oklch(0.546 0.215 262.9)"
+ *     onSave={(value) => console.log('Saved:', value)}
+ *     renderEditor={(props) => <OklchColorPicker {...props} />}
+ *   />
+ *
+ * Note: Consumers must have shadcn Sheet component installed:
+ *   npx shadcn@latest add sheet
+ */
+import { useState, useEffect } from 'react';
+import { cn } from '../utils.js';
+/**
+ * ColorEditorSheet - Generic sheet for editing colors
+ *
+ * This is a "bring your own Sheet" component. Consumers must:
+ * 1. Have shadcn Sheet installed in their app
+ * 2. Pass this component to their app-specific Sheet wrapper
+ *
+ * For consumers WITHOUT shadcn Sheet, they can use this as a
+ * regular dialog/modal by wrapping it in their own dialog primitive.
+ *
+ * Internal implementation uses basic HTML + Tailwind for flexibility.
+ */
+export function ColorEditorSheet({ open, onOpenChange, title = 'Edit Color', description, value, onSave, onCancel, renderEditor, className, disabled = false, }) {
+    const [editValue, setEditValue] = useState(value);
+    const [hasChanges, setHasChanges] = useState(false);
+    useEffect(() => {
+        if (open) {
+            setEditValue(value);
+            setHasChanges(false);
+        }
+    }, [open, value]);
+    const handleChange = (newValue) => {
+        setEditValue(newValue);
+        setHasChanges(newValue !== value);
+    };
+    const handleSave = () => {
+        onSave(editValue);
+        onOpenChange(false);
+    };
+    const handleCancel = () => {
+        if (onCancel) {
+            onCancel();
+        }
+        onOpenChange(false);
+    };
+    if (!open)
+        return null;
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex", role: "dialog", "aria-modal": "true", "aria-labelledby": "color-editor-title", "aria-describedby": description ? 'color-editor-description' : undefined, children: [_jsx("div", { className: "fixed inset-0 bg-background/80 backdrop-blur-sm", onClick: handleCancel, "aria-hidden": "true" }), _jsxs("div", { className: "fixed inset-y-0 right-0 z-50 flex w-full flex-col border-l bg-background shadow-lg sm:max-w-md", children: [_jsxs("div", { className: "flex items-center justify-between border-b px-6 py-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h2", { id: "color-editor-title", className: "text-lg font-semibold text-foreground", children: title }), description && (_jsx("p", { id: "color-editor-description", className: "text-sm text-muted-foreground", children: description }))] }), _jsx("button", { type: "button", onClick: handleCancel, className: cn('rounded-sm opacity-70 ring-offset-background transition-opacity', 'hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:pointer-events-none'), "aria-label": "Close", disabled: disabled, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4", children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }) })] }), _jsx("div", { className: cn('flex-1 overflow-y-auto px-6 py-6', className), children: renderEditor({
+                            value: editValue,
+                            onChange: handleChange,
+                            disabled,
+                        }) }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t px-6 py-4", children: [_jsx("button", { type: "button", onClick: handleCancel, disabled: disabled, className: cn('inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium', 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50'), children: "Cancel" }), _jsx("button", { type: "button", onClick: handleSave, disabled: disabled || !hasChanges, className: cn('inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium', 'bg-primary text-text-on-primary hover:bg-primary/90', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50'), children: "Save Changes" })] })] })] }));
+}

package/dist/branding/OklchColorPicker.d.ts

@@ -0,0 +1,18 @@
+export interface OklchColorPickerProps {
+    /** Current OKLCH color value, e.g. "oklch(0.546 0.215 262.9)" */
+    value?: string;
+    /** Callback when color changes */
+    onChange?: (value: string) => void;
+    /** Label for the color picker */
+    label?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Optional className for the container */
+    className?: string;
+    /** Optional description/helper text */
+    description?: string;
+    /** Optional error message */
+    error?: string;
+}
+export declare function OklchColorPicker({ value, onChange, label, disabled, className, description, error, }: OklchColorPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OklchColorPicker.d.ts.map

package/dist/branding/OklchColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OklchColorPicker.d.ts","sourceRoot":"","sources":["../../src/branding/OklchColorPicker.tsx"],"names":[],"mappings":"AAyBA,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AA+BD,wBAAgB,gBAAgB,CAAC,EAC/B,KAA0B,EAC1B,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,SAAS,EACT,WAAW,EACX,KAAK,GACN,EAAE,qBAAqB,2CA8LvB"}

package/dist/branding/OklchColorPicker.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * OklchColorPicker — A color input component for OKLCH color format
+ *
+ * OKLCH is the BSuite standard color format for the D2C Neon Electric theme.
+ * This component provides a user-friendly interface for editing OKLCH colors
+ * with visual preview and validation.
+ *
+ * Features:
+ * - Live preview of the selected color
+ * - Input fields for L (lightness), C (chroma), H (hue)
+ * - Validation of OKLCH format
+ * - Accessible labels and error messages
+ *
+ * Usage:
+ *   <OklchColorPicker
+ *     value="oklch(0.546 0.215 262.9)"
+ *     onChange={(value) => console.log(value)}
+ *     label="Primary Color"
+ *   />
+ */
+import { useState, useEffect } from 'react';
+import { cn } from '../utils.js';
+const OKLCH_RE = /^oklch\(\s*[\d.]+%?\s+[\d.]+%?\s+[\d.]+%?(?:\s*\/\s*[\d.]+%?)?\s*\)$/i;
+function parseOklch(value) {
+    if (!value || !OKLCH_RE.test(value))
+        return null;
+    const match = value.match(/oklch\(\s*([\d.]+)%?\s+([\d.]+)%?\s+([\d.]+)%?(?:\s*\/\s*([\d.]+)%?)?\s*\)/i);
+    if (!match)
+        return null;
+    return {
+        l: parseFloat(match[1]),
+        c: parseFloat(match[2]),
+        h: parseFloat(match[3]),
+        alpha: match[4] ? parseFloat(match[4]) : undefined,
+    };
+}
+function formatOklch(components) {
+    const { l, c, h, alpha } = components;
+    if (alpha !== undefined && alpha !== 1) {
+        return `oklch(${l} ${c} ${h} / ${alpha})`;
+    }
+    return `oklch(${l} ${c} ${h})`;
+}
+export function OklchColorPicker({ value = 'oklch(0.5 0.1 0)', onChange, label, disabled = false, className, description, error, }) {
+    const parsed = parseOklch(value);
+    const [components, setComponents] = useState(parsed || { l: 0.5, c: 0.1, h: 0 });
+    const [inputValue, setInputValue] = useState(value);
+    const [isValid, setIsValid] = useState(true);
+    useEffect(() => {
+        const newParsed = parseOklch(value);
+        if (newParsed) {
+            setComponents(newParsed);
+            setInputValue(value);
+            setIsValid(true);
+        }
+    }, [value]);
+    const handleComponentChange = (key, val) => {
+        const numVal = parseFloat(val);
+        if (isNaN(numVal))
+            return;
+        const newComponents = { ...components, [key]: numVal };
+        setComponents(newComponents);
+        const formatted = formatOklch(newComponents);
+        setInputValue(formatted);
+        setIsValid(true);
+        onChange?.(formatted);
+    };
+    const handleRawInputChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        const newParsed = parseOklch(newValue);
+        if (newParsed) {
+            setComponents(newParsed);
+            setIsValid(true);
+            onChange?.(newValue);
+        }
+        else {
+            setIsValid(false);
+        }
+    };
+    return (_jsxs("div", { className: cn('space-y-3', className), children: [label && (_jsx("label", { className: "text-sm font-medium text-foreground", children: label })), description && (_jsx("p", { className: "text-sm text-muted-foreground", children: description })), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-12 w-12 rounded-md border-2 border-input shadow-sm", style: { backgroundColor: inputValue }, "aria-label": "Color preview" }), _jsx("div", { className: "flex-1", children: _jsx("input", { type: "text", value: inputValue, onChange: handleRawInputChange, disabled: disabled, className: cn('w-full rounded-md border border-input bg-background px-3 py-2 text-sm', 'focus:outline-none focus:ring-2 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50', !isValid && 'border-destructive'), placeholder: "oklch(0.5 0.1 0)", "aria-label": "OKLCH color value", "aria-invalid": !isValid }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "grid grid-cols-[80px_1fr_60px] items-center gap-2", children: [_jsx("label", { htmlFor: "oklch-l", className: "text-sm text-muted-foreground", children: "L (Light)" }), _jsx("input", { id: "oklch-l", type: "range", min: "0", max: "1", step: "0.01", value: components.l, onChange: (e) => handleComponentChange('l', e.target.value), disabled: disabled, className: "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", "aria-label": "Lightness" }), _jsx("input", { type: "number", min: "0", max: "1", step: "0.01", value: components.l.toFixed(2), onChange: (e) => handleComponentChange('l', e.target.value), disabled: disabled, className: cn('w-full rounded border border-input bg-background px-2 py-1 text-sm', 'focus:outline-none focus:ring-1 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50'), "aria-label": "Lightness value" })] }), _jsxs("div", { className: "grid grid-cols-[80px_1fr_60px] items-center gap-2", children: [_jsx("label", { htmlFor: "oklch-c", className: "text-sm text-muted-foreground", children: "C (Chroma)" }), _jsx("input", { id: "oklch-c", type: "range", min: "0", max: "0.4", step: "0.001", value: components.c, onChange: (e) => handleComponentChange('c', e.target.value), disabled: disabled, className: "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", "aria-label": "Chroma" }), _jsx("input", { type: "number", min: "0", max: "0.4", step: "0.001", value: components.c.toFixed(3), onChange: (e) => handleComponentChange('c', e.target.value), disabled: disabled, className: cn('w-full rounded border border-input bg-background px-2 py-1 text-sm', 'focus:outline-none focus:ring-1 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50'), "aria-label": "Chroma value" })] }), _jsxs("div", { className: "grid grid-cols-[80px_1fr_60px] items-center gap-2", children: [_jsx("label", { htmlFor: "oklch-h", className: "text-sm text-muted-foreground", children: "H (Hue)" }), _jsx("input", { id: "oklch-h", type: "range", min: "0", max: "360", step: "0.1", value: components.h, onChange: (e) => handleComponentChange('h', e.target.value), disabled: disabled, className: "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", "aria-label": "Hue" }), _jsx("input", { type: "number", min: "0", max: "360", step: "0.1", value: components.h.toFixed(1), onChange: (e) => handleComponentChange('h', e.target.value), disabled: disabled, className: cn('w-full rounded border border-input bg-background px-2 py-1 text-sm', 'focus:outline-none focus:ring-1 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50'), "aria-label": "Hue value" })] })] }), (error || !isValid) && (_jsx("p", { className: "text-sm text-destructive", children: error || 'Invalid OKLCH format. Expected: oklch(L C H) where L is 0-1, C is 0-0.4, H is 0-360' }))] }));
+}

package/dist/branding/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @bsuite/ui/branding — branding components
+ */
+export { BrandingCard, type BrandingCardProps } from './BrandingCard.js';
+export { ColorEditorSheet, type ColorEditorSheetProps } from './ColorEditorSheet.js';
+export { OklchColorPicker, type OklchColorPickerProps } from './OklchColorPicker.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/branding/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/branding/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACxE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AACpF,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/branding/index.js

@@ -0,0 +1,6 @@
+/**
+ * @bsuite/ui/branding — branding components
+ */
+export { BrandingCard } from './BrandingCard.js';
+export { ColorEditorSheet } from './ColorEditorSheet.js';
+export { OklchColorPicker } from './OklchColorPicker.js';

package/dist/default-logo.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Built-in D2C Neon Electric default mark.
+ *
+ * Inlined as a React SVG component so the package ships zero asset
+ * dependencies — no /public/ path required at the consumer site, no
+ * CDN, no broken `<img src>` if the consumer forgets to copy the asset.
+ *
+ * Source values are the canonical role tokens from @bsuite/theme:
+ *   Electric Blue  oklch(0.546 0.215 262.9)
+ *   Electric Cyan  oklch(0.769 0.132 191.7)
+ *
+ * The same shape is also available as a static SVG file at
+ * `assets/d2c-default-logo.svg` for non-React consumers (favicons,
+ * email templates, marketing surfaces).
+ */
+import type { SVGProps } from 'react';
+export interface D2CDefaultLogoProps extends SVGProps<SVGSVGElement> {
+    /** Title for screen readers — defaults to "BSuite". */
+    title?: string;
+}
+export declare function D2CDefaultLogo({ title, width, height, role, 'aria-label': ariaLabel, ...rest }: D2CDefaultLogoProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=default-logo.d.ts.map

package/dist/default-logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-logo.d.ts","sourceRoot":"","sources":["../src/default-logo.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAErC,MAAM,WAAW,mBAAoB,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAClE,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAgB,EAChB,KAAU,EACV,MAAW,EACX,IAAY,EACZ,YAAY,EAAE,SAAS,EACvB,GAAG,IAAI,EACR,EAAE,mBAAmB,2CAsBrB"}

package/dist/default-logo.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function D2CDefaultLogo({ title = 'BSuite', width = 64, height = 64, role = 'img', 'aria-label': ariaLabel, ...rest }) {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", width: width, height: height, role: role, "aria-label": ariaLabel ?? title, ...rest, children: [_jsx("title", { children: title }), _jsx("defs", { children: _jsxs("linearGradient", { id: "bsuite-d2c-ring", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "oklch(0.546 0.215 262.9)" }), _jsx("stop", { offset: "100%", stopColor: "oklch(0.769 0.132 191.7)" })] }) }), _jsx("circle", { cx: "32", cy: "32", r: "26", fill: "none", stroke: "url(#bsuite-d2c-ring)", strokeWidth: "5" }), _jsx("circle", { cx: "32", cy: "32", r: "11", fill: "oklch(0.769 0.132 191.7)" })] }));
+}

package/dist/index.d.ts

@@ -1,3 +1,6 @@
 export { DotPattern, type DotPatternProps } from './dot-pattern.js';
 export { cn } from './utils.js';
+export { Logo, resolveLogoUrl, type LogoProps, type LogoSlot, type LogoColorScheme, type LogoBranding, type ResolvedLogo, type AppSlug, } from './Logo.js';
+export { D2CDefaultLogo, type D2CDefaultLogoProps } from './default-logo.js';
+export { BrandingCard, ColorEditorSheet, OklchColorPicker, type BrandingCardProps, type ColorEditorSheetProps, type OklchColorPickerProps, } from './branding/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +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"}
+{"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;AAC/B,OAAO,EACL,IAAI,EACJ,cAAc,EACd,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,OAAO,GACb,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAG5E,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,GAC3B,MAAM,qBAAqB,CAAA"}

package/dist/index.js

@@ -1,2 +1,6 @@
 export { DotPattern } from './dot-pattern.js';
 export { cn } from './utils.js';
+export { Logo, resolveLogoUrl, } from './Logo.js';
+export { D2CDefaultLogo } from './default-logo.js';
+// Branding components (v0.3.0+)
+export { BrandingCard, ColorEditorSheet, OklchColorPicker, } from './branding/index.js';

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@bsuite/ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "Shared UI primitives for the BSuite apps (D2C Neon Electric + Corporate brands).",
   "repository": {
     "type": "git",
@@ -10,7 +13,8 @@
     "directory": "packages/ui"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/assets"
   ],
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -26,7 +30,12 @@
     "./utils": {
       "import": "./dist/utils.js",
       "types": "./dist/utils.d.ts"
-    }
+    },
+    "./branding": {
+      "import": "./dist/branding/index.js",
+      "types": "./dist/branding/index.d.ts"
+    },
+    "./assets/d2c-default-logo.svg": "./src/assets/d2c-default-logo.svg"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
@@ -35,7 +44,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "tailwind-merge": "^2.5.5"
+    "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",
@@ -44,13 +53,14 @@
   "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"
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.10",
+    "vitest": "^4.1.5"
   }
 }

package/src/assets/d2c-default-logo.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="BSuite default mark">
+  <title>BSuite</title>
+  <!--
+    D2C Neon Electric default mark.
+    Electric Blue ring + Electric Cyan inner accent.
+    Values are the canonical role tokens from @bsuite/theme:
+      Electric Blue  oklch(0.546 0.215 262.9)
+      Electric Cyan  oklch(0.769 0.132 191.7)
+    Inline as raw SVG so the package has no runtime asset dependency.
+  -->
+  <defs>
+    <linearGradient id="bsuite-d2c-ring" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="oklch(0.546 0.215 262.9)" />
+      <stop offset="100%" stop-color="oklch(0.769 0.132 191.7)" />
+    </linearGradient>
+  </defs>
+  <circle cx="32" cy="32" r="26" fill="none" stroke="url(#bsuite-d2c-ring)" stroke-width="5" />
+  <circle cx="32" cy="32" r="11" fill="oklch(0.769 0.132 191.7)" />
+</svg>