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

package/dist/styles.css

@@ -40,6 +40,7 @@
     --text-7xl--line-height: 1;
     --text-8xl: 6rem;
     --text-8xl--line-height: 1;
+    --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -208,6 +209,9 @@
   .turtle-widget-root .absolute {
     position: absolute;
   }
+  .turtle-widget-root .fixed {
+    position: fixed;
+  }
   .turtle-widget-root .relative {
     position: relative;
   }
@@ -232,15 +236,9 @@
   .turtle-widget-root .bottom-3 {
     bottom: calc(var(--spacing) * 3);
   }
-  .turtle-widget-root .left-0 {
-    left: calc(var(--spacing) * 0);
-  }
   .turtle-widget-root .left-4 {
     left: calc(var(--spacing) * 4);
   }
-  .turtle-widget-root .z-10 {
-    z-index: 10;
-  }
   .turtle-widget-root .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -271,12 +269,24 @@
   .turtle-widget-root .mx-auto {
     margin-inline: auto;
   }
+  .turtle-widget-root .my-5 {
+    margin-block: calc(var(--spacing) * 5);
+  }
+  .turtle-widget-root .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .turtle-widget-root .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .turtle-widget-root .mt-\[120\%\] {
+    margin-top: 120%;
+  }
   .turtle-widget-root .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .turtle-widget-root .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .turtle-widget-root .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
@@ -295,6 +305,10 @@
   .turtle-widget-root .inline-flex {
     display: inline-flex;
   }
+  .turtle-widget-root .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
   .turtle-widget-root .h-4 {
     height: calc(var(--spacing) * 4);
   }
@@ -316,18 +330,21 @@
   .turtle-widget-root .h-10 {
     height: calc(var(--spacing) * 10);
   }
-  .turtle-widget-root .h-11 {
-    height: calc(var(--spacing) * 11);
-  }
   .turtle-widget-root .h-12 {
     height: calc(var(--spacing) * 12);
   }
   .turtle-widget-root .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .turtle-widget-root .h-\[30px\] {
+    height: 30px;
+  }
   .turtle-widget-root .h-full {
     height: 100%;
   }
+  .turtle-widget-root .h-px {
+    height: 1px;
+  }
   .turtle-widget-root .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -349,27 +366,24 @@
   .turtle-widget-root .w-10 {
     width: calc(var(--spacing) * 10);
   }
-  .turtle-widget-root .w-11 {
-    width: calc(var(--spacing) * 11);
-  }
   .turtle-widget-root .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .turtle-widget-root .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
   .turtle-widget-root .w-24 {
     width: calc(var(--spacing) * 24);
   }
   .turtle-widget-root .w-32 {
     width: calc(var(--spacing) * 32);
   }
-  .turtle-widget-root .w-\[82\%\] {
-    width: 82%;
-  }
-  .turtle-widget-root .w-auto {
-    width: auto;
-  }
   .turtle-widget-root .w-full {
     width: 100%;
   }
+  .turtle-widget-root .max-w-\[120px\] {
+    max-width: 120px;
+  }
   .turtle-widget-root .max-w-lg {
     max-width: var(--container-lg);
   }
@@ -388,6 +402,13 @@
   .turtle-widget-root .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .turtle-widget-root .shrink-0 {
+    flex-shrink: 0;
+  }
+  .turtle-widget-root .-translate-x-2\.5 {
+    --tw-translate-x: calc(var(--spacing) * -2.5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .turtle-widget-root .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -428,6 +449,9 @@
   .turtle-widget-root .justify-start {
     justify-content: flex-start;
   }
+  .turtle-widget-root .gap-0\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
   .turtle-widget-root .gap-1\.5 {
     gap: calc(var(--spacing) * 1.5);
   }
@@ -440,6 +464,9 @@
   .turtle-widget-root .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .turtle-widget-root .gap-\[5px\] {
+    gap: 5px;
+  }
   .turtle-widget-root .space-y-2 {
     .turtle-widget-root :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -468,6 +495,11 @@
       margin-inline-end: calc(calc(var(--spacing) * -1.5) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .turtle-widget-root .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .turtle-widget-root .overflow-hidden {
     overflow: hidden;
   }
@@ -486,6 +518,10 @@
   .turtle-widget-root .rounded-md {
     border-radius: var(--radius-md);
   }
+  .turtle-widget-root .rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
   .turtle-widget-root .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -545,11 +581,14 @@
   .turtle-widget-root .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
+  .turtle-widget-root .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
+  }
   .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-4 {
+    padding-right: calc(var(--spacing) * 4);
   }
   .turtle-widget-root .pr-12 {
     padding-right: calc(var(--spacing) * 12);
@@ -563,12 +602,12 @@
   .turtle-widget-root .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
-  .turtle-widget-root .pl-14 {
-    padding-left: calc(var(--spacing) * 14);
-  }
   .turtle-widget-root .text-center {
     text-align: center;
   }
+  .turtle-widget-root .text-right {
+    text-align: right;
+  }
   .turtle-widget-root .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -620,12 +659,18 @@
     --tw-tracking: var(--tracking-wider);
     letter-spacing: var(--tracking-wider);
   }
+  .turtle-widget-root .whitespace-nowrap {
+    white-space: nowrap;
+  }
   .turtle-widget-root .capitalize {
     text-transform: capitalize;
   }
   .turtle-widget-root .uppercase {
     text-transform: uppercase;
   }
+  .turtle-widget-root .underline {
+    text-decoration-line: underline;
+  }
   .turtle-widget-root .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -649,10 +694,6 @@
     --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 .filter {
     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,);
   }
@@ -683,12 +724,6 @@
       border-color: transparent;
     }
   }
