@central-ui/react 0.3.0 → 0.5.0

package/dist/components/tooltip/index.d.ts

@@ -1,7 +1,7 @@
 import type { StyleProps } from '../../types/Style.ts';
 import type { AsChildProps } from '../../utils/asChild.ts';
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
-import type { ComponentPropsWithRef } from 'react';
+import type { ComponentProps, ComponentPropsWithRef } from 'react';
 /**
  * OpenButton renders its own trigger button; pass asChild to make your own target element the trigger instead. Keep Popup in the same Root. Popup already includes its portal and positioner. PopupText supplies the help text; Arrow is optional.
  *
@@ -30,13 +30,13 @@ import type { ComponentPropsWithRef } from 'react';
  */
 export declare function Root<Payload = unknown>(props: BaseTooltip.Root.Props<Payload>): import("react").JSX.Element;
 /** Opens the tooltip on hover or focus. Pass asChild to give this behavior to your own element, like your app's Button. */
-export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<BaseTooltip.Trigger.Props<unknown>, "className" | "render"> & {
+export declare function OpenButton({ asChild, disableStyle, children, ref, ...props }: Omit<BaseTooltip.Trigger.Props, 'className' | 'render'> & {
     className?: string;
-} & AsChildProps & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseTooltip.Popup>, 'className'> & {
+} & AsChildProps & StyleProps): import("react").JSX.Element;
+export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseTooltip.Popup>, 'className' | 'render'> & {
     className?: string;
 } & Pick<BaseTooltip.Portal.Props, 'container' | 'keepMounted'> & Pick<BaseTooltip.Positioner.Props, 'anchor' | 'positionMethod' | 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'arrowPadding' | 'disableAnchorTracking' | 'collisionAvoidance'> & StyleProps;
 /** Already includes the portal and positioner. Keep it in the matching Root and let the native open state control visibility. */
 export declare function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }: PopupProps): import("react").JSX.Element;
-export declare const PopupText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const Arrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "children" | "dangerouslySetInnerHTML"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare function PopupText({ disableStyle, className, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
+export declare function Arrow({ disableStyle, className, style, ref, ...props }: Omit<ComponentProps<'svg'>, 'children' | 'dangerouslySetInnerHTML'> & StyleProps): import("react").JSX.Element;

package/dist/components/tooltip/index.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { asChildRendering } from "../../utils/asChild.js";
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
-import { forwardRef } from 'react';
 /**
  * OpenButton renders its own trigger button; pass asChild to make your own target element the trigger instead. Keep Popup in the same Root. Popup already includes its portal and positioner. PopupText supplies the help text; Arrow is optional.
  *
@@ -32,10 +31,10 @@ export function Root(props) {
     return _jsx(BaseTooltip.Root, { ...props });
 }
 /** Opens the tooltip on hover or focus. Pass asChild to give this behavior to your own element, like your app's Button. */
-export const OpenButton = /* @__PURE__ */ forwardRef(function OpenButton({ asChild, disableStyle, children, ...props }, ref) {
+export function OpenButton({ asChild, disableStyle, children, ref, ...props }) {
     const rendering = asChildRendering({ asChild, children, component: 'tooltip-openbutton', disableStyle });
     return _jsx(BaseTooltip.Trigger, { ...props, ref: ref, ...rendering });
-});
+}
 /** Already includes the portal and positioner. Keep it in the matching Root and let the native open state control visibility. */
 export function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side = 'top', sideOffset = 8, align = 'start', alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }) {
     const baseStyle = {
@@ -46,9 +45,9 @@ export function Popup({ disableStyle, container, keepMounted, anchor, positionMe
                     ? (state) => ({ ...baseStyle, ...style(state) })
                     : { ...baseStyle, ...style } }) }) }));
 }
