@central-ui/react 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,8 @@
+/* skeleton */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='skeleton-skeleton']) {
+      @apply h-4 w-4 animate-pulse rounded-lg bg-neutral-200;
+    }
+  }
+}

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

@@ -0,0 +1,86 @@
+/* slider */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='slider-container']) {
+      @apply grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-x-2 gap-y-1;
+    }
+
+    &:where([data-component='slider-label']) {
+      @apply col-start-1 row-start-1 text-sm text-neutral-950 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='slider-value']) {
+      @apply col-start-2 row-start-1 justify-self-end select-none text-sm font-semibold text-neutral-950 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='slider-trackgroup']) {
+      @apply col-span-2 relative flex w-full touch-none items-center py-2 select-none data-disabled:pointer-events-none data-disabled:opacity-30;
+      &[data-orientation='vertical'] {
+        @apply h-44 w-fit px-2 py-0;
+      }
+    }
+
+    &:where([data-component='slider-track']) {
+      @apply relative h-1.5 w-full rounded-full bg-neutral-100;
+      &[data-orientation='vertical'] {
+        @apply h-full w-1.5;
+      }
+    }
+
+    &:where([data-component='slider-indicator']) {
+      @apply h-full rounded-full bg-neutral-950;
+      &[data-orientation='vertical'] {
+        @apply h-auto w-full;
+      }
+      &[data-tone='invalid'] {
+        @apply bg-red-600;
+      }
+      &[data-tone='valid'] {
+        @apply bg-green-700;
+      }
+    }
+
+    &:where([data-component='slider-draghandle']) {
+      @apply size-4 cursor-grab rounded-full border border-neutral-300 bg-white shadow-sm transition-shadow hover:shadow-md data-dragging:cursor-grabbing data-disabled:cursor-not-allowed has-[:focus-visible]:border-blue-500 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-blue-500/20;
+    }
+
+    &:where([data-component='slider-markslist']) {
+      @apply pointer-events-none absolute inset-0;
+    }
+
+    &:where([data-component='slider-mark']) {
+      @apply absolute top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rtl:translate-x-1/2;
+      &[data-orientation='vertical'] {
+        @apply top-auto left-1/2 translate-y-1/2;
+      }
+    }
+
+    &:where([data-component='slider-mark'])
+      &:where([data-component='slider-mark-1']) {
+      @apply h-2 w-px bg-neutral-900;
+      &[data-orientation='vertical'] {
+        @apply h-px w-2;
+      }
+    }
+
+    &:where([data-component='slider-mark'])
+      &:where([data-component='slider-mark-2']) {
+      @apply absolute top-full pt-1 text-xs whitespace-nowrap text-neutral-600;
+      &[data-orientation='vertical'] {
+        @apply top-auto left-full pt-0 pl-1;
+      }
+    }
+
+    &:where([data-component='slider-description']) {
+      @apply col-span-2 text-xs font-medium text-neutral-600;
+    }
+
+    &:where([data-component='slider-error']) {
+      @apply col-span-2 text-xs font-medium text-red-600;
+    }
+
+    &:where([data-component='slider-success']) {
+      @apply col-span-2 text-xs font-medium text-emerald-700;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+/* spinner */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='spinner-spinner']) {
+      @apply h-4 w-fit shrink-0 animate-spin stroke-[1.5] text-neutral-950;
+    }
+    &:where([data-component='spinner-spinner'])
+      &:where([data-component='spinner-track']) {
+      @apply stroke-neutral-200;
+    }
+    &:where([data-component='spinner-spinner'])
+      &:where([data-component='spinner-indicator']) {
+      @apply [stroke-dasharray:0.4_0.6];
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+/* splitter */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='splitter-contentlist']) {
+      @apply flex h-full w-full;
+      &[data-orientation='vertical'] {
+        @apply flex-col;
+      }
+    }
+
+    &:where([data-component='splitter-content']) {
+      @apply min-h-0 min-w-0;
+    }
+
+    &:where([data-component='splitter-separator']) {
+      @apply relative flex w-px shrink-0 items-center justify-center bg-neutral-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-500 focus-visible:ring-offset-1;
+      &[data-orientation='vertical'] {
+        @apply h-px w-full;
+      }
+    }
+
+    &:where([data-component='splitter-handle']) {
+      @apply z-10 flex h-4 w-3.5 items-center justify-center rounded-full border border-neutral-200 bg-white shadow-xs;
+      &[data-orientation='vertical'] {
+        @apply rotate-90;
+      }
+    }
+
+    &:where([data-component='splitter-handle'])
+      &:where([data-component='splitter-handle-1']) {
+      @apply h-2.5 w-fit text-neutral-400;
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+/* 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;
+      }
+    }
+
+    &:where([data-component='stepper-item']) {
+      @apply relative flex w-full items-stretch gap-3;
+      &[data-orientation='horizontal'] {
+        @apply flex-1;
+      }
+    }
+
+    &:where([data-component='stepper-indicator']) {
+      @apply flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-neutral-200;
+    }
+
+    &:where([data-component='stepper-indicator'])[data-completed] {
+      @apply bg-neutral-950;
+    }
+
+    &:where([data-component='stepper-indicator'])
+      &:where([data-component='stepper-indicator-1']) {
+      @apply h-3.5 w-fit shrink-0 text-white;
+    }
+
+    &:where([data-component='stepper-indicator'])
+      &:where([data-component='stepper-indicator-2']) {
+      @apply h-2 w-2 rounded-full bg-white;
+    }
+
+    &: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;
+      }
+    }
+
+    &:where([data-component='stepper-content']) {
+      @apply w-full p-3;
+    }
+
+    &: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;
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+/* switch */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='switch-container']) {
+      @apply grid w-full grid-cols-[auto_1fr] items-start gap-x-2 gap-y-0.5;
+    }
+
+    &:where([data-component='switch-button']) {
+      @apply col-start-1 row-start-1 inline-flex h-4.5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-neutral-300 bg-white transition-all hover:brightness-95 data-checked:border-neutral-950 data-checked:bg-neutral-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 data-disabled:cursor-not-allowed data-disabled:opacity-50;
+      &[data-tone='invalid'] {
+        @apply border-red-600 bg-red-50 data-checked:border-red-600 data-checked:bg-red-600;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-700 bg-green-50 data-checked:border-green-700 data-checked:bg-green-700;
+      }
+    }
+
+    &:where([data-component='switch-indicator']) {
+      @apply pointer-events-none block h-3 w-5 shrink-0 translate-x-0 rounded-full bg-neutral-400 shadow-xs transition-all data-checked:translate-x-[calc(1rem-2px)] data-checked:bg-white;
+    }
+
+    &:where([data-component='switch-label']) {
+      @apply col-start-2 text-sm text-neutral-950 data-disabled:text-neutral-500;
+    }
+
+    &:where([data-component='switch-description']) {
+      @apply col-start-2 text-xs font-medium text-neutral-600;
+    }
+
+    &:where([data-component='switch-error']) {
+      @apply col-start-2 text-xs font-medium text-red-600;
+    }
+
+    &:where([data-component='switch-success']) {
+      @apply col-start-2 text-xs font-medium text-emerald-700;
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+/* table */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='table-surface']) {
+      @apply min-w-0 w-full h-fit overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-xs;
+    }
+
+    &:where([data-component='table-surfaceheader']) {
+      @apply flex w-full items-center border-b border-neutral-200 p-2.25;
+    }
+
+    &:where([data-component='table-surfacefooter']) {
+      @apply flex w-full items-center border-t border-neutral-200 bg-neutral-50 p-2.25;
+    }
+
+    &:where([data-component='table-scrollarea']) {
+      @apply h-fit w-full bg-white;
+    }
+
+    &:where([data-component='table-table']) {
+      @apply min-w-full table-fixed border-collapse;
+    }
+
+    &:where([data-component='table-head']) {
+      @apply sticky top-0 z-20 border-b border-neutral-200;
+    }
+
+    &:where([data-component='table-body']) {
+      @apply bg-white;
+    }
+
+    &:where([data-component='table-row']) {
+      @apply border-b border-neutral-200 bg-white last:border-b-0;
+    }
+
+    &:where([data-component='table-headcell']) {
+      @apply bg-neutral-50 px-3 py-1.5 text-left text-sm font-medium text-nowrap text-neutral-600 first:data-[pinning=first]:shadow-[1px_0_0_0_#e5e5e5,5px_0_8px_-4px_rgba(0,0,0,0.18)] last:data-[pinning=last]:shadow-[-1px_0_0_0_#e5e5e5,-5px_0_8px_-4px_rgba(0,0,0,0.18)];
+    }
+
+    &:where([data-component='table-cell']) {
+      @apply h-8 truncate bg-white px-3 text-sm text-neutral-950 first:data-[pinning=first]:shadow-[1px_0_0_0_#e5e5e5,5px_0_8px_-4px_rgba(0,0,0,0.18)] last:data-[pinning=last]:shadow-[-1px_0_0_0_#e5e5e5,-5px_0_8px_-4px_rgba(0,0,0,0.18)];
+    }
+
+    &:where([data-component='table-empty']) {
+      @apply w-full flex flex-col items-center justify-center p-6 h-fit min-h-70;
+    }
+
+    &:where([data-component='table-emptybody']) {
+      @apply w-full h-fit flex flex-col items-center justify-center gap-1;
+    }
+
+    &:where([data-component='table-emptytitle']) {
+      @apply text-sm font-semibold text-neutral-950;
+    }
+
+    &:where([data-component='table-emptydescription']) {
+      @apply text-sm text-center text-neutral-600 font-normal;
+    }
+
+    &:where([data-component='table-emptyimage']) {
+      @apply mb-4 h-16 w-fit;
+    }
+
+    &:where([data-component='table-emptyicon']) {
+      @apply mb-2 h-8 w-fit text-neutral-950;
+    }
+
+    &:where([data-component='table-emptyactionslist']) {
+      @apply mt-3 flex w-fit items-center gap-4;
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+/* tabs */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='tabs-list']) {
+      @apply relative flex w-full border-b border-neutral-200;
+      &[data-orientation='vertical'] {
+        @apply w-fit shrink-0 flex-col border-r border-b-0;
+      }
+    }
+
+    &:where([data-component='tabs-tab']) {
+      @apply flex h-8.5 w-fit cursor-pointer items-center justify-center gap-1 rounded-t-lg px-2.5 pb-1.5 text-[0.85rem] font-medium text-nowrap text-neutral-600 outline-none hover:bg-neutral-50 hover:text-neutral-950 focus-visible:outline-2 focus-visible:outline-blue-500 data-active:bg-neutral-100 data-active:font-semibold data-active:text-neutral-950 data-disabled:pointer-events-none data-disabled:opacity-30;
+      &[data-orientation='vertical'] {
+        @apply w-full justify-start rounded-l-md rounded-tr-none pb-0;
+      }
+    }
+
+    &:where([data-component='tabs-icon']) {
+      @apply h-3.5 w-fit shrink-0 text-inherit;
+    }
+
+    &:where([data-component='tabs-indicator']) {
+      @apply absolute bottom-0 left-(--active-tab-left) h-0.75 w-(--active-tab-width) bg-neutral-900 transition-all;
+      &[data-orientation='vertical'] {
+        @apply top-(--active-tab-top) right-0 bottom-auto left-auto h-(--active-tab-height) w-0.75;
+      }
+    }
+
+    &:where([data-component='tabs-content']) {
+      @apply w-full text-sm text-neutral-950 outline-none;
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+/* textarea */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='textarea-textarea']) {
+      @apply min-h-36 w-full min-w-0 flex-1 self-stretch resize-none rounded-none border-0 bg-transparent px-2.5 py-2 text-sm text-neutral-950 shadow-none outline-none placeholder:text-sm placeholder:text-neutral-500 hover:bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:text-neutral-500;
+    }
+
+    &:where([data-component='textarea-textareagroup']) {
+      @apply p-0 flex w-full min-w-0 flex-col items-stretch overflow-hidden rounded-xl border border-neutral-200 bg-white text-[0.8rem] text-neutral-950 shadow-xs outline-none hover:bg-neutral-50 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/10 focus-within:shadow-sm data-disabled:cursor-not-allowed data-disabled:border-neutral-200 data-disabled:bg-white data-disabled:text-neutral-400 data-disabled:shadow-none data-disabled:hover:bg-white data-readonly:cursor-not-allowed data-readonly:border-neutral-200 data-readonly:bg-neutral-50 data-readonly:hover:bg-neutral-50 data-readonly:shadow-none;
+      &[data-tone='invalid'] {
+        @apply border-red-500 focus-within:border-red-500 focus-within:ring-red-500/10;
+      }
+      &[data-tone='valid'] {
+        @apply border-green-600 focus-within:border-green-600 focus-within:ring-green-600/10;
+      }
+    }
+
+    &:where([data-component='textarea-container']) {
+      @apply flex flex-col gap-1.5 w-full;
+    }
+
+    &:where([data-component='textarea-label']) {
+      @apply text-sm font-medium text-neutral-950 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='textarea-description']) {
+      @apply text-xs text-neutral-600;
+    }
+
+    &:where([data-component='textarea-error']) {
+      @apply text-xs text-red-800;
+    }
+
+    &:where([data-component='textarea-success']) {
+      @apply text-xs text-green-800;
+    }
+
+    &:where([data-component='textarea-addon']) {
+      @apply inline-flex w-full shrink-0 items-center gap-2.5 empty:hidden px-2.5 py-1.5;
+      &[data-variant='emphasized'] {
+        @apply bg-neutral-200/60;
+      }
+    }
+
+    &:where([data-component='textarea-addontext']) {
+      @apply shrink-0 whitespace-nowrap text-[0.8rem] text-neutral-600 data-disabled:text-neutral-400 data-readonly:text-neutral-600;
+    }
+
+    &:where([data-component='textarea-addonicon']) {
+      @apply h-4 w-fit shrink-0 text-neutral-600 data-disabled:text-neutral-400;
+    }
+
+    &:where([data-component='textarea-addonbutton']) {
+      @apply flex h-5.5 w-fit cursor-pointer items-center justify-center gap-1 text-nowrap rounded-full bg-neutral-200 px-2 text-[0.75rem] font-medium text-neutral-950 hover:bg-neutral-300 active:bg-neutral-300 active:scale-97 focus-visible:outline-2 focus-visible:outline-blue-500 disabled:pointer-events-none disabled:bg-black/3 disabled:text-neutral-400;
+    }
+
+    &:where([data-component='textarea-addonloadingicon']) {
+      @apply h-4 w-fit shrink-0 pointer-events-none animate-spin text-neutral-600 data-disabled:text-neutral-400 data-readonly:text-neutral-600;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+/* textlink */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='textlink-textlink']) {
+      @apply w-fit cursor-pointer rounded-sm text-sm font-normal text-blue-700 hover:text-blue-800 hover:underline active:text-blue-900 focus-visible:outline-2 focus-visible:outline-blue-500 focus-visible:outline-offset-2;
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+/* toggle */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='toggle-root']) {
+      @apply flex p-0 aspect-square w-auto cursor-pointer items-center justify-center rounded-full bg-transparent text-neutral-500 outline-blue-500 outline-offset-1 hover:bg-neutral-100 hover:text-neutral-700 focus-visible:outline-2 data-pressed:bg-neutral-200 data-pressed:text-neutral-950 data-disabled:pointer-events-none data-disabled:opacity-30;
+      &[data-size='small'] {
+        @apply h-6;
+      }
+      &[data-size='medium'] {
+        @apply h-7;
+      }
+      &[data-size='large'] {
+        @apply h-8.5;
+      }
+      &[data-size='icon'] {
+        @apply h-7;
+      }
+    }
+
+    &:where([data-component='toggle-activeicon']) {
+      @apply w-fit shrink-0 text-inherit;
+      &[data-size='small'] {
+        @apply h-3;
+      }
+      &[data-size='medium'] {
+        @apply h-4;
+      }
+      &[data-size='large'] {
+        @apply h-4.5;
+      }
+      &[data-size='icon'] {
+        @apply h-4;
+      }
+    }
+
+    &:where([data-component='toggle-inactiveicon']) {
+      @apply w-fit shrink-0 text-inherit;
+      &[data-size='small'] {
+        @apply h-3;
+      }
+      &[data-size='medium'] {
+        @apply h-4;
+      }
+      &[data-size='large'] {
+        @apply h-4.5;
+      }
+      &[data-size='icon'] {
+        @apply h-4;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+/* tooltip */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='tooltip-popup']) {
+      @apply relative flex h-fit w-fit max-w-96 flex-col items-start rounded-lg border border-neutral-200 bg-white px-2 py-1 shadow-lg outline-none data-closed:opacity-0;
+    }
+
+    &:where([data-component='tooltip-popuptext']) {
+      @apply text-[0.8rem] font-normal text-wrap text-neutral-950;
+    }
+
+    &:where([data-component='tooltip-arrow']) {
+      @apply pointer-events-none flex fill-white data-uncentered:hidden data-[side=bottom]:-top-2 data-[side=top]:-bottom-2 data-[side=top]:rotate-180 data-[side=left]:-right-[13px] data-[side=left]:rotate-90 data-[side=right]:-left-[13px] data-[side=right]:-rotate-90 ltr:data-[side=inline-start]:-right-[13px] ltr:data-[side=inline-start]:rotate-90 rtl:data-[side=inline-start]:-left-[13px] rtl:data-[side=inline-start]:-rotate-90 ltr:data-[side=inline-end]:-left-[13px] ltr:data-[side=inline-end]:-rotate-90 rtl:data-[side=inline-end]:-right-[13px] rtl:data-[side=inline-end]:rotate-90;
+    }
+
+    &:where([data-component='tooltip-arrow'])
+      &:where([data-component='tooltip-arrow-1']) {
+      @apply fill-inherit;
+    }
+
+    &:where([data-component='tooltip-arrow'])
+      &:where([data-component='tooltip-arrow-2']) {
+      @apply fill-neutral-200;
+    }
+
+    &:where([data-component='tooltip-arrow'])
+      &:where([data-component='tooltip-arrow-3']) {
+      @apply fill-inherit;
+    }
+  }
+}