@central-ui/react 0.1.2 → 0.3.0

package/dist/utils/icons.js

@@ -0,0 +1,160 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, forwardRef } from 'react';
+/** Builds a Lucide-compatible icon from its SVG elements, so the package ships only the icons it uses instead of the whole lucide-react catalog. Icon shapes are copied from lucide-react v1.57.0 (ISC license, https://lucide.dev). */
+function createIcon(name, iconNode) {
+    const Icon = forwardRef(function Icon({ size = 24, width, height, color = 'currentColor', strokeWidth = 2, absoluteStrokeWidth, nonScalingStroke, className, children, ...props }, ref) {
+        // Keeping the stroke the same visual thickness at any size, when asked
+        const iconStrokeWidth = absoluteStrokeWidth
+            ? (Number(strokeWidth) * 24) / Number(width ?? size)
+            : strokeWidth;
+        // Hiding the icon from screen readers unless it was given an accessible name
+        const hasAccessibleProp = Boolean(children) ||
+            Object.keys(props).some((prop) => prop.startsWith('aria-') || prop === 'role' || prop === 'title');
+        return (_jsxs("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", width: width ?? size, height: height ?? size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: iconStrokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className: ['lucide', `lucide-${name}`, className]
+                .filter(Boolean)
+                .join(' '), "aria-hidden": hasAccessibleProp ? undefined : 'true', ...props, children: [iconNode.map(([tag, attributes], index) => createElement(tag, {
+                    key: index,
+                    vectorEffect: nonScalingStroke ? 'non-scaling-stroke' : undefined,
+                    ...attributes,
+                })), children] }));
+    });
+    Icon.displayName = name.replace(/(^|-)(\w)/g, (_match, _dash, letter) => letter.toUpperCase());
+    return Icon;
+}
+export const ArrowLeft = /* @__PURE__ */ createIcon('arrow-left', [
+    ['path', { d: 'm12 19-7-7 7-7' }],
+    ['path', { d: 'M19 12H5' }],
+]);
+export const CalendarDays = /* @__PURE__ */ createIcon('calendar-days', [
+    ['path', { d: 'M8 2v3' }],
+    ['path', { d: 'M16 2v3' }],
+    ['rect', { x: '3', y: '3', width: '18', height: '18', rx: '2' }],
+    ['path', { d: 'M3 9h18' }],
+    ['path', { d: 'M8 13h.01' }],
+    ['path', { d: 'M12 13h.01' }],
+    ['path', { d: 'M16 13h.01' }],
+    ['path', { d: 'M8 17h.01' }],
+    ['path', { d: 'M12 17h.01' }],
+    ['path', { d: 'M16 17h.01' }],
+]);
+export const Check = /* @__PURE__ */ createIcon('check', [
+    ['path', { d: 'M20 6 9 17l-5-5' }],
+]);
+export const ChevronDown = /* @__PURE__ */ createIcon('chevron-down', [
+    ['path', { d: 'm6 9 6 6 6-6' }],
+]);
+export const ChevronLeft = /* @__PURE__ */ createIcon('chevron-left', [
+    ['path', { d: 'm15 18-6-6 6-6' }],
+]);
+export const ChevronRight = /* @__PURE__ */ createIcon('chevron-right', [
+    ['path', { d: 'm9 18 6-6-6-6' }],
+]);
+export const ChevronUp = /* @__PURE__ */ createIcon('chevron-up', [
+    ['path', { d: 'm18 15-6-6-6 6' }],
+]);
+export const ChevronsUpDown = /* @__PURE__ */ createIcon('chevrons-up-down', [
+    ['path', { d: 'm7 15 5 5 5-5' }],
+    ['path', { d: 'm7 9 5-5 5 5' }],
+]);
+export const CircleAlert = /* @__PURE__ */ createIcon('circle-alert', [
+    ['circle', { cx: '12', cy: '12', r: '10' }],
+    ['line', { x1: '12', x2: '12', y1: '8', y2: '12' }],
+    ['line', { x1: '12', x2: '12.01', y1: '16', y2: '16' }],
+]);
+export const CircleCheck = /* @__PURE__ */ createIcon('circle-check', [
+    ['circle', { cx: '12', cy: '12', r: '10' }],
+    ['path', { d: 'm16 9-5.5 5.5L8 12' }],
+]);
+export const Eye = /* @__PURE__ */ createIcon('eye', [
+    [
+        'path',
+        {
+            d: 'M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0',
+        },
+    ],
+    ['circle', { cx: '12', cy: '12', r: '3' }],
+]);
+export const EyeOff = /* @__PURE__ */ createIcon('eye-off', [
+    [
+        'path',
+        {
+            d: 'M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49',
+        },
+    ],
+    ['path', { d: 'M14.084 14.158a3 3 0 0 1-4.242-4.242' }],
+    [
+        'path',
+        {
+            d: 'M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143',
+        },
+    ],
+    ['path', { d: 'm2 2 20 20' }],
+]);
+export const File = /* @__PURE__ */ createIcon('file', [
+    [
+        'path',
+        {
+            d: 'M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z',
+        },
+    ],
+    ['path', { d: 'M14 2v5a1 1 0 0 0 1 1h5' }],
+]);
+export const FolderOpen = /* @__PURE__ */ createIcon('folder-open', [
+    [
+        'path',
+        {
+            d: 'm6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2',
+        },
+    ],
+]);
+export const GripVertical = /* @__PURE__ */ createIcon('grip-vertical', [
+    ['circle', { cx: '9', cy: '12', r: '1' }],
+    ['circle', { cx: '9', cy: '5', r: '1' }],
+    ['circle', { cx: '9', cy: '19', r: '1' }],
+    ['circle', { cx: '15', cy: '12', r: '1' }],
+    ['circle', { cx: '15', cy: '5', r: '1' }],
+    ['circle', { cx: '15', cy: '19', r: '1' }],
+]);
+export const Info = /* @__PURE__ */ createIcon('info', [
+    ['circle', { cx: '12', cy: '12', r: '10' }],
+    ['path', { d: 'M12 16v-4' }],
+    ['path', { d: 'M12 8h.01' }],
+]);
+export const LoaderCircle = /* @__PURE__ */ createIcon('loader-circle', [
+    ['path', { d: 'M21 12a9 9 0 1 1-6.219-8.56' }],
+]);
+export const Minus = /* @__PURE__ */ createIcon('minus', [
+    ['path', { d: 'M5 12h14' }],
+]);
+export const Star = /* @__PURE__ */ createIcon('star', [
+    [
+        'path',
+        {
+            d: 'M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z',
+        },
+    ],
+]);
+export const Text = /* @__PURE__ */ createIcon('text-align-start', [
+    ['path', { d: 'M21 5H3' }],
+    ['path', { d: 'M15 12H3' }],
+    ['path', { d: 'M17 19H3' }],
+]);
+export const TriangleAlert = /* @__PURE__ */ createIcon('triangle-alert', [
+    [
+        'path',
+        {
+            d: 'm21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3',
+        },
+    ],
+    ['path', { d: 'M12 9v4' }],
+    ['path', { d: 'M12 17h.01' }],
+]);
+export const Upload = /* @__PURE__ */ createIcon('upload', [
+    ['path', { d: 'M12 3v12' }],
+    ['path', { d: 'm17 8-5-5-5 5' }],
+    ['path', { d: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' }],
+]);
+export const X = /* @__PURE__ */ createIcon('x', [
+    ['path', { d: 'M18 6 6 18' }],
+    ['path', { d: 'm6 6 12 12' }],
+]);

package/dist/utils/useForwardClickToInput.d.ts

@@ -1,4 +1,3 @@
 import type { MouseEventHandler } from 'react';
 /** Forward clicks on an input group to its input without calling the group's handler twice. */
 export declare function useForwardClickToInput<T extends HTMLElement>(selector: string, onClick?: MouseEventHandler<T>): MouseEventHandler<T>;
-//# sourceMappingURL=useForwardClickToInput.d.ts.map

package/dist/utils/useForwardClickToInput.js

@@ -26,4 +26,3 @@ export function useForwardClickToInput(selector, onClick) {
             input.focus();
     };
 }
-//# sourceMappingURL=useForwardClickToInput.js.map

package/dist/utils/virtualization/useVirtualizedAutocomplete.d.ts

@@ -195,4 +195,3 @@ export declare function FilteredItemsSync<Item extends ItemShape>({ onChange, }:
     /** Spread the hook's filteredItemsSyncProps here to sync all native search results, not just mounted rows. */
     onChange: (items: Item[]) => void;
 }): null;
