@moduix/react 2.1.0 → 2.2.4

package/dist/components/listbox/Listbox_module.css

@@ -0,0 +1,323 @@
+@layer moduix.components {
+  .root-Bz4zm1 {
+    box-sizing: border-box;
+    width: var(--moduix-listbox-width, 16rem);
+    max-width: var(--moduix-listbox-max-width, 100%);
+    gap: var(--moduix-listbox-root-gap, var(--moduix-spacing-3));
+    min-width: 0;
+    color: var(--moduix-listbox-color, var(--moduix-color-foreground));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .root-Bz4zm1[data-disabled] {
+    opacity: var(--moduix-listbox-disabled-opacity, var(--moduix-opacity-disabled));
+  }
+
+  .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;
+  }
+
+  .input-oy93nd {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--moduix-listbox-input-height, var(--moduix-size-md));
+    border: var(--moduix-listbox-input-border-width, var(--moduix-listbox-border-width, var(--moduix-border-width-sm)))
+      solid
+      var(--moduix-listbox-input-border-color, var(--moduix-listbox-border-color, var(--moduix-color-border)));
+    border-radius: var(--moduix-listbox-input-radius, var(--moduix-listbox-radius, var(--moduix-radius-md)));
+    padding: var(--moduix-listbox-input-padding-y, var(--moduix-spacing-1))
+      var(--moduix-listbox-input-padding-x, var(--moduix-spacing-3));
+    background-color: var(--moduix-listbox-input-bg, var(--moduix-color-background));
+    color: var(--moduix-listbox-input-color, var(--moduix-listbox-color, var(--moduix-color-foreground)));
+    font: inherit;
+    font-size: var(--moduix-listbox-input-font-size, var(--moduix-text-md));
+    line-height: var(--moduix-listbox-input-line-height, var(--moduix-line-height-text-md));
+    outline: var(--moduix-listbox-input-focus-ring-width, var(--moduix-listbox-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
+      solid transparent;
+    outline-offset: calc(var(--moduix-listbox-input-focus-ring-width, var(--moduix-listbox-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))) *
+        -1);
+    transition: border-color var(--moduix-listbox-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-listbox-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-listbox-transition, var(--moduix-transition-default));
+    margin: 0;
+  }
+
+  .input-oy93nd::placeholder {
+    color: var(--moduix-listbox-placeholder-color, var(--moduix-color-muted-foreground));
+  }
+
+  .input-oy93nd:focus-visible {
+    outline-color: var(--moduix-listbox-input-focus-ring-color, var(--moduix-listbox-focus-ring-color, var(--moduix-color-ring)));
+  }
+
+  .input-oy93nd[data-disabled], .input-oy93nd[disabled] {
+    opacity: var(--moduix-listbox-disabled-opacity, var(--moduix-opacity-disabled));
+    cursor: default;
+  }
+
+  .filter-GcwWjv {
+    box-sizing: border-box;
+    width: 100%;
+    position: relative;
+  }
+
+  .filter-GcwWjv:has( + .content-bWizSr) .input-oy93nd {
+    border-bottom: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .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;
+  }
+
+  .filterIcon-sysxT1 {
+    z-index: 1;
+    top: 50%;
+    width: var(--moduix-listbox-filter-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-listbox-filter-icon-size, var(--moduix-spacing-4));
+    color: var(--moduix-listbox-filter-icon-color, var(--moduix-color-muted-foreground));
+    pointer-events: none;
+    position: absolute;
+    inset-inline-start: var(--moduix-listbox-filter-padding-x, var(--moduix-spacing-3));
+    transform: translateY(-50%);
+  }
+
+  .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)) +
+        var(--moduix-listbox-filter-icon-size, var(--moduix-spacing-4)) +
+        var(--moduix-listbox-filter-input-padding-x, var(--moduix-spacing-2)));
+    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)));
+  }
+
+  .clearTrigger-QnL8Mh {
+    z-index: 1;
+    top: 50%;
+    --moduix-close-button-size: var(--moduix-listbox-filter-action-size, var(--moduix-size-xs));
+    --moduix-close-button-radius: var(--moduix-listbox-filter-action-radius, var(--moduix-radius-sm));
+    --moduix-close-button-bg: var(--moduix-listbox-filter-action-bg, transparent);
+    --moduix-close-button-bg-hover: var(--moduix-listbox-filter-action-bg-hover, var(--moduix-color-muted));
+    --moduix-close-button-color: var(--moduix-listbox-filter-icon-color, var(--moduix-color-muted-foreground));
+    --moduix-close-button-color-hover: var(--moduix-listbox-filter-action-color-hover, var(--moduix-color-foreground));
+    --moduix-close-button-icon-size: var(--moduix-listbox-filter-icon-size, var(--moduix-spacing-4));
+    --moduix-close-button-transition: var(--moduix-listbox-transition, var(--moduix-transition-default));
+    position: absolute;
+    inset-inline-end: var(--moduix-listbox-filter-padding-x, var(--moduix-spacing-3));
+    transform: translateY(-50%);
+  }
+
+  .content-bWizSr {
+    box-sizing: border-box;
+    min-height: 0;
+    max-height: var(--moduix-listbox-content-max-height, 14rem);
+    border: var(--moduix-listbox-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-listbox-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-listbox-radius, var(--moduix-radius-md));
+    padding-block: var(--moduix-listbox-content-padding-y, var(--moduix-popup-list-padding-y, var(--moduix-spacing-1)));
+    background-color: var(--moduix-listbox-bg, var(--moduix-color-background));
+    color: var(--moduix-listbox-color, var(--moduix-color-foreground));
+    outline: var(--moduix-listbox-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--moduix-listbox-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
+        -1);
+    overscroll-behavior: auto;
+    scrollbar-gutter: stable;
+    scroll-padding-block: var(--moduix-listbox-content-padding-y, var(--moduix-popup-list-padding-y, var(--moduix-spacing-1)));
+    transition: border-color var(--moduix-listbox-transition, var(--moduix-transition-default)),
+      outline-color var(--moduix-listbox-transition, var(--moduix-transition-default));
+    flex-direction: column;
+    display: flex;
+    overflow: hidden auto;
+  }
+
+  .content-bWizSr:focus-visible {
+    outline-color: var(--moduix-listbox-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .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;
+  }
+
+  .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));
+    line-height: var(--moduix-listbox-empty-line-height, var(--moduix-line-height-text-sm));
+    text-align: center;
+  }
+
+  .itemGroup-R3S9Z9 {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .itemGroup-R3S9Z9 + .itemGroup-R3S9Z9 {
+    margin-top: var(--moduix-listbox-item-group-gap, var(--moduix-spacing-2));
+  }
+
+  .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;
+  }
+
+  .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)));
+    grid-template-columns: minmax(0, 1fr) var(--moduix-listbox-item-indicator-size, var(--moduix-spacing-4));
+    align-items: center;
+    gap: var(--moduix-listbox-item-gap, var(--moduix-spacing-2));
+    margin-inline: calc(var(--moduix-listbox-item-inset-x, var(--moduix-spacing-2)) / 2);
+    border: var(--moduix-listbox-item-border-width, 0) solid
+      var(--moduix-listbox-item-border-color, transparent);
+    border-radius: var(--moduix-listbox-item-radius, var(--moduix-radius-sm));
+    padding-block: var(--moduix-listbox-item-padding-y, var(--moduix-popup-item-padding-y, var(--moduix-spacing-1)));
+    padding-inline: var(--moduix-listbox-item-padding-x, var(--moduix-popup-item-padding-x-start, var(--moduix-spacing-3)));
+    background-color: var(--moduix-listbox-item-bg, transparent);
+    color: var(--moduix-listbox-item-color, var(--moduix-listbox-color, var(--moduix-color-foreground)));
+    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)),
+      color var(--moduix-listbox-transition, var(--moduix-transition-default));
+    outline: 0;
+    display: grid;
+    position: relative;
+  }
+
+  @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)));
+    }
+  }
+
+  .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));
+  }
+
+  .item-zgaYnD[data-selected] {
+    color: var(--moduix-listbox-item-selected-color, var(--moduix-listbox-item-color, var(--moduix-color-foreground)));
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+
+  .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));
+  }
+
+  .itemText-UXCIHm {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .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);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .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));
+  }
+
+  .itemIndicator-YmTj_0[data-state="unchecked"] {
+    visibility: hidden;
+  }
+
+  .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));
+  }
+
+  .itemTextContent-fUHU0Z {
+    align-items: center;
+    gap: var(--moduix-listbox-item-text-content-gap, var(--moduix-spacing-2));
+    vertical-align: top;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-flex;
+  }
+
+  .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);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .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";