@donotdev/components 0.0.4 → 0.0.6

package/dist/styles/index.css

@@ -1057,12 +1057,13 @@ em {
   }
 
 .dndev-surface[data-variant='glass'] {
-    background: color-mix(in oklab, var(--card) 40%, transparent);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+    background: color-mix(in oklab, var(--card) 55%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
     border: var(--border-hairline) solid
-      color-mix(in oklab, var(--card-foreground) 15%, transparent);
-    box-shadow: var(--shadow-lg);
+      color-mix(in oklab, var(--card-foreground) 25%, transparent);
+    box-shadow: var(--shadow-lg),
+      inset 0 1px 0 0 color-mix(in oklab, var(--card-foreground) 10%, transparent);
   }
 
 /* Separator style */
@@ -2132,6 +2133,7 @@ em {
   background: transparent;
   color: inherit;
   font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
 }
 
 .dndev-interactive[data-role='accordion-trigger']:hover {
@@ -2156,6 +2158,7 @@ em {
   transition: all var(--dur-fast) var(--ease-in-out);
   width: 100%;
   min-width: 0;
+  text-align: start;
 }
 
 .dndev-accordion-content[data-state='closed'] {
@@ -2888,8 +2891,6 @@ em {
 /* packages/components/src/atomic/CallToAction/CallToAction.css */
 
 .dndev-cta {
-  /* Default gradient */
-  background: linear-gradient(to right, var(--secondary), var(--background));
   color: var(--foreground);
   /* Padding for background - vertical only, horizontal handled by content */
   padding-block: var(--gap-lg);
@@ -2897,29 +2898,32 @@ em {
 
 /* Tone variants - leverage existing data-tone system */
 
+/* Ghost (default) - no background */
+
+.dndev-cta[data-tone='ghost'],
+.dndev-cta:not([data-tone]) {
+  background: transparent;
+}
+
 .dndev-cta[data-tone='base'] {
-  background: linear-gradient(to right, var(--secondary), var(--background));
+  background: var(--background);
 }
 
 .dndev-cta[data-tone='muted'] {
-  background: linear-gradient(to right, var(--muted), var(--background));
+  background: var(--muted);
 }
 
-.dndev-cta[data-tone='accent'] {
-  background: linear-gradient(
-    to right,
-    color-mix(in oklab, var(--accent) 10%, transparent),
-    var(--background)
-  );
+.dndev-cta[data-tone='elevated'] {
+  background: var(--background);
 }
 
 .dndev-cta[data-tone='contrast'] {
-  background: linear-gradient(to right, var(--foreground), var(--background));
+  background: var(--foreground);
   color: var(--background);
 }
 
-.dndev-cta[data-tone='elevated'] {
-  background: linear-gradient(to right, var(--secondary), var(--background));
+.dndev-cta[data-tone='accent'] {
+  background: color-mix(in oklab, var(--accent) 5%, transparent);
 }
 
 .dndev-cta-content {
@@ -3026,11 +3030,12 @@ em {
   word-wrap: break-word;
 }
 
-.dndev-card-subtitle {
+.dndev-surface .dndev-card-subtitle {
   margin-top: 0;
   margin-bottom: 0;
   min-width: 0;
   word-wrap: break-word;
+  color: color-mix(in oklab, var(--card-foreground) 70%, transparent);
 }
 
 /* packages/components/src/atomic/Checkbox/Checkbox.css */
@@ -3121,6 +3126,203 @@ em {
   }
 }
 
+/* packages/components/src/atomic/Collapsible/Collapsible.css */
+
+.dndev-collapsible {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.dndev-collapsible-content {
+  overflow: hidden;
+  width: 100%;
+}
+
+.dndev-collapsible-content[data-state='open'] {
+  animation: slideDown var(--dur-normal) var(--ease-in-out);
+}
+
+.dndev-collapsible-content[data-state='closed'] {
+  animation: slideUp var(--dur-normal) var(--ease-in-out);
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* packages/components/src/atomic/Combobox/Combobox.css */
+
+.dndev-combobox-trigger {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+}
+
+.dndev-combobox-trigger button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.dndev-combobox-placeholder {
+  opacity: var(--opacity-muted);
+}
+
+.dndev-combobox-trigger-icons {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-tight);
+  margin-inline-start: auto;
+}
+
+.dndev-combobox-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: var(--opacity-muted);
+  transition: opacity var(--dur-fast) var(--ease-in-out);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.dndev-combobox-clear:hover,
+.dndev-combobox-clear:focus {
+  opacity: 1;
+  outline: none;
+}
+
+.dndev-combobox-clear svg {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+}
+
+.dndev-combobox-chevron {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  opacity: var(--opacity-muted);
+  transition: transform var(--dur-fast) var(--ease-in-out);
+}
+
+[data-state='open'] .dndev-combobox-chevron {
+  transform: rotate(180deg);
+}
+
+.dndev-combobox-loading-container {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.dndev-combobox-loading-spinner {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  border-radius: var(--radius-full);
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+}
+
+.dndev-combobox-content {
+  width: var(--radix-popover-trigger-width);
+  min-width: var(--radix-popover-trigger-width);
+  max-height: 300px;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.dndev-combobox-search-container {
+  padding: var(--gap-sm);
+  border-bottom: var(--border-width) solid var(--line-2);
+}
+
+.dndev-combobox-search-input {
+  width: 100%;
+}
+
+.dndev-combobox-list {
+  overflow-y: auto;
+  padding: var(--gap-tight);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-none);
+}
+
+.dndev-combobox-option {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--gap-sm) var(--gap-md);
+  cursor: pointer;
+  border-radius: var(--radius-interactive);
+  transition: background-color var(--dur-fast) var(--ease-in-out);
+}
+
+.dndev-combobox-option:disabled {
+  opacity: var(--opacity-muted);
+  cursor: not-allowed;
+}
+
+.dndev-combobox-option-highlighted:not(:disabled) {
+  background-color: var(--accent);
+  opacity: var(--opacity-strong);
+}
+
+.dndev-combobox-option-selected {
+  font-weight: var(--font-weight-medium);
+}
+
+.dndev-combobox-option-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-tight);
+  flex: 1;
+}
+
+.dndev-combobox-option-label {
+  font-size: var(--font-size-sm);
+  color: var(--foreground);
+}
+
+.dndev-combobox-option-description {
+  font-size: var(--font-size-xs);
+  color: var(--muted-foreground);
+}
+
+.dndev-combobox-option-check {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  color: currentColor;
+  flex-shrink: 0;
+}
+
+.dndev-combobox-empty {
+  padding: var(--gap-lg) var(--gap-md);
+  text-align: center;
+  font-size: var(--font-size-sm);
+  color: var(--muted-foreground);
+}
+
 /* packages/components/src/atomic/DualCard/DualCard.css */
 
 .dndev-dual-card {
@@ -4236,6 +4438,10 @@ em {
   text-align: start; /* Always start-aligned, even when parent is centered */
 }
 
+.dndev-list[data-gap='none'] {
+    gap: var(--gap-none);
+  }
+
 .dndev-list[data-gap='tight'] {
     gap: var(--gap-sm);
   }
@@ -4965,17 +5171,17 @@ em {
   margin-block-end: var(--gap-md);
 }
 
-.dndev-section-full-width[data-text-align='start'] .dndev-section-content {
-    text-align: start;
-  }
+.dndev-section-full-width[data-text-align='start'] .dndev-section-title {
+  text-align: start;
+}
 
-.dndev-section-full-width[data-text-align='center'] .dndev-section-content {
-    text-align: center;
-  }
+.dndev-section-full-width[data-text-align='center'] .dndev-section-title {
+  text-align: center;
+}
 
-.dndev-section-full-width[data-text-align='end'] .dndev-section-content {
-    text-align: end;
-  }
+.dndev-section-full-width[data-text-align='end'] .dndev-section-title {
+  text-align: end;
+}
 
 /* packages/components/src/atomic/Separator/Separator.css */
 
@@ -6128,6 +6334,123 @@ em {
     display: none;
   }
 
+/* packages/components/src/atomic/Tag/Tag.css */
+
+.dndev-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  border-radius: var(--radius-full);
+  border: 1px solid transparent;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  transition: all var(--dur-fast) var(--ease-in-out);
+
+  /* Default variant */
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.dndev-tag .dndev-tag-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin-left: 2px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.7;
+    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+    transition: opacity var(--dur-fast);
+  }
+
+:is(.dndev-tag .dndev-tag-remove):hover {
+      opacity: 1;
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+:is(.dndev-tag .dndev-tag-remove):focus-visible {
+      outline: 2px solid var(--ring);
+    }
+
+.dndev-tag .dndev-tag-remove-icon {
+    width: 10px;
+    height: 10px;
+  }
+
+/* Sizes */
+
+.dndev-tag-sm {
+  padding: 0.125rem 0.5rem;
+  font-size: var(--font-size-xs);
+  height: 20px;
+}
+
+.dndev-tag-md {
+  padding: 0.25rem 0.75rem;
+  font-size: var(--font-size-sm);
+  height: 24px;
+}
+
+.dndev-tag-lg {
+  padding: 0.375rem 0.875rem;
+  font-size: var(--font-size-base);
+  height: 32px;
+}
+
+/* Variants */
+
+.dndev-tag-outline {
+  background-color: transparent;
+  border-color: var(--border);
+  color: var(--foreground);
+}
+
+.dndev-tag-accent {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+  border-color: transparent;
+}
+
+/* Interactive States */
+
+.dndev-tag-interactive {
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.dndev-tag-interactive:hover {
+    opacity: 0.8;
+  }
+
+.dndev-tag-interactive:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+.dndev-tag-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.dndev-tag-sm .dndev-tag-remove-icon {
+    width: 8px;
+    height: 8px;
+  }
+
+.dndev-tag-lg .dndev-tag-remove-icon {
+    width: 12px;
+    height: 12px;
+  }
+
 /* packages/components/src/atomic/Text/Text.css */
 
 .dndev-text-base[data-text-align='start'] {
@@ -6149,7 +6472,7 @@ em {
 }
 
 .dndev-text-base[data-variant='default'] {
-    color: var(--foreground);
+    color: inherit;
   }
 
 .dndev-text-base[data-variant='muted'] {
@@ -6209,7 +6532,6 @@ em {
 .dndev-text-base[data-level='h4'] {
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
-    color: var(--muted-foreground);
   }
 
 .dndev-text-base[data-level='body'] {
@@ -6573,6 +6895,14 @@ em {
     display: block;
   }
 
+/* SVG placeholder - zero bytes, instant render */
+
+.dndev-video-placeholder {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
 /* Play button overlay */
 
 .dndev-video-play-overlay {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donotdev/components",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "private": false,
   "description": "Styled UI components for DoNotDev",