@abhir9/pd-design-system 0.1.18 → 0.1.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +71 -12
  2. package/dist/index.cjs +86 -70
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +1098 -429
  5. package/dist/index.d.cts +29 -6
  6. package/dist/index.d.ts +29 -6
  7. package/dist/index.js +86 -71
  8. package/dist/index.js.map +1 -1
  9. package/dist/styles.css +1061 -417
  10. package/package.json +5 -2
package/dist/index.d.cts CHANGED
@@ -88,7 +88,7 @@ declare const contentTokens: {
88
88
  readonly onColor: "#09090B";
89
89
  readonly alwaysWhite: "#FFFFFF";
90
90
  readonly alwaysBlack: "#09090B";
91
- readonly onColorInverse: "#EDEDED";
91
+ readonly onColorInverse: "#FFFFFF";
92
92
  readonly blue: "#709AFF";
93
93
  readonly blueDisabled: "#002680";
94
94
  readonly blueOnHover: "#3772FF";
@@ -232,7 +232,7 @@ declare const semanticTokens: {
232
232
  readonly onColor: "#09090B";
233
233
  readonly alwaysWhite: "#FFFFFF";
234
234
  readonly alwaysBlack: "#09090B";
235
- readonly onColorInverse: "#EDEDED";
235
+ readonly onColorInverse: "#FFFFFF";
236
236
  readonly blue: "#709AFF";
237
237
  readonly blueDisabled: "#002680";
238
238
  readonly blueOnHover: "#3772FF";
@@ -319,7 +319,7 @@ declare const semanticTokens: {
319
319
  };
320
320
  };
321
321
  };
322
- declare const VARIANTS: readonly ["primary", "secondary", "ghost", "outline"];
322
+ declare const VARIANTS: readonly ["primary", "secondary", "ghost", "destructive"];
323
323
  declare const INTENTS: readonly ["primary", "success", "warning", "danger", "neutral"];
324
324
  declare const SIZES: readonly ["sm", "md", "lg"];
325
325
  declare const BUTTON_TYPES: readonly ["button", "submit", "reset"];
@@ -393,6 +393,29 @@ interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'c
393
393
  }
394
394
  declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
395
395
 
