@central-ui/react 0.3.0 → 0.5.0

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

@@ -1,55 +1,91 @@
 /* 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-200;
+      @apply row-span-3 flex aspect-square size-6.5 shrink-0 items-center justify-center rounded-full text-xs font-medium 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-950 text-white;
+      }
     }
 
-    &:where([data-component='stepper-indicator'])[data-completed] {
-      @apply bg-neutral-950;
+    &: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 text-neutral-600 ;
+      &[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.9rem] -mt-0.5 font-medium text-neutral-950 truncate;
+      /* Centered on the Indicator when no ItemMeta comes first */
+      
+      &[data-incomplete] {
+        @apply text-neutral-400;
+      }
     }
 
+    &:where([data-component='stepper-itemdescription']) {
+      @apply col-start-2 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-950;
       }
     }
 
+    /* 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-xl 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-medium text-neutral-950 outline-none focus-visible:rounded-lg focus-visible:outline-2 focus-visible:outline-blue-500 disabled:pointer-events-none disabled:opacity-30;
+      @apply min-w-0 flex-1 rounded-xl bg-green-50 p-3 text-sm  text-green-800;
     }
   }
 }
@@ -58,7 +94,7 @@
 @layer components {
   :where(:not([data-style-disabled])) {
     &:where([data-component='stepper-nextbutton'], [data-component='stepper-previousbutton']) {
-      @apply relative flex w-fit cursor-pointer items-center justify-center gap-1.5 rounded-full font-medium text-nowrap select-none outline-none focus-visible:outline-2 focus-visible:outline-blue-500 enabled:active:scale-97 transition-[background-color,box-shadow,transform] duration-400 ease-[cubic-bezier(0.2,0.8,0,1)] motion-reduce:transition-none disabled:pointer-events-none disabled:cursor-default min-h-7 px-4 py-1 text-[0.8rem] leading-4;
+      @apply relative flex w-fit cursor-pointer items-center justify-center gap-1.5 rounded-full font-medium text-nowrap select-none outline-none focus-visible:outline-2 focus-visible:outline-blue-500 enabled:active:scale-97 transition-[background-color,box-shadow,transform] duration-400 ease-[cubic-bezier(0.2,0.8,0,1)] motion-reduce:transition-none disabled:pointer-events-none disabled:cursor-default min-h-7 px-4 py-1 text-[0.8rem];
 
       &:not(:disabled) {
         @apply bg-neutral-200 text-neutral-950 hover:bg-neutral-300 focus-visible:bg-neutral-300 active:bg-neutral-300 aria-expanded:bg-neutral-300;

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

@@ -35,6 +35,7 @@
 @import './shopify-polaris-table.css';
 @import './shopify-polaris-card.css';
 @import './shopify-polaris-carousel.css';
+@import './shopify-polaris-pagination.css';
 @import './shopify-polaris-skeleton.css';
 @import './shopify-polaris-avatar.css';
 @import './shopify-polaris-metric.css';

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

@@ -1,28 +1,28 @@
-/* accordion */
-@layer components {
-  :where(:not([data-style-disabled])) {
-    &:where([data-component='accordion-list']) {
-      @apply flex w-full flex-col overflow-hidden rounded-xl border border-neutral-300 bg-white;
-    }
-
-    &:where([data-component='accordion-item']) {
-      @apply w-full border-b border-neutral-300 last:border-b-0;
-    }
-
-    &:where([data-component='accordion-openbutton']) {
-      @apply flex min-h-10 w-full cursor-pointer items-center justify-between gap-4 bg-white px-3 py-2 text-left text-sm font-semibold text-neutral-900 outline-none hover:bg-neutral-50 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-600 disabled:pointer-events-none disabled:bg-neutral-100 disabled:text-neutral-500 disabled:opacity-50;
-    }
-
-    &:where([data-component='accordion-openertitle']) {
-      @apply min-w-0 flex-1;
-    }
-
-    &:where([data-component='accordion-openerindicator']) {
-      @apply h-4 w-fit shrink-0 text-inherit transition-transform data-panel-open:rotate-180;
-    }
-
-    &:where([data-component='accordion-content']) {
-      @apply h-(--accordion-panel-height) overflow-hidden text-sm text-neutral-700 transition-[height] duration-200 data-starting-style:h-0 data-ending-style:h-0;
-    }
-  }
-}
+/* accordion */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='accordion-list']) {
+      @apply flex w-full flex-col overflow-hidden rounded-xl border border-neutral-300 bg-white;
+    }
+
+    &:where([data-component='accordion-item']) {
+      @apply w-full border-b border-neutral-300 last:border-b-0;
+    }
+
+    &:where([data-component='accordion-openbutton']) {
+      @apply flex min-h-10 w-full cursor-pointer items-center justify-between gap-4 bg-white px-3 py-2 text-left text-sm font-semibold text-neutral-900 outline-none hover:bg-neutral-50 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-600 disabled:pointer-events-none disabled:bg-neutral-100 disabled:text-neutral-500 disabled:opacity-50;
+    }
+
+    &:where([data-component='accordion-openbuttontitle']) {
+      @apply min-w-0 flex-1;
+    }
+
+    &:where([data-component='accordion-openbuttonicon']) {
+      @apply h-4 w-fit shrink-0 text-inherit transition-transform data-panel-open:rotate-180;
+    }
+
+    &:where([data-component='accordion-content']) {
+      @apply h-(--accordion-panel-height) overflow-hidden text-sm text-neutral-700 transition-[height] duration-200 data-starting-style:h-0 data-ending-style:h-0;
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+/* pagination */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='pagination-container']),
+    &:where([data-component='pagination-pagelist']) {
+      @apply flex w-fit items-center gap-1;
+    }
+
+    &:where([data-component='pagination-firstbutton']),
+    &:where([data-component='pagination-previousbutton']),
+    &:where([data-component='pagination-nextbutton']),
+    &:where([data-component='pagination-lastbutton']),
+    &:where([data-component='pagination-page'])[data-type='page'] {
+      @apply flex h-7.5 min-w-7.5 shrink-0 cursor-pointer items-center justify-center rounded-full px-2.5 bg-white text-[0.8rem] font-semibold tabular-nums text-neutral-700 outline-none select-none focus-visible:outline-2 focus-visible:outline-blue-500 shadow-[0_-1px_0_0_#b5b5b5_inset,0_0_0_1px_rgba(0,0,0,0.1)_inset,0_0.5px_0_1.5px_#fff_inset] hover:bg-neutral-50 active:pt-[0.1rem] active:shadow-[0px_2px_1px_0px_rgba(0,0,0,0.19)_inset,0px_0px_0px_50px_rgba(0,0,0,0.025)_inset,0px_-1px_1px_0px_rgba(0,0,0,0.1)_inset] disabled:pointer-events-none disabled:opacity-50;
+
+      &[data-selected] {
+        @apply [background:linear-gradient(180deg,rgba(48,48,48,0)_63.53%,rgba(255,255,255,0.15)_100%),rgba(48,48,48,1)] text-white shadow-[0_-1px_0_1px_rgba(0,0,0,0.8)_inset,0_0_0_1px_rgba(48,48,48,1)_inset,0_0.5px_0_1.5px_rgba(255,255,255,0.25)_inset] hover:brightness-85 active:shadow-[0_0_0_1px_#000000_inset,0px_0px_0px_50px_rgba(0,0,0,0.5)_inset];
+      }
+    }
+
+    &:where([data-component='pagination-firstbutton']),
+    &:where([data-component='pagination-previousbutton']),
+    &:where([data-component='pagination-nextbutton']),
+    &:where([data-component='pagination-lastbutton']) {
+      /* Roomy padding for text; the icon's negative margins below pull an icon-only button back to an exact square */
+      @apply gap-2.25 px-3;
+    }
+
+    &:where([data-component='pagination-page'])[data-type='ellipsis'] {
+      @apply flex h-7.5 min-w-7.5 shrink-0 items-center justify-center text-neutral-500;
+    }
+
+    &:where([data-component='pagination-firstbuttonicon']),
+    &:where([data-component='pagination-previousbuttonicon']),
+    &:where([data-component='pagination-nextbuttonicon']),
+    &:where([data-component='pagination-lastbuttonicon']),
+    &:where([data-component='pagination-pageicon']) {
+      @apply h-4 w-fit shrink-0;
+    }
+
+    /* Arrows point the reading direction, and their negative margins keep icon-only buttons square */
+    &:where([data-component='pagination-firstbuttonicon']),
+    &:where([data-component='pagination-previousbuttonicon']),
+    &:where([data-component='pagination-nextbuttonicon']),
+    &:where([data-component='pagination-lastbuttonicon']) {
+      @apply -mx-1.25 rtl:-scale-x-100;
+    }
+  }
+}

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';