@moduix/react 1.1.0

package/dist/components/marquee/Marquee.js

@@ -0,0 +1,65 @@
+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";
+//#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
+	});
+});
+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 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 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 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 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$1 = Object.assign(MarqueeRoot, {
+	Root: MarqueeRoot,
+	RootProvider: MarqueeRootProvider,
+	Viewport: MarqueeViewport,
+	Content: MarqueeContent,
+	Item: MarqueeItem,
+	Edge: MarqueeEdge
+});
+//#endregion
+export { Marquee$1 as Marquee };

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

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

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

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

package/dist/components/menu/Menu.css

@@ -0,0 +1,371 @@
+@layer ui.components {
+  .by_0RW_trigger, .by_0RW_contextTrigger {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--menu-trigger-gap, .5rem);
+    min-height: var(--menu-trigger-height, var(--size-lg));
+    padding: var(--menu-trigger-padding-y, .5rem) var(--menu-trigger-padding-x, .875rem);
+    border: var(--menu-trigger-border-width, var(--border-width-sm)) solid
+      var(--menu-trigger-border-color, var(--color-border));
+    border-radius: var(--menu-trigger-radius, var(--radius-md));
+    background-color: var(--menu-trigger-bg, var(--color-background));
+    color: var(--menu-trigger-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--menu-trigger-font-size, var(--text-md));
+    line-height: var(--menu-trigger-line-height, var(--line-height-text-md));
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--menu-transition, var(--transition-default)),
+      border-color var(--menu-transition, var(--transition-default)),
+      color var(--menu-transition, var(--transition-default));
+    outline: 0;
+    margin: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--menu-trigger-bg-hover);
+      }
+    }
+
+    &:active, &[data-state="open"] {
+      background-color: var(--menu-trigger-bg-active, var(--menu-trigger-bg-hover));
+    }
+
+    &:focus-visible {
+      outline: var(--menu-focus-ring-width, var(--menu-trigger-border-width, var(--border-width-sm)))
+        solid var(--menu-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--menu-focus-ring-width, var(--menu-trigger-border-width, var(--border-width-sm))) * -1);
+    }
+
+    &[data-disabled], &:disabled {
+      pointer-events: none;
+      opacity: var(--menu-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .by_0RW_contextTrigger {
+    width: var(--menu-context-trigger-width, 15rem);
+    min-height: var(--menu-context-trigger-height, 10rem);
+    border-style: var(--menu-context-trigger-border-style, dashed);
+  }
+
+  .by_0RW_triggerIcon, .by_0RW_indicator {
+    box-sizing: border-box;
+    width: var(--menu-trigger-icon-size, 1rem);
+    height: var(--menu-trigger-icon-size, 1rem);
+    color: var(--menu-trigger-icon-color, currentColor);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .by_0RW_iconSvg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .by_0RW_positioner {
+    z-index: var(--z-index);
+    width: var(--positioner-width, auto);
+    max-width: var(--available-width);
+    outline: 0;
+  }
+
+  .by_0RW_content {
+    --arrow-size: var(--menu-arrow-size, .625rem);
+    --arrow-background: var(--menu-popup-bg, var(--color-popover));
+    box-sizing: border-box;
+    min-width: min(max(var(--reference-width, 0px), var(--menu-popup-min-width, 12rem)),
+      var(--available-width, 100vw));
+    max-width: min(var(--menu-popup-max-width, 20rem), var(--available-width, 100vw));
+    max-height: min(var(--menu-popup-max-height, 24rem), var(--available-height, 100dvh));
+    padding-block: var(--menu-popup-padding-y, .25rem);
+    border-radius: var(--menu-popup-radius, var(--radius-md));
+    background-color: var(--menu-popup-bg, var(--color-popover));
+    color: var(--menu-popup-color, var(--color-popover-foreground));
+    outline: var(--menu-popup-border-width, var(--border-width-sm)) solid
+      var(--menu-popup-border-color, var(--color-border));
+    box-shadow: var(--menu-popup-shadow, var(--shadow-lg));
+    transform-origin: var(--transform-origin);
+    z-index: calc(var(--z-popup) + var(--layer-index, 0));
+    flex-direction: column;
+    display: flex;
+    position: relative;
+    overflow: auto;
+
+    &[data-state="open"] {
+      animation: by_0RW_menuContentIn var(--menu-transition, var(--transition-default));
+    }
+
+    &[data-state="closed"] {
+      animation: by_0RW_menuContentOut var(--menu-transition, var(--transition-default));
+    }
+  }
+
+  .by_0RW_arrow {
+    --arrow-background: var(--menu-popup-bg, var(--color-popover));
+    z-index: -1;
+  }
+
+  .by_0RW_arrowTip {
+    border-block-start: var(--menu-popup-border-width, var(--border-width-sm)) solid
+      var(--menu-arrow-stroke-color, var(--menu-popup-border-color, var(--color-border)));
+    border-inline-start: var(--menu-popup-border-width, var(--border-width-sm)) solid
+      var(--menu-arrow-stroke-color, var(--menu-popup-border-color, var(--color-border)));
+  }
+
+  .by_0RW_item, .by_0RW_triggerItem, .by_0RW_radioItem, .by_0RW_checkboxItem {
+    box-sizing: border-box;
+    min-height: var(--menu-item-height, var(--popup-item-min-height, 2rem));
+    border-radius: var(--menu-item-radius, var(--radius-sm));
+    background-color: var(--menu-item-bg, transparent);
+    color: inherit;
+    font: inherit;
+    font-size: var(--menu-item-font-size, var(--popup-item-font-size, var(--text-sm)));
+    line-height: var(--menu-item-line-height, var(--popup-item-line-height, var(--line-height-text-sm)));
+    user-select: none;
+    cursor: default;
+    border: 0;
+    outline: 0;
+    margin: 0;
+    text-decoration: none;
+    position: relative;
+
+    &:is([data-highlighted], [data-state="open"]) {
+      z-index: 0;
+
+      &:before {
+        content: "";
+        z-index: -1;
+        inset-block: 0;
+        inset-inline: var(--menu-highlight-inset-x, var(--popup-highlight-inset-x, var(--spacing-1)));
+        border-radius: var(--menu-highlight-radius, var(--popup-highlight-radius, var(--radius-sm)));
+        background-color: var(--menu-submenu-open-bg, var(--color-accent));
+        position: absolute;
+      }
+    }
+
+    &[data-highlighted] {
+      color: var(--menu-highlight-color, var(--color-accent-foreground));
+    }
+
+    &[data-highlighted]:before {
+      background-color: var(--menu-highlight-bg, var(--color-accent));
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+      background-color: var(--menu-item-bg-disabled, var(--menu-item-bg, transparent));
+      color: var(--menu-item-disabled-color, var(--color-muted-foreground));
+      cursor: default;
+    }
+
+    &[data-tone="destructive"] {
+      color: var(--menu-item-destructive-color, var(--color-destructive));
+
+      &[data-highlighted] {
+        color: var(--menu-item-destructive-highlight-color, var(--menu-item-destructive-color, var(--color-destructive)));
+
+        &:before {
+          background-color: var(--menu-item-destructive-highlight-bg, color-mix(in oklab, var(--color-destructive) 12%, transparent));
+        }
+      }
+    }
+  }
+
+  .by_0RW_item {
+    align-items: center;
+    gap: var(--menu-item-gap, var(--spacing-2));
+    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, .5rem));
+    padding-inline: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem))
+      var(--menu-item-padding-x-end, var(--popup-item-padding-x-end, 1rem));
+    display: flex;
+  }
+
+  .by_0RW_triggerItem {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--menu-trigger-item-gap, var(--spacing-3));
+    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, .5rem));
+    padding-inline: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem))
+      var(--menu-trigger-item-padding-x-end, 1rem);
+    display: flex;
+  }
+
+  .by_0RW_triggerItemIcon {
+    box-sizing: border-box;
+    width: var(--menu-trigger-item-icon-size, .875rem);
+    height: var(--menu-trigger-item-icon-size, .875rem);
+    color: currentColor;
+    flex-shrink: 0;
+    display: inline-flex;
+  }
+
+  .by_0RW_itemGroup {
+    padding-block: var(--menu-group-padding-y, 0);
+    display: grid;
+  }
+
+  .by_0RW_itemGroupLabel {
+    padding-block: var(--menu-group-label-padding-y, var(--popup-group-label-padding-y, .35rem));
+    padding-inline: var(--menu-group-label-padding-x-start, var(--popup-group-label-padding-x-start, .625rem))
+      var(--menu-group-label-padding-x-end, var(--popup-group-label-padding-x-end, .75rem));
+    color: var(--menu-group-label-color, var(--color-muted-foreground));
+    font-size: var(--menu-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
+    line-height: var(--menu-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
+    user-select: none;
+    cursor: default;
+    margin: 0;
+  }
+
+  .by_0RW_radioItemGroup {
+    display: grid;
+  }
+
+  .by_0RW_radioItem, .by_0RW_checkboxItem {
+    align-items: center;
+    gap: var(--menu-check-gap, var(--popup-check-gap, .5rem));
+    grid-template-columns: var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem))
+      minmax(0, 1fr);
+    padding-block: var(--menu-item-padding-y, var(--popup-item-padding-y, .5rem));
+    padding-inline: var(--menu-check-padding-x-start, var(--popup-check-padding-x-start, .625rem))
+      var(--menu-item-padding-x-end, var(--popup-item-padding-x-end, 1rem));
+    display: grid;
+
+    &[data-indicator-position="none"] {
+      grid-template-columns: minmax(0, 1fr);
+      padding-inline-start: var(--menu-item-padding-x-start, var(--popup-item-padding-x-start, 1rem));
+
+      & > .by_0RW_itemIndicator {
+        display: none;
+      }
+
+      & > .by_0RW_itemText {
+        grid-column-start: 1;
+      }
+    }
+
+    &[data-indicator-position="end"] {
+      grid-template-columns: minmax(0, 1fr)
+        var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+
+      & > .by_0RW_itemText {
+        grid-column-start: 1;
+      }
+
+      & > .by_0RW_itemIndicator {
+        grid-column-start: 2;
+        justify-self: end;
+      }
+    }
+  }
+
+  .by_0RW_checkboxItem[data-state="checked"] {
+    & > .by_0RW_itemIndicator {
+      background-color: var(--menu-checkbox-indicator-bg-checked, var(--menu-checkbox-indicator-bg, transparent));
+      border-color: var(--menu-checkbox-indicator-border-color-checked, var(--menu-checkbox-indicator-border-color, currentColor));
+    }
+  }
+
+  .by_0RW_itemIndicator {
+    width: var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+    height: var(--menu-check-indicator-size, var(--popup-check-indicator-size, .75rem));
+    border: var(--menu-checkbox-indicator-border-width, 0) solid
+      var(--menu-checkbox-indicator-border-color, currentColor);
+    border-radius: var(--menu-checkbox-indicator-radius, var(--radius-xs));
+    background-color: var(--menu-checkbox-indicator-bg, transparent);
+    grid-column-start: 1;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    &[data-state="checked"] {
+      color: var(--menu-item-indicator-color-checked, currentColor);
+    }
+  }
+
+  .by_0RW_itemIndicatorIcon {
+    width: 100%;
+    height: 100%;
+  }
+
+  .by_0RW_itemText {
+    grid-column-start: 2;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .by_0RW_itemTextContent {
+    align-items: center;
+    gap: var(--menu-item-text-content-gap, var(--spacing-2));
+    vertical-align: top;
+    min-width: 0;
+    max-width: 100%;
+    display: inline-flex;
+  }
+
+  .by_0RW_itemTextIcon {
+    width: var(--menu-item-text-icon-size, 1rem);
+    height: var(--menu-item-text-icon-size, 1rem);
+    color: var(--menu-item-text-icon-color, currentColor);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .by_0RW_itemTextLabel {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .by_0RW_itemShortcut {
+    color: var(--menu-item-shortcut-color, var(--color-muted-foreground));
+    font-size: var(--menu-item-shortcut-font-size, var(--text-xs));
+    line-height: var(--menu-item-shortcut-line-height, var(--line-height-text-xs));
+    white-space: nowrap;
+    margin-inline-start: auto;
+    padding-inline-start: var(--menu-item-shortcut-padding-x-start, var(--spacing-4));
+  }
+
+  .by_0RW_separator {
+    box-sizing: border-box;
+    height: var(--menu-separator-height, var(--border-width-sm));
+    margin-block: var(--menu-separator-margin-y, var(--popup-separator-margin-y, .375rem));
+    margin-inline: var(--menu-separator-margin-x-start, var(--popup-separator-margin-x-start, 1rem))
+      var(--menu-separator-margin-x-end, var(--popup-separator-margin-x-end, 1rem));
+    background-color: var(--menu-separator-color, var(--color-border));
+    border: 0;
+  }
+
+  @keyframes by_0RW_menuContentIn {
+    from {
+      opacity: var(--menu-popup-starting-opacity, 0);
+      translate: var(--menu-popup-starting-translate-x, 0) var(--menu-popup-starting-translate-y, 0);
+      transform: scale(var(--menu-popup-starting-scale, var(--scale-popup)));
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes by_0RW_menuContentOut {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: var(--menu-popup-ending-opacity, 0);
+      translate: var(--menu-popup-ending-translate-x, 0) var(--menu-popup-ending-translate-y, 0);
+      transform: scale(var(--menu-popup-ending-scale, var(--scale-popup)));
+    }
+  }
+}

package/dist/components/menu/Menu.d.ts

@@ -0,0 +1,83 @@
+import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
+import { ComponentProps } from "react";
+import { Menu } from "@ark-ui/react/menu";
+
+//#region src/components/menu/Menu.d.ts
+type MenuIndicatorPosition = 'start' | 'end' | 'none';
+type MenuItemTone = 'default' | 'destructive';
+type MenuItemProps = ComponentProps<typeof Menu.Item> & {
+  tone?: MenuItemTone;
+};
+type MenuCheckboxItemProps = ComponentProps<typeof Menu.CheckboxItem> & {
+  indicator?: MenuIndicatorPosition;
+};
+type MenuRadioItemProps = ComponentProps<typeof Menu.RadioItem> & {
+  indicator?: MenuIndicatorPosition;
+};
+type MenuRootProps = ComponentProps<typeof Menu.Root> & OverlayPortalProps;
+type MenuRootProviderProps = ComponentProps<typeof Menu.RootProvider> & OverlayPortalProps;
+declare function MenuRoot({
+  portalled,
+  portalRef,
+  ...props
+}: MenuRootProps): import("react").JSX.Element;
+declare function MenuRootProvider({
+  portalled,
+  portalRef,
+  ...props
+}: MenuRootProviderProps): import("react").JSX.Element;
+declare function MenuTriggerIcon({
+  className,
+  children,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function MenuTriggerItemIcon({
+  className,
+  children,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function MenuItemTextContent({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function MenuItemTextIcon({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function MenuItemTextLabel({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function MenuItemShortcut({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare const Menu$1: typeof MenuRoot & {
+  Root: typeof MenuRoot;
+  RootProvider: typeof MenuRootProvider;
+  Trigger: import("react").ForwardRefExoticComponent<Omit<Menu.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  TriggerIcon: typeof MenuTriggerIcon;
+  Indicator: import("react").ForwardRefExoticComponent<Omit<Menu.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ContextTrigger: import("react").ForwardRefExoticComponent<Omit<Menu.ContextTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Positioner: import("react").ForwardRefExoticComponent<Omit<Menu.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<Menu.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Arrow: import("react").ForwardRefExoticComponent<Omit<Menu.ArrowProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ArrowTip: import("react").ForwardRefExoticComponent<Omit<Menu.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  TriggerItem: import("react").ForwardRefExoticComponent<Omit<Menu.TriggerItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  TriggerItemIcon: typeof MenuTriggerItemIcon;
+  Separator: import("react").ForwardRefExoticComponent<Omit<Menu.SeparatorProps & import("react").RefAttributes<HTMLHRElement>, "ref"> & import("react").RefAttributes<HTMLHRElement>>;
+  ItemGroup: import("react").ForwardRefExoticComponent<Omit<Menu.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemGroupLabel: import("react").ForwardRefExoticComponent<Omit<Menu.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RadioItemGroup: import("react").ForwardRefExoticComponent<Omit<Menu.RadioItemGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RadioItem: import("react").ForwardRefExoticComponent<Omit<MenuRadioItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  CheckboxItem: import("react").ForwardRefExoticComponent<Omit<MenuCheckboxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Menu.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemText: import("react").ForwardRefExoticComponent<Omit<Menu.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemTextContent: typeof MenuItemTextContent;
+  ItemTextIcon: typeof MenuItemTextIcon;
+  ItemTextLabel: typeof MenuItemTextLabel;
+  ItemShortcut: typeof MenuItemShortcut;
+};
+//#endregion
+export { Menu$1 as Menu };