@retab/react 0.0.1 → 0.0.3

package/dist/styles.css

@@ -16,7 +16,9 @@
     --color-red-950: oklch(25.8% 0.092 26.042);
     --color-orange-50: oklch(98% 0.016 73.684);
     --color-orange-200: oklch(90.1% 0.076 70.697);
+    --color-orange-400: oklch(75% 0.183 55.934);
     --color-orange-500: oklch(70.5% 0.213 47.604);
+    --color-orange-600: oklch(64.6% 0.222 41.116);
     --color-orange-800: oklch(47% 0.157 37.304);
     --color-amber-50: oklch(98.7% 0.022 95.277);
     --color-amber-100: oklch(96.2% 0.059 95.617);
@@ -28,6 +30,7 @@
     --color-amber-700: oklch(55.5% 0.163 48.998);
     --color-amber-800: oklch(47.3% 0.137 46.201);
     --color-amber-900: oklch(41.4% 0.112 45.904);
+    --color-amber-950: oklch(27.9% 0.077 45.635);
     --color-yellow-50: oklch(98.7% 0.026 102.212);
     --color-yellow-200: oklch(94.5% 0.129 101.54);
     --color-yellow-400: oklch(85.2% 0.199 91.936);
@@ -35,11 +38,13 @@
     --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-yellow-700: oklch(55.4% 0.135 66.442);
     --color-green-50: oklch(98.2% 0.018 155.826);
+    --color-green-100: oklch(96.2% 0.044 156.743);
     --color-green-200: oklch(92.5% 0.084 155.995);
     --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-700: oklch(52.7% 0.154 150.069);
+    --color-green-800: oklch(44.8% 0.119 151.328);
     --color-emerald-50: oklch(97.9% 0.021 166.113);
     --color-emerald-100: oklch(95% 0.052 163.051);
     --color-emerald-200: oklch(90.5% 0.093 164.15);
@@ -117,6 +122,7 @@
     --color-zinc-300: oklch(87.1% 0.006 286.286);
     --color-zinc-400: oklch(70.5% 0.015 286.067);
     --color-zinc-500: oklch(55.2% 0.016 285.938);
+    --color-zinc-600: oklch(44.2% 0.017 285.786);
     --color-zinc-800: oklch(27.4% 0.006 286.033);
     --color-zinc-900: oklch(21% 0.006 285.885);
     --color-neutral-50: oklch(98.5% 0 0);
@@ -171,6 +177,7 @@
     --leading-relaxed: 1.625;
     --radius-xs: 0.125rem;
     --radius-2xl: 1rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -453,6 +460,9 @@
   .z-30 {
     z-index: 30;
   }
+  .z-40 {
+    z-index: 40;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -501,6 +511,9 @@
       max-width: 96rem;
     }
   }
+  .\!m-0 {
+    margin: calc(var(--spacing) * 0) !important;
+  }
   .m-0 {
     margin: calc(var(--spacing) * 0);
   }
@@ -594,6 +607,9 @@
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -953,6 +969,9 @@
   .min-h-\[30px\] {
     min-height: 30px;
   }
+  .min-h-\[50px\] {
+    min-height: 50px;
+  }
   .min-h-\[80px\] {
     min-height: 80px;
   }
@@ -1013,6 +1032,9 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -1136,9 +1158,21 @@
   .max-w-\[80vw\] {
     max-width: 80vw;
   }
+  .max-w-\[120px\] {
+    max-width: 120px;
+  }
+  .max-w-\[150px\] {
+    max-width: 150px;
+  }
   .max-w-\[200px\] {
     max-width: 200px;
   }
+  .max-w-\[220px\] {
+    max-width: 220px;
+  }
+  .max-w-\[250px\] {
+    max-width: 250px;
+  }
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
@@ -1330,9 +1364,15 @@
   .cursor-col-resize {
     cursor: col-resize;
   }
+  .cursor-context-menu {
+    cursor: context-menu;
+  }
   .cursor-default {
     cursor: default;
   }