-  .turtle-widget-root .focus\:ring-0 {
-    .turtle-widget-root &:focus {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + 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 .focus\:ring-2 {
     .turtle-widget-root &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -701,6 +736,16 @@
       outline-style: none;
     }
   }
+  .turtle-widget-root .sm\:min-h-\[690px\] {
+    @media (width >= 40rem) {
+      min-height: 690px;
+    }
+  }
+  .turtle-widget-root .lg\:justify-start {
+    @media (width >= 64rem) {
+      justify-content: flex-start;
+    }
+  }
   .turtle-widget-root .\[\&_button\]\:w-32 {
     .turtle-widget-root & button {
       width: calc(var(--spacing) * 32);
@@ -802,6 +847,7 @@
     --text-7xl--line-height: 1;
     --text-8xl: 6rem;
     --text-8xl--line-height: 1;
+    --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -1041,7 +1087,73 @@
     color: var(--foreground);
   }
 }
-@layer components;
+@layer components {
+  .turtle-widget-root .managed-table {
+    border-collapse: separate;
+    border-spacing: 0 10px;
+  }
+  .turtle-widget-root .managed-table tr {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading,var(--text-sm--line-height));
+  }
+  @media (hover:hover) {
+    .turtle-widget-root .managed-table tr:hover {
+      background-color: #0000;
+    }
+  }
+  .turtle-widget-root .managed-table thead tr th {
+    height: calc(var(--spacing)*6);
+    padding-inline: calc(var(--spacing)*3);
+    padding-block: calc(var(--spacing)*1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading,var(--text-xs--line-height));
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+    color: var(--muted-foreground);
+  }
+  .turtle-widget-root .managed-table tbody tr>td {
+    background-color: var(--muted);
+    height: 38px;
+  }
+  @supports (color:color-mix(in lab,red,red)) {
+    .turtle-widget-root .managed-table tbody tr>td {
+      background-color: var(--muted);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab,var(--muted)5%,transparent);
+      }
+    }
+  }
+  .turtle-widget-root .managed-table tbody tr>td {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  @media (min-width:64rem) {
+    .turtle-widget-root .managed-table tbody tr>td {
+      padding-block: calc(var(--spacing)*1);
+    }
+  }
+  .turtle-widget-root .managed-table tbody tr>td:first-child {
+    padding-left: calc(var(--spacing)*4);
+    border-top-left-radius: 3.40282e38px;
+    border-bottom-left-radius: 3.40282e38px;
+  }
+  .turtle-widget-root .managed-table tbody tr>td:last-child {
+    padding-right: calc(var(--spacing)*4);
+    border-top-right-radius: 3.40282e38px;
+    border-bottom-right-radius: 3.40282e38px;
+  }
+  .turtle-widget-root .managed-table tbody tr:hover>td {
+    background-color: var(--muted);
+  }
+  @supports (color:color-mix(in lab,red,red)) {
+    .turtle-widget-root .managed-table tbody tr:hover>td {
+      background-color: var(--muted);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab,var(--muted)40%,transparent);
+      }
+    }
+  }
+}
 @layer utilities {
   .turtle-widget-root .pointer-events-none {
     pointer-events: none;
@@ -1201,6 +1313,9 @@
   .turtle-widget-root .max-h-\(--radix-select-content-available-height\) {
     max-height: var(--radix-select-content-available-height);
   }
+  .turtle-widget-root .max-h-\[600px\] {
+    max-height: 600px;
+  }
   .turtle-widget-root .w-2 {
     width: calc(var(--spacing)*2);
   }
@@ -1397,6 +1512,9 @@
     white-space: nowrap;
     overflow: hidden;
   }
+  .turtle-widget-root .overflow-auto {
+    overflow: auto;
+  }
   .turtle-widget-root .overflow-hidden {
     overflow: hidden;
   }
@@ -1671,6 +1789,9 @@
   .turtle-widget-root .text-right {
     text-align: right;
   }
+  .turtle-widget-root .align-middle {
+    vertical-align: middle;
+  }
   .turtle-widget-root .font-mono {
     font-family: var(--font-mono);
   }
@@ -1734,6 +1855,10 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .turtle-widget-root .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
   .turtle-widget-root .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);

package/package.json

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