@redseed/redseed-ui-tailwindcss 7.30.1 → 7.31.0

package/components/column_picker.css

@@ -1,3 +1,14 @@
+/* The picker uses a ButtonTertiary trigger on desktop and a ButtonSecondary
+   trigger on mobile so the affordance reads as tappable on touch devices
+   (where the tertiary's hover border never fires). */
+.rsui-column-picker__trigger--desktop {
+    @apply hidden md:inline-flex;
+}
+
+.rsui-column-picker__trigger--mobile {
+    @apply inline-flex md:hidden;
+}
+
 .rsui-column-picker__count {
     @apply inline-flex items-center px-1.5 ml-1 text-xs rounded-md bg-background-disabled text-text-secondary;
 }
@@ -7,25 +18,30 @@
 }
 
 .rsui-column-picker__item {
-    @apply flex items-center gap-2.5 px-2 py-1.5 rounded-md cursor-pointer text-sm text-text-primary;
+    @apply flex items-center px-2 py-1.5 rounded-md cursor-pointer text-sm text-text-primary;
     @apply hover:bg-background-secondary;
     @apply focus-visible:bg-background-secondary focus-visible:outline-none;
 }
 
-.rsui-column-picker__check {
-    @apply shrink-0 flex items-center justify-center;
-    @apply w-4 h-4 rounded border border-border-primary bg-background-primary;
-    @apply transition-colors;
+.rsui-column-picker__item--disabled {
+    @apply cursor-default text-text-disabled;
+    @apply hover:bg-transparent;
 }
 
-.rsui-column-picker__check svg {
-    @apply w-3 h-3 stroke-[3] text-text-primary;
+/* The checkbox is presentational (the row is the control), so the wrapper
+   carries the row's pointer cursor across the whole item. */
+.rsui-column-picker__checkbox {
+    @apply contents;
 }
 
-.rsui-column-picker__check--on {
-    @apply border-text-primary;
+/* Vertically centre the checkbox against its single-line label in the dense
+   menu row (the form-field default top-aligns for multi-line labels). */
+.rsui-column-picker__item .rsui-form-field-checkbox__checkbox {
+    @apply items-center;
 }
 
-.rsui-column-picker__label {
-    @apply leading-none;
+/* Required columns pass `disabled` to the checkbox (native locked styling);
+   also grey the label so the whole row reads as locked. */
+.rsui-column-picker__item--disabled .rsui-form-field-checkbox__label {
+    @apply text-text-disabled;
 }

package/components/form_field_checkbox.css

@@ -20,5 +20,51 @@
 }
 
 .rsui-form-field-checkbox__check svg {
-    @apply size-full relative z-1 pointer-events-none;
+    @apply size-full relative z-1 pointer-events-none stroke-[2.5] origin-center;
+    /* Short, cute draw-on: the tick strokes itself in with a tiny pop.
+       dasharray is set a touch above the check path length so the resting
+       state has no gap. Disabled under reduced-motion below. */
+    stroke-dasharray: 30;
+    animation: rsui-checkbox-tick 200ms ease-out;
+}
+
+@keyframes rsui-checkbox-tick {
+    0% { stroke-dashoffset: 30; transform: scale(0.8); }
+    60% { transform: scale(1.06); }
+    100% { stroke-dashoffset: 0; transform: scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .rsui-form-field-checkbox__check svg {
+        animation: none;
+        stroke-dasharray: none;
+    }
+}
+
+/* Smaller variants — for dense surfaces like the table column picker dropdown.
+   Sizes follow the system scale: sm = 16px, xs = 12px (default is 24px).
+   Declared after the base rules so they win on equal specificity; the radius
+   is also set on the input, since the input draws the visible bordered box. */
+.rsui-form-field-checkbox__check--sm {
+    @apply size-4 rounded-md;
+}
+
+.rsui-form-field-checkbox__check--sm input[type="checkbox"] {
+    @apply rounded-md;
+}
+
+.rsui-form-field-checkbox__label--sm {
+    @apply leading-5 text-sm;
+}
+
+.rsui-form-field-checkbox__check--xs {
+    @apply size-3 rounded;
+}
+
+.rsui-form-field-checkbox__check--xs input[type="checkbox"] {
+    @apply rounded;
+}
+
+.rsui-form-field-checkbox__label--xs {
+    @apply leading-4 text-xs;
 }

package/components/td.css

@@ -18,3 +18,29 @@
 .rsui-td--fixed {
     @apply whitespace-normal overflow-auto overscroll-auto;
 }
+
+/* Pinned body cell — sticks to the left during horizontal scroll.
+   Background must be opaque so scrolled content doesn't show through;
+   matches the row hover bg when the row is clickable. */
+.rsui-td--pinned {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background-color: var(--color-background-primary);
+}
+
+.rsui-td--pinned::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: var(--color-border-primary);
+    pointer-events: none;
+}
+
+.rsui-tr--clickable:hover .rsui-td--pinned,
+.rsui-tr--clickable:focus-visible .rsui-td--pinned {
+    background-color: var(--color-background-disabled);
+}

package/components/th.css

@@ -67,3 +67,24 @@
 .rsui-th__sort-icon--desc {
     @apply rotate-180;
 }
+
+/* Pinned header cell — stays put during horizontal scroll.
+   Opaque header bg so scrolled-under cells don't show through.
+   Subtle right-edge separator marks the scroll boundary. */
+.rsui-th--pinned {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background-color: var(--color-background-disabled);
+}
+
+.rsui-th--pinned::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: var(--color-border-primary);
+    pointer-events: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-tailwindcss",
-    "version": "7.30.1",
+    "version": "7.31.0",
     "description": "RedSeed UI Tailwindcss",
     "main": "index.js",
     "style": "index.css",