@nous-research/ui 0.1.3 → 0.2.1

package/README.md

@@ -6,9 +6,10 @@ the shared design system for react ui @ nous. components, hooks, utils, fonts, o
 
 `npm i @nous-research/ui` or `pnpm i @nous-research/ui`
 
-import the design language styles in your global css:
+import the global styles in your app's root css file:
 
 ```css
+@import 'tailwindcss';
 @import '@nous-research/ui/styles/globals.css';
 ```
 

package/dist/ui/build.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@source "../";
+@import "./globals.css";

package/dist/ui/components/fit-text/fit-text.css

@@ -0,0 +1,42 @@
+.fit-text {
+  --fit-captured-length: initial;
+  --fit-support-sentinel: var(--fit-captured-length, 9999px);
+
+  display: flex;
+  container-type: inline-size;
+
+  > [aria-hidden] {
+    visibility: hidden;
+  }
+
+  > :not([aria-hidden]) {
+    flex-grow: 1;
+    container-type: inline-size;
+
+    --fit-captured-length: 100cqi;
+    --fit-available-space: var(--fit-captured-length);
+
+    > * {
+      --fit-support-sentinel: inherit;
+      --fit-captured-length: 100cqi;
+      --fit-ratio: tan(
+        atan2(
+          var(--fit-available-space),
+          var(--fit-available-space) - var(--fit-captured-length)
+        )
+      );
+
+      display: block;
+      inline-size: var(--fit-available-space);
+      font-size: clamp(
+        var(--fit-min, 1em),
+        1em * var(--fit-ratio),
+        var(--fit-max, infinity * 1px) - var(--fit-support-sentinel)
+      );
+
+      @container (inline-size > 0) {
+        white-space: nowrap;
+      }
+    }
+  }
+}

package/dist/ui/components/grid/grid.css

@@ -0,0 +1,78 @@
+.g {
+  @apply grid grid-cols-1 border-l border-current/20;
+
+  &:has(> .gc:nth-child(3)):not(:has(> .gc:nth-child(4))) > .gc:nth-child(2) {
+    @apply -order-1;
+  }
+
+  @media (width >= 40rem) {
+    &:has(> .gc:nth-child(2)) {
+      @apply grid-cols-2;
+    }
+
+    &:has(> .gc:nth-child(3)):not(:has(> .gc:nth-child(4)))
+      > .gc:nth-child(2) {
+      @apply -order-1 col-span-full;
+    }
+  }
+
+  @media (width >= 64rem) {
+    &:has(> .gc:nth-child(3)) {
+      @apply grid-cols-3;
+    }
+
+    &:has(> .gc:nth-child(4)) {
+      @apply grid-cols-4;
+    }
+
+    &:has(> .gc:nth-child(5)) {
+      @apply grid-cols-5;
+    }
+
+    &:has(> .gc:nth-child(6)) {
+      @apply grid-cols-6;
+    }
+
+    &:has(> .gc:nth-child(3)):not(:has(> .gc:nth-child(4))) {
+      grid-template-columns: 1fr 2fr 1fr;
+
+      > .gc:nth-child(2) {
+        @apply order-none col-auto;
+      }
+    }
+  }
+
+  &:last-child {
+    @apply border-b;
+  }
+
+  &:first-child,
+  + .g > .gc,
+  > .g {
+    @apply border-t;
+  }
+
+  .g {
+    @apply border-l-0;
+  }
+
+  &:not(:last-child) .gc:last-child {
+    @apply border-b-0;
+  }
+
+  .gc {
+    @apply min-w-0 border-r border-inherit p-4;
+
+    &:has(> .gc) {
+      @apply p-0;
+
+      > .gc {
+        @apply border-r-0 not-first:border-t last:border-b-0;
+      }
+    }
+  }
+
+  .post.gc {
+    @apply lg:p-12;
+  }
+}

package/dist/ui/components/modal/modal.css

@@ -0,0 +1,36 @@
+.modal {
+  @apply bg-foreground-base text-background-base z-50 m-auto max-h-[85dvh] max-w-[90dvw] p-0 opacity-0 outline-none;
+
+  transition:
+    opacity 0.25s ease-out,
+    overlay 0.25s ease-out allow-discrete,
+    display 0.25s ease-out allow-discrete;
+
+  &::backdrop {
+    @apply bg-foreground-base/2 backdrop-blur-xs;
+
+    transition:
+      opacity 0.25s ease-out,
+      overlay 0.25s ease-out allow-discrete,
+      display 0.25s ease-out allow-discrete;
+  }
+
+  &[open] {
+    @apply opacity-100;
+
+    &::backdrop {
+      @apply opacity-100;
+    }
+  }
+
+  @starting-style {
+    &[open],
+    &[open]::backdrop {
+      @apply opacity-0;
+    }
+  }
+}
+
+.modal-body {
+  @apply overflow-y-auto p-8 font-mono normal-case;
+}

package/dist/ui/fonts.css

@@ -0,0 +1,63 @@
+@font-face {
+  font-family: 'Collapse';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/Collapse-Regular.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Collapse';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/fonts/Collapse-Bold.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Rules Compressed';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/RulesCompressed-Regular.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Rules Compressed';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(/fonts/RulesCompressed-Medium.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Rules Expanded';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/RulesExpanded-Regular.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Rules Expanded';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/fonts/RulesExpanded-Bold.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Mondwest';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/Mondwest-Regular.woff2) format('woff2');
+}
+
+:root {
+  --font-sans: 'Collapse', sans-serif;
+  --font-mono: 'Courier Prime', monospace;
+  --font-rules-compressed: 'Rules Compressed', sans-serif;
+  --font-rules-expanded: 'Rules Expanded', sans-serif;
+  --font-mondwest: 'Mondwest', sans-serif;
+}