@deframe-sdk/components 0.1.6 → 0.1.7

package/dist/styles.css

@@ -69,12 +69,14 @@
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --tracking-wide: 0.025em;
+    --leading-normal: 1.5;
     --radius-md: 8px;
     --radius-lg: clamp(12px, 2vw, 16px);
     --radius-xl: clamp(16px, 2.5vw, 24px);
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --animate-bounce: bounce 1s infinite;
     --blur-sm: 8px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -281,6 +283,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }
@@ -302,6 +307,9 @@
   .top-8 {
     top: calc(var(--spacing) * 8);
   }
+  .-right-1 {
+    right: calc(var(--spacing) * -1);
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -311,6 +319,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .-bottom-1 {
+    bottom: calc(var(--spacing) * -1);
+  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -362,6 +373,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .my-1 {
+    margin-block: calc(var(--spacing) * 1);
+  }
   .mt-0 {
     margin-top: calc(var(--spacing) * 0);
   }
@@ -479,12 +493,21 @@
   .h-80 {
     height: calc(var(--spacing) * 80);
   }
+  .h-\[4px\] {
+    height: 4px;
+  }
+  .h-\[12px\] {
+    height: 12px;
+  }
   .h-\[17px\] {
     height: 17px;
   }
   .h-\[18px\] {
     height: 18px;
   }
+  .h-\[20px\] {
+    height: 20px;
+  }
   .h-\[50vh\] {
     height: 50vh;
   }
@@ -494,6 +517,9 @@
   .h-\[72px\] {
     height: 72px;
   }
+  .h-\[83px\] {
+    height: 83px;
+  }
   .h-\[200px\] {
     height: 200px;
   }
@@ -530,6 +556,9 @@
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
+  .min-h-\[16px\] {
+    min-height: 16px;
+  }
   .min-h-full {
     min-height: 100%;
   }
@@ -593,6 +622,9 @@
   .w-\[18px\] {
     width: 18px;
   }
+  .w-\[83px\] {
+    width: 83px;
+  }
   .w-\[300px\] {
     width: 300px;
   }
@@ -611,6 +643,9 @@
   .w-full {
     width: 100%;
   }
+  .w-px {
+    width: 1px;
+  }
   .w-screen {
     width: 100vw;
   }
@@ -665,6 +700,9 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-bounce {
+    animation: var(--animate-bounce);
+  }
   .animate-fade-in {
     animation: var(--animate-fade-in);
   }
@@ -934,6 +972,9 @@
   .border-\[var\(--color-border-default\,\#333\)\] {
     border-color: var(--color-border-default,#333);
   }
+  .border-bg-default {
+    border-color: var(--color-bg-default);
+  }
   .border-blue-300 {
     border-color: var(--color-blue-300);
   }
@@ -1066,6 +1107,9 @@
   .bg-brand-primary {
     background-color: var(--color-brand-primary);
   }
+  .bg-brand-secondary {
+    background-color: var(--color-brand-secondary);
+  }
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
@@ -1189,6 +1233,9 @@
   .object-cover {
     object-fit: cover;
   }
+  .\!p-\[22px\] {
+    padding: 22px !important;
+  }
   .\!p-\[24px\] {
     padding: 24px !important;
   }
@@ -1222,6 +1269,9 @@
   .p-md {
     padding: var(--spacing-md);
   }
+  .p-px {
+    padding: 1px;
+  }
   .px-0 {
     padding-inline: calc(var(--spacing) * 0);
   }
@@ -1279,6 +1329,9 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .py-20 {
+    padding-block: calc(var(--spacing) * 20);
+  }
   .py-\[2px\] {
     padding-block: 2px;
   }
@@ -1309,6 +1362,12 @@
   .pt-16 {
     padding-top: calc(var(--spacing) * 16);
   }
+  .pt-lg {
+    padding-top: var(--spacing-lg);
+  }
+  .pt-md {
+    padding-top: var(--spacing-md);
+  }
   .pt-sm {
     padding-top: var(--spacing-sm);
   }
@@ -1318,9 +1377,15 @@
   .pr-6 {
     padding-right: calc(var(--spacing) * 6);
   }
+  .pr-12 {
+    padding-right: calc(var(--spacing) * 12);
+  }
   .pr-md {
     padding-right: var(--spacing-md);
   }
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -1466,6 +1531,10 @@
     --tw-leading: 140%;
     line-height: 140%;
   }
+  .leading-normal {
+    --tw-leading: var(--leading-normal);
+    line-height: var(--leading-normal);
+  }
   .\[line-height\:var\(--deframe-widget-font-leading-md\)\] {
     line-height: var(--deframe-widget-font-leading-md);
   }
@@ -1562,6 +1631,9 @@
   .text-\[var\(--deframe-widget-color-text-primary-disabled\)\] {
     color: var(--deframe-widget-color-text-primary-disabled);
   }
+  .text-bg-default {
+    color: var(--color-bg-default);
+  }
   .text-blue-100 {
     color: var(--color-blue-100);
   }
@@ -1649,6 +1721,9 @@
   .underline {
     text-decoration-line: underline;
   }
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
   .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -1687,6 +1762,10 @@
     --tw-shadow: 0 8px 16px 0 var(--tw-shadow-color, rgba(0,0,0,0.10));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-md {
+    --tw-shadow: 0 4px 6px 0 var(--tw-shadow-color, rgba(0,0,0,0.10));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0,0,0,0.10));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1898,6 +1977,13 @@
       }
     }
   }
+  .hover\:no-underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: none;
+      }
+    }
+  }
   .hover\:opacity-70 {
     &:hover {
       @media (hover: hover) {
@@ -2089,6 +2175,11 @@
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
   }
+  .dark\:text-bg-default-dark {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-bg-default-dark);
+    }
+  }
   .dark\:text-brand-primary-dark {
     @media (prefers-color-scheme: dark) {
       color: var(--color-brand-primary-dark);
@@ -2158,6 +2249,20 @@
       }
     }
   }
+  .dark\:lg\:\!bg-bg-raised-dark {
+    @media (prefers-color-scheme: dark) {
+      @media (width >= 64rem) {
+        background-color: var(--color-bg-raised-dark) !important;
+      }
+    }
+  }
+  .lg\:dark\:\!bg-bg-raised-dark {
+    @media (width >= 64rem) {
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-bg-raised-dark) !important;
+      }
+    }
+  }
   .lg\:dark\:bg-bg-subtle-dark {
     @media (width >= 64rem) {
       @media (prefers-color-scheme: dark) {
@@ -2598,6 +2703,16 @@ body {
   syntax: "*";
   inherits: false;
 }
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deframe-sdk/components",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "packageManager": "pnpm@9.0.0",
   "description": "Deframe SDK React component library",
   "engines": {