@donotdev/components 0.0.13 → 0.0.15

package/dist/styles/index.css

@@ -2201,6 +2201,20 @@ em {
   padding-inline-start: var(--gap-md);
 }
 
+/* Bare mode - no visual chrome, used inside FloatingLabel or custom wrappers */
+
+[data-bare] {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+[data-bare]:hover,[data-bare]:focus,[data-bare]:focus-visible {
+    border-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+  }
+
 /* Password strength bar height override */
 
 .dndev-password-strength-bar {
@@ -3302,6 +3316,7 @@ em {
 
 .dndev-collapsible-content[data-state='open'] {
   animation: slideDown var(--dur-normal) var(--ease-in-out);
+  overflow: visible; /* Allow dropdowns/overlays to escape when open */
 }
 
 .dndev-collapsible-content[data-state='closed'] {
@@ -4432,8 +4447,181 @@ 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 */
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
 /* Input with leading icon (search, etc.) */
 
 .dndev-input-with-leading-icon {
@@ -4643,6 +4831,9 @@ em {
   background-color: transparent;
   transition: all var(--dur-normal) var(--ease-in-out);
   text-align: start;
+  /* Flex-aware: allow fieldset to shrink in flex containers */
+  min-width: 0;
+  width: 100%;
 }
 
 .dndev-floating-fieldset:hover {
@@ -4651,7 +4842,6 @@ em {
 
 .dndev-floating-fieldset:focus-within {
   border-color: var(--ring);
-  box-shadow: 0 0 0 2px var(--ring);
 }
 
 .dndev-floating-fieldset[data-disabled='true'] {
@@ -4668,6 +4858,11 @@ em {
   font-weight: 500;
   line-height: 1;
   color: var(--foreground);
+  /* Ellipsis by default */
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .dndev-floating-legend label {
@@ -4681,30 +4876,23 @@ em {
   color: var(--muted-foreground);
 }
 
-.dndev-floating-legend[data-truncate='true'] {
-  max-width: calc(100% - var(--gap-md) * 2);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Remove border from inner input since fieldset has it */
+/* Disable truncation when explicitly set to false */
 
-.dndev-floating-fieldset .dndev-input {
-  border: none;
-  border-radius: var(--radius-interactive);
-  box-shadow: none;
+.dndev-floating-legend[data-truncate='false'] {
+  max-width: none;
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
 }
 
-.dndev-floating-fieldset .dndev-input:hover {
-  border-color: transparent;
-}
+/* Input inside fieldset uses bare mode via data-bare attribute (set by Input component) */
 
-.dndev-floating-fieldset .dndev-input:focus,
-.dndev-floating-fieldset .dndev-input:focus-visible {
-  border-color: transparent;
+/* This rule is kept for non-Input children that might need border removal */
+
+.dndev-floating-fieldset > .dndev-input:not([data-bare]) {
+  border: none;
   box-shadow: none;
-  outline: none;
+  background: transparent;
 }
 
 /* packages/components/src/atomic/List/List.css */
@@ -5055,11 +5243,33 @@ em {
 /* packages/components/src/atomic/Pagination/Pagination.css */
 
 .dndev-pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-md);
+  width: 100%;
+}
+
+.dndev-pagination-info {
+  display: none;
+}
+
+.dndev-pagination-size {
+  display: flex;
+  align-items: center;
+}
+
+.dndev-pagination-size-label {
+  display: none;
+}
+
+.dndev-pagination-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--gap-sm);
-  flex-wrap: wrap;
+  width: 100%;
 }
 
 .dndev-pagination-list {
@@ -5071,57 +5281,36 @@ em {
   margin: 0;
 }
 
-.dndev-pagination-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .dndev-pagination-button {
-  min-width: var(--touch-target);
+  width: var(--touch-target);
   height: var(--touch-target);
-  display: flex;
+  padding: 0;
+  flex-shrink: 0;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--gap-sm);
-  border-radius: var(--radius-interactive);
-  font-weight: 500;
-  transition: var(--transition-fast);
-  cursor: pointer;
-  border: var(--border-hairline) solid var(--line-2);
-  background: transparent;
-  color: var(--foreground);
-  padding: var(--gap-sm) var(--gap-md);
 }
 
-.dndev-pagination-button:hover:not(:disabled) {
-    background: var(--accent);
-    color: var(--accent-foreground);
-  }
+/* Desktop: Show all elements in one row */
 
-.dndev-pagination-button:focus-visible {
-    outline: 2px solid var(--ring);
-    outline-offset: 2px;
+@media (min-width: 768px) {
+  .dndev-pagination-info,
+  .dndev-pagination-size {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
   }
 
-.dndev-pagination-button:disabled {
-    opacity: var(--opacity-muted);
-    cursor: not-allowed;
+  .dndev-pagination-size-label {
+    margin-right: var(--gap-sm);
   }
 
-.dndev-pagination-button[aria-current='page'] {
-    background: var(--primary);
-    color: var(--primary-foreground);
-    border-color: var(--primary);
+  .dndev-pagination-nav {
+    justify-content: flex-end;
+    width: auto;
+    margin-left: auto;
+    /* Push to right */
   }
-
-.dndev-pagination-ellipsis {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--touch-target);
-  height: var(--touch-target);
-  color: var(--muted-foreground);
 }
 
 /* packages/components/src/atomic/Popover/Popover.css */
@@ -5852,8 +6041,12 @@ em {
 
 /* Adjust header padding when drag handle is present (sibling selector) */
 
-.dndev-sheet-content[data-side='bottom'] .dndev-sheet-drag-handle ~ .dndev-sheet-header,
-.dndev-sheet-content[data-side='top'] .dndev-sheet-drag-handle ~ .dndev-sheet-header {
+.dndev-sheet-content[data-side='bottom']
+  .dndev-sheet-drag-handle
+  ~ .dndev-sheet-header,
+.dndev-sheet-content[data-side='top']
+  .dndev-sheet-drag-handle
+  ~ .dndev-sheet-header {
   padding-top: 0;
 }
 
@@ -5911,12 +6104,9 @@ em {
   position: relative;
   margin-inline-start: auto;
   /* Push to end (RTL-aware: end = right in LTR, left in RTL) */
+  margin-inline-end: var(--gap-sm);
+  /* Spacing from edge - use margin not padding to keep icon centered */
   opacity: var(--opacity-muted);
-  /* No padding - tight spacing */
-  padding: 0;
-  /* RTL-aware: padding on logical end only */
-  padding-inline-end: var(--gap-md);
-  padding-inline-start: 0;
 }
 
 .dndev-sheet-close:hover {
@@ -6701,7 +6891,21 @@ em {
 }
 
 .dndev-table-header {
-  /* Base header styles */
+  background-color: var(--accent);
+}
+
+/* Filter row above header */
+
+.dndev-table-filter-row {
+  border: 1px solid var(--border);
+  border-bottom: none;
+}
+
+.dndev-table-filter-row .dndev-table-head {
+  background-color: var(--muted);
+  padding: var(--gap-xs);
+  height: auto;
+  min-height: auto;
 }
 
 .dndev-table-body {
@@ -6763,22 +6967,34 @@ em {
   padding-block: var(--gap-sm);
 }
 
-.dndev-table-head[data-sortable='true'] {
+/* Header cells use accent foreground for contrast */
+
+.dndev-table-header .dndev-table-head {
+  color: var(--accent-foreground);
+}
+
+[data-sortable='true']:is(.dndev-table-header .dndev-table-head) {
     cursor: pointer;
   }
 
-.dndev-table-head[data-align='center'] {
+[data-align='center']:is(.dndev-table-header .dndev-table-head) {
     text-align: center;
   }
 
-.dndev-table-head[data-align='end'] {
+[data-align='end']:is(.dndev-table-header .dndev-table-head) {
     text-align: end;
   }
 
-.dndev-table-head[data-align='start'] {
+[data-align='start']:is(.dndev-table-header .dndev-table-head) {
     text-align: start;
   }
 
+/* Active filter indicator */
+
+.dndev-table-filter-active {
+  color: var(--primary);
+}
+
 /* Table cell (td) styles */
 
 .dndev-table-cell {
@@ -6786,6 +7002,7 @@ em {
   padding-inline: var(--gap-md);
   padding-block: var(--gap-sm);
   min-height: var(--touch-target);
+  line-height: 1.5; /* Ensure consistent line height for empty cells */
 }
 
 .dndev-table-cell[data-align='center'] {
@@ -6864,6 +7081,64 @@ em {
   padding-inline-start: calc(var(--gap-md) + var(--icon-md) + var(--gap-sm));
 }
 
+/* Skeleton rows - apply standard skeleton pulse animation to entire rows */
+
+/* Keep existing background colors (zebra striping) - just add opacity pulse */
+
+.dndev-table-body .dndev-table-row.dndev-skeleton-row {
+  animation: dndev-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  pointer-events: none;
+
+  /* Keep hover state but disabled (pointer-events: none prevents hover) */
+}
+
+:is(.dndev-table-body .dndev-table-row.dndev-skeleton-row):hover {
+    /* Inherit from parent .dndev-table-row hover styles */
+  }
+
+/* Even rows keep their var(--muted) background, just pulse */
+
+.dndev-table-body .dndev-table-row.dndev-skeleton-row:nth-child(even) {
+  animation: dndev-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+:is(.dndev-table-body .dndev-table-row.dndev-skeleton-row:nth-child(even)):hover {
+    /* Inherit from parent .dndev-table-row:nth-child(even) hover styles */
+  }
+
+/* Skeleton bars inside cells - adapt to row background for visibility */
+
+/* Odd rows (transparent background): use default var(--muted) skeleton */
+
+/* Even rows (var(--muted) background): use lighter skeleton for contrast */
+
+.dndev-table-body .dndev-table-row.dndev-skeleton-row .dndev-skeleton {
+  background-color: var(--muted);
+}
+
+.dndev-table-body
+  .dndev-table-row.dndev-skeleton-row:nth-child(even)
+  .dndev-skeleton {
+  /* Even rows have var(--muted) background, so skeleton should be lighter for contrast */
+  background-color: color-mix(
+    in oklab,
+    var(--muted) 60%,
+    var(--foreground) 40%
+  );
+}
+
+/* Use the same pulse animation as standard skeleton (from Skeleton.css) */
+
+@keyframes dndev-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: var(--opacity-muted);
+  }
+}
+
 /* packages/components/src/atomic/Tabs/Tabs.css */
 
 /* Tabs list: use flexbox for natural wrapping, not grid */
@@ -7234,6 +7509,24 @@ em {
     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" | "outline" | "primary" | "destructive" | "warning" | "success" | "muted" | "secondary" | "accent" | "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.13",
+  "version": "0.0.15",
   "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": {