@deepgram/styles 0.2.8 → 0.2.10

package/lib/deepgram.css

@@ -1411,4 +1411,385 @@
       @apply w-auto;
     }
   }
+
+  /* Alerts */
+
+  .dg-alert {
+    @apply rounded-md p-4;
+  }
+
+  .dg-alert--warning {
+    background-color: color-mix(in srgb, var(--color-dg-warning) 10%, transparent);
+    outline: 1px solid color-mix(in srgb, var(--color-dg-warning) 15%, transparent);
+  }
+
+  .dg-alert--success {
+    background-color: color-mix(in srgb, var(--color-dg-success) 10%, transparent);
+    outline: 1px solid color-mix(in srgb, var(--color-dg-success) 15%, transparent);
+  }
+
+  .dg-alert--danger {
+    background-color: color-mix(in srgb, var(--color-dg-danger) 10%, transparent);
+    outline: 1px solid color-mix(in srgb, var(--color-dg-danger) 15%, transparent);
+  }
+
+  .dg-alert--info {
+    background-color: color-mix(in srgb, var(--color-dg-secondary) 10%, transparent);
+    outline: 1px solid color-mix(in srgb, var(--color-dg-secondary) 15%, transparent);
+  }
+
+  .dg-alert__content {
+    @apply flex;
+  }
+
+  .dg-alert__icon {
+    @apply shrink-0;
+  }
+
+  .dg-alert__icon svg {
+    @apply size-5;
+  }
+
+  .dg-alert--warning .dg-alert__icon {
+    @apply text-dg-warning;
+  }
+
+  .dg-alert--success .dg-alert__icon {
+    @apply text-dg-success;
+  }
+
+  .dg-alert--danger .dg-alert__icon {
+    @apply text-dg-danger;
+  }
+
+  .dg-alert--info .dg-alert__icon {
+    @apply text-dg-secondary;
+  }
+
+  .dg-alert__body {
+    margin-left: 0.75rem;
+  }
+
+  .dg-alert__title {
+    @apply text-sm font-medium;
+  }
+
+  .dg-alert--warning .dg-alert__title {
+    @apply text-dg-warning;
+  }
+
+  .dg-alert--success .dg-alert__title {
+    @apply text-dg-success;
+  }
+
+  .dg-alert--danger .dg-alert__title {
+    @apply text-dg-danger;
+  }
+
+  .dg-alert--info .dg-alert__title {
+    @apply text-dg-secondary;
+  }
+
+  .dg-alert__description {
+    @apply mt-2 text-sm text-dg-muted;
+  }
+
+  .dg-alert__actions {
+    @apply mt-4;
+  }
+
+  .dg-alert__actions .dg-btn {
+    @apply text-sm;
+  }
+
+  .dg-alert__list {
+    @apply mt-2 text-sm text-dg-muted list-disc pl-5;
+  }
+
+  .dg-alert__list li {
+    padding-left: 0.25rem;
+  }
+
+  .dg-alert__dismiss {
+    @apply ml-auto pl-3 shrink-0;
+  }
+
+  .dg-alert__dismiss button {
+    @apply inline-flex rounded-md p-1.5 text-dg-muted cursor-pointer;
+  }
+
+  .dg-alert__dismiss button:hover {
+    @apply text-dg-text;
+  }
+
+  .dg-alert__dismiss button svg {
+    @apply size-5;
+  }
+
+  /* Comboboxes */
+
+  .dg-combobox {
+    @apply relative block;
+  }
+
+  .dg-combobox__label {
+    @apply block text-sm font-medium text-white;
+    line-height: 1.5rem;
+  }
+
+  .dg-combobox__wrapper {
+    @apply relative mt-2 block;
+  }
+
+  .dg-combobox__input {
+    @apply block w-full rounded-md bg-white/5 py-1.5 pr-12;
+    @apply pl-3 text-base text-white outline-1 -outline-offset-1 outline-white/10;
+    @apply placeholder:text-dg-slate sm:text-sm;
+    line-height: 1.5rem;
+  }
+
+  .dg-combobox__input:focus {
+    @apply outline-2 -outline-offset-2 outline-dg-primary;
+  }
+
+  .dg-combobox__toggle {
+    @apply absolute inset-y-0 right-0 flex items-center rounded-r-md;
+    @apply px-2;
+  }
+
+  .dg-combobox__toggle-icon {
+    @apply size-5 text-dg-muted;
+  }
+
+  .dg-combobox__options {
+    @apply max-h-60 overflow-auto rounded-md bg-dg-charcoal py-1 text-base;
+    @apply shadow-lg sm:text-sm;
+    outline: 1px solid rgba(255, 255, 255, 0.1);
+    outline-offset: -1px;
+  }
+
+  .dg-combobox__option {
+    @apply block truncate px-3 py-2 text-dg-platinum select-none;
+    @apply cursor-pointer;
+  }
+
+  .dg-combobox__option:hover {
+    @apply bg-dg-primary text-white;
+  }
+
+  .dg-combobox__option.selected {
+    @apply bg-dg-primary text-white;
+  }
+
+  .dg-combobox__option-text {
+    @apply block truncate;
+  }
+
+  .dg-combobox__check {
+    @apply absolute inset-y-0 right-0 flex items-center pr-4;
+    @apply text-white;
+  }
+
+  .dg-combobox__check-icon {
+    @apply size-5;
+  }
+
+  .dg-combobox--with-check .dg-combobox__option {
+    @apply relative pr-9;
+  }
+
+  .dg-combobox--with-check .dg-combobox__option.selected .dg-combobox__check {
+    @apply flex;
+  }
+
+  .dg-combobox--with-avatar .dg-combobox__option {
+    @apply flex items-center;
+    gap: 0.5rem;
+  }
+
+  .dg-combobox__avatar {
+    @apply size-6 shrink-0 rounded-full;
+  }
+
+  .dg-combobox--with-status .dg-combobox__option {
+    @apply flex items-center;
+    gap: 0.5rem;
+  }
+
+  .dg-combobox__status {
+    @apply inline-block size-2 shrink-0 rounded-full;
+  }
+
+  .dg-combobox__status--online {
+    @apply bg-dg-success;
+  }
+
+  .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/lib/tailwind-theme.css

@@ -9,7 +9,7 @@
 
 /* Source scanning for class detection */
 @source "./deepgram.css";
-@source inline("collapsed visible");
+@source inline("collapsed selected visible");
 
 /* Dark mode support */
 @variant dark (&.dark);

package/package.json

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