@central-ui/react 0.1.1 → 0.2.0

package/dist/types/Validation.js

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

package/dist/utils/ArkStateToDataAttributes.d.ts

@@ -1,4 +1,3 @@
 export declare function arkStateToDataAttributes(state: object): {
     [k: string]: any;
 };
-//# sourceMappingURL=ArkStateToDataAttributes.d.ts.map

package/dist/utils/ArkStateToDataAttributes.js

@@ -1,9 +1,10 @@
 export function arkStateToDataAttributes(state) {
     return Object.fromEntries(Object.entries(state)
-        .filter(([, value]) => typeof value === 'boolean' || typeof value === 'string' || typeof value === 'number')
+        .filter(([, value]) => typeof value === 'boolean' ||
+        typeof value === 'string' ||
+        typeof value === 'number')
         .map(([key, value]) => [
         `data-${key.toLowerCase()}`,
         typeof value === 'boolean' ? value || undefined : value,
     ]));
 }
-//# sourceMappingURL=ArkStateToDataAttributes.js.map

package/dist/utils/Tone.d.ts

@@ -1,3 +1,2 @@
 export declare const ToneProvider: import("react").Provider<"neutral" | "valid" | "invalid" | undefined>;
 export declare function useToneContext(): "neutral" | "valid" | "invalid" | undefined;
-//# sourceMappingURL=Tone.d.ts.map

package/dist/utils/Tone.js

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

package/dist/utils/Validation.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { Validation } from '../types/Validation.ts';
+export declare function readValidation(validation?: Validation): {
+    state: "success" | "error" | undefined;
+    message: string | undefined;
+};
+export declare function validationAttributes(validation: ReturnType<typeof readValidation>): {
+    'data-validation': "success" | "error" | undefined;
+};
+/**
+ * Message children of Error and Success: omit them to show Root's validation message, pass a function to format that message, or pass content to replace it.
+ */
+export type ValidationMessageChildren = ReactNode | ((message: string) => ReactNode);
+export declare function validationMessageContent(validation: ReturnType<typeof readValidation>, state: 'error' | 'success', children?: ValidationMessageChildren): ReactNode;

package/dist/utils/Validation.js

@@ -0,0 +1,23 @@
+// Choosing the state and message from the validation prop's two shapes, so parts read one normalized object
+export function readValidation(validation) {
+    if (typeof validation === 'string')
+        return { state: validation, message: undefined };
+    return { state: validation?.[0], message: validation?.[1] };
+}
+// The state attribute carried by every part, so presets can style any part from Root's validation, like [data-validation='error']
+export function validationAttributes(validation) {
+    return { 'data-validation': validation.state };
+}
+// Choosing what an Error or Success part shows, or undefined when it should stay hidden
+export function validationMessageContent(validation, state, children) {
+    if (validation.state !== state)
+        return undefined;
+    // Static children show with the state alone, while the message and its formatting function need a message
+    if (children !== undefined && typeof children !== 'function')
+        return children;
+    if (!validation.message)
+        return undefined;
+    if (typeof children === 'function')
+        return children(validation.message);
+    return validation.message;
+}

package/dist/utils/asChild.d.ts

@@ -0,0 +1,41 @@
+import type { ReactElement, ReactNode } from 'react';
+/** The asChild prop shared by the library's action parts. */
+export type AsChildProps = {
+    /**
+     * Gives this part's behavior to your own single child element, like your app's Button, instead of rendering its own button.
+     * The child keeps the state data attributes (like data-open or data-disabled) and accessibility props, but none of this part's styling.
+     * @default false
+     */
+    asChild?: boolean;
+};
+/** Decides the style attributes of an action part: none when asChild, since the consumer's child owns its appearance. */
+export declare function asChildStyleAttributes(props: {
+    asChild?: boolean;
+    component: string;
+    disableStyle?: boolean;
+}): {
+    'data-component'?: undefined;
+    'data-style-disabled'?: undefined;
+} | {
+    'data-component': string;
+    'data-style-disabled': string | undefined;
+};
+/** Decides what a Base UI action part renders: the consumer's child as the element when asChild, otherwise the part's own styled element. */
+export declare function asChildRendering(props: {
+    asChild?: boolean;
+    children?: ReactNode;
+    component: string;
+    disableStyle?: boolean;
+}): {
+    render: ReactElement;
+} | {
+    'data-component'?: undefined;
+    'data-style-disabled'?: undefined;
+    children: ReactNode;
+    render?: undefined;
+} | {
+    'data-component': string;
+    'data-style-disabled': string | undefined;
+    children: ReactNode;
+    render?: undefined;
+};

