@tydavidson/design-system 1.1.2 → 1.1.3

package/dist/themes/index.js

@@ -1,18 +1,205 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getColorVariantClasses = exports.mapVariantToShadcnVariant = exports.mapColorToShadcnVariant = exports.isDarkTheme = exports.ThemeToggle = exports.useTheme = exports.ThemeContextProvider = exports.ThemeProvider = void 0;
-// Theme system exports
-var theme_provider_1 = require("./theme-provider");
-Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return theme_provider_1.ThemeProvider; } });
-var theme_context_1 = require("./theme-context");
-Object.defineProperty(exports, "ThemeContextProvider", { enumerable: true, get: function () { return theme_context_1.ThemeContextProvider; } });
-Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return theme_context_1.useTheme; } });
-var index_1 = require("../components/ui/theme-toggle/index");
-Object.defineProperty(exports, "ThemeToggle", { enumerable: true, get: function () { return index_1.ThemeToggle; } });
-// Re-export theme utilities
-var theme_utils_1 = require("../lib/theme-utils");
-Object.defineProperty(exports, "isDarkTheme", { enumerable: true, get: function () { return theme_utils_1.isDarkTheme; } });
-Object.defineProperty(exports, "mapColorToShadcnVariant", { enumerable: true, get: function () { return theme_utils_1.mapColorToShadcnVariant; } });
-Object.defineProperty(exports, "mapVariantToShadcnVariant", { enumerable: true, get: function () { return theme_utils_1.mapVariantToShadcnVariant; } });
-Object.defineProperty(exports, "getColorVariantClasses", { enumerable: true, get: function () { return theme_utils_1.getColorVariantClasses; } });
+'use strict';
+
+var nextThemes = require('next-themes');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var iconsReact = require('@tabler/icons-react');
+
+// src/themes/theme-provider.tsx
+function ThemeProvider({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    nextThemes.ThemeProvider,
+    {
+      attribute: "class",
+      defaultTheme: "system",
+      enableSystem: true,
+      disableTransitionOnChange: true,
+      ...props,
+      children
+    }
+  );
+}
+
+// src/lib/theme-utils.ts
+var mapColorToShadcnVariant = (color) => {
+  switch (color) {
+    case "brand":
+      return "default";
+    case "error":
+      return "destructive";
+    case "warning":
+    case "success":
+      return "secondary";
+    // Will need additional classes
+    default:
+      return "default";
+  }
+};
+var mapVariantToShadcnVariant = (variant) => {
+  switch (variant) {
+    case "primary":
+      return "default";
+    case "secondary":
+      return "outline";
+    case "tertiary":
+      return "ghost";
+    default:
+      return "default";
+  }
+};
+var getColorVariantClasses = (color, variant) => {
+  const colorVariantMap = {
+    primary: {
+      brand: "bg-brand-600 hover:bg-brand-700 text-white focus-visible:ring-brand-500",
+      error: "bg-error-600 hover:bg-error-700 text-white focus-visible:ring-error-500",
+      warning: "bg-warning-600 hover:bg-warning-700 text-white focus-visible:ring-warning-500",
+      success: "bg-success-600 hover:bg-success-700 text-white focus-visible:ring-success-500"
+    },
+    secondary: {
+      brand: "border-brand-300 text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
+      error: "border-error-300 text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
+      warning: "border-warning-300 text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
+      success: "border-success-300 text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
+    },
+    tertiary: {
+      brand: "text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
+      error: "text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
+      warning: "text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
+      success: "text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
+    }
+  };
+  return colorVariantMap[variant]?.[color] || "";
+};
+var isDarkTheme = (theme, systemTheme) => {
+  if (theme === "system") {
+    return systemTheme === "dark";
+  }
+  return theme === "dark";
+};
+var ThemeContext = react.createContext(void 0);
+function ThemeContextProvider({
+  children
+}) {
+  const [isClient, setIsClient] = react.useState(false);
+  const { theme, setTheme, resolvedTheme, systemTheme } = nextThemes.useTheme();
+  react.useEffect(() => {
+    setIsClient(true);
+  }, []);
+  const isDark = isDarkTheme(theme, systemTheme);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: {
+    theme: theme || "system",
+    setTheme,
+    resolvedTheme: resolvedTheme || "light",
+    isClient,
+    isDark
+  }, children });
+}
+function useTheme() {
+  const context = react.useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeContextProvider");
+  }
+  return context;
+}
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function ThemeToggle({
+  className,
+  variant = "icon",
+  size = "md",
+  ...props
+}) {
+  const { theme, setTheme, resolvedTheme, isClient } = useTheme();
+  if (!isClient) return null;
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
+  const iconSize = {
+    sm: 16,
+    md: 20,
+    lg: 24
+  };
+  const sizeClasses = {
+    sm: "h-8 w-8",
+    md: "h-10 w-10",
+    lg: "h-12 w-12"
+  };
+  const textSizeClasses = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base"
+  };
+  if (variant === "icon") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: toggleTheme,
+        className: cn(
+          "inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          sizeClasses[size],
+          className
+        ),
+        "aria-label": resolvedTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
+        ...props,
+        children: resolvedTheme === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSun, { size: iconSize[size], stroke: 1.5 }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconMoon, { size: iconSize[size], stroke: 1.5 })
+      }
+    );
+  }
+  if (variant === "button") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: toggleTheme,
+        className: cn(
+          "inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2",
+          textSizeClasses[size],
+          "hover:bg-accent hover:text-accent-foreground",
+          className
+        ),
+        ...props,
+        children: resolvedTheme === "dark" ? "Light Mode" : "Dark Mode"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: toggleTheme,
+      className: cn(
+        "inline-flex items-center justify-center rounded-md px-3 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        textSizeClasses[size],
+        resolvedTheme === "dark" ? "bg-accent text-accent-foreground hover:bg-accent/80" : "bg-muted text-muted-foreground hover:bg-muted/80",
+        className
+      ),
+      "aria-label": resolvedTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
+      ...props,
+      children: resolvedTheme === "dark" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSun, { size: iconSize[size], stroke: 1.5, className: "mr-2" }),
+        "Light"
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconMoon, { size: iconSize[size], stroke: 1.5, className: "mr-2" }),
+        "Dark"
+      ] })
+    }
+  );
+}
+
+exports.ThemeContextProvider = ThemeContextProvider;
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeToggle = ThemeToggle;
+exports.getColorVariantClasses = getColorVariantClasses;
+exports.isDarkTheme = isDarkTheme;
+exports.mapColorToShadcnVariant = mapColorToShadcnVariant;
+exports.mapVariantToShadcnVariant = mapVariantToShadcnVariant;
+exports.useTheme = useTheme;
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/themes/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":";;;AAAA,uBAAuB;AACvB,mDAAiD;AAAxC,+GAAA,aAAa,OAAA;AACtB,iDAAiE;AAAxD,qHAAA,oBAAoB,OAAA;AAAE,yGAAA,QAAQ,OAAA;AACvC,6DAAkE;AAAzD,oGAAA,WAAW,OAAA;AAEpB,4BAA4B;AAC5B,kDAA6H;AAApH,0GAAA,WAAW,OAAA;AAAE,sHAAA,uBAAuB,OAAA;AAAE,wHAAA,yBAAyB,OAAA;AAAE,qHAAA,sBAAsB,OAAA"}
+{"version":3,"sources":["../../src/themes/theme-provider.tsx","../../src/lib/theme-utils.ts","../../src/themes/theme-context.tsx","../../src/lib/utils.ts","../../src/components/ui/theme-toggle/theme-toggle.tsx"],"names":["jsx","NextThemesProvider","createContext","useState","useNextTheme","useEffect","useContext","twMerge","clsx","IconSun","IconMoon","jsxs"],"mappings":"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","file":"index.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\"\nimport type { ThemeProviderProps } from \"next-themes/dist/types\"\n\n/**\n * ThemeProvider component for handling theme state\n * \n * This wraps the next-themes provider with sensible defaults\n * for handling light/dark themes and system preferences\n */\nexport function ThemeProvider({ \n  children, \n  ...props \n}: ThemeProviderProps) {\n  return (\n    <NextThemesProvider\n      attribute=\"class\"\n      defaultTheme=\"system\"\n      enableSystem\n      disableTransitionOnChange\n      {...props}\n    >\n      {children}\n    </NextThemesProvider>\n  )\n}","/**\n * Utility functions for theme handling\n */\n\n/**\n * Supported color theme values\n */\nexport type ThemeColor = 'brand' | 'error' | 'warning' | 'success';\n\n/**\n * Supported component variant types\n */\nexport type ComponentVariant = 'primary' | 'secondary' | 'tertiary';\n\n/**\n * Map design system colors to shadcn variants\n * \n * @param color - The design system color\n * @returns The corresponding shadcn variant\n */\nexport const mapColorToShadcnVariant = (color: ThemeColor) => {\n  switch (color) {\n    case 'brand': return 'default';\n    case 'error': return 'destructive';\n    case 'warning':\n    case 'success':\n      return 'secondary'; // Will need additional classes\n    default: return 'default';\n  }\n};\n\n/**\n * Map design system variants to shadcn variants\n * \n * @param variant - The design system variant\n * @returns The corresponding shadcn variant\n */\nexport const mapVariantToShadcnVariant = (variant: ComponentVariant) => {\n  switch (variant) {\n    case 'primary': return 'default';\n    case 'secondary': return 'outline';\n    case 'tertiary': return 'ghost';\n    default: return 'default';\n  }\n};\n\n/**\n * Generate Tailwind classes for color/variant combinations\n * \n * @param color - The design system color\n * @param variant - The design system variant\n * @returns String of Tailwind classes\n */\nexport const getColorVariantClasses = (\n  color: ThemeColor, \n  variant: ComponentVariant\n): string => {\n  const colorVariantMap: Record<ComponentVariant, Record<ThemeColor, string>> = {\n    primary: {\n      brand: 'bg-brand-600 hover:bg-brand-700 text-white focus-visible:ring-brand-500',\n      error: 'bg-error-600 hover:bg-error-700 text-white focus-visible:ring-error-500',\n      warning: 'bg-warning-600 hover:bg-warning-700 text-white focus-visible:ring-warning-500',\n      success: 'bg-success-600 hover:bg-success-700 text-white focus-visible:ring-success-500',\n    },\n    secondary: {\n      brand: 'border-brand-300 text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500',\n      error: 'border-error-300 text-error-700 hover:bg-error-50 focus-visible:ring-error-500',\n      warning: 'border-warning-300 text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500',\n      success: 'border-success-300 text-success-700 hover:bg-success-50 focus-visible:ring-success-500',\n    },\n    tertiary: {\n      brand: 'text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500',\n      error: 'text-error-700 hover:bg-error-50 focus-visible:ring-error-500',\n      warning: 'text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500',\n      success: 'text-success-700 hover:bg-success-50 focus-visible:ring-success-500',\n    }\n  };\n\n  return colorVariantMap[variant]?.[color] || '';\n};\n\n/**\n * Determine if the current theme is dark\n * \n * @param theme - The current theme\n * @param systemTheme - The system theme\n * @returns True if the theme is dark\n */\nexport const isDarkTheme = (theme: string | undefined, systemTheme: string | undefined): boolean => {\n  if (theme === 'system') {\n    return systemTheme === 'dark';\n  }\n  return theme === 'dark';\n};","\"use client\"\n\nimport React, { createContext, useContext, useEffect, useState } from \"react\"\nimport { useTheme as useNextTheme } from \"next-themes\"\nimport { isDarkTheme } from \"../lib/theme-utils\"\n\n/**\n * Theme context type definition\n */\ntype ThemeContextType = {\n  /** Current theme name (light, dark, system) */\n  theme: string;\n  \n  /** Method to change the theme */\n  setTheme: (theme: string) => void;\n  \n  /** Current resolved theme (light or dark) accounting for system preference */\n  resolvedTheme: string;\n  \n  /** Whether the client-side code has been initialized */\n  isClient: boolean;\n  \n  /** Whether the current theme is dark */\n  isDark: boolean;\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\n/**\n * ThemeContextProvider wraps the app and provides theme context\n */\nexport function ThemeContextProvider({ \n  children \n}: { \n  children: React.ReactNode \n}) {\n  const [isClient, setIsClient] = useState(false);\n  const { theme, setTheme, resolvedTheme, systemTheme } = useNextTheme();\n\n  // Handle client-side hydration\n  useEffect(() => {\n    setIsClient(true);\n  }, []);\n\n  // Determine if the theme is dark\n  const isDark = isDarkTheme(theme, systemTheme);\n\n  return (\n    <ThemeContext.Provider value={{\n      theme: theme || \"system\",\n      setTheme,\n      resolvedTheme: resolvedTheme || \"light\",\n      isClient,\n      isDark,\n    }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\n/**\n * Custom hook to access theme context\n * \n * @returns Theme context object\n */\nexport function useTheme() {\n  const context = useContext(ThemeContext);\n  \n  if (context === undefined) {\n    throw new Error(\"useTheme must be used within a ThemeContextProvider\");\n  }\n  \n  return context;\n}","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Combines multiple class values into a single className string\n * with proper Tailwind CSS class merging.\n * \n * @param inputs - Class values to merge\n * @returns Merged className string\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * Utility function to generate a unique ID.\n * Useful for ensuring unique IDs for form elements.\n * \n * @param prefix - Optional prefix for the ID\n * @returns A unique ID string\n */\nexport function generateId(prefix = 'id'): string {\n  const randomId = Math.random().toString(36).substring(2, 9);\n  return `${prefix}-${randomId}`;\n}\n\n/**\n * Type guard to check if a value is not null or undefined\n * \n * @param value - Value to check\n * @returns True if value is not null or undefined\n */\nexport function isNotNullOrUndefined<T>(value: T | null | undefined): value is T {\n  return value !== null && value !== undefined;\n}\n\n/**\n * Returns only the props that are safe to spread onto a DOM element\n * by filtering out custom props\n * \n * @param props - The props object\n * @param propNames - Names of custom props to filter out\n * @returns Object with only DOM-safe props\n */\nexport function filterDOMProps<T extends Record<string, any>, K extends keyof T>(\n  props: T, \n  propNames: K[]\n): Omit<T, K> {\n  const result = { ...props };\n  propNames.forEach(name => delete result[name]);\n  return result;\n}","\"use client\"\n\nimport * as React from \"react\"\nimport { useTheme } from \"../../../themes/theme-context\"\nimport { cn } from \"../../../lib/utils\"\nimport { IconMoon, IconSun } from \"@tabler/icons-react\"\n\n/**\n * Props for the ThemeToggle component\n */\nexport interface ThemeToggleProps extends React.HTMLAttributes<HTMLButtonElement> {\n  /**\n   * Variant of the toggle\n   * @default 'icon'\n   */\n  variant?: 'icon' | 'switch' | 'button';\n  \n  /**\n   * Size of the toggle\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * ThemeToggle component to switch between light and dark themes\n */\nexport function ThemeToggle({ \n  className, \n  variant = 'icon', \n  size = 'md',\n  ...props \n}: ThemeToggleProps) {\n  const { theme, setTheme, resolvedTheme, isClient } = useTheme()\n\n  // Only render on client to prevent hydration mismatch\n  if (!isClient) return null;\n\n  // Toggle between light and dark\n  const toggleTheme = () => {\n    setTheme(resolvedTheme === \"dark\" ? \"light\" : \"dark\")\n  }\n\n  // Size mapping for Tabler icons\n  const iconSize = {\n    sm: 16,\n    md: 20,\n    lg: 24,\n  }\n\n  // Size classes for button\n  const sizeClasses = {\n    sm: 'h-8 w-8',\n    md: 'h-10 w-10',\n    lg: 'h-12 w-12',\n  }\n\n  // Text size classes\n  const textSizeClasses = {\n    sm: 'text-xs',\n    md: 'text-sm',\n    lg: 'text-base',\n  }\n\n  // Variant specific rendering\n  if (variant === 'icon') {\n    return (\n      <button\n        type=\"button\"\n        onClick={toggleTheme}\n        className={cn(\n          \"inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n          sizeClasses[size],\n          className\n        )}\n        aria-label={resolvedTheme === \"dark\" ? \"Switch to light theme\" : \"Switch to dark theme\"}\n        {...props}\n      >\n        {resolvedTheme === \"dark\" ? (\n          <IconSun size={iconSize[size]} stroke={1.5} />\n        ) : (\n          <IconMoon size={iconSize[size]} stroke={1.5} />\n        )}\n      </button>\n    )\n  }\n  \n  // Button variant\n  if (variant === 'button') {\n    return (\n      <button\n        type=\"button\"\n        onClick={toggleTheme}\n        className={cn(\n          \"inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2\",\n          textSizeClasses[size],\n          \"hover:bg-accent hover:text-accent-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {resolvedTheme === \"dark\" ? \"Light Mode\" : \"Dark Mode\"}\n      </button>\n    )\n  }\n  \n  // Switch variant\n  return (\n    <button\n      type=\"button\"\n      onClick={toggleTheme}\n      className={cn(\n        \"inline-flex items-center justify-center rounded-md px-3 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        textSizeClasses[size],\n        resolvedTheme === \"dark\" \n          ? \"bg-accent text-accent-foreground hover:bg-accent/80\" \n          : \"bg-muted text-muted-foreground hover:bg-muted/80\",\n        className\n      )}\n      aria-label={resolvedTheme === \"dark\" ? \"Switch to light theme\" : \"Switch to dark theme\"}\n      {...props}\n    >\n      {resolvedTheme === \"dark\" ? (\n        <span className=\"flex items-center\">\n          <IconSun size={iconSize[size]} stroke={1.5} className=\"mr-2\" />\n          Light\n        </span>\n      ) : (\n        <span className=\"flex items-center\">\n          <IconMoon size={iconSize[size]} stroke={1.5} className=\"mr-2\" />\n          Dark\n        </span>\n      )}\n    </button>\n  )\n}"]}

