@redseed/redseed-ui-tailwindcss 7.29.3 → 7.30.0

package/components/drawer.css

@@ -0,0 +1,93 @@
+.rsui-drawer {
+    @apply fixed inset-0 z-50;
+}
+
+.rsui-drawer__background-wrapper {
+    @apply fixed inset-0 transition-all backdrop-blur-xs bg-text-primary/70;
+}
+
+.rsui-drawer__background {
+    @apply absolute inset-0 bg-transparent opacity-100;
+}
+
+.rsui-drawer__panel {
+    @apply fixed top-0 bottom-0 right-0 z-1 flex flex-col w-full;
+    @apply bg-background-primary shadow-full;
+    height: 100dvh;
+}
+
+.rsui-drawer__panel--entering {
+    transition: transform 250ms ease-out;
+}
+
+.rsui-drawer__panel--leaving {
+    transition: transform 180ms ease-in;
+}
+
+.rsui-drawer__panel--off-screen-right {
+    transform: translateX(100%);
+}
+
+.rsui-drawer__panel--off-screen-left {
+    transform: translateX(-100%);
+}
+
+.rsui-drawer__close-icon {
+    @apply absolute top-3 right-3 z-2 size-10 cursor-pointer rounded-lg flex items-center justify-center;
+    @apply text-text-secondary hover:text-text-primary hover:bg-border-secondary transition duration-200;
+}
+
+.rsui-drawer__panel--left {
+    @apply right-auto left-0;
+}
+
+.rsui-drawer__panel--sm {
+    @apply sm:max-w-sm;
+}
+
+.rsui-drawer__panel--md {
+    @apply sm:max-w-md;
+}
+
+.rsui-drawer__panel--lg {
+    @apply sm:max-w-lg;
+}
+
+.rsui-drawer__header {
+    @apply shrink-0 p-0 bg-background-secondary text-lg font-semibold;
+    padding-top: max(0rem, env(safe-area-inset-top));
+}
+
+.rsui-drawer__header--padded {
+    @apply p-4;
+    padding-top: max(1rem, env(safe-area-inset-top));
+}
+
+.rsui-drawer__body {
+    @apply flex-1 min-h-0 overflow-y-auto p-0 bg-background-primary relative;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.rsui-drawer__body--padded {
+    @apply p-4;
+}
+
+.rsui-drawer__body::-webkit-scrollbar {
+    display: none;
+}
+
+.rsui-drawer__footer {
+    @apply shrink-0 p-0 bg-background-secondary flex flex-col items-stretch gap-y-2;
+    @apply sm:flex-row sm:items-center sm:justify-end sm:gap-x-2 sm:gap-y-0;
+    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
+}
+
+.rsui-drawer__footer--padded {
+    @apply p-4;
+    padding-bottom: max(1rem, env(safe-area-inset-bottom));
+}
+
+.rsui-drawer__footer > .rsui-button-slot {
+    @apply w-full sm:w-fit;
+}

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/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

@@ -24,6 +24,7 @@ Please be careful when adding new components and updating the order.
 @import './components/comments.css';
 @import './components/comment.css';
 @import './components/disclosure.css';
+@import './components/drawer.css';
 @import './components/dropdown_menu.css';
 @import './components/dropdown_option.css';
 @import './components/empty.css';

package/package.json

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