@moduix/react 1.1.0

package/dist/components/pin-input/PinInput.css

@@ -0,0 +1,96 @@
+@layer ui.components {
+  .WDSDQW_root {
+    align-items: flex-start;
+    gap: var(--pin-input-root-gap, var(--spacing-2));
+    width: var(--pin-input-width, auto);
+    max-width: var(--pin-input-max-width, none);
+    flex-direction: column;
+    display: inline-flex;
+
+    &[data-disabled] {
+      opacity: var(--pin-input-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .WDSDQW_label {
+    color: var(--pin-input-label-color, var(--color-foreground));
+    font-size: var(--pin-input-label-font-size, var(--text-sm));
+    font-weight: var(--pin-input-label-font-weight, var(--weight-medium));
+    line-height: var(--pin-input-label-line-height, var(--line-height-text-sm));
+  }
+
+  .WDSDQW_control {
+    align-items: center;
+    gap: var(--pin-input-gap, var(--spacing-2));
+    display: inline-flex;
+  }
+
+  .WDSDQW_input {
+    box-sizing: border-box;
+    width: var(--pin-input-input-width, var(--pin-input-input-size, 2.5rem));
+    height: var(--pin-input-input-height, var(--pin-input-input-size, 2.5rem));
+    border: var(--pin-input-border-width, var(--border-width-sm)) solid
+      var(--pin-input-border-color, var(--color-border));
+    border-radius: var(--pin-input-radius, var(--radius-md));
+    padding-block: var(--pin-input-input-padding-y, 0);
+    padding-inline: var(--pin-input-input-padding-x, 0);
+    background-color: var(--pin-input-bg, var(--color-background));
+    color: var(--pin-input-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--pin-input-font-size, var(--text-lg));
+    font-weight: var(--pin-input-font-weight, var(--weight-medium));
+    line-height: var(--pin-input-line-height, var(--line-height-text-lg));
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    outline: var(--pin-input-focus-ring-width, var(--pin-input-border-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: var(--pin-input-focus-ring-offset, -1px);
+    transition: border-color var(--pin-input-transition, var(--transition-default)),
+      outline-color var(--pin-input-transition, var(--transition-default)),
+      background-color var(--pin-input-transition, var(--transition-default));
+    flex: none;
+    margin: 0;
+
+    &::placeholder {
+      color: var(--pin-input-placeholder-color, var(--color-muted-foreground));
+    }
+
+    &:focus-visible {
+      outline-color: var(--pin-input-focus-ring-color, var(--color-ring));
+    }
+
+    &[data-complete] {
+      border-color: var(--pin-input-border-color-complete, var(--pin-input-border-color, var(--color-border)));
+    }
+
+    &[data-invalid] {
+      border-color: var(--pin-input-border-color-invalid, var(--color-destructive));
+
+      &:focus-visible {
+        outline-color: var(--pin-input-border-color-invalid, var(--color-destructive));
+      }
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+    }
+  }
+
+  .WDSDQW_separator {
+    width: var(--pin-input-separator-width, var(--pin-input-separator-size, 1rem));
+    height: var(--pin-input-separator-height, var(--pin-input-separator-size, 1rem));
+    color: var(--pin-input-separator-color, var(--color-muted-foreground));
+    pointer-events: none;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    line-height: 1;
+    display: inline-flex;
+
+    & > svg {
+      flex: none;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/dist/components/pin-input/PinInput.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps } from "react";
+import { PinInput, UsePinInputProps } from "@ark-ui/react/pin-input";
+
+//#region src/components/pin-input/PinInput.d.ts
+declare function PinInputSeparator({
+  className,
+  'aria-hidden': ariaHidden,
+  role,
+  children,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function usePinInput$1(props?: UsePinInputProps): import("@ark-ui/react/pin-input").UsePinInputReturn;
+declare const PinInput$1: import("react").ForwardRefExoticComponent<Omit<PinInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<Omit<PinInput.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Omit<PinInput.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<PinInput.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  Control: import("react").ForwardRefExoticComponent<Omit<PinInput.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Input: import("react").ForwardRefExoticComponent<Omit<PinInput.InputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  HiddenInput: import("react").ForwardRefExoticComponent<Omit<PinInput.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Separator: typeof PinInputSeparator;
+};
+//#endregion
+export { PinInput$1 as PinInput, usePinInput$1 as usePinInput };

package/dist/components/pin-input/PinInput.js

@@ -0,0 +1,85 @@
+import { SeparatorMarkIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import PinInput_module_default from "./PinInput.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { PinInput, usePinInput } from "@ark-ui/react/pin-input";
+//#region src/components/pin-input/PinInput.tsx
+const PinInputRoot = forwardRef(function PinInputRoot({ children, className, count, placeholder = "", ...props }, ref) {
+	return /* @__PURE__ */ jsx(PinInput.Root, {
+		ref,
+		"data-slot": "pin-input-root",
+		className: clsx(PinInput_module_default.root, normalizeClassName(className)),
+		count,
+		placeholder,
+		...props,
+		children
+	});
+});
+const PinInputRootProvider = forwardRef(function PinInputRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(PinInput.RootProvider, {
+		ref,
+		"data-slot": "pin-input-root-provider",
+		className: clsx(PinInput_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const PinInputLabel = forwardRef(function PinInputLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(PinInput.Label, {
+		ref,
+		"data-slot": "pin-input-label",
+		className: clsx(PinInput_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const PinInputControl = forwardRef(function PinInputControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(PinInput.Control, {
+		ref,
+		"data-slot": "pin-input-control",
+		className: clsx(PinInput_module_default.control, normalizeClassName(className)),
+		...props
+	});
+});
+const PinInputInput = forwardRef(function PinInputInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(PinInput.Input, {
+		ref,
+		"data-slot": "pin-input-input",
+		className: clsx(PinInput_module_default.input, normalizeClassName(className)),
+		...props
+	});
+});
+const PinInputHiddenInput = forwardRef(function PinInputHiddenInput(props, ref) {
+	return /* @__PURE__ */ jsx(PinInput.HiddenInput, {
+		ref,
+		"data-slot": "pin-input-hidden-input",
+		...props
+	});
+});
+function PinInputSeparator({ className, "aria-hidden": ariaHidden = true, role = "presentation", children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "pin-input-separator",
+		"aria-hidden": ariaHidden,
+		role,
+		className: clsx(PinInput_module_default.separator, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(SeparatorMarkIcon, {})
+	});
+}
+function usePinInput$1(props = {}) {
+	return usePinInput({
+		placeholder: "",
+		...props
+	});
+}
+const PinInput$1 = Object.assign(PinInputRoot, {
+	Root: PinInputRoot,
+	RootProvider: PinInputRootProvider,
+	Label: PinInputLabel,
+	Control: PinInputControl,
+	Input: PinInputInput,
+	HiddenInput: PinInputHiddenInput,
+	Separator: PinInputSeparator
+});
+//#endregion
+export { PinInput$1 as PinInput, usePinInput$1 as usePinInput };

package/dist/components/pin-input/PinInput.module.js

@@ -0,0 +1,11 @@
+import './PinInput.css';
+//#region src/components/pin-input/PinInput.module.css
+var PinInput_module_default = {
+	"control": "WDSDQW_control",
+	"input": "WDSDQW_input",
+	"label": "WDSDQW_label",
+	"root": "WDSDQW_root",
+	"separator": "WDSDQW_separator"
+};
+//#endregion
+export { PinInput_module_default as default };

package/dist/components/pin-input/index.d.ts

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

package/dist/components/popover/Popover.css

@@ -0,0 +1,162 @@
+@layer ui.components {
+  .xEBSjq_trigger, .xEBSjq_closeTrigger {
+    box-sizing: border-box;
+    min-height: var(--popover-control-height, var(--size-lg));
+    padding: var(--popover-control-padding-y, .5rem) var(--popover-control-padding-x, .875rem);
+    border: var(--popover-control-border-width, var(--border-width-sm)) solid
+      var(--popover-control-border-color, var(--color-border));
+    border-radius: var(--popover-control-radius, var(--radius-md));
+    background-color: var(--popover-control-bg, var(--color-background));
+    color: var(--popover-control-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--popover-control-font-size, var(--text-md));
+    line-height: var(--popover-control-line-height, var(--line-height-text-md));
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--popover-transition, var(--transition-default)),
+      border-color var(--popover-transition, var(--transition-default)),
+      color var(--popover-transition, var(--transition-default));
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--popover-control-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:active, &[data-state="open"] {
+      background-color: var(--popover-control-bg-active, var(--popover-control-bg-hover, var(--color-accent)));
+    }
+
+    &:focus-visible {
+      outline: var(--popover-focus-ring-width, var(--popover-control-border-width, var(--border-width-sm)))
+        solid var(--popover-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--popover-focus-ring-width, var(--popover-control-border-width, var(--border-width-sm))) *
+          -1);
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      opacity: var(--popover-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .xEBSjq_positioner {
+    z-index: var(--z-index, var(--z-popup));
+    max-width: var(--available-width);
+    outline: 0;
+  }
+
+  .xEBSjq_content {
+    --popover-close-icon-size-effective: var(--popover-close-icon-size, 1.75rem);
+    --popover-close-icon-offset-effective: var(--popover-close-icon-offset, var(--spacing-3));
+    --popover-header-padding-inline-end-effective: var(--popover-header-padding-inline-end, calc(var(--popover-close-icon-size-effective) + var(--popover-close-icon-offset-effective)));
+    z-index: calc(var(--z-popup) + var(--layer-index, 0));
+    box-sizing: border-box;
+    width: var(--popover-width, auto);
+    height: var(--popover-height, auto);
+    min-width: min(var(--popover-min-width, 16rem), var(--available-width));
+    max-width: min(var(--popover-max-width, 28rem), var(--available-width));
+    max-height: min(var(--popover-max-height, 24rem), var(--available-height, 100dvh));
+    padding: var(--popover-padding-y, 1rem) var(--popover-padding-x, 1rem);
+    border-radius: var(--popover-radius, var(--radius-md));
+    background-color: var(--popover-bg, var(--color-popover));
+    color: var(--popover-color, var(--color-popover-foreground));
+    outline: var(--popover-border-width, var(--border-width-sm)) solid
+      var(--popover-border-color, var(--color-border));
+    box-shadow: var(--popover-shadow, var(--shadow-lg));
+    transform-origin: var(--transform-origin);
+    border: 0;
+    position: relative;
+    overflow: visible;
+
+    &[data-state="open"] {
+      animation: xEBSjq_popover-enter var(--popover-transition, var(--duration-fast)) both;
+    }
+
+    &[data-state="closed"] {
+      animation: xEBSjq_popover-exit var(--popover-transition, var(--duration-fast)) both;
+    }
+  }
+
+  .xEBSjq_arrow {
+    --arrow-size: var(--popover-arrow-size, .625rem);
+    --arrow-background: var(--popover-bg, var(--color-popover));
+  }
+
+  .xEBSjq_arrowTip {
+    border-top: var(--popover-border-width, var(--border-width-sm)) solid
+      var(--popover-arrow-stroke-color, var(--popover-border-color, var(--color-border)));
+    border-left: var(--popover-border-width, var(--border-width-sm)) solid
+      var(--popover-arrow-stroke-color, var(--popover-border-color, var(--color-border)));
+  }
+
+  .xEBSjq_title {
+    color: var(--popover-title-color, var(--popover-color, var(--color-popover-foreground)));
+    font-size: var(--popover-title-font-size, var(--text-md));
+    font-weight: var(--popover-title-font-weight, var(--weight-semibold));
+    line-height: var(--popover-title-line-height, var(--line-height-text-md));
+    margin: 0;
+  }
+
+  .xEBSjq_description {
+    margin: var(--popover-description-margin, 0);
+    color: var(--popover-description-color, var(--color-muted-foreground));
+    font-size: var(--popover-description-font-size, var(--text-sm));
+    line-height: var(--popover-description-line-height, var(--line-height-text-sm));
+  }
+
+  .xEBSjq_closeIcon {
+    --close-button-size: var(--popover-close-icon-size-effective);
+    --close-button-radius: var(--popover-close-icon-radius, var(--radius-sm));
+    --close-button-icon-size: var(--popover-close-icon-glyph-size, .875rem);
+    --close-button-bg: var(--popover-close-icon-bg, transparent);
+    --close-button-bg-hover: var(--popover-close-icon-bg-hover, var(--color-accent));
+    --close-button-color: var(--popover-close-icon-color, var(--color-muted-foreground));
+    --close-button-color-hover: var(--popover-close-icon-color-hover, var(--popover-color, var(--color-popover-foreground)));
+    --close-button-focus-ring-color: var(--popover-close-icon-focus-ring-color, var(--color-ring));
+    position: absolute;
+    inset-block-start: var(--popover-close-icon-offset-effective);
+    inset-inline-end: var(--popover-close-icon-offset-effective);
+  }
+
+  .xEBSjq_header {
+    gap: var(--popover-header-gap, var(--spacing-1));
+    padding-inline-end: var(--popover-header-padding-inline-end-effective);
+    display: grid;
+  }
+
+  .xEBSjq_body {
+    margin: var(--popover-body-margin, 0);
+  }
+
+  .xEBSjq_footer {
+    align-items: center;
+    justify-content: var(--popover-footer-justify, flex-end);
+    gap: var(--popover-footer-gap, var(--spacing-2));
+    margin: var(--popover-footer-margin, var(--spacing-3) 0 0);
+    display: flex;
+  }
+
+  @keyframes xEBSjq_popover-enter {
+    from {
+      opacity: var(--popover-content-starting-opacity, 0);
+      translate: var(--popover-content-starting-translate-x, 0)
+        var(--popover-content-starting-translate-y, 0);
+      scale: var(--popover-content-starting-scale, var(--scale-popup));
+    }
+  }
+
+  @keyframes xEBSjq_popover-exit {
+    to {
+      opacity: var(--popover-content-ending-opacity, 0);
+      translate: var(--popover-content-ending-translate-x, 0)
+        var(--popover-content-ending-translate-y, 0);
+      scale: var(--popover-content-ending-scale, var(--scale-popup));
+    }
+  }
+}

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,50 @@
+import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
+import { ComponentProps } from "react";
+import { Popover, usePopover } from "@ark-ui/react/popover";
+
+//#region src/components/popover/Popover.d.ts
+type PopoverRootProps = ComponentProps<typeof Popover.Root> & OverlayPortalProps;
+type PopoverRootProviderProps = ComponentProps<typeof Popover.RootProvider> & OverlayPortalProps;
+declare function PopoverRoot({
+  portalled,
+  portalRef,
+  ...props
+}: PopoverRootProps): import("react").JSX.Element;
+declare function PopoverRootProvider({
+  portalled,
+  portalRef,
+  value,
+  ...props
+}: PopoverRootProviderProps): import("react").JSX.Element;
+declare function PopoverHeader({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function PopoverBody({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function PopoverFooter({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare const Popover$1: typeof PopoverRoot & {
+  Root: typeof PopoverRoot;
+  RootProvider: typeof PopoverRootProvider;
+  Anchor: import("react").ForwardRefExoticComponent<Omit<Popover.AnchorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Trigger: import("react").ForwardRefExoticComponent<Omit<Popover.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Indicator: import("react").ForwardRefExoticComponent<Omit<Popover.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Positioner: import("react").ForwardRefExoticComponent<Omit<Popover.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Content: import("react").ForwardRefExoticComponent<Omit<Popover.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Arrow: import("react").ForwardRefExoticComponent<Omit<Popover.ArrowProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ArrowTip: import("react").ForwardRefExoticComponent<Omit<Popover.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Title: import("react").ForwardRefExoticComponent<Omit<Popover.TitleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<Popover.DescriptionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  CloseTrigger: import("react").ForwardRefExoticComponent<Omit<Popover.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<Popover.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Header: typeof PopoverHeader;
+  Body: typeof PopoverBody;
+  Footer: typeof PopoverFooter;
+};
+//#endregion
+export { Popover$1 as Popover, usePopover };

package/dist/components/popover/Popover.js

@@ -0,0 +1,167 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CloseButton } from "../close-button/CloseButton.js";
+import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
+import Popover_module_default from "./Popover.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Popover, usePopover } from "@ark-ui/react/popover";
+//#region src/components/popover/Popover.tsx
+const DEFAULT_CLOSE_BUTTON_LABEL = "Close popover";
+function PopoverRoot({ portalled, portalRef, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(Popover.Root, {
+			portalled,
+			...props
+		})
+	});
+}
+function PopoverRootProvider({ portalled, portalRef, value, ...props }) {
+	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
+		portalled: portalled ?? value.portalled,
+		portalRef,
+		children: /* @__PURE__ */ jsx(Popover.RootProvider, {
+			value,
+			...props
+		})
+	});
+}
+const PopoverAnchor = forwardRef(function PopoverAnchor({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Popover.Anchor, {
+		ref,
+		"data-slot": "popover-anchor",
+		className: normalizeClassName(className),
+		...props
+	});
+});
+const PopoverTrigger = forwardRef(function PopoverTrigger({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		ref,
+		"data-slot": "popover-trigger",
+		asChild,
+		className: clsx(!asChild && Popover_module_default.trigger, normalizeClassName(className)),
+		...props
+	});
+});
+const PopoverIndicator = forwardRef(function PopoverIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Popover.Indicator, {
+		ref,
+		"data-slot": "popover-indicator",
+		className: normalizeClassName(className),
+		...props
+	});
+});
+const PopoverPositioner = forwardRef(function PopoverPositioner({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		ref,
+		"data-slot": "popover-positioner",
+		className: clsx(Popover_module_default.positioner, normalizeClassName(className)),
+		...props
+	}) });
+});
+const PopoverContent = forwardRef(function PopoverContent({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Popover.Content, {
+		ref,
+		"data-slot": "popover-content",
+		className: clsx(Popover_module_default.content, normalizeClassName(className)),
+		...props
+	});
+});
+const PopoverArrow = forwardRef(function PopoverArrow({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Popover.Arrow, {
+		ref,
+		"data-slot": "popover-arrow",
+		className: clsx(Popover_module_default.arrow, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(PopoverArrowTip, {})
+	});
+});
+const PopoverArrowTip = forwardRef(function PopoverArrowTip({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Popover.ArrowTip, {
+		ref,
+		"data-slot": "popover-arrow-tip",
+		className: clsx(Popover_module_default.arrowTip, normalizeClassName(className)),
+		...props
+	});
+});
+const PopoverTitle = forwardRef(function PopoverTitle({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		ref,
+		"data-slot": "popover-title",
+		className: clsx(Popover_module_default.title, normalizeClassName(className)),
+		...props
+	});
+});
+const PopoverDescription = forwardRef(function PopoverDescription({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		ref,
+		"data-slot": "popover-description",
+		className: clsx(Popover_module_default.description, normalizeClassName(className)),
+		...props
+	});
+});
+const PopoverCloseTrigger = forwardRef(function PopoverCloseTrigger({ asChild, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Popover.CloseTrigger, {
+		ref,
+		"data-slot": "popover-close-trigger",
+		asChild,
+		className: clsx(!asChild && Popover_module_default.closeTrigger, normalizeClassName(className)),
+		...props
+	});
+});
+const PopoverCloseIcon = forwardRef(function PopoverCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Popover.CloseTrigger, {
+		asChild: true,
+		...props,
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			ref,
+			"data-slot": "popover-close-icon",
+			"aria-label": ariaLabel,
+			className: clsx(Popover_module_default.closeIcon, normalizeClassName(className)),
+			children
+		})
+	});
+});
+function PopoverHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-header",
+		className: clsx(Popover_module_default.header, className),
+		...props
+	});
+}
+function PopoverBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-body",
+		className: clsx(Popover_module_default.body, className),
+		...props
+	});
+}
+function PopoverFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-footer",
+		className: clsx(Popover_module_default.footer, className),
+		...props
+	});
+}
+const Popover$1 = Object.assign(PopoverRoot, {
+	Root: PopoverRoot,
+	RootProvider: PopoverRootProvider,
+	Anchor: PopoverAnchor,
+	Trigger: PopoverTrigger,
+	Indicator: PopoverIndicator,
+	Positioner: PopoverPositioner,
+	Content: PopoverContent,
+	Arrow: PopoverArrow,
+	ArrowTip: PopoverArrowTip,
+	Title: PopoverTitle,
+	Description: PopoverDescription,
+	CloseTrigger: PopoverCloseTrigger,
+	CloseIcon: PopoverCloseIcon,
+	Header: PopoverHeader,
+	Body: PopoverBody,
+	Footer: PopoverFooter
+});
+//#endregion
+export { Popover$1 as Popover, usePopover };

package/dist/components/popover/Popover.module.js

@@ -0,0 +1,20 @@
+import './Popover.css';
+//#region src/components/popover/Popover.module.css
+var Popover_module_default = {
+	"arrow": "xEBSjq_arrow",
+	"arrowTip": "xEBSjq_arrowTip",
+	"body": "xEBSjq_body",
+	"closeIcon": "xEBSjq_closeIcon",
+	"closeTrigger": "xEBSjq_closeTrigger",
+	"content": "xEBSjq_content",
+	"description": "xEBSjq_description",
+	"footer": "xEBSjq_footer",
+	"header": "xEBSjq_header",
+	"popover-enter": "xEBSjq_popover-enter",
+	"popover-exit": "xEBSjq_popover-exit",
+	"positioner": "xEBSjq_positioner",
+	"title": "xEBSjq_title",
+	"trigger": "xEBSjq_trigger"
+};
+//#endregion
+export { Popover_module_default as default };

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

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