@central-ui/react 0.2.0 → 0.4.0

package/package.json

@@ -1,67 +1,69 @@
-{
-  "name": "@central-ui/react",
-  "version": "0.2.0",
-  "description": "Accessible React components with optional Tailwind CSS style presets",
-  "license": "MIT",
-  "keywords": [
-    "react",
-    "ui",
-    "components",
-    "ark-ui",
-    "unstyled"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "type": "module",
-  "sideEffects": [
-    "./src/presets/**/*.css"
-  ],
-  "files": [
-    "dist",
-    "src/presets",
-    "README.md",
-    "LICENSE"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./presets/shopify-polaris-legacy.css": "./src/presets/shopify-polaris-legacy/shopify-polaris-legacy.css",
-    "./presets/shopify-polaris.css": "./src/presets/shopify-polaris/shopify-polaris.css"
-  },
-  "scripts": {
-    "build": "tsc --project tsconfig.json",
-    "prepack": "npm run build",
-    "typecheck": "tsc --project tsconfig.json --noEmit"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "tailwindcss": "^4.2.1"
-  },
-  "peerDependenciesMeta": {
-    "tailwindcss": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@types/react": "19.3.0",
-    "@types/react-dom": "19.3.0",
-    "typescript": "6.0.3"
-  },
-  "dependencies": {
-    "@ark-ui/react": "^5.39.3",
-    "@base-ui/react": "^1.9.0",
-    "@internationalized/date": "^3.12.4",
-    "@radix-ui/react-password-toggle-field": "^0.2.1",
-    "@tanstack/react-virtual": "^3.14.20",
-    "react-aria": "^3.53.1",
-    "react-aria-components": "^1.22.1",
-    "react-joyride": "^3.2.0",
-    "react-resizable-panels": "^4.14.5",
-    "recharts": "^3.10.1",
-    "tailwind-merge": "^3.7.0"
-  }
-}
+{
+  "name": "@central-ui/react",
+  "version": "0.4.0",
+  "description": "Accessible React components with optional Tailwind CSS style presets",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "ark-ui",
+    "unstyled"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": [
+    "./src/presets/**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src/presets",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./presets/shopify-polaris-legacy.css": "./src/presets/shopify-polaris-legacy/shopify-polaris-legacy.css",
+    "./presets/shopify-polaris.css": "./src/presets/shopify-polaris/shopify-polaris.css"
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.json",
+    "prepack": "npm run build",
+    "typecheck": "tsc --project tsconfig.json --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.2.1"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "typescript": "6.0.3"
+  },
+  "dependencies": {
+    "@ark-ui/react": "^5.39.3",
+    "@base-ui/react": "^1.9.0",
+    "@internationalized/date": "^3.12.4",
+    "@radix-ui/react-password-toggle-field": "^0.2.1",
+    "@tanstack/react-virtual": "^3.14.20",
+    "embla-carousel-autoplay": "8.6.0",
+    "embla-carousel-react": "8.6.0",
+    "react-aria": "^3.53.1",
+    "react-aria-components": "^1.22.1",
+    "react-joyride": "^3.2.0",
+    "react-resizable-panels": "^4.14.5",
+    "recharts": "^3.10.1",
+    "tailwind-merge": "^3.7.0"
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-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-200 bg-white;
-    }
-
-    &:where([data-component='accordion-item']) {
-      @apply w-full border-b border-neutral-200 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-medium text-neutral-950 outline-none hover:bg-neutral-50 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-500 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-200 bg-white;
+    }
+
+    &:where([data-component='accordion-item']) {
+      @apply w-full border-b border-neutral-200 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-medium text-neutral-950 outline-none hover:bg-neutral-50 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-500 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/shopify-polaris-carousel.css

@@ -0,0 +1,62 @@
+/* carousel */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='carousel-slideslist']) {
+      @apply w-full rounded-xl;
+      &[data-orientation='vertical'] {
+        @apply h-72;
+      }
+    }
+
+    &:where([data-component='carousel-slide']) {
+      @apply basis-full;
+    }
+
+    &:where([data-component='carousel-previousbutton']),
+    &:where([data-component='carousel-nextbutton']) {
+      @apply flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full p-0 outline-none focus-visible:outline-2 focus-visible:outline-blue-500 enabled:active:scale-97 transition-[background-color,transform] duration-400 ease-[cubic-bezier(0.2,0.8,0,1)] motion-reduce:transition-none disabled:pointer-events-none disabled:cursor-default;
+
+      &:not(:disabled) {
+        @apply bg-neutral-200 text-neutral-950 hover:bg-neutral-300 focus-visible:bg-neutral-300 active:bg-neutral-300;
+      }
+      &:disabled {
+        @apply bg-black/3 text-neutral-400;
+      }
+    }
+
+    &:where([data-component='carousel-previousbuttonicon']),
+    &:where([data-component='carousel-nextbuttonicon']) {
+      @apply h-4 w-fit shrink-0;
+      &[data-orientation='vertical'] {
+        @apply rotate-90;
+      }
+    }
+
+    &:where([data-component='carousel-indicatorlist']) {
+      @apply flex items-center justify-center gap-1.5;
+      &[data-orientation='vertical'] {
+        @apply flex-col;
+      }
+    }
+
+    &:where([data-component='carousel-indicatorbutton']) {
+      @apply flex shrink-0 cursor-pointer items-center justify-center p-0 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 transition-[width,height,background-color,opacity] duration-300 motion-reduce:transition-none disabled:pointer-events-none disabled:opacity-50;
+
+      /* A dot when empty, stretching into a pill while selected */
+      &:empty {
+        @apply size-2 rounded-full bg-neutral-300 hover:bg-neutral-400 data-selected:bg-neutral-950;
+        &[data-selected][data-orientation='horizontal'] {
+          @apply w-5;
+        }
+        &[data-selected][data-orientation='vertical'] {
+          @apply h-5;
+        }
+      }
+
+      /* Custom content, like a thumbnail, faded until selected */
+      &:not(:empty) {
+        @apply overflow-hidden rounded-lg opacity-50 hover:opacity-80 data-selected:opacity-100;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+/* exception */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='exception-surface']) {
+      @apply flex h-full w-full flex-1 flex-col items-center justify-center p-4;
+    }
+
+    &:where([data-component='exception-body']) {
+      @apply flex h-fit w-full max-w-150 flex-col items-center justify-center gap-1;
+    }
+
+    &:where([data-component='exception-title']) {
+      @apply text-sm font-semibold text-center text-neutral-950;
+    }
+
+    &:where([data-component='exception-title'][data-tone='critical']) {
+      @apply text-red-700;
+    }
+
+    &:where([data-component='exception-description']) {
+      @apply text-sm font-normal text-center text-neutral-600;
+    }
+
+    &:where([data-component='exception-image']) {
+      @apply mb-4 h-16 w-fit;
+    }
+
+    &:where([data-component='exception-icon']) {
+      @apply mb-2 h-8 w-fit text-neutral-950;
+    }
+
+    &:where([data-component='exception-actionslist']) {
+      @apply mt-3 flex w-fit items-center gap-4;
+    }
+
+    &:where([data-component='exception-helptext']) {
+      @apply mt-3 text-xs text-center text-neutral-500;
+    }
+  }
+}

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

