@mieweb/ui 0.1.0

package/dist/brands/index.d.ts

@@ -0,0 +1,100 @@
+import { BrandConfig } from './types.js';
+export { BrandBorderRadius, BrandBoxShadow, BrandColors, BrandTypography, ColorScale, SemanticColors, createBrandPreset, generateBrandCSS, generateTailwindTheme } from './types.js';
+export { default as bluehiveBrand } from './bluehive.js';
+
+/**
+ * Default Brand Configuration
+ *
+ * A neutral, accessible brand theme using standard colors.
+ * Use this as a starting point for creating custom brands.
+ */
+
+declare const defaultBrand: BrandConfig;
+
+/**
+ * Enterprise Health Brand Configuration
+ *
+ * The official brand theme for Enterprise Health.
+ * Extracted from enterprisehealth.com on January 2026.
+ *
+ * Brand Colors:
+ * - Primary: #6E2B68 (Burgundy/Purple) - Used for accents, links, icons
+ * - Secondary: #00497A (Deep Teal Blue) - Used in gradients
+ * - Accent: #F8B700 (Gold/Yellow) - Logo sun color
+ * - Gradient: linear-gradient(111.02deg, #00497A, #6E2B68)
+ *
+ * Typography: Jost (Google Font)
+ * Card Radius: 24px (very rounded)
+ * Button Radius: 10px
+ * Input Radius: 12px
+ */
+
+/**
+ * Enterprise Health brand configuration.
+ * This defines all the design tokens used in Enterprise Health applications.
+ */
+declare const enterpriseHealthBrand: BrandConfig;
+
+/**
+ * MIE Web Brand Configuration
+ *
+ * The official brand theme for Medical Informatics Engineering (MIE).
+ * Primary color: #27ae60 (MIE Green)
+ */
+
+/**
+ * MIE Web brand configuration.
+ * This defines all the design tokens used in MIE Web applications.
+ */
+declare const miewebBrand: BrandConfig;
+
+/**
+ * Waggleline Brand Configuration
+ *
+ * The official brand theme for Waggleline.
+ * Primary color: #17AEED (Waggleline Blue)
+ *
+ * Waggleline is an experience visualization and orchestration platform
+ * that maps relationships, signals, handoffs, dependencies, and momentum
+ * across the customer journey.
+ *
+ * Brand colors from MIE Brand Guide:
+ * - Blue (#17AEED): Primary actions, momentum
+ * - Green (#009C4E): MIE core platform, success, completions
+ * - Orange (#E04501): WebChart workflow, urgency
+ * - Yellow (#FFD200): Enterprise Health, readiness, highlights
+ * - Purple (#8B5CF6): Ozwell AI, intelligence
+ */
+
+/**
+ * Waggleline brand configuration.
+ * This defines all the design tokens used in Waggleline applications.
+ *
+ * Note: Dark mode uses charcoal tones (gray-900 based), not pure black,
+ * following Waggleline's design philosophy.
+ */
+declare const wagglelineBrand: BrandConfig;
+
+/**
+ * WebChart Brand Configuration
+ *
+ * The official brand theme for WebChart EHR.
+ * Primary color: #f5841f (WebChart Orange)
+ */
+
+/**
+ * WebChart brand configuration.
+ * This defines all the design tokens used in WebChart applications.
+ */
+declare const webchartBrand: BrandConfig;
+
+declare const brands: {
+    readonly bluehive: () => Promise<BrandConfig>;
+    readonly default: () => Promise<BrandConfig>;
+    readonly 'enterprise-health': () => Promise<BrandConfig>;
+    readonly mieweb: () => Promise<BrandConfig>;
+    readonly waggleline: () => Promise<BrandConfig>;
+    readonly webchart: () => Promise<BrandConfig>;
+};
+
+export { BrandConfig, brands, defaultBrand, enterpriseHealthBrand, miewebBrand, wagglelineBrand, webchartBrand };

package/dist/brands/index.js

@@ -0,0 +1,10 @@
+export { brands } from '../chunk-FIUNOH6W.js';
+export { miewebBrand } from '../chunk-UHSPAFY6.js';
+export { wagglelineBrand } from '../chunk-OWPWP46L.js';
+export { webchartBrand } from '../chunk-C6MDPPPL.js';
+export { createBrandPreset, generateBrandCSS, generateTailwindTheme } from '../chunk-SOFX4T7M.js';
+export { bluehiveBrand } from '../chunk-ULOA7WBW.js';
+export { defaultBrand } from '../chunk-4LTN2LEN.js';
+export { enterpriseHealthBrand } from '../chunk-MTZPVOP6.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/brands/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/brands/mieweb.css

