@projectdiscoveryio/design-system 1.0.0 → 1.0.2

package/dist/styles.css

@@ -91,15 +91,18 @@
   --pd-z-sticky: 1020;
   --pd-z-tooltip: 1070;
   --pd-button-gap: 0.5em;
+  --pd-button-height-lg: 44px;
+  --pd-button-height-md: 36px;
+  --pd-button-height-sm: 28px;
   --pd-button-letter-spacing: 0.00833em;
-  --pd-button-line-height-lg: 1.333em;
+  --pd-button-line-height-lg: 1.25em;
   --pd-button-line-height-md: 1.333em;
   --pd-button-line-height-sm: 1.333em;
-  --pd-button-padding-lg-horizontal: 1.25em;
+  --pd-button-padding-lg-horizontal: 1.5em;
   --pd-button-padding-lg-vertical: 0.75em;
-  --pd-button-padding-md-horizontal: 1em;
-  --pd-button-padding-md-vertical: 0.625em;
-  --pd-button-padding-sm-horizontal: 0.75em;
+  --pd-button-padding-md-horizontal: 1.3333em;
+  --pd-button-padding-md-vertical: 0.8333em;
+  --pd-button-padding-sm-horizontal: 1em;
   --pd-button-padding-sm-vertical: 0.5em;
   --pd-background-base: #FFFFFF;
   --pd-background-green-on-hover: #BDFFD5;
@@ -774,18 +777,31 @@ html body.pd-root,
   white-space: nowrap;
   border-width: 0;
 }
+.pd-pointer-events-none {
+  pointer-events: none;
+}
 .pd-absolute {
   position: absolute;
 }
 .pd-relative {
   position: relative;
 }
+.pd-inset-y-0 {
+  top: 0em;
+  bottom: 0em;
+}
 .pd-bottom-1 {
   bottom: 0.25em;
 }
+.pd-left-0 {
+  left: 0em;
+}
 .pd-left-1\/2 {
   left: 50%;
 }
+.pd-right-0 {
+  right: 0em;
+}
 .pd-m-0 {
   margin: 0em;
 }
@@ -793,9 +809,21 @@ html body.pd-root,
   margin-left: auto;
   margin-right: auto;
 }
+.pd-mb-10 {
+  margin-bottom: 2.5em;
+}
 .pd-mb-2 {
   margin-bottom: 0.5em;
 }
+.pd-mb-4 {
+  margin-bottom: 1em;
+}
+.pd-mb-6 {
+  margin-bottom: 1.5em;
+}
+.pd-mb-8 {
+  margin-bottom: 2em;
+}
 .pd-ml-2 {
   margin-left: 0.5em;
 }
@@ -805,6 +833,9 @@ html body.pd-root,
 .pd-mt-2 {
   margin-top: 0.5em;
 }
+.pd-block {
+  display: block;
+}
 .pd-flex {
   display: flex;
 }
@@ -826,6 +857,9 @@ html body.pd-root,
 .pd-h-5 {
   height: 1.25em;
 }
+.pd-h-6 {
+  height: 1.5em;
+}
 .pd-h-8 {
   height: 2em;
 }
@@ -835,6 +869,9 @@ html body.pd-root,
 .pd-min-h-screen {
   min-height: 100vh;
 }
+.pd-w-1 {
+  width: 0.25em;
+}
 .pd-w-3 {
   width: 0.75em;
 }
@@ -844,15 +881,39 @@ html body.pd-root,
 .pd-w-5 {
   width: 1.25em;
 }
+.pd-w-6 {
+  width: 1.5em;
+}
+.pd-w-\[20\%\] {
+  width: 20%;
+}
+.pd-w-\[25\%\] {
+  width: 25%;
+}
+.pd-w-\[35\%\] {
+  width: 35%;
+}
+.pd-w-\[40\%\] {
+  width: 40%;
+}
 .pd-w-full {
   width: 100%;
 }
+.pd-max-w-2xl {
+  max-width: 42rem;
+}
+.pd-max-w-6xl {
+  max-width: 72rem;
+}
 .pd-max-w-\[1400px\] {
   max-width: 1400px;
 }
 .pd-max-w-md {
   max-width: 28rem;
 }
+.pd-border-collapse {
+  border-collapse: collapse;
+}
 .pd--translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -928,9 +989,20 @@ html body.pd-root,
   margin-top: calc(1em * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1em * var(--tw-space-y-reverse));
 }
+.pd-divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+.pd-divide-\[var\(--pd-border-secondary\)\] > :not([hidden]) ~ :not([hidden]) {
+  border-color: var(--pd-border-secondary);
+}
 .pd-overflow-auto {
   overflow: auto;
 }
