@crystallize/design-system 1.16.4 → 1.16.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.16.6
+
+### Patch Changes
+
+- 37b8e62: Add z-index 100 to tooltip so it can be shown in modals also make the tooltip side prop optional with default value ot top.
+
+## 1.16.5
+
+### Patch Changes
+
+- 0abde21: Move prettier to the dev dept since it is added to the bundle for what ever reason.
+
 ## 1.16.4
 
 ### Patch Changes

package/dist/chunk-NIH5ZMPE.mjs

@@ -0,0 +1,8 @@
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+
+export {
+  __commonJS
+};

package/dist/index.css

@@ -552,6 +552,9 @@ button {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
 }
+.mb-9 {
+  margin-bottom: 2.25rem;
+}
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -591,6 +594,9 @@ button {
 .h-24 {
   height: 6rem;
 }
+.h-36 {
+  height: 9rem;
+}
 .h-6 {
   height: 1.5rem;
 }
@@ -603,6 +609,12 @@ button {
 .w-1\/2 {
   width: 50%;
 }
+.w-1\/4 {
+  width: 25%;
+}
+.w-36 {
+  width: 9rem;
+}
 .w-6 {
   width: 1.5rem;
 }
@@ -612,12 +624,18 @@ button {
 .w-\[8px\] {
   width: 8px;
 }
+.w-full {
+  width: 100%;
+}
 .min-w-\[44px\] {
   min-width: 44px;
 }
 .max-w-\[1100px\] {
   max-width: 1100px;
 }
+.max-w-xs {
+  max-width: 20rem;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -642,12 +660,18 @@ button {
 .flex-col {
   flex-direction: column;
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
 .items-start {
   align-items: flex-start;
 }
 .items-center {
   align-items: center;
 }
+.justify-start {
+  justify-content: flex-start;
+}
 .justify-end {
   justify-content: flex-end;
 }
@@ -660,6 +684,9 @@ button {
 .justify-items-center {
   justify-items: center;
 }
+.gap-2 {
+  gap: 0.5rem;
+}
 .gap-4 {
   gap: 1rem;
 }
@@ -732,16 +759,31 @@ button {
 .p-10 {
   padding: 2.5rem;
 }
+.p-2 {
+  padding: 0.5rem;
+}
 .p-4 {
   padding: 1rem;
 }
 .p-\[5px\] {
   padding: 5px;
 }
+.px-14 {
+  padding-left: 3.5rem;
+  padding-right: 3.5rem;
+}
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
 .pt-14 {
   padding-top: 3.5rem;
 }
@@ -783,9 +825,9 @@ button {
 .text-gray {
   color: rgb(var(--c-color-gray));
 }
-.text-gray-700-200 {
+.text-gray-800-100 {
   --tw-text-opacity: 1;
-  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
+  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
 }
 .underline {
   text-decoration-line: underline;
@@ -1095,6 +1137,7 @@ button {
 .c-action-menu-xs .c-action-menu-dot {
   height: 0.125rem;
   width: 0.125rem;
+  flex-shrink: 0;
 }
 .c-action-menu-sm {
   height: 2rem;
@@ -1102,8 +1145,9 @@ button {
   padding: 0.25rem;
 }
 .c-action-menu-sm .c-action-menu-dot {
-  height: 0.25rem;
-  width: 0.25rem;
+  height: 3px;
+  width: 3px;
+  flex-shrink: 0;
 }
 .c-action-menu-item {
   display: flex;
@@ -1165,6 +1209,8 @@ button {
 
 /* src/dropdown-menu/dropdown-menu.css */
 .c-dropdown-menu-content {
+  animation-duration: 0.4s;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
   --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
   box-shadow:
@@ -1172,6 +1218,12 @@ button {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.c-dropdown-menu-content[data-side=top] {
+  animation-name: slideUp;
+}
+.c-dropdown-menu-content[data-side=bottom] {
+  animation-name: slideDown;
+}
 .c-dropdown-menu-label {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
@@ -1261,6 +1313,26 @@ button {
   border-bottom-left-radius: 0.25rem;
   border-bottom-right-radius: 0.25rem;
 }
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 
 /* src/avatar/avatar.css */
 .c-avatar {
@@ -1687,6 +1759,49 @@ button {
   color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
 }
 
+/* src/tooltip/tooltip.css */
+.c-tooltip-content {
+  z-index: 100;
+  user-select: none;
+  border-radius: 0.375rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  font-style: italic;
+  line-height: 1;
+  --tw-text-opacity: 1;
+  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
+  --tw-shadow: hsl(206 22% 7%/15%) 0px 10px 18px -10px, hsl(206 22% 7%/10%) 0px 2px 20px -15px;
+  --tw-shadow-colored: 0px 10px 18px -10px var(--tw-shadow-color), 0px 2px 20px -15px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    opacity,
+    box-shadow,
+    transform,
+    filter,
+    backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.c-tooltip-arrow {
+  fill: #fff;
+}
+
 /* src/progress/progress.css */
 .c-progress-root {
   position: relative;
@@ -2477,7 +2592,6 @@ button {
 /* src/rich-text-editor/rich-text-editor.css */
 .c-rich-text-editor {
   margin: 0px auto;
-  max-width: 1100px;
   position: relative;
   line-height: 1.7;
   --c-rte-min-height: 150px;
@@ -3504,3 +3618,58 @@ button {
 .CrystallizeRTEditorTheme__embedBlockFocus {
   outline: 2px solid rgb(60, 132, 244);
 }
+
+/* src/switch/switch.css */
+.c-switch-root {
+  position: relative;
+  height: 1.5rem;
+  width: 2.75rem;
+  cursor: pointer;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
+  padding-left: 0.125rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.c-switch-root:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--c-color-purple-300-600) / var(--tw-border-opacity));
+}
+.c-switch-root:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.c-switch-root:disabled {
+  opacity: 0.4;
+}
+.c-switch-root[data-state=checked] {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--c-color-green-400-500) / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-cyan-100-800) / var(--tw-bg-opacity));
+}
+.c-switch-thumb {
+  display: block;
+  height: 1rem;
+  width: 1rem;
+  transform-origin: center;
+  --tw-translate-x: 0.25rem;
+  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));
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-purple-400-500) / var(--tw-bg-opacity));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.c-switch-thumb[data-state=checked] {
+  transform: translateX(20px);
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-green-500-400) / var(--tw-bg-opacity));
+}