@moduix/react 1.1.0

package/dist/components/list/List.d.ts

@@ -0,0 +1,24 @@
+import { HTMLArkProps } from "@ark-ui/react/factory";
+
+//#region src/components/list/List.d.ts
+type ListMarker = 'disc' | 'decimal' | 'none';
+type ListGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ListSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ListTone = 'default' | 'muted' | 'subtle' | 'primary' | 'destructive';
+type ListBaseProps = {
+  marker?: ListMarker;
+  gap?: ListGap;
+  size?: ListSize;
+  tone?: ListTone;
+};
+type ListRootProps = (HTMLArkProps<'ul'> & ListBaseProps & {
+  as?: 'ul';
+}) | (HTMLArkProps<'ol'> & ListBaseProps & {
+  as: 'ol';
+});
+declare const List: import("react").ForwardRefExoticComponent<ListRootProps & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>> & {
+  Root: import("react").ForwardRefExoticComponent<ListRootProps & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
+};
+//#endregion
+export { List };

package/dist/components/list/List.js

@@ -0,0 +1,48 @@
+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";
+//#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";
+	const rootProps = {
+		asChild,
+		role: role ?? (markerValue === "none" ? "list" : void 0),
+		...props,
+		"data-scope": "list",
+		"data-part": "root",
+		"data-slot": "list-root",
+		"data-gap": gap,
+		"data-marker": markerValue,
+		"data-size": size,
+		"data-tone": tone,
+		className: clsx(List_module_default.root, normalizeClassName(className))
+	};
+	if (as === "ol") return /* @__PURE__ */ jsx(ark.ol, {
+		ref,
+		...rootProps
+	});
+	return /* @__PURE__ */ jsx(ark.ul, {
+		ref,
+		...rootProps
+	});
+});
+const ListItem = forwardRef(function ListItem({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(ark.li, {
+		ref,
+		asChild,
+		...props,
+		"data-scope": "list",
+		"data-part": "item",
+		"data-slot": "list-item",
+		className: normalizeClassName(className)
+	});
+});
+const List = Object.assign(ListRoot, {
+	Root: ListRoot,
+	Item: ListItem
+});
+//#endregion
+export { List };

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

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

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

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

package/dist/components/listbox/Listbox.css

@@ -0,0 +1,255 @@
+@layer ui.components {
+  .-yleua_root {
+    box-sizing: border-box;
+    width: var(--listbox-width, 16rem);
+    max-width: var(--listbox-max-width, 100%);
+    gap: var(--listbox-root-gap, var(--spacing-3));
+    min-width: 0;
+    color: var(--listbox-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+
+    &[data-disabled] {
+      opacity: var(--listbox-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .-yleua_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));
+    line-height: var(--listbox-label-line-height, var(--line-height-text-sm));
+    user-select: none;
+  }
+
+  .-yleua_input {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--listbox-input-height, var(--size-lg));
+    border: var(--listbox-input-border-width, var(--listbox-border-width, var(--border-width-sm)))
+      solid var(--listbox-input-border-color, var(--listbox-border-color, var(--color-border)));
+    border-radius: var(--listbox-input-radius, var(--listbox-radius, var(--radius-md)));
+    padding: var(--listbox-input-padding-y, var(--spacing-2))
+      var(--listbox-input-padding-x, var(--spacing-3));
+    background-color: var(--listbox-input-bg, var(--color-background));
+    color: var(--listbox-input-color, var(--listbox-color, var(--color-foreground)));
+    font: inherit;
+    font-size: var(--listbox-input-font-size, var(--text-md));
+    line-height: var(--listbox-input-line-height, var(--line-height-text-md));
+    outline: var(--listbox-input-focus-ring-width, var(--listbox-focus-ring-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--listbox-input-focus-ring-width, var(--listbox-focus-ring-width, var(--border-width-sm))) *
+        -1);
+    transition: border-color var(--listbox-transition, var(--transition-default)),
+      outline-color var(--listbox-transition, var(--transition-default)),
+      opacity var(--listbox-transition, var(--transition-default));
+    margin: 0;
+
+    &::placeholder {
+      color: var(--listbox-placeholder-color, var(--color-muted-foreground));
+    }
+
+    &: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)));
+    }
+
+    &[data-disabled], &[disabled] {
+      opacity: var(--listbox-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+    }
+  }
+
+  .-yleua_content {
+    box-sizing: border-box;
+    min-height: 0;
+    max-height: var(--listbox-content-max-height, 14rem);
+    border: var(--listbox-border-width, var(--border-width-sm)) solid
+      var(--listbox-border-color, var(--color-border));
+    border-radius: var(--listbox-radius, var(--radius-md));
+    padding-block: var(--listbox-content-padding-y, var(--spacing-1));
+    background-color: var(--listbox-bg, var(--color-background));
+    color: var(--listbox-color, var(--color-foreground));
+    outline: var(--listbox-focus-ring-width, var(--border-width-sm)) solid transparent;
+    outline-offset: calc(var(--listbox-focus-ring-width, var(--border-width-sm)) * -1);
+    overscroll-behavior: auto;
+    scrollbar-gutter: stable;
+    scroll-padding-block: var(--listbox-content-padding-y, var(--spacing-1));
+    transition: border-color var(--listbox-transition, var(--transition-default)),
+      outline-color var(--listbox-transition, var(--transition-default));
+    flex-direction: column;
+    display: flex;
+    overflow: hidden auto;
+
+    &[data-layout="grid"] {
+      grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
+      gap: var(--listbox-grid-gap, var(--spacing-1));
+      padding: var(--listbox-grid-padding, var(--spacing-2));
+      display: grid;
+    }
+
+    &[data-orientation="horizontal"]:not([data-layout="grid"]) {
+      gap: var(--listbox-horizontal-gap, var(--spacing-2));
+      max-height: var(--listbox-horizontal-content-max-height, none);
+      padding-inline: var(--listbox-content-padding-y, var(--spacing-1));
+      flex-direction: row;
+      overflow: auto hidden;
+    }
+  }
+
+  .-yleua_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));
+    font-size: var(--listbox-empty-font-size, var(--text-sm));
+    line-height: var(--listbox-empty-line-height, var(--line-height-text-sm));
+    text-align: center;
+  }
+
+  .-yleua_itemGroup {
+    flex-direction: column;
+    display: flex;
+
+    & + & {
+      margin-top: var(--listbox-item-group-gap, var(--spacing-2));
+    }
+  }
+
+  .-yleua_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));
+    font-size: var(--listbox-item-group-label-font-size, var(--text-xs));
+    font-weight: var(--listbox-item-group-label-font-weight, var(--weight-semibold));
+    line-height: var(--listbox-item-group-label-line-height, var(--line-height-text-xs));
+    user-select: none;
+  }
+
+  .-yleua_item {
+    box-sizing: border-box;
+    width: calc(100% - var(--listbox-item-inset-x, var(--spacing-2)));
+    min-height: var(--listbox-item-min-height, 2rem);
+    grid-template-columns: minmax(0, 1fr) var(--listbox-item-indicator-size, 1rem);
+    align-items: center;
+    gap: var(--listbox-item-gap, var(--spacing-2));
+    margin-inline: calc(var(--listbox-item-inset-x, var(--spacing-2)) / 2);
+    border: var(--listbox-item-border-width, 0) solid var(--listbox-item-border-color, transparent);
+    border-radius: var(--listbox-item-radius, var(--radius-sm));
+    padding-block: var(--listbox-item-padding-y, var(--spacing-2));
+    padding-inline: var(--listbox-item-padding-x, var(--spacing-3));
+    background-color: var(--listbox-item-bg, transparent);
+    color: var(--listbox-item-color, var(--listbox-color, var(--color-foreground)));
+    font: inherit;
+    font-size: var(--listbox-item-font-size, var(--text-sm));
+    line-height: var(--listbox-item-line-height, var(--line-height-text-sm));
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--listbox-transition, var(--transition-default)),
+      color var(--listbox-transition, var(--transition-default));
+    outline: 0;
+    display: grid;
+    position: relative;
+
+    @media (hover: hover) {
+      &:not([data-disabled]):hover {
+        background-color: var(--listbox-hover-bg, var(--listbox-highlight-bg, var(--color-accent)));
+        color: var(--listbox-hover-color, var(--listbox-highlight-color, var(--color-accent-foreground)));
+      }
+    }
+
+    &[data-highlighted] {
+      background-color: var(--listbox-highlight-bg, var(--color-accent));
+      color: var(--listbox-highlight-color, var(--color-accent-foreground));
+    }
+
+    &[data-selected] {
+      color: var(--listbox-item-selected-color, var(--listbox-item-color, var(--color-foreground)));
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+      color: var(--listbox-item-disabled-color, var(--color-muted-foreground));
+      opacity: var(--listbox-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+    }
+  }
+
+  .-yleua_content[data-orientation="horizontal"]:not([data-layout="grid"]) .-yleua_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 {
+    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(--listbox-grid-selected-bg, var(--color-muted));
+      color: var(--listbox-grid-selected-color, var(--color-foreground));
+    }
+  }
+
+  .-yleua_itemText {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .-yleua_itemIndicator {
+    width: var(--listbox-item-indicator-size, 1rem);
+    height: var(--listbox-item-indicator-size, 1rem);
+    color: var(--listbox-item-indicator-color, currentColor);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    & > svg {
+      width: var(--listbox-item-indicator-icon-size, .75rem);
+      height: var(--listbox-item-indicator-icon-size, .75rem);
+    }
+
+    &[data-state="unchecked"] {
+      visibility: hidden;
+    }
+  }
+
+  .-yleua_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 {
+    align-items: center;
+    gap: var(--listbox-item-text-content-gap, var(--spacing-2));
+    vertical-align: top;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-flex;
+  }
+
+  .-yleua_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);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .-yleua_itemTextLabel {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+}

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

