@moduix/react 1.1.0

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

@@ -0,0 +1,93 @@
+import { ChevronDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { Button } from "../button/Button.js";
+import { Menu } from "../menu/Menu.js";
+import SplitButton_module_default from "./SplitButton.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { createContext, forwardRef, useContext } from "react";
+//#region src/components/split-button/SplitButton.tsx
+const SplitButtonContext = createContext(null);
+function useSplitButtonContext(componentName) {
+	const context = useContext(SplitButtonContext);
+	if (!context) throw new Error(`${componentName} must be used within SplitButton.Root.`);
+	return context;
+}
+const SplitButtonRoot = forwardRef(function SplitButtonRoot({ children, className, positioning, size = "md", variant = "default", ...props }, ref) {
+	return /* @__PURE__ */ jsx(SplitButtonContext.Provider, {
+		value: {
+			size,
+			variant
+		},
+		children: /* @__PURE__ */ jsx(Menu.Root, {
+			positioning: {
+				placement: "bottom-end",
+				gutter: 4,
+				...positioning
+			},
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				ref,
+				"data-scope": "split-button",
+				"data-part": "root",
+				"data-slot": "split-button-root",
+				className: clsx(SplitButton_module_default.root, normalizeClassName(className)),
+				children
+			})
+		})
+	});
+});
+const SplitButtonAction = forwardRef(function SplitButtonAction({ className, size, variant, ...props }, ref) {
+	const context = useSplitButtonContext("SplitButton.Action");
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		"data-slot": "split-button-action",
+		size: size ?? context.size,
+		variant: variant ?? context.variant,
+		className: clsx(SplitButton_module_default.action, normalizeClassName(className)),
+		...props
+	});
+});
+const SplitButtonTrigger = forwardRef(function SplitButtonTrigger({ asChild, children, className, size, variant, "aria-label": ariaLabel, ...props }, ref) {
+	const context = useSplitButtonContext("SplitButton.Trigger");
+	const isIconOnly = children == null;
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		ref,
+		asChild: true,
+		"data-slot": "split-button-trigger",
+		"aria-label": isIconOnly ? ariaLabel ?? "More actions" : ariaLabel,
+		className: clsx(SplitButton_module_default.trigger, normalizeClassName(className)),
+		...props,
+		children: /* @__PURE__ */ jsx(Button, {
+			asChild,
+			size: size ?? context.size,
+			variant: variant ?? context.variant,
+			children: children ?? /* @__PURE__ */ jsx(ChevronDownIcon, {})
+		})
+	});
+});
+const SplitButtonPositioner = forwardRef(function SplitButtonPositioner({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.Positioner, {
+		ref,
+		"data-slot": "split-button-positioner",
+		className: normalizeClassName(className),
+		...props
+	});
+});
+const SplitButtonContent = forwardRef(function SplitButtonContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Menu.Content, {
+		ref,
+		"data-slot": "split-button-content",
+		className: normalizeClassName(className),
+		...props
+	});
+});
+const SplitButton = Object.assign(SplitButtonRoot, {
+	Root: SplitButtonRoot,
+	Action: SplitButtonAction,
+	Trigger: SplitButtonTrigger,
+	Positioner: SplitButtonPositioner,
+	Content: SplitButtonContent
+});
+//#endregion
+export { SplitButton };

package/dist/components/split-button/SplitButton.module.js

@@ -0,0 +1,9 @@
+import './SplitButton.css';
+//#region src/components/split-button/SplitButton.module.css
+var SplitButton_module_default = {
+	"action": "A0sAVa_action",
+	"root": "A0sAVa_root",
+	"trigger": "A0sAVa_trigger"
+};
+//#endregion
+export { SplitButton_module_default as default };

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

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

package/dist/components/splitter/Splitter.css