@@ -29,10 +29,12 @@
 @import './shopify-polaris-chip.css';
 @import './shopify-polaris-textlink.css';
 @import './shopify-polaris-empty.css';
+@import './shopify-polaris-exception.css';
 @import './shopify-polaris-spinner.css';
 @import './shopify-polaris-popover.css';
 @import './shopify-polaris-table.css';
 @import './shopify-polaris-card.css';
+@import './shopify-polaris-carousel.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-carousel.css

@@ -0,0 +1,55 @@
+/* carousel */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='carousel-slideslist']) {
+      @apply w-full rounded-lg;
+      &[data-orientation='vertical'] {
+        @apply h-72;
+      }
+    }
+
+    &:where([data-component='carousel-slide']) {
+      @apply basis-full;
+    }
+
+    &:where([data-component='carousel-previousbutton']),
+    &:where([data-component='carousel-nextbutton']) {
+      @apply flex size-7.5 shrink-0 cursor-pointer items-center justify-center rounded-lg p-0 bg-white text-neutral-700 outline-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;
+    }
+
+    &:where([data-component='carousel-previousbuttonicon']),
+    &:where([data-component='carousel-nextbuttonicon']) {
+      @apply h-4 w-fit shrink-0;
+      &[data-orientation='vertical'] {
+        @apply rotate-90;
+      }
+    }
+
+    &:where([data-component='carousel-indicatorlist']) {
+      @apply flex items-center justify-center gap-1.5;
+      &[data-orientation='vertical'] {
+        @apply flex-col;
+      }
+    }
+
+    &:where([data-component='carousel-indicatorbutton']) {
+      @apply flex shrink-0 cursor-pointer items-center justify-center p-0 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 transition-[width,height,background-color,opacity] duration-300 motion-reduce:transition-none disabled:pointer-events-none disabled:opacity-50;
+
+      /* A dot when empty, stretching into a pill while selected */
+      &:empty {
+        @apply size-2 rounded-full bg-neutral-300 hover:bg-neutral-400 data-selected:bg-neutral-800;
+        &[data-selected][data-orientation='horizontal'] {
+          @apply w-5;
+        }
+        &[data-selected][data-orientation='vertical'] {
+          @apply h-5;
+        }
+      }
+
+      /* Custom content, like a thumbnail, faded until selected */
+      &:not(:empty) {
+        @apply overflow-hidden rounded-md opacity-50 hover:opacity-80 data-selected:opacity-100;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+/* exception */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='exception-surface']) {
+      @apply flex h-full w-full flex-1 flex-col items-center justify-center p-4;
+    }
+
+    &:where([data-component='exception-body']) {
+      @apply flex h-fit w-full max-w-150 flex-col items-center justify-center gap-1;
+    }
+
+    &:where([data-component='exception-title']) {
+      @apply text-base font-semibold text-neutral-900;
+    }
+
+    &:where([data-component='exception-title'][data-tone='critical']) {
+      @apply text-red-700;
+    }
+
+    &:where([data-component='exception-description']) {
+      @apply text-sm font-medium text-neutral-600;
+    }
+
+    &:where([data-component='exception-image']) {
+      @apply mb-4 h-16 w-fit;
+    }
+
+    &:where([data-component='exception-icon']) {
+      @apply mb-2 h-8 w-fit text-neutral-900;
+    }
+
+    &:where([data-component='exception-actionslist']) {
+      @apply mt-3 flex w-fit items-center gap-4;
+    }
+
+    &:where([data-component='exception-helptext']) {
+      @apply mt-3 text-xs text-center text-neutral-500;
+    }
+  }
+}

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