+  .cursor-help {
+    cursor: help;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1633,10 +1673,6 @@
     border-inline-style: var(--tw-border-style);
     border-inline-width: 0px;
   }
-  .border-y {
-    border-block-style: var(--tw-border-style);
-    border-block-width: 1px;
-  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1710,6 +1746,15 @@
   .border-amber-400 {
     border-color: var(--color-amber-400);
   }
+  .border-amber-500 {
+    border-color: var(--color-amber-500);
+  }
+  .border-amber-500\/30 {
+    border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
+    }
+  }
   .border-black {
     border-color: var(--color-black);
   }
@@ -1857,6 +1902,9 @@
   .border-l-transparent {
     border-left-color: transparent;
   }
+  .\!bg-white {
+    background-color: var(--color-white) !important;
+  }
   .bg-\[\#1E1E1E\] {
     background-color: #1E1E1E;
   }
@@ -1878,9 +1926,33 @@
   .bg-amber-50 {
     background-color: var(--color-amber-50);
   }
+  .bg-amber-50\/30 {
+    background-color: color-mix(in srgb, oklch(98.7% 0.022 95.277) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-amber-50) 30%, transparent);
+    }
+  }
+  .bg-amber-50\/50 {
+    background-color: color-mix(in srgb, oklch(98.7% 0.022 95.277) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-amber-50) 50%, transparent);
+    }
+  }
   .bg-amber-100 {
     background-color: var(--color-amber-100);
   }
+  .bg-amber-100\/70 {
+    background-color: color-mix(in srgb, oklch(96.2% 0.059 95.617) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-amber-100) 70%, transparent);
+    }
+  }
+  .bg-amber-950\/20 {
+    background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-amber-950) 20%, transparent);
+    }
+  }
   .bg-background {
     background-color: var(--background);
   }
@@ -1890,6 +1962,12 @@
       background-color: color-mix(in oklab, var(--background) 3%, transparent);
     }
   }
+  .bg-background\/80 {
+    background-color: var(--background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--background) 80%, transparent);
+    }
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1908,9 +1986,6 @@
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
-  .bg-blue-600 {
-    background-color: var(--color-blue-600);
-  }
   .bg-border {
     background-color: var(--border);
   }
@@ -1947,12 +2022,18 @@
   .bg-gray-300 {
     background-color: var(--color-gray-300);
   }
+  .bg-gray-400 {
+    background-color: var(--color-gray-400);
+  }
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
   .bg-green-50 {
     background-color: var(--color-green-50);
   }
+  .bg-green-500 {
+    background-color: var(--color-green-500);
+  }
   .bg-green-600 {
     background-color: var(--color-green-600);
   }
@@ -2043,8 +2124,8 @@
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
-  .bg-red-600 {
-    background-color: var(--color-red-600);
+  .bg-red-500 {
+    background-color: var(--color-red-500);
   }
   .bg-red-950\/20 {
     background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 20%, transparent);
@@ -2121,6 +2202,9 @@
       background-color: color-mix(in oklab, var(--color-violet-50) 20%, transparent);
     }
   }