396
+ type PdProviderProps = {
397
+ children: React.ReactNode;
398
+ theme?: 'light' | 'dark';
399
+ className?: string;
400
+ };
401
+ /**
402
+ * PdProvider - Root provider for PD Design System
403
+ *
404
+ * This component creates a scoped boundary for all design system styles.
405
+ * All tokens are scoped under .pd-root to prevent style leakage.
406
+ *
407
+ * @example
408
+ * ```tsx
409
+ * <PdProvider theme="light">
410
+ * <Button>Click me</Button>
411
+ * </PdProvider>
412
+ * ```
413
+ */
414
+ declare function PdProvider({ children, theme, className }: PdProviderProps): react_jsx_runtime.JSX.Element;
415
+ declare namespace PdProvider {
416
+ var displayName: string;
417
+ }
418
+
396
419
  /**
397
420
  * Resolves 'system' mode to either 'light' or 'dark' based on OS preference
398
421
  * Falls back to 'light' if matchMedia is not available (SSR)
@@ -997,7 +1020,7 @@ declare const tokens: {
997
1020
  readonly onColor: "#09090B";
998
1021
  readonly alwaysWhite: "#FFFFFF";
999
1022
  readonly alwaysBlack: "#09090B";
1000
- readonly onColorInverse: "#EDEDED";
1023
+ readonly onColorInverse: "#FFFFFF";
1001
1024
  readonly blue: "#709AFF";
1002
1025
  readonly blueDisabled: "#002680";
1003
1026
  readonly blueOnHover: "#3772FF";
@@ -1138,7 +1161,7 @@ declare const tokens: {
1138
1161
  readonly onColor: "#09090B";
1139
1162
  readonly alwaysWhite: "#FFFFFF";
1140
1163
  readonly alwaysBlack: "#09090B";
1141
- readonly onColorInverse: "#EDEDED";
1164
+ readonly onColorInverse: "#FFFFFF";
1142
1165
  readonly blue: "#709AFF";
1143
1166
  readonly blueDisabled: "#002680";
1144
1167
  readonly blueOnHover: "#3772FF";
@@ -1482,4 +1505,4 @@ declare function validateAccessibilityProps(props: AccessibilityProps, component
1482
1505
  iconOnly?: boolean;
1483
1506
  }): void;
1484
1507
 
1485
- export { ADAPTER_TYPES, type AccessibilityProps, type AdapterType, BUTTON_TYPES, type BackgroundToken, type BorderToken, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonType, COLOR_SCALES, type ColorName, type ColorPrimitives, type ColorScale, type Colors, type ContentToken, DEFAULT_ADAPTER, DEFAULT_MODE, DEFAULT_THEME, type DesignSystemConfig, INPUT_TYPES, INTENTS, type InputType, type Intent, type LucideIconName, ORIENTATIONS, type Orientation, type Radius, SIZES, SURFACE_LEVELS, type SemanticToken, type SemanticTokens, type Shadows, type Size, type Spacing, type SurfaceLevel, THEME_MODES, THEME_NAMES, type Theme, type ThemeMode, type ThemeName, ThemeProvider, type ThemeProviderProps, type Tokens, type Typography, VARIANTS, type Variant, type ZIndex, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, resolveThemeMode, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };
1508
+ export { ADAPTER_TYPES, type AccessibilityProps, type AdapterType, BUTTON_TYPES, type BackgroundToken, type BorderToken, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonType, COLOR_SCALES, type ColorName, type ColorPrimitives, type ColorScale, type Colors, type ContentToken, DEFAULT_ADAPTER, DEFAULT_MODE, DEFAULT_THEME, type DesignSystemConfig, INPUT_TYPES, INTENTS, type InputType, type Intent, type LucideIconName, ORIENTATIONS, type Orientation, PdProvider, type PdProviderProps, type Radius, SIZES, SURFACE_LEVELS, type SemanticToken, type SemanticTokens, type Shadows, type Size, type Spacing, type SurfaceLevel, THEME_MODES, THEME_NAMES, type Theme, type ThemeMode, type ThemeName, ThemeProvider, type ThemeProviderProps, type Tokens, type Typography, VARIANTS, type Variant, type ZIndex, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, resolveThemeMode, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };
package/dist/index.d.ts CHANGED
@@ -88,7 +88,7 @@ declare const contentTokens: {
88
88
  readonly onColor: "#09090B";
89
89
  readonly alwaysWhite: "#FFFFFF";
90
90
  readonly alwaysBlack: "#09090B";
91
- readonly onColorInverse: "#EDEDED";
91
+ readonly onColorInverse: "#FFFFFF";
92
92
  readonly blue: "#709AFF";
93
93
  readonly blueDisabled: "#002680";
94
94
  readonly blueOnHover: "#3772FF";
@@ -232,7 +232,7 @@ declare const semanticTokens: {
232
232
  readonly onColor: "#09090B";
233
233
  readonly alwaysWhite: "#FFFFFF";
234
234
  readonly alwaysBlack: "#09090B";
235
- readonly onColorInverse: "#EDEDED";
235
+ readonly onColorInverse: "#FFFFFF";
236
236
  readonly blue: "#709AFF";
237
237
  readonly blueDisabled: "#002680";
238
238
  readonly blueOnHover: "#3772FF";
@@ -319,7 +319,7 @@ declare const semanticTokens: {
319
319
  };
320
320
  };
321
321
  };
322
- declare const VARIANTS: readonly ["primary", "secondary", "ghost", "outline"];
322
+ declare const VARIANTS: readonly ["primary", "secondary", "ghost", "destructive"];
323
323
  declare const INTENTS: readonly ["primary", "success", "warning", "danger", "neutral"];
324
324
  declare const SIZES: readonly ["sm", "md", "lg"];
325
325
  declare const BUTTON_TYPES: readonly ["button", "submit", "reset"];
@@ -393,6 +393,29 @@ interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'c
393
393
  }
394
394
  declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
395
395
 
396
+ type PdProviderProps = {
397
+ children: React.ReactNode;
398
+ theme?: 'light' | 'dark';
399
+ className?: string;
400
+ };
401
+ /**
402
+ * PdProvider - Root provider for PD Design System
403
+ *
404
+ * This component creates a scoped boundary for all design system styles.
405
+ * All tokens are scoped under .pd-root to prevent style leakage.
406
+ *
407
+ * @example
408
+ * ```tsx
409
+ * <PdProvider theme="light">
410
+ * <Button>Click me</Button>
411
+ * </PdProvider>
412
+ * ```
413
+ */
414
+ declare function PdProvider({ children, theme, className }: PdProviderProps): react_jsx_runtime.JSX.Element;
415
+ declare namespace PdProvider {
416
+ var displayName: string;
417
+ }
418
+
396
419
  /**
397
420
  * Resolves 'system' mode to either 'light' or 'dark' based on OS preference
398
421
  * Falls back to 'light' if matchMedia is not available (SSR)
@@ -997,7 +1020,7 @@ declare const tokens: {
997
1020
  readonly onColor: "#09090B";
998
1021
  readonly alwaysWhite: "#FFFFFF";
999
1022
  readonly alwaysBlack: "#09090B";
1000
- readonly onColorInverse: "#EDEDED";
1023
+ readonly onColorInverse: "#FFFFFF";
1001
1024
  readonly blue: "#709AFF";
1002
1025
  readonly blueDisabled: "#002680";
1003
1026
  readonly blueOnHover: "#3772FF";
@@ -1138,7 +1161,7 @@ declare const tokens: {
1138
1161
  readonly onColor: "#09090B";
1139
1162
  readonly alwaysWhite: "#FFFFFF";
1140
1163
  readonly alwaysBlack: "#09090B";
1141
- readonly onColorInverse: "#EDEDED";
1164
+ readonly onColorInverse: "#FFFFFF";
1142
1165
  readonly blue: "#709AFF";
1143
1166
  readonly blueDisabled: "#002680";
1144
1167
  readonly blueOnHover: "#3772FF";
@@ -1482,4 +1505,4 @@ declare function validateAccessibilityProps(props: AccessibilityProps, component
1482
1505
  iconOnly?: boolean;
1483
1506
  }): void;
1484
1507
 
1485
- export { ADAPTER_TYPES, type AccessibilityProps, type AdapterType, BUTTON_TYPES, type BackgroundToken, type BorderToken, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonType, COLOR_SCALES, type ColorName, type ColorPrimitives, type ColorScale, type Colors, type ContentToken, DEFAULT_ADAPTER, DEFAULT_MODE, DEFAULT_THEME, type DesignSystemConfig, INPUT_TYPES, INTENTS, type InputType, type Intent, type LucideIconName, ORIENTATIONS, type Orientation, type Radius, SIZES, SURFACE_LEVELS, type SemanticToken, type SemanticTokens, type Shadows, type Size, type Spacing, type SurfaceLevel, THEME_MODES, THEME_NAMES, type Theme, type ThemeMode, type ThemeName, ThemeProvider, type ThemeProviderProps, type Tokens, type Typography, VARIANTS, type Variant, type ZIndex, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, resolveThemeMode, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };
1508
+ export { ADAPTER_TYPES, type AccessibilityProps, type AdapterType, BUTTON_TYPES, type BackgroundToken, type BorderToken, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonType, COLOR_SCALES, type ColorName, type ColorPrimitives, type ColorScale, type Colors, type ContentToken, DEFAULT_ADAPTER, DEFAULT_MODE, DEFAULT_THEME, type DesignSystemConfig, INPUT_TYPES, INTENTS, type InputType, type Intent, type LucideIconName, ORIENTATIONS, type Orientation, PdProvider, type PdProviderProps, type Radius, SIZES, SURFACE_LEVELS, type SemanticToken, type SemanticTokens, type Shadows, type Size, type Spacing, type SurfaceLevel, THEME_MODES, THEME_NAMES, type Theme, type ThemeMode, type ThemeName, ThemeProvider, type ThemeProviderProps, type Tokens, type Typography, VARIANTS, type Variant, type ZIndex, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, resolveThemeMode, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };
package/dist/index.js CHANGED
@@ -120,14 +120,14 @@ function getAvailableIconNames() {
120
120
  );
121
121
  }
122
122
  var buttonVariants = cva(
123
- "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",
123
+ "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",
124
124
  {
125
125
  variants: {
126
126
  variant: {
127
- primary: "",
128
- secondary: "",
129
- ghost: "",
130
- outline: "border"
127
+ primary: "pd-border-0",
128
+ secondary: "pd-border",
129
+ ghost: "pd-border-0",
130
+ destructive: "pd-border-0"
131
131
  },
132
132
  intent: {
133
133
  primary: "",
@@ -137,9 +137,9 @@ var buttonVariants = cva(
137
137
  neutral: ""
138
138
  },
139
139
  size: {
140
- sm: "h-8 px-3 text-sm",
141
- md: "h-10 px-4 text-base",
142
- lg: "h-12 px-6 text-lg"
140
+ sm: "pd-h-8 pd-px-3 pd-text-sm",
141
+ md: "pd-h-10 pd-px-4 pd-text-base",
142
+ lg: "pd-h-12 pd-px-6 pd-text-lg"
143
143
  }
144
144
  },
145
145
  compoundVariants: [
@@ -147,105 +147,85 @@ var buttonVariants = cva(
147
147
  {
148
148
  variant: "primary",
149
149
  intent: "primary",
150
- 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)]"
150
+ 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)]"
151
151
  },
152
152
  {
153
153
  variant: "primary",
154
154
  intent: "success",
155
- 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)]"
155
+ 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)]"
156
156
  },
157
157
  {
158
158
  variant: "primary",
159
159
  intent: "warning",
160
- 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)]"
160
+ 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)]"
161
161
  },
162
162
  {
163
163
  variant: "primary",
164
164
  intent: "danger",
165
- 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)]"
165
+ 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)]"
166
166
  },
167
167
  {
168
168
  variant: "primary",
169
169
  intent: "neutral",
170
- 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)]"
170
+ 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)]"
171
171
  },
172
- // Secondary variant - using new semantic tokens
172
+ // Secondary variant - White bg default, always has light grey border
173
173
  {
174
174
  variant: "secondary",
175
175
  intent: "primary",
176
- 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)]"
176
+ 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)]"
177
177
  },
178
178
  {
179
179
  variant: "secondary",
180
180
  intent: "success",
181
- 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)]"
181
+ 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)]"
182
182
  },
183
183
  {
184
184
  variant: "secondary",
185
185
  intent: "warning",
186
- 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)]"
186
+ 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)]"
187
187
  },
188
188
  {
189
189
  variant: "secondary",
190
190
  intent: "danger",
191
- 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)]"
191
+ 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)]"
192
192
  },
193
193
  {
194
194
  variant: "secondary",
195
195
  intent: "neutral",
196
- 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)]"
196
+ 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)]"
197
197
  },
198
- // Ghost variant - using new semantic tokens
198
+ // Ghost variant - Transparent default, light grey fill on hover/pressed/loading
199
199
  {
200
200
  variant: "ghost",
201
201
  intent: "primary",
202
- class: "text-[var(--content-primary)] hover:bg-[var(--background-low)] hover:text-[var(--content-primary)] disabled:text-[var(--content-subtle)]"
202
+ 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)]"
203
203
  },
204
204
  {
205
205
  variant: "ghost",
206
206
  intent: "success",
207
- class: "hover:bg-[var(--background-green)] text-[var(--content-green)] hover:text-[var(--content-green-on-hover)]"
207
+ 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)]"
208
208
  },
209
209
  {
210
210
  variant: "ghost",
211
211
  intent: "warning",
212
- class: "hover:bg-[var(--background-yellow)] text-[var(--content-yellow)] hover:text-[var(--content-yellow-on-hover)]"
212
+ 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)]"
213
213
  },
214
214
  {
215
215
  variant: "ghost",
216
216
  intent: "danger",
217
- class: "text-[var(--content-red)] hover:bg-[var(--background-red)] hover:text-[var(--content-red-on-hover)]"
217
+ 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)]"
218
218
  },
219
219
  {
220
220
  variant: "ghost",
221
221
  intent: "neutral",
222
- class: "hover:bg-[var(--background-low)] text-[var(--content-secondary)] hover:text-[var(--content-primary)]"
222
+ class: "pd-border-0 pd-bg-transparent pd-text-[var(--pd-intent-neutral-text)] hover:pd-text-[var(--pd-intent-neutral-hover)]"
223
223
  },
224
- // Outline variant - using new semantic tokens
224
+ // Destructive variant - Red text, light red/pink background, different on hover/active/disabled
225
225
  {
226
- variant: "outline",
226
+ variant: "destructive",
227
227
  intent: "primary",
228
- class: "border-[var(--border-primary)] text-[var(--content-primary)] hover:bg-[var(--background-low)] hover:border-[var(--border-secondary)]"
229
- },
230
- {
231
- variant: "outline",
232
- intent: "success",
233
- class: "border-[var(--border-green)] text-[var(--content-green)] hover:bg-[var(--background-green)] hover:border-[var(--border-green-on-hover)]"
234
- },
235
- {
236
- variant: "outline",
237
- intent: "warning",
238
- class: "border-[var(--border-yellow)] text-[var(--content-yellow)] hover:bg-[var(--background-yellow)] hover:border-[var(--border-yellow-on-hover)]"
239
- },
240
- {
241
- variant: "outline",
242
- intent: "danger",
243
- 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)]"
244
- },
245
- {
246
- variant: "outline",
247
- intent: "neutral",
248
- class: "border-[var(--border-primary)] text-[var(--content-primary)] hover:bg-[var(--background-low)] hover:border-[var(--border-secondary)]"
228
+ 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)]"
249
229
  }
250
230
  ],
251
231
  defaultVariants: {
@@ -274,7 +254,17 @@ var ShadcnButton = forwardRef(
274
254
  }, ref) => {
275
255
  const buttonClasses = cn(
276
256
  buttonVariants({ variant, intent, size }),
277
- fullWidth && "w-full"
257
+ fullWidth && "pd-w-full",
258
+ // Loading states - light mode (apply to all intents for secondary and ghost)
259
+ loading && variant === "primary" && intent === "primary" && "pd-bg-[var(--pd-background-tertiary)] pd-text-[var(--pd-content-secondary)]",
260
+ loading && variant === "secondary" && "pd-bg-[var(--pd-background-tertiary)] pd-text-[var(--pd-content-secondary)] pd-border-[var(--pd-border-secondary)]",
261
+ loading && variant === "ghost" && "!pd-bg-[var(--pd-background-tertiary)] pd-text-[var(--pd-content-secondary)]",
262
+ loading && variant === "destructive" && "pd-bg-[var(--pd-background-red)] pd-text-[var(--pd-content-red)]",
263
+ // Disabled states - consistent across all variants (no hover/active changes)
264
+ disabled && variant === "primary" && "pd-bg-[var(--pd-background-tertiary)] pd-text-[var(--pd-content-subtle)]",
265
+ disabled && variant === "secondary" && "pd-bg-[var(--pd-background-tertiary)] pd-text-[var(--pd-content-subtle)] pd-border-[var(--pd-border-secondary)]",
266
+ disabled && variant === "ghost" && "pd-bg-transparent pd-text-[var(--pd-content-subtle)]",
267
+ disabled && variant === "destructive" && "pd-bg-transparent pd-text-[var(--pd-content-subtle)]"
278
268
  );
279
269
  if (href) {
280
270
  return /* @__PURE__ */ jsx(
@@ -291,7 +281,7 @@ var ShadcnButton = forwardRef(
291
281
  className: buttonClasses,
292
282
  "aria-disabled": disabled || loading,
293
283
  style: { pointerEvents: disabled || loading ? "none" : void 0 },
294
- children: renderButtonContent({ loading, loadingText, startIcon, endIcon, children, size })
284
+ children: renderButtonContent({ loading, loadingText, startIcon, endIcon, children, size, variant, intent })
295
285
  }
296
286
  )
