@mieweb/ui 0.1.0

package/dist/chunk-TA6FVVCM.js

@@ -0,0 +1,207 @@
+import { Tooltip } from './chunk-UZUBLXVC.js';
+import { useTheme } from './chunk-KJZNEVYM.js';
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+var ThemeProviderContext = React.createContext(void 0);
+function ThemeProvider({
+  children,
+  defaultTheme: _defaultTheme = "system"
+}) {
+  const { theme, setTheme, resolvedTheme } = useTheme();
+  const value = React.useMemo(
+    () => ({ theme, setTheme, resolvedTheme }),
+    [theme, setTheme, resolvedTheme]
+  );
+  return /* @__PURE__ */ jsx(ThemeProviderContext.Provider, { value, children });
+}
+ThemeProvider.displayName = "ThemeProvider";
+function useThemeContext() {
+  const context = React.useContext(ThemeProviderContext);
+  if (!context) {
+    throw new Error("useThemeContext must be used within a ThemeProvider");
+  }
+  return context;
+}
+var themeToggleVariants = cva(
+  [
+    "inline-flex items-center justify-center",
+    "rounded-md border transition-colors",
+    "focus:outline-none focus:ring-2 focus:ring-primary-500/40"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-7 w-7",
+        md: "h-8 w-8",
+        lg: "h-9 w-9"
+      },
+      variant: {
+        default: [
+          "border-neutral-300 bg-white text-neutral-600 shadow-sm",
+          "hover:bg-neutral-100",
+          "dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700"
+        ],
+        ghost: [
+          "border-transparent bg-transparent text-neutral-600",
+          "hover:bg-neutral-100",
+          "dark:text-neutral-300 dark:hover:bg-neutral-700"
+        ]
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+var themeToggleIconVariants = cva("", {
+  variants: {
+    size: {
+      sm: "h-3.5 w-3.5",
+      md: "h-4 w-4",
+      lg: "h-5 w-5"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var SunIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+      }
+    )
+  }
+);
+var MoonIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+      }
+    )
+  }
+);
+var SystemIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+      }
+    )
+  }
+);
+var ThemeToggle = React.forwardRef(
+  ({
+    className,
+    size,
+    variant,
+    mode = "two-way",
+    showTooltip = true,
+    tooltipPlacement = "bottom",
+    tooltipDelay = 140,
+    lightIcon,
+    darkIcon,
+    systemIcon,
+    ...props
+  }, ref) => {
+    const { theme, setTheme, resolvedTheme } = useTheme();
+    const handleClick = React.useCallback(() => {
+      if (mode === "two-way") {
+        setTheme(resolvedTheme === "dark" ? "light" : "dark");
+      } else {
+        const nextTheme = {
+          light: "dark",
+          dark: "system",
+          system: "light"
+        };
+        setTheme(nextTheme[theme]);
+      }
+    }, [mode, theme, resolvedTheme, setTheme]);
+    const getLabel = () => {
+      if (mode === "two-way") {
+        return resolvedTheme === "dark" ? "Switch to light mode" : "Switch to dark mode";
+      }
+      const nextThemeLabels = {
+        light: "Switch to dark mode",
+        dark: "Switch to system theme",
+        system: "Switch to light mode"
+      };
+      return nextThemeLabels[theme];
+    };
+    const getCurrentIcon = () => {
+      if (mode === "three-way" && theme === "system") {
+        return systemIcon || /* @__PURE__ */ jsx(SystemIcon, { className: themeToggleIconVariants({ size }) });
+      }
+      if (resolvedTheme === "dark") {
+        return darkIcon || /* @__PURE__ */ jsx(SunIcon, { className: themeToggleIconVariants({ size }) });
+      }
+      return lightIcon || /* @__PURE__ */ jsx(MoonIcon, { className: themeToggleIconVariants({ size }) });
+    };
+    const label = getLabel();
+    const button = /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": label,
+        onClick: handleClick,
+        className: cn(themeToggleVariants({ size, variant }), className),
+        ...props,
+        children: getCurrentIcon()
+      }
+    );
+    if (showTooltip) {
+      return /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: label,
+          placement: tooltipPlacement,
+          delay: tooltipDelay,
+          children: button
+        }
+      );
+    }
+    return button;
+  }
+);
+ThemeToggle.displayName = "ThemeToggle";
+
+export { ThemeProvider, ThemeProviderContext, ThemeToggle, themeToggleIconVariants, themeToggleVariants, useThemeContext };
+//# sourceMappingURL=chunk-TA6FVVCM.js.map
+//# sourceMappingURL=chunk-TA6FVVCM.js.map

