@crispy-seed/data-table 0.5.0 → 0.7.0

package/dist/styles.css

@@ -462,17 +462,42 @@
   --seed-dimension-spacing-y-nav-to-title: var(--seed-dimension-x5);
   --seed-dimension-spacing-y-screen-bottom: var(--seed-dimension-x14);
   --seed-dimension-spacing-y-between-text: var(--seed-dimension-x1_5);
-  --seed-radius-r0_5: 2px;
-  --seed-radius-r1: 4px;
-  --seed-radius-r1_5: 6px;
-  --seed-radius-r2: 8px;
-  --seed-radius-r2_5: 10px;
-  --seed-radius-r3: 12px;
-  --seed-radius-r3_5: 14px;
-  --seed-radius-r4: 16px;
-  --seed-radius-r5: 20px;
-  --seed-radius-r6: 24px;
-  --seed-radius-full: 9999px;
+  --seed-duration-d1: 50ms;
+  --seed-duration-d2: .1s;
+  --seed-duration-d3: .15s;
+  --seed-duration-d4: .2s;
+  --seed-duration-d5: .25s;
+  --seed-duration-d6: .3s;
+  --seed-duration-color-transition: var(--seed-duration-d3);
+  --seed-duration-pressed-scale: var(--seed-duration-d3);
+  --seed-font-size-t1: clamp(calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-min, 1)), calc(.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-max, 1)));
+  --seed-font-size-t2: clamp(calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-min, 1)), calc(.75rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-max, 1)));
+  --seed-font-size-t3: clamp(calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-min, 1)), calc(.8125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-max, 1)));
+  --seed-font-size-t4: clamp(calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-min, 1)), calc(.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-max, 1)));
+  --seed-font-size-t5: clamp(calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-min, 1)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-max, 1)));
+  --seed-font-size-t6: clamp(calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-min, 1)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-max, 1)));
+  --seed-font-size-t7: clamp(calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-min, 1)), calc(1.25rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-max, 1)));
+  --seed-font-size-t8: clamp(calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-min, 1)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-max, 1)));
+  --seed-font-size-t9: clamp(calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-min, 1)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-max, 1)));
+  --seed-font-size-t10: clamp(calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-min, 1)), calc(1.625rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-max, 1)));
+  --seed-font-size-t11: clamp(calc(var(--seed-font-size-t11-static) * var(--seed-font-size-limit-min, 1)), calc(1.75rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t11-static) * var(--seed-font-size-limit-max, 1)));
+  --seed-font-size-t12: clamp(calc(var(--seed-font-size-t12-static) * var(--seed-font-size-limit-min, 1)), calc(2rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t12-static) * var(--seed-font-size-limit-max, 1)));
+  --seed-font-size-t13: clamp(calc(var(--seed-font-size-t13-static) * var(--seed-font-size-limit-min, 1)), calc(2.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t13-static) * var(--seed-font-size-limit-max, 1)));
+  --seed-font-size-t14: clamp(calc(var(--seed-font-size-t14-static) * var(--seed-font-size-limit-min, 1)), calc(3rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t14-static) * var(--seed-font-size-limit-max, 1)));
+  --seed-font-size-t1-static: calc(11px / var(--seed-static-font-scale, 1));
+  --seed-font-size-t2-static: calc(12px / var(--seed-static-font-scale, 1));
+  --seed-font-size-t3-static: calc(13px / var(--seed-static-font-scale, 1));
+  --seed-font-size-t4-static: calc(14px / var(--seed-static-font-scale, 1));
+  --seed-font-size-t5-static: calc(16px / var(--seed-static-font-scale, 1));
+  --seed-font-size-t6-static: calc(18px / var(--seed-static-font-scale, 1));
+  --seed-font-size-t7-static: calc(20px / var(--seed-static-font-scale, 1));
+  --seed-font-size-t8-static: calc(22px / var(--seed-static-font-scale, 1));
+  --seed-font-size-t9-static: calc(24px / var(--seed-static-font-scale, 1));
+  --seed-font-size-t10-static: calc(26px / var(--seed-static-font-scale, 1));
+  --seed-font-size-t11-static: calc(28px / var(--seed-static-font-scale, 1));
+  --seed-font-size-t12-static: calc(32px / var(--seed-static-font-scale, 1));
+  --seed-font-size-t13-static: calc(40px / var(--seed-static-font-scale, 1));
+  --seed-font-size-t14-static: calc(48px / var(--seed-static-font-scale, 1));
   --seed-font-weight-regular: 400;
   --seed-font-weight-medium: 500;
   --seed-font-weight-bold: 700;
