@central-ui/react 0.4.0 → 0.5.0

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-stepper.css

@@ -1,55 +1,93 @@
 /* stepper */
 @layer components {
   :where(:not([data-style-disabled])) {
-    &:where([data-component='stepper-list']) {
-      @apply flex w-full flex-col gap-1.5;
-      &[data-orientation='horizontal'] {
-        @apply flex-row;
-      }
+    /* Steps on the left of the current Content */
+    &:where([data-component='stepper-container']) {
+      @apply flex w-full items-start gap-8;
+    }
+
+    &:where([data-component='stepper-itemslist']) {
+      @apply flex w-56 shrink-0 flex-col;
+    }
+
+    &:where([data-component='stepper-body']) {
+      @apply flex min-w-0 flex-col gap-3;
     }
 
+    &:where([data-component='stepper-footer']) {
+      @apply flex items-center gap-2;
+    }
+
+    /* Indicator on the left, spanning the meta, title and description stacked beside it */
     &:where([data-component='stepper-item']) {
-      @apply relative flex w-full items-stretch gap-3;
-      &[data-orientation='horizontal'] {
-        @apply flex-1;
+      @apply grid w-full cursor-pointer grid-cols-[auto_1fr] content-start gap-x-3 pb-7 text-left outline-none last:pb-0 focus-visible:rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500;
+      /* Steps move only with Previous and Next */
+      &[data-prevent-clicks] {
+        @apply cursor-default;
       }
     }
 
     &:where([data-component='stepper-indicator']) {
-      @apply flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-neutral-300;
+      @apply row-span-3 flex aspect-square size-6.5 shrink-0 items-center justify-center rounded-full text-xs font-semibold tabular-nums transition-colors duration-200;
+      &[data-incomplete] {
+        @apply bg-neutral-200 text-neutral-500;
+      }
+      &[data-current] {
+        @apply bg-blue-600 text-white ring-4 ring-blue-200;
+      }
+      &[data-complete] {
+        @apply bg-neutral-800 text-white;
+      }
     }
 
-    &:where([data-component='stepper-indicator'])[data-completed] {
-      @apply bg-neutral-800;
+    &:where([data-component='stepper-indicatoricon']) {
+      @apply size-3.5 shrink-0;
     }
 
-    &:where([data-component='stepper-indicator'])
-      &:where([data-component='stepper-indicator-1']) {
-      @apply h-3.5 w-fit shrink-0 text-white;
+    /* Optional small text above the title, centered on the Indicator */
+    &:where([data-component='stepper-itemmeta']) {
+      @apply col-start-2 text-xs leading-6.5 text-neutral-500;
+      &[data-incomplete] {
+        @apply text-neutral-400;
+      }
     }
 
-    &:where([data-component='stepper-indicator'])
-      &:where([data-component='stepper-indicator-2']) {
-      @apply h-2 w-2 rounded-full bg-white;
+    &:where([data-component='stepper-itemtitle']) {
+      @apply col-start-2 text-[0.95rem] font-semibold leading-5 text-neutral-950;
+      /* Centered on the Indicator when no ItemMeta comes first */
+      :where([data-component='stepper-indicator']) + & {
+        @apply leading-6.5;
+      }
+      &[data-incomplete] {
+        @apply text-neutral-400;
+      }
     }
 
+    &:where([data-component='stepper-itemdescription']) {
+      @apply col-start-2 truncate text-sm text-neutral-600;
+      &[data-incomplete] {
+        @apply text-neutral-400;
+      }
+    }
+
+    /* The line from this step's Indicator down to the next one; top and bottom set its gaps from both Indicators */
     &:where([data-component='stepper-separator']) {
-      @apply absolute top-7 bottom-0 left-3 w-px bg-neutral-300 data-[complete]:bg-neutral-700;
-      &[data-orientation='horizontal'] {
-        @apply top-3 right-0 bottom-auto left-7 h-px w-auto;
+      @apply top-8.5 bottom-1 left-3.25 w-px -translate-x-1/2 bg-neutral-300;
+      &[data-complete] {
+        @apply bg-neutral-800;
       }
     }
 
+    /* Body above Footer; only while shown, since its hidden attribute must keep hiding it */
     &:where([data-component='stepper-content']) {
-      @apply w-full p-3;
+      @apply min-w-0 flex-1;
+      &:not([hidden]) {
+        @apply flex flex-col gap-4;
+      }
     }
 
     &:where([data-component='stepper-completedcontent']) {
-      @apply w-full rounded-lg bg-green-50 p-3 text-sm leading-relaxed text-green-800;
-    }
-
-    &:where([data-component='stepper-openbutton']) {
-      @apply flex w-full cursor-pointer items-start gap-3 pb-5 text-left text-[0.95rem] font-semibold text-neutral-900 outline-none disabled:pointer-events-none disabled:opacity-30;
+      @apply min-w-0 flex-1 rounded-xl bg-green-50 p-3 text-sm leading-relaxed text-green-800;
     }
   }
 }

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy.css

@@ -7,6 +7,7 @@
 @import './shopify-polaris-legacy-button.css';
 @import './shopify-polaris-legacy-card.css';
 @import './shopify-polaris-legacy-carousel.css';
+@import './shopify-polaris-legacy-pagination.css';
 @import './shopify-polaris-legacy-checkbox.css';
 @import './shopify-polaris-legacy-combobox.css';
 @import './shopify-polaris-legacy-datepicker.css';