+.pd-overflow-hidden {
+  overflow: hidden;
+}
 .pd-whitespace-nowrap {
   white-space: nowrap;
 }
@@ -952,12 +1024,18 @@ html body.pd-root,
 .pd-rounded-sm {
   border-radius: calc(var(--pd-radius) - 0.25em);
 }
+.pd-rounded-xl {
+  border-radius: 0.75rem;
+}
 .pd-border {
   border-width: 1px;
 }
 .pd-border-0 {
   border-width: 0px;
 }
+.pd-border-b {
+  border-bottom-width: 1px;
+}
 .pd-border-\[var\(--pd-border-red\)\] {
   border-color: var(--pd-border-red);
 }
@@ -991,9 +1069,21 @@ html body.pd-root,
 .pd-bg-\[var\(--pd-background-red-on-hover\)\] {
   background-color: var(--pd-background-red-on-hover);
 }
+.pd-bg-\[var\(--pd-background-secondary\)\] {
+  background-color: var(--pd-background-secondary);
+}
+.pd-bg-\[var\(--pd-background-system\)\] {
+  background-color: var(--pd-background-system);
+}
 .pd-bg-\[var\(--pd-background-tertiary\)\] {
   background-color: var(--pd-background-tertiary);
 }
+.pd-bg-\[var\(--pd-border-blue\)\] {
+  background-color: var(--pd-border-blue);
+}
+.pd-bg-\[var\(--pd-content-subtle\)\] {
+  background-color: var(--pd-content-subtle);
+}
 .pd-bg-\[var\(--pd-intent-danger-bg\)\] {
   background-color: var(--pd-intent-danger-bg);
 }
@@ -1018,6 +1108,13 @@ html body.pd-root,
 .pd-p-5 {
   padding: 1.25em;
 }
