@corbits/react-ui 0.1.0 → 0.3.0

package/dist/styles.css

@@ -5,6 +5,9 @@
   :root, :host {
     --font-sans: "Red Hat Display", "Open Sans", Roboto, Arial, sans-serif;
     --font-mono: "Space Mono", "Fira Code", Monaco, Consolas, monospace;
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-900: oklch(21% 0.034 264.665);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -26,8 +29,11 @@
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
+    --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -48,10 +54,6 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: "Red Hat Display", "Open Sans", Roboto, Arial, sans-serif;
     --default-mono-font-family: "Space Mono", "Fira Code", Monaco, Consolas, monospace;
-    --text-icon-nav: var(--icon-size-nav);
-    --text-icon-topbar: var(--icon-size-topbar);
-    --text-icon-button: var(--icon-size-button);
-    --text-icon-checkbox: var(--icon-size-checkbox);
   }
 }
 @layer base {
@@ -256,6 +258,9 @@
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
   .top-6 {
     top: calc(var(--spacing) * 6);
   }
@@ -277,15 +282,24 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
   .right-\[0\.85rem\] {
     right: 0.85rem;
   }
+  .right-auto {
+    right: auto;
+  }
   .-bottom-0\.5 {
     bottom: calc(var(--spacing) * -0.5);
   }
   .bottom-6 {
     bottom: calc(var(--spacing) * 6);
   }
+  .-left-0\.5 {
+    left: calc(var(--spacing) * -0.5);
+  }
   .left-0 {
     left: 0px;
   }
@@ -301,6 +315,12 @@
   .z-50 {
     z-index: 50;
   }
+  .z-90 {
+    z-index: 90;
+  }
+  .z-100 {
+    z-index: 100;
+  }
   .col-start-1 {
     grid-column-start: 1;
   }
@@ -492,6 +512,10 @@
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
   }