-export const PopupText = /* @__PURE__ */ forwardRef(function PopupText({ disableStyle, className, ...props }, ref) {
+export function PopupText({ disableStyle, className, ref, ...props }) {
     return (_jsx("span", { ...props, ref: ref, "data-component": "tooltip-popuptext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Arrow = /* @__PURE__ */ forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
+}
+export function Arrow({ disableStyle, className, style, ref, ...props }) {
     return (_jsxs(BaseTooltip.Arrow, { style: style, render: _jsx("svg", { ...props, ref: ref, "aria-hidden": true, width: "20", height: "10", viewBox: "0 0 20 10" }), "data-component": "tooltip-arrow", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [_jsx("path", { d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z", "data-component": "tooltip-arrow-1" }), _jsx("path", { d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z", "data-component": "tooltip-arrow-2" }), _jsx("path", { d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z", "data-component": "tooltip-arrow-3" })] }));
-});
+}

package/dist/components/tour/index.d.ts

@@ -38,7 +38,7 @@ import type { ComponentProps, ReactElement, ReactNode, SVGProps } from 'react';
  *             <Tour.Description>Narrow the results.</Tour.Description>
  *           </Tour.Content>
  *           <Tour.Progress />
- *           <Tour.BackButton>Back</Tour.BackButton>
+ *           <Tour.PreviousButton>Back</Tour.PreviousButton>
  *           <Tour.NextButton>Next</Tour.NextButton>
  *           <Tour.DoneButton>Done</Tour.DoneButton>
  *         </Tour.Popup>
@@ -133,7 +133,7 @@ export declare function Progress({ disableStyle, className, children, ...props }
 }): import("react").JSX.Element;
 type ButtonProps = ComponentProps<'button'> & AsChildProps & StyleProps;
 /** Goes back one step, styled like a secondary Button. Not rendered on the first step, where there's nothing to go back to. Pass asChild to give this behavior to your own button instead. */
-export declare function BackButton(props: ButtonProps): import("react").JSX.Element | null;
+export declare function PreviousButton(props: ButtonProps): import("react").JSX.Element | null;
 /** Goes to the next step, styled like a primary Button. Not rendered on the last step; DoneButton takes its place there. Pass asChild to give this behavior to your own button instead. */
 export declare function NextButton(props: ButtonProps): import("react").JSX.Element | null;
 /** Finishes the tour, styled like a primary Button. Rendered only on the last step, in NextButton's place. Pass asChild to give this behavior to your own button instead. */

package/dist/components/tour/index.js

@@ -40,7 +40,7 @@ import { twMerge } from 'tailwind-merge';
  *             <Tour.Description>Narrow the results.</Tour.Description>
  *           </Tour.Content>
  *           <Tour.Progress />
- *           <Tour.BackButton>Back</Tour.BackButton>
+ *           <Tour.PreviousButton>Back</Tour.PreviousButton>
  *           <Tour.NextButton>Next</Tour.NextButton>
  *           <Tour.DoneButton>Done</Tour.DoneButton>
  *         </Tour.Popup>
@@ -230,11 +230,11 @@ function TourButton({ asChild, joyrideProps, part, defaultClassName, disableStyl
     return (_jsx("button", { type: "button", ...behaviorProps, ...asChildStyleAttributes({ asChild, component: `tour-${part}`, disableStyle }), className: twMerge(!disableStyle && defaultClassName, className), children: children }));
 }
 /** Goes back one step, styled like a secondary Button. Not rendered on the first step, where there's nothing to go back to. Pass asChild to give this behavior to your own button instead. */
-export function BackButton(props) {
-    const step = useStep('BackButton');
+export function PreviousButton(props) {
+    const step = useStep('PreviousButton');
     if (step.joyride.index === 0)
         return null;
-    return (_jsx(TourButton, { ...props, joyrideProps: step.joyride.backProps, part: "backbutton", defaultClassName: `${buttonBase} ${secondaryButton}` }));
+    return (_jsx(TourButton, { ...props, joyrideProps: step.joyride.backProps, part: "previousbutton", defaultClassName: `${buttonBase} ${secondaryButton}` }));
 }
 /** Goes to the next step, styled like a primary Button. Not rendered on the last step; DoneButton takes its place there. Pass asChild to give this behavior to your own button instead. */
 export function NextButton(props) {
@@ -276,5 +276,6 @@ export function CloseButtonIcon({ disableStyle, children, className, ...props })
             'data-style-disabled': disableStyle ? '' : undefined,
         },
         className: twMerge(!disableStyle && 'h-4 w-fit shrink-0 text-inherit', children?.props.className, className),
+        strokeWidth: props.strokeWidth ?? children?.props.strokeWidth ?? 2,
     });
 }

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export * as FileUpload from './components/fileupload/index.tsx';
 export * as Input from './components/input/index.tsx';
 export * as Menu from './components/menu/index.tsx';
 export * as NumberInput from './components/numberinput/index.tsx';
+export * as Pagination from './components/pagination/index.tsx';
 export * as PasswordInput from './components/passwordinput/index.tsx';
 export * as OtpInput from './components/otpinput/index.tsx';
 export * as Popover from './components/popover/index.tsx';

package/dist/index.js

@@ -11,6 +11,7 @@ export * as FileUpload from "./components/fileupload/index.js";
 export * as Input from "./components/input/index.js";
 export * as Menu from "./components/menu/index.js";
 export * as NumberInput from "./components/numberinput/index.js";
+export * as Pagination from "./components/pagination/index.js";
 export * as PasswordInput from "./components/passwordinput/index.js";
 export * as OtpInput from "./components/otpinput/index.js";
 export * as Popover from "./components/popover/index.js";

package/dist/utils/icons.d.ts

@@ -1,24 +1,105 @@
 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>>;
+export declare const ArrowLeft: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const CalendarDays: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Check: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const ChevronDown: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const ChevronFirst: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const ChevronLast: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const ChevronLeft: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const ChevronRight: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const ChevronUp: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const ChevronsUpDown: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const CircleAlert: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const CircleCheck: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Ellipsis: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Eye: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const EyeOff: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const File: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const FolderOpen: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const GripVertical: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Info: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const LoaderCircle: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Minus: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Star: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Text: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const TriangleAlert: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Upload: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const X: {
+    ({ size, width, height, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }: SVGIconProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/utils/icons.js

@@ -1,8 +1,8 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement, forwardRef } from 'react';
+import { createElement } 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) {
+    function Icon({ size = 24, width, height, color = 'currentColor', strokeWidth = 2, absoluteStrokeWidth, nonScalingStroke, className, children, ref, ...props }) {
         // Keeping the stroke the same visual thickness at any size, when asked
         const iconStrokeWidth = absoluteStrokeWidth
             ? (Number(strokeWidth) * 24) / Number(width ?? size)
@@ -17,7 +17,7 @@ function createIcon(name, iconNode) {
                     vectorEffect: nonScalingStroke ? 'non-scaling-stroke' : undefined,
                     ...attributes,
                 })), children] }));
-    });
+    }
     Icon.displayName = name.replace(/(^|-)(\w)/g, (_match, _dash, letter) => letter.toUpperCase());
     return Icon;
 }