package/dist/themes/index.mjs

@@ -0,0 +1,196 @@
+import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1 } from 'next-themes';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useContext } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { IconSun, IconMoon } from '@tabler/icons-react';
+
+// src/themes/theme-provider.tsx
+function ThemeProvider({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ThemeProvider$1,
+    {
+      attribute: "class",
+      defaultTheme: "system",
+      enableSystem: true,
+      disableTransitionOnChange: true,
+      ...props,
+      children
+    }
+  );
+}
+
+// src/lib/theme-utils.ts
+var mapColorToShadcnVariant = (color) => {
+  switch (color) {
+    case "brand":
+      return "default";
+    case "error":
+      return "destructive";
+    case "warning":
+    case "success":
+      return "secondary";
+    // Will need additional classes
+    default:
+      return "default";
+  }
+};
+var mapVariantToShadcnVariant = (variant) => {
+  switch (variant) {
+    case "primary":
+      return "default";
+    case "secondary":
+      return "outline";
+    case "tertiary":
+      return "ghost";
+    default:
+      return "default";
+  }
+};
+var getColorVariantClasses = (color, variant) => {
+  const colorVariantMap = {
+    primary: {
+      brand: "bg-brand-600 hover:bg-brand-700 text-white focus-visible:ring-brand-500",
+      error: "bg-error-600 hover:bg-error-700 text-white focus-visible:ring-error-500",
+      warning: "bg-warning-600 hover:bg-warning-700 text-white focus-visible:ring-warning-500",
+      success: "bg-success-600 hover:bg-success-700 text-white focus-visible:ring-success-500"
+    },
+    secondary: {
+      brand: "border-brand-300 text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
+      error: "border-error-300 text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
+      warning: "border-warning-300 text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
+      success: "border-success-300 text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
+    },
+    tertiary: {
+      brand: "text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
+      error: "text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
+      warning: "text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
+      success: "text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
+    }
+  };
+  return colorVariantMap[variant]?.[color] || "";
+};
+var isDarkTheme = (theme, systemTheme) => {
+  if (theme === "system") {
+    return systemTheme === "dark";
+  }
+  return theme === "dark";
+};
+var ThemeContext = createContext(void 0);
+function ThemeContextProvider({
+  children
+}) {
+  const [isClient, setIsClient] = useState(false);
+  const { theme, setTheme, resolvedTheme, systemTheme } = useTheme$1();
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  const isDark = isDarkTheme(theme, systemTheme);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: {
+    theme: theme || "system",
+    setTheme,
+    resolvedTheme: resolvedTheme || "light",
+    isClient,
+    isDark
+  }, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeContextProvider");
+  }
+  return context;
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function ThemeToggle({
+  className,
+  variant = "icon",
+  size = "md",
+  ...props
+}) {
+  const { theme, setTheme, resolvedTheme, isClient } = useTheme();
+  if (!isClient) return null;
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
+  const iconSize = {
+    sm: 16,
+    md: 20,
+    lg: 24
+  };
+  const sizeClasses = {
+    sm: "h-8 w-8",
+    md: "h-10 w-10",
+    lg: "h-12 w-12"
+  };
+  const textSizeClasses = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base"
+  };
+  if (variant === "icon") {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: toggleTheme,
+        className: cn(
+          "inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          sizeClasses[size],
+          className
+        ),
+        "aria-label": resolvedTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
+        ...props,
+        children: resolvedTheme === "dark" ? /* @__PURE__ */ jsx(IconSun, { size: iconSize[size], stroke: 1.5 }) : /* @__PURE__ */ jsx(IconMoon, { size: iconSize[size], stroke: 1.5 })
+      }
+    );
+  }
+  if (variant === "button") {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: toggleTheme,
+        className: cn(
+          "inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2",
+          textSizeClasses[size],
+          "hover:bg-accent hover:text-accent-foreground",
+          className
+        ),
+        ...props,
+        children: resolvedTheme === "dark" ? "Light Mode" : "Dark Mode"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: toggleTheme,
+      className: cn(
+        "inline-flex items-center justify-center rounded-md px-3 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        textSizeClasses[size],
+        resolvedTheme === "dark" ? "bg-accent text-accent-foreground hover:bg-accent/80" : "bg-muted text-muted-foreground hover:bg-muted/80",
+        className
+      ),
+      "aria-label": resolvedTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
+      ...props,
+      children: resolvedTheme === "dark" ? /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx(IconSun, { size: iconSize[size], stroke: 1.5, className: "mr-2" }),
+        "Light"
+      ] }) : /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx(IconMoon, { size: iconSize[size], stroke: 1.5, className: "mr-2" }),
+        "Dark"
+      ] })
+    }
+  );
+}
+
+export { ThemeContextProvider, ThemeProvider, ThemeToggle, getColorVariantClasses, isDarkTheme, mapColorToShadcnVariant, mapVariantToShadcnVariant, useTheme };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/themes/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/themes/theme-provider.tsx","../../src/lib/theme-utils.ts","../../src/themes/theme-context.tsx","../../src/lib/utils.ts","../../src/components/ui/theme-toggle/theme-toggle.tsx"],"names":["NextThemesProvider","useNextTheme","jsx"],"mappings":";;;;;;;;AAYO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,uBACE,GAAA;AAAA,IAACA,eAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,OAAA;AAAA,MACV,YAAA,EAAa,QAAA;AAAA,MACb,YAAA,EAAY,IAAA;AAAA,MACZ,yBAAA,EAAyB,IAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;ACPO,IAAM,uBAAA,GAA0B,CAAC,KAAA,KAAsB;AAC5D,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,OAAA;AAAS,MAAA,OAAO,SAAA;AAAA,IACrB,KAAK,OAAA;AAAS,MAAA,OAAO,aAAA;AAAA,IACrB,KAAK,SAAA;AAAA,IACL,KAAK,SAAA;AACH,MAAA,OAAO,WAAA;AAAA;AAAA,IACT;AAAS,MAAA,OAAO,SAAA;AAAA;AAEpB;AAQO,IAAM,yBAAA,GAA4B,CAAC,OAAA,KAA8B;AACtE,EAAA,QAAQ,OAAA;AAAS,IACf,KAAK,SAAA;AAAW,MAAA,OAAO,SAAA;AAAA,IACvB,KAAK,WAAA;AAAa,MAAA,OAAO,SAAA;AAAA,IACzB,KAAK,UAAA;AAAY,MAAA,OAAO,OAAA;AAAA,IACxB;AAAS,MAAA,OAAO,SAAA;AAAA;AAEpB;AASO,IAAM,sBAAA,GAAyB,CACpC,KAAA,EACA,OAAA,KACW;AACX,EAAA,MAAM,eAAA,GAAwE;AAAA,IAC5E,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,yEAAA;AAAA,MACP,KAAA,EAAO,yEAAA;AAAA,MACP,OAAA,EAAS,+EAAA;AAAA,MACT,OAAA,EAAS;AAAA,KACX;AAAA,IACA,SAAA,EAAW;AAAA,MACT,KAAA,EAAO,gFAAA;AAAA,MACP,KAAA,EAAO,gFAAA;AAAA,MACP,OAAA,EAAS,wFAAA;AAAA,MACT,OAAA,EAAS;AAAA,KACX;AAAA,IACA,QAAA,EAAU;AAAA,MACR,KAAA,EAAO,+DAAA;AAAA,MACP,KAAA,EAAO,+DAAA;AAAA,MACP,OAAA,EAAS,qEAAA;AAAA,MACT,OAAA,EAAS;AAAA;AACX,GACF;AAEA,EAAA,OAAO,eAAA,CAAgB,OAAO,CAAA,GAAI,KAAK,CAAA,IAAK,EAAA;AAC9C;AASO,IAAM,WAAA,GAAc,CAAC,KAAA,EAA2B,WAAA,KAA6C;AAClG,EAAA,IAAI,UAAU,QAAA,EAAU;AACtB,IAAA,OAAO,WAAA,KAAgB,MAAA;AAAA,EACzB;AACA,EAAA,OAAO,KAAA,KAAU,MAAA;AACnB;ACnEA,IAAM,YAAA,GAAe,cAA4C,MAAS,CAAA;AAKnE,SAAS,oBAAA,CAAqB;AAAA,EACnC;AACF,CAAA,EAEG;AACD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9C,EAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,aAAA,EAAe,WAAA,KAAgBC,UAAA,EAAa;AAGrE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,IAAI,CAAA;AAAA,EAClB,CAAA,EAAG,EAAE,CAAA;AAGL,EAAA,MAAM,MAAA,GAAS,WAAA,CAAY,KAAA,EAAO,WAAW,CAAA;AAE7C,EAAA,uBACEC,GAAAA,CAAC,YAAA,CAAa,QAAA,EAAb,EAAsB,KAAA,EAAO;AAAA,IAC5B,OAAO,KAAA,IAAS,QAAA;AAAA,IAChB,QAAA;AAAA,IACA,eAAe,aAAA,IAAiB,OAAA;AAAA,IAChC,QAAA;AAAA,IACA;AAAA,KAEC,QAAA,EACH,CAAA;AAEJ;AAOO,SAAS,QAAA,GAAW;AACzB,EAAA,MAAM,OAAA,GAAU,WAAW,YAAY,CAAA;AAEvC,EAAA,IAAI,YAAY,MAAA,EAAW;AACzB,IAAA,MAAM,IAAI,MAAM,qDAAqD,CAAA;AAAA,EACvE;AAEA,EAAA,OAAO,OAAA;AACT;AC/DO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACeO,SAAS,WAAA,CAAY;AAAA,EAC1B,SAAA;AAAA,EACA,OAAA,GAAU,MAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,aAAA,EAAe,QAAA,KAAa,QAAA,EAAS;AAG9D,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AAGtB,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,QAAA,CAAS,aAAA,KAAkB,MAAA,GAAS,OAAA,GAAU,MAAM,CAAA;AAAA,EACtD,CAAA;AAGA,EAAA,MAAM,QAAA,GAAW;AAAA,IACf,EAAA,EAAI,EAAA;AAAA,IACJ,EAAA,EAAI,EAAA;AAAA,IACJ,EAAA,EAAI;AAAA,GACN;AAGA,EAAA,MAAM,WAAA,GAAc;AAAA,IAClB,EAAA,EAAI,SAAA;AAAA,IACJ,EAAA,EAAI,WAAA;AAAA,IACJ,EAAA,EAAI;AAAA,GACN;AAGA,EAAA,MAAM,eAAA,GAAkB;AAAA,IACtB,EAAA,EAAI,SAAA;AAAA,IACJ,EAAA,EAAI,SAAA;AAAA,IACJ,EAAA,EAAI;AAAA,GACN;AAGA,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,uBACEA,GAAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,OAAA,EAAS,WAAA;AAAA,QACT,SAAA,EAAW,EAAA;AAAA,UACT,mIAAA;AAAA,UACA,YAAY,IAAI,CAAA;AAAA,UAChB;AAAA,SACF;AAAA,QACA,YAAA,EAAY,aAAA,KAAkB,MAAA,GAAS,uBAAA,GAA0B,sBAAA;AAAA,QAChE,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA,aAAA,KAAkB,yBACjBA,GAAAA,CAAC,WAAQ,IAAA,EAAM,QAAA,CAAS,IAAI,CAAA,EAAG,MAAA,EAAQ,KAAK,CAAA,mBAE5CA,IAAC,QAAA,EAAA,EAAS,IAAA,EAAM,SAAS,IAAI,CAAA,EAAG,QAAQ,GAAA,EAAK;AAAA;AAAA,KAEjD;AAAA,EAEJ;AAGA,EAAA,IAAI,YAAY,QAAA,EAAU;AACxB,IAAA,uBACEA,GAAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,OAAA,EAAS,WAAA;AAAA,QACT,SAAA,EAAW,EAAA;AAAA,UACT,gGAAA;AAAA,UACA,gBAAgB,IAAI,CAAA;AAAA,UACpB,8CAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA,aAAA,KAAkB,SAAS,YAAA,GAAe;AAAA;AAAA,KAC7C;AAAA,EAEJ;AAGA,EAAA,uBACEA,GAAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAS,WAAA;AAAA,MACT,SAAA,EAAW,EAAA;AAAA,QACT,oKAAA;AAAA,QACA,gBAAgB,IAAI,CAAA;AAAA,QACpB,aAAA,KAAkB,SACd,qDAAA,GACA,kDAAA;AAAA,QACJ;AAAA,OACF;AAAA,MACA,YAAA,EAAY,aAAA,KAAkB,MAAA,GAAS,uBAAA,GAA0B,sBAAA;AAAA,MAChE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,aAAA,KAAkB,MAAA,mBACjB,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,mBAAA,EACd,QAAA,EAAA;AAAA,wBAAAA,GAAAA,CAAC,WAAQ,IAAA,EAAM,QAAA,CAAS,IAAI,CAAA,EAAG,MAAA,EAAQ,GAAA,EAAK,SAAA,EAAU,MAAA,EAAO,CAAA;AAAA,QAAE;AAAA,OAAA,EAEjE,CAAA,mBAEA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mBAAA,EACd,QAAA,EAAA;AAAA,wBAAAA,GAAAA,CAAC,YAAS,IAAA,EAAM,QAAA,CAAS,IAAI,CAAA,EAAG,MAAA,EAAQ,GAAA,EAAK,SAAA,EAAU,MAAA,EAAO,CAAA;AAAA,QAAE;AAAA,OAAA,EAElE;AAAA;AAAA,GAEJ;AAEJ","file":"index.mjs","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\"\nimport type { ThemeProviderProps } from \"next-themes/dist/types\"\n\n/**\n * ThemeProvider component for handling theme state\n * \n * This wraps the next-themes provider with sensible defaults\n * for handling light/dark themes and system preferences\n */\nexport function ThemeProvider({ \n  children, \n  ...props \n}: ThemeProviderProps) {\n  return (\n    <NextThemesProvider\n      attribute=\"class\"\n      defaultTheme=\"system\"\n      enableSystem\n      disableTransitionOnChange\n      {...props}\n    >\n      {children}\n    </NextThemesProvider>\n  )\n}","/**\n * Utility functions for theme handling\n */\n\n/**\n * Supported color theme values\n */\nexport type ThemeColor = 'brand' | 'error' | 'warning' | 'success';\n\n/**\n * Supported component variant types\n */\nexport type ComponentVariant = 'primary' | 'secondary' | 'tertiary';\n\n/**\n * Map design system colors to shadcn variants\n * \n * @param color - The design system color\n * @returns The corresponding shadcn variant\n */\nexport const mapColorToShadcnVariant = (color: ThemeColor) => {\n  switch (color) {\n    case 'brand': return 'default';\n    case 'error': return 'destructive';\n    case 'warning':\n    case 'success':\n      return 'secondary'; // Will need additional classes\n    default: return 'default';\n  }\n};\n\n/**\n * Map design system variants to shadcn variants\n * \n * @param variant - The design system variant\n * @returns The corresponding shadcn variant\n */\nexport const mapVariantToShadcnVariant = (variant: ComponentVariant) => {\n  switch (variant) {\n    case 'primary': return 'default';\n    case 'secondary': return 'outline';\n    case 'tertiary': return 'ghost';\n    default: return 'default';\n  }\n};\n\n/**\n * Generate Tailwind classes for color/variant combinations\n * \n * @param color - The design system color\n * @param variant - The design system variant\n * @returns String of Tailwind classes\n */\nexport const getColorVariantClasses = (\n  color: ThemeColor, \n  variant: ComponentVariant\n): string => {\n  const colorVariantMap: Record<ComponentVariant, Record<ThemeColor, string>> = {\n    primary: {\n      brand: 'bg-brand-600 hover:bg-brand-700 text-white focus-visible:ring-brand-500',\n      error: 'bg-error-600 hover:bg-error-700 text-white focus-visible:ring-error-500',\n      warning: 'bg-warning-600 hover:bg-warning-700 text-white focus-visible:ring-warning-500',\n      success: 'bg-success-600 hover:bg-success-700 text-white focus-visible:ring-success-500',\n    },\n    secondary: {\n      brand: 'border-brand-300 text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500',\n      error: 'border-error-300 text-error-700 hover:bg-error-50 focus-visible:ring-error-500',\n      warning: 'border-warning-300 text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500',\n      success: 'border-success-300 text-success-700 hover:bg-success-50 focus-visible:ring-success-500',\n    },\n    tertiary: {\n      brand: 'text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500',\n      error: 'text-error-700 hover:bg-error-50 focus-visible:ring-error-500',\n      warning: 'text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500',\n      success: 'text-success-700 hover:bg-success-50 focus-visible:ring-success-500',\n    }\n  };\n\n  return colorVariantMap[variant]?.[color] || '';\n};\n\n/**\n * Determine if the current theme is dark\n * \n * @param theme - The current theme\n * @param systemTheme - The system theme\n * @returns True if the theme is dark\n */\nexport const isDarkTheme = (theme: string | undefined, systemTheme: string | undefined): boolean => {\n  if (theme === 'system') {\n    return systemTheme === 'dark';\n  }\n  return theme === 'dark';\n};","\"use client\"\n\nimport React, { createContext, useContext, useEffect, useState } from \"react\"\nimport { useTheme as useNextTheme } from \"next-themes\"\nimport { isDarkTheme } from \"../lib/theme-utils\"\n\n/**\n * Theme context type definition\n */\ntype ThemeContextType = {\n  /** Current theme name (light, dark, system) */\n  theme: string;\n  \n  /** Method to change the theme */\n  setTheme: (theme: string) => void;\n  \n  /** Current resolved theme (light or dark) accounting for system preference */\n  resolvedTheme: string;\n  \n  /** Whether the client-side code has been initialized */\n  isClient: boolean;\n  \n  /** Whether the current theme is dark */\n  isDark: boolean;\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\n/**\n * ThemeContextProvider wraps the app and provides theme context\n */\nexport function ThemeContextProvider({ \n  children \n}: { \n  children: React.ReactNode \n}) {\n  const [isClient, setIsClient] = useState(false);\n  const { theme, setTheme, resolvedTheme, systemTheme } = useNextTheme();\n\n  // Handle client-side hydration\n  useEffect(() => {\n    setIsClient(true);\n  }, []);\n\n  // Determine if the theme is dark\n  const isDark = isDarkTheme(theme, systemTheme);\n\n  return (\n    <ThemeContext.Provider value={{\n      theme: theme || \"system\",\n      setTheme,\n      resolvedTheme: resolvedTheme || \"light\",\n      isClient,\n      isDark,\n    }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\n/**\n * Custom hook to access theme context\n * \n * @returns Theme context object\n */\nexport function useTheme() {\n  const context = useContext(ThemeContext);\n  \n  if (context === undefined) {\n    throw new Error(\"useTheme must be used within a ThemeContextProvider\");\n  }\n  \n  return context;\n}","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Combines multiple class values into a single className string\n * with proper Tailwind CSS class merging.\n * \n * @param inputs - Class values to merge\n * @returns Merged className string\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * Utility function to generate a unique ID.\n * Useful for ensuring unique IDs for form elements.\n * \n * @param prefix - Optional prefix for the ID\n * @returns A unique ID string\n */\nexport function generateId(prefix = 'id'): string {\n  const randomId = Math.random().toString(36).substring(2, 9);\n  return `${prefix}-${randomId}`;\n}\n\n/**\n * Type guard to check if a value is not null or undefined\n * \n * @param value - Value to check\n * @returns True if value is not null or undefined\n */\nexport function isNotNullOrUndefined<T>(value: T | null | undefined): value is T {\n  return value !== null && value !== undefined;\n}\n\n/**\n * Returns only the props that are safe to spread onto a DOM element\n * by filtering out custom props\n * \n * @param props - The props object\n * @param propNames - Names of custom props to filter out\n * @returns Object with only DOM-safe props\n */\nexport function filterDOMProps<T extends Record<string, any>, K extends keyof T>(\n  props: T, \n  propNames: K[]\n): Omit<T, K> {\n  const result = { ...props };\n  propNames.forEach(name => delete result[name]);\n  return result;\n}","\"use client\"\n\nimport * as React from \"react\"\nimport { useTheme } from \"../../../themes/theme-context\"\nimport { cn } from \"../../../lib/utils\"\nimport { IconMoon, IconSun } from \"@tabler/icons-react\"\n\n/**\n * Props for the ThemeToggle component\n */\nexport interface ThemeToggleProps extends React.HTMLAttributes<HTMLButtonElement> {\n  /**\n   * Variant of the toggle\n   * @default 'icon'\n   */\n  variant?: 'icon' | 'switch' | 'button';\n  \n  /**\n   * Size of the toggle\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * ThemeToggle component to switch between light and dark themes\n */\nexport function ThemeToggle({ \n  className, \n  variant = 'icon', \n  size = 'md',\n  ...props \n}: ThemeToggleProps) {\n  const { theme, setTheme, resolvedTheme, isClient } = useTheme()\n\n  // Only render on client to prevent hydration mismatch\n  if (!isClient) return null;\n\n  // Toggle between light and dark\n  const toggleTheme = () => {\n    setTheme(resolvedTheme === \"dark\" ? \"light\" : \"dark\")\n  }\n\n  // Size mapping for Tabler icons\n  const iconSize = {\n    sm: 16,\n    md: 20,\n    lg: 24,\n  }\n\n  // Size classes for button\n  const sizeClasses = {\n    sm: 'h-8 w-8',\n    md: 'h-10 w-10',\n    lg: 'h-12 w-12',\n  }\n\n  // Text size classes\n  const textSizeClasses = {\n    sm: 'text-xs',\n    md: 'text-sm',\n    lg: 'text-base',\n  }\n\n  // Variant specific rendering\n  if (variant === 'icon') {\n    return (\n      <button\n        type=\"button\"\n        onClick={toggleTheme}\n        className={cn(\n          \"inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n          sizeClasses[size],\n          className\n        )}\n        aria-label={resolvedTheme === \"dark\" ? \"Switch to light theme\" : \"Switch to dark theme\"}\n        {...props}\n      >\n        {resolvedTheme === \"dark\" ? (\n          <IconSun size={iconSize[size]} stroke={1.5} />\n        ) : (\n          <IconMoon size={iconSize[size]} stroke={1.5} />\n        )}\n      </button>\n    )\n  }\n  \n  // Button variant\n  if (variant === 'button') {\n    return (\n      <button\n        type=\"button\"\n        onClick={toggleTheme}\n        className={cn(\n          \"inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2\",\n          textSizeClasses[size],\n          \"hover:bg-accent hover:text-accent-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {resolvedTheme === \"dark\" ? \"Light Mode\" : \"Dark Mode\"}\n      </button>\n    )\n  }\n  \n  // Switch variant\n  return (\n    <button\n      type=\"button\"\n      onClick={toggleTheme}\n      className={cn(\n        \"inline-flex items-center justify-center rounded-md px-3 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        textSizeClasses[size],\n        resolvedTheme === \"dark\" \n          ? \"bg-accent text-accent-foreground hover:bg-accent/80\" \n          : \"bg-muted text-muted-foreground hover:bg-muted/80\",\n        className\n      )}\n      aria-label={resolvedTheme === \"dark\" ? \"Switch to light theme\" : \"Switch to dark theme\"}\n      {...props}\n    >\n      {resolvedTheme === \"dark\" ? (\n        <span className=\"flex items-center\">\n          <IconSun size={iconSize[size]} stroke={1.5} className=\"mr-2\" />\n          Light\n        </span>\n      ) : (\n        <span className=\"flex items-center\">\n          <IconMoon size={iconSize[size]} stroke={1.5} className=\"mr-2\" />\n          Dark\n        </span>\n      )}\n    </button>\n  )\n}"]}