@@ -0,0 +1,138 @@
+/**
+ * MIE Web Brand Theme
+ * Generated by @mieweb/ui
+ * Healthcare software and services company
+ *
+ * Usage (standalone CSS):
+ *   @import '@mieweb/ui/brands/mieweb.css';
+ *
+ * Usage (Tailwind CSS 4):
+ *   @import '@mieweb/ui/brands/mieweb.css' layer(theme);
+ */
+
+/* ============================================
+   Medical Informatics Engineering Design Tokens
+   ============================================ */
+
+:root {
+  /* Primary Color Scale - MIE Green */
+  --mieweb-primary-50: #e8f8ef;
+  --mieweb-primary-100: #c5edd6;
+  --mieweb-primary-200: #9fe2bb;
+  --mieweb-primary-300: #79d7a0;
+  --mieweb-primary-400: #53cc85;
+  --mieweb-primary-500: #27ae60;
+  --mieweb-primary-600: #219c55;
+  --mieweb-primary-700: #1b894a;
+  --mieweb-primary-800: #15773e;
+  --mieweb-primary-900: #0f6533;
+  --mieweb-primary-950: #094d26;
+
+  /* Light Mode Semantic Colors */
+  --mieweb-background: #ffffff;
+  --mieweb-foreground: #171717;
+  --mieweb-card: #ffffff;
+  --mieweb-card-foreground: #171717;
+  --mieweb-muted: #f5f5f5;
+  --mieweb-muted-foreground: #737373;
+  --mieweb-border: #e5e7eb;
+  --mieweb-input: #e5e7eb;
+  --mieweb-ring: #27ae60;
+  --mieweb-destructive: #ef4444;
+  --mieweb-destructive-foreground: #ffffff;
+  --mieweb-success: #22c55e;
+  --mieweb-success-foreground: #ffffff;
+  --mieweb-warning: #f59e0b;
+  --mieweb-warning-foreground: #ffffff;
+
+  /* Typography */
+  --mieweb-font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --mieweb-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* Border Radius */
+  --mieweb-radius-none: 0;
+  --mieweb-radius-sm: 0.25rem;
+  --mieweb-radius-md: 0.5rem;
+  --mieweb-radius-lg: 0.75rem;
+  --mieweb-radius-xl: 1rem;
+  --mieweb-radius-2xl: 1.5rem;
+  --mieweb-radius-full: 9999px;
+
+  /* Shadows */
+  --mieweb-shadow-card:
+    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --mieweb-shadow-dropdown:
+    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --mieweb-shadow-modal:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+/* Dark Mode */
+[data-theme='dark'],
+.dark {
+  --mieweb-background: #171717;
+  --mieweb-foreground: #fafafa;
+  --mieweb-card: #262626;
+  --mieweb-card-foreground: #fafafa;
+  --mieweb-muted: #404040;
+  --mieweb-muted-foreground: #a1a1aa;
+  --mieweb-border: #404040;
+  --mieweb-input: #404040;
+  --mieweb-ring: #27ae60;
+  --mieweb-destructive: #dc2626;
+  --mieweb-destructive-foreground: #fafafa;
+  --mieweb-success: #16a34a;
+  --mieweb-success-foreground: #fafafa;
+  --mieweb-warning: #d97706;
+  --mieweb-warning-foreground: #fafafa;
+}
+
+/* ============================================
+   Typography Base
+   ============================================ */
+
+body {
+  font-family: var(--mieweb-font-sans);
+  background-color: var(--mieweb-background);
+  color: var(--mieweb-foreground);
+}
+
+code,
+pre,
+kbd,
+samp {
+  font-family: var(--mieweb-font-mono);
+}
+
+/* ============================================
+   Utility Classes
+   ============================================ */
+
+.mieweb-card {
+  background-color: var(--mieweb-card);
+  color: var(--mieweb-card-foreground);
+  border-radius: var(--mieweb-radius-lg);
+  box-shadow: var(--mieweb-shadow-card);
+}
+
+.mieweb-button-primary {
+  background-color: var(--mieweb-primary-500);
+  color: white;
+  border-radius: var(--mieweb-radius-md);
+}
+
+.mieweb-button-primary:hover {
+  background-color: var(--mieweb-primary-600);
+}
+
+.mieweb-input {
+  border: 1px solid var(--mieweb-input);
+  border-radius: var(--mieweb-radius-md);
+  background-color: var(--mieweb-background);
+  color: var(--mieweb-foreground);
+}
+
+.mieweb-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--mieweb-ring);
+}

package/dist/brands/types.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var chunkFFJVCQ5R_cjs = require('../chunk-FFJVCQ5R.cjs');
+
+
+
+Object.defineProperty(exports, "createBrandPreset", {
+  enumerable: true,
+  get: function () { return chunkFFJVCQ5R_cjs.createBrandPreset; }
+});
+Object.defineProperty(exports, "generateBrandCSS", {
+  enumerable: true,
+  get: function () { return chunkFFJVCQ5R_cjs.generateBrandCSS; }
+});
+Object.defineProperty(exports, "generateTailwindTheme", {
+  enumerable: true,
+  get: function () { return chunkFFJVCQ5R_cjs.generateTailwindTheme; }
+});
+//# sourceMappingURL=types.cjs.map
+//# sourceMappingURL=types.cjs.map