+.pd-p-8 {
+  padding: 2em;
+}
+.pd-px-2 {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
 .pd-px-3 {
   padding-left: 0.75em;
   padding-right: 0.75em;
@@ -1046,12 +1143,39 @@ html body.pd-root,
   padding-top: 1em;
   padding-bottom: 1em;
 }
+.pd-pl-3 {
+  padding-left: 0.75em;
+}
+.pd-pr-2 {
+  padding-right: 0.5em;
+}
+.pd-text-left {
+  text-align: left;
+}
 .pd-text-center {
   text-align: center;
 }
+.pd-font-mono {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    "Liberation Mono",
+    "Courier New",
+    monospace;
+}
+.pd-text-4xl {
+  font-size: 2.25em;
+  line-height: 2.5em;
+}
 .pd-text-\[10px\] {
   font-size: 10px;
 }
+.pd-text-\[11px\] {
+  font-size: 11px;
+}
 .pd-text-base {
   font-size: 1em;
   line-height: 1.5em;
@@ -1064,10 +1188,17 @@ html body.pd-root,
   font-size: 0.875em;
   line-height: 1.25em;
 }
+.pd-text-xl {
+  font-size: 1.25em;
+  line-height: 1.75em;
+}
 .pd-text-xs {
   font-size: 0.75em;
   line-height: 1em;
 }
+.pd-font-black {
+  font-weight: 900;
+}
 .pd-font-bold {
   font-weight: 700;
 }
@@ -1077,12 +1208,30 @@ html body.pd-root,
 .pd-font-semibold {
   font-weight: 600;
 }
+.pd-uppercase {
+  text-transform: uppercase;
+}
 .pd-leading-normal {
   line-height: 1.5;
 }
+.pd-leading-relaxed {
+  line-height: 1.625;
+}
+.pd-tracking-tight {
+  letter-spacing: -0.025em;
+}
+.pd-tracking-tighter {
+  letter-spacing: -0.05em;
+}
+.pd-tracking-widest {
+  letter-spacing: 0.1em;
+}
 .pd-text-\[var\(--pd-content-on-color\)\] {
   color: var(--pd-content-on-color);
 }
+.pd-text-\[var\(--pd-content-primary\)\] {
+  color: var(--pd-content-primary);
+}
 .pd-text-\[var\(--pd-content-red\)\] {
   color: var(--pd-content-red);
 }
@@ -1110,6 +1259,20 @@ html body.pd-root,
 .pd-text-\[var\(--pd-intent-warning-text\)\] {
   color: var(--pd-intent-warning-text);
 }
+.pd-text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.pd-text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.pd-opacity-0 {
+  opacity: 0;
+}
+.pd-opacity-100 {
+  opacity: 1;
+}
 .pd-shadow-none {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -1118,6 +1281,18 @@ html body.pd-root,
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.pd-shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.pd-backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
 .pd-transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1145,6 +1320,9 @@ html body.pd-root,
   white-space: nowrap;
   border-width: 0;
 }
+.pd-backdrop-blur-sm {
+  backdrop-filter: blur(4px);
+}
 .pd-transition-all {
   transition: all 0.15s ease-in-out;
 }
@@ -1175,12 +1353,24 @@ html body.pd-root,
 .\[border-radius\:var\(--pd-radius-button\)\] {
   border-radius: var(--pd-radius-button);
 }
+.\[box-sizing\:border-box\] {
+  box-sizing: border-box;
+}
 .\[font-family\:var\(--pd-font-sans\,Geist\,sans-serif\)\] {
   font-family: var(--pd-font-sans,Geist,sans-serif);
 }
 .\[gap\:var\(--pd-button-gap\)\] {
   gap: var(--pd-button-gap);
 }
+.\[height\:var\(--pd-button-height-lg\)\] {
+  height: var(--pd-button-height-lg);
+}
+.\[height\:var\(--pd-button-height-md\)\] {
+  height: var(--pd-button-height-md);
+}
+.\[height\:var\(--pd-button-height-sm\)\] {
+  height: var(--pd-button-height-sm);
+}
 .\[letter-spacing\:var\(--pd-button-letter-spacing\)\] {
   letter-spacing: var(--pd-button-letter-spacing);
 }
@@ -1229,6 +1419,11 @@ html body.pd-root,
 .\[padding-top\:var\(--pd-button-padding-sm-vertical\)\] {
   padding-top: var(--pd-button-padding-sm-vertical);
 }
+.hover\:pd-scale-\[1\.02\]:hover {
+  --tw-scale-x: 1.02;
+  --tw-scale-y: 1.02;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .hover\:pd-bg-\[var\(--pd-background-invert-light\)\]:hover {
   background-color: var(--pd-background-invert-light);
 }
@@ -1238,6 +1433,9 @@ html body.pd-root,
 .hover\:pd-bg-\[var\(--pd-background-red-on-hover\)\]:hover {
   background-color: var(--pd-background-red-on-hover);
 }
+.hover\:pd-bg-\[var\(--pd-background-system\)\]:hover {
+  background-color: var(--pd-background-system);
+}
 .hover\:pd-bg-\[var\(--pd-intent-danger-bg\)\]:hover {
   background-color: var(--pd-intent-danger-bg);
 }
@@ -1259,6 +1457,10 @@ html body.pd-root,
 .hover\:pd-bg-\[var\(--pd-intent-warning-bg-hover\)\]:hover {
   background-color: var(--pd-intent-warning-bg-hover);
 }
+.hover\:pd-bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
 .hover\:pd-text-\[var\(--pd-content-primary\)\]:hover {
   color: var(--pd-content-primary);
 }
@@ -1277,6 +1479,34 @@ html body.pd-root,
 .hover\:pd-text-\[var\(--pd-intent-warning-hover\)\]:hover {
   color: var(--pd-intent-warning-hover);
 }
+.hover\:pd-text-gray-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+.focus\:pd-border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
+}
+.focus\:pd-outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.focus\:pd-ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow),
+    var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
+}
+.focus\:pd-ring-blue-500\/10:focus {
+  --tw-ring-color: rgb(59 130 246 / 0.1);
+}
+.active\:pd-scale-\[0\.98\]:active {
+  --tw-scale-x: 0.98;
+  --tw-scale-y: 0.98;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .active\:pd-bg-\[var\(--pd-background-invert\)\]:active {
   background-color: var(--pd-background-invert);
 }
@@ -1298,4 +1528,14 @@ html body.pd-root,
 .active\:pd-text-\[var\(--pd-content-primary\)\]:active {
   color: var(--pd-content-primary);
 }
+.pd-group:focus-within .group-focus-within\:pd-text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
+}
+.pd-group:hover .group-hover\:pd-text-\[var\(--pd-content-blue\)\] {
+  color: var(--pd-content-blue);
+}
+.pd-group:hover .group-hover\:pd-opacity-60 {
+  opacity: 0.6;
+}
 /*# sourceMappingURL=index.css.map */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectdiscoveryio/design-system",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Production-grade design system with adapter layer support",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -109,13 +109,11 @@
     "tailwind-merge": "^2.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-links": "^10.1.11",
     "@storybook/blocks": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
+    "@storybook/react": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
     "@storybook/test": "^7.6.17",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
@@ -141,12 +139,13 @@
     "postcss-cli": "^11.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.6.17",
+    "storybook": "^10.1.11",
     "tailwindcss": "^3.4.1",
     "tsup": "^8.0.1",
     "tsx": "^4.21.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.11",
-    "vitest": "^1.2.0"
+    "vitest": "^1.2.0",
+    "@storybook/addon-docs": "^10.1.11"
   }
 }