@moduix/react 1.1.0

package/dist/components/skeleton/Skeleton.js

@@ -0,0 +1,32 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Skeleton_module_default from "./Skeleton.module.js";
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+//#region src/components/skeleton/Skeleton.tsx
+const toCssValue = (value) => typeof value === "number" ? `${value}px` : value;
+const SkeletonRoot = forwardRef(function SkeletonRoot({ "aria-hidden": ariaHidden, asChild, borderRadius, boxSize, className, height, loading = true, style, variant = "pulse", width, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.div, {
+		ref,
+		asChild,
+		"data-scope": "skeleton",
+		"data-part": "root",
+		"data-slot": "skeleton-root",
+		"data-state": loading ? "loading" : "loaded",
+		"data-loading": loading ? "" : void 0,
+		"data-variant": variant,
+		"aria-hidden": ariaHidden ?? (loading ? true : void 0),
+		className: clsx(Skeleton_module_default.root, normalizeClassName(className)),
+		style: {
+			width: toCssValue(width ?? boxSize),
+			height: toCssValue(height ?? boxSize),
+			borderRadius: toCssValue(borderRadius),
+			...style
+		},
+		...props
+	});
+});
+const Skeleton = Object.assign(SkeletonRoot, { Root: SkeletonRoot });
+//#endregion
+export { Skeleton };

package/dist/components/skeleton/Skeleton.module.js

@@ -0,0 +1,5 @@
+import './Skeleton.css';
+//#region src/components/skeleton/Skeleton.module.css
+var Skeleton_module_default = { "root": "_9pBda_root" };
+//#endregion
+export { Skeleton_module_default as default };

package/dist/components/slider/Slider.css

