@turtleclub/earn-widget 0.4.0 → 0.5.0-beta.0

package/dist/styles.css

@@ -153,6 +153,7 @@
     --animate-pulse: pulse 2s cubic-bezier(.4,0,.6,1)infinite;
     --blur-sm: 8px;
     --blur-lg: 16px;
+    --aspect-video: 16/9;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
     --default-font-family: "DM Sans",sans-serif;
@@ -844,6 +845,9 @@
   .turtle-widget-root .-my-px {
     margin-block: -1px;
   }
+  .turtle-widget-root .my-0\.5 {
+    margin-block: calc(var(--spacing)*.5);
+  }
   .turtle-widget-root .my-1 {
     margin-block: calc(var(--spacing)*1);
   }
@@ -940,6 +944,9 @@
   .turtle-widget-root .aspect-square {
     aspect-ratio: 1;
   }
+  .turtle-widget-root .aspect-video {
+    aspect-ratio: var(--aspect-video);
+  }
   .turtle-widget-root .size-2 {
     width: calc(var(--spacing)*2);
     height: calc(var(--spacing)*2);
@@ -1124,6 +1131,12 @@
   .turtle-widget-root .w-\(--sidebar-width\) {
     width: var(--sidebar-width);
   }
+  .turtle-widget-root .w-0 {
+    width: calc(var(--spacing)*0);
+  }
+  .turtle-widget-root .w-1 {
+    width: calc(var(--spacing)*1);
+  }
   .turtle-widget-root .w-2 {
     width: calc(var(--spacing)*2);
   }
@@ -1506,6 +1519,9 @@
   .turtle-widget-root .rounded {
     border-radius: .25rem;
   }
+  .turtle-widget-root .rounded-\[2px\] {
+    border-radius: 2px;
+  }
   .turtle-widget-root .rounded-\[calc\(var\(--radius\)-5px\)\] {
     border-radius: calc(var(--radius) - 5px);
   }
@@ -1556,6 +1572,10 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .turtle-widget-root .border-\[1\.5px\] {
+    border-style: var(--tw-border-style);
+    border-width: 1.5px;
+  }
   .turtle-widget-root .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1572,16 +1592,31 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .turtle-widget-root .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
   .turtle-widget-root .border-none {
     --tw-border-style: none;
     border-style: none;
   }
+  .turtle-widget-root .border-\(--color-border\) {
+    border-color: var(--color-border);
+  }
   .turtle-widget-root .border-background {
     border-color: var(--color-background);
   }
-  .turtle-widget-root .border-border {
+  .turtle-widget-root .border-border, .turtle-widget-root .border-border\/50 {
     border-color: var(--color-border);
   }
+  @supports (color:color-mix(in lab,red,red)) {
+    .turtle-widget-root .border-border\/50 {
+      border-color: var(--color-border);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab,var(--color-border)50%,transparent);
+      }
+    }
+  }
   .turtle-widget-root .border-inherit {
     border-color: inherit;
   }
@@ -1631,6 +1666,9 @@
   .turtle-widget-root .\!bg-neutral-alpha-2 {
     background-color: var(--color-neutral-alpha-2) !important;
   }
+  .turtle-widget-root .bg-\(--color-bg\) {
+    background-color: var(--color-bg);
+  }
   .turtle-widget-root .bg-background {
     background-color: var(--color-background);
   }
@@ -2230,6 +2268,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);
     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 .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);
+    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 .shadow-xs {
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color,#0000000d);
     box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
@@ -3946,6 +3988,68 @@
       align-items: flex-start;
     }
   }