@@ -0,0 +1,35 @@
+import { ComponentProps } from "react";
+import { Listbox } from "@ark-ui/react/listbox";
+
+//#region src/components/listbox/Listbox.d.ts
+declare function ListboxItemTextContent({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function ListboxItemTextIcon({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function ListboxItemTextLabel({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare const Listbox$1: Listbox.RootComponent & {
+  Root: 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>>;
+  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>>;
+  ItemGroupLabel: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<Listbox.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  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>>;
+  ItemTextContent: typeof ListboxItemTextContent;
+  ItemTextIcon: typeof ListboxItemTextIcon;
+  ItemTextLabel: typeof ListboxItemTextLabel;
+};
+//#endregion
+export { Listbox$1 as Listbox };

package/dist/components/listbox/Listbox.js

@@ -0,0 +1,145 @@
+import { CheckIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import Listbox_module_default from "./Listbox.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Listbox } from "@ark-ui/react/listbox";
+//#region src/components/listbox/Listbox.tsx
+const ListboxRoot = forwardRef(function ListboxRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Listbox.Root, {
+		ref,
+		"data-slot": "listbox-root",
+		className: clsx(Listbox_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const ListboxRootProvider = forwardRef(function ListboxRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Listbox.RootProvider, {
+		ref,
+		"data-slot": "listbox-root-provider",
+		className: clsx(Listbox_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const ListboxLabel = forwardRef(function ListboxLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Listbox.Label, {
+		ref,
+		"data-slot": "listbox-label",
+		className: clsx(Listbox_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const ListboxInput = forwardRef(function ListboxInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Listbox.Input, {
+		ref,
+		"data-slot": "listbox-input",
+		className: clsx(Listbox_module_default.input, normalizeClassName(className)),
+		...props
+	});
+});
+const ListboxContent = forwardRef(function ListboxContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Listbox.Content, {
+		ref,
+		"data-slot": "listbox-content",
+		className: clsx(Listbox_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const ListboxEmpty = forwardRef(function ListboxEmpty({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Listbox.Empty, {
+		ref,
+		"data-slot": "listbox-empty",
+		className: clsx(Listbox_module_default.empty, normalizeClassName(className)),
+		...props
+	});
+});
+const ListboxItemGroup = forwardRef(function ListboxItemGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Listbox.ItemGroup, {
+		ref,
+		"data-slot": "listbox-item-group",
+		className: clsx(Listbox_module_default.itemGroup, normalizeClassName(className)),
+		...props
+	});
+});
+const ListboxItemGroupLabel = forwardRef(function ListboxItemGroupLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Listbox.ItemGroupLabel, {
+		ref,
+		"data-slot": "listbox-item-group-label",
+		className: clsx(Listbox_module_default.itemGroupLabel, normalizeClassName(className)),
+		...props
+	});
+});
+const ListboxItem = forwardRef(function ListboxItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Listbox.Item, {
+		ref,
+		"data-slot": "listbox-item",
+		className: clsx(Listbox_module_default.item, normalizeClassName(className)),
+		...props
+	});
+});
+const ListboxItemText = forwardRef(function ListboxItemText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Listbox.ItemText, {
+		ref,
+		"data-slot": "listbox-item-text",
+		className: clsx(Listbox_module_default.itemText, normalizeClassName(className)),
+		...props
+	});
+});
+const ListboxItemIndicator = forwardRef(function ListboxItemIndicator({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Listbox.ItemIndicator, {
+		ref,
+		"data-slot": "listbox-item-indicator",
+		className: clsx(Listbox_module_default.itemIndicator, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
+	});
+});
+const ListboxValueText = forwardRef(function ListboxValueText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Listbox.ValueText, {
+		ref,
+		"data-slot": "listbox-value-text",
+		className: clsx(Listbox_module_default.valueText, normalizeClassName(className)),
+		...props
+	});
+});
+function ListboxItemTextContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "listbox-item-text-content",
+		className: clsx(Listbox_module_default.itemTextContent, normalizeClassName(className)),
+		...props
+	});
+}
+function ListboxItemTextIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "listbox-item-text-icon",
+		className: clsx(Listbox_module_default.itemTextIcon, normalizeClassName(className)),
+		...props
+	});
+}
+function ListboxItemTextLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "listbox-item-text-label",
+		className: clsx(Listbox_module_default.itemTextLabel, normalizeClassName(className)),
+		...props
+	});
+}
+const Listbox$1 = Object.assign(ListboxRoot, {
+	Root: ListboxRoot,
+	RootProvider: ListboxRootProvider,
+	Label: ListboxLabel,
+	Input: ListboxInput,
+	Content: ListboxContent,
+	Empty: ListboxEmpty,
+	ItemGroup: ListboxItemGroup,
+	ItemGroupLabel: ListboxItemGroupLabel,
+	Item: ListboxItem,
+	ItemText: ListboxItemText,
+	ItemIndicator: ListboxItemIndicator,
+	ValueText: ListboxValueText,
+	ItemTextContent: ListboxItemTextContent,
+	ItemTextIcon: ListboxItemTextIcon,
+	ItemTextLabel: ListboxItemTextLabel
+});
+//#endregion
+export { Listbox$1 as Listbox };

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