package/dist/brands/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.cjs"}

package/dist/brands/types.d.cts

@@ -0,0 +1,188 @@
+/**
+ * @mieweb/ui Brand System Types
+ *
+ * This module provides type definitions and utilities for brand themes.
+ * Brands define colors, typography, spacing, and other design tokens that
+ * can be applied to @mieweb/ui components.
+ */
+/**
+ * Primary color scale (50-950) following Tailwind conventions.
+ */
+interface ColorScale {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+}
+/**
+ * Semantic colors for a specific color mode (light or dark).
+ */
+interface SemanticColors {
+    /** Page background color */
+    background: string;
+    /** Primary text color */
+    foreground: string;
+    /** Card/panel background */
+    card: string;
+    /** Card text color */
+    cardForeground: string;
+    /** Muted/subtle background */
+    muted: string;
+    /** Muted/secondary text */
+    mutedForeground: string;
+    /** Border color */
+    border: string;
+    /** Input border color */
+    input: string;
+    /** Focus ring color */
+    ring: string;
+    /** Destructive/error color */
+    destructive: string;
+    /** Text on destructive backgrounds */
+    destructiveForeground: string;
+    /** Success color */
+    success: string;
+    /** Text on success backgrounds */
+    successForeground: string;
+    /** Warning color */
+    warning: string;
+    /** Text on warning backgrounds */
+    warningForeground: string;
+}
+/**
+ * Complete color configuration for a brand.
+ */
+interface BrandColors {
+    /** Primary brand color scale */
+    primary: ColorScale;
+    /** Light mode semantic colors */
+    light: SemanticColors;
+    /** Dark mode semantic colors */
+    dark: SemanticColors;
+}
+/**
+ * Typography configuration for a brand.
+ */
+interface BrandTypography {
+    /** Font family stack for body text */
+    fontFamily: {
+        sans: string[];
+        mono?: string[];
+    };
+    /** Base font size (usually 16px) */
+    baseFontSize?: string;
+}
+/**
+ * Border radius configuration.
+ */
+interface BrandBorderRadius {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    full: string;
+}
+/**
+ * Box shadow configuration.
+ */
+interface BrandBoxShadow {
+    card: string;
+    dropdown: string;
+    modal: string;
+}
+/**
+ * Complete brand configuration.
+ */
+interface BrandConfig {
+    /** Unique identifier (lowercase, no spaces) */
+    name: string;
+    /** Human-readable display name */
+    displayName: string;
+    /** Brand description */
+    description?: string;
+    /** Color configuration */
+    colors: BrandColors;
+    /** Typography settings */
+    typography: BrandTypography;
+    /** Border radius scale */
+    borderRadius: BrandBorderRadius;
+    /** Box shadow definitions */
+    boxShadow: BrandBoxShadow;
+}
+/**
+ * Generate CSS custom properties from a brand configuration.
+ * This creates a standalone CSS file that can be imported into any project.
+ */
+declare function generateBrandCSS(brand: BrandConfig): string;
+/**
+ * Generate Tailwind CSS theme configuration from a brand.
+ * Use this in your tailwind.config.js to apply the brand.
+ */
+declare function generateTailwindTheme(brand: BrandConfig): {
+    colors: {
+        [brand.name]: ColorScale;
+        primary: ColorScale;
+    };
+    fontFamily: {
+        mono?: string[] | undefined;
+        sans: string[];
+    };
+    borderRadius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        full: string;
+    };
+    boxShadow: {
+        card: string;
+        dropdown: string;
+        modal: string;
+    };
+};
+/**
+ * Generate a complete Tailwind preset for a brand.
+ * This includes the mieweb/ui base preset plus brand-specific overrides.
+ */
+declare function createBrandPreset(brand: BrandConfig): {
+    darkMode: readonly ["class", "[data-theme=\"dark\"]"];
+    theme: {
+        extend: {
+            colors: {
+                [brand.name]: ColorScale;
+                primary: ColorScale;
+            };
+            fontFamily: {
+                mono?: string[] | undefined;
+                sans: string[];
+            };
+            borderRadius: {
+                none: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+                '2xl': string;
+                full: string;
+            };
+            boxShadow: {
+                card: string;
+                dropdown: string;
+                modal: string;
+            };
+        };
+    };
+};
+
+export { type BrandBorderRadius, type BrandBoxShadow, type BrandColors, type BrandConfig, type BrandTypography, type ColorScale, type SemanticColors, createBrandPreset, generateBrandCSS, generateTailwindTheme };