package/dist/chunk-TA6FVVCM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ThemeProvider/ThemeProvider.tsx","../src/components/ThemeProvider/ThemeToggle.tsx"],"names":["jsx","React2"],"mappings":"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","file":"chunk-TA6FVVCM.js","sourcesContent":["import * as React from 'react';\nimport { useTheme, type Theme, type ResolvedTheme } from '../../hooks/useTheme';\n\nexport interface ThemeProviderContextValue {\n  theme: Theme;\n  setTheme: (theme: Theme) => void;\n  resolvedTheme: ResolvedTheme;\n}\n\nconst ThemeProviderContext = React.createContext<\n  ThemeProviderContextValue | undefined\n>(undefined);\n\nexport interface ThemeProviderProps {\n  children: React.ReactNode;\n  /** Default theme to use on first load */\n  defaultTheme?: Theme;\n  /** Storage key for persisting theme */\n  storageKey?: string;\n}\n\n/**\n * Provider component that wraps your app to enable theme switching.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <ThemeProvider defaultTheme=\"system\">\n *       <YourApp />\n *     </ThemeProvider>\n *   );\n * }\n * ```\n */\nfunction ThemeProvider({\n  children,\n  defaultTheme: _defaultTheme = 'system',\n}: ThemeProviderProps) {\n  const { theme, setTheme, resolvedTheme } = useTheme();\n\n  const value = React.useMemo(\n    () => ({ theme, setTheme, resolvedTheme }),\n    [theme, setTheme, resolvedTheme]\n  );\n\n  return (\n    <ThemeProviderContext.Provider value={value}>\n      {children}\n    </ThemeProviderContext.Provider>\n  );\n}\n\nThemeProvider.displayName = 'ThemeProvider';\n\n/**\n * Hook to access the theme context.\n *\n * @example\n * ```tsx\n * function ThemeToggle() {\n *   const { theme, setTheme, resolvedTheme } = useThemeContext();\n *   return (\n *     <button onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>\n *       Toggle theme\n *     </button>\n *   );\n * }\n * ```\n */\nfunction useThemeContext(): ThemeProviderContextValue {\n  const context = React.useContext(ThemeProviderContext);\n  if (!context) {\n    throw new Error('useThemeContext must be used within a ThemeProvider');\n  }\n  return context;\n}\n\nexport { ThemeProvider, ThemeProviderContext, useThemeContext };\n","import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { useTheme, type Theme } from '../../hooks/useTheme';\nimport { Tooltip } from '../Tooltip';\n\n// ============================================================================\n// Theme Toggle Variants\n// ============================================================================\n\nconst themeToggleVariants = cva(\n  [\n    'inline-flex items-center justify-center',\n    'rounded-md border transition-colors',\n    'focus:outline-none focus:ring-2 focus:ring-primary-500/40',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-7 w-7',\n        md: 'h-8 w-8',\n        lg: 'h-9 w-9',\n      },\n      variant: {\n        default: [\n          'border-neutral-300 bg-white text-neutral-600 shadow-sm',\n          'hover:bg-neutral-100',\n          'dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700',\n        ],\n        ghost: [\n          'border-transparent bg-transparent text-neutral-600',\n          'hover:bg-neutral-100',\n          'dark:text-neutral-300 dark:hover:bg-neutral-700',\n        ],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n    },\n  }\n);\n\nconst themeToggleIconVariants = cva('', {\n  variants: {\n    size: {\n      sm: 'h-3.5 w-3.5',\n      md: 'h-4 w-4',\n      lg: 'h-5 w-5',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\n// ============================================================================\n// Icon Components\n// ============================================================================\n\ninterface IconProps {\n  className?: string;\n}\n\nconst SunIcon: React.FC<IconProps> = ({ className }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"\n    />\n  </svg>\n);\n\nconst MoonIcon: React.FC<IconProps> = ({ className }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"\n    />\n  </svg>\n);\n\nconst SystemIcon: React.FC<IconProps> = ({ className }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// ThemeToggle Component\n// ============================================================================\n\nexport interface ThemeToggleProps\n  extends\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n    VariantProps<typeof themeToggleVariants> {\n  /**\n   * What themes to cycle through.\n   * - 'two-way': Toggle between light and dark only\n   * - 'three-way': Cycle through light → dark → system\n   * @default 'two-way'\n   */\n  mode?: 'two-way' | 'three-way';\n  /**\n   * Whether to show a tooltip with the current/next theme\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Tooltip placement\n   * @default 'bottom'\n   */\n  tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';\n  /**\n   * Delay before showing tooltip in ms\n   * @default 140\n   */\n  tooltipDelay?: number;\n  /**\n   * Custom icon for light theme\n   */\n  lightIcon?: React.ReactNode;\n  /**\n   * Custom icon for dark theme\n   */\n  darkIcon?: React.ReactNode;\n  /**\n   * Custom icon for system theme (only used in three-way mode)\n   */\n  systemIcon?: React.ReactNode;\n}\n\n/**\n * An accessible theme toggle button that switches between light/dark modes.\n *\n * Uses the mieweb-ui useTheme hook for state management and persists\n * the user's preference to localStorage.\n *\n * @example\n * ```tsx\n * // Simple two-way toggle (light/dark)\n * <ThemeToggle />\n *\n * // Three-way cycle (light → dark → system)\n * <ThemeToggle mode=\"three-way\" />\n *\n * // With custom styling\n * <ThemeToggle size=\"lg\" variant=\"ghost\" />\n *\n * // Without tooltip\n * <ThemeToggle showTooltip={false} />\n * ```\n */\nconst ThemeToggle = React.forwardRef<HTMLButtonElement, ThemeToggleProps>(\n  (\n    {\n      className,\n      size,\n      variant,\n      mode = 'two-way',\n      showTooltip = true,\n      tooltipPlacement = 'bottom',\n      tooltipDelay = 140,\n      lightIcon,\n      darkIcon,\n      systemIcon,\n      ...props\n    },\n    ref\n  ) => {\n    const { theme, setTheme, resolvedTheme } = useTheme();\n\n    const handleClick = React.useCallback(() => {\n      if (mode === 'two-way') {\n        // Simple toggle between light and dark\n        setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');\n      } else {\n        // Three-way cycle: light → dark → system\n        const nextTheme: Record<Theme, Theme> = {\n          light: 'dark',\n          dark: 'system',\n          system: 'light',\n        };\n        setTheme(nextTheme[theme]);\n      }\n    }, [mode, theme, resolvedTheme, setTheme]);\n\n    const getLabel = () => {\n      if (mode === 'two-way') {\n        return resolvedTheme === 'dark'\n          ? 'Switch to light mode'\n          : 'Switch to dark mode';\n      }\n      // Three-way mode - show what the next theme will be\n      const nextThemeLabels: Record<Theme, string> = {\n        light: 'Switch to dark mode',\n        dark: 'Switch to system theme',\n        system: 'Switch to light mode',\n      };\n      return nextThemeLabels[theme];\n    };\n\n    const getCurrentIcon = () => {\n      if (mode === 'three-way' && theme === 'system') {\n        return (\n          systemIcon || (\n            <SystemIcon className={themeToggleIconVariants({ size })} />\n          )\n        );\n      }\n\n      if (resolvedTheme === 'dark') {\n        return (\n          darkIcon || <SunIcon className={themeToggleIconVariants({ size })} />\n        );\n      }\n\n      return (\n        lightIcon || <MoonIcon className={themeToggleIconVariants({ size })} />\n      );\n    };\n\n    const label = getLabel();\n\n    const button = (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={label}\n        onClick={handleClick}\n        className={cn(themeToggleVariants({ size, variant }), className)}\n        {...props}\n      >\n        {getCurrentIcon()}\n      </button>\n    );\n\n    if (showTooltip) {\n      return (\n        <Tooltip\n          content={label}\n          placement={tooltipPlacement}\n          delay={tooltipDelay}\n        >\n          {button}\n        </Tooltip>\n      );\n    }\n\n    return button;\n  }\n);\n\nThemeToggle.displayName = 'ThemeToggle';\n\nexport { ThemeToggle, themeToggleVariants, themeToggleIconVariants };\n"]}