+  .turtle-widget-root .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
+    fill: var(--color-muted-foreground);
+  }
+  .turtle-widget-root .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"] {
+    stroke: var(--color-border);
+  }
+  @supports (color:color-mix(in lab,red,red)) {
+    .turtle-widget-root .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"] {
+      stroke: var(--color-border);
+      @supports (color: color-mix(in lab, red, red)) {
+        stroke: color-mix(in oklab,var(--color-border)50%,transparent);
+      }
+    }
+  }
+  .turtle-widget-root .\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
+    stroke: var(--color-border);
+  }
+  .turtle-widget-root .\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke="#fff"] {
+    stroke: #0000;
+  }
+  .turtle-widget-root .\[\&_\.recharts-layer\]\:outline-hidden .recharts-layer {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  @media (forced-colors:active) {
+    .turtle-widget-root .\[\&_\.recharts-layer\]\:outline-hidden .recharts-layer {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+  .turtle-widget-root .\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke="#ccc"] {
+    stroke: var(--color-border);
+  }
+  .turtle-widget-root .\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector, .turtle-widget-root .\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
+    fill: var(--color-muted);
+  }
+  .turtle-widget-root .\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke="#ccc"] {
+    stroke: var(--color-border);
+  }
+  .turtle-widget-root .\[\&_\.recharts-sector\]\:outline-hidden .recharts-sector {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  @media (forced-colors:active) {
+    .turtle-widget-root .\[\&_\.recharts-sector\]\:outline-hidden .recharts-sector {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+  .turtle-widget-root .\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke="#fff"] {
+    stroke: #0000;
+  }
+  .turtle-widget-root .\[\&_\.recharts-surface\]\:outline-hidden .recharts-surface {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  @media (forced-colors:active) {
+    .turtle-widget-root .\[\&_\.recharts-surface\]\:outline-hidden .recharts-surface {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
   .turtle-widget-root .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
     padding-inline: calc(var(--spacing)*2);
   }
@@ -4144,9 +4248,24 @@
     width: calc(var(--spacing)*4);
     height: calc(var(--spacing)*4);
   }
+  .turtle-widget-root .\[\&\>svg\]\:h-2\.5>svg {
+    height: calc(var(--spacing)*2.5);
+  }
+  .turtle-widget-root .\[\&\>svg\]\:h-3>svg {
+    height: calc(var(--spacing)*3);
+  }
+  .turtle-widget-root .\[\&\>svg\]\:w-2\.5>svg {
+    width: calc(var(--spacing)*2.5);
+  }
+  .turtle-widget-root .\[\&\>svg\]\:w-3>svg {
+    width: calc(var(--spacing)*3);
+  }
   .turtle-widget-root .\[\&\>svg\]\:shrink-0>svg {
     flex-shrink: 0;
   }
+  .turtle-widget-root .\[\&\>svg\]\:text-muted-foreground>svg {
+    color: var(--color-muted-foreground);
+  }
   .turtle-widget-root .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5>svg:not([class*=size-]) {
     width: calc(var(--spacing)*3.5);
     height: calc(var(--spacing)*3.5);
@@ -4871,7 +4990,7 @@
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --blur-sm: 8px;
     --blur-lg: 16px;
-    --blur-xl: 24px;
+    --aspect-video: 16 / 9;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: "DM Sans", sans-serif;
@@ -5119,18 +5238,12 @@
   .turtle-widget-root .mx-4 {
     margin-inline: calc(var(--spacing) * 4);
   }
-  .turtle-widget-root .my-1 {
-    margin-block: calc(var(--spacing) * 1);
-  }
   .turtle-widget-root .mt-5 {
     margin-top: calc(var(--spacing) * 5);
   }
   .turtle-widget-root .mt-auto {
     margin-top: auto;
   }
-  .turtle-widget-root .-mr-1 {
-    margin-right: calc(var(--spacing) * -1);
-  }
   .turtle-widget-root .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
@@ -5143,18 +5256,6 @@
   .turtle-widget-root .hidden {
     display: none;
   }
-  .turtle-widget-root .size-2\.5 {
-    width: calc(var(--spacing) * 2.5);
-    height: calc(var(--spacing) * 2.5);
-  }
-  .turtle-widget-root .size-4 {
-    width: calc(var(--spacing) * 4);
-    height: calc(var(--spacing) * 4);
-  }
-  .turtle-widget-root .size-5 {
-    width: calc(var(--spacing) * 5);
-    height: calc(var(--spacing) * 5);
-  }
   .turtle-widget-root .size-6 {
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
@@ -5240,18 +5341,6 @@
   .turtle-widget-root .animate-pulse {
     animation: var(--animate-pulse);
   }
-  .turtle-widget-root .cursor-default {
-    cursor: default;
-  }
-  .turtle-widget-root .cursor-not-allowed {
-    cursor: not-allowed;
-  }
-  .turtle-widget-root .cursor-pointer {
-    cursor: pointer;
-  }
-  .turtle-widget-root .grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
   .turtle-widget-root .grid-rows-\[auto_1fr\] {
     grid-template-rows: auto 1fr;
   }
@@ -5261,9 +5350,6 @@
   .turtle-widget-root .flex-col {
     flex-direction: column;
   }
-  .turtle-widget-root .flex-row-reverse {
-    flex-direction: row-reverse;
-  }
   .turtle-widget-root .items-center {
     align-items: center;
   }
@@ -5276,18 +5362,9 @@
   .turtle-widget-root .justify-center {
     justify-content: center;
   }
-  .turtle-widget-root .justify-end {
-    justify-content: flex-end;
-  }
-  .turtle-widget-root .gap-1 {
-    gap: calc(var(--spacing) * 1);
-  }
   .turtle-widget-root .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
-  .turtle-widget-root .gap-2\.5 {
-    gap: calc(var(--spacing) * 2.5);
-  }
   .turtle-widget-root .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -5321,9 +5398,6 @@
   .turtle-widget-root .overflow-hidden {
     overflow: hidden;
   }
-  .turtle-widget-root .\!rounded-full {
-    border-radius: var(--radius-full) !important;
-  }
   .turtle-widget-root .rounded-full {
     border-radius: var(--radius-full);
   }
@@ -5346,18 +5420,6 @@
   .turtle-widget-root .\!bg-background {
     background-color: var(--color-background) !important;
   }
-  .turtle-widget-root .bg-background {
-    background-color: var(--color-background);
-  }
-  .turtle-widget-root .bg-foreground {
-    background-color: var(--color-foreground);
-  }
-  .turtle-widget-root .bg-muted {
-    background-color: var(--color-muted);
-  }
-  .turtle-widget-root .bg-neutral-alpha-2 {
-    background-color: var(--color-neutral-alpha-2);
-  }
   .turtle-widget-root .bg-neutral-alpha-10 {
     background-color: var(--color-neutral-alpha-10);
   }
@@ -5391,15 +5453,6 @@
   .turtle-widget-root .p-7 {
     padding: calc(var(--spacing) * 7);
   }
-  .turtle-widget-root .px-1 {
-    padding-inline: calc(var(--spacing) * 1);
-  }
-  .turtle-widget-root .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
-  }
-  .turtle-widget-root .py-1\.5 {
-    padding-block: calc(var(--spacing) * 1.5);
-  }
   .turtle-widget-root .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -5415,9 +5468,6 @@
   .turtle-widget-root .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
-  .turtle-widget-root .text-end {
-    text-align: end;
-  }
   .turtle-widget-root .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -5452,12 +5502,6 @@
   .turtle-widget-root .text-primary {
     color: var(--color-primary);
   }
-  .turtle-widget-root .text-primary\/70 {
-    color: var(--color-primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-primary) 70%, transparent);
-    }
-  }
   .turtle-widget-root .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -5466,22 +5510,10 @@
     --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 .ring-1 {
-    --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);
-  }
-  .turtle-widget-root .ring-white {
-    --tw-ring-color: var(--color-white);
-  }
   .turtle-widget-root .invert {
     --tw-invert: invert(100%);
     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,);
   }
