@donotdev/components 0.0.12 → 0.0.13

package/dist/styles/index.css

@@ -2716,6 +2716,34 @@ em {
 
 /* Label styling moved to patterns.css (.dndev-interactive-label) */
 
+/* Loading state */
+
+[data-loading] {
+  cursor: wait;
+  pointer-events: none;
+}
+
+/* Button spinner - inherits size from button font-size */
+
+.dndev-button-spinner {
+  flex-shrink: 0;
+}
+
+/* Progress ring for upload percentage */
+
+.dndev-button-progress {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.dndev-progress-ring {
+  width: 1em;
+  height: 1em;
+  transform: rotate(-90deg);
+}
+
 /* packages/components/src/atomic/Calendar/Calendar.css */
 
 /**
@@ -4604,49 +4632,81 @@ em {
     margin-inline-start: var(--gap-sm);
   }
 
-/* Floating Label - positioned absolutely at top of input fields */
+/* Floating Fieldset - native border-cutting via legend */
 
-.dndev-floating-label {
-  position: absolute;
-  inset-inline-start: var(--gap-md);
-  top: calc(-1 * var(--font-size-xs) / 2 - 1px);
-  font-size: var(--font-size-xs);
-  font-weight: 500;
-  pointer-events: none;
-  z-index: 1;
-  background-color: var(--background);
-  padding: 0 var(--gap-sm);
-  line-height: 1;
-  color: var(--foreground);
+.dndev-floating-fieldset {
+  position: relative;
+  border: var(--border-hairline) solid var(--line-2);
+  border-radius: var(--radius-interactive);
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  transition: all var(--dur-normal) var(--ease-in-out);
+  text-align: start;
 }
 
-/* Inherit background when inside floating containers (dropdowns, menus, popovers) */
+.dndev-floating-fieldset:hover {
+  border-color: var(--ring);
+}
 
-.dndev-floating .dndev-floating-label,
-.dndev-menu-content .dndev-floating-label,
-[class*='dndev-dropdown'] .dndev-floating-label,
-[class*='dndev-navigation'] .dndev-floating-label {
-  background-color: var(--popover);
-  color: var(--popover-foreground);
+.dndev-floating-fieldset:focus-within {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 2px var(--ring);
 }
 
-/* When floating container has blank glow, use solid popover background */
+.dndev-floating-fieldset[data-disabled='true'] {
+  opacity: var(--opacity-muted);
+  cursor: not-allowed;
+}
 
-.dndev-floating[data-glow='blank'] .dndev-floating-label {
-  background-color: var(--popover);
+/* Legend sits on border - browser natively cuts border */
+
+.dndev-floating-legend {
+  margin-inline-start: var(--gap-sm);
+  padding: 0 var(--gap-sm);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--foreground);
 }
 
-.dndev-floating-label[data-disabled='true'] {
+.dndev-floating-legend label {
+  cursor: default;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-tight);
+}
+
+.dndev-floating-fieldset[data-disabled='true'] .dndev-floating-legend {
   color: var(--muted-foreground);
 }
 
-.dndev-floating-label[data-truncate='true'] {
+.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 */
+
+.dndev-floating-fieldset .dndev-input {
+  border: none;
+  border-radius: var(--radius-interactive);
+  box-shadow: none;
+}
+
+.dndev-floating-fieldset .dndev-input:hover {
+  border-color: transparent;
+}
+
+.dndev-floating-fieldset .dndev-input:focus,
+.dndev-floating-fieldset .dndev-input:focus-visible {
+  border-color: transparent;
+  box-shadow: none;
+  outline: none;
+}
+
 /* packages/components/src/atomic/List/List.css */
 
 .dndev-list {
@@ -5634,50 +5694,210 @@ em {
   display: flex;
   flex-direction: column;
   z-index: var(--z-modal);
-  border-radius: var(--radius-floating); /* Square like floating panels */
+  background: var(--card);
+  /* Ensure background is opaque */
+  color: var(--card-foreground);
+  box-shadow: var(--shadow-xl);
+  /* Focus Tunnel: Deep elevation */
+  overflow: hidden;
+  /* Scroll Trap: Container clips overflow */
+
+  /* Motion Physics: Base state */
+  will-change: transform, opacity;
 
-  /* Sheet positioning by side */
+  /* Open state animation - "Heavy" ease for premium feel */
 }
 
+.dndev-sheet-content[data-state='open'] {
+    animation: sheet-slide-in var(--dur-heavy) var(--ease-heavy);
+  }
+
+/* Closed state animation */
+
+.dndev-sheet-content[data-state='closed'] {
+    animation: sheet-slide-out var(--dur-normal) var(--ease-in-out);
+  }
+
+/* Sheet positioning by side - SPATIAL METAPHOR */
+
+/* RIGHT / LEFT (Desktop Panels) */
+
 .dndev-sheet-content[data-side='right'],.dndev-sheet-content[data-side='left'] {
     top: 0;
     bottom: 0;
     width: 80%;
     max-width: 56rem;
+    /* Standard panel width */
+    height: 100%;
+    /* Full height */
+    border-radius: 0;
+    /* Square edges for panel metaphor */
   }
 
 .dndev-sheet-content[data-side='right'] {
+    /* Physical positioning: right edge */
     right: 0;
+    left: auto;
+    /* Border on logical start (left in LTR, right in RTL) */
+    border-inline-start: var(--border-hairline) solid var(--line-1);
   }
 
 .dndev-sheet-content[data-side='left'] {
+    /* Physical positioning: left edge */
     left: 0;
+    right: auto;
+    /* Border on logical end (right in LTR, left in RTL) */
+    border-inline-end: var(--border-hairline) solid var(--line-1);
   }
 
+/* TOP / BOTTOM (Mobile Cards) */
+
 .dndev-sheet-content[data-side='top'],.dndev-sheet-content[data-side='bottom'] {
     left: 0;
     right: 0;
-    height: 80%;
-    max-height: 56rem;
-    overflow: hidden;
+    /* Card metaphor: Detached from opposite edge */
+    height: auto;
+    max-height: 92dvh;
+    /* Never touch top edge */
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+
+    /* On larger screens, constrain width */
   }
 
+@media (width >=768px) {
+
+.dndev-sheet-content[data-side='top'],.dndev-sheet-content[data-side='bottom'] {
+      max-width: 56rem;
+      width: 90%;
+      border-radius: var(--radius-lg);
+      /* Fully rounded card on desktop */
+  }
+    }
+
 .dndev-sheet-content[data-side='top'] {
     top: 0;
+    border-bottom: var(--border-hairline) solid var(--line-1);
+    /* Rounded bottom corners only */
+    border-bottom-left-radius: var(--radius-lg);
+    border-bottom-right-radius: var(--radius-lg);
   }
 
 .dndev-sheet-content[data-side='bottom'] {
     bottom: 0;
+    border-top: var(--border-hairline) solid var(--line-1);
+    /* Rounded top corners only */
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
   }
 
+/* DRAG HANDLE PILL - Visual affordance for draggable sheets */
+
+.dndev-sheet-drag-handle {
+  width: 2.5rem;
+  height: 0.25rem;
+  background: var(--line-2);
+  border-radius: var(--radius-full);
+  margin: var(--gap-sm) auto 0;
+  flex-shrink: 0;
+  cursor: grab;
+  transition: background-color var(--dur-fast) var(--ease-in-out);
+}
+
+.dndev-sheet-drag-handle:active {
+    cursor: grabbing;
+  }
+
+/* Positioning for bottom sheets */
+
+.dndev-sheet-content[data-side='bottom'] > .dndev-sheet-drag-handle {
+  margin-top: var(--gap-sm);
+  margin-bottom: 0;
+}
+
+/* Positioning for top sheets */
+
+.dndev-sheet-content[data-side='top'] > .dndev-sheet-drag-handle {
+  margin-top: max(var(--gap-sm), env(safe-area-inset-top));
+  margin-bottom: 0;
+}
+
+/* HEADER - Pinned, No Padding (Tight Layout) */
+
+/* Industry standard: Title always on start, X always on end (consistent across all sides) */
+
 .dndev-sheet-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--gap-md);
   flex-shrink: 0;
+  /* Never shrink */
   min-height: var(--touch-target);
-  margin-bottom: var(--gap-md);
+  /* No padding - tight layout: [ Title               X ] */
+  padding-block: 0;
+  /* RTL-aware: padding on logical start only */
+  padding-inline-start: var(--gap-md);
+  padding-inline-end: 0; /* X button has its own spacing */
+  border-bottom: var(--border-hairline) solid var(--line-1);
+  /* Separator */
+
+  /* Thumb Ergonomics: Top Safe Area (only for top sheets) */
+}
+
+.dndev-sheet-content[data-side='top'] .dndev-sheet-header {
+    padding-top: max(0, env(safe-area-inset-top));
+  }
+
+/* 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 {
+  padding-top: 0;
+}
+
+/* BODY - Scrollable */
+
+.dndev-sheet-body {
+  flex: 1;
+  /* Consumes available space */
+  overflow-y: auto;
+  /* Independent scroll */
+  overflow-x: hidden;
+  padding: var(--gap-md);
+  overscroll-behavior: contain;
+  /* Prevent body scroll chaining */
+}
+
+/* FOOTER - Pinned */
+
+.dndev-sheet-footer {
+  flex-shrink: 0;
+  /* Never shrink */
+  padding: var(--gap-md);
+  border-top: var(--border-hairline) solid var(--line-1);
+  /* Separator */
+  display: flex;
+  flex-direction: column-reverse;
+  /* Mobile-first stacking */
+  gap: var(--gap-sm);
+
+  /* Desktop: Row layout */
+}
+
+@media (width >=640px) {
+
+.dndev-sheet-footer {
+    flex-direction: row;
+    justify-content: flex-end;
+}
+  }
+
+.dndev-sheet-footer {
+
+  /* Thumb Ergonomics: Bottom Safe Area (Home Indicator) */
+  padding-bottom: max(var(--gap-md), env(safe-area-inset-bottom));
 }
 
 .dndev-sheet-title {
@@ -5687,19 +5907,72 @@ em {
 }
 
 .dndev-sheet-close {
-  position: absolute;
-  top: var(--gap-md);
-  inset-inline-end: var(--gap-md);
+  /* Position relative - flex handles alignment */
+  position: relative;
+  margin-inline-start: auto;
+  /* Push to end (RTL-aware: end = right in LTR, left in RTL) */
   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 {
     opacity: 1;
   }
 
-.dndev-sheet-footer {
-  flex-shrink: 0;
-  margin-top: var(--gap-md);
+/* ===========================
+   ANIMATIONS (Motion Physics)
+   =========================== */
+
+/* Slide In/Out Keyframes - Context Aware */
+
+@keyframes sheet-slide-in {
+  from {
+    opacity: 0;
+    transform: var(--slide-enter-transform);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes sheet-slide-out {
+  from {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: var(--slide-exit-transform);
+  }
+}
+
+/* Define Transforms based on Side */
+
+.dndev-sheet-content[data-side='right'] {
+  --slide-enter-transform: translateX(100%);
+  --slide-exit-transform: translateX(100%);
+}
+
+.dndev-sheet-content[data-side='left'] {
+  --slide-enter-transform: translateX(-100%);
+  --slide-exit-transform: translateX(-100%);
+}
+
+.dndev-sheet-content[data-side='bottom'] {
+  --slide-enter-transform: translateY(100%);
+  --slide-exit-transform: translateY(100%);
+}
+
+.dndev-sheet-content[data-side='top'] {
+  --slide-enter-transform: translateY(-100%);
+  --slide-exit-transform: translateY(-100%);
 }
 
 /* packages/components/src/atomic/Skeleton/Skeleton.css */
@@ -6372,7 +6645,8 @@ em {
 
 .dndev-switch-label {
   font-size: var(--font-size-sm);
-  transition: color var(--dur-normal) var(--ease-in-out),
+  transition:
+    color var(--dur-normal) var(--ease-in-out),
     font-weight var(--dur-normal) var(--ease-in-out);
   white-space: nowrap;
 }
@@ -6381,16 +6655,14 @@ em {
 
 .dndev-switch-with-labels:not(:has(.dndev-switch[data-state='checked']))
   .dndev-switch-label-unchecked,
-.dndev-switch-with-labels[data-checked='false']
-  .dndev-switch-label-unchecked {
+.dndev-switch-with-labels[data-checked='false'] .dndev-switch-label-unchecked {
   color: var(--foreground);
   font-weight: var(--font-weight-medium);
 }
 
 .dndev-switch-with-labels:has(.dndev-switch[data-state='checked'])
   .dndev-switch-label-unchecked,
-.dndev-switch-with-labels[data-checked='true']
-  .dndev-switch-label-unchecked {
+.dndev-switch-with-labels[data-checked='true'] .dndev-switch-label-unchecked {
   color: var(--muted-foreground);
   font-weight: var(--font-weight-normal);
 }
@@ -6399,16 +6671,14 @@ em {
 
 .dndev-switch-with-labels:has(.dndev-switch[data-state='checked'])
   .dndev-switch-label-checked,
-.dndev-switch-with-labels[data-checked='true']
-  .dndev-switch-label-checked {
+.dndev-switch-with-labels[data-checked='true'] .dndev-switch-label-checked {
   color: var(--foreground);
   font-weight: var(--font-weight-medium);
 }
 
 .dndev-switch-with-labels:not(:has(.dndev-switch[data-state='checked']))
   .dndev-switch-label-checked,
-.dndev-switch-with-labels[data-checked='false']
-  .dndev-switch-label-checked {
+.dndev-switch-with-labels[data-checked='false'] .dndev-switch-label-checked {
   color: var(--muted-foreground);
   font-weight: var(--font-weight-normal);
 }
@@ -6449,6 +6719,12 @@ em {
     background-color: color-mix(in oklab, var(--accent) 15%, transparent);
   }
 
+/* Cursor pointer for clickable rows */
+
+.dndev-table-row.dndev-cursor-pointer {
+  cursor: pointer;
+}
+
 /* Zebra striping for data tables */
 
 .dndev-table-body .dndev-table-row:nth-child(even) {
@@ -6543,8 +6819,8 @@ em {
 /* Input components inside grid cells should be borderless and fit snugly */
 
 .dndev-table-grid .dndev-table-cell .dndev-input,
-.dndev-table-grid .dndev-table-cell input[type="text"],
-.dndev-table-grid .dndev-table-cell input[type="number"] {
+.dndev-table-grid .dndev-table-cell input[type='text'],
+.dndev-table-grid .dndev-table-cell input[type='number'] {
   border: none;
   background: transparent;
   width: 100%;
@@ -8147,6 +8423,10 @@ h4[data-variant='code'] {
   pointer-events: auto;
 }
 
+.dndev-cursor-pointer {
+  cursor: pointer;
+}
+
 .dndev-aspect-video {
   aspect-ratio: 16 / 9;
 }

package/dist/utils/variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../src/utils/variants.ts"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE;;;;GAIG;AACH,eAAO,MAAM,eAAe;;8EAkB1B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../src/utils/variants.ts"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE;;;;GAIG;AACH,eAAO,MAAM,eAAe;;8EAkB1B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/package.json

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