@redseed/redseed-ui-tailwindcss 7.30.2 → 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/package.json

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