@deepgram/styles 0.2.7 → 0.2.9

package/lib/deepgram.css

@@ -757,6 +757,16 @@
     @apply font-normal text-sm text-dg-muted;
   }
 
+  /* Card Headings */
+
+  .dg-card-headings {
+    @apply border-b border-dg-border px-4 py-5 sm:px-6;
+  }
+
+  .dg-card-headings__title {
+    @apply text-base font-semibold text-white;
+  }
+
   /* Item Title */
 
   .dg-item-title {
@@ -1401,4 +1411,220 @@
       @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;
+  }
 }

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.7",
+  "version": "0.2.9",
   "description": "Tailwind-based design system and styles library for Deepgram design system and demos",
   "author": "Deepgram",
   "license": "MIT",