@projectdiscoveryio/design-system 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1513 @@
+'use strict';
+
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var LucideIcons = require('lucide-react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
+
+// src/theme/types.ts
+var THEME_MODES = ["light", "dark", "system"];
+var THEME_NAMES = ["base", "brand"];
+var ADAPTER_TYPES = ["shadcn", "material"];
+var DEFAULT_ADAPTER = "shadcn";
+var DEFAULT_THEME = "base";
+var DEFAULT_MODE = "system";
+
+// src/theme/config.ts
+var globalConfig = {
+  adapter: DEFAULT_ADAPTER,
+  theme: DEFAULT_THEME,
+  mode: DEFAULT_MODE
+};
+function setDesignSystemConfig(config) {
+  globalConfig = { ...globalConfig, ...config };
+}
+function getDesignSystemConfig() {
+  return { ...globalConfig };
+}
+function getAdapter() {
+  return globalConfig.adapter;
+}
+function getThemeName() {
+  return globalConfig.theme;
+}
+function getThemeMode() {
+  return globalConfig.mode;
+}
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var ButtonPrimitive = React.forwardRef(
+  ({ asChild = false, type = "button", children, ...props }, ref) => {
+    if (asChild && React__default.default.isValidElement(children)) {
+      return React__default.default.cloneElement(children, {
+        ...props,
+        ref,
+        type
+      });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type,
+        ...props,
+        children
+      }
+    );
+  }
+);
+ButtonPrimitive.displayName = "ButtonPrimitive";
+var iconCache = /* @__PURE__ */ new Map();
+var loggedIcons = /* @__PURE__ */ new Set();
+function getIcon(iconName) {
+  if (!iconName || typeof iconName !== "string") {
+    return null;
+  }
+  if (iconCache.has(iconName)) {
+    return iconCache.get(iconName) || null;
+  }
+  let IconComponent = null;
+  if (iconName in LucideIcons__namespace) {
+    IconComponent = LucideIcons__namespace[iconName];
+  } else {
+    const pascalCaseName = iconName.charAt(0).toUpperCase() + iconName.slice(1);
+    if (pascalCaseName in LucideIcons__namespace) {
+      IconComponent = LucideIcons__namespace[pascalCaseName];
+    }
+  }
+  if (IconComponent) {
+    const isValidComponent = typeof IconComponent === "function" || typeof IconComponent === "object" && IconComponent !== null;
+    if (isValidComponent) {
+      iconCache.set(iconName, IconComponent);
+      if (process.env.NODE_ENV !== "production" && typeof window !== "undefined") {
+        if (!loggedIcons.has(iconName)) {
+          console.debug(`[pd-design] Icon "${iconName}" found and cached`);
+          loggedIcons.add(iconName);
+        }
+      }
+      return IconComponent;
+    }
+  }
+  if (process.env.NODE_ENV !== "production") {
+    const availableIcons = Object.keys(LucideIcons__namespace).filter((k) => {
+      const icon = LucideIcons__namespace[k];
+      return !k.includes("Icon") && icon && (typeof icon === "function" || typeof icon === "object");
+    }).slice(0, 10);
+    console.warn(`[pd-design] Icon "${iconName}" not found in lucide-react. Available icons: ${availableIcons.join(", ")}...`);
+  }
+  return null;
+}
+function renderIcon(iconName, size = "h-4 w-4", className) {
+  const IconComponent = getIcon(iconName);
+  if (!IconComponent) {
+    return null;
+  }
+  return React__default.default.createElement(IconComponent, {
+    className: `${size} ${className || ""}`.trim()
+  });
+}
+function iconExists(iconName) {
+  return getIcon(iconName) !== null;
+}
+function getAvailableIconNames() {
+  return Object.keys(LucideIcons__namespace).filter(
+    (name) => {
+      const icon = LucideIcons__namespace[name];
+      return icon && (typeof icon === "function" || typeof icon === "object") && !name.includes("Icon");
+    }
+  );
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "pd-inline-flex pd-items-center pd-justify-center pd-font-medium pd-transition-colors pd-focus-visible:outline-none pd-focus-visible:ring-2 pd-focus-visible:ring-[var(--pd-border-blue)] pd-focus-visible:ring-offset-2 pd-disabled:pointer-events-none pd-disabled:cursor-not-allowed pd-disabled:hover:pd-bg-[inherit] pd-disabled:hover:pd-text-[inherit] pd-disabled:hover:pd-border-[inherit] pd-disabled:active:pd-bg-[inherit] pd-disabled:active:pd-text-[inherit] pd-disabled:active:pd-border-[inherit] [font-family:var(--pd-font-sans,Geist,sans-serif)] [gap:var(--pd-button-gap)] [border-radius:var(--pd-radius-button)] pd-shadow-none",
+  {
+    variants: {
+      variant: {
+        primary: "pd-border-0",
+        secondary: "pd-border",
+        ghost: "pd-border-0",
+        destructive: "pd-border-0"
+      },
+      intent: {
+        primary: "",
+        success: "",
+        warning: "",
+        danger: "",
+        neutral: ""
+      },
+      size: {
+        sm: "[padding-top:var(--pd-button-padding-sm-vertical)] [padding-bottom:var(--pd-button-padding-sm-vertical)] [padding-left:var(--pd-button-padding-sm-horizontal)] [padding-right:var(--pd-button-padding-sm-horizontal)] pd-text-xs [line-height:var(--pd-button-line-height-sm)] [letter-spacing:var(--pd-button-letter-spacing)]",
+        md: "[padding-top:var(--pd-button-padding-md-vertical)] [padding-bottom:var(--pd-button-padding-md-vertical)] [padding-left:var(--pd-button-padding-md-horizontal)] [padding-right:var(--pd-button-padding-md-horizontal)] pd-text-xs [line-height:var(--pd-button-line-height-md)] [letter-spacing:var(--pd-button-letter-spacing)]",
+        lg: "[padding-top:var(--pd-button-padding-lg-vertical)] [padding-bottom:var(--pd-button-padding-lg-vertical)] [padding-left:var(--pd-button-padding-lg-horizontal)] [padding-right:var(--pd-button-padding-lg-horizontal)] pd-text-base [line-height:var(--pd-button-line-height-lg)] [letter-spacing:var(--pd-button-letter-spacing)]"
+      }
+    },
+    compoundVariants: [
+      // Primary variant - using new semantic tokens
+      {
+        variant: "primary",
+        intent: "primary",
+        class: "pd-bg-[var(--pd-background-invert)] pd-text-[var(--pd-content-on-color)] hover:pd-bg-[var(--pd-background-invert-light)] active:pd-bg-[var(--pd-background-invert)]"
+      },
+      {
+        variant: "primary",
+        intent: "success",
+        class: "pd-bg-[var(--pd-intent-success-bg)] pd-text-[var(--pd-intent-success-text)] hover:pd-bg-[var(--pd-intent-success-bg-hover)] active:pd-bg-[var(--pd-intent-success-bg-active)]"
+      },
+      {
+        variant: "primary",
+        intent: "warning",
+        class: "pd-bg-[var(--pd-intent-warning-bg)] pd-text-[var(--pd-intent-warning-text)] hover:pd-bg-[var(--pd-intent-warning-bg-hover)] active:pd-bg-[var(--pd-intent-warning-bg-active)]"
+      },
+      {
+        variant: "primary",
+        intent: "danger",
+        class: "pd-bg-[var(--pd-intent-danger-bg)] pd-text-[var(--pd-destructive-foreground)] hover:pd-bg-[var(--pd-intent-danger-bg-hover)] active:pd-bg-[var(--pd-intent-danger-bg-active)]  pd-disabled:pd-bg-[var(--pd-intent-danger-bg)] pd-disabled:pd-text-[var(--pd-content-subtle)]"
+      },
+      {
+        variant: "primary",
+        intent: "neutral",
+        class: "pd-bg-[var(--pd-intent-neutral-bg)] pd-text-[var(--pd-intent-neutral-text)] hover:pd-bg-[var(--pd-intent-neutral-bg-hover)] active:pd-bg-[var(--pd-intent-neutral-bg-active)]"
+      },
+      // Secondary variant - White bg default, always has light grey border
+      {
+        variant: "secondary",
+        intent: "primary",
+        class: "pd-bg-[var(--pd-background-primary)] pd-text-[var(--pd-content-secondary)] hover:pd-bg-[var(--pd-background-low)] hover:pd-text-[var(--pd-content-primary)] active:pd-bg-[var(--pd-background-low-on-hover)] active:pd-text-[var(--pd-content-primary)] pd-border pd-border-[var(--pd-border-secondary)]"
+      },
+      {
+        variant: "secondary",
+        intent: "success",
+        class: "pd-bg-[var(--pd-intent-success-bg)] pd-text-[var(--pd-intent-success-text)] hover:pd-bg-[var(--pd-intent-success-bg-hover)] active:pd-bg-[var(--pd-intent-success-bg-active)] pd-border-[var(--pd-intent-success-border)]"
+      },
+      {
+        variant: "secondary",
+        intent: "warning",
+        class: "pd-bg-[var(--pd-intent-warning-bg)] pd-text-[var(--pd-intent-warning-text)] hover:pd-bg-[var(--pd-intent-warning-bg-hover)] active:pd-bg-[var(--pd-intent-warning-bg-active)] pd-border-[var(--pd-intent-warning-border)]"
+      },
+      {
+        variant: "secondary",
+        intent: "danger",
+        class: "pd-bg-[var(--pd-intent-danger-bg)] pd-text-[var(--pd-intent-danger-text)] hover:pd-bg-[var(--pd-intent-danger-bg-hover)] hover:pd-text-[var(--pd-intent-danger-hover)] active:pd-bg-[var(--pd-intent-danger-bg-active)] pd-border pd-border-[var(--pd-intent-danger-border)]"
+      },
+      {
+        variant: "secondary",
+        intent: "neutral",
+        class: "pd-bg-[var(--pd-intent-neutral-bg)] pd-text-[var(--pd-intent-neutral-text)] hover:pd-bg-[var(--pd-intent-neutral-bg-hover)] active:pd-bg-[var(--pd-intent-neutral-bg-active)] pd-border-[var(--pd-intent-neutral-border)]"
+      },
+      // Ghost variant - Transparent default, light grey fill on hover/pressed/loading
+      {
+        variant: "ghost",
+        intent: "primary",
+        class: "pd-border-0 pd-bg-transparent pd-text-[var(--pd-content-secondary)] hover:pd-bg-[var(--pd-background-low)] hover:pd-text-[var(--pd-content-primary)] active:pd-bg-[var(--pd-background-low-on-hover)] active:pd-text-[var(--pd-content-primary)] pd-disabled:pd-text-[var(--pd-content-subtle)]"
+      },
+      {
+        variant: "ghost",
+        intent: "success",
+        class: "pd-border-0 pd-bg-transparent hover:pd-bg-[var(--pd-intent-success-bg)] pd-text-[var(--pd-intent-success-text)] hover:pd-text-[var(--pd-intent-success-hover)]"
+      },
+      {
+        variant: "ghost",
+        intent: "warning",
+        class: "pd-border-0 pd-bg-transparent hover:pd-bg-[var(--pd-intent-warning-bg)] pd-text-[var(--pd-intent-warning-text)] hover:pd-text-[var(--pd-intent-warning-hover)]"
+      },
+      {
+        variant: "ghost",
+        intent: "danger",
+        class: "pd-border-0 pd-bg-transparent pd-text-[var(--pd-intent-danger-text)] hover:pd-bg-[var(--pd-intent-danger-bg)] hover:pd-text-[var(--pd-intent-danger-hover)]"
+      },
+      {
+        variant: "ghost",
+        intent: "neutral",
+        class: "pd-border-0 pd-bg-transparent pd-text-[var(--pd-intent-neutral-text)] hover:pd-text-[var(--pd-intent-neutral-hover)]"
+      },
+      // Destructive variant - Red text, light red/pink background, different on hover/active/disabled
+      {
+        variant: "destructive",
+        intent: "primary",
+        class: "pd-border-0 pd-bg-[var(--pd-background-red)] pd-text-[var(--pd-content-red)] hover:pd-bg-[var(--pd-background-red-on-hover)] hover:pd-text-[var(--pd-content-red-on-hover)] active:pd-bg-[var(--pd-intent-danger-bg-active)] pd-disabled:pd-bg-transparent pd-disabled:pd-text-[var(--pd-content-subtle)]"
+      },
+      {
+        variant: "destructive",
+        intent: "success",
+        class: "pd-border-0 pd-bg-[var(--pd-intent-success-bg)] pd-text-[var(--pd-intent-success-text)] hover:pd-bg-[var(--pd-intent-success-bg-hover)] hover:pd-text-[var(--pd-intent-success-hover)] active:pd-bg-[var(--pd-intent-success-bg-active)] pd-disabled:pd-bg-transparent pd-disabled:pd-text-[var(--pd-content-subtle)]"
+      },
+      {
+        variant: "destructive",
+        intent: "warning",
+        class: "pd-border-0 pd-bg-[var(--pd-intent-warning-bg)] pd-text-[var(--pd-intent-warning-text)] hover:pd-bg-[var(--pd-intent-warning-bg-hover)] hover:pd-text-[var(--pd-intent-warning-hover)] active:pd-bg-[var(--pd-intent-warning-bg-active)] pd-disabled:pd-bg-transparent pd-disabled:pd-text-[var(--pd-content-subtle)]"
+      },
+      {
+        variant: "destructive",
+        intent: "danger",
+        class: "pd-border-0 pd-bg-[var(--pd-intent-danger-bg)] pd-text-[var(--pd-intent-danger-text)] hover:pd-bg-[var(--pd-intent-danger-bg-hover)] hover:pd-text-[var(--pd-intent-danger-hover)] active:pd-bg-[var(--pd-intent-danger-bg-active)] pd-disabled:pd-bg-transparent pd-disabled:pd-text-[var(--pd-content-subtle)]"
+      },
+      {
+        variant: "destructive",
+        intent: "neutral",
+        class: "pd-border-0 pd-bg-[var(--pd-intent-neutral-bg)] pd-text-[var(--pd-intent-neutral-text)] hover:pd-bg-[var(--pd-intent-neutral-bg-hover)] hover:pd-text-[var(--pd-intent-neutral-hover)] active:pd-bg-[var(--pd-intent-neutral-bg-active)] pd-disabled:pd-bg-transparent pd-disabled:pd-text-[var(--pd-content-subtle)]"
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      intent: "primary",
+      size: "md"
+    }
+  }
+);
+var ShadcnButton = React.forwardRef(
+  ({
+    variant = "primary",
+    intent = "primary",
+    size = "md",
+    disabled,
+    loading,
+    fullWidth,
+    startIcon,
+    endIcon,
+    loadingText,
+    asChild,
+    href,
+    target,
+    children,
+    ...props
+  }, ref) => {
+    const buttonClasses = cn(
+      buttonVariants({ variant, intent, size }),
+      fullWidth && "pd-w-full",
+      // Loading states - light mode (apply to all intents for secondary and ghost)
+      loading && variant === "primary" && intent === "primary" && "pd-bg-[var(--pd-background-tertiary)] pd-text-[var(--pd-content-secondary)]",
+      loading && variant === "secondary" && "pd-bg-[var(--pd-background-tertiary)] pd-text-[var(--pd-content-secondary)] pd-border-[var(--pd-border-secondary)]",
+      loading && variant === "ghost" && "!pd-bg-[var(--pd-background-tertiary)] pd-text-[var(--pd-content-secondary)]",
+      // Destructive variant loading states - use intent-specific backgrounds
+      loading && variant === "destructive" && intent === "primary" && "pd-bg-[var(--pd-background-red)] pd-text-[var(--pd-content-red)]",
+      loading && variant === "destructive" && intent === "success" && "pd-bg-[var(--pd-intent-success-bg)] pd-text-[var(--pd-intent-success-text)]",
+      loading && variant === "destructive" && intent === "warning" && "pd-bg-[var(--pd-intent-warning-bg)] pd-text-[var(--pd-intent-warning-text)]",
+      loading && variant === "destructive" && intent === "danger" && "pd-bg-[var(--pd-intent-danger-bg)] pd-text-[var(--pd-intent-danger-text)]",
+      loading && variant === "destructive" && intent === "neutral" && "pd-bg-[var(--pd-intent-neutral-bg)] pd-text-[var(--pd-intent-neutral-text)]",
+      // Disabled states - consistent across all variants (no hover/active changes)
+      disabled && variant === "primary" && "pd-bg-[var(--pd-background-tertiary)] pd-text-[var(--pd-content-subtle)]",
+      disabled && variant === "secondary" && "pd-bg-[var(--pd-background-tertiary)] pd-text-[var(--pd-content-subtle)] pd-border-[var(--pd-border-secondary)]",
+      disabled && variant === "ghost" && "pd-bg-transparent pd-text-[var(--pd-content-subtle)]",
+      disabled && variant === "destructive" && "pd-bg-transparent pd-text-[var(--pd-content-subtle)]"
+    );
+    if (href) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ButtonPrimitive,
+        {
+          asChild: true,
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href,
+              target,
+              rel: target === "_blank" ? "noopener noreferrer" : void 0,
+              className: buttonClasses,
+              "aria-disabled": disabled || loading,
+              style: { pointerEvents: disabled || loading ? "none" : void 0 },
+              children: renderButtonContent({ loading, loadingText, startIcon, endIcon, children, size, variant, intent })
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ButtonPrimitive,
+      {
+        ref,
+        disabled: disabled || loading,
+        className: buttonClasses,
+        asChild,
+        ...props,
+        children: renderButtonContent({ loading, loadingText, startIcon, endIcon, children, size, variant, intent })
+      }
+    );
+  }
+);
+function renderButtonContent({
+  loading,
+  loadingText,
+  startIcon,
+  endIcon,
+  children,
+  size,
+  variant,
+  intent
+}) {
+  const iconSizeClass = size === "sm" ? "pd-h-3 pd-w-3" : size === "lg" ? "pd-h-5 pd-w-5" : "pd-h-4 pd-w-4";
+  const spinnerSizeClass = size === "sm" ? "pd-h-3 pd-w-3" : size === "lg" ? "pd-h-5 pd-w-5" : "pd-h-4 pd-w-4";
+  const getLoadingTextColor = () => {
+    if (variant === "primary" && intent === "primary") {
+      return "pd-text-[var(--pd-content-secondary)]";
+    }
+    if (variant === "primary" && intent === "danger") {
+      return "pd-text-[var(--pd-destructive-foreground)]";
+    }
+    if (variant === "secondary" && intent === "primary") {
+      return "pd-text-[var(--pd-content-secondary)]";
+    }
+    if (variant === "ghost" && intent === "primary") {
+      return "pd-text-[var(--pd-content-secondary)]";
+    }
+    if (variant === "destructive" && intent === "primary") {
+      return "pd-text-[var(--pd-content-red)]";
+    }
+    if (variant === "destructive" && intent === "success") {
+      return "pd-text-[var(--pd-intent-success-text)]";
+    }
+    if (variant === "destructive" && intent === "warning") {
+      return "pd-text-[var(--pd-intent-warning-text)]";
+    }
+    if (variant === "destructive" && intent === "danger") {
+      return "pd-text-[var(--pd-intent-danger-text)]";
+    }
+    if (variant === "destructive" && intent === "neutral") {
+      return "pd-text-[var(--pd-intent-neutral-text)]";
+    }
+    return "pd-text-[var(--pd-content-secondary)]";
+  };
+  const loadingTextColor = getLoadingTextColor();
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LucideIcons.Loader2,
+        {
+          "aria-hidden": "true",
+          className: `${spinnerSizeClass} pd-animate-spin ${loadingTextColor}`
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: loadingTextColor, children: loadingText || children }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pd-sr-only", children: loadingText ? `Loading: ${loadingText}` : "Loading" })
+    ] });
+  }
+  const StartIconComponent = startIcon ? getIcon(startIcon) : null;
+  const EndIconComponent = endIcon ? getIcon(endIcon) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    StartIconComponent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pd-inline-flex pd-items-center pd-justify-center", children: React__default.default.createElement(StartIconComponent, { className: iconSizeClass }) }),
+    children,
+    EndIconComponent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pd-inline-flex pd-items-center pd-justify-center", children: React__default.default.createElement(EndIconComponent, { className: iconSizeClass }) })
+  ] });
+}
+ShadcnButton.displayName = "ShadcnButton";
+
+// src/adapters/index.ts
+var [SHADCN_ADAPTER, MATERIAL_ADAPTER] = ADAPTER_TYPES;
+function getButtonAdapter() {
+  const adapter = getAdapter();
+  switch (adapter) {
+    case SHADCN_ADAPTER:
+      return ShadcnButton;
+    case MATERIAL_ADAPTER:
+      if (process.env.NODE_ENV !== "production") {
+        console.warn("Material adapter not yet enabled. Install @mui/material to use it.");
+      }
+      return ShadcnButton;
+    default:
+      return ShadcnButton;
+  }
+}
+var ButtonComponent = React.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    loading,
+    disabled,
+    fullWidth,
+    startIcon,
+    endIcon,
+    loadingText,
+    href,
+    target,
+    type = "button",
+    asChild,
+    children,
+    ...props
+  }, ref) => {
+    const AdapterButton = getButtonAdapter();
+    const { className, ...restProps } = props;
+    if (className && process.env.NODE_ENV !== "production") {
+      console.warn("Button component does not accept className prop. Use variant, size, and other props for styling.");
+    }
+    const intent = "primary";
+    const accessibilityProps = React.useMemo(() => {
+      const defaults = {};
+      if (disabled || loading) {
+        defaults["aria-disabled"] = true;
+      }
+      if (loading) {
+        defaults["aria-busy"] = true;
+      }
+      return defaults;
+    }, [disabled, loading]);
+    const mergedProps = {
+      ...restProps,
+      ...accessibilityProps
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AdapterButton,
+      {
+        ref,
+        variant,
+        intent,
+        size,
+        disabled,
+        loading,
+        fullWidth,
+        startIcon,
+        endIcon,
+        loadingText,
+        href,
+        target,
+        type,
+        asChild,
+        ...mergedProps,
+        children
+      }
+    );
+  }
+);
+ButtonComponent.displayName = "Button";
+var Button = React.memo(ButtonComponent);
+
+// src/tokens/tokens.ts
+var neutral = {
+  100: "#FFFFFF",
+  200: "#EDEDED",
+  300: "#DFDFE2",
+  400: "#BEBEC1",
+  500: "#7E7E8B",
+  600: "#60606C",
+  700: "#4E4E5A",
+  800: "#2F2F37",
+  900: "#17171C",
+  950: "#09090B",
+  1e3: "#FAFAFA"
+};
+var blue = {
+  100: "#EBF1FF",
+  200: "#C2D4FF",
+  300: "#99B7FF",
+  400: "#709AFF",
+  500: "#3772FF",
+  600: "#004BFF",
+  700: "#003FD6",
+  800: "#002680",
+  900: "#001E66",
+  950: "#00123D"
+};
+var orange = {
+  100: "#FFF3EB",
+  200: "#FFE1CC",
+  300: "#FFC9A3",
+  400: "#EC9C64",
+  500: "#FF6800",
+  600: "#D65700",
+  700: "#AD4700",
+  800: "#7A3200",
+  900: "#5C2500",
+  950: "#331500"
+};
+var red = {
+  100: "#FDF2F4",
+  200: "#FADBE1",
+  300: "#F6C1CA",
+  400: "#E15C5C",
+  500: "#E12D4E",
+  600: "#C41C3B",
+  700: "#A11730",
+  800: "#7D1225",
+  900: "#4C0B17",
+  950: "#2D060D"
+};
+var green = {
+  100: "#E0FFEC",
+  200: "#BDFFD5",
+  300: "#8AFFB5",
+  400: "#5CFF98",
+  500: "#09FF63",
+  600: "#00E052",
+  700: "#00B241",
+  800: "#008A32",
+  900: "#006625",
+  950: "#00471A"
+};
+var yellow = {
+  100: "#FFF4E0",
+  200: "#FFE8C2",
+  300: "#FFD999",
+  400: "#FFCA70",
+  500: "#FFAD22",
+  600: "#F09700",
+  700: "#D68700",
+  800: "#7A4D00",
+  900: "#5C3A00",
+  950: "#3D2600"
+};
+var colorPrimitives = {
+  neutral,
+  blue,
+  orange,
+  red,
+  green,
+  yellow
+};
+var typography = {
+  fontFamily: {
+    sans: ["Geist", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "sans-serif"],
+    mono: ["Geist Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"]
+  },
+  fontSize: {
+    xs: "0.75em",
+    // 12px
+    sm: "0.875em",
+    // 14px
+    base: "1em",
+    // 16px
+    lg: "1.125em",
+    // 18px
+    xl: "1.25em",
+    // 20px
+    "2xl": "1.5em",
+    // 24px
+    "3xl": "1.875em",
+    // 30px
+    "4xl": "2.25em",
+    // 36px
+    "5xl": "3em",
+    // 48px
+    "6xl": "3.75em",
+    // 60px
+    "7xl": "4.5em",
+    // 72px
+    "8xl": "6em",
+    // 96px
+    "9xl": "8em"
+    // 128px
+  },
+  fontWeight: {
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700"
+  },
+  lineHeight: {
+    tight: "1.25",
+    normal: "1.5",
+    relaxed: "1.75"
+  },
+  // Tailwind fontSize lineHeight mappings (for use in tailwind.config.js)
+  fontSizeLineHeight: {
+    xs: "1em",
+    // 16px for 12px font
+    sm: "1.25em",
+    // 20px for 14px font
+    base: "1.5em",
+    // 24px for 16px font
+    lg: "1.75em",
+    // 28px for 18px font
+    xl: "1.75em",
+    // 28px for 20px font
+    "2xl": "2em",
+    "3xl": "2.25em",
+    "4xl": "2.5em",
+    "5xl": "1",
+    "6xl": "1",
+    "7xl": "1",
+    "8xl": "1",
+    "9xl": "1"
+  },
+  letterSpacing: {
+    tight: "-0.025em",
+    normal: "0",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em",
+    button: "0.00833em"
+    // 0.1px for 12px font 
+  }
+};
+var spacing = {
+  0: "0em",
+  // 0px
+  1: "0.25em",
+  // 4px
+  2: "0.5em",
+  // 8px
+  3: "0.75em",
+  // 12px
+  4: "1em",
+  // 16px
+  5: "1.25em",
+  // 20px
+  6: "1.5em",
+  // 24px
+  7: "1.75em",
+  // 28px
+  8: "2em",
+  // 32px
+  9: "2.25em",
+  // 36px
+  10: "2.5em"
+  // 40px
+};
+var radius = {
+  none: "0",
+  sm: "0.125em",
+  // 2px
+  base: "0.25em",
+  // 4px
+  md: "0.375em",
+  // 6px
+  lg: "0.5em",
+  // 8px
+  xl: "0.75em",
+  // 12px
+  "2xl": "1em",
+  // 16px
+  "3xl": "1.5em",
+  // 24px
+  full: "9999px",
+  button: "0.5em"
+  // 8px - button border radius 
+};
+var shadows = {
+  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+  "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+  inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+  none: "none"
+};
+var zIndex = {
+  base: 0,
+  dropdown: 1e3,
+  sticky: 1020,
+  fixed: 1030,
+  modalBackdrop: 1040,
+  modal: 1050,
+  popover: 1060,
+  tooltip: 1070
+};
+var button = {
+  padding: {
+    sm: {
+      vertical: "0.5em",
+      // 8px
+      horizontal: "0.75em"
+      // 12px
+    },
+    md: {
+      vertical: "0.625em",
+      // 10px 
+      horizontal: "1em"
+      // 16px 
+    },
+    lg: {
+      vertical: "0.75em",
+      // 12px
+      horizontal: "1.25em"
+      // 20px
+    }
+  },
+  gap: "0.5em",
+  // 8px - gap between icon and text 
+  lineHeight: {
+    sm: "1.333em",
+    md: "1.333em",
+    // 16px for 12px font-size (1.333 × 12px = 16px)
+    lg: "1.333em"
+  },
+  letterSpacing: "0.00833em"
+  // 0.1px for 12px font
+};
+var semanticTokens = {
+  light: {
+    border: {
+      primary: neutral[400],
+      secondary: neutral[300],
+      subtle: neutral[300],
+      invert: neutral[950],
+      onColor: neutral[100],
+      blue: blue[500],
+      blueSubtle: blue[300],
+      blueOnHover: blue[700],
+      red: red[600],
+      redSubtle: red[300],
+      redOnHover: red[700],
+      orange: orange[600],
+      orangeSubtle: orange[300],
+      orangeOnHover: orange[700],
+      yellow: yellow[600],
+      yellowSubtle: yellow[300],
+      yellowOnHover: yellow[700],
+      green: green[600],
+      greenSubtle: green[300],
+      greenOnHover: green[700]
+    },
+    content: {
+      primary: neutral[900],
+      secondary: neutral[600],
+      subtle: neutral[400],
+      onColor: neutral[100],
+      alwaysWhite: neutral[100],
+      alwaysBlack: neutral[950],
+      onColorInverse: neutral[950],
+      blue: blue[500],
+      blueDisabled: blue[400],
+      blueOnHover: blue[600],
+      green: green[700],
+      greenDisabled: green[400],
+      greenOnHover: green[600],
+      red: red[600],
+      redDisabled: red[400],
+      redOnHover: red[700],
+      orange: orange[600],
+      orangeDisabled: orange[400],
+      orangeOnHover: orange[700],
+      yellow: yellow[600],
+      yellowDisabled: yellow[400],
+      yellowOnHover: yellow[700]
+    },
+    background: {
+      primary: neutral[100],
+      system: neutral[1e3],
+      secondary: neutral[200],
+      tertiary: neutral[300],
+      invert: neutral[950],
+      invertLight: neutral[900],
+      green: green[100],
+      greenOnHover: green[200],
+      red: red[100],
+      redOnHover: red[200],
+      orange: orange[100],
+      orangeOnHover: orange[200],
+      yellow: orange[100],
+      yellowOnHover: orange[200],
+      low: neutral[200],
+      lowOnHover: neutral[300],
+      info: blue[100],
+      infoOnHover: blue[300],
+      base: neutral[100]
+    }
+  },
+  dark: {
+    border: {
+      primary: neutral[700],
+      secondary: neutral[800],
+      subtle: neutral[800],
+      invert: neutral[100],
+      onColor: neutral[950],
+      blue: blue[400],
+      blueSubtle: blue[800],
+      blueOnHover: blue[500],
+      red: red[400],
+      redSubtle: red[900],
+      redOnHover: red[500],
+      orange: orange[400],
+      orangeSubtle: orange[900],
+      orangeOnHover: orange[500],
+      yellow: yellow[400],
+      yellowSubtle: yellow[900],
+      yellowOnHover: yellow[500],
+      green: green[600],
+      greenSubtle: green[900],
+      greenOnHover: green[700]
+    },
+    content: {
+      primary: neutral[300],
+      secondary: neutral[500],
+      subtle: neutral[700],
+      onColor: neutral[950],
+      alwaysWhite: neutral[100],
+      alwaysBlack: neutral[950],
+      onColorInverse: neutral[100],
+      blue: blue[400],
+      blueDisabled: blue[800],
+      blueOnHover: blue[500],
+      green: green[600],
+      greenDisabled: green[800],
+      greenOnHover: green[500],
+      red: red[400],
+      redDisabled: red[800],
+      redOnHover: red[300],
+      orange: orange[400],
+      orangeDisabled: orange[800],
+      orangeOnHover: orange[300],
+      yellow: yellow[400],
+      yellowDisabled: yellow[800],
+      yellowOnHover: yellow[300]
+    },
+    background: {
+      primary: neutral[950],
+      system: neutral[950],
+      secondary: neutral[900],
+      tertiary: neutral[800],
+      invert: neutral[100],
+      invertLight: neutral[300],
+      green: green[950],
+      greenOnHover: green[900],
+      red: red[950],
+      redOnHover: red[900],
+      orange: orange[950],
+      orangeOnHover: orange[900],
+      yellow: yellow[950],
+      yellowOnHover: yellow[900],
+      low: neutral[900],
+      lowOnHover: neutral[800],
+      info: blue[950],
+      infoOnHover: blue[900],
+      base: neutral[950]
+    }
+  }
+};
+var COLOR_SCALES = [100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 1e3];
+var VARIANTS = ["primary", "secondary", "ghost", "destructive"];
+var INTENTS = ["primary", "success", "warning", "danger", "neutral"];
+var SIZES = ["sm", "md", "lg"];
+var BUTTON_TYPES = ["button", "submit", "reset"];
+var INPUT_TYPES = ["text", "email", "password", "number", "tel", "url", "search"];
+var ORIENTATIONS = ["horizontal", "vertical"];
+var SURFACE_LEVELS = ["base", "elevated", "overlay"];
+var colors = {
+  // Neutral palette
+  white: neutral[100],
+  black: neutral[950],
+  gray50: neutral[200],
+  gray100: neutral[300],
+  gray200: neutral[400],
+  gray300: neutral[500],
+  gray400: neutral[500],
+  gray500: neutral[500],
+  gray600: neutral[600],
+  gray700: neutral[700],
+  gray800: neutral[800],
+  gray900: neutral[900],
+  // Primary palette (mapped from blue)
+  blue50: blue[100],
+  blue100: blue[100],
+  blue200: blue[200],
+  blue300: blue[300],
+  blue400: blue[400],
+  blue500: blue[500],
+  blue600: blue[600],
+  blue700: blue[700],
+  blue800: blue[800],
+  blue900: blue[900],
+  // Success palette (mapped from green)
+  green50: green[100],
+  green100: green[100],
+  green200: green[200],
+  green300: green[300],
+  green400: green[400],
+  green500: green[500],
+  green600: green[600],
+  green700: green[700],
+  green800: green[800],
+  green900: green[900],
+  // Warning palette (mapped from yellow)
+  yellow50: yellow[100],
+  yellow100: yellow[100],
+  yellow200: yellow[200],
+  yellow300: yellow[300],
+  yellow400: yellow[400],
+  yellow500: yellow[500],
+  yellow600: yellow[600],
+  yellow700: yellow[700],
+  yellow800: yellow[800],
+  yellow900: yellow[900],
+  // Danger palette (mapped from red)
+  red50: red[100],
+  red100: red[100],
+  red200: red[200],
+  red300: red[300],
+  red400: red[400],
+  red500: red[500],
+  red600: red[600],
+  red700: red[700],
+  red800: red[800],
+  red900: red[900]
+};
+
+// src/theme/theme.ts
+function resolveThemeMode(mode) {
+  if (mode !== "system") {
+    return mode;
+  }
+  if (typeof window !== "undefined" && window.matchMedia) {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return "light";
+}
+function createTheme(name, mode) {
+  const resolvedMode = resolveThemeMode(mode);
+  const semantic = semanticTokens[resolvedMode];
+  const cssVariables = {
+    // Base colors
+    "--color-white": neutral[100],
+    "--color-black": neutral[950],
+    // shadcn/ui CSS variable mappings for compatibility
+    "--background": semantic.background.primary,
+    "--foreground": semantic.content.primary,
+    "--card": semantic.background.secondary,
+    "--card-foreground": semantic.content.primary,
+    "--popover": semantic.background.secondary,
+    "--popover-foreground": semantic.content.primary,
+    "--primary": semantic.content.secondary,
+    "--primary-foreground": neutral[100],
+    "--secondary": semantic.background.secondary,
+    "--secondary-foreground": semantic.content.primary,
+    "--muted": semantic.background.secondary,
+    "--muted-foreground": semantic.content.subtle,
+    "--accent": semantic.background.secondary,
+    "--accent-foreground": semantic.content.primary,
+    "--destructive": resolvedMode === "light" ? semantic.content.red : semantic.content.red,
+    "--destructive-foreground": neutral[100],
+    "--border": semantic.border.primary,
+    "--input": semantic.border.primary,
+    "--ring": semantic.content.secondary,
+    "--radius": radius.md
+  };
+  return {
+    name,
+    mode: resolvedMode,
+    // Store the resolved mode (light/dark) not 'system'
+    cssVariables
+  };
+}
+function PdThemeProvider({
+  children,
+  theme: themeName = DEFAULT_THEME,
+  mode = DEFAULT_MODE,
+  className
+}) {
+  const [resolvedMode, setResolvedMode] = React.useState(
+    () => resolveThemeMode(mode)
+  );
+  React.useEffect(() => {
+    if (mode !== "system" || typeof window === "undefined" || !window.matchMedia) {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      setResolvedMode(e.matches ? "dark" : "light");
+    };
+    handleChange(mediaQuery);
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    } else {
+      mediaQuery.addListener(handleChange);
+      return () => mediaQuery.removeListener(handleChange);
+    }
+  }, [mode]);
+  React.useEffect(() => {
+    if (mode !== "system") {
+      setResolvedMode(mode === "dark" ? "dark" : "light");
+    }
+  }, [mode]);
+  const effectiveMode = mode === "system" ? resolvedMode : mode;
+  const isDark = effectiveMode === "dark";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx.clsx(
+        "pd-root",
+        isDark && "pd-dark",
+        `pd-theme-${themeName}`,
+        className
+      ),
+      children
+    }
+  );
+}
+PdThemeProvider.displayName = "PdThemeProvider";
+var ErrorBoundary = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      error
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({
+      error,
+      errorInfo
+    });
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+    if (process.env.NODE_ENV !== "production") {
+      console.error("ErrorBoundary caught an error:", error, errorInfo);
+    }
+  }
+  render() {
+    if (this.state.hasError) {
+      const { fallback } = this.props;
+      const { error, errorInfo } = this.state;
+      if (typeof fallback === "function" && error && errorInfo) {
+        return fallback(error, errorInfo);
+      }
+      if (fallback && typeof fallback !== "function") {
+        return fallback;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pd-root pd-p-4 pd-border pd-border-[var(--pd-border-red)] pd-rounded-md pd-bg-[var(--pd-background-red)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "pd-m-0 pd-mb-2 pd-text-[var(--pd-content-red)]", children: "Something went wrong" }),
+        process.env.NODE_ENV !== "production" && error && /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "pd-mt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "pd-cursor-pointer pd-text-[var(--pd-content-red-on-hover)]", children: "Error details" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("pre", { className: "pd-mt-2 pd-p-2 pd-bg-[var(--pd-background-red-on-hover)] pd-rounded pd-overflow-auto pd-text-sm", children: [
+            error.toString(),
+            errorInfo?.componentStack
+          ] })
+        ] })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+ErrorBoundary.displayName = "ErrorBoundary";
+var ThemeContext = React.createContext(null);
+var parsePreference = (value) => {
+  if (value === "light" || value === "dark" || value === "system") {
+    return value;
+  }
+  return "system";
+};
+function ThemeProvider({
+  children,
+  adapter = DEFAULT_ADAPTER,
+  theme: themeName = DEFAULT_THEME,
+  mode: initialMode = DEFAULT_MODE,
+  storageKey
+}) {
+  const getInitialMode = () => {
+    if (storageKey && typeof window !== "undefined") {
+      const stored = localStorage.getItem(storageKey);
+      if (stored) {
+        return parsePreference(stored);
+      }
+    }
+    return initialMode;
+  };
+  const [mode, setMode] = React.useState(getInitialMode);
+  const [resolvedMode, setResolvedMode] = React.useState(
+    () => resolveThemeMode(mode)
+  );
+  React.useEffect(() => {
+    if (mode !== "system" || typeof window === "undefined" || !window.matchMedia) {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      setResolvedMode(e.matches ? "dark" : "light");
+    };
+    handleChange(mediaQuery);
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    } else {
+      mediaQuery.addListener(handleChange);
+      return () => mediaQuery.removeListener(handleChange);
+    }
+  }, [mode]);
+  React.useEffect(() => {
+    if (mode !== "system") {
+      setResolvedMode(mode === "dark" ? "dark" : "light");
+    }
+  }, [mode]);
+  const theme = React.useMemo(() => {
+    const effectiveMode = mode === "system" ? resolvedMode : mode;
+    return createTheme(themeName, effectiveMode);
+  }, [themeName, mode, resolvedMode]);
+  React.useEffect(() => {
+    if (storageKey && typeof window !== "undefined") {
+      localStorage.setItem(storageKey, mode);
+      window.dispatchEvent(new Event("theme-preference-changed"));
+    }
+  }, [mode, storageKey]);
+  React.useEffect(() => {
+    if (!storageKey || typeof window === "undefined") {
+      return;
+    }
+    const handleStorage = (event) => {
+      if (event.key === storageKey && event.newValue) {
+        const newMode = parsePreference(event.newValue);
+        setMode(newMode);
+      }
+    };
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, [storageKey]);
+  React.useEffect(() => {
+    if (!storageKey || typeof window === "undefined") {
+      return;
+    }
+    const handlePreferenceChange = () => {
+      const stored = localStorage.getItem(storageKey);
+      if (stored) {
+        const newMode = parsePreference(stored);
+        setMode(newMode);
+      }
+    };
+    window.addEventListener("theme-preference-changed", handlePreferenceChange);
+    return () => window.removeEventListener("theme-preference-changed", handlePreferenceChange);
+  }, [storageKey]);
+  React.useEffect(() => {
+    setDesignSystemConfig({ adapter, theme: themeName, mode });
+  }, [adapter, themeName, mode]);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+    const root = document.documentElement;
+    const effectiveMode = mode === "system" ? resolvedMode : mode;
+    const rafId = requestAnimationFrame(() => {
+      if (effectiveMode === "dark") {
+        root.classList.add("dark");
+      } else {
+        root.classList.remove("dark");
+      }
+      Object.entries(theme.cssVariables).forEach(([key, value]) => {
+        if (!key.startsWith("--background-") && !key.startsWith("--content-") && !key.startsWith("--border-") && !key.startsWith("--intent-") && !key.startsWith("--surface-") && !key.startsWith("--text-") && !key.startsWith("--spacing-") && !key.startsWith("--radius-") && !key.startsWith("--shadow-") && !key.startsWith("--z-") && !key.startsWith("--font-") && !key.startsWith("--line-height-")) {
+          root.style.setProperty(key, value);
+        }
+      });
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+      if (typeof document !== "undefined") {
+        Object.keys(theme.cssVariables).forEach((key) => {
+          if (!key.startsWith("--background-") && !key.startsWith("--content-") && !key.startsWith("--border-") && !key.startsWith("--intent-") && !key.startsWith("--surface-") && !key.startsWith("--text-") && !key.startsWith("--spacing-") && !key.startsWith("--radius-") && !key.startsWith("--shadow-") && !key.startsWith("--z-") && !key.startsWith("--font-") && !key.startsWith("--line-height-")) {
+            document.documentElement.style.removeProperty(key);
+          }
+        });
+      }
+    };
+  }, [theme, mode, resolvedMode]);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+    const body = document.body;
+    const effectiveMode = mode === "system" ? resolvedMode : mode;
+    const isDark = effectiveMode === "dark";
+    body.classList.add("pd-root");
+    if (isDark) {
+      body.classList.add("pd-dark");
+    } else {
+      body.classList.remove("pd-dark");
+    }
+    if (mode === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      const handleSystemChange = (e) => {
+        const systemIsDark = e.matches;
+        if (systemIsDark) {
+          body.classList.add("pd-dark");
+        } else {
+          body.classList.remove("pd-dark");
+        }
+      };
+      handleSystemChange(mediaQuery);
+      if (mediaQuery.addEventListener) {
+        mediaQuery.addEventListener("change", handleSystemChange);
+        return () => {
+          mediaQuery.removeEventListener("change", handleSystemChange);
+          body.classList.remove("pd-root", "pd-dark");
+        };
+      } else {
+        mediaQuery.addListener(handleSystemChange);
+        return () => {
+          mediaQuery.removeListener(handleSystemChange);
+          body.classList.remove("pd-root", "pd-dark");
+        };
+      }
+    }
+    return () => {
+      body.classList.remove("pd-root", "pd-dark");
+    };
+  }, [mode, resolvedMode]);
+  const [configState, setConfigState] = React.useState(() => getDesignSystemConfig());
+  React.useEffect(() => {
+    const currentConfig = getDesignSystemConfig();
+    setConfigState(currentConfig);
+  }, [adapter, themeName, mode]);
+  const enhancedSetConfig = React__default.default.useCallback((newConfig) => {
+    setDesignSystemConfig(newConfig);
+    const updatedConfig = getDesignSystemConfig();
+    setConfigState(updatedConfig);
+    if (newConfig.mode && newConfig.mode !== mode) {
+      setMode(newConfig.mode);
+    }
+    if (newConfig.mode && storageKey && typeof window !== "undefined") {
+      localStorage.setItem(storageKey, newConfig.mode);
+      window.dispatchEvent(new Event("theme-preference-changed"));
+    }
+  }, [storageKey, mode]);
+  const contextValue = React.useMemo(() => ({
+    config: configState,
+    setConfig: enhancedSetConfig
+  }), [configState, enhancedSetConfig]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children });
+}
+function useTheme() {
+  const context = React.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return context;
+}
+
+// src/tokens/semantic.ts
+var borderTokens = {
+  light: semanticTokens.light.border,
+  dark: semanticTokens.dark.border
+};
+var contentTokens = {
+  light: semanticTokens.light.content,
+  dark: semanticTokens.dark.content
+};
+var backgroundTokens = {
+  light: semanticTokens.light.background,
+  dark: semanticTokens.dark.background
+};
+function createSemanticTokens(mode) {
+  const isLight = mode === "light";
+  const border = isLight ? borderTokens.light : borderTokens.dark;
+  const content = isLight ? contentTokens.light : contentTokens.dark;
+  const background = isLight ? backgroundTokens.light : backgroundTokens.dark;
+  return {
+    intent: {
+      primary: {
+        color: content.secondary,
+        colorHover: isLight ? neutral[700] : neutral[300],
+        colorActive: isLight ? neutral[800] : neutral[200],
+        background: background.secondary,
+        backgroundHover: background.lowOnHover,
+        backgroundActive: background.tertiary,
+        border: border.primary,
+        text: content.primary,
+        textMuted: content.subtle
+      },
+      success: {
+        color: isLight ? green[600] : green[600],
+        colorHover: isLight ? green[700] : green[500],
+        colorActive: isLight ? green[800] : green[700],
+        background: background.green,
+        backgroundHover: background.greenOnHover,
+        backgroundActive: isLight ? green[300] : green[800],
+        border: border.green,
+        text: content.green,
+        textMuted: isLight ? green[700] : green[300]
+      },
+      warning: {
+        color: isLight ? yellow[600] : yellow[400],
+        colorHover: isLight ? yellow[700] : yellow[300],
+        colorActive: isLight ? yellow[800] : yellow[500],
+        background: background.yellow,
+        backgroundHover: background.yellowOnHover,
+        backgroundActive: isLight ? yellow[200] : yellow[900],
+        border: border.yellow,
+        text: content.yellow,
+        textMuted: isLight ? yellow[700] : yellow[300]
+      },
+      danger: {
+        color: isLight ? red[600] : red[400],
+        colorHover: isLight ? red[700] : red[300],
+        colorActive: isLight ? red[800] : red[500],
+        background: background.red,
+        backgroundHover: background.redOnHover,
+        backgroundActive: isLight ? red[200] : red[900],
+        border: border.red,
+        text: content.red,
+        textMuted: isLight ? red[700] : red[300]
+      },
+      neutral: {
+        color: content.secondary,
+        colorHover: isLight ? neutral[700] : neutral[300],
+        colorActive: isLight ? neutral[800] : neutral[200],
+        background: background.secondary,
+        backgroundHover: background.lowOnHover,
+        backgroundActive: background.tertiary,
+        border: border.primary,
+        text: content.primary,
+        textMuted: content.subtle
+      }
+    },
+    surface: {
+      base: {
+        background: background.primary,
+        border: border.primary
+      },
+      elevated: {
+        background: background.secondary,
+        border: border.secondary
+      },
+      overlay: {
+        background: isLight ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 0.7)",
+        border: "transparent"
+      }
+    },
+    text: {
+      heading: content.primary,
+      body: content.primary,
+      muted: content.subtle,
+      disabled: isLight ? content.subtle : neutral[600]
+    }
+  };
+}
+
+// src/tokens/index.ts
+var tokens = {
+  colors: {
+    // Individual color scales
+    neutral,
+    blue,
+    orange,
+    red,
+    green,
+    yellow,
+    // All colors grouped together
+    all: colorPrimitives,
+    // Legacy color names (for backward compatibility)
+    legacy: colors
+  },
+  semantic: semanticTokens,
+  spacing,
+  typography,
+  radius,
+  shadows,
+  zIndex
+};
+function extractTextFromChildren(children) {
+  if (typeof children === "string") {
+    return children.trim();
+  }
+  if (typeof children === "number") {
+    return String(children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(extractTextFromChildren).join(" ").trim();
+  }
+  if (React__default.default.isValidElement(children) && children.props) {
+    if (children.props.children) {
+      return extractTextFromChildren(children.props.children);
+    }
+  }
+  return "";
+}
+function validateAccessibilityProps(props, componentType, options = {}) {
+  if (process.env.NODE_ENV === "production") {
+    return;
+  }
+  const warnings = [];
+  if (componentType === "button" && options.iconOnly && !props["aria-label"] && !props["aria-labelledby"]) {
+    warnings.push(
+      `[pd-design] Icon-only button should have an aria-label or aria-labelledby for accessibility.`
+    );
+  }
+  if ((componentType === "button" || componentType === "link") && !props["aria-label"] && !props["aria-labelledby"] && !extractTextFromChildren(options.children)) {
+    warnings.push(
+      `[pd-design] ${componentType} should have an accessible name (aria-label, aria-labelledby, or text content).`
+    );
+  }
+  if ((componentType === "input" || componentType === "select" || componentType === "textarea") && !props["aria-label"] && !props["aria-labelledby"]) {
+    warnings.push(
+      `[pd-design] ${componentType} should have an accessible label (aria-label or aria-labelledby).`
+    );
+  }
+  if (props.tabIndex !== void 0 && props.tabIndex > 0) {
+    warnings.push(
+      `[pd-design] tabIndex > 0 is not recommended. Use tabIndex={0} for focusable elements or tabIndex={-1} for programmatic focus only.`
+    );
+  }
+  warnings.forEach((warning) => console.warn(warning));
+}
+
+exports.Icons = LucideIcons__namespace;
+exports.ADAPTER_TYPES = ADAPTER_TYPES;
+exports.BUTTON_TYPES = BUTTON_TYPES;
+exports.Button = Button;
+exports.COLOR_SCALES = COLOR_SCALES;
+exports.DEFAULT_ADAPTER = DEFAULT_ADAPTER;
+exports.DEFAULT_MODE = DEFAULT_MODE;
+exports.DEFAULT_THEME = DEFAULT_THEME;
+exports.ErrorBoundary = ErrorBoundary;
+exports.INPUT_TYPES = INPUT_TYPES;
+exports.INTENTS = INTENTS;
+exports.ORIENTATIONS = ORIENTATIONS;
+exports.PdThemeProvider = PdThemeProvider;
+exports.SIZES = SIZES;
+exports.SURFACE_LEVELS = SURFACE_LEVELS;
+exports.THEME_MODES = THEME_MODES;
+exports.THEME_NAMES = THEME_NAMES;
+exports.ThemeProvider = ThemeProvider;
+exports.VARIANTS = VARIANTS;
+exports.backgroundTokens = backgroundTokens;
+exports.blue = blue;
+exports.borderTokens = borderTokens;
+exports.button = button;
+exports.colorPrimitives = colorPrimitives;
+exports.colors = colors;
+exports.contentTokens = contentTokens;
+exports.createSemanticTokens = createSemanticTokens;
+exports.createTheme = createTheme;
+exports.getAdapter = getAdapter;
+exports.getAvailableIconNames = getAvailableIconNames;
+exports.getDesignSystemConfig = getDesignSystemConfig;
+exports.getIcon = getIcon;
+exports.getThemeMode = getThemeMode;
+exports.getThemeName = getThemeName;
+exports.green = green;
+exports.iconExists = iconExists;
+exports.neutral = neutral;
+exports.orange = orange;
+exports.radius = radius;
+exports.red = red;
+exports.renderIcon = renderIcon;
+exports.resolveThemeMode = resolveThemeMode;
+exports.semanticTokens = semanticTokens;
+exports.setDesignSystemConfig = setDesignSystemConfig;
+exports.shadows = shadows;
+exports.spacing = spacing;
+exports.tokens = tokens;
+exports.typography = typography;
+exports.useTheme = useTheme;
+exports.validateAccessibilityProps = validateAccessibilityProps;
+exports.yellow = yellow;
+exports.zIndex = zIndex;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map