@redseed/redseed-ui-tailwindcss 7.29.2 → 7.29.7

package/components/form_field_select.css

@@ -64,9 +64,24 @@
     @apply size-6 transform transition-transform;
 }
 
+/**
+ * Visibility utilities must come BEFORE the shared styling rule below, because
+ * `not-sr-only` resets width/padding/margin to defaults. If the styling rule
+ * came first, `not-sr-only` would override `w-full`, `py-3`, `pl-5`, `pr-14`
+ * etc. on the native <select> and the mobile picker would render with OS
+ * defaults, overflowing tight flex layouts.
+ */
+.rsui-form-field-select select {
+    @apply sr-only;
+}
+
+.rsui-form-field-select--mobile select {
+    @apply not-sr-only;
+}
+
 .rsui-form-field-select__trigger,
 .rsui-form-field-select--mobile select {
-    @apply block w-full border ring-0 bg-none cursor-pointer appearance-none transition;
+    @apply block w-full min-w-0 border ring-0 bg-none cursor-pointer appearance-none transition;
     @apply py-3 pl-5 pr-14 truncate;
     @apply text-base rounded-lg outline-hidden focus:outline-hidden;
     @apply bg-background-primary text-text-primary placeholder-text-secondary border-border-primary;
@@ -82,14 +97,6 @@
     @apply border-border-error ring-0;
 }
 
-.rsui-form-field-select select {
-    @apply sr-only;
-}
-
-.rsui-form-field-select--mobile select {
-    @apply not-sr-only;
-}
-
 .rsui-form-field-select__live-region {
     @apply sr-only;
 }

package/components/form_field_tree_select.css

@@ -0,0 +1,69 @@
+.rsui-form-field-tree-select {
+    @apply relative;
+}
+
+.rsui-form-field-tree-select__group {
+    @apply relative;
+}
+
+.rsui-form-field-tree-select__trigger {
+    @apply block w-full border ring-0 bg-none cursor-pointer appearance-none transition;
+    @apply py-3 px-5 truncate text-left;
+    @apply text-base rounded-lg outline-hidden focus:outline-hidden;
+    @apply bg-background-primary text-text-primary placeholder-text-secondary border-border-primary;
+    @apply focus:border-border-primary;
+    @apply focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-border-primary;
+    @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:border-border-disabled disabled:ring-0 disabled:cursor-default;
+}
+
+.rsui-form-field-tree-select__trigger--disabled {
+    @apply text-text-disabled bg-background-disabled border-border-disabled cursor-default;
+}
+
+.rsui-form-field-tree-select__modal-header {
+    @apply flex flex-col gap-y-2 xs:gap-y-0 xs:flex-row xs:items-center xs:justify-between;
+}
+
+.rsui-form-field-tree-select__search {
+    @apply mb-4;
+}
+
+.rsui-form-field-tree-select__tree {
+    @apply max-h-96 flex flex-col gap-3 overflow-y-auto pt-1 pl-1;
+}
+
+.rsui-form-field-tree-select-children {
+    @apply flex flex-col gap-3 ml-4 sm:ml-6 md:ml-7;
+}
+
+.rsui-form-field-tree-select-item {
+    @apply flex items-start gap-x-1 sm:gap-x-1 md:gap-x-2;
+}
+
+.rsui-form-field-tree-select-item__controls {
+    @apply flex items-start gap-x-0 sm:gap-x-1 md:gap-x-2;
+}
+
+.rsui-form-field-tree-select-item__opener {
+    @apply pt-1 md:pt-0.5 w-5 text-text-secondary;
+}
+
+.rsui-form-field-tree-select-item__opener--clickable {
+    @apply cursor-pointer;
+}
+
+.rsui-form-field-tree-select-item__opener-icon {
+    @apply size-4 md:size-5 stroke-2 transition;
+}
+
+.rsui-form-field-tree-select-item__opener-icon--open {
+    @apply transform rotate-90;
+}
+
+.rsui-form-field-tree-select-item__name {
+    @apply font-medium select-none cursor-pointer text-xs sm:text-sm md:text-base pt-1 sm:pt-0.5 md:pt-0;
+}
+
+.rsui-form-field-tree-select-item__name--searched {
+    @apply font-semibold;
+}

package/components/modal.css

@@ -58,7 +58,7 @@
 }
 
 .rsui-modal__body {
-    @apply p-0 bg-background-primary relative overflow-scroll overscroll-contain z-0;
+    @apply p-0 bg-background-primary relative z-0;
     -ms-overflow-style: none;
     scrollbar-width: none;
 }
@@ -85,3 +85,9 @@
 .rsui-modal__footer--start {
     @apply justify-start;
 }
+
+/* Below sm:, stacked footer buttons should fill the row for larger tap targets.
+   Excludes the --start variant where left-aligned full-width reads as a list. */
+.rsui-modal__footer:not(.rsui-modal__footer--start) > .rsui-button-slot {
+    @apply w-full sm:w-fit;
+}

package/components/page_header.css

@@ -9,7 +9,7 @@
 }
 
 .rsui-page-header__title {
-    @apply pr-2 flex flex-row items-center space-x-6;
+    @apply pr-2 flex flex-row items-start space-x-6;
 }
 
 .rsui-page-header__title h1 {
@@ -57,7 +57,7 @@
 }
 
 .rsui-page-header__avatar {
-    @apply size-12 mr-3;
+    @apply shrink-0 size-12 mr-3;
 }
 
 /* Profile variant — larger avatar, bottom-aligned text, inline subtitle */

package/components.css

@@ -39,6 +39,7 @@ Please be careful when adding new components and updating the order.
 @import './components/form_field_suffix.css';
 @import './components/form_field_text.css';
 @import './components/form_field_textarea.css';
+@import './components/form_field_tree_select.css';
 @import './components/form_field_uploader.css';
 @import './components/form_fields_login.css';
 @import './components/form_fields_register.css';

package/package.json

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