@mieweb/ui 0.2.1 → 0.2.2

package/README.md

@@ -18,6 +18,7 @@ A themeable, accessible React component library built with Tailwind CSS 4.
 - [Installation](#installation)
 - [Quick Start](#quick-start)
 - [Development](#development)
+- [Date & Time Standard](#date--time-standard)
 - [Storybook](#storybook)
 - [Using in Other Projects](#using-in-other-projects)
 - [Brand System](#brand-system)
@@ -140,6 +141,33 @@ This will watch for changes and rebuild the library automatically.
 | `npm run test`            | Run tests                           |
 | `npm run test:watch`      | Run tests in watch mode             |
 
+## Date & Time Standard
+
+For UI/UX date and time behavior, this project uses **Luxon** as the preferred library.
+
+### Guidelines
+
+- Use `DateTime` from `luxon` for all new date/time parsing, formatting, and comparisons.
+- Keep timezone explicit when logic depends on business rules (for example: office hours, “open now”, appointment windows).
+- Use IANA timezone identifiers (for example: `America/New_York`) instead of abbreviations.
+- Prefer storing/transmitting ISO-8601 values and convert for display at the component edge.
+- Avoid adding new date logic with raw `Date` math unless there is a clear performance or compatibility reason.
+
+### Examples
+
+```ts
+import { DateTime } from 'luxon';
+
+const localDisplay = DateTime.fromISO(timestamp).toFormat('LLL d, yyyy h:mm a');
+
+const inProviderZone = DateTime.fromISO(timestamp, {
+  zone: 'America/New_York',
+});
+
+const isOpen = DateTime.now().setZone('America/New_York') <
+  inProviderZone.plus({ hours: 1 });
+```
+
 ## Storybook
 
 Storybook provides interactive documentation and a component playground where you can explore all components with different props and themes.

package/dist/ag-grid.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkD3BUYVLN_cjs = require('./chunk-D3BUYVLN.cjs');
+var chunkQUA7WVHK_cjs = require('./chunk-QUA7WVHK.cjs');
 var chunkOR5DRJCW_cjs = require('./chunk-OR5DRJCW.cjs');
 var React = require('react');
 var agGridReact = require('ag-grid-react');
@@ -413,7 +413,7 @@ function EmailRenderer(props) {
       className: "text-primary-600 dark:text-primary-400 inline-flex items-center gap-1.5 hover:underline",
       onClick: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkD3BUYVLN_cjs.Mail, { className: "h-3 w-3 opacity-60" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkQUA7WVHK_cjs.Mail, { className: "h-3 w-3 opacity-60" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: value })
       ]
     }
@@ -430,7 +430,7 @@ function PhoneRenderer(props) {
       className: "text-foreground hover:text-primary-600 dark:hover:text-primary-400 inline-flex items-center gap-1.5",
       onClick: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkD3BUYVLN_cjs.Phone, { className: "h-3 w-3 text-green-500 opacity-70" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkQUA7WVHK_cjs.Phone, { className: "h-3 w-3 text-green-500 opacity-70" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayValue })
       ]
     }
@@ -450,7 +450,7 @@ function DomainRenderer(props) {
       className: "text-primary-600 dark:text-primary-400 inline-flex items-center gap-1.5 hover:underline",
       onClick: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkD3BUYVLN_cjs.Globe, { className: "h-3 w-3 opacity-60" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkQUA7WVHK_cjs.Globe, { className: "h-3 w-3 opacity-60" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: displayDomain })
       ]
     }
@@ -547,7 +547,7 @@ function BooleanRenderer(props) {
         isTrue ? "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400" : "bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
       ),
       children: [
-        isTrue ? /* @__PURE__ */ jsxRuntime.jsx(chunkD3BUYVLN_cjs.CheckCircle, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(chunkD3BUYVLN_cjs.Clock, { className: "h-3 w-3" }),
+        isTrue ? /* @__PURE__ */ jsxRuntime.jsx(chunkQUA7WVHK_cjs.CheckCircle, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(chunkQUA7WVHK_cjs.Clock, { className: "h-3 w-3" }),
         isTrue ? "Yes" : "No"
       ]
     }

package/dist/ag-grid.js

@@ -1,4 +1,4 @@
-import { Mail, Phone, Globe, CheckCircle, Clock } from './chunk-K5T2PT4M.js';
+import { Mail, Phone, Globe, CheckCircle, Clock } from './chunk-Y22SOAJM.js';
 import { cn } from './chunk-F3SOEIN2.js';
 import * as React from 'react';
 import { memo } from 'react';

package/dist/brands/bluehive.css

@@ -44,6 +44,16 @@
   --mieweb-success-foreground: #ffffff;
   --mieweb-warning: #f59e0b;
   --mieweb-warning-foreground: #ffffff;
+  --mieweb-info: #0ea5e9;
+  --mieweb-info-foreground: #ffffff;
+  --mieweb-secondary-foreground: #ffffff;
+
+  /* Chart / Data Visualization */
+  --mieweb-chart-1: #27aae1;
+  --mieweb-chart-2: #22c55e;
+  --mieweb-chart-3: #f59e0b;
+  --mieweb-chart-4: #ef4444;
+  --mieweb-chart-5: #6366f1;
 
   /* Typography */
   --mieweb-font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;
@@ -85,6 +95,16 @@
   --mieweb-success-foreground: #fafafa;
   --mieweb-warning: #d97706;
   --mieweb-warning-foreground: #fafafa;
+  --mieweb-info: #0284c7;
+  --mieweb-info-foreground: #fafafa;
+  --mieweb-secondary-foreground: #fafafa;
+
+  /* Chart */
+  --mieweb-chart-1: #38bdf8;
+  --mieweb-chart-2: #4ade80;
+  --mieweb-chart-3: #fbbf24;
+  --mieweb-chart-4: #f87171;
+  --mieweb-chart-5: #818cf8;
 }
 
 /* ============================================

package/dist/brands/enterprise-health.css

@@ -41,10 +41,19 @@
   --mieweb-primary-900: #42193d;
   --mieweb-primary-950: #280e25;
 
-  /* Secondary Color - Deep Teal Blue (for gradients) */
-  --mieweb-secondary: #00497a;
-  --mieweb-secondary-light: #006ba8;
-  --mieweb-secondary-dark: #003658;
+  /* Secondary Color Scale - Deep Teal Blue */
+  --mieweb-secondary-50: #e6f3fa;
+  --mieweb-secondary-100: #b3dcf0;
+  --mieweb-secondary-200: #80c5e6;
+  --mieweb-secondary-300: #4daedc;
+  --mieweb-secondary-400: #2697d2;
+  --mieweb-secondary-500: #00497a;
+  --mieweb-secondary-600: #003d68;
+  --mieweb-secondary-700: #003658;
+  --mieweb-secondary-800: #002a45;
+  --mieweb-secondary-900: #001e33;
+  --mieweb-secondary-950: #001120;
+  --mieweb-secondary-foreground: #ffffff;
 
   /* Accent Color - Gold/Yellow (logo) */
   --mieweb-accent: #f8b700;
@@ -71,6 +80,15 @@
   --mieweb-success-foreground: #ffffff;
   --mieweb-warning: #f8b700;
   --mieweb-warning-foreground: #222326;
+  --mieweb-info: #0ea5e9;
+  --mieweb-info-foreground: #ffffff;
+
+  /* Chart / Data Visualization */
+  --mieweb-chart-1: #6e2b68;
+  --mieweb-chart-2: #00497a;
+  --mieweb-chart-3: #f8b700;
+  --mieweb-chart-4: #dc2626;
+  --mieweb-chart-5: #22c55e;
 
   /* Typography - Jost is the Enterprise Health font */
   --mieweb-font-sans: 'Jost', ui-sans-serif, system-ui, sans-serif;
@@ -115,6 +133,16 @@
   --mieweb-success-foreground: #fafafa;
   --mieweb-warning: #f8b700;
   --mieweb-warning-foreground: #222326;
+  --mieweb-info: #0284c7;
+  --mieweb-info-foreground: #fafafa;
+  --mieweb-secondary-foreground: #fafafa;
+
+  /* Chart */
+  --mieweb-chart-1: #c95ab8;
+  --mieweb-chart-2: #006ba8;
+  --mieweb-chart-3: #ffc933;
+  --mieweb-chart-4: #f87171;
+  --mieweb-chart-5: #4ade80;
 
   --mieweb-glass-background: rgba(255, 255, 255, 0.1);
 }

package/dist/brands/index.d.cts

@@ -1,6 +1,6 @@
 import { BrandConfig } from './types.cjs';
 export { BrandBorderRadius, BrandBoxShadow, BrandColors, BrandTypography, ColorScale, SemanticColors, createBrandPreset, generateBrandCSS, generateTailwindTheme } from './types.cjs';
-export { default as bluehiveBrand } from './bluehive.cjs';
+export { bluehiveBrand } from './bluehive.cjs';
 export { ozwellBrand } from './ozwell.cjs';
 
 /**

package/dist/brands/index.d.ts

@@ -1,6 +1,6 @@
 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';
+export { bluehiveBrand } from './bluehive.js';
 export { ozwellBrand } from './ozwell.js';
 
 /**

package/dist/brands/mieweb.css

@@ -44,6 +44,16 @@
   --mieweb-success-foreground: #ffffff;
   --mieweb-warning: #f59e0b;
   --mieweb-warning-foreground: #ffffff;
+  --mieweb-info: #0ea5e9;
+  --mieweb-info-foreground: #ffffff;
+  --mieweb-secondary-foreground: #ffffff;
+
+  /* Chart / Data Visualization */
+  --mieweb-chart-1: #27ae60;
+  --mieweb-chart-2: #0ea5e9;
+  --mieweb-chart-3: #f59e0b;
+  --mieweb-chart-4: #ef4444;
+  --mieweb-chart-5: #6366f1;
 
   /* Typography */
   --mieweb-font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
@@ -85,6 +95,16 @@
   --mieweb-success-foreground: #fafafa;
   --mieweb-warning: #d97706;
   --mieweb-warning-foreground: #fafafa;
+  --mieweb-info: #0284c7;
+  --mieweb-info-foreground: #fafafa;
+  --mieweb-secondary-foreground: #fafafa;
+
+  /* Chart */
+  --mieweb-chart-1: #4ade80;
+  --mieweb-chart-2: #38bdf8;
+  --mieweb-chart-3: #fbbf24;
+  --mieweb-chart-4: #f87171;
+  --mieweb-chart-5: #818cf8;
 }
 
 /* ============================================

package/dist/brands/ozwell.css

@@ -53,6 +53,16 @@
   --mieweb-success-foreground: #ffffff;
   --mieweb-warning: #f59e0b;
   --mieweb-warning-foreground: #ffffff;
+  --mieweb-info: #0ea5e9;
+  --mieweb-info-foreground: #ffffff;
+  --mieweb-secondary-foreground: #ffffff;
+
+  /* Chart / Data Visualization */
+  --mieweb-chart-1: #27aae1;
+  --mieweb-chart-2: #22c55e;
+  --mieweb-chart-3: #f59e0b;
+  --mieweb-chart-4: #ef4444;
+  --mieweb-chart-5: #6366f1;
 
   /* Typography */
   --mieweb-font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;
@@ -94,6 +104,16 @@
   --mieweb-success-foreground: #fafafa;
   --mieweb-warning: #d97706;
   --mieweb-warning-foreground: #fafafa;
+  --mieweb-info: #0284c7;
+  --mieweb-info-foreground: #fafafa;
+  --mieweb-secondary-foreground: #fafafa;
+
+  /* Chart */
+  --mieweb-chart-1: #38bdf8;
+  --mieweb-chart-2: #4ade80;
+  --mieweb-chart-3: #fbbf24;
+  --mieweb-chart-4: #f87171;
+  --mieweb-chart-5: #818cf8;
 }
 
 /* ============================================

package/dist/brands/waggleline.css

@@ -51,6 +51,42 @@
   --mieweb-success-foreground: #ffffff;
   --mieweb-warning: #ffd200;
   --mieweb-warning-foreground: #1a1a1a;
+  --mieweb-info: #0ea5e9;
+  --mieweb-info-foreground: #ffffff;
+  --mieweb-secondary-foreground: #ffffff;
+
+  /* Waggleline Custom Success Scale (brand green #009C4E) */
+  --mieweb-success-50: #ecfdf5;
+  --mieweb-success-100: #d1fae5;
+  --mieweb-success-200: #a7f3d0;
+  --mieweb-success-300: #6ee7b7;
+  --mieweb-success-400: #34d399;
+  --mieweb-success-500: #009c4e;
+  --mieweb-success-600: #008542;
+  --mieweb-success-700: #006e37;
+  --mieweb-success-800: #00572b;
+  --mieweb-success-900: #004020;
+  --mieweb-success-950: #002914;
+
+  /* Waggleline Custom Warning Scale (brand yellow #FFD200) */
+  --mieweb-warning-50: #fffde6;
+  --mieweb-warning-100: #fff9b3;
+  --mieweb-warning-200: #fff580;
+  --mieweb-warning-300: #fff14d;
+  --mieweb-warning-400: #ffeb26;
+  --mieweb-warning-500: #ffd200;
+  --mieweb-warning-600: #d4af00;
+  --mieweb-warning-700: #aa8c00;
+  --mieweb-warning-800: #806900;
+  --mieweb-warning-900: #554600;
+  --mieweb-warning-950: #332a00;
+
+  /* Chart / Data Visualization */
+  --mieweb-chart-1: #17aeed;
+  --mieweb-chart-2: #009c4e;
+  --mieweb-chart-3: #ffd200;
+  --mieweb-chart-4: #e04501;
+  --mieweb-chart-5: #8b5cf6;
 
   /* Typography */
   --mieweb-font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
@@ -99,6 +135,16 @@
   --mieweb-success-foreground: #f9fafb;
   --mieweb-warning: #ffd200;
   --mieweb-warning-foreground: #1a1a1a;
+  --mieweb-info: #0284c7;
+  --mieweb-info-foreground: #f9fafb;
+  --mieweb-secondary-foreground: #f9fafb;
+
+  /* Chart */
+  --mieweb-chart-1: #38bdf8;
+  --mieweb-chart-2: #34d399;
+  --mieweb-chart-3: #ffeb26;
+  --mieweb-chart-4: #f87171;
+  --mieweb-chart-5: #a78bfa;
 }
 
 /* ============================================

package/dist/brands/webchart.css

@@ -44,6 +44,16 @@
   --mieweb-success-foreground: #ffffff;
   --mieweb-warning: #f59e0b;
   --mieweb-warning-foreground: #ffffff;
+  --mieweb-info: #0ea5e9;
+  --mieweb-info-foreground: #ffffff;
+  --mieweb-secondary-foreground: #ffffff;
+
+  /* Chart / Data Visualization */
+  --mieweb-chart-1: #f5841f;
+  --mieweb-chart-2: #22c55e;
+  --mieweb-chart-3: #0ea5e9;
+  --mieweb-chart-4: #ef4444;
+  --mieweb-chart-5: #6366f1;
 
   /* Typography */
   --mieweb-font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
@@ -85,6 +95,16 @@
   --mieweb-success-foreground: #fafafa;
   --mieweb-warning: #d97706;
   --mieweb-warning-foreground: #fafafa;
+  --mieweb-info: #0284c7;
+  --mieweb-info-foreground: #fafafa;
+  --mieweb-secondary-foreground: #fafafa;
+
+  /* Chart */
+  --mieweb-chart-1: #fb923c;
+  --mieweb-chart-2: #4ade80;
+  --mieweb-chart-3: #38bdf8;
+  --mieweb-chart-4: #f87171;
+  --mieweb-chart-5: #818cf8;
 }
 
 /* ============================================