package/dist/chunk-UHSPAFY6.js

@@ -0,0 +1,82 @@
+// src/brands/mieweb.ts
+var miewebBrand = {
+  name: "mieweb",
+  displayName: "Medical Informatics Engineering",
+  description: "Healthcare software and services company",
+  colors: {
+    // Primary color scale - MIE Green (#27ae60)
+    primary: {
+      50: "#e8f8ef",
+      100: "#c5edd6",
+      200: "#9fe2bb",
+      300: "#79d7a0",
+      400: "#53cc85",
+      500: "#27ae60",
+      600: "#219c55",
+      700: "#1b894a",
+      800: "#15773e",
+      900: "#0f6533",
+      950: "#094d26"
+    },
+    // Light mode semantic colors
+    light: {
+      background: "#ffffff",
+      foreground: "#171717",
+      card: "#ffffff",
+      cardForeground: "#171717",
+      muted: "#f5f5f5",
+      mutedForeground: "#737373",
+      border: "#e5e7eb",
+      input: "#e5e7eb",
+      ring: "#27ae60",
+      destructive: "#ef4444",
+      destructiveForeground: "#ffffff",
+      success: "#22c55e",
+      successForeground: "#ffffff",
+      warning: "#f59e0b",
+      warningForeground: "#ffffff"
+    },
+    // Dark mode semantic colors
+    dark: {
+      background: "#171717",
+      foreground: "#fafafa",
+      card: "#262626",
+      cardForeground: "#fafafa",
+      muted: "#404040",
+      mutedForeground: "#a1a1aa",
+      border: "#404040",
+      input: "#404040",
+      ring: "#27ae60",
+      destructive: "#dc2626",
+      destructiveForeground: "#fafafa",
+      success: "#16a34a",
+      successForeground: "#fafafa",
+      warning: "#d97706",
+      warningForeground: "#fafafa"
+    }
+  },
+  typography: {
+    fontFamily: {
+      sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
+      mono: ["ui-monospace", "SFMono-Regular", "Menlo", "monospace"]
+    }
+  },
+  borderRadius: {
+    none: "0",
+    sm: "0.25rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    xl: "1rem",
+    "2xl": "1.5rem",
+    full: "9999px"
+  },
+  boxShadow: {
+    card: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    dropdown: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    modal: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
+  }
+};
+
+export { miewebBrand };
+//# sourceMappingURL=chunk-UHSPAFY6.js.map
+//# sourceMappingURL=chunk-UHSPAFY6.js.map