@@ -0,0 +1,167 @@
+@layer ui.components {
+  .qB-XUW_root {
+    box-sizing: border-box;
+    gap: var(--slider-gap, .5rem);
+    width: var(--slider-width, 12rem);
+    color: var(--slider-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+
+    &[data-orientation="vertical"] {
+      width: var(--slider-width-vertical, max-content);
+      height: var(--slider-height, 12rem);
+      align-items: center;
+    }
+
+    &[data-disabled] {
+      opacity: var(--slider-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .qB-XUW_label {
+    color: var(--slider-label-color, var(--slider-color, var(--color-foreground)));
+    font-size: var(--slider-label-font-size, var(--text-sm));
+    font-weight: var(--slider-label-font-weight, var(--weight-regular));
+    line-height: var(--slider-label-line-height, var(--line-height-text-sm));
+    user-select: none;
+  }
+
+  .qB-XUW_valueText {
+    color: var(--slider-value-text-color, var(--slider-color, var(--color-foreground)));
+    font-size: var(--slider-value-text-font-size, var(--text-sm));
+    font-weight: var(--slider-value-text-font-weight, var(--weight-regular));
+    line-height: var(--slider-value-text-line-height, var(--line-height-text-sm));
+    text-align: right;
+  }
+
+  .qB-XUW_control {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--slider-control-size, 1.25rem);
+    touch-action: none;
+    user-select: none;
+    cursor: pointer;
+    align-items: center;
+    display: flex;
+    position: relative;
+
+    &[data-orientation="vertical"] {
+      width: var(--slider-control-size, 1.25rem);
+      flex-direction: column;
+      height: 100%;
+      min-height: 0;
+    }
+
+    &[data-disabled] {
+      cursor: default;
+    }
+  }
+
+  .qB-XUW_track {
+    width: 100%;
+    height: var(--slider-track-size, .375rem);
+    border-radius: var(--slider-track-radius, var(--radius-full));
+    background-color: var(--slider-track-bg, var(--color-muted));
+    box-shadow: inset 0 0 0 var(--slider-track-border-width, var(--border-width-sm))
+      var(--slider-track-border-color, var(--color-border));
+    user-select: none;
+    flex: 1;
+    overflow: hidden;
+
+    &[data-orientation="vertical"] {
+      width: var(--slider-track-size, .375rem);
+      height: 100%;
+    }
+  }
+
+  .qB-XUW_range {
+    border-radius: var(--slider-range-radius, inherit);
+    background-color: var(--slider-range-bg, var(--color-primary));
+    height: 100%;
+
+    &[data-orientation="vertical"] {
+      width: 100%;
+    }
+  }
+
+  .qB-XUW_thumb {
+    box-sizing: border-box;
+    width: var(--slider-thumb-size, 1rem);
+    height: var(--slider-thumb-size, 1rem);
+    border: var(--slider-thumb-border-width, var(--border-width-sm)) solid
+      var(--slider-thumb-border-color, var(--color-border));
+    border-radius: var(--slider-thumb-radius, var(--radius-full));
+    background-color: var(--slider-thumb-bg, var(--color-background));
+    box-shadow: var(--slider-thumb-shadow, var(--shadow-sm));
+    user-select: none;
+    transition: border-color var(--slider-transition, var(--transition-default)),
+      background-color var(--slider-transition, var(--transition-default)),
+      box-shadow var(--slider-transition, var(--transition-default));
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+
+    &:focus-visible {
+      border-color: var(--slider-focus-ring-color, var(--color-ring));
+      box-shadow: 0 0 0 var(--border-width-sm) var(--slider-focus-ring-color, var(--color-ring));
+    }
+
+    &[data-dragging] {
+      box-shadow: var(--slider-thumb-shadow-dragging, var(--shadow-md));
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+    }
+  }
+
+  .qB-XUW_draggingIndicator {
+    top: calc(-1 * var(--spacing-8));
+    padding: var(--spacing-1) var(--spacing-2);
+    border-radius: var(--slider-dragging-indicator-radius, var(--radius-sm));
+    background-color: var(--slider-dragging-indicator-bg, var(--color-foreground));
+    color: var(--slider-dragging-indicator-color, var(--color-background));
+    font-size: var(--slider-dragging-indicator-font-size, var(--text-xs));
+    font-weight: var(--slider-dragging-indicator-font-weight, var(--weight-medium));
+    line-height: var(--slider-dragging-indicator-line-height, 1);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  .qB-XUW_markerGroup {
+    margin-top: var(--slider-marker-group-margin-top, var(--spacing-2));
+    justify-content: space-between;
+    display: flex;
+
+    &[data-orientation="vertical"] {
+      height: 100%;
+      margin-top: 0;
+      flex-direction: column;
+      margin-inline-start: var(--slider-marker-group-margin-inline-start, var(--spacing-2));
+    }
+  }
+
+  .qB-XUW_marker {
+    color: var(--slider-marker-color, var(--color-muted-foreground));
+    font-size: var(--slider-marker-font-size, var(--text-xs));
+    line-height: var(--slider-marker-line-height, var(--line-height-text-xs));
+    position: relative;
+
+    &:before {
+      width: var(--slider-marker-dot-size, .25rem);
+      height: var(--slider-marker-dot-size, .25rem);
+      border-radius: var(--radius-full);
+      background-color: var(--slider-marker-dot-bg, var(--color-border));
+      content: "";
+      position: absolute;
+      inset-block-start: calc(-1 * var(--spacing-2));
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+
+    &:is([data-state="under-value"], [data-state="at-value"]):before {
+      background-color: var(--slider-marker-dot-bg-active, var(--slider-range-bg, var(--color-primary)));
+    }
+  }
+}

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,19 @@
+import { Slider } from "@ark-ui/react/slider";
+
+//#region src/components/slider/Slider.d.ts
+declare const Slider$1: import("react").ForwardRefExoticComponent<Omit<Slider.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<Slider.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<Slider.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<Slider.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  ValueText: import("react").ForwardRefExoticComponent<Omit<Slider.ValueTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Control: import("react").ForwardRefExoticComponent<Omit<Slider.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Track: import("react").ForwardRefExoticComponent<Omit<Slider.TrackProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Range: import("react").ForwardRefExoticComponent<Omit<Slider.RangeProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Thumb: import("react").ForwardRefExoticComponent<Omit<Slider.ThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  HiddenInput: import("react").ForwardRefExoticComponent<Omit<Slider.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  MarkerGroup: import("react").ForwardRefExoticComponent<Omit<Slider.MarkerGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Marker: import("react").ForwardRefExoticComponent<Omit<Slider.MarkerProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  DraggingIndicator: import("react").ForwardRefExoticComponent<Omit<Slider.DraggingIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { Slider$1 as Slider };

package/dist/components/slider/Slider.js

@@ -0,0 +1,119 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Slider_module_default from "./Slider.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Slider } from "@ark-ui/react/slider";
+//#region src/components/slider/Slider.tsx
+const SliderRoot = forwardRef(function SliderRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.Root, {
+		ref,
+		"data-slot": "slider-root",
+		className: clsx(Slider_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const SliderRootProvider = forwardRef(function SliderRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.RootProvider, {
+		ref,
+		"data-slot": "slider-root-provider",
+		className: clsx(Slider_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const SliderLabel = forwardRef(function SliderLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.Label, {
+		ref,
+		"data-slot": "slider-label",
+		className: clsx(Slider_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const SliderValueText = forwardRef(function SliderValueText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.ValueText, {
+		ref,
+		"data-slot": "slider-value-text",
+		className: clsx(Slider_module_default.valueText, normalizeClassName(className)),
+		...props
+	});
+});
+const SliderControl = forwardRef(function SliderControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.Control, {
+		ref,
+		"data-slot": "slider-control",
+		className: clsx(Slider_module_default.control, normalizeClassName(className)),
+		...props
+	});
+});
+const SliderTrack = forwardRef(function SliderTrack({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.Track, {
+		ref,
+		"data-slot": "slider-track",
+		className: clsx(Slider_module_default.track, normalizeClassName(className)),
+		...props
+	});
+});
+const SliderRange = forwardRef(function SliderRange({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.Range, {
+		ref,
+		"data-slot": "slider-range",
+		className: clsx(Slider_module_default.range, normalizeClassName(className)),
+		...props
+	});
+});
+const SliderThumb = forwardRef(function SliderThumb({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.Thumb, {
+		ref,
+		"data-slot": "slider-thumb",
+		className: clsx(Slider_module_default.thumb, normalizeClassName(className)),
+		...props
+	});
+});
+const SliderHiddenInput = forwardRef(function SliderHiddenInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.HiddenInput, {
+		ref,
+		"data-slot": "slider-hidden-input",
+		className: normalizeClassName(className),
+		...props
+	});
+});
+const SliderMarkerGroup = forwardRef(function SliderMarkerGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.MarkerGroup, {
+		ref,
+		"data-slot": "slider-marker-group",
+		className: clsx(Slider_module_default.markerGroup, normalizeClassName(className)),
+		...props
+	});
+});
+const SliderMarker = forwardRef(function SliderMarker({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.Marker, {
+		ref,
+		"data-slot": "slider-marker",
+		className: clsx(Slider_module_default.marker, normalizeClassName(className)),
+		...props
+	});
+});
+const SliderDraggingIndicator = forwardRef(function SliderDraggingIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider.DraggingIndicator, {
+		ref,
+		"data-slot": "slider-dragging-indicator",
+		className: clsx(Slider_module_default.draggingIndicator, normalizeClassName(className)),
+		...props
+	});
+});
+const Slider$1 = Object.assign(SliderRoot, {
+	Root: SliderRoot,
+	RootProvider: SliderRootProvider,
+	Label: SliderLabel,
+	ValueText: SliderValueText,
+	Control: SliderControl,
+	Track: SliderTrack,
+	Range: SliderRange,
+	Thumb: SliderThumb,
+	HiddenInput: SliderHiddenInput,
+	MarkerGroup: SliderMarkerGroup,
+	Marker: SliderMarker,
+	DraggingIndicator: SliderDraggingIndicator
+});
+//#endregion
+export { Slider$1 as Slider };

package/dist/components/slider/Slider.module.js

@@ -0,0 +1,16 @@
+import './Slider.css';
+//#region src/components/slider/Slider.module.css
+var Slider_module_default = {
+	"control": "qB-XUW_control",
+	"draggingIndicator": "qB-XUW_draggingIndicator",
+	"label": "qB-XUW_label",
+	"marker": "qB-XUW_marker",
+	"markerGroup": "qB-XUW_markerGroup",
+	"range": "qB-XUW_range",
+	"root": "qB-XUW_root",
+	"thumb": "qB-XUW_thumb",
+	"track": "qB-XUW_track",
+	"valueText": "qB-XUW_valueText"
+};
+//#endregion
+export { Slider_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Slider } from "./Slider.js";
+export { Slider };

package/dist/components/spinner/Spinner.css

@@ -0,0 +1,60 @@
+@layer ui.components {
+  .mDsGJa_root, [data-scope="spinner"][data-part="root"] {
+    --_spinner-size: var(--spinner-size, var(--spinner-size-md, 1.25rem));
+    width: var(--_spinner-size);
+    height: var(--_spinner-size);
+    color: var(--spinner-color, currentColor);
+    vertical-align: middle;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .mDsGJa_indicator, [data-scope="spinner"][data-part="indicator"] {
+    width: 100%;
+    height: 100%;
+    animation: var(--spinner-animation, var(--animation-spin));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .mDsGJa_ring, [data-scope="spinner"][data-part="ring"] {
+    box-sizing: border-box;
+    border: var(--spinner-ring-border-width, var(--border-width-md)) solid
+      var(--spinner-ring-track-color, color-mix(in oklab, currentColor 22%, transparent));
+    border-block-start-color: var(--spinner-color, currentColor);
+    border-radius: var(--spinner-radius, var(--radius-full));
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .mDsGJa_indicator :where(svg), [data-scope="spinner"][data-part="indicator"] :where(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .mDsGJa_root[data-size="xs"], [data-scope="spinner"][data-part="root"][data-size="xs"] {
+    --_spinner-size: var(--spinner-size, var(--spinner-size-xs, .75rem));
+  }
+
+  .mDsGJa_root[data-size="sm"], [data-scope="spinner"][data-part="root"][data-size="sm"] {
+    --_spinner-size: var(--spinner-size, var(--spinner-size-sm, 1rem));
+  }
+
+  .mDsGJa_root[data-size="lg"], [data-scope="spinner"][data-part="root"][data-size="lg"] {
+    --_spinner-size: var(--spinner-size, var(--spinner-size-lg, 1.75rem));
+  }
+
+  .mDsGJa_root[data-size="xl"], [data-scope="spinner"][data-part="root"][data-size="xl"] {
+    --_spinner-size: var(--spinner-size, var(--spinner-size-xl, 2.25rem));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .mDsGJa_indicator, [data-scope="spinner"][data-part="indicator"] {
+      animation: none;
+    }
+  }
+}

package/dist/components/spinner/Spinner.d.ts

@@ -0,0 +1,12 @@
+//#region src/components/spinner/Spinner.d.ts
+declare const Spinner: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  decorative?: boolean;
+} & import("react").RefAttributes<HTMLSpanElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    decorative?: boolean;
+  } & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { Spinner };

package/dist/components/spinner/Spinner.js

@@ -0,0 +1,40 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Spinner_module_default from "./Spinner.module.js";
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+//#region src/components/spinner/Spinner.tsx
+const SpinnerRoot = forwardRef(function SpinnerRoot({ asChild, children, className, decorative = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, size = "md", ...props }, ref) {
+	const accessibleLabel = decorative ? void 0 : ariaLabel ?? (ariaLabelledBy ? void 0 : "Loading");
+	return /* @__PURE__ */ jsx(ark.span, {
+		ref,
+		asChild,
+		"data-scope": "spinner",
+		"data-part": "root",
+		"data-slot": "spinner-root",
+		"data-size": size,
+		role: decorative ? "presentation" : "status",
+		"aria-hidden": decorative ? true : void 0,
+		"aria-label": accessibleLabel,
+		"aria-labelledby": decorative ? void 0 : ariaLabelledBy,
+		className: clsx(Spinner_module_default.root, normalizeClassName(className)),
+		...props,
+		children: asChild ? children : /* @__PURE__ */ jsx("span", {
+			"data-scope": "spinner",
+			"data-part": "indicator",
+			"data-slot": "spinner-indicator",
+			className: Spinner_module_default.indicator,
+			"aria-hidden": "true",
+			children: children ?? /* @__PURE__ */ jsx("span", {
+				"data-scope": "spinner",
+				"data-part": "ring",
+				"data-slot": "spinner-ring",
+				className: Spinner_module_default.ring
+			})
+		})
+	});
+});
+const Spinner = Object.assign(SpinnerRoot, { Root: SpinnerRoot });
+//#endregion
+export { Spinner };

package/dist/components/spinner/Spinner.module.js

@@ -0,0 +1,9 @@
+import './Spinner.css';
+//#region src/components/spinner/Spinner.module.css
+var Spinner_module_default = {
+	"indicator": "mDsGJa_indicator",
+	"ring": "mDsGJa_ring",
+	"root": "mDsGJa_root"
+};
+//#endregion
+export { Spinner_module_default as default };

package/dist/components/split-button/SplitButton.css

@@ -0,0 +1,51 @@
+@layer ui.components {
+  .A0sAVa_root {
+    align-items: stretch;
+    display: inline-flex;
+  }
+
+  .A0sAVa_action {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .A0sAVa_trigger {
+    min-width: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    margin-inline-start: calc(var(--button-border-width, var(--border-width-sm)) * -1);
+    padding-inline: .75rem;
+    position: relative;
+  }
+
+  .A0sAVa_trigger:before {
+    content: "";
+    opacity: .16;
+    pointer-events: none;
+    background-color: currentColor;
+    width: 1px;
+    position: absolute;
+    inset-block: .375rem;
+    inset-inline-start: 0;
+  }
+
+  .A0sAVa_trigger[data-variant="outline"]:before, .A0sAVa_trigger[data-variant="destructive-outline"]:before {
+    opacity: 0;
+  }
+
+  .A0sAVa_trigger[data-size="xs"] {
+    padding-inline: .5rem;
+  }
+
+  .A0sAVa_trigger[data-size="sm"] {
+    padding-inline: .625rem;
+  }
+
+  .A0sAVa_trigger[data-size="lg"] {
+    padding-inline: .875rem;
+  }
+
+  .A0sAVa_trigger[data-size="xl"] {
+    padding-inline: 1rem;
+  }
+}

package/dist/components/split-button/SplitButton.d.ts

@@ -0,0 +1,36 @@
+import { Button } from "../button/Button.js";
+import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
+import { Menu } from "../menu/Menu.js";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/components/split-button/SplitButton.d.ts
+type ButtonProps = ComponentProps<typeof Button>;
+type SplitButtonVariant = Exclude<NonNullable<ButtonProps['variant']>, 'link'>;
+type SplitButtonSize = Exclude<NonNullable<ButtonProps['size']>, 'icon-sm' | 'icon-md' | 'icon-lg'>;
+type SplitButtonActionProps = Omit<ButtonProps, 'size' | 'variant'> & {
+  size?: SplitButtonSize;
+  variant?: SplitButtonVariant;
+};
+type SplitButtonTriggerProps = ComponentProps<typeof Menu.Trigger> & {
+  size?: SplitButtonSize;
+  variant?: SplitButtonVariant;
+};
+declare const SplitButton: import("react").ForwardRefExoticComponent<Omit<import("@ark-ui/react/menu").MenuRootProps & OverlayPortalProps, "children"> & {
+  children?: ReactNode;
+  className?: string;
+  size?: SplitButtonSize;
+  variant?: SplitButtonVariant;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("@ark-ui/react/menu").MenuRootProps & OverlayPortalProps, "children"> & {
+    children?: ReactNode;
+    className?: string;
+    size?: SplitButtonSize;
+    variant?: SplitButtonVariant;
+  } & import("react").RefAttributes<HTMLDivElement>>;
+  Action: import("react").ForwardRefExoticComponent<Omit<SplitButtonActionProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Trigger: import("react").ForwardRefExoticComponent<Omit<SplitButtonTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@ark-ui/react/menu").MenuPositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("@ark-ui/react/menu").MenuContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { SplitButton };