@moduix/react 1.1.0 → 2.0.0

package/dist/components/lightbox/Lightbox.js

@@ -2,10 +2,10 @@ import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Lightbox_module_default from "./Lightbox.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef, useEffect } from "react";
-import { Dialog, useDialogContext } from "@ark-ui/react/dialog";
+import { jsx } from "react/jsx-runtime";
+import { Dialog, useDialog as useDialog$1, useDialogContext as useDialogContext$1 } from "@ark-ui/react/dialog";
 //#region src/components/lightbox/Lightbox.tsx
 const DEFAULT_CLOSE_LABEL = "Close image";
 const preloadedImageSources = /* @__PURE__ */ new Set();
@@ -100,7 +100,7 @@ const LightboxCloseTrigger = forwardRef(function LightboxCloseTrigger({ classNam
 	});
 });
 const LightboxCloseIcon = forwardRef(function LightboxCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_LABEL, ...props }, ref) {
-	const dialog = useDialogContext();
+	const dialog = useDialogContext$1();
 	return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
 		asChild: true,
 		...props,
@@ -115,7 +115,7 @@ const LightboxCloseIcon = forwardRef(function LightboxCloseIcon({ className, chi
 	});
 });
 const LightboxImage = forwardRef(function LightboxImage({ className, closeOnClick = false, onClick, ...props }, ref) {
-	const dialog = useDialogContext();
+	const dialog = useDialogContext$1();
 	const handleClick = (event) => {
 		onClick?.(event);
 		if (closeOnClick && !event.defaultPrevented) dialog.setOpen(false);
@@ -159,7 +159,7 @@ function LightboxFooter({ className, ...props }) {
 	});
 }
 function LightboxBind({ onImageSelect, selector = "img", rootRef, rootSelector }) {
-	const { setOpen } = useDialogContext();
+	const { setOpen } = useDialogContext$1();
 	useEffect(() => {
 		const rootNode = rootRef?.current ?? (rootSelector ? document.querySelector(rootSelector) : null);
 		if (!rootNode) return;
@@ -213,7 +213,9 @@ const Lightbox = Object.assign(LightboxRoot, {
 	Footer: LightboxFooter,
 	Image: LightboxImage,
 	Gallery: LightboxGallery,
-	Bind: LightboxBind
+	Bind: LightboxBind,
+	useLightbox: useDialog$1,
+	useLightboxContext: useDialogContext$1
 });
 //#endregion
-export { Lightbox, LightboxBind, LightboxGallery, LightboxImage };
+export { Lightbox, LightboxBind, LightboxGallery, LightboxImage, useDialog$1 as useLightbox, useDialogContext$1 as useLightboxContext };

package/dist/components/lightbox/Lightbox.module.js

@@ -1,22 +1,22 @@
 import './Lightbox.css';
 //#region src/components/lightbox/Lightbox.module.css
 var Lightbox_module_default = {
-	"backdrop": "Jmwb8W_backdrop",
-	"body": "Jmwb8W_body",
-	"closeIcon": "Jmwb8W_closeIcon",
-	"content": "Jmwb8W_content",
-	"description": "Jmwb8W_description",
-	"footer": "Jmwb8W_footer",
-	"gallery": "Jmwb8W_gallery",
-	"header": "Jmwb8W_header",
-	"image": "Jmwb8W_image",
-	"lightbox-backdrop-in": "Jmwb8W_lightbox-backdrop-in",
-	"lightbox-backdrop-out": "Jmwb8W_lightbox-backdrop-out",
-	"lightbox-content-in": "Jmwb8W_lightbox-content-in",
-	"lightbox-content-out": "Jmwb8W_lightbox-content-out",
-	"positioner": "Jmwb8W_positioner",
-	"title": "Jmwb8W_title",
-	"trigger": "Jmwb8W_trigger"
+	"backdrop": "BCq4HG_backdrop",
+	"body": "BCq4HG_body",
+	"closeIcon": "BCq4HG_closeIcon",
+	"content": "BCq4HG_content",
+	"description": "BCq4HG_description",
+	"footer": "BCq4HG_footer",
+	"gallery": "BCq4HG_gallery",
+	"header": "BCq4HG_header",
+	"image": "BCq4HG_image",
+	"lightbox-backdrop-in": "BCq4HG_lightbox-backdrop-in",
+	"lightbox-backdrop-out": "BCq4HG_lightbox-backdrop-out",
+	"lightbox-content-in": "BCq4HG_lightbox-content-in",
+	"lightbox-content-out": "BCq4HG_lightbox-content-out",
+	"positioner": "BCq4HG_positioner",
+	"title": "BCq4HG_title",
+	"trigger": "BCq4HG_trigger"
 };
 //#endregion
 export { Lightbox_module_default as default };

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

@@ -1,2 +1,2 @@
-import { Lightbox, LightboxBind, LightboxBindProps, LightboxGallery, LightboxImage, LightboxImageSelectDetails } from "./Lightbox.js";
-export { Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails };
+import { Lightbox, LightboxBind, LightboxBindProps, LightboxGallery, LightboxImage, LightboxImageSelectDetails, useLightbox as useDialog, useLightboxContext as useDialogContext } from "./Lightbox.js";
+export { Lightbox, LightboxBind, type LightboxBindProps, LightboxGallery, LightboxImage, type LightboxImageSelectDetails, useDialog as useLightbox, useDialogContext as useLightboxContext };

package/dist/components/list/List.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .tX0ceq_root[data-scope="list"][data-part="root"] {
+  .dG8Cea_root[data-scope="list"][data-part="root"] {
     --_list-color: var(--list-color, var(--list-default-color, var(--color-foreground)));
     --_list-font-size: var(--list-font-size, var(--list-font-size-md, var(--text-md)));
     --_list-gap: var(--list-gap, var(--list-gap-sm, var(--spacing-2)));

package/dist/components/list/List.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import List_module_default from "./List.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/list/List.tsx
 const ListRoot = forwardRef(function ListRoot({ as, asChild, className, gap = "sm", marker, role, size = "md", tone = "default", ...props }, ref) {
 	const markerValue = marker ?? "auto";

package/dist/components/list/List.module.js

@@ -1,5 +1,5 @@
 import './List.css';
 //#region src/components/list/List.module.css
-var List_module_default = { "root": "tX0ceq_root" };
+var List_module_default = { "root": "dG8Cea_root" };
 //#endregion
 export { List_module_default as default };

package/dist/components/listbox/Listbox.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .-yleua_root {
+  .SHhhXW_root {
     box-sizing: border-box;
     width: var(--listbox-width, 16rem);
     max-width: var(--listbox-max-width, 100%);
@@ -14,7 +14,7 @@
     }
   }
 
-  .-yleua_label {
+  .SHhhXW_label {
     color: var(--listbox-label-color, var(--listbox-color, var(--color-foreground)));
     font-size: var(--listbox-label-font-size, var(--text-sm));
     font-weight: var(--listbox-label-font-weight, var(--weight-medium));
@@ -22,7 +22,7 @@
     user-select: none;
   }
 
-  .-yleua_input {
+  .SHhhXW_input {
     box-sizing: border-box;
     width: 100%;
     min-height: var(--listbox-input-height, var(--size-lg));
@@ -50,7 +50,6 @@
     }
 
     &:focus-visible {
-      border-color: var(--listbox-input-focus-ring-color, var(--listbox-focus-ring-color, var(--color-ring)));
       outline-color: var(--listbox-input-focus-ring-color, var(--listbox-focus-ring-color, var(--color-ring)));
     }
 
@@ -60,7 +59,67 @@
     }
   }
 
-  .-yleua_content {
+  .SHhhXW_filter {
+    box-sizing: border-box;
+    width: 100%;
+    position: relative;
+
+    &:has( + .SHhhXW_content) .SHhhXW_input {
+      border-bottom: 0;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .SHhhXW_filter + .SHhhXW_content {
+    margin-top: calc(-1 * var(--listbox-root-gap, var(--spacing-3)));
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .SHhhXW_filterIcon {
+    z-index: 1;
+    top: 50%;
+    width: var(--listbox-filter-icon-size, 1rem);
+    height: var(--listbox-filter-icon-size, 1rem);
+    color: var(--listbox-filter-icon-color, var(--color-muted-foreground));
+    pointer-events: none;
+    position: absolute;
+    inset-inline-start: var(--listbox-filter-padding-x, var(--spacing-3));
+    transform: translateY(-50%);
+  }
+
+  .SHhhXW_filter .SHhhXW_input {
+    min-height: var(--listbox-filter-height, var(--listbox-input-height, var(--size-lg)));
+    background-color: var(--listbox-bg, var(--color-background));
+    padding-inline-start: calc(var(--listbox-filter-padding-x, var(--spacing-3)) + var(--listbox-filter-icon-size, 1rem) +
+        var(--listbox-filter-input-padding-x, var(--spacing-2)));
+    padding-inline-end: calc(var(--listbox-filter-padding-x, var(--spacing-3)) +
+        var(--listbox-filter-action-size, 1.5rem) +
+        var(--listbox-filter-input-padding-x, var(--spacing-2)));
+
+    &:focus-visible {
+      outline-color: #0000;
+    }
+  }
+
+  .SHhhXW_clearTrigger {
+    z-index: 1;
+    top: 50%;
+    --close-button-size: var(--listbox-filter-action-size, 1.5rem);
+    --close-button-radius: var(--listbox-filter-action-radius, var(--radius-sm));
+    --close-button-bg: var(--listbox-filter-action-bg, transparent);
+    --close-button-bg-hover: var(--listbox-filter-action-bg-hover, var(--color-muted));
+    --close-button-color: var(--listbox-filter-icon-color, var(--color-muted-foreground));
+    --close-button-color-hover: var(--listbox-filter-action-color-hover, var(--color-foreground));
+    --close-button-icon-size: var(--listbox-filter-icon-size, 1rem);
+    --close-button-transition: var(--listbox-transition, var(--transition-default));
+    position: absolute;
+    inset-inline-end: var(--listbox-filter-padding-x, var(--spacing-3));
+    transform: translateY(-50%);
+  }
+
+  .SHhhXW_content {
     box-sizing: border-box;
     min-height: 0;
     max-height: var(--listbox-content-max-height, 14rem);
@@ -97,7 +156,7 @@
     }
   }
 
-  .-yleua_empty {
+  .SHhhXW_empty {
     padding-block: var(--listbox-empty-padding-y, var(--spacing-3));
     padding-inline: var(--listbox-empty-padding-x, var(--spacing-3));
     color: var(--listbox-empty-color, var(--color-muted-foreground));
@@ -106,7 +165,7 @@
     text-align: center;
   }
 
-  .-yleua_itemGroup {
+  .SHhhXW_itemGroup {
     flex-direction: column;
     display: flex;
 
@@ -115,7 +174,7 @@
     }
   }
 
-  .-yleua_itemGroupLabel {
+  .SHhhXW_itemGroupLabel {
     padding-block: var(--listbox-item-group-label-padding-y, var(--spacing-1));
     padding-inline: var(--listbox-item-group-label-padding-x, var(--spacing-2));
     color: var(--listbox-item-group-label-color, var(--color-muted-foreground));
@@ -125,7 +184,7 @@
     user-select: none;
   }
 
-  .-yleua_item {
+  .SHhhXW_item {
     box-sizing: border-box;
     width: calc(100% - var(--listbox-item-inset-x, var(--spacing-2)));
     min-height: var(--listbox-item-min-height, 2rem);
@@ -174,13 +233,13 @@
     }
   }
 
-  .-yleua_content[data-orientation="horizontal"]:not([data-layout="grid"]) .-yleua_item {
+  .SHhhXW_content[data-orientation="horizontal"]:not([data-layout="grid"]) .SHhhXW_item {
     width: var(--listbox-horizontal-item-width, 11rem);
     min-width: var(--listbox-horizontal-item-width, 11rem);
     align-items: flex-start;
   }
 
-  .-yleua_content[data-layout="grid"] .-yleua_item {
+  .SHhhXW_content[data-layout="grid"] .SHhhXW_item {
     text-align: center;
     grid-template-columns: minmax(0, 1fr);
     justify-items: center;
@@ -194,7 +253,7 @@
     }
   }
 
-  .-yleua_itemText {
+  .SHhhXW_itemText {
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1;
@@ -202,7 +261,7 @@
     overflow: hidden;
   }
 
-  .-yleua_itemIndicator {
+  .SHhhXW_itemIndicator {
     width: var(--listbox-item-indicator-size, 1rem);
     height: var(--listbox-item-indicator-size, 1rem);
     color: var(--listbox-item-indicator-color, currentColor);
@@ -221,13 +280,13 @@
     }
   }
 
-  .-yleua_valueText {
+  .SHhhXW_valueText {
     color: var(--listbox-value-text-color, var(--color-muted-foreground));
     font-size: var(--listbox-value-text-font-size, var(--text-sm));
     line-height: var(--listbox-value-text-line-height, var(--line-height-text-sm));
   }
 
-  .-yleua_itemTextContent {
+  .SHhhXW_itemTextContent {
     align-items: center;
     gap: var(--listbox-item-text-content-gap, var(--spacing-2));
     vertical-align: top;
@@ -236,7 +295,7 @@
     display: inline-flex;
   }
 
-  .-yleua_itemTextIcon {
+  .SHhhXW_itemTextIcon {
     width: var(--listbox-item-text-icon-size, 1rem);
     height: var(--listbox-item-text-icon-size, 1rem);
     color: var(--listbox-item-text-icon-color, currentColor);
@@ -246,7 +305,7 @@
     display: inline-flex;
   }
 
-  .-yleua_itemTextLabel {
+  .SHhhXW_itemTextLabel {
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;

package/dist/components/listbox/Listbox.d.ts

@@ -1,7 +1,12 @@
 import { ComponentProps } from "react";
-import { Listbox } from "@ark-ui/react/listbox";
+import { Listbox, useListbox, useListboxContext, useListboxItemContext } from "@ark-ui/react/listbox";
 
 //#region src/components/listbox/Listbox.d.ts
+declare function ListboxFilter({
+  className,
+  children,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
 declare function ListboxItemTextContent({
   className,
   ...props
@@ -19,6 +24,8 @@ declare const Listbox$1: Listbox.RootComponent & {
   RootProvider: Listbox.RootProviderComponent;
   Label: import("react").ForwardRefExoticComponent<Omit<Listbox.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   Input: import("react").ForwardRefExoticComponent<Omit<Listbox.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Filter: typeof ListboxFilter;
+  ClearTrigger: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Content: import("react").ForwardRefExoticComponent<Omit<Listbox.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Empty: import("react").ForwardRefExoticComponent<Omit<Listbox.EmptyProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemGroup: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -27,9 +34,14 @@ declare const Listbox$1: Listbox.RootComponent & {
   ItemText: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ValueText: import("react").ForwardRefExoticComponent<Omit<Listbox.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Context: <T extends unknown>(props: Listbox.ContextProps<T>) => import("react").ReactNode;
+  ItemContext: (props: Listbox.ItemContextProps) => import("react").ReactNode;
   ItemTextContent: typeof ListboxItemTextContent;
   ItemTextIcon: typeof ListboxItemTextIcon;
   ItemTextLabel: typeof ListboxItemTextLabel;
+  useListbox: <T extends unknown>(props: import("@ark-ui/react/listbox").UseListboxProps<T>) => import("@ark-ui/react/listbox").UseListboxReturn<T>;
+  useListboxContext: () => import("@ark-ui/react/listbox").UseListboxContext<any>;
+  useListboxItemContext: () => import("@ark-ui/react/listbox").UseListboxItemContext;
 };
 //#endregion
-export { Listbox$1 as Listbox };
+export { Listbox$1 as Listbox, useListbox, useListboxContext, useListboxItemContext };

package/dist/components/listbox/Listbox.js

@@ -1,10 +1,12 @@
-import { CheckIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon, SearchIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/CloseButton.js";
 import Listbox_module_default from "./Listbox.module.js";
-import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Listbox } from "@ark-ui/react/listbox";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Listbox, useListbox, useListboxContext, useListboxItemContext } from "@ark-ui/react/listbox";
 //#region src/components/listbox/Listbox.tsx
 const ListboxRoot = forwardRef(function ListboxRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Listbox.Root, {
@@ -38,6 +40,33 @@ const ListboxInput = forwardRef(function ListboxInput({ className, ...props }, r
 		...props
 	});
 });
+function ListboxFilter({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "listbox-filter",
+		className: clsx(Listbox_module_default.filter, normalizeClassName(className)),
+		...props,
+		children: [/* @__PURE__ */ jsx(SearchIcon, {
+			"data-slot": "listbox-filter-icon",
+			className: Listbox_module_default.filterIcon
+		}), children]
+	});
+}
+const ListboxClearTrigger = forwardRef(function ListboxClearTrigger({ "aria-label": ariaLabel = "Clear search", className, children, type = "button", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.button, {
+		ref,
+		asChild: true,
+		"data-slot": "listbox-clear-trigger",
+		type,
+		"aria-label": ariaLabel,
+		className: clsx(Listbox_module_default.clearTrigger, normalizeClassName(className)),
+		...props,
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			"aria-label": ariaLabel,
+			type,
+			children
+		})
+	});
+});
 const ListboxContent = forwardRef(function ListboxContent({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Listbox.Content, {
 		ref,
@@ -129,6 +158,8 @@ const Listbox$1 = Object.assign(ListboxRoot, {
 	RootProvider: ListboxRootProvider,
 	Label: ListboxLabel,
 	Input: ListboxInput,
+	Filter: ListboxFilter,
+	ClearTrigger: ListboxClearTrigger,
 	Content: ListboxContent,
 	Empty: ListboxEmpty,
 	ItemGroup: ListboxItemGroup,
@@ -137,9 +168,14 @@ const Listbox$1 = Object.assign(ListboxRoot, {
 	ItemText: ListboxItemText,
 	ItemIndicator: ListboxItemIndicator,
 	ValueText: ListboxValueText,
+	Context: Listbox.Context,
+	ItemContext: Listbox.ItemContext,
 	ItemTextContent: ListboxItemTextContent,
 	ItemTextIcon: ListboxItemTextIcon,
-	ItemTextLabel: ListboxItemTextLabel
+	ItemTextLabel: ListboxItemTextLabel,
+	useListbox,
+	useListboxContext,
+	useListboxItemContext
 });
 //#endregion
-export { Listbox$1 as Listbox };
+export { Listbox$1 as Listbox, useListbox, useListboxContext, useListboxItemContext };

package/dist/components/listbox/Listbox.module.js

@@ -1,20 +1,23 @@
 import './Listbox.css';
 //#region src/components/listbox/Listbox.module.css
 var Listbox_module_default = {
-	"content": "-yleua_content",
-	"empty": "-yleua_empty",
-	"input": "-yleua_input",
-	"item": "-yleua_item",
-	"itemGroup": "-yleua_itemGroup",
-	"itemGroupLabel": "-yleua_itemGroupLabel",
-	"itemIndicator": "-yleua_itemIndicator",
-	"itemText": "-yleua_itemText",
-	"itemTextContent": "-yleua_itemTextContent",
-	"itemTextIcon": "-yleua_itemTextIcon",
-	"itemTextLabel": "-yleua_itemTextLabel",
-	"label": "-yleua_label",
-	"root": "-yleua_root",
-	"valueText": "-yleua_valueText"
+	"clearTrigger": "SHhhXW_clearTrigger",
+	"content": "SHhhXW_content",
+	"empty": "SHhhXW_empty",
+	"filter": "SHhhXW_filter",
+	"filterIcon": "SHhhXW_filterIcon",
+	"input": "SHhhXW_input",
+	"item": "SHhhXW_item",
+	"itemGroup": "SHhhXW_itemGroup",
+	"itemGroupLabel": "SHhhXW_itemGroupLabel",
+	"itemIndicator": "SHhhXW_itemIndicator",
+	"itemText": "SHhhXW_itemText",
+	"itemTextContent": "SHhhXW_itemTextContent",
+	"itemTextIcon": "SHhhXW_itemTextIcon",
+	"itemTextLabel": "SHhhXW_itemTextLabel",
+	"label": "SHhhXW_label",
+	"root": "SHhhXW_root",
+	"valueText": "SHhhXW_valueText"
 };
 //#endregion
 export { Listbox_module_default as default };

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

@@ -1,2 +1,2 @@
-import { Listbox } from "./Listbox.js";
-export { Listbox };
+import { Listbox, useListbox, useListboxContext, useListboxItemContext } from "./Listbox.js";
+export { Listbox, useListbox, useListboxContext, useListboxItemContext };

package/dist/components/marquee/Marquee.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  ._7_2lUa_root {
+  .MH_pgW_root {
     box-sizing: border-box;
     width: var(--marquee-width, 100%);
     height: var(--marquee-height, auto);
@@ -11,26 +11,26 @@
       height: var(--marquee-vertical-height, var(--marquee-height, 15rem));
     }
 
-    &[data-paused] ._7_2lUa_content {
+    &[data-paused] .MH_pgW_content {
       animation-play-state: paused;
     }
   }
 
-  ._7_2lUa_viewport {
+  .MH_pgW_viewport {
     box-sizing: border-box;
     width: 100%;
     height: 100%;
   }
 
-  ._7_2lUa_content {
-    animation-name: _7_2lUa_marquee-x;
+  .MH_pgW_content {
+    animation-name: MH_pgW_marquee-x;
     animation-duration: var(--marquee-duration);
     animation-delay: var(--marquee-delay);
     animation-timing-function: linear;
     animation-iteration-count: var(--marquee-loop-count);
 
     &[data-side="top"], &[data-side="bottom"] {
-      animation-name: _7_2lUa_marquee-y;
+      animation-name: MH_pgW_marquee-y;
     }
 
     &[data-reverse] {
@@ -42,12 +42,12 @@
     }
   }
 
-  ._7_2lUa_item {
+  .MH_pgW_item {
     box-sizing: border-box;
     flex-shrink: 0;
   }
 
-  ._7_2lUa_edge {
+  .MH_pgW_edge {
     z-index: var(--marquee-edge-z-index, 1);
     pointer-events: none;
 
@@ -92,7 +92,7 @@
     }
   }
 
-  @keyframes _7_2lUa_marquee-x {
+  @keyframes MH_pgW_marquee-x {
     from {
       transform: translateX(0%);
     }
@@ -102,7 +102,7 @@
     }
   }
 
-  @keyframes _7_2lUa_marquee-y {
+  @keyframes MH_pgW_marquee-y {
     from {
       transform: translateY(0%);
     }

package/dist/components/marquee/Marquee.d.ts

@@ -9,5 +9,6 @@ declare const Marquee$1: import("react").ForwardRefExoticComponent<Omit<Marquee.
   Item: import("react").ForwardRefExoticComponent<Omit<Marquee.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Edge: import("react").ForwardRefExoticComponent<Omit<Marquee.EdgeProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
+declare const useMarquee$1: (props?: import("@ark-ui/react/marquee").UseMarqueeProps) => import("@ark-ui/react/marquee").UseMarqueeReturn;
 //#endregion
-export { Marquee$1 as Marquee };
+export { Marquee$1 as Marquee, useMarquee$1 as useMarquee };

package/dist/components/marquee/Marquee.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Marquee_module_default from "./Marquee.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Marquee } from "@ark-ui/react/marquee";
+import { jsx } from "react/jsx-runtime";
+import { Marquee, useMarquee } from "@ark-ui/react/marquee";
 //#region src/components/marquee/Marquee.tsx
 const MarqueeRoot = forwardRef(function MarqueeRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Marquee.Root, {
@@ -61,5 +61,6 @@ const Marquee$1 = Object.assign(MarqueeRoot, {
 	Item: MarqueeItem,
 	Edge: MarqueeEdge
 });
+const useMarquee$1 = useMarquee;
 //#endregion
-export { Marquee$1 as Marquee };
+export { Marquee$1 as Marquee, useMarquee$1 as useMarquee };

package/dist/components/marquee/Marquee.module.js

@@ -1,13 +1,13 @@
 import './Marquee.css';
 //#region src/components/marquee/Marquee.module.css
 var Marquee_module_default = {
-	"content": "_7_2lUa_content",
-	"edge": "_7_2lUa_edge",
-	"item": "_7_2lUa_item",
-	"marquee-x": "_7_2lUa_marquee-x",
-	"marquee-y": "_7_2lUa_marquee-y",
-	"root": "_7_2lUa_root",
-	"viewport": "_7_2lUa_viewport"
+	"content": "MH_pgW_content",
+	"edge": "MH_pgW_edge",
+	"item": "MH_pgW_item",
+	"marquee-x": "MH_pgW_marquee-x",
+	"marquee-y": "MH_pgW_marquee-y",
+	"root": "MH_pgW_root",
+	"viewport": "MH_pgW_viewport"
 };
 //#endregion
 export { Marquee_module_default as default };

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

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