+  .size-14 {
+    width: calc(var(--spacing) * 14);
+    height: calc(var(--spacing) * 14);
+  }
   .size-\[1\.8rem\] {
     width: 1.8rem;
     height: 1.8rem;
@@ -524,6 +548,12 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-6\.5 {
+    height: calc(var(--spacing) * 6.5);
+  }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
@@ -539,6 +569,9 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
+  .h-28 {
+    height: calc(var(--spacing) * 28);
+  }
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
@@ -551,6 +584,9 @@
   .h-96 {
     height: calc(var(--spacing) * 96);
   }
+  .h-\[18px\] {
+    height: 18px;
+  }
   .h-\[520px\] {
     height: 520px;
   }
@@ -563,6 +599,9 @@
   .h-px {
     height: 1px;
   }
+  .max-h-40 {
+    max-height: calc(var(--spacing) * 40);
+  }
   .max-h-48 {
     max-height: calc(var(--spacing) * 48);
   }
@@ -572,6 +611,9 @@
   .max-h-64 {
     max-height: calc(var(--spacing) * 64);
   }
+  .max-h-80 {
+    max-height: calc(var(--spacing) * 80);
+  }
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
@@ -581,6 +623,9 @@
   .max-h-\[75vh\] {
     max-height: 75vh;
   }
+  .max-h-\[80vh\] {
+    max-height: 80vh;
+  }
   .max-h-\[480px\] {
     max-height: 480px;
   }
@@ -602,6 +647,9 @@
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
+  .min-h-dvh {
+    min-height: 100dvh;
+  }
   .min-h-full {
     min-height: 100%;
   }
@@ -617,6 +665,9 @@
   .w-1\/3 {
     width: calc(1 / 3 * 100%);
   }
+  .w-3\/4 {
+    width: calc(3 / 4 * 100%);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
@@ -626,6 +677,9 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -662,6 +716,9 @@
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
+  .w-\[18px\] {
+    width: 18px;
+  }
   .w-\[30px\] {
     width: 30px;
   }
@@ -683,9 +740,15 @@
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
+  .max-w-44 {
+    max-width: calc(var(--spacing) * 44);
+  }
   .max-w-64 {
     max-width: calc(var(--spacing) * 64);
   }
+  .max-w-\[26rem\] {
+    max-width: 26rem;
+  }
   .max-w-\[32ch\] {
     max-width: 32ch;
   }
@@ -728,6 +791,9 @@
   .min-w-32 {
     min-width: calc(var(--spacing) * 32);
   }
+  .min-w-64 {
+    min-width: calc(var(--spacing) * 64);
+  }
   .min-w-\[3\.5rem\] {
     min-width: 3.5rem;
   }
@@ -819,6 +885,12 @@
   .\[animation\:corbits-boot-sweep_1\.4s_ease-in-out_infinite\] {
     animation: corbits-boot-sweep 1.4s ease-in-out infinite;
   }
+  .\[animation\:corbits-fade-in_150ms_ease-out\] {
+    animation: corbits-fade-in 150ms ease-out;
+  }
+  .\[animation\:corbits-fade-in_200ms_ease-out\] {
+    animation: corbits-fade-in 200ms ease-out;
+  }
   .\[animation\:corbits-rail-block-in_200ms_var\(--ease-out\)_both\] {
     animation: corbits-rail-block-in 200ms var(--ease-out) both;
   }
@@ -864,6 +936,9 @@
   .resize-none {
     resize: none;
   }
+  .resize-y {
+    resize: vertical;
+  }
   .\[scrollbar-width\:thin\] {
     scrollbar-width: thin;
   }
@@ -894,6 +969,9 @@
   .grid-cols-\[minmax\(7rem\,11rem\)_1fr_minmax\(4\.5rem\,6rem\)\] {
     grid-template-columns: minmax(7rem,11rem) 1fr minmax(4.5rem,6rem);
   }
+  .grid-cols-\[repeat\(auto-fill\,minmax\(11rem\,1fr\)\)\] {
+    grid-template-columns: repeat(auto-fill,minmax(11rem,1fr));
+  }
   .grid-rows-\[0fr\] {
     grid-template-rows: 0fr;
   }
@@ -930,6 +1008,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .gap-0 {
     gap: 0px;
   }
@@ -992,6 +1073,16 @@
   .gap-y-1 {
     row-gap: var(--spacing);
   }
+  :where(.divide-y > :not(:last-child)) {
+    --tw-divide-y-reverse: 0;
+    border-bottom-style: var(--tw-border-style);
+    border-top-style: var(--tw-border-style);
+    border-top-width: calc(1px * var(--tw-divide-y-reverse));
+    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  }
+  :where(.divide-border > :not(:last-child)) {
+    border-color: var(--border);
+  }
   .self-start {
     align-self: flex-start;
   }
@@ -1030,9 +1121,15 @@
   .rounded-\[3px\] {
     border-radius: 3px;
   }
+  .rounded-\[10px\] {
+    border-radius: 10px;
+  }
   .rounded-\[12px\] {
     border-radius: 12px;
   }
+  .rounded-\[var\(--avatar-radius\,var\(--radius\)\)\] {
+    border-radius: var(--avatar-radius,var(--radius));
+  }
   .rounded-\[var\(--sidebar-row-radius\)\] {
     border-radius: var(--sidebar-row-radius);
   }
@@ -1178,6 +1275,15 @@
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
+  .bg-black\/60 {
+    background-color: color-mix(in srgb, #000 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+  }
+  .bg-blue-500 {
+    background-color: var(--color-blue-500);
+  }
   .bg-border {
     background-color: var(--border);
   }
@@ -1229,6 +1335,9 @@
       background-color: color-mix(in oklab, var(--muted) 40%, transparent);
     }
   }
+  .bg-ok {
+    background-color: var(--ok);
+  }
   .bg-popover {
     background-color: var(--popover);
   }
@@ -1274,6 +1383,9 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-white {
+    background-color: var(--color-white);
+  }
   .\[background-image\:linear-gradient\(90deg\,var\(--muted-foreground\)_40\%\,var\(--foreground\)_50\%\,var\(--muted-foreground\)_60\%\)\] {
     background-image: linear-gradient(90deg,var(--muted-foreground) 40%,var(--foreground) 50%,var(--muted-foreground) 60%);
   }
@@ -1307,6 +1419,9 @@
   .fill-thinking-base {
     fill: var(--thinking-base);
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-0 {
     padding: 0px;
   }
@@ -1391,6 +1506,9 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
   .py-5 {
     padding-block: calc(var(--spacing) * 5);
   }
@@ -1436,6 +1554,9 @@
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -1478,6 +1599,10 @@
   .font-sans {
     font-family: "Red Hat Display", "Open Sans", Roboto, Arial, sans-serif;
   }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
   .text-3xl {
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
@@ -1511,6 +1636,12 @@
   .text-\[0\.8125rem\] {
     font-size: 0.8125rem;
   }
+  .text-\[2\.75rem\] {
+    font-size: 2.75rem;
+  }
+  .text-\[6px\] {
+    font-size: 6px;
+  }
   .text-\[7px\] {
     font-size: 7px;
   }
@@ -1601,6 +1732,10 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
@@ -1664,12 +1799,15 @@
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
-  .text-accent {
-    color: var(--accent);
+  .\!text-white {
+    color: var(--color-white) !important;
   }
   .text-accent-foreground {
     color: var(--accent-foreground);
   }
+  .text-black {
+    color: var(--color-black);
+  }
   .text-card-foreground {
     color: var(--card-foreground);
   }
@@ -1682,6 +1820,9 @@
   .text-foreground {
     color: var(--foreground);
   }
+  .text-gray-900 {
+    color: var(--color-gray-900);
+  }
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
@@ -1691,24 +1832,15 @@
   .text-popover-foreground {
     color: var(--popover-foreground);
   }
-  .text-primary {
-    color: var(--primary);
-  }
   .text-primary-emphasis {
     color: var(--primary-emphasis);
   }
   .text-primary-foreground {
     color: var(--primary-foreground);
   }
-  .text-secondary {
-    color: var(--secondary);
-  }
   .text-secondary-foreground {
     color: var(--secondary-foreground);
   }
-  .text-success {
-    color: var(--success);
-  }
   .text-success-foreground {
     color: var(--success-foreground);
   }
@@ -1724,6 +1856,9 @@
   .capitalize {
     text-transform: capitalize;
   }
+  .lowercase {
+    text-transform: lowercase;
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -1750,6 +1885,10 @@
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
+  .antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
   .accent-\[var\(--primary\)\] {
     accent-color: var(--primary);
   }
@@ -1802,9 +1941,16 @@
     --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);
   }
+  .ring-2 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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);
+  }
   .ring-background {
     --tw-ring-color: var(--background);
   }
+  .ring-primary {
+    --tw-ring-color: var(--primary);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1855,6 +2001,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2046,6 +2197,17 @@
       opacity: 100%;
     }
   }
+  .focus\:border-border-strong:focus {
+    border-color: var(--border-strong);
+  }
+  .focus\:ring-1:focus {
+    --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);
+  }
+  .focus\:outline-none:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
   .focus-visible\:text-foreground:focus-visible {
     color: var(--foreground);
   }
