@abhir9/pd-design-system 0.1.18 → 0.1.19

package/README.md

@@ -21,21 +21,38 @@ npm install @pd-design/system
 ## Quick Start
 
 ```tsx
-import { ThemeProvider, Button, Input } from '@pd-design/system';
-import '@pd-design/system/styles';
+import { PdProvider, Button, Input } from '@pd-design/system';
+import '@pd-design/system/styles.css';
 
 function App() {
   return (
-    <ThemeProvider adapter="shadcn" theme="base" mode="light">
+    <PdProvider theme="light">
       <Button variant="primary" intent="danger" size="md">
         Delete
       </Button>
       <Input placeholder="Enter text..." size="md" />
-    </ThemeProvider>
+    </PdProvider>
   );
 }
 ```
 
+### Important: Style Isolation
+
+The design system uses **scoped styling** to prevent style conflicts:
+
+- ✅ **All Tailwind classes are prefixed with `pd-`** - No collision with consumer Tailwind
+- ✅ **All CSS variables are scoped under `.pd-root`** - No token leakage
+- ✅ **Preflight is disabled** - Consumer styles are never reset
+- ✅ **Works with any consumer setup** - Tailwind, MUI, AntD, Bootstrap, or plain CSS
+
+**Always wrap your components with `PdProvider`** to create the scoped boundary:
+
+```tsx
+<PdProvider theme="light">
+  {/* Your design system components */}
+</PdProvider>
+```
+
 ## Configuration
 
 Configure the design system globally:
@@ -191,25 +208,49 @@ No arbitrary strings or raw class overrides are allowed.
 
 ## Theming
 
-The design system uses CSS variables as the public contract. Themes can be switched without rebuilding:
+The design system uses **scoped CSS variables** under `.pd-root`. Themes can be switched without rebuilding:
 
 ```tsx
-<ThemeProvider theme="base" mode="dark">
+<PdProvider theme="dark">
   {/* Dark mode */}
-</ThemeProvider>
+</PdProvider>
 ```
 
 ### Custom Themes
 
-You can extend themes by overriding CSS variables:
+You can override tokens using CSS variables scoped to `.pd-root`:
+
+```tsx
+<PdProvider 
+  theme="light" 
+  className="pd-root [--pd-primary:220_80%_50%]"
+>
+  {/* Custom primary color */}
+</PdProvider>
+```
+
+Or via CSS:
 
 ```css
-:root {
-  --pd-intent-primary: #your-color;
-  --pd-intent-primary-hover: #your-hover-color;
+.pd-root {
+  --pd-primary: 220 80% 50%;
+  --pd-primary-foreground: 0 0% 98%;
 }
 ```
 
+### Per-Widget Theming
+
+You can wrap only part of your page with `PdProvider` for widget-level theming:
+
+```tsx
+<div>
+  {/* Consumer styles */}
+  <PdProvider theme="dark">
+    {/* Design system widget with dark theme */}
+  </PdProvider>
+</div>
+```
+
 ## Adapter Layer
 
 The adapter layer allows switching UI engines without changing application code:
@@ -247,9 +288,27 @@ src/
 ├── theme/           # Theme system & provider
 ├── primitives/      # Headless components
 ├── adapters/        # UI engine adapters
