@crispy-seed/data-table 0.6.0 → 0.8.0

package/dist/styles.css

@@ -10023,7 +10023,7 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   --seed-prefix-icon-size: 18px;
 }
 
-.seed-record-panel__root {
+.seed-record-preview__root {
   background: var(--seed-color-bg-layer-default);
   flex-direction: column;
   height: 100%;
@@ -10032,7 +10032,7 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   overflow: hidden;
 }
 
-.seed-record-panel__toolbar {
+.seed-record-preview__toolbar {
   border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
   flex-shrink: 0;
   align-items: center;
@@ -10041,18 +10041,18 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   display: flex;
 }
 
-.seed-record-panel__toolbarSpacer {
+.seed-record-preview__toolbarSpacer {
   flex: 1;
 }
 
-.seed-record-panel__pager {
+.seed-record-preview__pager {
   align-items: center;
   gap: 6px;
   margin-inline-start: 12px;
   display: flex;
 }
 
-.seed-record-panel__counter {
+.seed-record-preview__counter {
   color: var(--seed-color-fg-neutral-subtle);
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -10062,7 +10062,7 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   overflow: hidden;
 }
 
-.seed-record-panel__iconbtn {
+.seed-record-preview__iconbtn {
   width: 28px;
   height: 28px;
   color: var(--seed-color-fg-neutral-subtle);
@@ -10079,12 +10079,12 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   display: inline-flex;
 }
 
-.seed-record-panel__iconbtn:hover {
+.seed-record-preview__iconbtn:hover {
   background: var(--seed-color-bg-layer-fill);
   color: var(--seed-color-fg-neutral);
 }
 
-.seed-record-panel__navbtn {
+.seed-record-preview__navbtn {
   background: var(--seed-color-bg-layer-default);
   width: 28px;
   height: 28px;
@@ -10101,16 +10101,16 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   box-shadow: inset 0 0 0 1px #0000000f, 0 0 2px #1c28402e, 0 1px 3px #0000000a;
 }
 
-.seed-record-panel__navbtn:hover:not(:disabled) {
+.seed-record-preview__navbtn:hover:not(:disabled) {
   background: var(--seed-color-bg-layer-fill);
 }
 
-.seed-record-panel__navbtn:disabled {
+.seed-record-preview__navbtn:disabled {
   opacity: .4;
   cursor: not-allowed;
 }
 
-.seed-record-panel__header {
+.seed-record-preview__header {
   flex-shrink: 0;
   align-items: center;
   gap: 8px;
@@ -10119,7 +10119,7 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   display: flex;
 }
 
-.seed-record-panel__fav {
+.seed-record-preview__fav {
   object-fit: cover;
   background: var(--seed-color-bg-layer-fill);
   border-radius: 4px;
@@ -10128,7 +10128,7 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   height: 22px;
 }
 
-.seed-record-panel__title {
+.seed-record-preview__title {
   letter-spacing: -.2px;
   min-width: 0;
   color: var(--seed-color-fg-neutral);
@@ -10140,18 +10140,18 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   overflow: hidden;
 }
 
-.seed-record-panel__body {
+.seed-record-preview__body {
   flex: 1;
   min-height: 0;
   padding: 8px 12px;
   overflow-y: auto;
 }
 
-.seed-record-panel__section {
+.seed-record-preview__section {
   padding: 8px 4px 0;
 }
 
-.seed-record-panel__sectionHead {
+.seed-record-preview__sectionHead {
   justify-content: space-between;
   align-items: center;
   gap: 8px;
@@ -10160,13 +10160,13 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   display: flex;
 }
 
-.seed-record-panel__sectionLabel {
+.seed-record-preview__sectionLabel {
   color: var(--seed-color-fg-neutral-subtle);
   font-size: 14px;
   font-weight: 500;
 }
 
-.seed-record-panel__sectionAction {
+.seed-record-preview__sectionAction {
   color: color-mix(in srgb, var(--seed-color-fg-neutral) 55%, transparent);
   cursor: pointer;
   background: none;
@@ -10177,24 +10177,24 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   font-weight: 400;
 }
 
-.seed-record-panel__sectionAction:hover {
+.seed-record-preview__sectionAction:hover {
   color: var(--seed-color-fg-neutral);
 }
 
-.seed-record-panel__highlights {
+.seed-record-preview__highlights {
   grid-template-columns: 1fr 1fr;
   gap: 8px;
   display: grid;
 }
 
-.seed-record-panel__highlight {
+.seed-record-preview__highlight {
   flex-direction: column;
   gap: 6px;
   min-width: 0;
   display: flex;
 }
 
-.seed-record-panel__highlightLabel {
+.seed-record-preview__highlightLabel {
   color: var(--seed-color-fg-neutral-subtle);
   align-items: center;
   gap: 4px;
@@ -10203,18 +10203,18 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   display: flex;
 }
 
-.seed-record-panel__highlightLabel span {
+.seed-record-preview__highlightLabel span {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 
-.seed-record-panel__highlightLabel svg {
+.seed-record-preview__highlightLabel svg {
   color: var(--seed-color-fg-neutral-subtle);
   flex-shrink: 0;
 }
 
-.seed-record-panel__highlightValue {
+.seed-record-preview__highlightValue {
   color: var(--seed-color-fg-neutral);
   text-overflow: ellipsis;
   font-size: 14px;
@@ -10222,17 +10222,17 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   overflow: hidden;
 }
 
-.seed-record-panel__activity {
+.seed-record-preview__activity {
   font-size: 14px;
 }
 
-.seed-record-panel__sections {
+.seed-record-preview__sections {
   flex-direction: column;
   padding-top: 8px;
   display: flex;
 }
 
-.seed-record-panel__sectionTrigger {
+.seed-record-preview__sectionTrigger {
   text-align: start;
   cursor: pointer;
   background: none;
@@ -10246,37 +10246,37 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
   display: flex;
 }
 
-.seed-record-panel__sectionTrigger[data-inert] {
+.seed-record-preview__sectionTrigger[data-inert] {
   cursor: default;
 }
 
-.seed-record-panel__sectionRowLabel {
+.seed-record-preview__sectionRowLabel {
   color: var(--seed-color-fg-neutral);
   font-size: 14px;
   font-weight: 500;
 }
 
-.seed-record-panel__sectionRowCount {
+.seed-record-preview__sectionRowCount {
   color: var(--seed-color-fg-neutral-subtle);
   font-size: 14px;
 }
 
-.seed-record-panel__sectionChevron {
+.seed-record-preview__sectionChevron {
   color: var(--seed-color-fg-neutral-subtle);
   flex-shrink: 0;
   margin-inline-start: auto;
   transition: transform .15s;
 }
 
-.seed-record-panel__sectionChevron[data-open] {
+.seed-record-preview__sectionChevron[data-open] {
   transform: rotate(180deg);
 }
 
-.seed-record-panel__sectionContent {
+.seed-record-preview__sectionContent {
   padding: 8px 8px 8px 12px;
 }
 
-.seed-record-panel__footer {
+.seed-record-preview__footer {
   border-top: 1px solid var(--seed-color-stroke-neutral-muted);
   flex-shrink: 0;
   align-items: center;
@@ -10328,51 +10328,85 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
 }
 
 .seed-resizable-panel__panel[data-floating="true"] {
+  z-index: 20;
+  opacity: 1;
   border-inline: none;
-  border-radius: 10px;
-  transition: transform .14s, padding .14s;
-  position: fixed;
+  border-radius: 12px;
+  position: absolute;
   top: 8px;
   bottom: 8px;
   transform: none;
-  box-shadow: inset 0 0 0 1px #0000, 0 0 0 1px #1c28400a, 0 4px 8px -4px #1c28401f, 0 4px 12px -2px #18294b29;
+  box-shadow: 0 0 0 1px #1c28400a, 0 4px 8px -4px #1c28401f, 0 4px 12px -2px #18294b29;
 }
 
 .seed-resizable-panel__panel[data-floating="true"][data-side="left"] {
-  padding: 8px 0 8px 8px;
+  left: 8px;
+}
+
+.seed-resizable-panel__panel[data-floating="true"][data-side="right"] {
+  right: 8px;
 }
 
-@starting-style {
-  .seed-resizable-panel__panel[data-floating="true"][data-side="left"] {
-    transform: translateX(calc(-100% - 8px));
+.seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="open"] {
+  --seed-enter-translate-x: calc(-100% - 8px);
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: 0;
+  --seed-enter-scale: 1;
+  animation: .18s cubic-bezier(.16, 1, .3, 1) seed-enter;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="open"] {
+    --seed-enter-translate-x: 0;
   }
 }
 
-.seed-resizable-panel__panel[data-floating="true"][data-side="right"] {
-  padding: 8px 8px 8px 0;
+.seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="closed"] {
+  --seed-exit-translate-x: calc(-100% - 8px);
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation: .14s cubic-bezier(.4, 0, 1, 1) forwards seed-exit;
 }
 
-@starting-style {
-  .seed-resizable-panel__panel[data-floating="true"][data-side="right"] {
-    transform: translateX(calc(100% + 8px));
+@media (prefers-reduced-motion: reduce) {
+  .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="closed"] {
+    --seed-exit-translate-x: 0;
   }
 }
 
-.seed-resizable-panel__inner {
-  opacity: 1;
-  height: 100%;
+.seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="open"] {
+  --seed-enter-translate-x: calc(100% + 8px);
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: 0;
+  --seed-enter-scale: 1;
+  animation: .18s cubic-bezier(.16, 1, .3, 1) seed-enter;
 }
 
-[data-floating="true"] > .seed-resizable-panel__inner {
-  transition: opacity .14s;
+@media (prefers-reduced-motion: reduce) {
+  .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="open"] {
+    --seed-enter-translate-x: 0;
+  }
 }
 
-@starting-style {
-  [data-floating="true"] > .seed-resizable-panel__inner {
-    opacity: 0;
+.seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="closed"] {
+  --seed-exit-translate-x: calc(100% + 8px);
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation: .14s cubic-bezier(.4, 0, 1, 1) forwards seed-exit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="closed"] {
+    --seed-exit-translate-x: 0;
   }
 }
 
+.seed-resizable-panel__inner {
+  height: 100%;
+}
+
 .seed-resizable-panel__handle {
   z-index: 2;
   cursor: col-resize;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@crispy-seed/data-table",
-  "version": "0.6.0",
-  "description": "Self-contained, publishable build of seed-design's Attio-measured DataTable, ResizablePanel and RecordPanel — one install, one CSS import.",
+  "version": "0.8.0",
+  "description": "Self-contained, publishable build of seed-design's Attio-measured DataTable, ResizablePanel and RecordPreview — one install, one CSS import.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -23,8 +23,8 @@
     "./data-table-recipe.layered.css": "./dist/data-table-recipe.layered.css",
     "./resizable-panel-recipe.css": "./dist/resizable-panel-recipe.css",
     "./resizable-panel-recipe.layered.css": "./dist/resizable-panel-recipe.layered.css",
-    "./record-panel-recipe.css": "./dist/record-panel-recipe.css",
-    "./record-panel-recipe.layered.css": "./dist/record-panel-recipe.layered.css",
+    "./record-preview-recipe.css": "./dist/record-preview-recipe.css",
+    "./record-preview-recipe.layered.css": "./dist/record-preview-recipe.layered.css",
     "./package.json": "./package.json"
   },
   "main": "./dist/index.cjs",
@@ -62,6 +62,7 @@
     "@seed-design/react-field": "^2.0.1",
     "@seed-design/react-image": "^1.1.0",
     "@seed-design/react-menu": "^2.0.2",
+    "@seed-design/react-presence": "^1.0.1",
     "@seed-design/react-primitive": "^2.0.1",
     "@seed-design/react-resizable-panel": "^0.1.0",
     "@seed-design/react-scale-feedback": "^1.0.0",