@@ -0,0 +1,170 @@
+@layer ui.components {
+  .o8nV3W_root {
+    box-sizing: border-box;
+    min-width: var(--splitter-min-width, 0);
+    min-height: var(--splitter-min-height, 0);
+    border: var(--splitter-border-width, var(--border-width-sm)) solid
+      var(--splitter-border-color, var(--color-border));
+    border-radius: var(--splitter-radius, var(--radius-md));
+    background-color: var(--splitter-bg, var(--color-card));
+    color: var(--splitter-color, var(--color-foreground));
+    box-shadow: var(--splitter-shadow, var(--shadow-sm));
+    display: flex;
+    position: relative;
+    overflow: hidden;
+
+    &[data-orientation="vertical"] {
+      flex-direction: column;
+    }
+
+    &[data-dragging] {
+      cursor: col-resize;
+
+      &[data-orientation="vertical"] {
+        cursor: row-resize;
+      }
+    }
+  }
+
+  .o8nV3W_panel {
+    box-sizing: border-box;
+    min-width: var(--splitter-panel-min-width, 0);
+    min-height: var(--splitter-panel-min-height, 12.5rem);
+    padding: var(--splitter-panel-padding, var(--spacing-4));
+    border: var(--splitter-panel-border-width, 0) solid
+      var(--splitter-panel-border-color, var(--color-border));
+    border-radius: var(--splitter-panel-radius, 0);
+    background-color: var(--splitter-panel-bg, var(--color-card));
+    color: var(--splitter-panel-color, var(--color-card-foreground));
+    box-shadow: var(--splitter-panel-shadow, none);
+    overflow: auto;
+
+    &[data-dragging] {
+      user-select: none;
+    }
+  }
+
+  .o8nV3W_root[data-orientation="vertical"] > .o8nV3W_panel {
+    min-height: var(--splitter-panel-min-height-vertical, 0);
+  }
+
+  .o8nV3W_resizeTrigger {
+    z-index: 1;
+    box-sizing: border-box;
+    flex: 0 0 var(--splitter-resize-trigger-line-size, 1px);
+    width: var(--splitter-resize-trigger-line-size, 1px);
+    min-width: var(--splitter-resize-trigger-line-size, 1px);
+    background-color: var(--splitter-resize-trigger-bg, transparent);
+    appearance: none;
+    cursor: col-resize;
+    touch-action: none;
+    transition: opacity var(--splitter-transition, var(--transition-default));
+    border: 0;
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: flex;
+    position: relative;
+
+    &:before {
+      width: var(--splitter-resize-trigger-line-size, 1px);
+      height: var(--splitter-resize-trigger-line-length, 100%);
+      border-radius: var(--splitter-resize-trigger-line-radius, var(--radius-full));
+      background-color: var(--splitter-resize-trigger-line-color, var(--color-border));
+      content: "";
+      transition: background-color var(--splitter-transition, var(--transition-default)),
+        opacity var(--splitter-transition, var(--transition-default));
+      position: absolute;
+    }
+
+    &:after {
+      z-index: 1;
+      width: var(--splitter-resize-trigger-size, .625rem);
+      content: "";
+      height: 100%;
+      position: absolute;
+    }
+
+    &[data-orientation="vertical"] {
+      width: 100%;
+      min-width: 0;
+      height: var(--splitter-resize-trigger-line-size, 1px);
+      min-height: var(--splitter-resize-trigger-line-size, 1px);
+      cursor: row-resize;
+
+      &:before {
+        width: var(--splitter-resize-trigger-line-length, 100%);
+        height: var(--splitter-resize-trigger-line-size, 1px);
+      }
+
+      &:after {
+        width: 100%;
+        height: var(--splitter-resize-trigger-size, .625rem);
+      }
+    }
+
+    &[data-focus] {
+      &:before {
+        background-color: var(--splitter-resize-trigger-line-color-focus, var(--splitter-resize-trigger-line-color, var(--color-border)));
+      }
+    }
+
+    &[data-dragging] {
+      &:before {
+        background-color: var(--splitter-resize-trigger-line-color-dragging, var(--splitter-resize-trigger-line-color, var(--color-border)));
+      }
+    }
+
+    &[data-disabled] {
+      cursor: default;
+      opacity: var(--splitter-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  @media (hover: hover) {
+    .o8nV3W_resizeTrigger:hover:not(:disabled, [data-disabled]) {
+      &:before {
+        background-color: var(--splitter-resize-trigger-line-color-hover, var(--splitter-resize-trigger-line-color, var(--color-border)));
+      }
+    }
+  }
+
+  .o8nV3W_resizeTriggerIndicator {
+    z-index: 2;
+    box-sizing: border-box;
+    width: var(--splitter-resize-trigger-indicator-width, .375rem);
+    height: var(--splitter-resize-trigger-indicator-height, 1.5rem);
+    border: var(--splitter-resize-trigger-indicator-border-width, var(--border-width-sm)) solid
+      var(--splitter-resize-trigger-indicator-border-color, var(--color-border));
+    border-radius: var(--splitter-resize-trigger-indicator-radius, var(--radius-full));
+    background-color: var(--splitter-resize-trigger-indicator-bg, var(--color-background));
+    box-shadow: var(--splitter-resize-trigger-indicator-shadow, var(--shadow-sm));
+    pointer-events: none;
+    transition: border-color var(--splitter-transition, var(--transition-default)),
+      box-shadow var(--splitter-transition, var(--transition-default));
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+
+    &[data-orientation="vertical"] {
+      width: var(--splitter-resize-trigger-indicator-height, 1.5rem);
+      height: var(--splitter-resize-trigger-indicator-width, .375rem);
+    }
+  }
+
+  .o8nV3W_resizeTrigger[data-dragging] .o8nV3W_resizeTriggerIndicator {
+    border-color: var(--splitter-resize-trigger-indicator-border-color-dragging, var(--splitter-resize-trigger-indicator-border-color, var(--color-border)));
+    background-color: var(--splitter-resize-trigger-indicator-bg-dragging, var(--splitter-resize-trigger-indicator-bg, var(--color-background)));
+    box-shadow: var(--splitter-resize-trigger-indicator-shadow-dragging, var(--splitter-resize-trigger-indicator-shadow, var(--shadow-sm)));
+  }
+
+  .o8nV3W_resizeTrigger[data-focus]:not([data-dragging]) .o8nV3W_resizeTriggerIndicator {
+    box-shadow: var(--splitter-resize-trigger-indicator-shadow-focus, var(--splitter-resize-trigger-indicator-shadow, var(--shadow-sm)));
+  }
+
+  .o8nV3W_resizeTrigger[data-disabled] .o8nV3W_resizeTriggerIndicator {
+    visibility: hidden;
+  }
+}

package/dist/components/splitter/Splitter.d.ts

@@ -0,0 +1,12 @@
+import { Splitter } from "@ark-ui/react/splitter";
+
+//#region src/components/splitter/Splitter.d.ts
+declare const Splitter$1: import("react").ForwardRefExoticComponent<Omit<Splitter.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<Splitter.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<Splitter.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Panel: import("react").ForwardRefExoticComponent<Omit<Splitter.PanelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ResizeTrigger: import("react").ForwardRefExoticComponent<Omit<Splitter.ResizeTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  ResizeTriggerIndicator: import("react").ForwardRefExoticComponent<Omit<Splitter.ResizeTriggerIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Splitter$1 as Splitter };

package/dist/components/splitter/Splitter.js

@@ -0,0 +1,68 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Splitter_module_default from "./Splitter.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Splitter } from "@ark-ui/react/splitter";
+//#region src/components/splitter/Splitter.tsx
+const rootStyle = {
+	width: "var(--splitter-width, 100%)",
+	height: "var(--splitter-height, 28rem)"
+};
+const SplitterRoot = forwardRef(function SplitterRoot({ className, style, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Splitter.Root, {
+		ref,
+		"data-slot": "splitter-root",
+		className: clsx(Splitter_module_default.root, normalizeClassName(className)),
+		style: {
+			...rootStyle,
+			...style
+		},
+		...props
+	});
+});
+const SplitterRootProvider = forwardRef(function SplitterRootProvider({ className, style, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Splitter.RootProvider, {
+		ref,
+		"data-slot": "splitter-root-provider",
+		className: clsx(Splitter_module_default.root, normalizeClassName(className)),
+		style: {
+			...rootStyle,
+			...style
+		},
+		...props
+	});
+});
+const SplitterPanel = forwardRef(function SplitterPanel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Splitter.Panel, {
+		ref,
+		"data-slot": "splitter-panel",
+		className: clsx(Splitter_module_default.panel, normalizeClassName(className)),
+		...props
+	});
+});
+const SplitterResizeTrigger = forwardRef(function SplitterResizeTrigger({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Splitter.ResizeTrigger, {
+		ref,
+		"data-slot": "splitter-resize-trigger",
+		className: clsx(Splitter_module_default.resizeTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+const SplitterResizeTriggerIndicator = forwardRef(function SplitterResizeTriggerIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Splitter.ResizeTriggerIndicator, {
+		ref,
+		"data-slot": "splitter-resize-trigger-indicator",
+		className: clsx(Splitter_module_default.resizeTriggerIndicator, normalizeClassName(className)),
+		...props
+	});
+});
+const Splitter$1 = Object.assign(SplitterRoot, {
+	Root: SplitterRoot,
+	RootProvider: SplitterRootProvider,
+	Panel: SplitterPanel,
+	ResizeTrigger: SplitterResizeTrigger,
+	ResizeTriggerIndicator: SplitterResizeTriggerIndicator
+});
+//#endregion
+export { Splitter$1 as Splitter };

package/dist/components/splitter/Splitter.module.js

@@ -0,0 +1,10 @@
+import './Splitter.css';
+//#region src/components/splitter/Splitter.module.css
+var Splitter_module_default = {
+	"panel": "o8nV3W_panel",
+	"resizeTrigger": "o8nV3W_resizeTrigger",
+	"resizeTriggerIndicator": "o8nV3W_resizeTriggerIndicator",
+	"root": "o8nV3W_root"
+};
+//#endregion
+export { Splitter_module_default as default };

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

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

package/dist/components/stack/Stack.css

@@ -0,0 +1,13 @@
+@layer ui.components {
+  ._1ZYGLa_root {
+    flex: var(--stack-flex, initial);
+    flex-direction: var(--stack-direction-mobile, column);
+    display: flex;
+  }
+
+  @media (width >= 640px) {
+    ._1ZYGLa_root {
+      flex-direction: var(--stack-direction-desktop, var(--stack-direction-mobile, column));
+    }
+  }
+}

package/dist/components/stack/Stack.d.ts

@@ -0,0 +1,31 @@
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/stack/Stack.d.ts
+type StackDirection = 'row' | 'column';
+declare const Stack: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+  direction?: StackDirection | {
+    mobile?: StackDirection;
+    desktop?: StackDirection;
+  };
+  gap?: number | string;
+  align?: CSSProperties["alignItems"];
+  justify?: CSSProperties["justifyContent"];
+  wrap?: CSSProperties["flexWrap"];
+  fill?: boolean;
+  separator?: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    direction?: StackDirection | {
+      mobile?: StackDirection;
+      desktop?: StackDirection;
+    };
+    gap?: number | string;
+    align?: CSSProperties["alignItems"];
+    justify?: CSSProperties["justifyContent"];
+    wrap?: CSSProperties["flexWrap"];
+    fill?: boolean;
+    separator?: ReactNode;
+  } & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Stack };

package/dist/components/stack/Stack.js

@@ -0,0 +1,36 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Stack_module_default from "./Stack.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { clsx } from "clsx";
+import { Children, Fragment as Fragment$1, forwardRef } from "react";
+//#region src/components/stack/Stack.tsx
+const StackRoot = forwardRef(function StackRoot({ asChild, children, className, style, direction, gap, align, justify, wrap, fill, separator, ...props }, ref) {
+	const mobileDirection = typeof direction === "string" ? direction : direction?.mobile ?? direction?.desktop;
+	const desktopDirection = typeof direction === "string" ? direction : direction?.desktop ?? direction?.mobile;
+	const childArray = separator == null ? void 0 : Children.toArray(children);
+	const content = childArray == null ? children : childArray.map((child, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [index > 0 ? separator : null, child] }, index));
+	return /* @__PURE__ */ jsx(ark.div, {
+		...props,
+		ref,
+		asChild,
+		"data-scope": "stack",
+		"data-part": "root",
+		"data-slot": "stack-root",
+		className: clsx(Stack_module_default.root, normalizeClassName(className)),
+		style: {
+			"--stack-direction-desktop": desktopDirection,
+			"--stack-direction-mobile": mobileDirection,
+			"--stack-flex": fill == null ? void 0 : fill ? "1 1 0" : "initial",
+			gap,
+			alignItems: align,
+			justifyContent: justify,
+			flexWrap: wrap,
+			...style
+		},
+		children: content
+	});
+});
+const Stack = Object.assign(StackRoot, { Root: StackRoot });
+//#endregion
+export { Stack };

package/dist/components/stack/Stack.module.js

@@ -0,0 +1,5 @@
+import './Stack.css';
+//#region src/components/stack/Stack.module.css
+var Stack_module_default = { "root": "_1ZYGLa_root" };
+//#endregion
+export { Stack_module_default as default };

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

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