-└── components/      # Public components
+├── components/      # Public components
+└── styles/          # Scoped CSS (tokens.css, base.css)
 ```
 
+### Style Isolation Architecture
+
+The design system implements **4 guardrails** to prevent style conflicts:
+
+1. **Prefix all Tailwind classes** (`pd-`) - Utilities never collide with consumer Tailwind
+2. **Disable Tailwind preflight** - Consumer styles are never reset
+3. **Scope all tokens under `.pd-root`** - Tokens never leak outside the boundary
+4. **Ship compiled CSS** - Consumer doesn't need Tailwind to use components
+
+This ensures the design system works seamlessly with:
+- ✅ Consumer Tailwind projects
+- ✅ Material UI (MUI)
+- ✅ Ant Design
+- ✅ Bootstrap
+- ✅ Plain CSS projects
+- ✅ Any CSS framework or reset
+
 ## TypeScript
 
 Full TypeScript support with autocomplete:

package/dist/index.cjs

@@ -144,14 +144,14 @@ function getAvailableIconNames() {
   );
 }
 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(--border-blue)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "pd-inline-flex pd-items-center pd-justify-center pd-rounded-[var(--pd-radius-base)] 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,Gist,sans-serif)] pd-shadow-none",
   {
     variants: {
       variant: {
-        primary: "",
-        secondary: "",
-        ghost: "",
-        outline: "border"
+        primary: "pd-border-0",
+        secondary: "pd-border",
+        ghost: "pd-border-0",
+        destructive: "pd-border-0"
       },
       intent: {
         primary: "",
@@ -161,9 +161,9 @@ var buttonVariants = classVarianceAuthority.cva(
         neutral: ""
       },
       size: {
-        sm: "h-8 px-3 text-sm",
-        md: "h-10 px-4 text-base",
-        lg: "h-12 px-6 text-lg"
+        sm: "pd-h-8 pd-px-3 pd-text-sm",
+        md: "pd-h-10 pd-px-4 pd-text-base",
+        lg: "pd-h-12 pd-px-6 pd-text-lg"
       }
     },
     compoundVariants: [
@@ -171,105 +171,85 @@ var buttonVariants = classVarianceAuthority.cva(
       {
         variant: "primary",
         intent: "primary",
-        class: "bg-[var(--background-invert)] text-[var(--content-on-color)] hover:bg-[var(--background-invert-light)] active:bg-[var(--background-invert)] disabled:bg-[var(--background-secondary)] disabled:text-[var(--content-subtle)]"
+        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: "bg-[var(--background-green)] text-[var(--content-green)] hover:bg-[var(--background-green-on-hover)] active:bg-[var(--background-green)] border-[var(--border-green)]"
+        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: "bg-[var(--background-yellow)] text-[var(--content-yellow)] hover:bg-[var(--background-yellow-on-hover)] active:bg-[var(--background-yellow)] border-[var(--border-yellow)]"
+        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: "bg-[var(--background-red)] text-[var(--content-red)] hover:bg-[var(--background-red-on-hover)] hover:text-[var(--content-red-on-hover)] active:bg-[var(--background-red)] border-[var(--border-red)] disabled:bg-[var(--background-red)] disabled:text-[var(--content-subtle)]"
+        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: "bg-[var(--background-secondary)] text-[var(--content-primary)] hover:bg-[var(--background-low-on-hover)] active:bg-[var(--background-tertiary)] border-[var(--border-primary)]"
+        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 - using new semantic tokens
+      // Secondary variant - White bg default, always has light grey border
       {
         variant: "secondary",
         intent: "primary",
-        class: "bg-[var(--background-secondary)] text-[var(--content-primary)] hover:bg-[var(--background-low-on-hover)] active:bg-[var(--background-secondary)] border border-[var(--border-secondary)] disabled:bg-[var(--background-tertiary)] disabled:text-[var(--content-subtle)] disabled:border-[var(--border-subtle)]"
+        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: "bg-[var(--background-green)] text-[var(--content-green)] hover:bg-[var(--background-green-on-hover)] active:bg-[var(--background-green)] border-[var(--border-green-subtle)]"
+        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: "bg-[var(--background-yellow)] text-[var(--content-yellow)] hover:bg-[var(--background-yellow-on-hover)] active:bg-[var(--background-yellow)] border-[var(--border-yellow-subtle)]"
+        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: "bg-[var(--background-red)] text-[var(--content-red)] hover:bg-[var(--background-red-on-hover)] hover:text-[var(--content-red-on-hover)] active:bg-[var(--background-red)] border border-[var(--border-red)]"
+        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: "bg-[var(--background-low)] text-[var(--content-primary)] hover:bg-[var(--background-low-on-hover)] active:bg-[var(--background-tertiary)] border-[var(--border-subtle)]"
+        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 - using new semantic tokens
+      // Ghost variant - Transparent default, light grey fill on hover/pressed/loading
       {
         variant: "ghost",
         intent: "primary",
-        class: "text-[var(--content-primary)] hover:bg-[var(--background-low)] hover:text-[var(--content-primary)] disabled:text-[var(--content-subtle)]"
+        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: "hover:bg-[var(--background-green)] text-[var(--content-green)] hover:text-[var(--content-green-on-hover)]"
+        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: "hover:bg-[var(--background-yellow)] text-[var(--content-yellow)] hover:text-[var(--content-yellow-on-hover)]"
+        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: "text-[var(--content-red)] hover:bg-[var(--background-red)] hover:text-[var(--content-red-on-hover)]"
+        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: "hover:bg-[var(--background-low)] text-[var(--content-secondary)] hover:text-[var(--content-primary)]"
+        class: "pd-border-0 pd-bg-transparent pd-text-[var(--pd-intent-neutral-text)] hover:pd-text-[var(--pd-intent-neutral-hover)]"
       },
-      // Outline variant - using new semantic tokens
+      // Destructive variant - Red text, light red/pink background, different on hover/active/disabled
       {
-        variant: "outline",
+        variant: "destructive",
         intent: "primary",
-        class: "border-[var(--border-primary)] text-[var(--content-primary)] hover:bg-[var(--background-low)] hover:border-[var(--border-secondary)]"
-      },
-      {
-        variant: "outline",
-        intent: "success",
-        class: "border-[var(--border-green)] text-[var(--content-green)] hover:bg-[var(--background-green)] hover:border-[var(--border-green-on-hover)]"
-      },
-      {
-        variant: "outline",
-        intent: "warning",
-        class: "border-[var(--border-yellow)] text-[var(--content-yellow)] hover:bg-[var(--background-yellow)] hover:border-[var(--border-yellow-on-hover)]"
-      },
-      {
-        variant: "outline",
-        intent: "danger",
-        class: "border border-[var(--border-red)] text-[var(--content-red)] hover:bg-[var(--background-red)] hover:text-[var(--content-red-on-hover)] hover:border-[var(--border-red-on-hover)]"
-      },
-      {
-        variant: "outline",
-        intent: "neutral",
-        class: "border-[var(--border-primary)] text-[var(--content-primary)] hover:bg-[var(--background-low)] hover:border-[var(--border-secondary)]"
+        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)]"
       }
     ],
     defaultVariants: {
@@ -298,7 +278,17 @@ var ShadcnButton = React.forwardRef(
   }, ref) => {
     const buttonClasses = cn(
       buttonVariants({ variant, intent, size }),
-      fullWidth && "w-full"
+      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)]",
+      loading && variant === "destructive" && "pd-bg-[var(--pd-background-red)] pd-text-[var(--pd-content-red)]",
+      // 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(
@@ -315,7 +305,7 @@ var ShadcnButton = React.forwardRef(
               className: buttonClasses,
               "aria-disabled": disabled || loading,
               style: { pointerEvents: disabled || loading ? "none" : void 0 },
-              children: renderButtonContent({ loading, loadingText, startIcon, endIcon, children, size })
+              children: renderButtonContent({ loading, loadingText, startIcon, endIcon, children, size, variant, intent })
             }
           )
         }
@@ -329,7 +319,7 @@ var ShadcnButton = React.forwardRef(
         className: buttonClasses,
         asChild,
         ...props,
-        children: renderButtonContent({ loading, loadingText, startIcon, endIcon, children, size })
+        children: renderButtonContent({ loading, loadingText, startIcon, endIcon, children, size, variant, intent })
       }
     );
   }
@@ -340,23 +330,44 @@ function renderButtonContent({
   startIcon,
   endIcon,
   children,
-  size
+  size,
+  variant,
+  intent
 }) {
-  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";
+  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 iconSpacing = size === "sm" ? "pd-mr-1.5" : size === "lg" ? "pd-mr-2.5" : "pd-mr-2";
+  const iconSpacingEnd = size === "sm" ? "pd-ml-1.5" : size === "lg" ? "pd-ml-2.5" : "pd-ml-2";
+  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") {
+      return "pd-text-[var(--pd-content-red)]";
+    }
+    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} ${iconSpacing} animate-spin text-[var(--content-secondary)]`
+          className: `${spinnerSizeClass} ${iconSpacing} pd-animate-spin ${loadingTextColor}`
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--content-secondary)]", children: loadingText || children }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: loadingText ? `Loading: ${loadingText}` : "Loading" })
+      /* @__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;
@@ -365,27 +376,27 @@ function renderButtonContent({
   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 }) }),
+    StartIconComponent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${startIconSpacing} pd-inline-flex pd-items-center pd-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 }) })
+    EndIconComponent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${endIconSpacing} pd-inline-flex pd-items-center pd-justify-center`, children: React__default.default.createElement(EndIconComponent, { className: iconSizeClass }) })
   ] });
 }
 ShadcnButton.displayName = "ShadcnButton";
 var buttonGroupVariants = classVarianceAuthority.cva(
-  "inline-flex",
+  "pd-inline-flex",
   {
     variants: {
       orientation: {
-        horizontal: "flex-row",
-        vertical: "flex-col"
+        horizontal: "pd-flex-row",
+        vertical: "pd-flex-col"
       },
       gap: {
-        sm: "gap-1",
-        md: "gap-2",
-        lg: "gap-3"
+        sm: "pd-gap-1",
+        md: "pd-gap-2",
+        lg: "pd-gap-3"
       },
       fullWidth: {
-        true: "w-full",
+        true: "pd-w-full",
         false: ""
       }
     },
@@ -532,6 +543,10 @@ var ButtonGroup = React.forwardRef(
   }
 );
 ButtonGroup.displayName = "ButtonGroup";
+function PdProvider({ children, theme = "light", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("pd-root", theme === "dark" && "pd-dark", className), children });
+}
+PdProvider.displayName = "PdProvider";
 
 // src/tokens/base.ts
 var neutral = {
@@ -833,7 +848,7 @@ var contentTokens = {
     onColor: neutral[950],
     alwaysWhite: neutral[100],
     alwaysBlack: neutral[950],
-    onColorInverse: neutral[200],
+    onColorInverse: neutral[100],
     blue: blue[400],
     blueDisabled: blue[800],
     blueOnHover: blue[500],
@@ -924,7 +939,7 @@ var semanticTokens = {
   content: contentTokens,
   background: backgroundTokens
 };
-var VARIANTS = ["primary", "secondary", "ghost", "outline"];
+var VARIANTS = ["primary", "secondary", "ghost", "destructive"];
 var INTENTS = ["primary", "success", "warning", "danger", "neutral"];
 var SIZES = ["sm", "md", "lg"];
 var BUTTON_TYPES = ["button", "submit", "reset"];
@@ -1357,6 +1372,7 @@ exports.DEFAULT_THEME = DEFAULT_THEME;
 exports.INPUT_TYPES = INPUT_TYPES;
 exports.INTENTS = INTENTS;
 exports.ORIENTATIONS = ORIENTATIONS;
+exports.PdProvider = PdProvider;
 exports.SIZES = SIZES;
 exports.SURFACE_LEVELS = SURFACE_LEVELS;
 exports.THEME_MODES = THEME_MODES;