@@ -504,34 +529,17 @@
   --seed-line-height-t12-static: calc(42px / var(--seed-static-font-scale, 1));
   --seed-line-height-t13-static: calc(52px / var(--seed-static-font-scale, 1));
   --seed-line-height-t14-static: calc(60px / var(--seed-static-font-scale, 1));
-  --seed-font-size-t1: clamp(calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-min, 1)), calc(.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-max, 1)));
-  --seed-font-size-t2: clamp(calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-min, 1)), calc(.75rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-max, 1)));
-  --seed-font-size-t3: clamp(calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-min, 1)), calc(.8125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-max, 1)));
-  --seed-font-size-t4: clamp(calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-min, 1)), calc(.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-max, 1)));
-  --seed-font-size-t5: clamp(calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-min, 1)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-max, 1)));
-  --seed-font-size-t6: clamp(calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-min, 1)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-max, 1)));
-  --seed-font-size-t7: clamp(calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-min, 1)), calc(1.25rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-max, 1)));
-  --seed-font-size-t8: clamp(calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-min, 1)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-max, 1)));
-  --seed-font-size-t9: clamp(calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-min, 1)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-max, 1)));
-  --seed-font-size-t10: clamp(calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-min, 1)), calc(1.625rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-max, 1)));
-  --seed-font-size-t11: clamp(calc(var(--seed-font-size-t11-static) * var(--seed-font-size-limit-min, 1)), calc(1.75rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t11-static) * var(--seed-font-size-limit-max, 1)));
-  --seed-font-size-t12: clamp(calc(var(--seed-font-size-t12-static) * var(--seed-font-size-limit-min, 1)), calc(2rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t12-static) * var(--seed-font-size-limit-max, 1)));
-  --seed-font-size-t13: clamp(calc(var(--seed-font-size-t13-static) * var(--seed-font-size-limit-min, 1)), calc(2.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t13-static) * var(--seed-font-size-limit-max, 1)));
-  --seed-font-size-t14: clamp(calc(var(--seed-font-size-t14-static) * var(--seed-font-size-limit-min, 1)), calc(3rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t14-static) * var(--seed-font-size-limit-max, 1)));
-  --seed-font-size-t1-static: calc(11px / var(--seed-static-font-scale, 1));
-  --seed-font-size-t2-static: calc(12px / var(--seed-static-font-scale, 1));
-  --seed-font-size-t3-static: calc(13px / var(--seed-static-font-scale, 1));
-  --seed-font-size-t4-static: calc(14px / var(--seed-static-font-scale, 1));
-  --seed-font-size-t5-static: calc(16px / var(--seed-static-font-scale, 1));
-  --seed-font-size-t6-static: calc(18px / var(--seed-static-font-scale, 1));
-  --seed-font-size-t7-static: calc(20px / var(--seed-static-font-scale, 1));
-  --seed-font-size-t8-static: calc(22px / var(--seed-static-font-scale, 1));
-  --seed-font-size-t9-static: calc(24px / var(--seed-static-font-scale, 1));
-  --seed-font-size-t10-static: calc(26px / var(--seed-static-font-scale, 1));
-  --seed-font-size-t11-static: calc(28px / var(--seed-static-font-scale, 1));
-  --seed-font-size-t12-static: calc(32px / var(--seed-static-font-scale, 1));
-  --seed-font-size-t13-static: calc(40px / var(--seed-static-font-scale, 1));
-  --seed-font-size-t14-static: calc(48px / var(--seed-static-font-scale, 1));
+  --seed-radius-r0_5: 2px;
+  --seed-radius-r1: 4px;
+  --seed-radius-r1_5: 6px;
+  --seed-radius-r2: 8px;
+  --seed-radius-r2_5: 10px;
+  --seed-radius-r3: 12px;
+  --seed-radius-r3_5: 14px;
+  --seed-radius-r4: 16px;
+  --seed-radius-r5: 20px;
+  --seed-radius-r6: 24px;
+  --seed-radius-full: 9999px;
   --seed-timing-function-linear: cubic-bezier(0, 0, 1, 1);
   --seed-timing-function-easing: cubic-bezier(.35, 0, .35, 1);
   --seed-timing-function-enter: cubic-bezier(0, 0, .15, 1);
