@moduix/react 2.2.0 → 2.2.4

package/dist/components/listbox/{Listbox.css → Listbox_module.css}

@@ -1,5 +1,5 @@
 @layer moduix.components {
-  .SHhhXW_root {
+  .root-Bz4zm1 {
     box-sizing: border-box;
     width: var(--moduix-listbox-width, 16rem);
     max-width: var(--moduix-listbox-max-width, 100%);
@@ -8,21 +8,22 @@
     color: var(--moduix-listbox-color, var(--moduix-color-foreground));
     flex-direction: column;
     display: flex;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-listbox-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .root-Bz4zm1[data-disabled] {
+    opacity: var(--moduix-listbox-disabled-opacity, var(--moduix-opacity-disabled));
   }
 
-  .SHhhXW_label {
+  .label-XWdOcI {
     color: var(--moduix-listbox-label-color, var(--moduix-listbox-color, var(--moduix-color-foreground)));
     font-size: var(--moduix-listbox-label-font-size, var(--moduix-text-sm));
     font-weight: var(--moduix-listbox-label-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-listbox-label-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
     user-select: none;
   }
 
-  .SHhhXW_input {
+  .input-oy93nd {
     box-sizing: border-box;
     width: 100%;
     min-height: var(--moduix-listbox-input-height, var(--moduix-size-md));
@@ -45,40 +46,40 @@
       outline-color var(--moduix-listbox-transition, var(--moduix-transition-default)),
       opacity var(--moduix-listbox-transition, var(--moduix-transition-default));
     margin: 0;
+  }
 
-    &::placeholder {
-      color: var(--moduix-listbox-placeholder-color, var(--moduix-color-muted-foreground));
-    }
+  .input-oy93nd::placeholder {
+    color: var(--moduix-listbox-placeholder-color, var(--moduix-color-muted-foreground));
+  }
 
-    &:focus-visible {
-      outline-color: var(--moduix-listbox-input-focus-ring-color, var(--moduix-listbox-focus-ring-color, var(--moduix-color-ring)));
-    }
+  .input-oy93nd:focus-visible {
+    outline-color: var(--moduix-listbox-input-focus-ring-color, var(--moduix-listbox-focus-ring-color, var(--moduix-color-ring)));
+  }
 
-    &[data-disabled], &[disabled] {
-      opacity: var(--moduix-listbox-disabled-opacity, var(--moduix-opacity-disabled));
-      cursor: default;
-    }
+  .input-oy93nd[data-disabled], .input-oy93nd[disabled] {
+    opacity: var(--moduix-listbox-disabled-opacity, var(--moduix-opacity-disabled));
+    cursor: default;
   }
 
-  .SHhhXW_filter {
+  .filter-GcwWjv {
     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;
-    }
+  .filter-GcwWjv:has( + .content-bWizSr) .input-oy93nd {
+    border-bottom: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
   }
 
-  .SHhhXW_filter + .SHhhXW_content {
+  .filter-GcwWjv + .content-bWizSr {
     margin-top: calc(-1 * var(--moduix-listbox-root-gap, var(--moduix-spacing-3)));
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
 
-  .SHhhXW_filterIcon {
+  .filterIcon-sysxT1 {
     z-index: 1;
     top: 50%;
     width: var(--moduix-listbox-filter-icon-size, var(--moduix-spacing-4));
@@ -90,7 +91,7 @@
     transform: translateY(-50%);
   }
 
-  .SHhhXW_filter .SHhhXW_input {
+  .filter-GcwWjv .input-oy93nd {
     min-height: var(--moduix-listbox-filter-height, var(--moduix-listbox-input-height, var(--moduix-size-md)));
     background-color: var(--moduix-listbox-bg, var(--moduix-color-background));
     padding-inline-start: calc(var(--moduix-listbox-filter-padding-x, var(--moduix-spacing-3)) +
@@ -99,13 +100,9 @@
     padding-inline-end: calc(var(--moduix-listbox-filter-padding-x, var(--moduix-spacing-3)) +
         var(--moduix-listbox-filter-action-size, var(--moduix-size-xs)) +
         var(--moduix-listbox-filter-input-padding-x, var(--moduix-spacing-2)));
-
-    &:focus-visible {
-      outline-color: #0000;
-    }
   }
 
-  .SHhhXW_clearTrigger {
+  .clearTrigger-QnL8Mh {
     z-index: 1;
     top: 50%;
     --moduix-close-button-size: var(--moduix-listbox-filter-action-size, var(--moduix-size-xs));
@@ -121,7 +118,7 @@
     transform: translateY(-50%);
   }
 
-  .SHhhXW_content {
+  .content-bWizSr {
     box-sizing: border-box;
     min-height: 0;
     max-height: var(--moduix-listbox-content-max-height, 14rem);
@@ -143,25 +140,29 @@
     flex-direction: column;
     display: flex;
     overflow: hidden auto;
+  }
 
-    &[data-layout="grid"] {
-      grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
-      gap: var(--moduix-listbox-grid-gap, var(--moduix-spacing-1));
-      padding: var(--moduix-listbox-grid-padding, var(--moduix-spacing-2));
-      display: grid;
-    }
+  .content-bWizSr:focus-visible {
+    outline-color: var(--moduix-listbox-focus-ring-color, var(--moduix-color-ring));
+  }
 
-    &[data-orientation="horizontal"]:not([data-layout="grid"]) {
-      gap: var(--moduix-listbox-horizontal-gap, var(--moduix-spacing-2));
-      max-height: var(--moduix-listbox-horizontal-content-max-height, none);
-      padding-inline: var(--moduix-listbox-content-padding-y, var(--moduix-spacing-1));
-      flex-direction: row;
-      overflow: auto hidden;
-    }
+  .content-bWizSr[data-layout="grid"] {
+    grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
+    gap: var(--moduix-listbox-grid-gap, var(--moduix-spacing-1));
+    padding: var(--moduix-listbox-grid-padding, var(--moduix-spacing-2));
+    display: grid;
+  }
+
+  .content-bWizSr[data-orientation="horizontal"]:not([data-layout="grid"]) {
+    gap: var(--moduix-listbox-horizontal-gap, var(--moduix-spacing-2));
+    max-height: var(--moduix-listbox-horizontal-content-max-height, none);
+    padding-inline: var(--moduix-listbox-content-padding-y, var(--moduix-spacing-1));
+    flex-direction: row;
+    overflow: auto hidden;
   }
 
-  .SHhhXW_empty {
-    padding-block: var(--moduix-listbox-empty-padding-y, var(--moduix-spacing-3));
+  .empty-YMbzV1 {
+    padding-block: var(--moduix-listbox-empty-padding-y, var(--moduix-spacing-1));
     padding-inline: var(--moduix-listbox-empty-padding-x, var(--moduix-spacing-3));
     color: var(--moduix-listbox-empty-color, var(--moduix-color-muted-foreground));
     font-size: var(--moduix-listbox-empty-font-size, var(--moduix-text-sm));
@@ -169,26 +170,27 @@
     text-align: center;
   }
 
-  .SHhhXW_itemGroup {
+  .itemGroup-R3S9Z9 {
     flex-direction: column;
     display: flex;
+  }
 
-    & + & {
-      margin-top: var(--moduix-listbox-item-group-gap, var(--moduix-spacing-2));
-    }
+  .itemGroup-R3S9Z9 + .itemGroup-R3S9Z9 {
+    margin-top: var(--moduix-listbox-item-group-gap, var(--moduix-spacing-2));
   }
 
-  .SHhhXW_itemGroupLabel {
+  .itemGroupLabel-t4Kb1i {
     padding-block: var(--moduix-listbox-item-group-label-padding-y, var(--moduix-popup-group-label-padding-y, var(--moduix-spacing-1)));
     padding-inline: var(--moduix-listbox-item-group-label-padding-x, var(--moduix-spacing-2));
     color: var(--moduix-listbox-item-group-label-color, var(--moduix-popup-group-label-color, var(--moduix-color-muted-foreground)));
     font-size: var(--moduix-listbox-item-group-label-font-size, var(--moduix-popup-group-label-font-size, var(--moduix-text-xs)));
     font-weight: var(--moduix-listbox-item-group-label-font-weight, var(--moduix-popup-group-label-font-weight, var(--moduix-weight-regular)));
     line-height: var(--moduix-listbox-item-group-label-line-height, var(--moduix-popup-group-label-line-height, var(--moduix-line-height-text-xs)));
+    -webkit-user-select: none;
     user-select: none;
   }
 
-  .SHhhXW_item {
+  .item-zgaYnD {
     box-sizing: border-box;
     width: calc(100% - var(--moduix-listbox-item-inset-x, var(--moduix-spacing-2)));
     min-height: var(--moduix-listbox-item-min-height, var(--moduix-popup-item-min-height, var(--moduix-size-sm)));
@@ -206,6 +208,7 @@
     font: inherit;
     font-size: var(--moduix-listbox-item-font-size, var(--moduix-popup-item-font-size, var(--moduix-text-sm)));
     line-height: var(--moduix-listbox-item-line-height, var(--moduix-popup-item-line-height, var(--moduix-line-height-text-sm)));
+    -webkit-user-select: none;
     user-select: none;
     cursor: pointer;
     transition: background-color var(--moduix-listbox-transition, var(--moduix-transition-default)),
@@ -213,52 +216,52 @@
     outline: 0;
     display: grid;
     position: relative;
+  }
 
-    @media (hover: hover) {
-      &:not([data-disabled]):hover {
-        background-color: var(--moduix-listbox-hover-bg, var(--moduix-listbox-highlight-bg, var(--moduix-color-accent)));
-        color: var(--moduix-listbox-hover-color, var(--moduix-listbox-highlight-color, var(--moduix-color-accent-foreground)));
-      }
+  @media (hover: hover) {
+    .item-zgaYnD:not([data-disabled]):hover {
+      background-color: var(--moduix-listbox-hover-bg, var(--moduix-listbox-highlight-bg, var(--moduix-color-accent)));
+      color: var(--moduix-listbox-hover-color, var(--moduix-listbox-highlight-color, var(--moduix-color-accent-foreground)));
     }
+  }
 
-    &[data-highlighted] {
-      background-color: var(--moduix-listbox-highlight-bg, var(--moduix-color-accent));
-      color: var(--moduix-listbox-highlight-color, var(--moduix-color-accent-foreground));
-    }
+  .item-zgaYnD[data-highlighted] {
+    background-color: var(--moduix-listbox-highlight-bg, var(--moduix-color-accent));
+    color: var(--moduix-listbox-highlight-color, var(--moduix-color-accent-foreground));
+  }
 
-    &[data-selected] {
-      color: var(--moduix-listbox-item-selected-color, var(--moduix-listbox-item-color, var(--moduix-color-foreground)));
-    }
+  .item-zgaYnD[data-selected] {
+    color: var(--moduix-listbox-item-selected-color, var(--moduix-listbox-item-color, var(--moduix-color-foreground)));
+  }
 
-    &[data-disabled] {
-      pointer-events: none;
-      color: var(--moduix-listbox-item-disabled-color, var(--moduix-color-muted-foreground));
-      opacity: var(--moduix-listbox-disabled-opacity, var(--moduix-opacity-disabled));
-      cursor: default;
-    }
+  .item-zgaYnD[data-disabled] {
+    pointer-events: none;
+    color: var(--moduix-listbox-item-disabled-color, var(--moduix-color-muted-foreground));
+    opacity: var(--moduix-listbox-disabled-opacity, var(--moduix-opacity-disabled));
+    cursor: default;
   }
 
-  .SHhhXW_content[data-orientation="horizontal"]:not([data-layout="grid"]) .SHhhXW_item {
+  .content-bWizSr[data-orientation="horizontal"]:not([data-layout="grid"]) .item-zgaYnD {
     width: var(--moduix-listbox-horizontal-item-width, 11rem);
     min-width: var(--moduix-listbox-horizontal-item-width, 11rem);
     align-items: flex-start;
   }
 
-  .SHhhXW_content[data-layout="grid"] .SHhhXW_item {
+  .content-bWizSr[data-layout="grid"] .item-zgaYnD {
     text-align: center;
     grid-template-columns: minmax(0, 1fr);
     justify-items: center;
     width: 100%;
     min-width: 0;
     margin-inline: 0;
+  }
 
-    &[data-selected] {
-      background-color: var(--moduix-listbox-grid-selected-bg, var(--moduix-color-muted));
-      color: var(--moduix-listbox-grid-selected-color, var(--moduix-color-foreground));
-    }
+  .content-bWizSr[data-layout="grid"] .item-zgaYnD[data-selected] {
+    background-color: var(--moduix-listbox-grid-selected-bg, var(--moduix-color-muted));
+    color: var(--moduix-listbox-grid-selected-color, var(--moduix-color-foreground));
   }
 
-  .SHhhXW_itemText {
+  .itemText-UXCIHm {
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1;
@@ -266,7 +269,7 @@
     overflow: hidden;
   }
 
-  .SHhhXW_itemIndicator {
+  .itemIndicator-YmTj_0 {
     width: var(--moduix-listbox-item-indicator-size, var(--moduix-spacing-4));
     height: var(--moduix-listbox-item-indicator-size, var(--moduix-spacing-4));
     color: var(--moduix-listbox-item-indicator-color, currentColor);
@@ -274,24 +277,24 @@
     justify-content: center;
     align-items: center;
     display: inline-flex;
+  }
 
-    & > svg {
-      width: var(--moduix-listbox-item-indicator-icon-size, var(--moduix-spacing-3));
-      height: var(--moduix-listbox-item-indicator-icon-size, var(--moduix-spacing-3));
-    }
+  .itemIndicator-YmTj_0 > svg {
+    width: var(--moduix-listbox-item-indicator-icon-size, var(--moduix-spacing-3));
+    height: var(--moduix-listbox-item-indicator-icon-size, var(--moduix-spacing-3));
+  }
 
-    &[data-state="unchecked"] {
-      visibility: hidden;
-    }
+  .itemIndicator-YmTj_0[data-state="unchecked"] {
+    visibility: hidden;
   }
 
-  .SHhhXW_valueText {
+  .valueText-KG_jWI {
     color: var(--moduix-listbox-value-text-color, var(--moduix-color-muted-foreground));
     font-size: var(--moduix-listbox-value-text-font-size, var(--moduix-text-sm));
     line-height: var(--moduix-listbox-value-text-line-height, var(--moduix-line-height-text-sm));
   }
 
-  .SHhhXW_itemTextContent {
+  .itemTextContent-fUHU0Z {
     align-items: center;
     gap: var(--moduix-listbox-item-text-content-gap, var(--moduix-spacing-2));
     vertical-align: top;
@@ -300,7 +303,7 @@
     display: inline-flex;
   }
 
-  .SHhhXW_itemTextIcon {
+  .itemTextIcon-A8XN6K {
     width: var(--moduix-listbox-item-text-icon-size, var(--moduix-spacing-4));
     height: var(--moduix-listbox-item-text-icon-size, var(--moduix-spacing-4));
     color: var(--moduix-listbox-item-text-icon-color, currentColor);
@@ -310,10 +313,11 @@
     display: inline-flex;
   }
 
-  .SHhhXW_itemTextLabel {
+  .itemTextLabel-gzLhrK {
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
     overflow: hidden;
   }
 }
+

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

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

package/dist/components/listbox/index.js

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

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

@@ -1,14 +1,12 @@
-import { Marquee } from "@ark-ui/react/marquee";
-
-//#region src/components/marquee/Marquee.d.ts
-declare const Marquee$1: import("react").ForwardRefExoticComponent<Omit<Marquee.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<Marquee.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<Marquee.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Viewport: import("react").ForwardRefExoticComponent<Omit<Marquee.ViewportProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Content: import("react").ForwardRefExoticComponent<Omit<Marquee.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  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>>;
+import { Marquee as MarqueePrimitive, useMarqueeContext } from '@ark-ui/react/marquee';
+declare const Marquee: import("react").ForwardRefExoticComponent<Omit<MarqueePrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<MarqueePrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<MarqueePrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: MarqueePrimitive.ContextProps) => import("react").ReactNode;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<MarqueePrimitive.ViewportProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<MarqueePrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<MarqueePrimitive.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Edge: import("react").ForwardRefExoticComponent<Omit<MarqueePrimitive.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, useMarquee$1 as useMarquee };
+declare const useMarquee: (props?: import("@ark-ui/react/marquee").UseMarqueeProps) => import("@ark-ui/react/marquee").UseMarqueeReturn;
+export { Marquee, useMarquee, useMarqueeContext };

package/dist/components/marquee/Marquee.js

@@ -1,66 +1,65 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Marquee_module_default from "./Marquee.module.js";
+import { jsx } from "react/jsx-runtime";
+import { Marquee, useMarquee, useMarqueeContext } from "@ark-ui/react/marquee";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-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, {
-		ref,
-		"data-slot": "marquee-root",
-		className: clsx(Marquee_module_default.root, normalizeClassName(className)),
-		...props
-	});
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Marquee_module from "./Marquee.module.js";
+const Marquee_MarqueeRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Marquee.Root, {
+        ref: ref,
+        "data-slot": "marquee-root",
+        className: clsx(Marquee_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const MarqueeRootProvider = forwardRef(function MarqueeRootProvider({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Marquee.RootProvider, {
-		ref,
-		"data-slot": "marquee-root-provider",
-		className: clsx(Marquee_module_default.root, normalizeClassName(className)),
-		...props
-	});
+const Marquee_MarqueeRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Marquee.RootProvider, {
+        ref: ref,
+        "data-slot": "marquee-root-provider",
+        className: clsx(Marquee_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const MarqueeViewport = forwardRef(function MarqueeViewport({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Marquee.Viewport, {
-		ref,
-		"data-slot": "marquee-viewport",
-		className: clsx(Marquee_module_default.viewport, normalizeClassName(className)),
-		...props
-	});
+const Marquee_MarqueeViewport = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Marquee.Viewport, {
+        ref: ref,
+        "data-slot": "marquee-viewport",
+        className: clsx(Marquee_module.viewport, normalizeClassName(className)),
+        ...props
+    });
 });
-const MarqueeContent = forwardRef(function MarqueeContent({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Marquee.Content, {
-		ref,
-		"data-slot": "marquee-content",
-		className: clsx(Marquee_module_default.content, normalizeClassName(className)),
-		...props
-	});
+const Marquee_MarqueeContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Marquee.Content, {
+        ref: ref,
+        "data-slot": "marquee-content",
+        className: clsx(Marquee_module.content, normalizeClassName(className)),
+        ...props
+    });
 });
-const MarqueeItem = forwardRef(function MarqueeItem({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Marquee.Item, {
-		ref,
-		"data-slot": "marquee-item",
-		className: clsx(Marquee_module_default.item, normalizeClassName(className)),
-		...props
-	});
+const Marquee_MarqueeItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Marquee.Item, {
+        ref: ref,
+        "data-slot": "marquee-item",
+        className: clsx(Marquee_module.item, normalizeClassName(className)),
+        ...props
+    });
 });
-const MarqueeEdge = forwardRef(function MarqueeEdge({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Marquee.Edge, {
-		ref,
-		"data-slot": "marquee-edge",
-		className: clsx(Marquee_module_default.edge, normalizeClassName(className)),
-		...props
-	});
+const Marquee_MarqueeEdge = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Marquee.Edge, {
+        ref: ref,
+        "data-slot": "marquee-edge",
+        className: clsx(Marquee_module.edge, normalizeClassName(className)),
+        ...props
+    });
 });
-const Marquee$1 = Object.assign(MarqueeRoot, {
-	Root: MarqueeRoot,
-	RootProvider: MarqueeRootProvider,
-	Viewport: MarqueeViewport,
-	Content: MarqueeContent,
-	Item: MarqueeItem,
-	Edge: MarqueeEdge
+const Marquee_Marquee = Object.assign(Marquee_MarqueeRoot, {
+    Root: Marquee_MarqueeRoot,
+    RootProvider: Marquee_MarqueeRootProvider,
+    Context: Marquee.Context,
+    Viewport: Marquee_MarqueeViewport,
+    Content: Marquee_MarqueeContent,
+    Item: Marquee_MarqueeItem,
+    Edge: Marquee_MarqueeEdge
 });
-const useMarquee$1 = useMarquee;
-//#endregion
-export { Marquee$1 as Marquee, useMarquee$1 as useMarquee };
+const Marquee_useMarquee = useMarquee;
+export { Marquee_Marquee as Marquee, Marquee_useMarquee as useMarquee, useMarqueeContext };

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": "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"
+import "./Marquee_module.css";
+const Marquee_module = {
+    root: "root-liPuNO",
+    content: "content-mY8ETj",
+    viewport: "viewport-q4Mrj6",
+    "marquee-x": "marquee-x-Su5_G3",
+    marqueeX: "marquee-x-Su5_G3",
+    "marquee-y": "marquee-y-ioMIp8",
+    marqueeY: "marquee-y-ioMIp8",
+    item: "item-eqybMn",
+    edge: "edge-LzcjhJ"
 };
-//#endregion
-export { Marquee_module_default as default };
+export default Marquee_module;

package/dist/components/marquee/Marquee_module.css

@@ -0,0 +1,109 @@
+@layer moduix.components {
+  .root-liPuNO {
+    --marquee-edge-color: var(--moduix-color-background);
+    --marquee-edge-size: 20%;
+    --moduix-marquee-edge-color: var(--marquee-edge-color);
+    --moduix-marquee-edge-size: var(--marquee-edge-size);
+    box-sizing: border-box;
+    width: var(--moduix-marquee-width, 100%);
+    height: var(--moduix-marquee-height, auto);
+    color: var(--moduix-marquee-color, var(--moduix-color-foreground));
+    position: relative;
+    overflow: hidden;
+  }
+
+  .root-liPuNO[data-orientation="vertical"] {
+    height: var(--moduix-marquee-vertical-height, var(--moduix-marquee-height, 15rem));
+  }
+
+  .root-liPuNO[data-paused] .content-mY8ETj {
+    animation-play-state: paused;
+  }
+
+  .viewport-q4Mrj6 {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+  }
+
+  .content-mY8ETj {
+    animation-name: marquee-x-Su5_G3;
+    animation-duration: var(--marquee-duration);
+    animation-delay: var(--marquee-delay);
+    animation-timing-function: linear;
+    animation-iteration-count: var(--marquee-loop-count);
+  }
+
+  .content-mY8ETj[data-side="top"], .content-mY8ETj[data-side="bottom"] {
+    animation-name: marquee-y-ioMIp8;
+  }
+
+  .content-mY8ETj[data-reverse] {
+    animation-direction: reverse;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .content-mY8ETj {
+      animation: none;
+    }
+  }
+
+  .item-eqybMn {
+    box-sizing: border-box;
+    flex-shrink: 0;
+  }
+
+  .edge-LzcjhJ {
+    z-index: var(--moduix-marquee-edge-z-index, 1);
+    pointer-events: none;
+  }
+
+  .edge-LzcjhJ[data-side="start"] {
+    width: var(--moduix-marquee-edge-size);
+    background: linear-gradient(to right, var(--moduix-marquee-edge-color), transparent);
+  }
+
+  .edge-LzcjhJ[data-side="start"][dir="rtl"] {
+    background: linear-gradient(to left, var(--moduix-marquee-edge-color), transparent);
+  }
+
+  .edge-LzcjhJ[data-side="end"] {
+    width: var(--moduix-marquee-edge-size);
+    background: linear-gradient(to left, var(--moduix-marquee-edge-color), transparent);
+  }
+
+  .edge-LzcjhJ[data-side="end"][dir="rtl"] {
+    background: linear-gradient(to right, var(--moduix-marquee-edge-color), transparent);
+  }
+
+  .edge-LzcjhJ[data-side="top"] {
+    height: var(--moduix-marquee-edge-size);
+    background: linear-gradient(to bottom, var(--moduix-marquee-edge-color), transparent);
+  }
+
+  .edge-LzcjhJ[data-side="bottom"] {
+    height: var(--moduix-marquee-edge-size);
+    background: linear-gradient(to top, var(--moduix-marquee-edge-color), transparent);
+  }
+
+  @keyframes marquee-x-Su5_G3 {
+    from {
+      transform: translateX(0%);
+    }
+
+    to {
+      transform: translateX(var(--marquee-translate));
+    }
+  }
+
+  @keyframes marquee-y-ioMIp8 {
+    from {
+      transform: translateY(0%);
+    }
+
+    to {
+      transform: translateY(var(--marquee-translate));
+    }
+  }
+}
+

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

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

package/dist/components/marquee/index.js

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