+  .bg-violet-100 {
+    background-color: var(--color-violet-100);
+  }
   .bg-violet-100\/20 {
     background-color: color-mix(in srgb, oklch(94.3% 0.029 294.588) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2163,6 +2247,12 @@
   .bg-yellow-50 {
     background-color: var(--color-yellow-50);
   }
+  .bg-yellow-500 {
+    background-color: var(--color-yellow-500);
+  }
+  .bg-zinc-50 {
+    background-color: var(--color-zinc-50);
+  }
   .bg-zinc-100 {
     background-color: var(--color-zinc-100);
   }
@@ -2208,12 +2298,18 @@
   .object-cover {
     object-fit: cover;
   }
+  .\!p-0 {
+    padding: calc(var(--spacing) * 0) !important;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
   .p-0\! {
     padding: calc(var(--spacing) * 0) !important;
   }
+  .p-0\.5 {
+    padding: calc(var(--spacing) * 0.5);
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -2461,6 +2557,10 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-xs\/5\.5 {
+    font-size: var(--text-xs);
+    line-height: calc(var(--spacing) * 5.5);
+  }
   .text-\[0\.8rem\] {
     font-size: 0.8rem;
   }
@@ -2554,15 +2654,36 @@
   .text-\[\#D25F5F\] {
     color: #D25F5F;
   }
+  .text-\[\#ca9d23\] {
+    color: #ca9d23;
+  }
+  .text-\[\#da8b14\] {
+    color: #da8b14;
+  }
   .text-accent-foreground {
     color: var(--accent-foreground);
   }
+  .text-amber-200 {
+    color: var(--color-amber-200);
+  }
+  .text-amber-300 {
+    color: var(--color-amber-300);
+  }
+  .text-amber-400 {
+    color: var(--color-amber-400);
+  }
   .text-amber-500 {
     color: var(--color-amber-500);
   }
   .text-amber-600 {
     color: var(--color-amber-600);
   }
+  .text-amber-600\/60 {
+    color: color-mix(in srgb, oklch(66.6% 0.179 58.318) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-amber-600) 60%, transparent);
+    }
+  }
   .text-amber-700 {
     color: var(--color-amber-700);
   }
@@ -2584,6 +2705,9 @@
   .text-blue-600 {
     color: var(--color-blue-600);
   }
+  .text-blue-700 {
+    color: var(--color-blue-700);
+  }
   .text-blue-800 {
     color: var(--color-blue-800);
   }
@@ -2668,12 +2792,21 @@
       color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
     }
   }
+  .text-muted-foreground\/60 {
+    color: var(--muted-foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
+    }
+  }
   .text-neutral-600 {
     color: var(--color-neutral-600);
   }
   .text-neutral-800 {
     color: var(--color-neutral-800);
   }
+  .text-orange-600 {
+    color: var(--color-orange-600);
+  }
   .text-orange-800 {
     color: var(--color-orange-800);
   }
@@ -2761,12 +2894,18 @@
   .text-stone-300 {
     color: var(--color-stone-300);
   }
+  .text-stone-600 {
+    color: var(--color-stone-600);
+  }
   .text-stone-800 {
     color: var(--color-stone-800);
   }
   .text-transparent {
     color: transparent;
   }
+  .text-violet-600 {
+    color: var(--color-violet-600);
+  }
   .text-violet-600\/20 {
     color: color-mix(in srgb, oklch(54.1% 0.281 293.009) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2785,12 +2924,18 @@
   .text-yellow-400 {
     color: var(--color-yellow-400);
   }
+  .text-zinc-300 {
+    color: var(--color-zinc-300);
+  }
   .text-zinc-400 {
     color: var(--color-zinc-400);
   }
   .text-zinc-500 {
     color: var(--color-zinc-500);
   }
+  .text-zinc-600 {
+    color: var(--color-zinc-600);
+  }
   .text-zinc-800 {
     color: var(--color-zinc-800);
   }
@@ -2839,6 +2984,10 @@
   .opacity-100 {
     opacity: 100%;
   }
+  .\!shadow-none {
+    --tw-shadow: 0 0 #0000 !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
   .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);
@@ -3002,6 +3151,10 @@
   .transition-none {
     transition-property: none;
   }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -3018,6 +3171,13 @@
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+  .will-change-transform {
+    will-change: transform;
+  }
   .fade-in-0 {
     --tw-enter-opacity: calc(0/100);
     --tw-enter-opacity: 0;
@@ -3113,20 +3273,6 @@
       }
     }
   }
-  .group-hover\:-rotate-\[360deg\] {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        rotate: calc(360deg * -1);
-      }
-    }
-  }
-  .group-hover\:rotate-0 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        rotate: 0deg;
-      }
-    }
-  }
   .group-hover\:bg-\[\#4D4D4D\] {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3575,17 +3721,17 @@
       }
     }
   }