@@ -539,27 +547,9 @@
   --seed-timing-function-enter-expressive: cubic-bezier(.03, .4, .1, 1);
   --seed-timing-function-exit-expressive: cubic-bezier(.35, 0, .95, .55);
   --seed-timing-function-pressed-scale: cubic-bezier(0, 0, .15, 1);
-  --seed-duration-d1: 50ms;
-  --seed-duration-d2: .1s;
-  --seed-duration-d3: .15s;
-  --seed-duration-d4: .2s;
-  --seed-duration-d5: .25s;
-  --seed-duration-d6: .3s;
-  --seed-duration-color-transition: var(--seed-duration-d3);
-  --seed-duration-pressed-scale: var(--seed-duration-d3);
 }
 
 :root, :root[data-seed-color-mode="system"][data-seed-user-color-scheme="light"], :root[data-seed-color-mode="light-only"], :root [data-seed-color-mode="light-only"] {
-  --seed-gradient-fade-mask: #0000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29.0%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #0006 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000 100%;
-  --seed-gradient-glow-magic: #fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;
-  --seed-gradient-glow-magic-pressed: #fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;
-  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
-  --seed-gradient-highlight-magic-pressed: #e14f00 20%, #ae58bf 100%;
-  --seed-gradient-shimmer-magic: #fff9f500 0%, #fff9f5cc 46%, #fff9f5cc 54%, #fff9f500 100%;
-  --seed-gradient-shimmer-neutral: #fff0 0%, #ffffffab 46%, #ffffffab 54%, #fff0 100%;
-  --seed-shadow-s1: 0px 1px 4px 0px #00000014;
-  --seed-shadow-s2: 0px 2px 10px 0px #0000001a;
-  --seed-shadow-s3: 0px 4px 16px 0px #0000001f;
   --seed-color-palette-gray-00: #fff;
   --seed-color-palette-gray-100: #f7f8f9;
   --seed-color-palette-gray-200: #f3f4f5;
@@ -759,19 +749,19 @@
   --seed-color-banner-teal: #e6faf6;
   --seed-color-banner-warm-gray: #f2f0ee;
   --seed-color-banner-yellow: #fffae1;
+  --seed-gradient-fade-mask: #0000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29.0%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #0006 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000 100%;
+  --seed-gradient-glow-magic: #fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;
+  --seed-gradient-glow-magic-pressed: #fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;
+  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
+  --seed-gradient-highlight-magic-pressed: #e14f00 20%, #ae58bf 100%;
+  --seed-gradient-shimmer-magic: #fff9f500 0%, #fff9f5cc 46%, #fff9f5cc 54%, #fff9f500 100%;
+  --seed-gradient-shimmer-neutral: #fff0 0%, #ffffffab 46%, #ffffffab 54%, #fff0 100%;
+  --seed-shadow-s1: 0px 1px 4px 0px #00000014;
+  --seed-shadow-s2: 0px 2px 10px 0px #0000001a;
+  --seed-shadow-s3: 0px 4px 16px 0px #0000001f;
 }
 
 :root[data-seed-color-mode="system"][data-seed-user-color-scheme="dark"], :root[data-seed-color-mode="dark-only"], :root [data-seed-color-mode="dark-only"] {
-  --seed-gradient-fade-mask: #0000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29.0%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #0006 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000 100%;
-  --seed-gradient-glow-magic: #2d252d 0%, #3a312b 80%, #333232 100%;
-  --seed-gradient-glow-magic-pressed: #3e333e 0%, #51453e 80%, #434242 100%;
-  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
-  --seed-gradient-highlight-magic-pressed: #ff9e65 20%, #e89bee 100%;
-  --seed-gradient-shimmer-magic: #fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%;
-  --seed-gradient-shimmer-neutral: #fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;
-  --seed-shadow-s1: 0px 1px 4px 0px #00000080;
-  --seed-shadow-s2: 0px 2px 10px 0px #000000ad;
-  --seed-shadow-s3: 0px 4px 16px 0px #000c;
   --seed-color-palette-gray-00: #000;
   --seed-color-palette-gray-100: #16171b;
   --seed-color-palette-gray-200: #1d2025;
@@ -971,6 +961,16 @@
   --seed-color-banner-teal: #143633;
   --seed-color-banner-warm-gray: #2f2b27;
   --seed-color-banner-yellow: #3e2b00;
+  --seed-gradient-fade-mask: #0000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29.0%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #0006 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000 100%;
+  --seed-gradient-glow-magic: #2d252d 0%, #3a312b 80%, #333232 100%;
+  --seed-gradient-glow-magic-pressed: #3e333e 0%, #51453e 80%, #434242 100%;
+  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
+  --seed-gradient-highlight-magic-pressed: #ff9e65 20%, #e89bee 100%;
+  --seed-gradient-shimmer-magic: #fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%;
+  --seed-gradient-shimmer-neutral: #fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;
+  --seed-shadow-s1: 0px 1px 4px 0px #00000080;
+  --seed-shadow-s2: 0px 2px 10px 0px #000000ad;
+  --seed-shadow-s3: 0px 4px 16px 0px #000c;
 }
 
 :root {
@@ -4931,6 +4931,41 @@ tbody tr:last-child .seed-data-table__cell {
   overflow: hidden;
 }
 
+.seed-data-table__entityActions {
+  opacity: 0;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 6px;
+  margin-inline-start: auto;
+  display: flex;
+}
+
+tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-within {
+  opacity: 1;
+}
+
+.seed-data-table__entityAction {
+  width: 20px;
+  height: 20px;
+  color: color-mix(in srgb, var(--seed-color-fg-neutral) 55%, transparent);
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: 6px;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+  display: inline-flex;
+}
+
+.seed-data-table__entityAction:hover {
+  background: color-mix(in srgb, var(--seed-color-fg-neutral) 4%, transparent);
+  color: var(--seed-color-fg-neutral);
+}
+
 .seed-data-table__link {
   color: var(--seed-color-fg-neutral);
   text-overflow: ellipsis;
@@ -9988,6 +10023,426 @@ tbody tr:last-child .seed-data-table__cell {
   --seed-prefix-icon-size: 18px;
 }
 
+.seed-record-preview__root {
+  background: var(--seed-color-bg-layer-default);
+  flex-direction: column;
+  height: 100%;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+  display: flex;
+  overflow: hidden;
+}
+
+.seed-record-preview__toolbar {
+  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
+  flex-shrink: 0;
+  align-items: center;
+  height: 49px;
+  padding: 8px 10px;
+  display: flex;
+}
+
+.seed-record-preview__toolbarSpacer {
+  flex: 1;
+}
+
+.seed-record-preview__pager {
+  align-items: center;
+  gap: 6px;
+  margin-inline-start: 12px;
+  display: flex;
+}
+
+.seed-record-preview__counter {
+  color: var(--seed-color-fg-neutral-subtle);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-inline-start: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  overflow: hidden;
+}
+
+.seed-record-preview__iconbtn {
+  width: 28px;
+  height: 28px;
+  color: var(--seed-color-fg-neutral-subtle);
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: 6px;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  font-family: inherit;
+  transition: background-color .12s;
+  display: inline-flex;
+}
+
+.seed-record-preview__iconbtn:hover {
+  background: var(--seed-color-bg-layer-fill);
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-record-preview__navbtn {
+  background: var(--seed-color-bg-layer-default);
+  width: 28px;
+  height: 28px;
+  color: var(--seed-color-fg-neutral);
+  cursor: pointer;
+  border: none;
+  border-radius: 6px;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  font-family: inherit;
+  display: inline-flex;
+  box-shadow: inset 0 0 0 1px #0000000f, 0 0 2px #1c28402e, 0 1px 3px #0000000a;
+}
+
+.seed-record-preview__navbtn:hover:not(:disabled) {
+  background: var(--seed-color-bg-layer-fill);
+}
+
+.seed-record-preview__navbtn:disabled {
+  opacity: .4;
+  cursor: not-allowed;
+}
+
+.seed-record-preview__header {
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+  height: 52px;
+  padding: 0 12px;
+  display: flex;
+}
+
+.seed-record-preview__fav {
+  object-fit: cover;
+  background: var(--seed-color-bg-layer-fill);
+  border-radius: 4px;
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+}
+
+.seed-record-preview__title {
+  letter-spacing: -.2px;
+  min-width: 0;
+  color: var(--seed-color-fg-neutral);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  font-size: 16px;
+  font-weight: 600;
+  overflow: hidden;
+}
+
+.seed-record-preview__body {
+  flex: 1;
+  min-height: 0;
+  padding: 8px 12px;
+  overflow-y: auto;
+}
+
+.seed-record-preview__section {
+  padding: 8px 4px 0;
+}
+
+.seed-record-preview__sectionHead {
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  height: 20px;
+  margin-bottom: 8px;
+  display: flex;
+}
+
+.seed-record-preview__sectionLabel {
+  color: var(--seed-color-fg-neutral-subtle);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.seed-record-preview__sectionAction {
+  color: color-mix(in srgb, var(--seed-color-fg-neutral) 55%, transparent);
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 400;
+}
+
+.seed-record-preview__sectionAction:hover {
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-record-preview__highlights {
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  display: grid;
+}
+
+.seed-record-preview__highlight {
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  display: flex;
+}
+
+.seed-record-preview__highlightLabel {
+  color: var(--seed-color-fg-neutral-subtle);
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  display: flex;
+}
+
+.seed-record-preview__highlightLabel span {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.seed-record-preview__highlightLabel svg {
+  color: var(--seed-color-fg-neutral-subtle);
+  flex-shrink: 0;
+}
+
+.seed-record-preview__highlightValue {
+  color: var(--seed-color-fg-neutral);
+  text-overflow: ellipsis;
+  font-size: 14px;
+  font-weight: 500;
+  overflow: hidden;
+}
+
+.seed-record-preview__activity {
+  font-size: 14px;
+}
+
+.seed-record-preview__sections {
+  flex-direction: column;
+  padding-top: 8px;
+  display: flex;
+}
+
+.seed-record-preview__sectionTrigger {
+  text-align: start;
+  cursor: pointer;
+  background: none;
+  border: none;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  height: 20px;
+  padding: 0 8px 0 12px;
+  font-family: inherit;
+  display: flex;
+}
+
+.seed-record-preview__sectionTrigger[data-inert] {
+  cursor: default;
+}
+
+.seed-record-preview__sectionRowLabel {
+  color: var(--seed-color-fg-neutral);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.seed-record-preview__sectionRowCount {
+  color: var(--seed-color-fg-neutral-subtle);
+  font-size: 14px;
+}
+
+.seed-record-preview__sectionChevron {
+  color: var(--seed-color-fg-neutral-subtle);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  transition: transform .15s;
+}
+
+.seed-record-preview__sectionChevron[data-open] {
+  transform: rotate(180deg);
+}
+
+.seed-record-preview__sectionContent {
+  padding: 8px 8px 8px 12px;
+}
+
+.seed-record-preview__footer {
+  border-top: 1px solid var(--seed-color-stroke-neutral-muted);
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  display: flex;
+}
+
+.seed-resizable-panel__root {
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+
+.seed-resizable-panel__spacer {
+  flex: none;
+  height: 100%;
+  transition: width .14s;
+}
+
+.seed-resizable-panel__panel {
+  box-sizing: border-box;
+  background: var(--seed-color-bg-layer-default);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.seed-resizable-panel__panel[data-side="left"] {
+  left: 0;
+}
+
+.seed-resizable-panel__panel[data-side="right"] {
+  right: 0;
+}
+
+.seed-resizable-panel__panel[data-floating="false"] {
+  box-shadow: none;
+  border-radius: 0;
+}
+
+.seed-resizable-panel__panel[data-floating="false"][data-side="left"] {
+  border-inline-end: 1px solid var(--seed-color-stroke-neutral-muted);
+}
+
+.seed-resizable-panel__panel[data-floating="false"][data-side="right"] {
+  border-inline-start: 1px solid var(--seed-color-stroke-neutral-muted);
+}
+
+.seed-resizable-panel__panel[data-floating="true"] {
+  border-inline: none;
+  border-radius: 10px;
+  transition: transform .14s, padding .14s;
+  position: fixed;
+  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;
+}
+
+.seed-resizable-panel__panel[data-floating="true"][data-side="left"] {
+  padding: 8px 0 8px 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="right"] {
+  padding: 8px 8px 8px 0;
+}
+
+@starting-style {
+  .seed-resizable-panel__panel[data-floating="true"][data-side="right"] {
+    transform: translateX(calc(100% + 8px));
+  }
+}
+
+.seed-resizable-panel__inner {
+  opacity: 1;
+  height: 100%;
+}
+
+[data-floating="true"] > .seed-resizable-panel__inner {
+  transition: opacity .14s;
+}
+
+@starting-style {
+  [data-floating="true"] > .seed-resizable-panel__inner {
+    opacity: 0;
+  }
+}
+
+.seed-resizable-panel__handle {
+  z-index: 2;
+  cursor: col-resize;
+  touch-action: none;
+  background: none;
+  width: 10px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+
+.seed-resizable-panel__handle[data-side="left"] {
+  right: 0;
+}
+
+.seed-resizable-panel__handle[data-side="right"] {
+  left: 0;
+}
+
+.seed-resizable-panel__handle:before {
+  content: "";
+  background: var(--seed-color-stroke-neutral-muted);
+  width: 1px;
+  height: 100%;
+  transition: background-color .16s, height .16s;
+  position: absolute;
+  top: 0;
+}
+
+.seed-resizable-panel__handle[data-side="left"]:before {
+  right: 0;
+}
+
+.seed-resizable-panel__handle[data-side="right"]:before {
+  left: 0;
+}
+
+.seed-resizable-panel__handle:hover:before, .seed-resizable-panel__handle[data-dragging]:before {
+  background: #0298d9;
+  width: 2px;
+}
+
+.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column {
+  z-index: 1;
+  cursor: col-resize;
+  justify-content: center;
+  align-items: center;
+  width: 7px;
+  display: flex;
+  left: -3px;
+  right: -3px;
+}
+
+.seed-resizable-panel__handle.crisp-seed-resizable-panel-handle--column:before {
+  content: none;
+}
+
+.seed-resizable-panel__handleInner {
+  opacity: 0;
+  background: #0298d9;
+  border-radius: 3px;
+  width: 3px;
+  height: 100%;
+  transition: opacity .1s .1s;
+}
+
+.seed-resizable-panel__handle:hover .seed-resizable-panel__handleInner, .seed-resizable-panel__handle[data-dragging] .seed-resizable-panel__handleInner {
+  opacity: 1;
+}
+
 .seed-scroll-fog {
   width: 100%;
   height: 100%;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@crispy-seed/data-table",
-  "version": "0.5.0",
-  "description": "Self-contained, publishable build of seed-design's Attio-measured DataTable — one install, one CSS import.",
+  "version": "0.7.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",
@@ -21,6 +21,10 @@
     "./styles.css": "./dist/styles.css",
     "./data-table-recipe.css": "./dist/data-table-recipe.css",
     "./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-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",
@@ -59,6 +63,7 @@
     "@seed-design/react-image": "^1.1.0",
     "@seed-design/react-menu": "^2.0.2",
     "@seed-design/react-primitive": "^2.0.1",
+    "@seed-design/react-resizable-panel": "^0.1.0",
     "@seed-design/react-scale-feedback": "^1.0.0",
     "@seed-design/react-segmented-control": "^2.0.2",
     "@seed-design/react-select": "^1.0.1",