@abhir9/pd-design-system 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1399 @@
+'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"];
+var THEME_NAMES = ["base", "brand"];
+var ADAPTER_TYPES = ["shadcn", "material"];
+
+// src/theme/config.ts
+var [DEFAULT_ADAPTER] = ADAPTER_TYPES;
+var [DEFAULT_THEME] = THEME_NAMES;
+var [DEFAULT_MODE] = THEME_MODES;
+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(
+  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--pd-border-blue)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "",
+        secondary: "",
+        ghost: "",
+        outline: "border"
+      },
+      intent: {
+        primary: "",
+        success: "",
+        warning: "",
+        danger: "",
+        neutral: ""
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-base",
+        lg: "h-12 px-6 text-lg"
+      }
+    },
+    compoundVariants: [
+      // Primary variant - using new semantic tokens
+      {
+        variant: "primary",
+        intent: "primary",
+        class: "bg-[var(--pd-background-invert)] text-[var(--pd-content-onColor)] hover:bg-[var(--pd-background-invertLight)] active:bg-[var(--pd-background-invert)] disabled:bg-[var(--pd-background-secondary)] disabled:text-[var(--pd-content-subtle)]"
+      },
+      {
+        variant: "primary",
+        intent: "success",
+        class: "bg-[var(--pd-background-green)] text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-greenOnHover)] active:bg-[var(--pd-background-green)] border-[var(--pd-border-green)]"
+      },
+      {
+        variant: "primary",
+        intent: "warning",
+        class: "bg-[var(--pd-background-yellow)] text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-yellowOnHover)] active:bg-[var(--pd-background-yellow)] border-[var(--pd-border-yellow)]"
+      },
+      {
+        variant: "primary",
+        intent: "danger",
+        class: "bg-[var(--pd-background-red)] text-[var(--pd-content-red)] hover:bg-[var(--pd-background-redOnHover)] hover:text-[var(--pd-content-redOnHover)] active:bg-[var(--pd-background-red)] border-[var(--pd-border-red)] disabled:bg-[var(--pd-background-red)] disabled:text-[var(--pd-content-subtle)]"
+      },
+      {
+        variant: "primary",
+        intent: "neutral",
+        class: "bg-[var(--pd-background-secondary)] text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-lowOnHover)] active:bg-[var(--pd-background-tertiary)] border-[var(--pd-border-primary)]"
+      },
+      // Secondary variant - using new semantic tokens
+      {
+        variant: "secondary",
+        intent: "primary",
+        class: "bg-[var(--pd-background-secondary)] text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-lowOnHover)] active:bg-[var(--pd-background-secondary)] border border-[var(--pd-border-secondary)] disabled:bg-[var(--pd-background-tertiary)] disabled:text-[var(--pd-content-subtle)] disabled:border-[var(--pd-border-subtle)]"
+      },
+      {
+        variant: "secondary",
+        intent: "success",
+        class: "bg-[var(--pd-background-green)] text-[var(--pd-content-green)] hover:bg-[var(--pd-background-greenOnHover)] active:bg-[var(--pd-background-green)] border-[var(--pd-border-greenSubtle)]"
+      },
+      {
+        variant: "secondary",
+        intent: "warning",
+        class: "bg-[var(--pd-background-yellow)] text-[var(--pd-content-yellow)] hover:bg-[var(--pd-background-yellowOnHover)] active:bg-[var(--pd-background-yellow)] border-[var(--pd-border-yellowSubtle)]"
+      },
+      {
+        variant: "secondary",
+        intent: "danger",
+        class: "bg-[var(--pd-background-red)] text-[var(--pd-content-red)] hover:bg-[var(--pd-background-redOnHover)] hover:text-[var(--pd-content-redOnHover)] active:bg-[var(--pd-background-red)] border border-[var(--pd-border-red)]"
+      },
+      {
+        variant: "secondary",
+        intent: "neutral",
+        class: "bg-[var(--pd-background-low)] text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-lowOnHover)] active:bg-[var(--pd-background-tertiary)] border-[var(--pd-border-subtle)]"
+      },
+      // Ghost variant - using new semantic tokens
+      {
+        variant: "ghost",
+        intent: "primary",
+        class: "text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-low)] hover:text-[var(--pd-content-primary)] disabled:text-[var(--pd-content-subtle)]"
+      },
+      {
+        variant: "ghost",
+        intent: "success",
+        class: "hover:bg-[var(--pd-background-green)] text-[var(--pd-content-green)] hover:text-[var(--pd-content-greenOnHover)]"
+      },
+      {
+        variant: "ghost",
+        intent: "warning",
+        class: "hover:bg-[var(--pd-background-yellow)] text-[var(--pd-content-yellow)] hover:text-[var(--pd-content-yellowOnHover)]"
+      },
+      {
+        variant: "ghost",
+        intent: "danger",
+        class: "text-[var(--pd-content-red)] hover:bg-[var(--pd-background-red)] hover:text-[var(--pd-content-redOnHover)]"
+      },
+      {
+        variant: "ghost",
+        intent: "neutral",
+        class: "hover:bg-[var(--pd-background-low)] text-[var(--pd-content-secondary)] hover:text-[var(--pd-content-primary)]"
+      },
+      // Outline variant - using new semantic tokens
+      {
+        variant: "outline",
+        intent: "primary",
+        class: "border-[var(--pd-border-primary)] text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-low)] hover:border-[var(--pd-border-secondary)]"
+      },
+      {
+        variant: "outline",
+        intent: "success",
+        class: "border-[var(--pd-border-green)] text-[var(--pd-content-green)] hover:bg-[var(--pd-background-green)] hover:border-[var(--pd-border-greenOnHover)]"
+      },
+      {
+        variant: "outline",
+        intent: "warning",
+        class: "border-[var(--pd-border-yellow)] text-[var(--pd-content-yellow)] hover:bg-[var(--pd-background-yellow)] hover:border-[var(--pd-border-yellowOnHover)]"
+      },
+      {
+        variant: "outline",
+        intent: "danger",
+        class: "border border-[var(--pd-border-red)] text-[var(--pd-content-red)] hover:bg-[var(--pd-background-red)] hover:text-[var(--pd-content-redOnHover)] hover:border-[var(--pd-border-redOnHover)]"
+      },
+      {
+        variant: "outline",
+        intent: "neutral",
+        class: "border-[var(--pd-border-primary)] text-[var(--pd-content-primary)] hover:bg-[var(--pd-background-low)] hover:border-[var(--pd-border-secondary)]"
+      }
+    ],
+    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) => {
+    if (process.env.NODE_ENV !== "production" && !children && (startIcon || endIcon) && !props["aria-label"]) {
+      console.warn(
+        "[pd-design] Icon-only buttons should have an aria-label for accessibility. Add aria-label prop to describe the button action."
+      );
+    }
+    const buttonClasses = cn(
+      buttonVariants({ variant, intent, size }),
+      fullWidth && "w-full"
+    );
+    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 })
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ButtonPrimitive,
+      {
+        ref,
+        disabled: disabled || loading,
+        className: buttonClasses,
+        asChild,
+        ...props,
+        children: renderButtonContent({ loading, loadingText, startIcon, endIcon, children, size })
+      }
+    );
+  }
+);
+function renderButtonContent({
+  loading,
+  loadingText,
+  startIcon,
+  endIcon,
+  children,
+  size
+}) {
+  const iconSizeClass = size === "sm" ? "h-3 w-3" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
+  const spinnerSizeClass = size === "sm" ? "h-3 w-3" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
+  const iconSpacing = size === "sm" ? "mr-1.5" : size === "lg" ? "mr-2.5" : "mr-2";
+  const iconSpacingEnd = size === "sm" ? "ml-1.5" : size === "lg" ? "ml-2.5" : "ml-2";
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LucideIcons.Loader2,
+        {
+          "aria-hidden": "true",
+          className: `${spinnerSizeClass} ${iconSpacing} animate-spin text-[var(--pd-content-secondary)]`
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--pd-content-secondary)]", children: loadingText || children }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: loadingText ? `Loading: ${loadingText}` : "Loading" })
+    ] });
+  }
+  const StartIconComponent = startIcon ? getIcon(startIcon) : null;
+  const EndIconComponent = endIcon ? getIcon(endIcon) : null;
+  const hasChildren = Boolean(children);
+  const startIconSpacing = hasChildren ? iconSpacing : "";
+  const endIconSpacing = hasChildren ? iconSpacingEnd : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    StartIconComponent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${startIconSpacing} inline-flex items-center justify-center`, children: React__default.default.createElement(StartIconComponent, { className: iconSizeClass }) }),
+    children,
+    EndIconComponent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${endIconSpacing} inline-flex items-center justify-center`, children: React__default.default.createElement(EndIconComponent, { className: iconSizeClass }) })
+  ] });
+}
+ShadcnButton.displayName = "ShadcnButton";
+var buttonGroupVariants = classVarianceAuthority.cva(
+  "inline-flex",
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex-row",
+        vertical: "flex-col"
+      },
+      gap: {
+        sm: "gap-1",
+        md: "gap-2",
+        lg: "gap-3"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+      gap: "md",
+      fullWidth: false
+    }
+  }
+);
+var ShadcnButtonGroup = React.forwardRef(
+  ({
+    orientation = "horizontal",
+    gap = "md",
+    fullWidth = false,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    const groupClasses = cn(
+      buttonGroupVariants({ orientation, gap, fullWidth }),
+      className
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: groupClasses,
+        role: "group",
+        ...props,
+        children
+      }
+    );
+  }
+);
+ShadcnButtonGroup.displayName = "ShadcnButtonGroup";
+
+// 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:
+      console.warn("Material adapter not yet enabled. Install @mui/material to use it.");
+      return ShadcnButton;
+    default:
+      return ShadcnButton;
+  }
+}
+function getButtonGroupAdapter() {
+  const adapter = getAdapter();
+  switch (adapter) {
+    case SHADCN_ADAPTER:
+      return ShadcnButtonGroup;
+    case MATERIAL_ADAPTER:
+      return ShadcnButtonGroup;
+    default:
+      return ShadcnButtonGroup;
+  }
+}
+var Button = React.forwardRef(
+  ({
+    variant = "primary",
+    intent = "primary",
+    size = "md",
+    loading,
+    disabled,
+    fullWidth,
+    startIcon,
+    endIcon,
+    loadingText,
+    href,
+    target,
+    children,
+    ...props
+  }, ref) => {
+    const AdapterButton = getButtonAdapter();
+    const { className, ...restProps } = props;
+    if (className) {
+      console.warn("Button component does not accept className prop. Use variant, intent, size, and other props for styling.");
+    }
+    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,
+        ...mergedProps,
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var ButtonGroup = React.forwardRef(
+  ({
+    orientation = "horizontal",
+    gap = "md",
+    fullWidth = false,
+    children,
+    ...props
+  }, ref) => {
+    const AdapterButtonGroup = getButtonGroupAdapter();
+    const { className, ...restProps } = props;
+    if (className) {
+      console.warn("ButtonGroup component does not accept className prop. Use orientation, gap, fullWidth, and other props for styling.");
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AdapterButtonGroup,
+      {
+        ref,
+        orientation,
+        gap,
+        fullWidth,
+        ...restProps,
+        children
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+// src/tokens/base.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 colors = {
+  // Neutral palette (mapped from new scale)
+  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]
+};
+var typography = {
+  fontFamily: {
+    sans: ["Gist", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "sans-serif"],
+    mono: ["Gist Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"]
+  },
+  fontSize: {
+    xs: "0.75rem",
+    // 12px
+    sm: "0.875rem",
+    // 14px
+    base: "1rem",
+    // 16px
+    lg: "1.125rem",
+    // 18px
+    xl: "1.25rem",
+    // 20px
+    "2xl": "1.5rem",
+    // 24px
+    "3xl": "1.875rem",
+    // 30px
+    "4xl": "2.25rem",
+    // 36px
+    "5xl": "3rem"
+    // 48px
+  },
+  fontWeight: {
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700"
+  },
+  lineHeight: {
+    tight: "1.25",
+    normal: "1.5",
+    relaxed: "1.75"
+  }
+};
+var spacing = {
+  0: "0",
+  1: "0.25rem",
+  // 4px
+  2: "0.5rem",
+  // 8px
+  3: "0.75rem",
+  // 12px
+  4: "1rem",
+  // 16px
+  5: "1.25rem",
+  // 20px
+  6: "1.5rem",
+  // 24px
+  8: "2rem",
+  // 32px
+  10: "2.5rem",
+  // 40px
+  12: "3rem",
+  // 48px
+  16: "4rem",
+  // 64px
+  20: "5rem",
+  // 80px
+  24: "6rem"
+  // 96px
+};
+var radius = {
+  none: "0",
+  sm: "0.125rem",
+  // 2px
+  base: "0.25rem",
+  // 4px
+  md: "0.375rem",
+  // 6px
+  lg: "0.5rem",
+  // 8px
+  xl: "0.75rem",
+  // 12px
+  "2xl": "1rem",
+  // 16px
+  "3xl": "1.5rem",
+  // 24px
+  full: "9999px"
+};
+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 COLOR_SCALES = [100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 1e3];
+
+// src/tokens/semantic.ts
+var borderTokens = {
+  dark: {
+    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]
+  },
+  light: {
+    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]
+  }
+};
+var contentTokens = {
+  dark: {
+    primary: neutral[300],
+    secondary: neutral[500],
+    subtle: neutral[700],
+    onColor: neutral[950],
+    alwaysWhite: neutral[100],
+    alwaysBlack: neutral[950],
+    onColorInverse: neutral[200],
+    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]
+  },
+  light: {
+    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]
+  }
+};
+var backgroundTokens = {
+  dark: {
+    base: neutral[950],
+    primary: blue[950],
+    primaryOnHover: blue[900],
+    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]
+  },
+  light: {
+    base: neutral[100],
+    primary: blue[100],
+    primaryOnHover: blue[300],
+    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]
+  }
+};
+var semanticTokens = {
+  border: borderTokens,
+  content: contentTokens,
+  background: backgroundTokens
+};
+var VARIANTS = ["primary", "secondary", "ghost", "outline"];
+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"];
+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.base,
+        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/theme/theme.ts
+function createTheme(name, mode) {
+  const semantic = 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;
+  const cssVariables = {
+    // Base colors
+    "--pd-color-white": colors.white,
+    "--pd-color-black": colors.black,
+    // Intent colors
+    "--pd-intent-primary": semantic.intent.primary.color,
+    "--pd-intent-primary-hover": semantic.intent.primary.colorHover,
+    "--pd-intent-primary-active": semantic.intent.primary.colorActive,
+    "--pd-intent-primary-bg": semantic.intent.primary.background,
+    "--pd-intent-primary-bg-hover": semantic.intent.primary.backgroundHover,
+    "--pd-intent-primary-bg-active": semantic.intent.primary.backgroundActive,
+    "--pd-intent-primary-border": semantic.intent.primary.border,
+    "--pd-intent-primary-text": semantic.intent.primary.text,
+    "--pd-intent-success": semantic.intent.success.color,
+    "--pd-intent-success-hover": semantic.intent.success.colorHover,
+    "--pd-intent-success-active": semantic.intent.success.colorActive,
+    "--pd-intent-success-bg": semantic.intent.success.background,
+    "--pd-intent-success-bg-hover": semantic.intent.success.backgroundHover,
+    "--pd-intent-success-bg-active": semantic.intent.success.backgroundActive,
+    "--pd-intent-success-border": semantic.intent.success.border,
+    "--pd-intent-success-text": semantic.intent.success.text,
+    "--pd-intent-warning": semantic.intent.warning.color,
+    "--pd-intent-warning-hover": semantic.intent.warning.colorHover,
+    "--pd-intent-warning-active": semantic.intent.warning.colorActive,
+    "--pd-intent-warning-bg": semantic.intent.warning.background,
+    "--pd-intent-warning-bg-hover": semantic.intent.warning.backgroundHover,
+    "--pd-intent-warning-bg-active": semantic.intent.warning.backgroundActive,
+    "--pd-intent-warning-border": semantic.intent.warning.border,
+    "--pd-intent-warning-text": semantic.intent.warning.text,
+    "--pd-intent-danger": semantic.intent.danger.color,
+    "--pd-intent-danger-hover": semantic.intent.danger.colorHover,
+    "--pd-intent-danger-active": semantic.intent.danger.colorActive,
+    "--pd-intent-danger-bg": semantic.intent.danger.background,
+    "--pd-intent-danger-bg-hover": semantic.intent.danger.backgroundHover,
+    "--pd-intent-danger-bg-active": semantic.intent.danger.backgroundActive,
+    "--pd-intent-danger-border": semantic.intent.danger.border,
+    "--pd-intent-danger-text": semantic.intent.danger.text,
+    "--pd-intent-neutral": semantic.intent.neutral.color,
+    "--pd-intent-neutral-hover": semantic.intent.neutral.colorHover,
+    "--pd-intent-neutral-active": semantic.intent.neutral.colorActive,
+    "--pd-intent-neutral-bg": semantic.intent.neutral.background,
+    "--pd-intent-neutral-bg-hover": semantic.intent.neutral.backgroundHover,
+    "--pd-intent-neutral-bg-active": semantic.intent.neutral.backgroundActive,
+    "--pd-intent-neutral-border": semantic.intent.neutral.border,
+    "--pd-intent-neutral-text": semantic.intent.neutral.text,
+    // Surface
+    "--pd-surface-base": semantic.surface.base.background,
+    "--pd-surface-base-border": semantic.surface.base.border,
+    "--pd-surface-elevated": semantic.surface.elevated.background,
+    "--pd-surface-elevated-border": semantic.surface.elevated.border,
+    "--pd-surface-overlay": semantic.surface.overlay.background,
+    // Text
+    "--pd-text-heading": semantic.text.heading,
+    "--pd-text-body": semantic.text.body,
+    "--pd-text-muted": semantic.text.muted,
+    "--pd-text-disabled": semantic.text.disabled,
+    // Spacing
+    "--pd-spacing-0": spacing[0],
+    "--pd-spacing-1": spacing[1],
+    "--pd-spacing-2": spacing[2],
+    "--pd-spacing-3": spacing[3],
+    "--pd-spacing-4": spacing[4],
+    "--pd-spacing-5": spacing[5],
+    "--pd-spacing-6": spacing[6],
+    "--pd-spacing-8": spacing[8],
+    "--pd-spacing-10": spacing[10],
+    "--pd-spacing-12": spacing[12],
+    "--pd-spacing-16": spacing[16],
+    "--pd-spacing-20": spacing[20],
+    "--pd-spacing-24": spacing[24],
+    // Radius
+    "--pd-radius-none": radius.none,
+    "--pd-radius-sm": radius.sm,
+    "--pd-radius-base": radius.base,
+    "--pd-radius-md": radius.md,
+    "--pd-radius-lg": radius.lg,
+    "--pd-radius-xl": radius.xl,
+    "--pd-radius-2xl": radius["2xl"],
+    "--pd-radius-3xl": radius["3xl"],
+    "--pd-radius-full": radius.full,
+    // Shadows
+    "--pd-shadow-sm": shadows.sm,
+    "--pd-shadow-base": shadows.base,
+    "--pd-shadow-md": shadows.md,
+    "--pd-shadow-lg": shadows.lg,
+    "--pd-shadow-xl": shadows.xl,
+    "--pd-shadow-2xl": shadows["2xl"],
+    "--pd-shadow-inner": shadows.inner,
+    "--pd-shadow-none": shadows.none,
+    // Z-index
+    "--pd-z-dropdown": String(zIndex.dropdown),
+    "--pd-z-sticky": String(zIndex.sticky),
+    "--pd-z-fixed": String(zIndex.fixed),
+    "--pd-z-modal-backdrop": String(zIndex.modalBackdrop),
+    "--pd-z-modal": String(zIndex.modal),
+    "--pd-z-popover": String(zIndex.popover),
+    "--pd-z-tooltip": String(zIndex.tooltip),
+    // Typography
+    "--pd-font-sans": typography.fontFamily.sans.join(", "),
+    "--pd-font-mono": typography.fontFamily.mono.join(", "),
+    "--pd-font-size-xs": typography.fontSize.xs,
+    "--pd-font-size-sm": typography.fontSize.sm,
+    "--pd-font-size-base": typography.fontSize.base,
+    "--pd-font-size-lg": typography.fontSize.lg,
+    "--pd-font-size-xl": typography.fontSize.xl,
+    "--pd-font-size-2xl": typography.fontSize["2xl"],
+    "--pd-font-size-3xl": typography.fontSize["3xl"],
+    "--pd-font-size-4xl": typography.fontSize["4xl"],
+    "--pd-font-size-5xl": typography.fontSize["5xl"],
+    "--pd-font-weight-normal": typography.fontWeight.normal,
+    "--pd-font-weight-medium": typography.fontWeight.medium,
+    "--pd-font-weight-semibold": typography.fontWeight.semibold,
+    "--pd-font-weight-bold": typography.fontWeight.bold,
+    "--pd-line-height-tight": typography.lineHeight.tight,
+    "--pd-line-height-normal": typography.lineHeight.normal,
+    "--pd-line-height-relaxed": typography.lineHeight.relaxed,
+    // shadcn/ui CSS variable mappings for compatibility
+    "--background": semantic.surface.base.background,
+    "--foreground": semantic.text.body,
+    "--card": semantic.surface.elevated.background,
+    "--card-foreground": semantic.text.body,
+    "--popover": semantic.surface.elevated.background,
+    "--popover-foreground": semantic.text.body,
+    "--primary": semantic.intent.primary.color,
+    "--primary-foreground": colors.white,
+    "--secondary": semantic.intent.neutral.background,
+    "--secondary-foreground": semantic.intent.neutral.text,
+    "--muted": semantic.intent.neutral.background,
+    "--muted-foreground": semantic.text.muted,
+    "--accent": semantic.intent.primary.background,
+    "--accent-foreground": semantic.intent.primary.text,
+    "--destructive": semantic.intent.danger.color,
+    "--destructive-foreground": colors.white,
+    "--border": semantic.intent.neutral.border,
+    "--input": semantic.intent.neutral.border,
+    "--ring": semantic.intent.primary.color,
+    "--radius": radius.md,
+    // New semantic token CSS variables (border, content, background)
+    // Border tokens
+    "--pd-border-primary": border.primary,
+    "--pd-border-secondary": border.secondary,
+    "--pd-border-subtle": border.subtle,
+    "--pd-border-invert": border.invert,
+    "--pd-border-onColor": border.onColor,
+    "--pd-border-blue": border.blue,
+    "--pd-border-blueSubtle": border.blueSubtle,
+    "--pd-border-blueOnHover": border.blueOnHover,
+    "--pd-border-red": border.red,
+    "--pd-border-redSubtle": border.redSubtle,
+    "--pd-border-redOnHover": border.redOnHover,
+    "--pd-border-orange": border.orange,
+    "--pd-border-orangeSubtle": border.orangeSubtle,
+    "--pd-border-orangeOnHover": border.orangeOnHover,
+    "--pd-border-yellow": border.yellow,
+    "--pd-border-yellowSubtle": border.yellowSubtle,
+    "--pd-border-yellowOnHover": border.yellowOnHover,
+    "--pd-border-green": border.green,
+    "--pd-border-greenSubtle": border.greenSubtle,
+    "--pd-border-greenOnHover": border.greenOnHover,
+    // Content tokens
+    "--pd-content-primary": content.primary,
+    "--pd-content-secondary": content.secondary,
+    "--pd-content-subtle": content.subtle,
+    "--pd-content-onColor": content.onColor,
+    "--pd-content-alwaysWhite": content.alwaysWhite,
+    "--pd-content-alwaysBlack": content.alwaysBlack,
+    "--pd-content-onColorInverse": content.onColorInverse,
+    "--pd-content-blue": content.blue,
+    "--pd-content-blueDisabled": content.blueDisabled,
+    "--pd-content-blueOnHover": content.blueOnHover,
+    "--pd-content-green": content.green,
+    "--pd-content-greenDisabled": content.greenDisabled,
+    "--pd-content-greenOnHover": content.greenOnHover,
+    "--pd-content-red": content.red,
+    "--pd-content-redDisabled": content.redDisabled,
+    "--pd-content-redOnHover": content.redOnHover,
+    "--pd-content-orange": content.orange,
+    "--pd-content-orangeDisabled": content.orangeDisabled,
+    "--pd-content-orangeOnHover": content.orangeOnHover,
+    "--pd-content-yellow": content.yellow,
+    "--pd-content-yellowDisabled": content.yellowDisabled,
+    "--pd-content-yellowOnHover": content.yellowOnHover,
+    // Background tokens
+    "--pd-background-base": background.base,
+    "--pd-background-primary": background.primary,
+    "--pd-background-primaryOnHover": background.primaryOnHover,
+    "--pd-background-secondary": background.secondary,
+    "--pd-background-tertiary": background.tertiary,
+    "--pd-background-invert": background.invert,
+    "--pd-background-invertLight": background.invertLight,
+    "--pd-background-green": background.green,
+    "--pd-background-greenOnHover": background.greenOnHover,
+    "--pd-background-red": background.red,
+    "--pd-background-redOnHover": background.redOnHover,
+    "--pd-background-orange": background.orange,
+    "--pd-background-orangeOnHover": background.orangeOnHover,
+    "--pd-background-yellow": background.yellow,
+    "--pd-background-yellowOnHover": background.yellowOnHover,
+    "--pd-background-low": background.low,
+    "--pd-background-lowOnHover": background.lowOnHover,
+    "--pd-background-info": background.info,
+    "--pd-background-infoOnHover": background.infoOnHover
+  };
+  return {
+    name,
+    mode,
+    cssVariables
+  };
+}
+var [DEFAULT_ADAPTER2] = ADAPTER_TYPES;
+var [DEFAULT_THEME2] = THEME_NAMES;
+var [DEFAULT_MODE2] = THEME_MODES;
+var ThemeContext = React.createContext(null);
+function ThemeProvider({
+  children,
+  adapter = DEFAULT_ADAPTER2,
+  theme: themeName = DEFAULT_THEME2,
+  mode = DEFAULT_MODE2
+}) {
+  const theme = React.useMemo(() => createTheme(themeName, mode), [themeName, mode]);
+  React.useEffect(() => {
+    setDesignSystemConfig({ adapter, theme: themeName, mode });
+  }, [adapter, themeName, mode]);
+  React.useEffect(() => {
+    const root = document.documentElement;
+    Object.entries(theme.cssVariables).forEach(([key, value]) => {
+      root.style.setProperty(key, value);
+    });
+    return () => {
+      Object.keys(theme.cssVariables).forEach((key) => {
+        root.style.removeProperty(key);
+      });
+    };
+  }, [theme]);
+  const contextValue = React.useMemo(() => ({
+    config: getDesignSystemConfig(),
+    setConfig: setDesignSystemConfig
+  }), []);
+  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/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: {
+    border: borderTokens,
+    content: contentTokens,
+    background: backgroundTokens,
+    // Full semantic tokens object
+    all: 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.ADAPTER_TYPES = ADAPTER_TYPES;
+exports.BUTTON_TYPES = BUTTON_TYPES;
+exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
+exports.COLOR_SCALES = COLOR_SCALES;
+exports.INPUT_TYPES = INPUT_TYPES;
+exports.INTENTS = INTENTS;
+exports.ORIENTATIONS = ORIENTATIONS;
+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.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.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