@deepgram/styles 0.2.9 → 0.2.10

package/lib/deepgram.css

@@ -1627,4 +1627,169 @@
   .dg-combobox__status--offline {
     @apply bg-dg-muted;
   }
+
+  /* Stacked */
+
+  .dg-stacked {
+    @apply min-h-full;
+  }
+
+  .dg-stacked__nav {
+    @apply border-b border-dg-border;
+    background-color: var(--dg-bg-default, #0b0b0c);
+  }
+
+  .dg-stacked__nav-container {
+    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+  }
+
+  .dg-stacked__nav-bar {
+    @apply flex h-16 justify-between;
+  }
+
+  .dg-stacked__nav-left {
+    @apply flex;
+  }
+
+  .dg-stacked__logo {
+    @apply flex shrink-0 items-center;
+  }
+
+  .dg-stacked__logo img {
+    @apply h-8 w-auto;
+  }
+
+  .dg-stacked__nav-links {
+    @apply hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8;
+  }
+
+  .dg-stacked__nav-link {
+    @apply inline-flex items-center border-b-2 border-transparent px-1 pt-1;
+    @apply text-sm font-medium text-dg-muted hover:border-dg-platinum hover:text-dg-fog;
+  }
+
+  .dg-stacked__nav-link--active {
+    @apply border-dg-primary text-white;
+  }
+
+  .dg-stacked__nav-right {
+    @apply hidden sm:ml-6 sm:flex sm:items-center;
+  }
+
+  .dg-stacked__notification-btn {
+    @apply relative rounded-full p-1 text-dg-muted hover:text-white focus:outline-2;
+    @apply focus:outline-offset-2 focus:outline-dg-primary;
+  }
+
+  .dg-stacked__notification-btn svg {
+    @apply size-6;
+  }
+
+  .dg-stacked__profile {
+    @apply relative ml-3;
+  }
+
+  .dg-stacked__profile-btn {
+    @apply relative flex max-w-xs items-center rounded-full focus-visible:outline-2;
+    @apply focus-visible:outline-offset-2 focus-visible:outline-dg-primary;
+  }
+
+  .dg-stacked__profile-btn img {
+    @apply size-8 rounded-full outline -outline-offset-1 outline-white/10;
+  }
+
+  .dg-stacked__profile-menu {
+    @apply w-48 origin-top-right rounded-md py-1 shadow-lg outline;
+    @apply outline-white/10;
+    background-color: var(--dg-bg-default, #0b0b0c);
+  }
+
+  .dg-stacked__profile-menu a {
+    @apply block px-4 py-2 text-sm text-dg-platinum focus:bg-white/5;
+    @apply focus:outline-hidden;
+  }
+
+  .dg-stacked__mobile-toggle {
+    @apply -mr-2 flex items-center sm:hidden;
+  }
+
+  .dg-stacked__mobile-btn {
+    @apply relative inline-flex items-center justify-center rounded-md p-2;
+    @apply text-dg-muted hover:bg-white/5 hover:text-white focus:outline-2 focus:outline-offset-2 focus:outline-dg-primary;
+    background-color: var(--dg-bg-default, #0b0b0c);
+  }
+
+  .dg-stacked__mobile-btn svg {
+    @apply size-6;
+  }
+
+  .dg-stacked__mobile-menu {
+    @apply sm:hidden;
+  }
+
+  .dg-stacked__mobile-links {
+    @apply space-y-1 pt-2 pb-3;
+  }
+
+  .dg-stacked__mobile-link {
+    @apply block border-l-4 border-transparent py-2 pr-4 pl-3;
+    @apply text-base font-medium text-dg-muted hover:border-dg-slate hover:bg-white/5 hover:text-dg-fog;
+  }
+
+  .dg-stacked__mobile-link--active {
+    @apply border-dg-primary bg-dg-primary/10 text-dg-primary;
+  }
+
+  .dg-stacked__mobile-user {
+    @apply border-t border-dg-border pt-4 pb-3;
+  }
+
+  .dg-stacked__mobile-user-info {
+    @apply flex items-center px-4;
+  }
+
+  .dg-stacked__mobile-user-avatar {
+    @apply shrink-0;
+  }
+
+  .dg-stacked__mobile-user-avatar img {
+    @apply size-10 rounded-full outline -outline-offset-1 outline-white/10;
+  }
+
+  .dg-stacked__mobile-user-details {
+    @apply ml-3;
+  }
+
+  .dg-stacked__mobile-user-name {
+    @apply text-base font-medium text-white;
+  }
+
+  .dg-stacked__mobile-user-email {
+    @apply text-sm font-medium text-dg-muted;
+  }
+
+  .dg-stacked__mobile-user-actions {
+    @apply mt-3 space-y-1;
+  }
+
+  .dg-stacked__mobile-user-actions a {
+    @apply block px-4 py-2 text-base font-medium text-dg-muted;
+    @apply hover:bg-white/5 hover:text-dg-fog;
+  }
+
+  .dg-stacked__content {
+    @apply py-10;
+  }
+
+  .dg-stacked__page-header {
+    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+  }
+
+  .dg-stacked__page-title {
+    @apply text-3xl font-bold tracking-tight text-white;
+  }
+
+  .dg-stacked__main {
+    @apply mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepgram/styles",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "Tailwind-based design system and styles library for Deepgram design system and demos",
   "author": "Deepgram",
   "license": "MIT",