@projectdiscoveryio/design-system 1.0.0 → 1.0.1

package/dist/index.css

@@ -814,18 +814,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;
 }
@@ -833,9 +846,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;
 }
@@ -845,6 +870,9 @@ html body.pd-root,
 .pd-mt-2 {
   margin-top: 0.5em;
 }
+.pd-block {
+  display: block;
+}
 .pd-flex {
   display: flex;
 }
@@ -866,6 +894,9 @@ html body.pd-root,
 .pd-h-5 {
   height: 1.25em;
 }
+.pd-h-6 {
+  height: 1.5em;
+}
 .pd-h-8 {
   height: 2em;
 }
@@ -875,6 +906,9 @@ html body.pd-root,
 .pd-min-h-screen {
   min-height: 100vh;
 }
+.pd-w-1 {
+  width: 0.25em;
+}
 .pd-w-3 {
   width: 0.75em;
 }
@@ -884,15 +918,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));
@@ -968,9 +1026,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;
 }
@@ -992,12 +1061,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);
 }
@@ -1031,9 +1106,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);
 }
@@ -1058,6 +1145,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;
@@ -1086,12 +1180,31 @@ 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;
@@ -1104,10 +1217,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;
 }
@@ -1117,12 +1237,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);
 }
@@ -1150,11 +1288,34 @@ 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;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), 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);
@@ -1179,6 +1340,7 @@ html body.pd-root,
   }
 /* Hide scrollbar */
 /* Backdrop blur helpers */
+.pd-backdrop-blur-sm { backdrop-filter: blur(4px); }
 /* Transition helpers */
 .pd-transition-all { transition: all 0.15s ease-in-out; }
 .pd-transition-colors { transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; }
@@ -1261,6 +1423,11 @@ html body.pd-root,
   padding-top: var(--pd-button-padding-sm-vertical);
 }
 /* Utilities */
+.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);
 }
@@ -1270,6 +1437,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);
 }
@@ -1291,6 +1461,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);
 }
@@ -1309,6 +1483,31 @@ 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);
 }
@@ -1330,3 +1529,12 @@ 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;
+}

package/dist/index.js

@@ -1101,8 +1101,11 @@ function ThemeProvider({
     return initialMode;
   };
   const [mode, setMode] = useState(getInitialMode);
+  useEffect(() => {
+    setMode(initialMode);
+  }, [initialMode]);
   const [resolvedMode, setResolvedMode] = useState(
-    () => resolveThemeMode(mode)
+    () => resolveThemeMode(initialMode)
   );
   useEffect(() => {
     if (mode !== "system" || typeof window === "undefined" || !window.matchMedia) {
@@ -1208,31 +1211,6 @@ function ThemeProvider({
     } else {
       body.classList.remove("pd-dark");
     }
-    if (mode === "system") {
-      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-      const handleSystemChange = (e) => {
-        const systemIsDark = e.matches;
-        if (systemIsDark) {
-          body.classList.add("pd-dark");
-        } else {
-          body.classList.remove("pd-dark");
-        }
-      };
-      handleSystemChange(mediaQuery);
-      if (mediaQuery.addEventListener) {
-        mediaQuery.addEventListener("change", handleSystemChange);
-        return () => {
-          mediaQuery.removeEventListener("change", handleSystemChange);
-          body.classList.remove("pd-root", "pd-dark");
-        };
-      } else {
-        mediaQuery.addListener(handleSystemChange);
-        return () => {
-          mediaQuery.removeListener(handleSystemChange);
-          body.classList.remove("pd-root", "pd-dark");
-        };
-      }
-    }
     return () => {
       body.classList.remove("pd-root", "pd-dark");
     };