package/dist/chunk-UHSPAFY6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/brands/mieweb.ts"],"names":[],"mappings":";AAaO,IAAM,WAAA,GAA2B;AAAA,EACtC,IAAA,EAAM,QAAA;AAAA,EACN,WAAA,EAAa,iCAAA;AAAA,EACb,WAAA,EAAa,0CAAA;AAAA,EAEb,MAAA,EAAQ;AAAA;AAAA,IAEN,OAAA,EAAS;AAAA,MACP,EAAA,EAAI,SAAA;AAAA,MACJ,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK;AAAA,KACP;AAAA;AAAA,IAGA,KAAA,EAAO;AAAA,MACL,UAAA,EAAY,SAAA;AAAA,MACZ,UAAA,EAAY,SAAA;AAAA,MACZ,IAAA,EAAM,SAAA;AAAA,MACN,cAAA,EAAgB,SAAA;AAAA,MAChB,KAAA,EAAO,SAAA;AAAA,MACP,eAAA,EAAiB,SAAA;AAAA,MACjB,MAAA,EAAQ,SAAA;AAAA,MACR,KAAA,EAAO,SAAA;AAAA,MACP,IAAA,EAAM,SAAA;AAAA,MACN,WAAA,EAAa,SAAA;AAAA,MACb,qBAAA,EAAuB,SAAA;AAAA,MACvB,OAAA,EAAS,SAAA;AAAA,MACT,iBAAA,EAAmB,SAAA;AAAA,MACnB,OAAA,EAAS,SAAA;AAAA,MACT,iBAAA,EAAmB;AAAA,KACrB;AAAA;AAAA,IAGA,IAAA,EAAM;AAAA,MACJ,UAAA,EAAY,SAAA;AAAA,MACZ,UAAA,EAAY,SAAA;AAAA,MACZ,IAAA,EAAM,SAAA;AAAA,MACN,cAAA,EAAgB,SAAA;AAAA,MAChB,KAAA,EAAO,SAAA;AAAA,MACP,eAAA,EAAiB,SAAA;AAAA,MACjB,MAAA,EAAQ,SAAA;AAAA,MACR,KAAA,EAAO,SAAA;AAAA,MACP,IAAA,EAAM,SAAA;AAAA,MACN,WAAA,EAAa,SAAA;AAAA,MACb,qBAAA,EAAuB,SAAA;AAAA,MACvB,OAAA,EAAS,SAAA;AAAA,MACT,iBAAA,EAAmB,SAAA;AAAA,MACnB,OAAA,EAAS,SAAA;AAAA,MACT,iBAAA,EAAmB;AAAA;AACrB,GACF;AAAA,EAEA,UAAA,EAAY;AAAA,IACV,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,CAAC,OAAA,EAAS,eAAA,EAAiB,aAAa,YAAY,CAAA;AAAA,MAC1D,IAAA,EAAM,CAAC,cAAA,EAAgB,gBAAA,EAAkB,SAAS,WAAW;AAAA;AAC/D,GACF;AAAA,EAEA,YAAA,EAAc;AAAA,IACZ,IAAA,EAAM,GAAA;AAAA,IACN,EAAA,EAAI,SAAA;AAAA,IACJ,EAAA,EAAI,QAAA;AAAA,IACJ,EAAA,EAAI,SAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA,IACJ,KAAA,EAAO,QAAA;AAAA,IACP,IAAA,EAAM;AAAA,GACR;AAAA,EAEA,SAAA,EAAW;AAAA,IACT,IAAA,EAAM,+DAAA;AAAA,IACN,QAAA,EACE,kEAAA;AAAA,IACF,KAAA,EAAO;AAAA;AAEX","file":"chunk-UHSPAFY6.js","sourcesContent":["/**\n * MIE Web Brand Configuration\n *\n * The official brand theme for Medical Informatics Engineering (MIE).\n * Primary color: #27ae60 (MIE Green)\n */\n\nimport type { BrandConfig } from './types';\n\n/**\n * MIE Web brand configuration.\n * This defines all the design tokens used in MIE Web applications.\n */\nexport const miewebBrand: BrandConfig = {\n  name: 'mieweb',\n  displayName: 'Medical Informatics Engineering',\n  description: 'Healthcare software and services company',\n\n  colors: {\n    // Primary color scale - MIE Green (#27ae60)\n    primary: {\n      50: '#e8f8ef',\n      100: '#c5edd6',\n      200: '#9fe2bb',\n      300: '#79d7a0',\n      400: '#53cc85',\n      500: '#27ae60',\n      600: '#219c55',\n      700: '#1b894a',\n      800: '#15773e',\n      900: '#0f6533',\n      950: '#094d26',\n    },\n\n    // Light mode semantic colors\n    light: {\n      background: '#ffffff',\n      foreground: '#171717',\n      card: '#ffffff',\n      cardForeground: '#171717',\n      muted: '#f5f5f5',\n      mutedForeground: '#737373',\n      border: '#e5e7eb',\n      input: '#e5e7eb',\n      ring: '#27ae60',\n      destructive: '#ef4444',\n      destructiveForeground: '#ffffff',\n      success: '#22c55e',\n      successForeground: '#ffffff',\n      warning: '#f59e0b',\n      warningForeground: '#ffffff',\n    },\n\n    // Dark mode semantic colors\n    dark: {\n      background: '#171717',\n      foreground: '#fafafa',\n      card: '#262626',\n      cardForeground: '#fafafa',\n      muted: '#404040',\n      mutedForeground: '#a1a1aa',\n      border: '#404040',\n      input: '#404040',\n      ring: '#27ae60',\n      destructive: '#dc2626',\n      destructiveForeground: '#fafafa',\n      success: '#16a34a',\n      successForeground: '#fafafa',\n      warning: '#d97706',\n      warningForeground: '#fafafa',\n    },\n  },\n\n  typography: {\n    fontFamily: {\n      sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],\n      mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],\n    },\n  },\n\n  borderRadius: {\n    none: '0',\n    sm: '0.25rem',\n    md: '0.5rem',\n    lg: '0.75rem',\n    xl: '1rem',\n    '2xl': '1.5rem',\n    full: '9999px',\n  },\n\n  boxShadow: {\n    card: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n    dropdown:\n      '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n    modal: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n  },\n};\n\nexport { miewebBrand as default };\n"]}

package/dist/chunk-ULOA7WBW.js

@@ -0,0 +1,82 @@
+// src/brands/bluehive.ts
+var bluehiveBrand = {
+  name: "bluehive",
+  displayName: "BlueHive Health",
+  description: "DOT Physical scheduling and healthcare compliance platform",
+  colors: {
+    // Primary color scale - BlueHive Blue (#27aae1)
+    primary: {
+      50: "#e6f7fc",
+      100: "#b3e6f6",
+      200: "#80d5f0",
+      300: "#4dc4ea",
+      400: "#27aae1",
+      500: "#27aae1",
+      600: "#1f98ca",
+      700: "#1786b3",
+      800: "#0f749c",
+      900: "#086285",
+      950: "#00506e"
+    },
+    // Light mode semantic colors
+    light: {
+      background: "#ffffff",
+      foreground: "#171717",
+      card: "#ffffff",
+      cardForeground: "#171717",
+      muted: "#f5f5f5",
+      mutedForeground: "#737373",
+      border: "#e5e7eb",
+      input: "#e5e7eb",
+      ring: "#27aae1",
+      destructive: "#ef4444",
+      destructiveForeground: "#ffffff",
+      success: "#22c55e",
+      successForeground: "#ffffff",
+      warning: "#f59e0b",
+      warningForeground: "#ffffff"
+    },
+    // Dark mode semantic colors
+    dark: {
+      background: "#171717",
+      foreground: "#fafafa",
+      card: "#262626",
+      cardForeground: "#fafafa",
+      muted: "#404040",
+      mutedForeground: "#a1a1aa",
+      border: "#404040",
+      input: "#404040",
+      ring: "#27aae1",
+      destructive: "#dc2626",
+      destructiveForeground: "#fafafa",
+      success: "#16a34a",
+      successForeground: "#fafafa",
+      warning: "#d97706",
+      warningForeground: "#fafafa"
+    }
+  },
+  typography: {
+    fontFamily: {
+      sans: ["Nunito", "ui-sans-serif", "system-ui", "sans-serif"],
+      mono: ["ui-monospace", "SFMono-Regular", "Menlo", "monospace"]
+    }
+  },
+  borderRadius: {
+    none: "0",
+    sm: "0.25rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    xl: "1rem",
+    "2xl": "1.5rem",
+    full: "9999px"
+  },
+  boxShadow: {
+    card: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    dropdown: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    modal: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
+  }
+};
+
+export { bluehiveBrand };
+//# sourceMappingURL=chunk-ULOA7WBW.js.map
+//# sourceMappingURL=chunk-ULOA7WBW.js.map

package/dist/chunk-ULOA7WBW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/brands/bluehive.ts"],"names":[],"mappings":";AAaO,IAAM,aAAA,GAA6B;AAAA,EACxC,IAAA,EAAM,UAAA;AAAA,EACN,WAAA,EAAa,iBAAA;AAAA,EACb,WAAA,EAAa,4DAAA;AAAA,EAEb,MAAA,EAAQ;AAAA;AAAA,IAEN,OAAA,EAAS;AAAA,MACP,EAAA,EAAI,SAAA;AAAA,MACJ,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK,SAAA;AAAA,MACL,GAAA,EAAK;AAAA,KACP;AAAA;AAAA,IAGA,KAAA,EAAO;AAAA,MACL,UAAA,EAAY,SAAA;AAAA,MACZ,UAAA,EAAY,SAAA;AAAA,MACZ,IAAA,EAAM,SAAA;AAAA,MACN,cAAA,EAAgB,SAAA;AAAA,MAChB,KAAA,EAAO,SAAA;AAAA,MACP,eAAA,EAAiB,SAAA;AAAA,MACjB,MAAA,EAAQ,SAAA;AAAA,MACR,KAAA,EAAO,SAAA;AAAA,MACP,IAAA,EAAM,SAAA;AAAA,MACN,WAAA,EAAa,SAAA;AAAA,MACb,qBAAA,EAAuB,SAAA;AAAA,MACvB,OAAA,EAAS,SAAA;AAAA,MACT,iBAAA,EAAmB,SAAA;AAAA,MACnB,OAAA,EAAS,SAAA;AAAA,MACT,iBAAA,EAAmB;AAAA,KACrB;AAAA;AAAA,IAGA,IAAA,EAAM;AAAA,MACJ,UAAA,EAAY,SAAA;AAAA,MACZ,UAAA,EAAY,SAAA;AAAA,MACZ,IAAA,EAAM,SAAA;AAAA,MACN,cAAA,EAAgB,SAAA;AAAA,MAChB,KAAA,EAAO,SAAA;AAAA,MACP,eAAA,EAAiB,SAAA;AAAA,MACjB,MAAA,EAAQ,SAAA;AAAA,MACR,KAAA,EAAO,SAAA;AAAA,MACP,IAAA,EAAM,SAAA;AAAA,MACN,WAAA,EAAa,SAAA;AAAA,MACb,qBAAA,EAAuB,SAAA;AAAA,MACvB,OAAA,EAAS,SAAA;AAAA,MACT,iBAAA,EAAmB,SAAA;AAAA,MACnB,OAAA,EAAS,SAAA;AAAA,MACT,iBAAA,EAAmB;AAAA;AACrB,GACF;AAAA,EAEA,UAAA,EAAY;AAAA,IACV,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,CAAC,QAAA,EAAU,eAAA,EAAiB,aAAa,YAAY,CAAA;AAAA,MAC3D,IAAA,EAAM,CAAC,cAAA,EAAgB,gBAAA,EAAkB,SAAS,WAAW;AAAA;AAC/D,GACF;AAAA,EAEA,YAAA,EAAc;AAAA,IACZ,IAAA,EAAM,GAAA;AAAA,IACN,EAAA,EAAI,SAAA;AAAA,IACJ,EAAA,EAAI,QAAA;AAAA,IACJ,EAAA,EAAI,SAAA;AAAA,IACJ,EAAA,EAAI,MAAA;AAAA,IACJ,KAAA,EAAO,QAAA;AAAA,IACP,IAAA,EAAM;AAAA,GACR;AAAA,EAEA,SAAA,EAAW;AAAA,IACT,IAAA,EAAM,+DAAA;AAAA,IACN,QAAA,EACE,kEAAA;AAAA,IACF,KAAA,EAAO;AAAA;AAEX","file":"chunk-ULOA7WBW.js","sourcesContent":["/**\n * BlueHive Brand Configuration\n *\n * The official brand theme for BlueHive Health.\n * Primary color: #27aae1 (BlueHive Blue)\n */\n\nimport type { BrandConfig } from './types';\n\n/**\n * BlueHive brand configuration.\n * This defines all the design tokens used in BlueHive Health applications.\n */\nexport const bluehiveBrand: BrandConfig = {\n  name: 'bluehive',\n  displayName: 'BlueHive Health',\n  description: 'DOT Physical scheduling and healthcare compliance platform',\n\n  colors: {\n    // Primary color scale - BlueHive Blue (#27aae1)\n    primary: {\n      50: '#e6f7fc',\n      100: '#b3e6f6',\n      200: '#80d5f0',\n      300: '#4dc4ea',\n      400: '#27aae1',\n      500: '#27aae1',\n      600: '#1f98ca',\n      700: '#1786b3',\n      800: '#0f749c',\n      900: '#086285',\n      950: '#00506e',\n    },\n\n    // Light mode semantic colors\n    light: {\n      background: '#ffffff',\n      foreground: '#171717',\n      card: '#ffffff',\n      cardForeground: '#171717',\n      muted: '#f5f5f5',\n      mutedForeground: '#737373',\n      border: '#e5e7eb',\n      input: '#e5e7eb',\n      ring: '#27aae1',\n      destructive: '#ef4444',\n      destructiveForeground: '#ffffff',\n      success: '#22c55e',\n      successForeground: '#ffffff',\n      warning: '#f59e0b',\n      warningForeground: '#ffffff',\n    },\n\n    // Dark mode semantic colors\n    dark: {\n      background: '#171717',\n      foreground: '#fafafa',\n      card: '#262626',\n      cardForeground: '#fafafa',\n      muted: '#404040',\n      mutedForeground: '#a1a1aa',\n      border: '#404040',\n      input: '#404040',\n      ring: '#27aae1',\n      destructive: '#dc2626',\n      destructiveForeground: '#fafafa',\n      success: '#16a34a',\n      successForeground: '#fafafa',\n      warning: '#d97706',\n      warningForeground: '#fafafa',\n    },\n  },\n\n  typography: {\n    fontFamily: {\n      sans: ['Nunito', 'ui-sans-serif', 'system-ui', 'sans-serif'],\n      mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],\n    },\n  },\n\n  borderRadius: {\n    none: '0',\n    sm: '0.25rem',\n    md: '0.5rem',\n    lg: '0.75rem',\n    xl: '1rem',\n    '2xl': '1.5rem',\n    full: '9999px',\n  },\n\n  boxShadow: {\n    card: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n    dropdown:\n      '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n    modal: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n  },\n};\n\n/**\n * BlueHive Tailwind preset.\n * Use this in your tailwind.config.js:\n *\n * ```js\n * import { bluehivePreset } from '@mieweb/ui/brands/bluehive';\n *\n * export default {\n *   presets: [bluehivePreset],\n *   // ... rest of config\n * }\n * ```\n */\nexport { bluehiveBrand as default };\n"]}