@donotdev/ui 0.0.10 → 0.0.11

package/dist/dndev.css

@@ -4459,6 +4459,167 @@ em {
   padding-block: var(--gap-lg);
 }
 
+/* packages/components/src/advanced/ImageGallery/ImageGallery.css */
+
+.image-gallery {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+  outline: none;
+}
+
+.image-gallery:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: var(--radius-lg);
+}
+
+/* Empty state */
+
+.image-gallery--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--muted);
+  border-radius: var(--radius-lg);
+}
+
+.image-gallery__placeholder {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-sm);
+}
+
+/* Main image container */
+
+.image-gallery__main {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--radius-surface);
+  background-color: var(--muted);
+}
+
+.image-gallery__main-image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+  position: relative;
+}
+
+/* Navigation arrows */
+
+.image-gallery__nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: var(--radius-full);
+  background-color: var(--background);
+  color: var(--foreground);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity 0.2s ease,
+    background-color 0.2s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 2;
+}
+
+.image-gallery__main:hover .image-gallery__nav,
+.image-gallery:focus-within .image-gallery__nav {
+  opacity: 1;
+}
+
+.image-gallery__nav:hover {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.image-gallery__nav:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.image-gallery__nav--prev {
+  inset-inline-start: var(--gap-md);
+}
+
+.image-gallery__nav--next {
+  inset-inline-end: var(--gap-md);
+}
+
+/* Thumbnails */
+
+.image-gallery__thumbnails {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap-sm);
+}
+
+.image-gallery__thumbnail {
+  flex: 0 0 auto;
+  width: 80px;
+  height: 60px;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: var(--radius-surface);
+  overflow: hidden;
+  cursor: pointer;
+  background: none;
+  transition:
+    border-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.image-gallery__thumbnail:hover {
+  border-color: var(--muted-foreground);
+}
+
+.image-gallery__thumbnail:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.image-gallery__thumbnail--selected {
+  border-color: var(--primary);
+}
+
+.image-gallery__thumbnail-image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+}
+
+/* Responsive adjustments */
+
+@media (max-width: 640px) {
+  .image-gallery__thumbnail {
+    width: 60px;
+    height: 45px;
+  }
+
+  .image-gallery__nav {
+    width: 36px;
+    height: 36px;
+    opacity: 0.8;
+  }
+
+  .image-gallery__nav svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
 /* packages/components/src/atomic/Input/Input.css */
 
 /* Hide number input spinners - cleaner UI for price/range inputs */
@@ -7360,6 +7521,24 @@ input[type='number'] {
     font-size: var(--font-size-sm);
   }
 
+/* Font weight overrides (after level rules, so weight prop overrides level defaults) */
+
+.dndev-text-base[data-font-weight='normal'] {
+    font-weight: var(--font-weight-normal);
+  }
+
+.dndev-text-base[data-font-weight='medium'] {
+    font-weight: var(--font-weight-medium);
+  }
+
+.dndev-text-base[data-font-weight='semibold'] {
+    font-weight: var(--font-weight-semibold);
+  }
+
+.dndev-text-base[data-font-weight='bold'] {
+    font-weight: var(--font-weight-bold);
+  }
+
 /* packages/components/src/atomic/Toaster/Toaster.css */
 
 .dndev-toast-viewport {