package/dist/utils/asChild.js

@@ -0,0 +1,15 @@
+/** Decides the style attributes of an action part: none when asChild, since the consumer's child owns its appearance. */
+export function asChildStyleAttributes(props) {
+    if (props.asChild)
+        return {};
+    return {
+        'data-component': props.component,
+        'data-style-disabled': props.disableStyle ? '' : undefined,
+    };
+}
+/** Decides what a Base UI action part renders: the consumer's child as the element when asChild, otherwise the part's own styled element. */
+export function asChildRendering(props) {
+    if (props.asChild)
+        return { render: props.children };
+    return { children: props.children, ...asChildStyleAttributes(props) };
+}

package/dist/utils/icons.d.ts

@@ -0,0 +1,24 @@
+import type { SVGIconProps } from '../types/Icon.ts';
+export declare const ArrowLeft: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CalendarDays: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Check: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronDown: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronLeft: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronRight: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronUp: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronsUpDown: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CircleAlert: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CircleCheck: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Eye: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const EyeOff: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const File: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const FolderOpen: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const GripVertical: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Info: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const LoaderCircle: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Minus: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Star: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Text: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const TriangleAlert: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Upload: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const X: import("react").ForwardRefExoticComponent<Omit<SVGIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -8,10 +8,12 @@ export function useForwardClickToInput(selector, onClick) {
         onClick?.(event);
         if (event.defaultPrevented)
             return;
-        if (event.target instanceof Element && event.target.closest('button, [data-part="item"]'))
+        if (event.target instanceof Element &&
+            event.target.closest('button, [data-part="item"]'))
             return;
         const input = event.currentTarget.querySelector(selector);
-        if (!input || (event.target instanceof Element && event.target.matches(selector)))
+        if (!input ||
+            (event.target instanceof Element && event.target.matches(selector)))
             return;
         forwardingClick.current = true;
         try {
@@ -24,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.1",
+  "version": "0.2.0",
   "description": "Accessible React components with optional Tailwind CSS style presets",
   "license": "MIT",
   "keywords": [
@@ -52,15 +52,16 @@
     "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",
+    "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

@@ -10,7 +10,7 @@
     }
 
     &:where([data-component='autocomplete-input']) {
-      @apply min-w-12 flex-1 h-7 rounded-none border-0 bg-transparent px-2.5 py-0 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-400;
+      @apply min-w-12 flex-1 h-8 rounded-none border-0 bg-transparent px-2.5 py-0 text-sm text-neutral-950 shadow-none outline-none placeholder:text-sm placeholder:text-neutral-600 hover:bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:text-neutral-400;
     }
 
     &:where([data-component='autocomplete-scrollarea']) {
@@ -30,7 +30,7 @@
     }
 
     &:where([data-component='autocomplete-item']) {
-      @apply flex h-8 w-full shrink-0 cursor-pointer items-center justify-between gap-2 rounded-lg px-2 text-sm font-normal text-nowrap text-neutral-950 outline-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-30 data-highlighted:bg-neutral-100 active:bg-neutral-200;
+      @apply flex h-7 w-full shrink-0 cursor-pointer items-center justify-between gap-2 rounded-xl px-2 text-sm font-normal text-nowrap text-neutral-950 outline-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-30 data-highlighted:bg-neutral-100 active:bg-neutral-200;
     }
 
     &:where([data-component='autocomplete-popup']) {
@@ -57,7 +57,7 @@
     }
 
     &:where([data-component='autocomplete-addon']) {
-      @apply inline-flex h-7 shrink-0 items-center gap-2 empty:hidden px-2 py-1;
+      @apply inline-flex h-8 shrink-0 items-center gap-2 empty:hidden px-2 py-1;
       &[data-variant='emphasized'] {
         @apply bg-neutral-200/60;
       }
@@ -75,15 +75,24 @@
     }
 
     &:where([data-component='autocomplete-inputgroup']) {
-      @apply p-0 flex w-full min-w-0 items-center 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 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-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;
       }
     }
 
+    &:where([data-component='autocomplete-inputgroup'])
+      :where(
+        svg:not([data-style-disabled]):not(
+            [data-component='combobox-chipremovebuttonicon']
+          ):not([data-component='chip-closebuttonicon'])
+      ) {
+      @apply text-neutral-600;
+    }
+
     &:where([data-component='autocomplete-addonopenbutton']) {
       @apply flex h-4 w-auto shrink-0 cursor-pointer items-center justify-center rounded-full p-0 text-neutral-600 hover:text-neutral-700 active:text-neutral-800 focus-visible:outline-2 focus-visible:outline-blue-500 disabled:pointer-events-none disabled:opacity-50;
     }

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

@@ -2,7 +2,7 @@
 @layer components {
   :where(:not([data-style-disabled])) {
     &:where([data-component='badge-badge']) {
-      @apply flex h-[1.28rem] min-w-[1.425rem] w-fit shrink-0 items-center justify-center gap-1 truncate rounded-lg px-2 text-nowrap text-[0.8rem] font-semibold leading-none [&>svg]:h-3.5 [&>svg]:w-fit;
+      @apply flex h-[1.28rem] min-w-[1.425rem] w-fit shrink-0 items-center justify-center gap-1 truncate rounded-md px-2 text-nowrap text-[0.8rem] font-semibold leading-none [&>svg]:h-3.5 [&>svg]:w-fit;
       &[data-tone='neutral'] {
         @apply bg-[#0000000d] text-[#4a4a4a];
       }

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

@@ -2,15 +2,15 @@
 @layer components {
   :where(:not([data-style-disabled])) {
     &:where([data-component='chip-chip']) {
-      @apply flex h-6 min-w-6 w-fit shrink-0 cursor-default items-center justify-between gap-1 rounded-full bg-black/5 px-2 text-[0.8rem] leading-none font-medium text-nowrap text-neutral-600;
+      @apply flex h-5 min-w-6 w-fit shrink-0 items-center justify-between gap-1 rounded-md bg-neutral-100 px-2 text-[0.8rem] leading-none font-medium text-nowrap text-neutral-700 data-disabled:opacity-50;
     }
 
     &:where([data-component='chip-closebutton']) {
-      @apply -mr-1.75 flex h-4.25 aspect-square w-auto cursor-pointer items-center justify-center rounded-full text-neutral-600 hover:bg-black/10 hover:text-neutral-950 active:bg-black/15 active:text-neutral-950 focus-visible:outline-2 focus-visible:outline-blue-500 disabled:pointer-events-none disabled:opacity-50;
+      @apply -mr-1.75 flex h-4.25 aspect-square w-auto shrink-0 cursor-pointer items-center justify-center rounded-md p-0 hover:bg-neutral-200 active:bg-neutral-200 focus-visible:outline-2 focus-visible:outline-blue-500 disabled:pointer-events-none disabled:opacity-50;
     }
 
     &:where([data-component='chip-closebuttonicon']) {
-      @apply h-3.25 w-fit text-inherit;
+      @apply h-3.25 w-fit shrink-0 text-neutral-700;
     }
   }
 }