-  .hover\:bg-blue-100 {
+  .hover\:bg-amber-200 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-blue-100);
+        background-color: var(--color-amber-200);
       }
     }
   }
-  .hover\:bg-blue-700 {
+  .hover\:bg-blue-100 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-blue-700);
+        background-color: var(--color-blue-100);
       }
     }
   }
@@ -3800,13 +3946,6 @@
       }
     }
   }
-  .hover\:bg-red-700 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-red-700);
-      }
-    }
-  }
   .hover\:bg-secondary\/80 {
     &:hover {
       @media (hover: hover) {
@@ -4045,6 +4184,20 @@
       }
     }
   }
+  .hover\:text-amber-900 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-amber-900);
+      }
+    }
+  }
+  .hover\:text-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-blue-500);
+      }
+    }
+  }
   .hover\:text-blue-900 {
     &:hover {
       @media (hover: hover) {
@@ -4873,6 +5026,11 @@
       }
     }
   }
+  .data-\[state\=active\]\:bg-amber-100 {
+    &[data-state="active"] {
+      background-color: var(--color-amber-100);
+    }
+  }
   .data-\[state\=active\]\:bg-background {
     &[data-state="active"] {
       background-color: var(--background);
@@ -4883,11 +5041,26 @@
       background-color: var(--color-gray-200);
     }
   }
+  .data-\[state\=active\]\:bg-green-100 {
+    &[data-state="active"] {
+      background-color: var(--color-green-100);
+    }
+  }
+  .data-\[state\=active\]\:text-amber-800 {
+    &[data-state="active"] {
+      color: var(--color-amber-800);
+    }
+  }
   .data-\[state\=active\]\:text-gray-800 {
     &[data-state="active"] {
       color: var(--color-gray-800);
     }
   }
+  .data-\[state\=active\]\:text-green-800 {
+    &[data-state="active"] {
+      color: var(--color-green-800);
+    }
+  }
   .data-\[state\=active\]\:shadow-none {
     &[data-state="active"] {
       --tw-shadow: 0 0 #0000;
@@ -4951,6 +5124,11 @@
       background-color: var(--color-yellow-200) !important;
     }
   }
+  .data-\[state\=checked\]\:bg-emerald-400 {
+    &[data-state="checked"] {
+      background-color: var(--color-emerald-400);
+    }
+  }
   .data-\[state\=checked\]\:bg-primary {
     &[data-state="checked"] {
       background-color: var(--primary);
@@ -5209,6 +5387,11 @@
       background-color: var(--input);
     }
   }
+  .data-\[state\=unchecked\]\:bg-orange-400 {
+    &[data-state="unchecked"] {
+      background-color: var(--color-orange-400);
+    }
+  }
   .data-\[state\=visible\]\:animate-in {
     &[data-state="visible"] {
       animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
@@ -5632,6 +5815,32 @@
       line-height: var(--leading-relaxed);
     }
   }
+  .\[\&_span\]\:h-2\.5 {
+    & span {
+      height: calc(var(--spacing) * 2.5);
+    }
+  }
+  .\[\&_span\]\:w-2\.5 {
+    & span {
+      width: calc(var(--spacing) * 2.5);
+    }
+  }
+  .\[\&_span\]\:data-\[state\=checked\]\:translate-x-\[10px\] {
+    & span {
+      &[data-state="checked"] {
+        --tw-translate-x: 10px;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .\[\&_span\]\:data-\[state\=unchecked\]\:translate-x-\[2px\] {
+    & span {
+      &[data-state="unchecked"] {
+        --tw-translate-x: 2px;
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .\[\&_svg\]\:pointer-events-none {
     & svg {
       pointer-events: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retab/react",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Retab React widgets for document extraction",
   "main": "dist/index.js",
   "module": "dist/index.mjs",