@deframe-sdk/components 0.1.5 → 0.1.6

package/dist/styles.css

@@ -9,12 +9,14 @@
       "Courier New", monospace;
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-amber-500: oklch(76.9% 0.188 70.08);
     --color-yellow-100: oklch(97.3% 0.071 103.193);
     --color-yellow-800: oklch(47.6% 0.114 61.907);
     --color-green-100: oklch(96.2% 0.044 156.743);
     --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-800: oklch(44.8% 0.119 151.328);
+    --color-teal-600: oklch(60% 0.118 184.704);
     --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-200: oklch(88.2% 0.059 254.128);
@@ -66,6 +68,7 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
+    --tracking-wide: 0.025em;
     --radius-md: 8px;
     --radius-lg: clamp(12px, 2vw, 16px);
     --radius-xl: clamp(16px, 2.5vw, 24px);
@@ -89,6 +92,7 @@
     --color-bg-muted: var(--deframe-bg-muted, #E3E4E8);
     --color-bg-muted-dark: #2C2C2C50;
     --color-bg-raised: #FFFFFF;
+    --color-bg-raised-dark: #252050;
     --color-text-primary: var(--deframe-text-primary, #252050);
     --color-text-primary-dark: #FFFFFF;
     --color-text-secondary: var(--deframe-text-secondary, #5C5F66);
@@ -106,6 +110,10 @@
     --color-border-subtle-dark: #1E1E1E;
     --color-border-strong: #C6C8CC;
     --color-border-strong-dark: #3A3A3A;
+    --color-state-success: var(--deframe-state-success, #2BA176);
+    --color-state-warning: var(--deframe-state-warning, #F6A700);
+    --color-state-error: var(--deframe-state-error, #FF4D4F);
+    --spacing-sm: clamp(6px, 1vw, 8px);
     --spacing-md: clamp(12px, 2vw, 16px);
     --spacing-lg: clamp(20px, 3vw, 32px);
     --radius-full: 9999px;
@@ -273,6 +281,9 @@
   .relative {
     position: relative;
   }
+  .sticky {
+    position: sticky;
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -360,6 +371,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -372,6 +386,9 @@
   .mt-auto {
     margin-top: auto;
   }
+  .mt-sm {
+    margin-top: var(--spacing-sm);
+  }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -399,6 +416,9 @@
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
+  .ml-6 {
+    margin-left: calc(var(--spacing) * 6);
+  }
   .block {
     display: block;
   }
@@ -423,6 +443,9 @@
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
@@ -447,18 +470,39 @@
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
   .h-80 {
     height: calc(var(--spacing) * 80);
   }
+  .h-\[17px\] {
+    height: 17px;
+  }
+  .h-\[18px\] {
+    height: 18px;
+  }
   .h-\[50vh\] {
     height: 50vh;
   }
+  .h-\[56px\] {
+    height: 56px;
+  }
   .h-\[72px\] {
     height: 72px;
   }
+  .h-\[200px\] {
+    height: 200px;
+  }
+  .h-\[300px\] {
+    height: 300px;
+  }
+  .h-\[700px\] {
+    height: 700px;
+  }
   .h-\[844px\] {
     height: 844px;
   }
@@ -471,15 +515,30 @@
   .h-full {
     height: 100%;
   }
+  .h-px {
+    height: 1px;
+  }
+  .h-screen {
+    height: 100vh;
+  }
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
+  .min-h-full {
+    min-height: 100%;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -504,6 +563,9 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
@@ -528,9 +590,21 @@
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
+  .w-\[18px\] {
+    width: 18px;
+  }
+  .w-\[300px\] {
+    width: 300px;
+  }
   .w-\[390px\] {
     width: 390px;
   }
+  .w-\[400px\] {
+    width: 400px;
+  }
+  .w-\[420px\] {
+    width: 420px;
+  }
   .w-\[clamp\(18rem\,40vw\,30rem\)\] {
     width: clamp(18rem, 40vw, 30rem);
   }
@@ -546,6 +620,12 @@
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
+  .max-w-\[320px\] {
+    max-width: 320px;
+  }
+  .max-w-\[620px\] {
+    max-width: 620px;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -555,6 +635,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-\[120px\] {
+    min-width: 120px;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -591,6 +674,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .list-none {
+    list-style-type: none;
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -627,6 +713,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -636,6 +725,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -651,12 +743,21 @@
   .gap-12 {
     gap: calc(var(--spacing) * 12);
   }
+  .gap-\[2px\] {
+    gap: 2px;
+  }
   .gap-\[var\(--deframe-widget-size-gap-sm\)\] {
     gap: var(--deframe-widget-size-gap-sm);
   }
+  .gap-lg {
+    gap: var(--spacing-lg);
+  }
   .gap-md {
     gap: var(--spacing-md);
   }
+  .gap-sm {
+    gap: var(--spacing-sm);
+  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -742,6 +843,9 @@
   .rounded-\[18px\] {
     border-radius: 18px;
   }
+  .rounded-\[24px\] {
+    border-radius: 24px;
+  }
   .rounded-\[56px\] {
     border-radius: 56px;
   }
@@ -842,6 +946,9 @@
   .border-border-subtle {
     border-color: var(--color-border-subtle);
   }
+  .border-brand-primary {
+    border-color: var(--color-brand-primary);
+  }
   .border-gray-500 {
     border-color: var(--color-gray-500);
   }
@@ -881,6 +988,9 @@
   .bg-\[\#ff7a45\] {
     background-color: #ff7a45;
   }
+  .bg-\[rgba\(43\,161\,118\,0\.12\)\] {
+    background-color: rgba(43,161,118,0.12);
+  }
   .bg-\[var\(--color-bg-muted\,\#2a2a2a\)\] {
     background-color: var(--color-bg-muted,#2a2a2a);
   }
@@ -905,9 +1015,21 @@
   .bg-\[var\(--sheet-bg\,\#0A0A0A\)\] {
     background-color: var(--sheet-bg,#0A0A0A);
   }
+  .bg-amber-500\/20 {
+    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
+    }
+  }
+  .bg-bg-default {
+    background-color: var(--color-bg-default);
+  }
   .bg-bg-muted {
     background-color: var(--color-bg-muted);
   }
+  .bg-bg-raised {
+    background-color: var(--color-bg-raised);
+  }
   .bg-bg-subtle {
     background-color: var(--color-bg-subtle);
   }
@@ -938,6 +1060,9 @@
       background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
     }
   }
+  .bg-border-default {
+    background-color: var(--color-border-default);
+  }
   .bg-brand-primary {
     background-color: var(--color-brand-primary);
   }
@@ -968,6 +1093,21 @@
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
+  .bg-red-500\/20 {
+    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
+    }
+  }
+  .bg-state-success {
+    background-color: var(--color-state-success);
+  }
+  .bg-teal-600\/20 {
+    background-color: color-mix(in srgb, oklch(60% 0.118 184.704) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-teal-600) 20%, transparent);
+    }
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1049,6 +1189,15 @@
   .object-cover {
     object-fit: cover;
   }
+  .\!p-\[24px\] {
+    padding: 24px !important;
+  }
+  .\!p-md {
+    padding: var(--spacing-md) !important;
+  }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -1070,6 +1219,9 @@
   .p-\[var\(--deframe-widget-space-md\)\] {
     padding: var(--deframe-widget-space-md);
   }
+  .p-md {
+    padding: var(--spacing-md);
+  }
   .px-0 {
     padding-inline: calc(var(--spacing) * 0);
   }
@@ -1085,6 +1237,9 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .px-\[8px\] {
+    padding-inline: 8px;
+  }
   .px-\[28px\] {
     padding-inline: 28px;
   }
@@ -1094,6 +1249,12 @@
   .px-\[var\(--deframe-widget-size-padding-x-xl\)\] {
     padding-inline: var(--deframe-widget-size-padding-x-xl);
   }
+  .px-md {
+    padding-inline: var(--spacing-md);
+  }
+  .px-sm {
+    padding-inline: var(--spacing-sm);
+  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -1118,9 +1279,24 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .py-\[2px\] {
+    padding-block: 2px;
+  }
+  .py-\[6px\] {
+    padding-block: 6px;
+  }
+  .py-\[10px\] {
+    padding-block: 10px;
+  }
   .py-\[var\(--deframe-widget-size-padding-y-md\)\] {
     padding-block: var(--deframe-widget-size-padding-y-md);
   }
+  .py-lg {
+    padding-block: var(--spacing-lg);
+  }
+  .py-md {
+    padding-block: var(--spacing-md);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -1133,12 +1309,18 @@
   .pt-16 {
     padding-top: calc(var(--spacing) * 16);
   }
+  .pt-sm {
+    padding-top: var(--spacing-sm);
+  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
   .pr-6 {
     padding-right: calc(var(--spacing) * 6);
   }
+  .pr-md {
+    padding-right: var(--spacing-md);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -1148,6 +1330,12 @@
   .pb-24 {
     padding-bottom: calc(var(--spacing) * 24);
   }
+  .pb-md {
+    padding-bottom: var(--spacing-md);
+  }
+  .pb-sm {
+    padding-bottom: var(--spacing-sm);
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -1214,9 +1402,18 @@
   .\[font-size\:var\(--deframe-widget-font-size-text-medium\)\] {
     font-size: var(--deframe-widget-font-size-text-medium);
   }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
+  .text-\[11px\] {
+    font-size: 11px;
+  }
   .text-\[12px\] {
     font-size: 12px;
   }
+  .text-\[13px\] {
+    font-size: 13px;
+  }
   .text-\[14px\] {
     font-size: 14px;
   }
@@ -1241,6 +1438,10 @@
   .text-\[56px\] {
     font-size: 56px;
   }
+  .leading-4 {
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+  }
   .leading-5 {
     --tw-leading: calc(var(--spacing) * 5);
     line-height: calc(var(--spacing) * 5);
@@ -1295,10 +1496,18 @@
   .\[font-weight\:var\(--deframe-widget-font-weight-semibold\)\] {
     font-weight: var(--deframe-widget-font-weight-semibold);
   }
+  .tracking-\[0\.07em\] {
+    --tw-tracking: 0.07em;
+    letter-spacing: 0.07em;
+  }
   .tracking-\[0\] {
     --tw-tracking: 0;
     letter-spacing: 0;
   }
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
   .break-all {
     word-break: break-all;
   }
@@ -1401,6 +1610,15 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-state-error {
+    color: var(--color-state-error);
+  }
+  .text-state-success {
+    color: var(--color-state-success);
+  }
+  .text-state-warning {
+    color: var(--color-state-warning);
+  }
   .text-text-disabled {
     color: var(--color-text-disabled);
   }
@@ -1422,6 +1640,9 @@
   .text-yellow-800 {
     color: var(--color-yellow-800);
   }
+  .uppercase {
+    text-transform: uppercase;
+  }
   .italic {
     font-style: italic;
   }
@@ -1451,6 +1672,9 @@
   .opacity-60 {
     opacity: 60%;
   }
+  .opacity-95 {
+    opacity: 95%;
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1463,6 +1687,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-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);
+  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1471,6 +1699,22 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .outline-1 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .outline-offset-\[-1px\] {
+    outline-offset: -1px;
+  }
+  .outline-state-error {
+    outline-color: var(--color-state-error);
+  }
+  .outline-state-success {
+    outline-color: var(--color-state-success);
+  }
+  .outline-state-warning {
+    outline-color: var(--color-state-warning);
+  }
   .blur-\[160px\] {
     --tw-blur: blur(160px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -1534,6 +1778,11 @@
       rotate: 180deg;
     }
   }
+  .placeholder\:text-text-disabled {
+    &::placeholder {
+      color: var(--color-text-disabled);
+    }
+  }
   .hover\:border-\[var\(--color-border-strong\,\#555\)\] {
     &:hover {
       @media (hover: hover) {
@@ -1621,6 +1870,13 @@
       }
     }
   }
+  .hover\:text-brand-primary {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-brand-primary);
+      }
+    }
+  }
   .hover\:text-gray-300 {
     &:hover {
       @media (hover: hover) {
@@ -1772,6 +2028,16 @@
       font-size: 17px;
     }
   }
+  .lg\:\!bg-bg-raised {
+    @media (width >= 64rem) {
+      background-color: var(--color-bg-raised) !important;
+    }
+  }
+  .lg\:bg-bg-subtle {
+    @media (width >= 64rem) {
+      background-color: var(--color-bg-subtle);
+    }
+  }
   .lg\:text-5xl {
     @media (width >= 64rem) {
       font-size: var(--text-5xl);
@@ -1788,16 +2054,31 @@
       border-color: var(--color-border-subtle-dark);
     }
   }
+  .dark\:bg-bg-default-dark {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-bg-default-dark);
+    }
+  }
   .dark\:bg-bg-muted-dark {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-bg-muted-dark);
     }
   }
+  .dark\:bg-bg-raised-dark {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-bg-raised-dark);
+    }
+  }
   .dark\:bg-bg-subtle-dark {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-bg-subtle-dark);
     }
   }
+  .dark\:bg-border-default-dark {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-border-default-dark);
+    }
+  }
   .dark\:via-gray-600\/30 {
     @media (prefers-color-scheme: dark) {
       --tw-gradient-via: color-mix(in srgb, oklch(44.6% 0.03 256.802) 30%, transparent);
@@ -1818,6 +2099,11 @@
       color: var(--color-brand-secondary-dark);
     }
   }
+  .dark\:text-state-error {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-state-error);
+    }
+  }
   .dark\:text-text-disabled-dark {
     @media (prefers-color-scheme: dark) {
       color: var(--color-text-disabled-dark);
@@ -1838,6 +2124,13 @@
       color: var(--color-text-tertiary-dark);
     }
   }
+  .dark\:placeholder\:text-text-disabled-dark {
+    @media (prefers-color-scheme: dark) {
+      &::placeholder {
+        color: var(--color-text-disabled-dark);
+      }
+    }
+  }
   .dark\:hover\:border-border-default-dark {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -1865,6 +2158,13 @@
       }
     }
   }
+  .lg\:dark\:bg-bg-subtle-dark {
+    @media (width >= 64rem) {
+      @media (prefers-color-scheme: dark) {
+        background-color: var(--color-bg-subtle-dark);
+      }
+    }
+  }
 }
 @keyframes slide-up {
   0% {

package/package.json

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