@@ -0,0 +1,20 @@
+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"
+};
+//#endregion
+export { Listbox_module_default as default };

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

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

package/dist/components/marquee/Marquee.css

@@ -0,0 +1,114 @@
+@layer ui.components {
+  ._7_2lUa_root {
+    box-sizing: border-box;
+    width: var(--marquee-width, 100%);
+    height: var(--marquee-height, auto);
+    color: var(--marquee-color, var(--color-foreground));
+    position: relative;
+    overflow: hidden;
+
+    &[data-orientation="vertical"] {
+      height: var(--marquee-vertical-height, var(--marquee-height, 15rem));
+    }
+
+    &[data-paused] ._7_2lUa_content {
+      animation-play-state: paused;
+    }
+  }
+
+  ._7_2lUa_viewport {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+  }
+
+  ._7_2lUa_content {
+    animation-name: _7_2lUa_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;
+    }
+
+    &[data-reverse] {
+      animation-direction: reverse;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
+  ._7_2lUa_item {
+    box-sizing: border-box;
+    flex-shrink: 0;
+  }
+
+  ._7_2lUa_edge {
+    z-index: var(--marquee-edge-z-index, 1);
+    pointer-events: none;
+
+    &[data-side="start"] {
+      width: var(--marquee-edge-size, 20%);
+      background: linear-gradient(to right,
+        var(--marquee-edge-color, var(--color-background)),
+        transparent);
+
+      &[dir="rtl"] {
+        background: linear-gradient(to left,
+          var(--marquee-edge-color, var(--color-background)),
+          transparent);
+      }
+    }
+
+    &[data-side="end"] {
+      width: var(--marquee-edge-size, 20%);
+      background: linear-gradient(to left,
+        var(--marquee-edge-color, var(--color-background)),
+        transparent);
+
+      &[dir="rtl"] {
+        background: linear-gradient(to right,
+          var(--marquee-edge-color, var(--color-background)),
+          transparent);
+      }
+    }
+
+    &[data-side="top"] {
+      height: var(--marquee-edge-size, 20%);
+      background: linear-gradient(to bottom,
+        var(--marquee-edge-color, var(--color-background)),
+        transparent);
+    }
+
+    &[data-side="bottom"] {
+      height: var(--marquee-edge-size, 20%);
+      background: linear-gradient(to top,
+        var(--marquee-edge-color, var(--color-background)),
+        transparent);
+    }
+  }
+
+  @keyframes _7_2lUa_marquee-x {
+    from {
+      transform: translateX(0%);
+    }
+
+    to {
+      transform: translateX(var(--marquee-translate));
+    }
+  }
+
+  @keyframes _7_2lUa_marquee-y {
+    from {
+      transform: translateY(0%);
+    }
+
+    to {
+      transform: translateY(var(--marquee-translate));
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+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>>;
+};
+//#endregion
+export { Marquee$1 as Marquee };