-//# sourceMappingURL=useVirtualizedAutocomplete.d.ts.map

package/dist/utils/virtualization/useVirtualizedAutocomplete.js

@@ -177,4 +177,3 @@ export function FilteredItemsSync({ onChange, }) {
     }, [groups, onChange]);
     return null;
 }
-//# sourceMappingURL=useVirtualizedAutocomplete.js.map

package/dist/utils/virtualization/useVirtualizedCombobox.d.ts

@@ -197,4 +197,3 @@ export declare function FilteredItemsSync<Item extends ItemShape>({ onChange, }:
     /** Spread the hook's filteredItemsSyncProps here to sync all native search results, not just mounted rows. */
     onChange: (items: Item[]) => void;
 }): null;
-//# sourceMappingURL=useVirtualizedCombobox.d.ts.map

package/dist/utils/virtualization/useVirtualizedCombobox.js

@@ -171,4 +171,3 @@ export function FilteredItemsSync({ onChange, }) {
     }, [groups, onChange]);
     return null;
 }
-//# sourceMappingURL=useVirtualizedCombobox.js.map

package/dist/utils/virtualization/useVirtualizedTable.d.ts

@@ -166,4 +166,3 @@ export declare function useVirtualizedTable<TItem>({ items, getItemKey, estimate
     scrollToIndex: (index: number, options?: Parameters<(index: number, { align: initialAlign, behavior, }?: import("@tanstack/virtual-core").ScrollToOptions) => void>[1]) => void;
     virtualizer: import("@tanstack/react-virtual").ReactVirtualizer<HTMLTableSectionElement, HTMLTableRowElement>;
 };
-//# sourceMappingURL=useVirtualizedTable.d.ts.map

package/dist/utils/virtualization/useVirtualizedTable.js

@@ -124,4 +124,3 @@ export function useVirtualizedTable({ items, getItemKey, estimateSize = 34, over
     const scrollToIndex = useCallback((index, options) => virtualizer.scrollToIndex(index, { align: 'auto', ...options }), [virtualizer]);
     return { bodyProps, rows, spacers, scrollToIndex, virtualizer };
 }
-//# sourceMappingURL=useVirtualizedTable.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-ui/react",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "description": "Accessible React components with optional Tailwind CSS style presets",
   "license": "MIT",
   "keywords": [
@@ -52,15 +52,18 @@
     "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",
-    "lucide-react": "1.57.0",
-    "react-aria": "3.53.1",
-    "react-aria-components": "1.22.1",
-    "react-resizable-panels": "4.14.5",
-    "tailwind-merge": "3.7.0"
+    "@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-autocomplete.css

@@ -76,10 +76,10 @@
 
     &:where([data-component='autocomplete-inputgroup']) {
       @apply p-0 flex w-full min-w-0 items-center overflow-hidden rounded-xl border border-neutral-300 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'] {
+      &[data-validation='error'] {
         @apply border-red-500 focus-within:border-red-500 focus-within:ring-red-500/10;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-600 focus-within:border-green-600 focus-within:ring-green-600/10;
       }
     }

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

@@ -0,0 +1,64 @@
+/* barchart */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='barchart-gridline']) {
+      @apply stroke-neutral-200;
+    }
+
+    &:where([data-component='barchart-xaxis-ticklabel']) {
+      @apply fill-neutral-500;
+    }
+
+    &:where([data-component='barchart-yaxis-ticklabel']) {
+      @apply fill-neutral-500;
+    }
+
+    &:where([data-component='barchart-xaxis-line']) {
+      @apply stroke-neutral-300;
+    }
+
+    &:where([data-component='barchart-yaxis-line']) {
+      @apply stroke-neutral-300;
+    }
+
+    &:where([data-component='barchart-xaxis-tickline']) {
+      @apply stroke-neutral-300;
+    }
+
+    &:where([data-component='barchart-yaxis-tickline']) {
+      @apply stroke-neutral-300;
+    }
+
+    &:where([data-component='barchart-hoverguide']) {
+      @apply stroke-neutral-400/50;
+    }
+
+    &:where([data-component='barchart-bar']) {
+      @apply fill-[#13ACF0];
+    }
+
+    &:where([data-component='barchart-bar'])[data-active] {
+      @apply opacity-80;
+    }
+
+    &:where([data-component='barchart-tooltip']) {
+      @apply grid min-w-56 grid-cols-[auto_1fr] items-center gap-x-1 gap-y-2 rounded-md border border-neutral-700 bg-neutral-900 p-2.5 shadow-md;
+    }
+
+    &:where([data-component='barchart-tooltiptitle']) {
+      @apply col-span-full row-start-1 text-xs font-semibold leading-4 text-neutral-200;
+    }
+
+    &:where([data-component='barchart-tooltiplabel']) {
+      @apply col-start-2 row-start-2 text-xs font-medium leading-4 text-neutral-400;
+    }
+
+    &:where([data-component='barchart-tooltipvalue']) {
+      @apply col-span-full row-start-3 justify-self-start rounded-md bg-neutral-600 px-1.25 py-0.5 font-mono text-sm font-medium leading-5 text-neutral-200 tabular-nums;
+    }
+
+    &:where([data-component='barchart-tooltipcolorindicator']) {
+      @apply col-start-1 row-start-2 h-2.5 w-2.5 rounded-sm bg-[#13ACF0];
+    }
+  }
+}

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-checkbox.css

@@ -11,10 +11,10 @@
 
     &:where([data-component='checkbox-button']) {
       @apply mt-0.5 row-start-1 flex size-4.25 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-neutral-300 bg-white text-white shadow-xs transition-all duration-150 data-checked:border-neutral-950 data-checked:bg-neutral-950 data-indeterminate:border-neutral-950 data-indeterminate: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'] {
+      &[data-validation='error'] {
         @apply border-red-600 bg-red-50 data-checked:border-red-600 data-checked:bg-red-600 data-indeterminate:border-red-600 data-indeterminate:bg-red-600;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-700 bg-green-50 data-checked:border-green-700 data-checked:bg-green-700 data-indeterminate:border-green-700 data-indeterminate:bg-green-700;
       }
     }

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

@@ -84,10 +84,10 @@
 
     &:where([data-component='combobox-inputgroup']) {
       @apply p-0 flex w-full min-w-0 items-center overflow-hidden rounded-xl border border-neutral-300 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'] {
+      &[data-validation='error'] {
         @apply border-red-500 focus-within:border-red-500 focus-within:ring-red-500/10;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-600 focus-within:border-green-600 focus-within:ring-green-600/10;
       }
     }

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

@@ -11,10 +11,10 @@
 
     &:where([data-component='datepicker-inputgroup']) {
       @apply p-0 flex w-full min-w-0 items-center overflow-hidden rounded-xl border border-neutral-300 bg-white text-[0.8rem] text-neutral-950 shadow-xs outline-none hover:bg-neutral-50 data-[focus-within]:border-blue-500 data-[focus-within]:ring-2 data-[focus-within]:ring-blue-500/10 data-[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'] {
+      &[data-validation='error'] {
         @apply border-red-500 data-[focus-within]:border-red-500 data-[focus-within]:ring-red-500/10;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-600 data-[focus-within]:border-green-600 data-[focus-within]:ring-green-600/10;
       }
     }
@@ -88,10 +88,10 @@
 
     &:where([data-component='datepicker-openbutton']) {
       @apply flex h-8.5 w-fit shrink-0 cursor-pointer items-center justify-center gap-1.75 overflow-hidden rounded-xl border border-neutral-300 bg-white px-2.5 text-sm font-normal text-neutral-950 shadow-xs outline-none hover:bg-neutral-50 focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-blue-500/10 focus-visible:shadow-sm disabled:pointer-events-none disabled:bg-white disabled:text-neutral-400 disabled:shadow-none aria-expanded:border-blue-500 aria-expanded:ring-2 aria-expanded:ring-blue-500/10 aria-expanded:shadow-sm;
-      &[data-tone='invalid'] {
+      &[data-validation='error'] {
         @apply border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/10 aria-expanded:border-red-500 aria-expanded:ring-red-500/10;
       }
-      &[data-tone='valid'] {
+      &[data-validation='success'] {
         @apply border-green-600 focus-visible:border-green-600 focus-visible:ring-green-600/10 aria-expanded:border-green-600 aria-expanded:ring-green-600/10;
       }
     }

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

@@ -38,3 +38,19 @@
     }
   }
 }
+
+/* dialog action buttons, styled like a secondary Button */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='dialog-openbutton']) {
+      @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;
+
+      &: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;
+      }
+      &:disabled {
+        @apply bg-black/3 text-neutral-400;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,172 @@
+/* donutchart */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='donutchart-track']) {
+      @apply fill-neutral-100;
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='0'] {
+      @apply fill-[#13ACF0];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='1'] {
+      @apply fill-[#5365F6];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='2'] {
+      @apply fill-[#8B5CF6];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='3'] {
+      @apply fill-[#B163E8];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='4'] {
+      @apply fill-[#00AEFF];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='5'] {
+      @apply fill-[#FF9500];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='6'] {
+      @apply fill-[#00FFB7];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-index='7'] {
+      @apply fill-[#FFDD46];
+    }
+
+    &:where([data-component='donutchart-slice'])[data-inactive] {
+      @apply opacity-40;
+    }
+
+    &:where([data-component='donutchart-body']) {
+      @apply flex size-full flex-col items-center justify-center gap-1 text-center;
+    }
+
+    &:where([data-component='donutchart-bodytitle']) {
+      @apply max-w-full truncate text-sm leading-5 text-neutral-700;
+    }
+
+    &:where([data-component='donutchart-bodyvalue']) {
+      @apply max-w-full truncate text-2xl leading-8 font-semibold tabular-nums text-neutral-950;
+    }
+
+    &:where([data-component='donutchart-legendlist']) {
+      @apply flex min-w-48 flex-col gap-2;
+    }
+
+    &:where([data-component='donutchart-legendlist'])[data-position='right'] {
+      @apply pl-6;
+    }
+
+    &:where([data-component='donutchart-legendlist'])[data-position='bottom'] {
+      @apply pt-4;
+    }
+
+    &:where([data-component='donutchart-legenditem']) {
+      @apply grid grid-cols-[auto_1fr_auto] items-center gap-x-2 text-sm leading-5;
+    }
+
+    &:where([data-component='donutchart-legenditem'])[data-inactive] {
+      @apply opacity-40;
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator']) {
+      @apply size-3 rounded-sm;
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='0'] {
+      @apply bg-[#13ACF0];
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='1'] {
+      @apply bg-[#5365F6];
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='2'] {
+      @apply bg-[#8B5CF6];
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='3'] {
+      @apply bg-[#B163E8];
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='4'] {
+      @apply bg-[#00AEFF];
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='5'] {
+      @apply bg-[#FF9500];
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='6'] {
+      @apply bg-[#00FFB7];
+    }
+
+    &:where([data-component='donutchart-legendcolorindicator'])[data-index='7'] {
+      @apply bg-[#FFDD46];
+    }
+
+    &:where([data-component='donutchart-legendlabel']) {
+      @apply min-w-0 truncate text-neutral-600;
+    }
+
+    &:where([data-component='donutchart-legendvalue']) {
+      @apply pl-6 text-right tabular-nums text-neutral-500;
+    }
+
+    &:where([data-component='donutchart-tooltip']) {
+      @apply grid min-w-56 grid-cols-[auto_1fr] items-center gap-x-1 gap-y-2 rounded-md border border-neutral-700 bg-neutral-900 p-2.5 shadow-md;
+    }
+
+    &:where([data-component='donutchart-tooltiptitle']) {
+      @apply col-span-full row-start-1 text-xs font-semibold leading-4 text-neutral-200;
+    }
+
+    &:where([data-component='donutchart-tooltiplabel']) {
+      @apply col-start-2 row-start-2 text-xs font-medium leading-4 text-neutral-400;
+    }
+
+    &:where([data-component='donutchart-tooltipvalue']) {
+      @apply col-span-full row-start-3 justify-self-start rounded-md bg-neutral-600 px-1.25 py-0.5 font-mono text-sm font-medium leading-5 text-neutral-200 tabular-nums;
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator']) {
+      @apply col-start-1 row-start-2 h-2.5 w-2.5 rounded-sm;
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='0'] {
+      @apply bg-[#13ACF0];
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='1'] {
+      @apply bg-[#5365F6];
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='2'] {
+      @apply bg-[#8B5CF6];
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='3'] {
+      @apply bg-[#B163E8];
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='4'] {
+      @apply bg-[#00AEFF];
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='5'] {
+      @apply bg-[#FF9500];
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='6'] {
+      @apply bg-[#00FFB7];
+    }
+
+    &:where([data-component='donutchart-tooltipcolorindicator'])[data-index='7'] {
+      @apply bg-[#FFDD46];
+    }
+  }
+}

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

@@ -38,3 +38,19 @@
     }
   }
 }
+
+/* drawer action buttons, styled like a secondary Button */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='drawer-openbutton']) {
+      @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;
+
+      &: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;
+      }
+      &:disabled {
+        @apply bg-black/3 text-neutral-400;
+      }
+    }
+  }
+}