@@ -2063,6 +2225,9 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .active\:scale-\[0\.97\]:active {
+    scale: 0.97;
+  }
   .active\:brightness-95:active {
     --tw-brightness: brightness(95%);
     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,);
@@ -2274,6 +2439,12 @@
     .lg\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
+    .lg\:flex-col {
+      flex-direction: column;
+    }
+    .lg\:overflow-visible {
+      overflow: visible;
+    }
     .lg\:border-r {
       border-right-style: var(--tw-border-style);
       border-right-width: 1px;
@@ -2284,6 +2455,28 @@
     .lg\:pr-6 {
       padding-right: calc(var(--spacing) * 6);
     }
+    .lg\:pb-0 {
+      padding-bottom: 0px;
+    }
+  }
+  .dark\:bg-\[color-mix\(in_srgb\,var\(--foreground\)_14\%\,var\(--muted\)\)\]:is(.dark *) {
+    background-color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--foreground) 14%,var(--muted));
+    }
+  }
+  .dark\:bg-black:is(.dark *) {
+    background-color: var(--color-black);
+  }
+  .dark\:text-gray-100:is(.dark *) {
+    color: var(--color-gray-100);
+  }
+  .dark\:shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--foreground\)_14\%\,transparent\)\]:is(.dark *) {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--foreground));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--foreground) 14%,transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   @media (forced-colors: active) {
     .forced-colors\:animate-none {
@@ -2305,6 +2498,10 @@
   .\[\&_\[aria-label\=Close\]\]\:hidden [aria-label=Close] {
     display: none;
   }
+  .\[\&_svg\]\:size-3 svg {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
   .\[\&_svg\]\:size-3\.5 svg {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -2506,7 +2703,11 @@
   --sidebar-row-radius: var(--radius);
   --sidebar-row-selected-bg: var(--primary);
   @supports (color: color-mix(in lab, red, red)) {
-    --sidebar-row-selected-bg: color-mix(in srgb, var(--primary) 10%, transparent);
+    --sidebar-row-selected-bg: color-mix(
+    in srgb,
+    var(--primary) 10%,
+    transparent
+  );
   }
 }
 @keyframes corbits-fade-in {
@@ -2686,6 +2887,36 @@
     outline-offset: 2px;
   }
 }
+@property --corbits-avatar-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+@keyframes corbits-avatar-orbit {
+  to {
+    --corbits-avatar-angle: 360deg;
+  }
+}
+.corbits-avatar-orbit {
+  position: absolute;
+  inset: -4px;
+  padding: 2px;
+  background: conic-gradient( from var(--corbits-avatar-angle), var(--primary-emphasis) 0deg 90deg, transparent 90deg 360deg ), var(--foreground);
+  @supports (color: color-mix(in lab, red, red)) {
+    background: conic-gradient( from var(--corbits-avatar-angle), var(--primary-emphasis) 0deg 90deg, transparent 90deg 360deg ), color-mix(in srgb, var(--foreground) 12%, transparent);
+  }
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+  animation: corbits-avatar-orbit 1.4s linear infinite;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .corbits-avatar-orbit {
+    animation: none;
+    --corbits-avatar-angle: 120deg;
+  }
+}
 @keyframes corbits-thinking-sweep {
   0% {
     transform: translateX(8px);
@@ -2709,14 +2940,14 @@
 }
 @keyframes corbits-thinking-wave {
   0% {
-    transform: scale(.03);
+    transform: scale(0.03);
     opacity: 0;
   }
   10% {
     opacity: 1;
   }
   75% {
-    opacity: .9;
+    opacity: 0.9;
   }
   100% {
     transform: scale(1.35);
@@ -2734,7 +2965,7 @@
     transform: translateY(30px);
   }
   .corbits-thinking-echo {
-    transform: scale(.6);
+    transform: scale(0.6);
   }
 }
 @property --tw-translate-x {
@@ -2792,6 +3023,11 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -3026,6 +3262,7 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
+      --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
@@ -3075,6 +3312,7 @@
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
+      --corbits-avatar-angle: 0deg;
     }
   }
 }

package/dist/test/render-hook.js

@@ -6,33 +6,32 @@ import { createRoot } from "react-dom/client";
  * `callback` and stashes its return value, re-render it on demand, and clean
  * up. No `@testing-library` dependency — `act` plus `react-dom/client` cover
  * everything a hook test in this package needs.
- */ export function renderHook(callback) {
+ */
+export function renderHook(callback) {
     const container = document.createElement("div");
     document.body.appendChild(container);
     let root;
-    const resultBox = {
-        current: undefined
-    };
+    const resultBox = { current: undefined };
     function Probe() {
         resultBox.current = callback();
         return null;
     }
-    act(()=>{
+    act(() => {
         root = createRoot(container);
-        root.render(/*#__PURE__*/ _jsx(Probe, {}));
+        root.render(_jsx(Probe, {}));
     });
     return {
         result: resultBox,
-        rerender () {
-            act(()=>{
-                root.render(/*#__PURE__*/ _jsx(Probe, {}));
+        rerender() {
+            act(() => {
+                root.render(_jsx(Probe, {}));
             });
         },
-        unmount () {
-            act(()=>{
+        unmount() {
+            act(() => {
                 root.unmount();
             });
             container.remove();
-        }
+        },
     };
 }