package/package.json

@@ -1,26 +1,38 @@
 {
   "name": "@tydavidson/design-system",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Float Design System with email components and theme system",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
     "./email": {
-      "require": "./dist/email/index.js",
-      "types": "./dist/email/index.d.ts"
+      "types": "./dist/email/index.d.ts",
+      "import": "./dist/email/index.mjs",
+      "require": "./dist/email/index.js"
     },
     "./themes": {
-      "require": "./dist/themes/index.js",
-      "types": "./dist/themes/index.d.ts"
+      "types": "./dist/themes/index.d.ts",
+      "import": "./dist/themes/index.mjs",
+      "require": "./dist/themes/index.js"
     },
     "./themes/theme.css": "./src/themes/theme.css"
   },
-  "files": ["dist", "src/themes/theme.css"],
-  "keywords": ["design-system", "components", "email", "react"],
+  "files": [
+    "dist",
+    "src/themes/theme.css"
+  ],
+  "keywords": [
+    "design-system",
+    "components",
+    "email",
+    "react"
+  ],
   "author": "Float Technologies",
   "license": "ISC",
   "scripts": {
@@ -31,7 +43,7 @@
     "ui:add": "pnpm dlx shadcn-ui@latest add",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build:lib": "tsc --project tsconfig.build.json",
+    "build:lib": "tsup",
     "build:email": "tsc --project tsconfig.email.json",
     "build:all": "npm run build:lib && npm run build:email",
     "prepublishOnly": "npm run build:all",
@@ -94,6 +106,7 @@
     "@storybook/react": "^8.6.12",
     "@storybook/test": "^8.6.12",
     "@svgr/webpack": "^8.1.0",
+    "@swc/core": "^1.13.3",
     "@types/node": "^20.11.5",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
@@ -102,6 +115,7 @@
     "storybook": "^8.6.12",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
+    "tsup": "^8.5.0",
     "typescript": "^5.3.3"
   }
 }

package/dist/components/SidebarNav.d.ts

@@ -1,13 +0,0 @@
-import * as React from "react";
-export declare function SidebarNav({ organizations, currentOrg, setCurrentOrg }: {
-    organizations: Array<{
-        id: string;
-        name: string;
-        logo: React.ElementType;
-        avatarUrl: string;
-        avatarFallback: string;
-    }>;
-    currentOrg: string;
-    setCurrentOrg: React.Dispatch<React.SetStateAction<string>>;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SidebarNav.d.ts.map

package/dist/components/SidebarNav.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SidebarNav.d.ts","sourceRoot":"","sources":["../../src/components/SidebarNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6C/B,wBAAgB,UAAU,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,EAAE;IACvE,aAAa,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,cAAc,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACvH,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAC7D,2CA+IA"}