package/dist/brands/types.d.ts

@@ -0,0 +1,188 @@
+/**
+ * @mieweb/ui Brand System Types
+ *
+ * This module provides type definitions and utilities for brand themes.
+ * Brands define colors, typography, spacing, and other design tokens that
+ * can be applied to @mieweb/ui components.
+ */
+/**
+ * Primary color scale (50-950) following Tailwind conventions.
+ */
+interface ColorScale {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+}
+/**
+ * Semantic colors for a specific color mode (light or dark).
+ */
+interface SemanticColors {
+    /** Page background color */
+    background: string;
+    /** Primary text color */
+    foreground: string;
+    /** Card/panel background */
+    card: string;
+    /** Card text color */
+    cardForeground: string;
+    /** Muted/subtle background */
+    muted: string;
+    /** Muted/secondary text */
+    mutedForeground: string;
+    /** Border color */
+    border: string;
+    /** Input border color */
+    input: string;
+    /** Focus ring color */
+    ring: string;
+    /** Destructive/error color */
+    destructive: string;
+    /** Text on destructive backgrounds */
+    destructiveForeground: string;
+    /** Success color */
+    success: string;
+    /** Text on success backgrounds */
+    successForeground: string;
+    /** Warning color */
+    warning: string;
+    /** Text on warning backgrounds */
+    warningForeground: string;
+}
+/**
+ * Complete color configuration for a brand.
+ */
+interface BrandColors {
+    /** Primary brand color scale */
+    primary: ColorScale;
+    /** Light mode semantic colors */
+    light: SemanticColors;
+    /** Dark mode semantic colors */
+    dark: SemanticColors;
+}
+/**
+ * Typography configuration for a brand.
+ */
+interface BrandTypography {
+    /** Font family stack for body text */
+    fontFamily: {
+        sans: string[];
+        mono?: string[];
+    };
+    /** Base font size (usually 16px) */
+    baseFontSize?: string;
+}
+/**
+ * Border radius configuration.
+ */
+interface BrandBorderRadius {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    full: string;
+}
+/**
+ * Box shadow configuration.
+ */
+interface BrandBoxShadow {
+    card: string;
+    dropdown: string;
+    modal: string;
+}
+/**
+ * Complete brand configuration.
+ */
+interface BrandConfig {
+    /** Unique identifier (lowercase, no spaces) */
+    name: string;
+    /** Human-readable display name */
+    displayName: string;
+    /** Brand description */
+    description?: string;
+    /** Color configuration */
+    colors: BrandColors;
+    /** Typography settings */
+    typography: BrandTypography;
+    /** Border radius scale */
+    borderRadius: BrandBorderRadius;
+    /** Box shadow definitions */
+    boxShadow: BrandBoxShadow;
+}
+/**
+ * Generate CSS custom properties from a brand configuration.
+ * This creates a standalone CSS file that can be imported into any project.
+ */
+declare function generateBrandCSS(brand: BrandConfig): string;
+/**
+ * Generate Tailwind CSS theme configuration from a brand.
+ * Use this in your tailwind.config.js to apply the brand.
+ */
+declare function generateTailwindTheme(brand: BrandConfig): {
+    colors: {
+        [brand.name]: ColorScale;
+        primary: ColorScale;
+    };
+    fontFamily: {
+        mono?: string[] | undefined;
+        sans: string[];
+    };
+    borderRadius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        full: string;
+    };
+    boxShadow: {
+        card: string;
+        dropdown: string;
+        modal: string;
+    };
+};
+/**
+ * Generate a complete Tailwind preset for a brand.
+ * This includes the mieweb/ui base preset plus brand-specific overrides.
+ */
+declare function createBrandPreset(brand: BrandConfig): {
+    darkMode: readonly ["class", "[data-theme=\"dark\"]"];
+    theme: {
+        extend: {
+            colors: {
+                [brand.name]: ColorScale;
+                primary: ColorScale;
+            };
+            fontFamily: {
+                mono?: string[] | undefined;
+                sans: string[];
+            };
+            borderRadius: {
+                none: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+                '2xl': string;
+                full: string;
+            };
+            boxShadow: {
+                card: string;
+                dropdown: string;
+                modal: string;
+            };
+        };
+    };
+};
+
+export { type BrandBorderRadius, type BrandBoxShadow, type BrandColors, type BrandConfig, type BrandTypography, type ColorScale, type SemanticColors, createBrandPreset, generateBrandCSS, generateTailwindTheme };

package/dist/brands/types.js

@@ -0,0 +1,3 @@
+export { createBrandPreset, generateBrandCSS, generateTailwindTheme } from '../chunk-SOFX4T7M.js';
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/dist/brands/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}