@moduix/react 1.1.0 → 2.0.0

package/dist/components/combobox/Combobox.css

@@ -1,8 +1,10 @@
 @layer ui.components {
-  @keyframes AqJn2G_combobox-content-open {
+  @keyframes mcW7mG_combobox-content-open {
     from {
-      opacity: var(--combobox-content-closed-opacity, 0);
-      transform: scale(var(--combobox-content-closed-scale, var(--scale-popup)));
+      opacity: var(--combobox-content-closed-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--popup-motion-starting-translate-x, 0)
+        var(--popup-motion-starting-translate-y, 0);
+      transform: scale(var(--combobox-content-closed-scale, var(--popup-motion-starting-scale, var(--scale-popup))));
     }
 
     to {
@@ -11,19 +13,20 @@
     }
   }
 
-  @keyframes AqJn2G_combobox-content-closed {
+  @keyframes mcW7mG_combobox-content-closed {
     from {
       opacity: 1;
       transform: scale(1);
     }
 
     to {
-      opacity: var(--combobox-content-closed-opacity, 0);
-      transform: scale(var(--combobox-content-closed-scale, var(--scale-popup)));
+      opacity: var(--combobox-content-closed-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--popup-motion-ending-translate-x, 0) var(--popup-motion-ending-translate-y, 0);
+      transform: scale(var(--combobox-content-closed-scale, var(--popup-motion-ending-scale, var(--scale-popup))));
     }
   }
 
-  .AqJn2G_root {
+  .mcW7mG_root {
     box-sizing: border-box;
     width: var(--combobox-width, 16rem);
     max-width: var(--combobox-max-width, 100%);
@@ -34,7 +37,7 @@
     display: flex;
   }
 
-  .AqJn2G_label {
+  .mcW7mG_label {
     color: var(--combobox-label-color, var(--combobox-color, var(--color-foreground)));
     font-size: var(--combobox-label-font-size, var(--text-sm));
     font-weight: var(--combobox-label-font-weight, var(--weight-medium));
@@ -48,7 +51,7 @@
     }
   }
 
-  .AqJn2G_control {
+  .mcW7mG_control {
     border: var(--combobox-border-width, var(--border-width-sm)) solid
       var(--combobox-border-color, var(--color-border));
     border-radius: var(--combobox-radius, var(--radius-md));
@@ -87,21 +90,21 @@
 
     &:not([data-disabled]) {
       @media (hover: hover) {
-        &:hover:not(:has(.AqJn2G_clearTrigger:hover)) {
+        &:hover:not(:has(.mcW7mG_clearTrigger:hover)) {
           background-color: var(--combobox-bg-hover, var(--color-accent));
         }
       }
     }
   }
 
-  .AqJn2G_input {
+  .mcW7mG_input {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
     height: var(--combobox-control-height, var(--size-lg));
     border-radius: inherit;
     padding-inline: var(--combobox-input-padding-x-start, .875rem)
-      var(--combobox-input-padding-x-end, 4.25rem);
+      var(--combobox-input-padding-x-end, .875rem);
     color: inherit;
     font: inherit;
     background: none;
@@ -114,7 +117,15 @@
     }
   }
 
-  .AqJn2G_trigger, .AqJn2G_clearTrigger {
+  .mcW7mG_control:has(.mcW7mG_trigger) .mcW7mG_input {
+    padding-inline-end: var(--combobox-input-padding-x-end-with-trigger, 2.75rem);
+  }
+
+  .mcW7mG_control:has(.mcW7mG_clearTrigger) .mcW7mG_input {
+    padding-inline-end: var(--combobox-input-padding-x-end-with-clear, 4.375rem);
+  }
+
+  .mcW7mG_trigger {
     box-sizing: border-box;
     width: var(--combobox-action-size, 1.5rem);
     height: var(--combobox-action-size, 1.5rem);
@@ -163,21 +174,35 @@
     }
   }
 
-  .AqJn2G_trigger {
+  .mcW7mG_trigger {
     right: var(--combobox-action-offset-right, .5rem);
   }
 
-  .AqJn2G_clearTrigger {
+  .mcW7mG_clearTrigger {
+    --close-button-size: var(--combobox-action-size, 1.5rem);
+    --close-button-icon-size: var(--combobox-icon-size, 1rem);
+    --close-button-radius: var(--combobox-action-radius, var(--radius-sm));
+    --close-button-bg: var(--combobox-action-bg, transparent);
+    --close-button-bg-hover: var(--combobox-action-bg-hover, var(--color-muted));
+    --close-button-color: var(--combobox-icon-color, var(--color-muted-foreground));
+    --close-button-color-hover: var(--combobox-action-color-hover, var(--color-foreground));
+    --close-button-focus-ring-width: var(--combobox-focus-ring-width, var(--border-width-sm));
+    --close-button-focus-ring-color: var(--combobox-focus-ring-color, var(--color-ring));
+    --close-button-focus-ring-offset: var(--combobox-focus-ring-offset, var(--border-width-sm));
+    --close-button-transition: var(--combobox-transition, var(--transition-default));
+    top: 50%;
     right: calc(var(--combobox-action-offset-right, .5rem) + var(--combobox-action-size, 1.5rem) +
         var(--combobox-action-gap, .125rem));
+    position: absolute;
+    transform: translateY(-50%);
   }
 
-  .AqJn2G_positioner {
+  .mcW7mG_positioner {
     z-index: var(--z-index);
     outline: 0;
   }
 
-  .AqJn2G_content {
+  .mcW7mG_content {
     box-sizing: border-box;
     z-index: calc(var(--z-popup) + var(--layer-index, 0));
     min-width: var(--reference-width);
@@ -199,15 +224,19 @@
     overflow: auto;
 
     &[data-state="open"] {
-      animation: AqJn2G_combobox-content-open var(--combobox-transition, var(--transition-default));
+      animation: mcW7mG_combobox-content-open
+        var(--combobox-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
 
     &[data-state="closed"] {
-      animation: AqJn2G_combobox-content-closed var(--combobox-transition, var(--transition-default));
+      animation: mcW7mG_combobox-content-closed
+        var(--combobox-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
   }
 
-  .AqJn2G_list {
+  .mcW7mG_list {
     overscroll-behavior: contain;
     min-height: 0;
     scroll-padding-block: var(--combobox-content-padding-y, var(--spacing-1));
@@ -221,7 +250,7 @@
     }
   }
 
-  .AqJn2G_empty {
+  .mcW7mG_empty {
     padding-block: var(--combobox-empty-padding-y, .75rem);
     padding-inline: var(--combobox-empty-padding-x, 1rem);
     color: var(--combobox-empty-color, var(--color-muted-foreground));
@@ -229,7 +258,7 @@
     line-height: var(--combobox-empty-line-height, var(--line-height-text-sm));
   }
 
-  .AqJn2G_itemGroup {
+  .mcW7mG_itemGroup {
     flex-direction: column;
     display: flex;
 
@@ -238,7 +267,7 @@
     }
   }
 
-  .AqJn2G_itemGroupLabel {
+  .mcW7mG_itemGroupLabel {
     z-index: 1;
     padding-block: var(--combobox-item-group-label-padding-y, .35rem);
     padding-inline: var(--combobox-item-group-label-padding-x, .625rem);
@@ -251,7 +280,7 @@
     top: 0;
   }
 
-  .AqJn2G_item {
+  .mcW7mG_item {
     box-sizing: border-box;
     width: calc(100% - var(--combobox-item-inset-x, var(--spacing-2)));
     min-height: var(--combobox-item-min-height, 2rem);
@@ -291,7 +320,7 @@
     }
   }
 
-  .AqJn2G_itemText {
+  .mcW7mG_itemText {
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1;
@@ -299,7 +328,7 @@
     overflow: hidden;
   }
 
-  .AqJn2G_itemIndicator {
+  .mcW7mG_itemIndicator {
     width: var(--combobox-item-indicator-size, .75rem);
     height: var(--combobox-item-indicator-size, .75rem);
     flex-shrink: 0;

package/dist/components/combobox/Combobox.d.ts

@@ -1,7 +1,12 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
-import { Combobox } from "@ark-ui/react/combobox";
+import { ComponentProps, ReactNode } from "react";
+import { Combobox, useCombobox, useComboboxContext } from "@ark-ui/react/combobox";
 
 //#region src/components/combobox/Combobox.d.ts
+type ComboboxOptionProps = Omit<ComponentProps<typeof Combobox.Item>, 'asChild' | 'children'> & {
+  children: ReactNode;
+  indicator?: ReactNode | false;
+};
 declare const Combobox$1: Combobox.RootComponent<OverlayPortalProps> & {
   Root: Combobox.RootComponent<OverlayPortalProps>;
   RootProvider: Combobox.RootProviderComponent<OverlayPortalProps>;
@@ -19,6 +24,8 @@ declare const Combobox$1: Combobox.RootComponent<OverlayPortalProps> & {
   Item: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemText: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Combobox.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Option: import("react").ForwardRefExoticComponent<Omit<ComboboxOptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: <T extends unknown>(props: Combobox.ContextProps<T>) => ReactNode;
 };
 //#endregion
-export { Combobox$1 as Combobox };
+export { Combobox$1 as Combobox, useCombobox, useComboboxContext };

package/dist/components/combobox/Combobox.js

@@ -1,11 +1,12 @@
-import { CheckIcon, ChevronUpDownIcon, CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon, ChevronUpDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Combobox_module_default from "./Combobox.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Combobox } from "@ark-ui/react/combobox";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox, useCombobox, useComboboxContext } from "@ark-ui/react/combobox";
 //#region src/components/combobox/Combobox.tsx
 const ComboboxRoot = forwardRef(function ComboboxRoot({ className, portalled, portalRef, ...props }, ref) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
@@ -56,13 +57,29 @@ const ComboboxInput = forwardRef(function ComboboxInput({ asChild, className, ..
 		...props
 	});
 });
-const ComboboxClearTrigger = forwardRef(function ComboboxClearTrigger({ className, children, ...props }, ref) {
+const ComboboxClearTrigger = forwardRef(function ComboboxClearTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	const triggerClassName = clsx(Combobox_module_default.clearTrigger, normalizeClassName(className));
+	if (asChild) return /* @__PURE__ */ jsx(Combobox.ClearTrigger, {
+		ref,
+		asChild: true,
+		"data-slot": "combobox-clear-trigger",
+		className: triggerClassName,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		...props,
+		children
+	});
 	return /* @__PURE__ */ jsx(Combobox.ClearTrigger, {
 		ref,
+		asChild: true,
 		"data-slot": "combobox-clear-trigger",
-		className: clsx(Combobox_module_default.clearTrigger, normalizeClassName(className)),
+		className: triggerClassName,
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			"aria-label": ariaLabel ?? (ariaLabelledBy == null ? "Clear selection" : void 0),
+			"aria-labelledby": ariaLabelledBy,
+			children
+		})
 	});
 });
 const ComboboxTrigger = forwardRef(function ComboboxTrigger({ className, children, ...props }, ref) {
@@ -147,6 +164,13 @@ const ComboboxItemIndicator = forwardRef(function ComboboxItemIndicator({ classN
 		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
 	});
 });
+const ComboboxOption = forwardRef(function ComboboxOption({ children, indicator, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(ComboboxItem, {
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx(ComboboxItemText, { children }), indicator !== false ? /* @__PURE__ */ jsx(ComboboxItemIndicator, { children: indicator }) : null]
+	});
+});
 const Combobox$1 = Object.assign(ComboboxRoot, {
 	Root: ComboboxRoot,
 	RootProvider: ComboboxRootProvider,
@@ -163,7 +187,9 @@ const Combobox$1 = Object.assign(ComboboxRoot, {
 	ItemGroupLabel: ComboboxItemGroupLabel,
 	Item: ComboboxItem,
 	ItemText: ComboboxItemText,
-	ItemIndicator: ComboboxItemIndicator
+	ItemIndicator: ComboboxItemIndicator,
+	Option: ComboboxOption,
+	Context: Combobox.Context
 });
 //#endregion
-export { Combobox$1 as Combobox };
+export { Combobox$1 as Combobox, useCombobox, useComboboxContext };

package/dist/components/combobox/Combobox.module.js

@@ -1,23 +1,23 @@
 import './Combobox.css';
 //#region src/components/combobox/Combobox.module.css
 var Combobox_module_default = {
-	"clearTrigger": "AqJn2G_clearTrigger",
-	"combobox-content-closed": "AqJn2G_combobox-content-closed",
-	"combobox-content-open": "AqJn2G_combobox-content-open",
-	"content": "AqJn2G_content",
-	"control": "AqJn2G_control",
-	"empty": "AqJn2G_empty",
-	"input": "AqJn2G_input",
-	"item": "AqJn2G_item",
-	"itemGroup": "AqJn2G_itemGroup",
-	"itemGroupLabel": "AqJn2G_itemGroupLabel",
-	"itemIndicator": "AqJn2G_itemIndicator",
-	"itemText": "AqJn2G_itemText",
-	"label": "AqJn2G_label",
-	"list": "AqJn2G_list",
-	"positioner": "AqJn2G_positioner",
-	"root": "AqJn2G_root",
-	"trigger": "AqJn2G_trigger"
+	"clearTrigger": "mcW7mG_clearTrigger",
+	"combobox-content-closed": "mcW7mG_combobox-content-closed",
+	"combobox-content-open": "mcW7mG_combobox-content-open",
+	"content": "mcW7mG_content",
+	"control": "mcW7mG_control",
+	"empty": "mcW7mG_empty",
+	"input": "mcW7mG_input",
+	"item": "mcW7mG_item",
+	"itemGroup": "mcW7mG_itemGroup",
+	"itemGroupLabel": "mcW7mG_itemGroupLabel",
+	"itemIndicator": "mcW7mG_itemIndicator",
+	"itemText": "mcW7mG_itemText",
+	"label": "mcW7mG_label",
+	"list": "mcW7mG_list",
+	"positioner": "mcW7mG_positioner",
+	"root": "mcW7mG_root",
+	"trigger": "mcW7mG_trigger"
 };
 //#endregion
 export { Combobox_module_default as default };

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

@@ -1,2 +1,2 @@
-import { Combobox } from "./Combobox.js";
-export { Combobox };
+import { Combobox, useCombobox, useComboboxContext } from "./Combobox.js";
+export { Combobox, useCombobox, useComboboxContext };