@redseed/redseed-ui-tailwindcss 7.7.0 → 7.8.0

package/components/section_slider.css

@@ -1,9 +1,9 @@
 .rsui-section-slider {
-    @apply min-w-full max-w-full overflow-x-hidden rounded-3xl pr-0;
+    @apply min-w-full max-w-full overflow-x-hidden rounded-3xl px-0;
 }
 
 .rsui-section-slider > .rsui-section__header {
-    @apply pr-space-lg;
+    @apply px-space-lg;
 }
 
 .rsui-section-slider--featured {
@@ -27,7 +27,7 @@
 }
 
 .rsui-section-slider__container {
-    @apply relative flex gap-x-3 lg:gap-x-6 overflow-x-auto lg:overflow-x-hidden focus:outline-hidden scroll-smooth snap-x snap-mandatory;
+    @apply relative flex gap-x-3 lg:gap-x-6 overflow-x-auto lg:overflow-x-hidden focus:outline-hidden scroll-smooth snap-x snap-mandatory scroll-pl-space-lg;
 }
 
 .rsui-section-slider__container::-webkit-scrollbar {

package/components/section_slider_item.css

@@ -1,3 +1,3 @@
 .rsui-section-slider-item {
-    @apply snap-start shrink-0 flex last:pr-space-lg;
+    @apply snap-start shrink-0 flex first:pl-space-lg last:pr-space-lg;
 }

package/components/sidebar_layout.css

@@ -0,0 +1,33 @@
+.rsui-sidebar-layout {
+    @apply w-full;
+}
+
+/* Default: sidebar stacks to top, appears on the right when side-by-side */
+.rsui-sidebar-layout__container {
+    @apply flex-col-reverse @xl/flex-container:flex-row;
+}
+
+/* stackBottom: sidebar stacks to bottom instead of top, only when stacked */
+.rsui-sidebar-layout__container--stack-bottom {
+    @apply flex-col @xl/flex-container:flex-row;
+}
+
+/* stackOff: always side-by-side, never stacks */
+.rsui-sidebar-layout__container--stack-off {
+    @apply flex-row;
+}
+
+/* sidebarLeft: sidebar appears on the left when side-by-side */
+.rsui-sidebar-layout__container--sidebar-left {
+    @apply @xl/flex-container:flex-row-reverse;
+}
+
+.rsui-sidebar-layout__main {
+    @apply w-full overflow-auto flex flex-col;
+    @apply @3xs/flex-container:flex-[5];
+}
+
+.rsui-sidebar-layout__sidebar {
+    @apply w-full overflow-auto flex flex-col;
+    @apply @3xs/flex-container:flex-[4] @xl/flex-container:flex-[3] @3xl/flex-container:flex-[2];
+}

package/components/skeleton.css

@@ -31,6 +31,10 @@
 }
 
 .rsui-skeleton__line--thick {
+    @apply h-6;
+}
+
+.rsui-skeleton__line--thicker {
     @apply h-12;
 }
 
@@ -42,10 +46,30 @@
     @apply w-full aspect-square rounded-full bg-background-secondary-invert animate-pulse;
 }
 
-.rsui-skeleton__square {
-    @apply w-full aspect-square rounded-none bg-background-secondary-invert animate-pulse;
+.rsui-skeleton__aspect-ratio {
+    @apply w-full rounded-none bg-background-secondary-invert animate-pulse;
 }
 
-.rsui-skeleton__square--rounded {
+.rsui-skeleton__aspect-ratio--rounded {
     @apply rounded-xl;
 }
+
+.rsui-skeleton__aspect-ratio--square {
+    @apply aspect-square;
+}
+
+.rsui-skeleton__aspect-ratio--3by1 {
+    @apply aspect-3/1;
+}
+
+.rsui-skeleton__aspect-ratio--9by16 {
+    @apply aspect-9/16;
+}
+
+.rsui-skeleton__aspect-ratio--16by9 {
+    @apply aspect-video;
+}
+
+.rsui-skeleton__aspect-ratio--64by25 {
+    @apply aspect-64/25;
+}

package/components.css

@@ -82,6 +82,7 @@ Please be careful when adding new components and updating the order.
 @import './components/record_count.css';
 @import './components/section.css';
 @import './components/section_header.css';
+@import './components/sidebar_layout.css';
 @import './components/section_footer.css';
 @import './components/section_slider.css';
 @import './components/section_slider_item.css';

package/package.json

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

package/theme.css

@@ -15,6 +15,21 @@
     --breakpoint-2xl: 96rem;        /* 1536px */
     --breakpoint-3xl: 120rem;       /* 1920px */
 
+    /* Container query breakpoints (independent from viewport breakpoints) */
+    --container-3xs: 16rem;         /* 256px */
+    --container-2xs: 18rem;         /* 288px */
+    --container-xs: 20rem;          /* 320px */
+    --container-sm: 24rem;          /* 384px */
+    --container-md: 28rem;          /* 448px */
+    --container-lg: 32rem;          /* 512px */
+    --container-xl: 36rem;          /* 576px */
+    --container-2xl: 42rem;         /* 672px */
+    --container-3xl: 48rem;         /* 768px */
+    --container-4xl: 56rem;         /* 896px */
+    --container-5xl: 64rem;         /* 1024px */
+    --container-6xl: 72rem;         /* 1152px */
+    --container-7xl: 80rem;         /* 1280px */
+
     --shadow-full: 0 0 6px 1px rgb(0 0 0 / 0.2);
     --shadow-full-light: 0 0 6px 1px rgb(50 60 69 / 0.1);
 }