@health-samurai/react-components 0.0.0-alpha.5 → 0.0.0-alpha.7

package/dist/bundle.css

@@ -39,6 +39,8 @@
     --color-violet-500: oklch(60.6% 0.25 292.717);
     --color-purple-200: oklch(90.2% 0.063 306.703);
     --color-pink-200: oklch(89.9% 0.061 343.231);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-neutral-50: #f9f9f9;
     --color-neutral-100: #f5f5f6;
     --color-neutral-200: #ebecee;
@@ -81,6 +83,8 @@
     --leading-snug: 1.375;
     --leading-relaxed: 1.625;
     --radius-xs: 0.125rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --aspect-video: 16 / 9;
@@ -98,20 +102,24 @@
     --color-brand-500: #ea4a35;
     --color-brand-600: #d72710;
     --color-brand-700: #c31a03;
+    --font-size-xs: 12px;
     --font-size-sm: 14px;
     --font-size-base: 16px;
     --font-size-lg: 18px;
     --font-size-xl: 20px;
     --font-size-2xl: 24px;
-    --font-size-3xl: 30px;
     --font-size-4xl: 36px;
     --font-size-5xl: 48px;
     --font-family-sans: "Inter", system-ui, sans-serif;
     --font-family-mono: "JetBrains Mono", monospace;
     --font-tracking-tight: -0.4;
+    --font-tracking-normal: 0px;
+    --font-leading-3: 12px;
     --font-leading-4: 16px;
     --font-leading-5: 20px;
+    --font-leading-6: 24px;
     --font-leading-7: 28px;
+    --font-leading-10: 40px;
     --color-elements-readable: var(--color-neutral-900);
     --color-cta: var(--color-brand-600);
     --color-critical-default: var(--color-red-600);
@@ -158,7 +166,6 @@
     --color-bg-error-secondary: var(--color-red-100);
     --color-bg-error-tertiary: var(--color-red-200);
     --color-fg-tertiary: var(--color-neutral-400);
-    --color-fg-disabled: var(--color-neutral-300);
     --color-fg-link: var(--color-blue-500);
     --color-fg-error-secondary: var(--color-red-400);
     --color-utility-green: var(--color-green-500);
@@ -344,6 +351,9 @@
   .relative {
     position: relative;
   }
+  .sticky {
+    position: sticky;
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -371,6 +381,12 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .top-4\.75 {
+    top: calc(var(--spacing) * 4.75);
+  }
+  .top-8 {
+    top: calc(var(--spacing) * 8);
+  }
   .top-\[1px\] {
     top: 1px;
   }
@@ -422,6 +438,9 @@
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
+  .left-4\.25 {
+    left: calc(var(--spacing) * 4.25);
+  }
   .left-\[50\%\] {
     left: 50%;
   }
@@ -440,6 +459,9 @@
   .z-50 {
     z-index: 50;
   }
+  .z-100 {
+    z-index: 100;
+  }
   .z-\[1\] {
     z-index: 1;
   }
@@ -476,12 +498,18 @@
       max-width: 96rem;
     }
   }
+  .-m-\[5px\] {
+    margin: calc(5px * -1);
+  }
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }
   .mx-3\.5 {
     margin-inline: calc(var(--spacing) * 3.5);
   }
+  .mx-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -503,12 +531,18 @@
   .-mt-px {
     margin-top: -1px;
   }
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * 0.5);
+  }
   .mt-1\.5 {
     margin-top: calc(var(--spacing) * 1.5);
   }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-2\.25 {
+    margin-top: calc(var(--spacing) * 2.25);
+  }
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
@@ -539,6 +573,9 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .-ml-1 {
+    margin-left: calc(var(--spacing) * -1);
+  }
   .-ml-4 {
     margin-left: calc(var(--spacing) * -4);
   }
