@projectdiscoveryio/design-system 1.0.1 → 1.0.2

package/dist/index.cjs

@@ -144,7 +144,7 @@ function getAvailableIconNames() {
   );
 }
 var buttonVariants = classVarianceAuthority.cva(
-  "pd-inline-flex pd-items-center pd-justify-center pd-font-medium pd-transition-colors pd-focus-visible:outline-none pd-focus-visible:ring-2 pd-focus-visible:ring-[var(--pd-border-blue)] pd-focus-visible:ring-offset-2 pd-disabled:pointer-events-none pd-disabled:cursor-not-allowed pd-disabled:hover:pd-bg-[inherit] pd-disabled:hover:pd-text-[inherit] pd-disabled:hover:pd-border-[inherit] pd-disabled:active:pd-bg-[inherit] pd-disabled:active:pd-text-[inherit] pd-disabled:active:pd-border-[inherit] [font-family:var(--pd-font-sans,Geist,sans-serif)] [gap:var(--pd-button-gap)] [border-radius:var(--pd-radius-button)] pd-shadow-none",
+  "pd-inline-flex pd-items-center pd-justify-center pd-font-medium pd-transition-colors pd-focus-visible:outline-none pd-focus-visible:ring-2 pd-focus-visible:ring-[var(--pd-border-blue)] pd-focus-visible:ring-offset-2 pd-disabled:pointer-events-none pd-disabled:cursor-not-allowed pd-disabled:hover:pd-bg-[inherit] pd-disabled:hover:pd-text-[inherit] pd-disabled:hover:pd-border-[inherit] pd-disabled:active:pd-bg-[inherit] pd-disabled:active:pd-text-[inherit] pd-disabled:active:pd-border-[inherit] [font-family:var(--pd-font-sans,Geist,sans-serif)] [gap:var(--pd-button-gap)] [border-radius:var(--pd-radius-button)] [box-sizing:border-box] pd-shadow-none",
   {
     variants: {
       variant: {
@@ -161,9 +161,9 @@ var buttonVariants = classVarianceAuthority.cva(
         neutral: ""
       },
       size: {
-        sm: "[padding-top:var(--pd-button-padding-sm-vertical)] [padding-bottom:var(--pd-button-padding-sm-vertical)] [padding-left:var(--pd-button-padding-sm-horizontal)] [padding-right:var(--pd-button-padding-sm-horizontal)] pd-text-xs [line-height:var(--pd-button-line-height-sm)] [letter-spacing:var(--pd-button-letter-spacing)]",
-        md: "[padding-top:var(--pd-button-padding-md-vertical)] [padding-bottom:var(--pd-button-padding-md-vertical)] [padding-left:var(--pd-button-padding-md-horizontal)] [padding-right:var(--pd-button-padding-md-horizontal)] pd-text-xs [line-height:var(--pd-button-line-height-md)] [letter-spacing:var(--pd-button-letter-spacing)]",
-        lg: "[padding-top:var(--pd-button-padding-lg-vertical)] [padding-bottom:var(--pd-button-padding-lg-vertical)] [padding-left:var(--pd-button-padding-lg-horizontal)] [padding-right:var(--pd-button-padding-lg-horizontal)] pd-text-base [line-height:var(--pd-button-line-height-lg)] [letter-spacing:var(--pd-button-letter-spacing)]"
+        sm: "[height:var(--pd-button-height-sm)] [padding-top:var(--pd-button-padding-sm-vertical)] [padding-bottom:var(--pd-button-padding-sm-vertical)] [padding-left:var(--pd-button-padding-sm-horizontal)] [padding-right:var(--pd-button-padding-sm-horizontal)] pd-text-xs [line-height:var(--pd-button-line-height-sm)] [letter-spacing:var(--pd-button-letter-spacing)]",
+        md: "[height:var(--pd-button-height-md)] [padding-top:var(--pd-button-padding-md-vertical)] [padding-bottom:var(--pd-button-padding-md-vertical)] [padding-left:var(--pd-button-padding-md-horizontal)] [padding-right:var(--pd-button-padding-md-horizontal)] pd-text-xs [line-height:var(--pd-button-line-height-md)] [letter-spacing:var(--pd-button-letter-spacing)]",
+        lg: "[height:var(--pd-button-height-lg)] [padding-top:var(--pd-button-padding-lg-vertical)] [padding-bottom:var(--pd-button-padding-lg-vertical)] [padding-left:var(--pd-button-padding-lg-horizontal)] [padding-right:var(--pd-button-padding-lg-horizontal)] pd-text-base [line-height:var(--pd-button-line-height-lg)] [letter-spacing:var(--pd-button-letter-spacing)]"
       }
     },
     compoundVariants: [
@@ -359,8 +359,8 @@ function renderButtonContent({
   variant,
   intent
 }) {
-  const iconSizeClass = size === "sm" ? "pd-h-3 pd-w-3" : size === "lg" ? "pd-h-5 pd-w-5" : "pd-h-4 pd-w-4";
-  const spinnerSizeClass = size === "sm" ? "pd-h-3 pd-w-3" : size === "lg" ? "pd-h-5 pd-w-5" : "pd-h-4 pd-w-4";
+  const iconSizeClass = size === "sm" ? "pd-h-4 pd-w-4" : size === "lg" ? "pd-h-6 pd-w-6" : "pd-h-5 pd-w-5";
+  const spinnerSizeClass = size === "sm" ? "pd-h-4 pd-w-4" : size === "lg" ? "pd-h-6 pd-w-6" : "pd-h-5 pd-w-5";
   const getLoadingTextColor = () => {
     if (variant === "primary" && intent === "primary") {
       return "pd-text-[var(--pd-content-secondary)]";
@@ -719,33 +719,40 @@ var button = {
   padding: {
     sm: {
       vertical: "0.5em",
-      // 8px
-      horizontal: "0.75em"
-      // 12px
+      // 6px
+      horizontal: "1em"
+      // 12px 
     },
     md: {
-      vertical: "0.625em",
+      vertical: "0.8333em",
       // 10px 
-      horizontal: "1em"
+      horizontal: "1.3333em"
       // 16px 
     },
     lg: {
       vertical: "0.75em",
-      // 12px
-      horizontal: "1.25em"
-      // 20px
+      // 12px (0.75 × 16px font-size) - 44px height (12px top + 20px line-height + 12px bottom)
+      horizontal: "1.5em"
+      // 24px (1.5 × 16px font-size)
     }
   },
   gap: "0.5em",
-  // 8px - gap between icon and text 
+  // 8px (0.5 × 16px) - gap between icon and text 
   lineHeight: {
     sm: "1.333em",
+    // 16px for 12px font-size (1.333 × 12px = 16px)
     md: "1.333em",
     // 16px for 12px font-size (1.333 × 12px = 16px)
-    lg: "1.333em"
+    lg: "1.25em"
+    // 20px for 16px font-size (1.25 × 16px = 20px) - exact whole pixels 
   },
-  letterSpacing: "0.00833em"
+  letterSpacing: "0.00833em",
   // 0.1px for 12px font
+  height: {
+    sm: "28px",
+    md: "36px",
+    lg: "44px"
+  }
 };
 var semanticTokens = {
   light: {