@@ -6,6 +6,7 @@
 @import './shopify-polaris-legacy-breadcrumb.css';
 @import './shopify-polaris-legacy-button.css';
 @import './shopify-polaris-legacy-card.css';
+@import './shopify-polaris-legacy-carousel.css';
 @import './shopify-polaris-legacy-checkbox.css';
 @import './shopify-polaris-legacy-combobox.css';
 @import './shopify-polaris-legacy-datepicker.css';
@@ -13,6 +14,7 @@
 @import './shopify-polaris-legacy-divider.css';
 @import './shopify-polaris-legacy-drawer.css';
 @import './shopify-polaris-legacy-empty.css';
+@import './shopify-polaris-legacy-exception.css';
 @import './shopify-polaris-legacy-fileupload.css';
 @import './shopify-polaris-legacy-form.css';
 @import './shopify-polaris-legacy-input.css';

package/dist/types/Tone.d.ts

@@ -1,3 +0,0 @@
-export type ToneProps = {
-    tone?: 'neutral' | 'valid' | 'invalid';
-};

package/dist/types/Tone.js

@@ -1 +0,0 @@
-export {};

package/dist/utils/Tone.d.ts

@@ -1,2 +0,0 @@
-export declare const ToneProvider: import("react").Provider<"neutral" | "valid" | "invalid" | undefined>;
-export declare function useToneContext(): "neutral" | "valid" | "invalid" | undefined;

package/dist/utils/Tone.js

@@ -1,6 +0,0 @@
-import { createContext, useContext } from 'react';
-const ToneContext = /* @__PURE__ */ createContext('neutral');
-export const ToneProvider = ToneContext.Provider;
-export function useToneContext() {
-    return useContext(ToneContext);
-}