@turtleclub/earn-widget 0.2.0-beta.3 → 0.2.0-beta.4

package/dist/styles.css

@@ -44,6 +44,7 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --tracking-tight: -0.025em;
+    --tracking-wider: 0.05em;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
@@ -201,20 +202,29 @@
   }
 }
 @layer utilities {
+  .turtle-widget-root .pointer-events-none {
+    pointer-events: none;
+  }
   .turtle-widget-root .absolute {
     position: absolute;
   }
   .turtle-widget-root .relative {
     position: relative;
   }
+  .turtle-widget-root .sticky {
+    position: sticky;
+  }
   .turtle-widget-root .top-1\/2 {
     top: calc(1/2 * 100%);
   }
+  .turtle-widget-root .right-1 {
+    right: calc(var(--spacing) * 1);
+  }
   .turtle-widget-root .right-2 {
     right: calc(var(--spacing) * 2);
   }
-  .turtle-widget-root .right-4 {
-    right: calc(var(--spacing) * 4);
+  .turtle-widget-root .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
   }
   .turtle-widget-root .bottom-2 {
     bottom: calc(var(--spacing) * 2);
@@ -264,9 +274,6 @@
   .turtle-widget-root .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
-  .turtle-widget-root .mt-5 {
-    margin-top: calc(var(--spacing) * 5);
-  }
   .turtle-widget-root .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -303,6 +310,9 @@
   .turtle-widget-root .h-8 {
     height: calc(var(--spacing) * 8);
   }
+  .turtle-widget-root .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
   .turtle-widget-root .h-10 {
     height: calc(var(--spacing) * 10);
   }
@@ -360,9 +370,6 @@
   .turtle-widget-root .w-full {
     width: 100%;
   }
-  .turtle-widget-root .max-w-\[600px\] {
-    max-width: 600px;
-  }
   .turtle-widget-root .max-w-lg {
     max-width: var(--container-lg);
   }
@@ -421,6 +428,9 @@
   .turtle-widget-root .justify-start {
     justify-content: flex-start;
   }
+  .turtle-widget-root .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
   .turtle-widget-root .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -451,19 +461,16 @@
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .turtle-widget-root .-space-x-1 {
+  .turtle-widget-root .-space-x-1\.5 {
     .turtle-widget-root :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * -1) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-x-reverse)));
+      margin-inline-start: calc(calc(var(--spacing) * -1.5) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * -1.5) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
   .turtle-widget-root .overflow-hidden {
     overflow: hidden;
   }
-  .turtle-widget-root .overflow-x-auto {
-    overflow-x: auto;
-  }
   .turtle-widget-root .overflow-y-auto {
     overflow-y: auto;
   }
@@ -479,10 +486,6 @@
   .turtle-widget-root .rounded-md {
     border-radius: var(--radius-md);
   }
-  .turtle-widget-root .\!border {
-    border-style: var(--tw-border-style) !important;
-    border-width: 1px !important;
-  }
   .turtle-widget-root .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -491,9 +494,8 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
