@donotdev/components 0.0.14 → 0.0.16

package/dist/styles/index.css

@@ -4447,6 +4447,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 */
@@ -7348,6 +7509,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 {

package/dist/utils/variants.d.ts

@@ -9,7 +9,7 @@ import { type VariantProps } from 'class-variance-authority';
  * Used by: Card, DualCard, StackedCards, Dialog, Sheet, Alert
  */
 export declare const surfaceVariants: (props?: ({
-    variant?: "default" | "outline" | "warning" | "success" | "muted" | "primary" | "secondary" | "accent" | "destructive" | "glass" | null | undefined;
+    variant?: "default" | "muted" | "primary" | "secondary" | "accent" | "success" | "warning" | "destructive" | "outline" | "glass" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type SurfaceVariantProps = VariantProps<typeof surfaceVariants>;
 //# sourceMappingURL=variants.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donotdev/components",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "type": "module",
   "private": false,
   "description": "Styled UI components for DoNotDev",
@@ -80,10 +80,10 @@
     "react-day-picker": "^9.6.4"
   },
   "peerDependencies": {
-    "lucide-react": "^0.562.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "shiki": "^3.20.0"
+    "lucide-react": "^0.563.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "shiki": "^3.22.0"
   },
   "peerDependenciesMeta": {
     "shiki": {