297
287
  }
@@ -305,7 +295,7 @@ var ShadcnButton = forwardRef(
305
295
  className: buttonClasses,
306
296
  asChild,
307
297
  ...props,
308
- children: renderButtonContent({ loading, loadingText, startIcon, endIcon, children, size })
298
+ children: renderButtonContent({ loading, loadingText, startIcon, endIcon, children, size, variant, intent })
309
299
  }
310
300
  );
311
301
  }
@@ -316,23 +306,44 @@ function renderButtonContent({
316
306
  startIcon,
317
307
  endIcon,
318
308
  children,
319
- size
309
+ size,
310
+ variant,
311
+ intent
320
312
  }) {
321
- const iconSizeClass = size === "sm" ? "h-3 w-3" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
322
- const spinnerSizeClass = size === "sm" ? "h-3 w-3" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
323
- const iconSpacing = size === "sm" ? "mr-1.5" : size === "lg" ? "mr-2.5" : "mr-2";
324
- const iconSpacingEnd = size === "sm" ? "ml-1.5" : size === "lg" ? "ml-2.5" : "ml-2";
313
+ const iconSizeClass = size === "sm" ? "pd-h-3 pd-w-3" : size === "lg" ? "pd-h-5 pd-w-5" : "pd-h-4 pd-w-4";
314
+ const spinnerSizeClass = size === "sm" ? "pd-h-3 pd-w-3" : size === "lg" ? "pd-h-5 pd-w-5" : "pd-h-4 pd-w-4";
315
+ const iconSpacing = size === "sm" ? "pd-mr-1.5" : size === "lg" ? "pd-mr-2.5" : "pd-mr-2";
316
+ const iconSpacingEnd = size === "sm" ? "pd-ml-1.5" : size === "lg" ? "pd-ml-2.5" : "pd-ml-2";
317
+ const getLoadingTextColor = () => {
318
+ if (variant === "primary" && intent === "primary") {
319
+ return "pd-text-[var(--pd-content-secondary)]";
320
+ }
321
+ if (variant === "primary" && intent === "danger") {
322
+ return "pd-text-[var(--pd-destructive-foreground)]";
323
+ }
324
+ if (variant === "secondary" && intent === "primary") {
325
+ return "pd-text-[var(--pd-content-secondary)]";
326
+ }
327
+ if (variant === "ghost" && intent === "primary") {
328
+ return "pd-text-[var(--pd-content-secondary)]";
329
+ }
330
+ if (variant === "destructive") {
331
+ return "pd-text-[var(--pd-content-red)]";
332
+ }
333
+ return "pd-text-[var(--pd-content-secondary)]";
334
+ };
335
+ const loadingTextColor = getLoadingTextColor();
325
336
  if (loading) {
326
337
  return /* @__PURE__ */ jsxs(Fragment, { children: [
327
338
  /* @__PURE__ */ jsx(
328
339
  Loader2,
329
340
  {
330
341
  "aria-hidden": "true",
331
- className: `${spinnerSizeClass} ${iconSpacing} animate-spin text-[var(--content-secondary)]`
342
+ className: `${spinnerSizeClass} ${iconSpacing} pd-animate-spin ${loadingTextColor}`
332
343
  }
333
344
  ),
334
- /* @__PURE__ */ jsx("span", { className: "text-[var(--content-secondary)]", children: loadingText || children }),
335
- /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText ? `Loading: ${loadingText}` : "Loading" })
345
+ /* @__PURE__ */ jsx("span", { className: loadingTextColor, children: loadingText || children }),
346
+ /* @__PURE__ */ jsx("span", { className: "pd-sr-only", children: loadingText ? `Loading: ${loadingText}` : "Loading" })
336
347
  ] });