-  .turtle-widget-root .backdrop-blur-xl {
-    --tw-backdrop-blur: blur(var(--blur-xl));
-    -webkit-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,);
-    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,);
-  }
   .turtle-widget-root .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -5514,61 +5546,6 @@
       }
     }
   }
-  .turtle-widget-root .group-hover\:text-primary {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        color: var(--color-primary);
-      }
-    }
-  }
-  .turtle-widget-root .last\:mr-0 {
-    &:last-child {
-      margin-right: calc(var(--spacing) * 0);
-    }
-  }
-  .turtle-widget-root .hover\:border-gradient-white {
-    &:hover {
-      @media (hover: hover) {
-        position: relative;
-        border-style: var(--tw-border-style);
-        border-width: 1px;
-        border-color: transparent;
-        .turtle-widget-root &::before {
-          content: "";
-          pointer-events: none;
-          position: absolute;
-          inset: -1px;
-          border-style: var(--tw-border-style);
-          border-width: 1px;
-          border-color: transparent;
-          border-radius: inherit;
-          background: var(--border-gradient-white);
-          -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
-          -webkit-mask-composite: xor;
-          mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
-          mask-composite: exclude;
-        }
-      }
-    }
-  }
-  .turtle-widget-root .hover\:bg-neutral-alpha-5 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-neutral-alpha-5);
-      }
-    }
-  }
-  .turtle-widget-root .lg\:-mr-4 {
-    @media (width >= 64rem) {
-      margin-right: calc(var(--spacing) * -4);
-    }
-  }
-  .turtle-widget-root .lg\:size-6 {
-    @media (width >= 64rem) {
-      width: calc(var(--spacing) * 6);
-      height: calc(var(--spacing) * 6);
-    }
-  }
 }
 @layer theme, base, components, utilities;
 @layer theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turtleclub/earn-widget",
-  "version": "0.4.0",
+  "version": "0.5.0-beta.0",
   "description": "Configurable and self-contained Turtle Earn widget for third-party integration",
   "license": "MIT",
   "repository": {
@@ -41,9 +41,10 @@
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.11",
     "@turtleclub/chains": "0.3.0",
-    "@turtleclub/hooks": "0.4.0",
-    "@turtleclub/ui": "0.6.0",
-    "@turtleclub/utils": "0.3.0",
+    "@turtleclub/hooks": "0.5.0-beta.0",
+    "@turtleclub/opportunities": "0.1.0-beta.0",
+    "@turtleclub/ui": "0.7.0-beta.1",
+    "@turtleclub/utils": "0.4.0-beta.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "jotai": "^2.10.5",
@@ -84,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bff2eb652056dba47b8bea59635da37d8ae5534d"
+  "gitHead": "d896f0404e2bcb958a52def686e57893b4c68f6b"
 }