@abhir9/pd-design-system 0.1.13 → 0.1.15

package/dist/index.css

@@ -1000,7 +1000,7 @@ button { font-family: inherit; font-size: inherit; }
   position: sticky;
 }
 .bottom-1 {
-  bottom: 0.1rem;
+  bottom: 0.25rem;
 }
 .left-1\/2 {
   left: 50%;
@@ -1010,37 +1010,31 @@ button { font-family: inherit; font-size: inherit; }
   margin-right: auto;
 }
 .mb-1 {
-  margin-bottom: 0.1rem;
+  margin-bottom: 0.25rem;
 }
 .mb-2 {
-  margin-bottom: 0.2rem;
+  margin-bottom: 0.5rem;
 }
 .mb-6 {
-  margin-bottom: 0.6rem;
+  margin-bottom: 1.5rem;
 }
-.ml-10 {
-  margin-left: 1rem;
-}
-.ml-12 {
-  margin-left: 1.2rem;
+.ml-1\.5 {
+  margin-left: 0.375rem;
 }
 .ml-2 {
-  margin-left: 0.2rem;
-}
-.ml-8 {
-  margin-left: 0.8rem;
+  margin-left: 0.5rem;
 }
-.mr-10 {
-  margin-right: 1rem;
+.ml-2\.5 {
+  margin-left: 0.625rem;
 }
-.mr-12 {
-  margin-right: 1.2rem;
+.mr-1\.5 {
+  margin-right: 0.375rem;
 }
 .mr-2 {
-  margin-right: 0.2rem;
+  margin-right: 0.5rem;
 }
-.mr-8 {
-  margin-right: 0.8rem;
+.mr-2\.5 {
+  margin-right: 0.625rem;
 }
 .inline {
   display: inline;
@@ -1061,40 +1055,31 @@ button { font-family: inherit; font-size: inherit; }
   display: none;
 }
 .h-10 {
-  height: 1rem;
+  height: 2.5rem;
 }
 .h-12 {
-  height: 1.2rem;
+  height: 3rem;
 }
 .h-16 {
-  height: 1.6rem;
+  height: 4rem;
 }
 .h-2 {
-  height: 0.2rem;
-}
-.h-20 {
-  height: 2rem;
+  height: 0.5rem;
 }
 .h-28 {
-  height: 2.8rem;
+  height: 7rem;
 }
 .h-3 {
-  height: 0.3rem;
-}
-.h-36 {
-  height: 3.6rem;
+  height: 0.75rem;
 }
 .h-4 {
-  height: 0.4rem;
-}
-.h-40 {
-  height: 4rem;
+  height: 1rem;
 }
 .h-5 {
-  height: 0.5rem;
+  height: 1.25rem;
 }
 .h-8 {
-  height: 0.8rem;
+  height: 2rem;
 }
 .min-h-\[100px\] {
   min-height: 100px;
@@ -1102,35 +1087,29 @@ button { font-family: inherit; font-size: inherit; }
 .min-h-screen {
   min-height: 100vh;
 }
-.w-12 {
-  width: 1.2rem;
-}
-.w-16 {
-  width: 1.6rem;
-}
 .w-2 {
-  width: 0.2rem;
+  width: 0.5rem;
 }
 .w-20 {
-  width: 2rem;
+  width: 5rem;
 }
 .w-24 {
-  width: 2.4rem;
+  width: 6rem;
 }
 .w-3 {
-  width: 0.3rem;
+  width: 0.75rem;
 }
 .w-4 {
-  width: 0.4rem;
+  width: 1rem;
 }
 .w-5 {
-  width: 0.5rem;
+  width: 1.25rem;
 }
 .w-full {
   width: 100%;
 }
 .min-w-0 {
-  min-width: 0.0rem;
+  min-width: 0px;
 }
 .max-w-3xl {
   max-width: 48rem;
@@ -1197,51 +1176,51 @@ button { font-family: inherit; font-size: inherit; }
   justify-content: center;
 }
 .gap-1 {
-  gap: 0.1rem;
+  gap: 0.25rem;
 }
 .gap-2 {
-  gap: 0.2rem;
+  gap: 0.5rem;
 }
 .gap-3 {
-  gap: 0.3rem;
+  gap: 0.75rem;
 }
 .gap-4 {
-  gap: 0.4rem;
+  gap: 1rem;
 }
 .gap-6 {
-  gap: 0.6rem;
+  gap: 1.5rem;
 }
 .gap-8 {
-  gap: 0.8rem;
+  gap: 2rem;
 }
 .gap-x-6 {
-  -moz-column-gap: 0.6rem;
-       column-gap: 0.6rem;
+  -moz-column-gap: 1.5rem;
+       column-gap: 1.5rem;
 }
 .space-y-10 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
 }
 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(0.3rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.3rem * var(--tw-space-y-reverse));
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(0.4rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.4rem * var(--tw-space-y-reverse));
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(0.6rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.6rem * var(--tw-space-y-reverse));
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
 .space-y-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(0.8rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.8rem * var(--tw-space-y-reverse));
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 .overflow-hidden {
   overflow: hidden;
@@ -1257,11 +1236,17 @@ button { font-family: inherit; font-size: inherit; }
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.rounded-full {
+  border-radius: 9999px;
+}
 .rounded-lg {
-  border-radius: 0.8rem;
+  border-radius: 0.5rem;
 }
 .rounded-md {
-  border-radius: 0.6rem;
+  border-radius: 0.375rem;
+}
+.rounded-xl {
+  border-radius: 0.75rem;
 }
 .border {
   border-width: 1px;
@@ -1296,12 +1281,6 @@ button { font-family: inherit; font-size: inherit; }
 .border-\[var\(--border-yellow-subtle\)\] {
   border-color: var(--border-yellow-subtle);
 }
-.border-\[var\(--pd-border-primary\)\] {
-  border-color: var(--pd-border-primary);
-}
-.border-\[var\(--pd-border-red\)\] {
-  border-color: var(--pd-border-red);
-}
 .bg-\[var\(--background-base\)\] {
   background-color: var(--background-base);
 }
@@ -1332,9 +1311,6 @@ button { font-family: inherit; font-size: inherit; }
 .bg-\[var\(--content-primary\)\] {
   background-color: var(--content-primary);
 }
-.bg-\[var\(--pd-background-base\)\] {
-  background-color: var(--pd-background-base);
-}
 .bg-blue-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
@@ -1344,45 +1320,41 @@ button { font-family: inherit; font-size: inherit; }
   background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
 }
 .p-12 {
-  padding: 1.2rem;
+  padding: 3rem;
 }
 .p-2 {
-  padding: 0.2rem;
+  padding: 0.5rem;
 }
 .p-4 {
-  padding: 0.4rem;
+  padding: 1rem;
 }
 .p-5 {
-  padding: 0.5rem;
+  padding: 1.25rem;
 }
 .p-6 {
-  padding: 0.6rem;
+  padding: 1.5rem;
 }
 .p-8 {
-  padding: 0.8rem;
+  padding: 2rem;
 }
 .px-1 {
-  padding-left: 0.1rem;
-  padding-right: 0.1rem;
-}
-.px-12 {
-  padding-left: 1.2rem;
-  padding-right: 1.2rem;
-}
-.px-16 {
-  padding-left: 1.6rem;
-  padding-right: 1.6rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 .px-3 {
-  padding-left: 0.3rem;
-  padding-right: 0.3rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
 }
-.px-32 {
-  padding-left: 3.2rem;
-  padding-right: 3.2rem;
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 }
 .pt-2 {
-  padding-top: 0.2rem;
+  padding-top: 0.5rem;
 }
 .text-center {
   text-align: center;
@@ -1391,13 +1363,16 @@ button { font-family: inherit; font-size: inherit; }
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 .text-2xl {
-  font-size: 18px;
+  font-size: 1.5rem;
+  line-height: 2rem;
 }
 .text-3xl {
-  font-size: 22px;
+  font-size: 1.875rem;
+  line-height: 2.25rem;
 }
 .text-4xl {
-  font-size: 32px;
+  font-size: 2.25rem;
+  line-height: 2.5rem;
 }
 .text-\[10px\] {
   font-size: 10px;
@@ -1406,16 +1381,24 @@ button { font-family: inherit; font-size: inherit; }
   font-size: 8px;
 }
 .text-base {
-  font-size: 13px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
 }
 .text-sm {
-  font-size: 12px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 .text-xl {
-  font-size: 14px;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
 }
 .text-xs {
-  font-size: 11px;
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 .font-bold {
   font-weight: 700;
@@ -1459,12 +1442,6 @@ button { font-family: inherit; font-size: inherit; }
 .text-\[var\(--content-yellow\)\] {
   color: var(--content-yellow);
 }
-.text-\[var\(--pd-content-primary\)\] {
-  color: var(--pd-content-primary);
-}
-.text-\[var\(--pd-content-red\)\] {
-  color: var(--pd-content-red);
-}
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
@@ -1527,8 +1504,6 @@ button { font-family: inherit; font-size: inherit; }
 .transition-all { transition: all 0.15s ease-in-out; }
 .transition-colors { transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; }
 /* Opacity helpers */
-/* Note: @tailwind utilities is required for @layer utilities to work, but won't generate utilities
-   since we don't use Tailwind utility classes in this CSS file. Consumer's Tailwind will generate utilities. */
 
 /* Non-color global defaults derived from consumer app (safe subset) */
 
@@ -1536,30 +1511,6 @@ button { font-family: inherit; font-size: inherit; }
 
 /* Component-friendly defaults (non-color) */
 
-.file\:border-0::file-selector-button {
-  border-width: 0px;
-}
-
-.file\:bg-transparent::file-selector-button {
-  background-color: transparent;
-}
-
-.file\:text-sm::file-selector-button {
-  font-size: 12px;
-}
-
-.file\:font-medium::file-selector-button {
-  font-weight: 500;
-}
-
-.placeholder\:text-\[var\(--pd-content-subtle\)\]::-moz-placeholder {
-  color: var(--pd-content-subtle);
-}
-
-.placeholder\:text-\[var\(--pd-content-subtle\)\]::placeholder {
-  color: var(--pd-content-subtle);
-}
-
 .hover\:border-\[var\(--border-green-on-hover\)\]:hover {
   border-color: var(--border-green-on-hover);
 }
@@ -1644,14 +1595,6 @@ button { font-family: inherit; font-size: inherit; }
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.focus-visible\:border-\[var\(--pd-border-blueOnHover\)\]:focus-visible {
-  border-color: var(--pd-border-blueOnHover);
-}
-
-.focus-visible\:border-\[var\(--pd-border-redOnHover\)\]:focus-visible {
-  border-color: var(--pd-border-redOnHover);
-}
-
 .focus-visible\:outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1667,14 +1610,6 @@ button { font-family: inherit; font-size: inherit; }
   --tw-ring-color: var(--border-blue);
 }
 
-.focus-visible\:ring-\[var\(--pd-border-blue\)\]:focus-visible {
-  --tw-ring-color: var(--pd-border-blue);
-}
-
-.focus-visible\:ring-\[var\(--pd-border-red\)\]:focus-visible {
-  --tw-ring-color: var(--pd-border-red);
-}
-
 .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
@@ -1707,10 +1642,6 @@ button { font-family: inherit; font-size: inherit; }
   pointer-events: none;
 }
 
-.disabled\:cursor-not-allowed:disabled {
-  cursor: not-allowed;
-}
-
 .disabled\:border-\[var\(--border-subtle\)\]:disabled {
   border-color: var(--border-subtle);
 }
@@ -1731,10 +1662,6 @@ button { font-family: inherit; font-size: inherit; }
   color: var(--content-subtle);
 }
 
-.disabled\:text-\[var\(--pd-content-subtle\)\]:disabled {
-  color: var(--pd-content-subtle);
-}
-
 .disabled\:opacity-50:disabled { opacity: 0.5;
 }
 

package/dist/index.js

@@ -137,9 +137,9 @@ var buttonVariants = cva(
         neutral: ""
       },
       size: {
-        sm: "h-28 px-12 text-xs",
-        md: "h-36 px-16 text-base",
-        lg: "h-40 px-32 text-2xl"
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-base",
+        lg: "h-12 px-6 text-lg"
       }
     },
     compoundVariants: [
@@ -323,10 +323,10 @@ function renderButtonContent({
   children,
   size
 }) {
-  const iconSizeClass = size === "sm" ? "h-12 w-12" : size === "lg" ? "h-20 w-20" : "h-16 w-16";
-  const spinnerSizeClass = size === "sm" ? "h-12 w-12" : size === "lg" ? "h-20 w-20" : "h-16 w-16";
-  const iconSpacing = size === "sm" ? "mr-8" : size === "lg" ? "mr-12" : "mr-10";
-  const iconSpacingEnd = size === "sm" ? "ml-8" : size === "lg" ? "ml-12" : "ml-10";
+  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__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(