@redseed/redseed-ui-tailwindcss 6.0.4 → 6.1.0

package/components/switcher.css

@@ -1,5 +1,5 @@
 .rsui-switcher {
-    @apply w-fit flex flex-col sm:flex-row sm:items-center overflow-hidden;
+    @apply w-fit flex flex-col sm:flex-row sm:items-center overflow-hidden gap-1;
     @apply bg-background-disabled p-1 rounded-lg;
 }
 
@@ -14,4 +14,3 @@
 .rsui-switcher .rsui-switcher-item {
     @apply w-full sm:w-fit;
 }
-

package/components/switcher_item.css

@@ -8,6 +8,10 @@
     @apply bg-background-primary text-text-primary border-border-secondary;
 }
 
+.rsui-switcher-item--disabled {
+    @apply cursor-default bg-background-disabled text-text-disabled;
+}
+
 .rsui-switcher-item svg {
     @apply size-6;
 }

package/components/two_column_layout.css

@@ -1,16 +1,23 @@
 .rsui-two-column-layout {
-    @apply flex flex-col sm:flex-row gap-6 sm:gap-8;
+    @apply @container w-full;
 }
 
-.rsui-two-column-layout--left-aside {
-    @apply flex-col-reverse lg:flex-row-reverse;
+.rsui-two-column-layout__container {
+    @apply flex flex-col @4xl:flex-row gap-6 @4xl:gap-8;
+}
+
+.rsui-two-column-layout__container--top-aside {
+    @apply flex-col-reverse @4xl:flex-row;
+}
+
+.rsui-two-column-layout__container--left-aside {
+    @apply flex-col-reverse @4xl:flex-row-reverse;
 }
 
 .rsui-two-column-layout__main {
-    @apply flex-1 min-w-0 overflow-x-auto;
+    @apply flex-1 w-full @4xl:w-(--phi-inverse-percentage) overflow-auto;
 }
 
 .rsui-two-column-layout__aside {
-    @apply shrink-0 lg:w-72 xl:w-100;
+    @apply shrink-0 w-full @4xl:w-(--phi-inverse-squared-percentage) overflow-auto;
 }
-

package/index.css

@@ -1,3 +1,4 @@
+@import './variables.css';
 @import './colors.css';
 @import './colors_dark_mode.css';
 @import './theme.css';

package/package.json

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

package/variables.css

@@ -0,0 +1,7 @@
+:root {
+    --phi: 1.618033988749895;
+    --phi-inverse: calc(1 / var(--phi)); /* Approximately 0.618033988749895 */
+    --phi-inverse-squared: calc(var(--phi-inverse) * var(--phi-inverse)); /* Approximately 0.381966011250105 */
+    --phi-inverse-percentage: calc(var(--phi-inverse) * 100%); /* Approximately 61.8033988749895% */
+    --phi-inverse-squared-percentage: calc(var(--phi-inverse-squared) * 100%); /* Approximately 38.1966011250105% */
+}