@@ -548,6 +585,9 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-4 {
+    margin-left: calc(var(--spacing) * 4);
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -581,6 +621,9 @@
   .hidden {
     display: none;
   }
+  .inline {
+    display: inline;
+  }
   .inline-block {
     display: inline-block;
   }
@@ -702,6 +745,9 @@
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
   .h-72 {
     height: calc(var(--spacing) * 72);
   }
@@ -729,6 +775,9 @@
   .h-auto {
     height: auto;
   }
+  .h-fit {
+    height: fit-content;
+  }
   .h-full {
     height: 100%;
   }
@@ -750,6 +799,9 @@
   .max-h-\(--radix-select-content-available-height\) {
     max-height: var(--radix-select-content-available-height);
   }
+  .max-h-\[20px\] {
+    max-height: 20px;
+  }
   .max-h-\[300px\] {
     max-height: 300px;
   }
@@ -768,6 +820,9 @@
   .min-h-\[200px\] {
     min-height: 200px;
   }
+  .min-h-full {
+    min-height: 100%;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -852,9 +907,15 @@
   .w-280 {
     width: calc(var(--spacing) * 280);
   }
+  .w-\[50px\] {
+    width: 50px;
+  }
   .w-\[60\%\] {
     width: 60%;
   }
+  .w-\[60px\] {
+    width: 60px;
+  }
   .w-\[100px\] {
     width: 100px;
   }
@@ -867,6 +928,9 @@
   .w-\[250px\] {
     width: 250px;
   }
+  .w-\[260px\] {
+    width: 260px;
+  }
   .w-\[300px\] {
     width: 300px;
   }
@@ -882,6 +946,9 @@
   .w-\[560px\] {
     width: 560px;
   }
+  .w-\[calc\(260px-var\(--tree-padding\)\)\] {
+    width: calc(260px - var(--tree-padding));
+  }
   .w-\[unset\] {
     width: unset;
   }
@@ -948,6 +1015,21 @@
   .min-w-\[12rem\] {
     min-width: 12rem;
   }
+  .min-w-\[50px\] {
+    min-width: 50px;
+  }
+  .min-w-\[60px\] {
+    min-width: 60px;
+  }
+  .min-w-\[200px\] {
+    min-width: 200px;
+  }
+  .min-w-\[260px\] {
+    min-width: 260px;
+  }
+  .min-w-\[calc\(260px-var\(--tree-padding\)\)\] {
+    min-width: calc(260px - var(--tree-padding));
+  }
   .min-w-\[var\(--radix-select-trigger-width\)\] {
     min-width: var(--radix-select-trigger-width);
   }
@@ -972,6 +1054,14 @@
   .border-collapse {
     border-collapse: collapse;
   }
+  .border-separate {
+    border-collapse: separate;
+  }
+  .border-spacing-0 {
+    --tw-border-spacing-x: calc(var(--spacing) * 0);
+    --tw-border-spacing-y: calc(var(--spacing) * 0);
+    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+  }
   .origin-\(--radix-context-menu-content-transform-origin\) {
     transform-origin: var(--radix-context-menu-content-transform-origin);
   }
@@ -1039,9 +1129,15 @@
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .cursor-col-resize {
+    cursor: col-resize;
+  }
   .cursor-default {
     cursor: default;
   }
+  .cursor-help {
+    cursor: help;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -1087,6 +1183,9 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .items-baseline {
+    align-items: baseline;
+  }
   .items-center {
     align-items: center;
   }
@@ -1114,6 +1213,9 @@
   .justify-items-start {
     justify-items: start;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -1214,15 +1316,21 @@
   .overflow-hidden {
     overflow: hidden;
   }
-  .overflow-x-auto {
-    overflow-x: auto;
-  }
   .overflow-x-hidden {
     overflow-x: hidden;
   }
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .rounded {
+    border-radius: var(--radius);
+  }
+  .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
+  .rounded-3xl {
+    border-radius: var(--radius-3xl);
+  }
   .rounded-\[2px\] {
     border-radius: 2px;
   }
@@ -1273,6 +1381,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
   .border-\[1\.5px\] {
     border-style: var(--tw-border-style);
     border-width: 1.5px;
@@ -1309,10 +1421,6 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
-  .border-l-2 {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 2px;
-  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
@@ -1324,6 +1432,9 @@
   .border-\(--color-border\) {
     border-color: var(--color-border);
   }
+  .border-black {
+    border-color: var(--color-black);
+  }
   .border-border-error {
     border-color: var(--color-border-error);
   }
@@ -1417,12 +1528,24 @@
   .bg-border-primary {
     background-color: var(--color-border-primary);
   }
+  .bg-border-secondary {
+    background-color: var(--color-border-secondary);
+  }
   .bg-border-separator {
     background-color: var(--color-border-separator);
   }
   .bg-foreground {
     background-color: var(--foreground);
   }
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
+  .bg-gray-500 {
+    background-color: var(--color-gray-500);
+  }
+  .bg-inherit {
+    background-color: inherit;
+  }
   .bg-muted {
     background-color: var(--muted);
   }
@@ -1438,6 +1561,9 @@
   .bg-primary {
     background-color: var(--primary);
   }
+  .bg-red-600 {
+    background-color: var(--color-red-600);
+  }
   .bg-sidebar {
     background-color: var(--sidebar);
   }
@@ -1477,6 +1603,9 @@
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
+  .p-0\.5 {
+    padding: calc(var(--spacing) * 0.5);
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -1522,9 +1651,15 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .px-8 {
+    padding-inline: calc(var(--spacing) * 8);
+  }
   .px-\[0\.44rem\] {
     padding-inline: 0.44rem;
   }
+  .px-\[2px\] {
+    padding-inline: 2px;
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -1594,12 +1729,12 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
-  .pl-1\.5 {
-    padding-left: calc(var(--spacing) * 1.5);
-  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
+  .pl-2\.5 {
+    padding-left: calc(var(--spacing) * 2.5);
+  }
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
@@ -1706,9 +1841,18 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .\!text-text-primary {
+    color: var(--color-text-primary) !important;
+  }
   .text-accent-foreground {
     color: var(--accent-foreground);
   }
+  .text-elements-assistive {
+    color: var(--color-elements-assistive);
+  }
+  .text-fg-link {
+    color: var(--color-fg-link);
+  }
   .text-foreground {
     color: var(--foreground);
   }
@@ -1769,6 +1913,12 @@
   .text-white {
     color: var(--color-white);
   }
+  .text-white\/80 {
+    color: color-mix(in srgb, #ffffff 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-white) 80%, transparent);
+    }
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -1932,6 +2082,10 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .select-text {
+    -webkit-user-select: text;
+    user-select: text;
+  }
   .zoom-in-95 {
     --tw-enter-scale: calc(95*1%);
     --tw-enter-scale: .95;
@@ -1949,6 +2103,13 @@
       opacity: 100%;
     }
   }
+  .group-hover\:block {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        display: block;
+      }
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2216,6 +2377,16 @@
       transition-duration: 200ms;
     }
   }
+  .peer-checked\:bg-bg-primary {
+    &:is(:where(.peer):checked ~ *) {
+      background-color: var(--color-bg-primary);
+    }
+  }
+  .peer-checked\:text-text-secondary {
+    &:is(:where(.peer):checked ~ *) {
+      color: var(--color-text-secondary);
+    }
+  }
   .peer-hover\/menu-button\:text-sidebar-accent-foreground {
     &:is(:where(.peer\/menu-button):hover ~ *) {
       @media (hover: hover) {
@@ -2381,6 +2552,12 @@
       z-index: calc(10 * -1);
     }
   }
+  .before\:-z-20 {
+    &::before {
+      content: var(--tw-content);
+      z-index: calc(20 * -1);
+    }
+  }
   .before\:-ms-1 {
     &::before {
       content: var(--tw-content);
@@ -2505,6 +2682,11 @@
       border-bottom-width: 0px;
     }
   }
+  .even\:bg-bg-secondary {
+    &:nth-child(even) {
+      background-color: var(--color-bg-secondary);
+    }
+  }
   .hover\:cursor-not-allowed {
     &:hover {
       @media (hover: hover) {
@@ -2588,6 +2770,13 @@
       }
     }
   }
+  .hover\:bg-border-secondary {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-border-secondary);
+      }
+    }
+  }
   .hover\:bg-sidebar-accent {
     &:hover {
       @media (hover: hover) {
@@ -2783,6 +2972,12 @@
       border-right-width: 1px;
     }
   }
+  .focus-visible\:border-l-1 {
+    &:focus-visible {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+  }
   .focus-visible\:border-border-error {
     &:focus-visible {
       border-color: var(--color-border-error);
@@ -3075,6 +3270,16 @@
       background-color: var(--accent);
     }
   }
+  .in-data-\[folder\=true\]\:w-\[calc\(260px-var\(--tree-padding\)\)\] {
+    :where(*[data-folder="true"]) & {
+      width: calc(260px - var(--tree-padding));
+    }
+  }
+  .in-data-\[folder\=true\]\:min-w-\[calc\(260px-var\(--tree-padding\)\)\] {
+    :where(*[data-folder="true"]) & {
+      min-width: calc(260px - var(--tree-padding));
+    }
+  }
   .in-data-\[search-match\=true\]\:bg-blue-400\/20\! {
     :where(*[data-search-match="true"]) & {
       background-color: color-mix(in srgb, #a7c9f3 20%, transparent) !important;
@@ -3083,14 +3288,9 @@
       }
     }
   }
-  .in-data-\[selected\=true\]\:border-l-border-brand {
+  .in-data-\[selected\=true\]\:bg-bg-secondary {
     :where(*[data-selected="true"]) & {
-      border-left-color: var(--color-border-brand);
-    }
-  }
-  .in-data-\[selected\=true\]\:bg-bg-quaternary\! {
-    :where(*[data-selected="true"]) & {
-      background-color: var(--color-bg-quaternary) !important;
+      background-color: var(--color-bg-secondary);
     }
   }
   .in-data-\[selected\=true\]\:text-text-primary {
@@ -3634,6 +3834,14 @@
       }
     }
   }
+  .\*\:data-\[slot\=button\]\:rounded-r-none {
+    :is(& > *) {
+      &[data-slot="button"] {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
   .\*\*\:data-\[slot\=command-input-wrapper\]\:h-12 {
     :is(& *) {
       &[data-slot="command-input-wrapper"] {
@@ -3641,6 +3849,36 @@
       }
     }
   }
+  .\*\:data-\[slot\=dropdown-menu-trigger\]\:rounded-l-none {
+    :is(& > *) {
+      &[data-slot="dropdown-menu-trigger"] {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+  .\*\:data-\[slot\=dropdown-menu-trigger\]\:border-l-0 {
+    :is(& > *) {
+      &[data-slot="dropdown-menu-trigger"] {
+        border-left-style: var(--tw-border-style);
+        border-left-width: 0px;
+      }
+    }
+  }
+  .\*\:data-\[slot\=dropdown-menu-trigger\]\:px-1 {
+    :is(& > *) {
+      &[data-slot="dropdown-menu-trigger"] {
+        padding-inline: calc(var(--spacing) * 1);
+      }
+    }
+  }
+  .\*\:data-\[slot\=dropdown-menu-trigger\]\:py-2 {
+    :is(& > *) {
+      &[data-slot="dropdown-menu-trigger"] {
+        padding-block: calc(var(--spacing) * 2);
+      }
+    }
+  }
   .\*\*\:data-\[slot\=navigation-menu-link\]\:focus\:ring-0 {
     :is(& *) {
       &[data-slot="navigation-menu-link"] {
@@ -3940,6 +4178,15 @@
       }
     }
   }
+  .\*\*\:data-\[slot\=tabs-trigger\]\:data-\[state\=inactive\]\:text-text-secondary {
+    :is(& *) {
+      &[data-slot="tabs-trigger"] {
+        &[data-state="inactive"] {
+          color: var(--color-text-secondary);
+        }
+      }
+    }
+  }
   .data-\[state\=indeterminate\]\:border-fg-link {
     &[data-state="indeterminate"] {
       border-color: var(--color-fg-link);
@@ -4362,11 +4609,6 @@
       border-color: var(--color-border-primary);
     }
   }
-  .sm\:block {
-    @media (width >= 40rem) {
-      display: block;
-    }
-  }
   .sm\:flex {
     @media (width >= 40rem) {
       display: flex;
@@ -4795,6 +5037,13 @@
       padding: calc(var(--spacing) * 0);
     }
   }
+  .even\:\[\&_\[data-slot\=tree-item-label\]\]\:bg-bg-secondary {
+    &:nth-child(even) {
+      & [data-slot=tree-item-label] {
+        background-color: var(--color-bg-secondary);
+      }
+    }
+  }
   .\[\&_p\]\:leading-relaxed {
     & p {
       --tw-leading: var(--leading-relaxed);
@@ -5375,6 +5624,18 @@ body {
   font-weight: var(--font-weight-normal);
   line-height: var(--font-leading-4);
 }
+.typo-body-xs {
+  font-size: var(--font-size-xs);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--font-leading-3);
+}
+.typo-label-xs {
+  font-size: var(--font-size-xs);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-leading-3);
+}
 .h1 {
   font-size: var(--font-size-4xl);
   font-family: var(--font-family-sans);
@@ -5387,13 +5648,6 @@ body {
     font-size: var(--font-size-5xl);
   }
 }
-.h2 {
-  font-size: var(--font-size-3xl);
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--font-leading-none);
-  letter-spacing: var(--font-tracking-tight);
-}
 .h3 {
   font-size: var(--font-size-2xl);
   font-family: var(--font-family-sans);
@@ -5422,6 +5676,27 @@ body {
   line-height: var(--font-leading-none);
   letter-spacing: var(--font-tracking-tight);
 }
+.h2 {
+  font-size: var(--font-size-4xl);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--font-leading-10);
+  letter-spacing: var(--font-tracking-normal);
+}
+.body16 {
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--font-leading-6);
+  letter-spacing: var(--font-tracking-normal);
+}
+.body12 {
+  font-size: var(--font-size-xs);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--font-leading-4);
+  letter-spacing: var(--font-tracking-normal);
+}
 .lucide {
   stroke-width: 1.5px;
 }
@@ -5452,6 +5727,16 @@ body ::-webkit-scrollbar-thumb:hover {
     scrollbar-width: thin;
   }
 }
+@property --tw-border-spacing-x {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-spacing-y {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -5776,6 +6061,8 @@ body ::-webkit-scrollbar-thumb:hover {
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-border-spacing-x: 0;
+      --tw-border-spacing-y: 0;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;