337
348
  }
338
349
  const StartIconComponent = startIcon ? getIcon(startIcon) : null;
@@ -341,27 +352,27 @@ function renderButtonContent({
341
352
  const startIconSpacing = hasChildren ? iconSpacing : "";
342
353
  const endIconSpacing = hasChildren ? iconSpacingEnd : "";
343
354
  return /* @__PURE__ */ jsxs(Fragment, { children: [
344
- StartIconComponent && /* @__PURE__ */ jsx("span", { className: `${startIconSpacing} inline-flex items-center justify-center`, children: React.createElement(StartIconComponent, { className: iconSizeClass }) }),
355
+ StartIconComponent && /* @__PURE__ */ jsx("span", { className: `${startIconSpacing} pd-inline-flex pd-items-center pd-justify-center`, children: React.createElement(StartIconComponent, { className: iconSizeClass }) }),
345
356
  children,
346
- EndIconComponent && /* @__PURE__ */ jsx("span", { className: `${endIconSpacing} inline-flex items-center justify-center`, children: React.createElement(EndIconComponent, { className: iconSizeClass }) })
357
+ EndIconComponent && /* @__PURE__ */ jsx("span", { className: `${endIconSpacing} pd-inline-flex pd-items-center pd-justify-center`, children: React.createElement(EndIconComponent, { className: iconSizeClass }) })
347
358
  ] });
348
359
  }
349
360
  ShadcnButton.displayName = "ShadcnButton";
350
361
  var buttonGroupVariants = cva(
351
- "inline-flex",
362
+ "pd-inline-flex",
352
363
  {
353
364
  variants: {
354
365
  orientation: {
355
- horizontal: "flex-row",
356
- vertical: "flex-col"
366
+ horizontal: "pd-flex-row",
367
+ vertical: "pd-flex-col"
357
368
  },
358
369
  gap: {
359
- sm: "gap-1",
360
- md: "gap-2",
361
- lg: "gap-3"
370
+ sm: "pd-gap-1",
371
+ md: "pd-gap-2",
372
+ lg: "pd-gap-3"
362
373
  },
363
374
  fullWidth: {
364
- true: "w-full",
375
+ true: "pd-w-full",
365
376
  false: ""
366
377
  }
367
378
  },
@@ -508,6 +519,10 @@ var ButtonGroup = forwardRef(
508
519
  }
509
520
  );
510
521
  ButtonGroup.displayName = "ButtonGroup";
522
+ function PdProvider({ children, theme = "light", className }) {
523
+ return /* @__PURE__ */ jsx("div", { className: clsx("pd-root", theme === "dark" && "pd-dark", className), children });
524
+ }
525
+ PdProvider.displayName = "PdProvider";
511
526
 
512
527
  // src/tokens/base.ts
513
528
  var neutral = {
@@ -809,7 +824,7 @@ var contentTokens = {
809
824
  onColor: neutral[950],
810
825
  alwaysWhite: neutral[100],
811
826
  alwaysBlack: neutral[950],
812
- onColorInverse: neutral[200],
827
+ onColorInverse: neutral[100],
813
828
  blue: blue[400],
814
829
  blueDisabled: blue[800],
815
830
  blueOnHover: blue[500],
@@ -900,7 +915,7 @@ var semanticTokens = {
900
915
  content: contentTokens,
901
916
  background: backgroundTokens
902
917
  };
903
- var VARIANTS = ["primary", "secondary", "ghost", "outline"];
918
+ var VARIANTS = ["primary", "secondary", "ghost", "destructive"];
904
919
  var INTENTS = ["primary", "success", "warning", "danger", "neutral"];
905
920
  var SIZES = ["sm", "md", "lg"];
906
921
  var BUTTON_TYPES = ["button", "submit", "reset"];
@@ -1322,6 +1337,6 @@ function validateAccessibilityProps(props, componentType, options = {}) {
1322
1337
  warnings.forEach((warning) => console.warn(warning));
1323
1338
  }
1324
1339
 
1325
- export { ADAPTER_TYPES, BUTTON_TYPES, Button, ButtonGroup, COLOR_SCALES, DEFAULT_ADAPTER, DEFAULT_MODE, DEFAULT_THEME, INPUT_TYPES, INTENTS, ORIENTATIONS, SIZES, SURFACE_LEVELS, THEME_MODES, THEME_NAMES, ThemeProvider, VARIANTS, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, resolveThemeMode, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };
1340
+ export { ADAPTER_TYPES, BUTTON_TYPES, Button, ButtonGroup, COLOR_SCALES, DEFAULT_ADAPTER, DEFAULT_MODE, DEFAULT_THEME, INPUT_TYPES, INTENTS, ORIENTATIONS, PdProvider, SIZES, SURFACE_LEVELS, THEME_MODES, THEME_NAMES, ThemeProvider, VARIANTS, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, resolveThemeMode, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };
1326
1341
  //# sourceMappingURL=index.js.map
1327
1342
  //# sourceMappingURL=index.js.map