@@ -43,6 +43,14 @@ export const Check = /* @__PURE__ */ createIcon('check', [
 export const ChevronDown = /* @__PURE__ */ createIcon('chevron-down', [
     ['path', { d: 'm6 9 6 6 6-6' }],
 ]);
+export const ChevronFirst = /* @__PURE__ */ createIcon('chevron-first', [
+    ['path', { d: 'm17 18-6-6 6-6' }],
+    ['path', { d: 'M7 6v12' }],
+]);
+export const ChevronLast = /* @__PURE__ */ createIcon('chevron-last', [
+    ['path', { d: 'm7 18 6-6-6-6' }],
+    ['path', { d: 'M17 6v12' }],
+]);
 export const ChevronLeft = /* @__PURE__ */ createIcon('chevron-left', [
     ['path', { d: 'm15 18-6-6 6-6' }],
 ]);
@@ -65,6 +73,11 @@ 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 Ellipsis = /* @__PURE__ */ createIcon('ellipsis', [
+    ['circle', { cx: '12', cy: '12', r: '1' }],
+    ['circle', { cx: '19', cy: '12', r: '1' }],
+    ['circle', { cx: '5', cy: '12', r: '1' }],
+]);
 export const Eye = /* @__PURE__ */ createIcon('eye', [
     [
         'path',

package/package.json

@@ -1,69 +1,69 @@
-{
-  "name": "@central-ui/react",
-  "version": "0.3.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",
-    "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"
-  }
-}
+{
+  "name": "@central-ui/react",
+  "version": "0.5.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-pagination.css

@@ -0,0 +1,55 @@
+/* pagination */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='pagination-container']),
+    &:where([data-component='pagination-pagelist']) {
+      @apply flex w-fit items-center gap-1;
+    }
+
+    &:where([data-component='pagination-firstbutton']),
+    &:where([data-component='pagination-previousbutton']),
+    &:where([data-component='pagination-nextbutton']),
+    &:where([data-component='pagination-lastbutton']),
+    &:where([data-component='pagination-page'])[data-type='page'] {
+      @apply flex h-7 min-w-7 shrink-0 cursor-pointer items-center justify-center rounded-full px-2 text-[0.8rem] font-medium tabular-nums outline-none select-none focus-visible:outline-2 focus-visible:outline-blue-500 enabled:active:scale-97 transition-[background-color,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;
+      }
+      &[data-selected] {
+        @apply bg-neutral-950 text-white hover:bg-black focus-visible:bg-black active:bg-black;
+      }
+    }
+
+    &:where([data-component='pagination-firstbutton']),
+    &:where([data-component='pagination-previousbutton']),
+    &:where([data-component='pagination-nextbutton']),
+    &:where([data-component='pagination-lastbutton']) {
+      /* Roomy padding for text; the icon's negative margins below pull an icon-only button back to an exact square */
+      @apply gap-2.5 px-3;
+    }
+
+    &:where([data-component='pagination-page'])[data-type='ellipsis'] {
+      @apply flex h-7 min-w-7 shrink-0 items-center justify-center text-neutral-500;
+    }
+
+    &:where([data-component='pagination-firstbuttonicon']),
+    &:where([data-component='pagination-previousbuttonicon']),
+    &:where([data-component='pagination-nextbuttonicon']),
+    &:where([data-component='pagination-lastbuttonicon']),
+    &:where([data-component='pagination-pageicon']) {
+      @apply h-4 w-fit shrink-0;
+    }
+
+    /* Arrows point the reading direction, and their negative margins keep icon-only buttons square */
+    &:where([data-component='pagination-firstbuttonicon']),
+    &:where([data-component='pagination-previousbuttonicon']),
+    &:where([data-component='pagination-nextbuttonicon']),
+    &:where([data-component='pagination-lastbuttonicon']) {
+      @apply -mx-1.5 rtl:-scale-x-100;
+    }
+  }
+}