-  .turtle-widget-root .border-b {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 1px;
+  .turtle-widget-root .bg-transparent {
+    background-color: transparent;
   }
   .turtle-widget-root .object-contain {
     object-fit: contain;
@@ -510,6 +512,9 @@
   .turtle-widget-root .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .turtle-widget-root .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
   .turtle-widget-root .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -519,11 +524,14 @@
   .turtle-widget-root .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .turtle-widget-root .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
   .turtle-widget-root .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
-  .turtle-widget-root .px-6 {
-    padding-inline: calc(var(--spacing) * 6);
+  .turtle-widget-root .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
   }
   .turtle-widget-root .py-2 {
     padding-block: calc(var(--spacing) * 2);
@@ -537,14 +545,23 @@
   .turtle-widget-root .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
+  .turtle-widget-root .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
   .turtle-widget-root .pr-3 {
     padding-right: calc(var(--spacing) * 3);
   }
   .turtle-widget-root .pr-12 {
     padding-right: calc(var(--spacing) * 12);
   }
-  .turtle-widget-root .pl-4 {
-    padding-left: calc(var(--spacing) * 4);
+  .turtle-widget-root .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
+  .turtle-widget-root .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
+  .turtle-widget-root .pl-3 {
+    padding-left: calc(var(--spacing) * 3);
   }
   .turtle-widget-root .pl-14 {
     padding-left: calc(var(--spacing) * 14);
@@ -584,6 +601,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .turtle-widget-root .text-\[10px\] {
+    font-size: 10px;
+  }
   .turtle-widget-root .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -596,12 +616,16 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  .turtle-widget-root .whitespace-nowrap {
-    white-space: nowrap;
+  .turtle-widget-root .tracking-wider {
+    --tw-tracking: var(--tracking-wider);
+    letter-spacing: var(--tracking-wider);
   }
   .turtle-widget-root .capitalize {
     text-transform: capitalize;
   }
+  .turtle-widget-root .uppercase {
+    text-transform: uppercase;
+  }
   .turtle-widget-root .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -654,12 +678,9 @@
     --tw-ease: linear;
     transition-timing-function: linear;
   }
-  .turtle-widget-root .hover\:shadow-sm {
-    .turtle-widget-root &:hover {
-      @media (hover: hover) {
-        --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);
-      }
+  .turtle-widget-root .focus\:border-transparent {
+    .turtle-widget-root &:focus {
+      border-color: transparent;
     }
   }
   .turtle-widget-root .focus\:ring-0 {
@@ -1120,10 +1141,6 @@
     width: calc(var(--spacing)*9);
     height: calc(var(--spacing)*9);
   }
-  .turtle-widget-root .size-full {
-    width: 100%;
-    height: 100%;
-  }
   .turtle-widget-root .h-2 {
     height: calc(var(--spacing)*2);
   }
@@ -1133,6 +1150,9 @@
   .turtle-widget-root .h-3 {
     height: calc(var(--spacing)*3);
   }
+  .turtle-widget-root .h-3\.5 {
+    height: calc(var(--spacing)*3.5);
+  }
   .turtle-widget-root .h-4 {
     height: calc(var(--spacing)*4);
   }
@@ -1190,6 +1210,9 @@
   .turtle-widget-root .w-3 {
     width: calc(var(--spacing)*3);
   }
+  .turtle-widget-root .w-3\.5 {
+    width: calc(var(--spacing)*3.5);
+  }
   .turtle-widget-root .w-4 {
     width: calc(var(--spacing)*4);
   }
@@ -1238,6 +1261,9 @@
   .turtle-widget-root .min-w-\[8rem\] {
     min-width: 8rem;
   }
+  .turtle-widget-root .min-w-\[75px\] {
+    min-width: 75px;
+  }
   .turtle-widget-root .min-w-\[80px\] {
     min-width: 80px;
   }
@@ -1338,8 +1364,8 @@
   .turtle-widget-root .gap-3 {
     gap: calc(var(--spacing)*3);
   }
-  .turtle-widget-root .gap-12 {
-    gap: calc(var(--spacing)*12);
+  .turtle-widget-root .gap-4 {
+    gap: calc(var(--spacing)*4);
   }
   .turtle-widget-root :where(.space-y-1>:not(:last-child)) {
     --tw-space-y-reverse: 0;
@@ -1410,7 +1436,7 @@
   .turtle-widget-root .rounded-xl {
     border-radius: calc(var(--radius) + 4px);
   }
-  .turtle-widget-root .border {
+  .turtle-widget-root .border, .turtle-widget-root .border-1 {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
@@ -1433,9 +1459,23 @@
   .turtle-widget-root .border-border {
     border-color: var(--border);
   }
+  .turtle-widget-root .border-foreground\/30 {
+    border-color: var(--foreground);
+  }
+  @supports (color:color-mix(in lab,red,red)) {
+    .turtle-widget-root .border-foreground\/30 {
+      border-color: var(--foreground);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab,var(--foreground)30%,transparent);
+      }
+    }
+  }
   .turtle-widget-root .border-input {
     border-color: var(--input);
   }
+  .turtle-widget-root .border-muted {
+    border-color: var(--muted);
+  }
   .turtle-widget-root .border-muted-foreground\/30 {
     border-color: var(--muted-foreground);
   }
@@ -1468,9 +1508,6 @@
   .turtle-widget-root .bg-border {
     background-color: var(--border);
   }
-  .turtle-widget-root .bg-card {
-    background-color: var(--card);
-  }
   .turtle-widget-root .bg-muted {
     background-color: var(--muted);
   }
@@ -1568,7 +1605,7 @@
   .turtle-widget-root .p-8 {
     padding: calc(var(--spacing)*8);
   }
-  .turtle-widget-root .p-px {
+  .turtle-widget-root .p-\[1px\], .turtle-widget-root .p-px {
     padding: 1px;
   }
   .turtle-widget-root .px-1\.5 {
@@ -1589,6 +1626,9 @@
   .turtle-widget-root .px-6 {
     padding-inline: calc(var(--spacing)*6);
   }
+  .turtle-widget-root .py-0\.5 {
+    padding-block: calc(var(--spacing)*.5);
+  }
   .turtle-widget-root .py-1 {
     padding-block: calc(var(--spacing)*1);
   }
@@ -1604,6 +1644,9 @@
   .turtle-widget-root .py-4 {
     padding-block: calc(var(--spacing)*4);
   }
+  .turtle-widget-root .py-8 {
+    padding-block: calc(var(--spacing)*8);
+  }
   .turtle-widget-root .pt-0 {
     padding-top: calc(var(--spacing)*0);
   }
@@ -1613,8 +1656,8 @@
   .turtle-widget-root .pr-8 {
     padding-right: calc(var(--spacing)*8);
   }
-  .turtle-widget-root .pb-4 {
-    padding-bottom: calc(var(--spacing)*4);
+  .turtle-widget-root .pb-3 {
+    padding-bottom: calc(var(--spacing)*3);
   }
   .turtle-widget-root .pl-2 {
     padding-left: calc(var(--spacing)*2);
@@ -1901,42 +1944,65 @@
     content: var(--tw-content);
     inset: calc(var(--spacing)*0);
   }
-  .turtle-widget-root .before\:-z-10:before {
-    content: var(--tw-content);
-    z-index: -10;
-  }
   .turtle-widget-root .before\:rounded-\[inherit\]:before {
     content: var(--tw-content);
     border-radius: inherit;
   }
-  .turtle-widget-root .before\:bg-gradient-to-b:before {
+  .turtle-widget-root .before\:bg-gradient-to-br:before {
     content: var(--tw-content);
-    --tw-gradient-position: to bottom in oklab;
+    --tw-gradient-position: to bottom right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
-  .turtle-widget-root .before\:from-\[\#F9F9F9\]:before {
+  .turtle-widget-root .before\:from-\[\#73F36C\]\/60:before {
     content: var(--tw-content);
-    --tw-gradient-from: #f9f9f9;
+    --tw-gradient-from: oklab(86.2322% -.16651 .127341/.6);
     --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));
   }
-  .turtle-widget-root .before\:from-40\%:before {
+  .turtle-widget-root .before\:from-white\/40:before {
     content: var(--tw-content);
-    --tw-gradient-from-position: 40%;
+    --tw-gradient-from: #fff6;
+  }
+  @supports (color:color-mix(in lab,red,red)) {
+    .turtle-widget-root .before\:from-white\/40:before {
+      --tw-gradient-from: color-mix(in srgb,#fff40%,transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-gradient-from: color-mix(in oklab,var(--color-white)40%,transparent);
+      }
+    }
+  }
+  .turtle-widget-root .before\:from-white\/40:before {
+    --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));
   }
-  .turtle-widget-root .before\:via-white:before {
+  .turtle-widget-root .before\:via-transparent:before {
     content: var(--tw-content);
-    --tw-gradient-via: var(--color-white);
+    --tw-gradient-via: transparent;
     --tw-gradient-via-stops: var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
-  .turtle-widget-root .before\:to-white:before {
+  .turtle-widget-root .before\:to-\[\#73F36C\]\/20:before {
     content: var(--tw-content);
-    --tw-gradient-to: var(--color-white);
+    --tw-gradient-to: oklab(86.2322% -.16651 .127341/.2);
     --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));
   }
-  .turtle-widget-root .before\:to-50\%:before {
+  .turtle-widget-root .before\:to-white\/10:before {
     content: var(--tw-content);
-    --tw-gradient-to-position: 50%;
+    --tw-gradient-to: #ffffff1a;
+  }
+  @supports (color:color-mix(in lab,red,red)) {
+    .turtle-widget-root .before\:to-white\/10:before {
+      --tw-gradient-to: color-mix(in srgb,#fff10%,transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-gradient-to: color-mix(in oklab,var(--color-white)10%,transparent);
+      }
+    }
+  }
+  .turtle-widget-root .before\:to-white\/10:before {
+    --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));
+  }
+  .turtle-widget-root .before\:\[mask-composite\:exclude\]:before {
+    content: var(--tw-content);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
   }
   .turtle-widget-root .before\:p-px:before {
     content: var(--tw-content);
@@ -1946,6 +2012,11 @@
     --tw-content: "";
     content: var(--tw-content);
   }
+  .turtle-widget-root .before\:\[mask\:linear-gradient\(\#fff_0_0\)_content-box\,linear-gradient\(\#fff_0_0\)\]:before {
+    content: var(--tw-content);
+    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
+    mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
+  }
   .turtle-widget-root .first\:rounded-l-md:first-child {
     border-top-left-radius: calc(var(--radius) - 2px);
     border-bottom-left-radius: calc(var(--radius) - 2px);
@@ -2201,9 +2272,19 @@
   .turtle-widget-root .data-\[size\=default\]\:h-9[data-size=default] {
     height: calc(var(--spacing)*9);
   }
-  .turtle-widget-root .data-\[size\=sm\]\:h-8[data-size=sm] {
+  .turtle-widget-root .data-\[size\=sm\]\:h-8[data-size=sm], .turtle-widget-root .data-\[size\=xs\]\:h-8[data-size=xs] {
     height: calc(var(--spacing)*8);
   }
+  .turtle-widget-root .data-\[size\=xs\]\:px-4[data-size=xs] {
+    padding-inline: calc(var(--spacing)*4);
+  }
+  .turtle-widget-root .data-\[size\=xs\]\:py-2[data-size=xs] {
+    padding-block: calc(var(--spacing)*2);
+  }
+  .turtle-widget-root .data-\[size\=xs\]\:text-xs[data-size=xs] {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading,var(--text-xs--line-height));
+  }
   .turtle-widget-root :is(.\*\:data-\[slot\=select-value\]\:line-clamp-1>*)[data-slot=select-value] {
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
@@ -2269,6 +2350,36 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .turtle-widget-root .dark\:before\:from-white\/40:is(.dark *):before {
+    content: var(--tw-content);
+    --tw-gradient-from: #fff6;
+  }
+  @supports (color:color-mix(in lab,red,red)) {
+    .turtle-widget-root .dark\:before\:from-white\/40:is(.dark *):before {
+      --tw-gradient-from: color-mix(in srgb,#fff40%,transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-gradient-from: color-mix(in oklab,var(--color-white)40%,transparent);
+      }
+    }
+  }
+  .turtle-widget-root .dark\:before\:from-white\/40:is(.dark *):before {
+    --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));
+  }
+  .turtle-widget-root .dark\:before\:to-white\/10:is(.dark *):before {
+    content: var(--tw-content);
+    --tw-gradient-to: #ffffff1a;
+  }
+  @supports (color:color-mix(in lab,red,red)) {
+    .turtle-widget-root .dark\:before\:to-white\/10:is(.dark *):before {
+      --tw-gradient-to: color-mix(in srgb,#fff10%,transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-gradient-to: color-mix(in oklab,var(--color-white)10%,transparent);
+      }
+    }
+  }
+  .turtle-widget-root .dark\:before\:to-white\/10:is(.dark *):before {
+    --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));
+  }
   .turtle-widget-root .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true] {
     --tw-ring-color: var(--destructive);
   }
@@ -2631,10 +2742,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-tracking {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-outline-style {
   syntax: "*";
   inherits: false;
@@ -2745,6 +2852,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -2896,6 +3007,7 @@
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -2950,7 +3062,6 @@
       --tw-gradient-via-position: 50%;
       --tw-gradient-to-position: 100%;
       --tw-leading: initial;
-      --tw-tracking: initial;
       --tw-outline-style: solid;
       --tw-content: "";
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turtleclub/earn-widget",
-  "version": "0.2.0-beta.3",
+  "version": "0.2.0-beta.4",
   "description": "Configurable and self-contained Turtle Earn widget for third-party integration",
   "license": "MIT",
   "repository": {
@@ -42,7 +42,7 @@
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.11",
     "@turtleclub/hooks": "0.2.0-beta.0",
-    "@turtleclub/ui": "0.2.0-beta.0",
+    "@turtleclub/ui": "0.2.0-beta.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "jotai": "^2.10.5",
@@ -80,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c6edeb318f069eead35c3ce510be2675be643c43"
+  "gitHead": "2f81fd2cc2d44b78067bd8bf719ed61a172e4884"
 }