@moduix/react 1.1.1 → 2.1.0

package/dist/components/toggle/Toggle.css

@@ -4,12 +4,12 @@
     justify-content: center;
     align-items: center;
     gap: var(--toggle-content-gap, var(--spacing-2));
-    min-height: var(--toggle-size-md, var(--size-lg));
+    min-height: var(--toggle-size-md, var(--size-md));
     border-style: solid;
     border-width: var(--toggle-border-width, var(--border-width-sm));
     border-radius: var(--toggle-radius, var(--radius-md));
-    padding-block: var(--toggle-padding-y-md, .5rem);
-    padding-inline: var(--toggle-padding-x-md, 1rem);
+    padding-block: var(--toggle-padding-y-md, var(--spacing-1));
+    padding-inline: var(--toggle-padding-x-md, var(--spacing-4));
     color: var(--toggle-color, var(--color-foreground));
     appearance: none;
     font: inherit;
@@ -29,9 +29,9 @@
     display: inline-flex;
 
     &:focus-visible {
-      outline: var(--toggle-focus-ring-width, var(--border-width-md)) solid
+      outline: var(--toggle-focus-ring-width, var(--focus-ring-width, var(--border-width-md))) solid
         var(--toggle-focus-ring-color, var(--color-ring));
-      outline-offset: var(--toggle-focus-ring-offset, -1px);
+      outline-offset: var(--toggle-focus-ring-offset, var(--focus-ring-inset-offset));
     }
 
     &[data-disabled] {
@@ -41,16 +41,16 @@
     }
 
     & :where(svg) {
-      width: var(--toggle-icon-size, 1rem);
-      height: var(--toggle-icon-size, 1rem);
+      width: var(--toggle-icon-size, var(--spacing-4));
+      height: var(--toggle-icon-size, var(--spacing-4));
       flex-shrink: 0;
       display: block;
     }
 
     &[data-variant="default"] {
-      border-color: var(--toggle-default-border-color, var(--color-border));
-      background-color: var(--toggle-default-bg, var(--color-background));
-      color: var(--toggle-default-color, var(--toggle-color, var(--color-foreground)));
+      border-color: var(--toggle-default-border-color, var(--color-secondary));
+      background-color: var(--toggle-default-bg, var(--color-secondary));
+      color: var(--toggle-default-color, var(--toggle-color, var(--color-secondary-foreground)));
 
       @media (hover: hover) {
         &[data-state="off"]:not([data-disabled]):hover {
@@ -114,22 +114,22 @@
 
     &[data-size="xs"] {
       min-height: var(--toggle-size-xs, var(--size-xs));
-      padding-block: var(--toggle-padding-y-xs, .25rem);
-      padding-inline: var(--toggle-padding-x-xs, .625rem);
+      padding-block: var(--toggle-padding-y-xs, var(--spacing-0-5));
+      padding-inline: var(--toggle-padding-x-xs, var(--spacing-2-5));
       font-size: var(--toggle-font-size-xs, var(--text-xs));
       line-height: var(--toggle-line-height-xs, var(--line-height-text-xs));
     }
 
     &[data-size="sm"] {
       min-height: var(--toggle-size-sm, var(--size-sm));
-      padding-block: var(--toggle-padding-y-sm, .375rem);
-      padding-inline: var(--toggle-padding-x-sm, .75rem);
+      padding-block: var(--toggle-padding-y-sm, var(--spacing-1));
+      padding-inline: var(--toggle-padding-x-sm, var(--spacing-3));
     }
 
     &[data-size="lg"] {
-      min-height: var(--toggle-size-lg, var(--size-xl));
-      padding-block: var(--toggle-padding-y-lg, .625rem);
-      padding-inline: var(--toggle-padding-x-lg, 1.25rem);
+      min-height: var(--toggle-size-lg, var(--size-lg));
+      padding-block: var(--toggle-padding-y-lg, var(--spacing-1-5));
+      padding-inline: var(--toggle-padding-x-lg, var(--spacing-5));
       font-size: var(--toggle-font-size-lg, var(--text-md));
       line-height: var(--toggle-line-height-lg, var(--line-height-text-md));
     }
@@ -146,15 +146,15 @@
     }
 
     &[data-size="icon-md"] {
-      width: var(--toggle-size-icon-md, var(--size-lg));
-      min-width: var(--toggle-size-icon-md, var(--size-lg));
-      height: var(--toggle-size-icon-md, var(--size-lg));
+      width: var(--toggle-size-icon-md, var(--size-md));
+      min-width: var(--toggle-size-icon-md, var(--size-md));
+      height: var(--toggle-size-icon-md, var(--size-md));
     }
 
     &[data-size="icon-lg"] {
-      width: var(--toggle-size-icon-lg, var(--size-xl));
-      min-width: var(--toggle-size-icon-lg, var(--size-xl));
-      height: var(--toggle-size-icon-lg, var(--size-xl));
+      width: var(--toggle-size-icon-lg, var(--size-lg));
+      min-width: var(--toggle-size-icon-lg, var(--size-lg));
+      height: var(--toggle-size-icon-lg, var(--size-lg));
     }
   }
 

package/dist/components/toggle/Toggle.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import { Toggle } from "@ark-ui/react/toggle";
+import { Toggle, useToggleContext } from "@ark-ui/react/toggle";
 
 //#region src/components/toggle/Toggle.d.ts
 type ToggleVariant = 'default' | 'outline' | 'ghost';
@@ -11,6 +11,7 @@ type ToggleRootProps = ComponentProps<typeof Toggle.Root> & {
 declare const Toggle$1: import("react").ForwardRefExoticComponent<Omit<ToggleRootProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<ToggleRootProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Indicator: import("react").ForwardRefExoticComponent<Omit<Toggle.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: (props: Toggle.ContextProps) => import("react").ReactNode;
 };
 //#endregion
-export { Toggle$1 as Toggle };
+export { Toggle$1 as Toggle, useToggleContext };

package/dist/components/toggle/Toggle.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Toggle_module_default from "./Toggle.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Toggle } from "@ark-ui/react/toggle";
+import { jsx } from "react/jsx-runtime";
+import { Toggle, ToggleContext, useToggleContext } from "@ark-ui/react/toggle";
 //#region src/components/toggle/Toggle.tsx
 const ToggleRoot = forwardRef(function ToggleRoot({ className, variant = "default", size = "md", ...props }, ref) {
 	return /* @__PURE__ */ jsx(Toggle.Root, {
@@ -25,7 +25,8 @@ const ToggleIndicator = forwardRef(function ToggleIndicator({ className, ...prop
 });
 const Toggle$1 = Object.assign(ToggleRoot, {
 	Root: ToggleRoot,
-	Indicator: ToggleIndicator
+	Indicator: ToggleIndicator,
+	Context: ToggleContext
 });
 //#endregion
-export { Toggle$1 as Toggle };
+export { Toggle$1 as Toggle, useToggleContext };

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

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

package/dist/components/toggle-group/ToggleGroup.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import { ToggleGroup } from "@ark-ui/react/toggle-group";
+import { ToggleGroup, useToggleGroup, useToggleGroupContext } from "@ark-ui/react/toggle-group";
 
 //#region src/components/toggle-group/ToggleGroup.d.ts
 type ToggleVariant = 'default' | 'outline' | 'ghost';
@@ -19,7 +19,8 @@ type ToggleGroupItemProps = ComponentProps<typeof ToggleGroup.Item> & {
 declare const ToggleGroup$1: import("react").ForwardRefExoticComponent<Omit<ToggleGroupRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<ToggleGroupRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<ToggleGroupRootProviderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: (props: ToggleGroup.ContextProps) => import("react").ReactNode;
   Item: import("react").ForwardRefExoticComponent<Omit<ToggleGroupItemProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 };
 //#endregion
-export { ToggleGroup$1 as ToggleGroup };
+export { ToggleGroup$1 as ToggleGroup, useToggleGroup, useToggleGroupContext };

package/dist/components/toggle-group/ToggleGroup.js

@@ -1,10 +1,10 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Toggle_module_default from "../toggle/Toggle.module.js";
 import ToggleGroup_module_default from "./ToggleGroup.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { createContext, forwardRef, useContext } from "react";
-import { ToggleGroup } from "@ark-ui/react/toggle-group";
+import { jsx } from "react/jsx-runtime";
+import { ToggleGroup, useToggleGroup, useToggleGroupContext } from "@ark-ui/react/toggle-group";
 //#region src/components/toggle-group/ToggleGroup.tsx
 const ToggleGroupStyleContext = createContext({
 	variant: "default",
@@ -56,7 +56,8 @@ const ToggleGroupItem = forwardRef(function ToggleGroupItem({ className, variant
 const ToggleGroup$1 = Object.assign(ToggleGroupRoot, {
 	Root: ToggleGroupRoot,
 	RootProvider: ToggleGroupRootProvider,
+	Context: ToggleGroup.Context,
 	Item: ToggleGroupItem
 });
 //#endregion
-export { ToggleGroup$1 as ToggleGroup };
+export { ToggleGroup$1 as ToggleGroup, useToggleGroup, useToggleGroupContext };

package/dist/components/toggle-group/index.d.ts

@@ -1,2 +1,2 @@
-import { ToggleGroup } from "./ToggleGroup.js";
-export { ToggleGroup };
+import { ToggleGroup, useToggleGroup, useToggleGroupContext } from "./ToggleGroup.js";
+export { ToggleGroup, useToggleGroup, useToggleGroupContext };

package/dist/components/tooltip/Tooltip.css

@@ -1,8 +1,9 @@
 @layer ui.components {
   ._7levaW_trigger {
     box-sizing: border-box;
-    min-height: var(--tooltip-trigger-height, var(--size-lg));
-    padding: var(--tooltip-trigger-padding-y, .5rem) var(--tooltip-trigger-padding-x, .875rem);
+    min-height: var(--tooltip-trigger-height, var(--size-md));
+    padding: var(--tooltip-trigger-padding-y, var(--spacing-1))
+      var(--tooltip-trigger-padding-x, var(--spacing-3-5));
     border: var(--tooltip-trigger-border-width, var(--border-width-sm)) solid
       var(--tooltip-trigger-border-color, var(--color-border));
     border-radius: var(--tooltip-trigger-radius, var(--radius-md));
@@ -33,9 +34,9 @@
     }
 
     &:focus-visible {
-      outline: var(--tooltip-focus-ring-width, var(--border-width-sm)) solid
-        var(--tooltip-focus-ring-color, var(--color-ring));
-      outline-offset: var(--tooltip-focus-ring-offset, -1px);
+      outline: var(--tooltip-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--tooltip-focus-ring-color, var(--color-ring));
+      outline-offset: var(--tooltip-focus-ring-offset, var(--focus-ring-inset-offset));
     }
 
     &[data-disabled], &[disabled] {
@@ -52,12 +53,12 @@
 
   ._7levaW_content {
     --arrow-background: var(--tooltip-arrow-background, var(--tooltip-bg, var(--color-popover)));
-    --arrow-size: var(--tooltip-arrow-size, .625rem);
+    --arrow-size: var(--tooltip-arrow-size, var(--spacing-2-5));
     box-sizing: border-box;
     z-index: var(--tooltip-z-index, var(--z-popup));
     max-width: min(var(--tooltip-max-width, 20rem), var(--available-width));
     max-height: min(var(--tooltip-max-height, 24rem), var(--available-height, 100dvh));
-    padding: var(--tooltip-padding-y, .25rem) var(--tooltip-padding-x, .5rem);
+    padding: var(--tooltip-padding-y, var(--spacing-1)) var(--tooltip-padding-x, var(--spacing-2));
     border: var(--tooltip-border-width, var(--border-width-sm)) solid
       var(--tooltip-border-color, var(--color-border));
     border-radius: var(--tooltip-radius, var(--radius-md));
@@ -71,11 +72,15 @@
     position: relative;
 
     &[data-state="open"] {
-      animation: _7levaW_tooltip-content-in var(--tooltip-transition, var(--duration-fast)) ease-out;
+      animation: _7levaW_tooltip-content-in
+        var(--tooltip-transition, var(--popup-motion-duration, var(--duration-fast)))
+        var(--popup-motion-easing, ease-out);
     }
 
     &[data-state="closed"] {
-      animation: _7levaW_tooltip-content-out var(--tooltip-transition, var(--duration-fast)) ease-in;
+      animation: _7levaW_tooltip-content-out
+        var(--tooltip-transition, var(--popup-motion-duration, var(--duration-fast)))
+        var(--popup-motion-easing, ease-in);
     }
 
     &[data-instant] {
@@ -85,7 +90,7 @@
 
   ._7levaW_arrow {
     --arrow-background: var(--tooltip-arrow-background, var(--tooltip-bg, var(--color-popover)));
-    --arrow-size: var(--tooltip-arrow-size, .625rem);
+    --arrow-size: var(--tooltip-arrow-size, var(--spacing-2-5));
   }
 
   ._7levaW_arrowTip {
@@ -97,10 +102,10 @@
 
   @keyframes _7levaW_tooltip-content-in {
     from {
-      opacity: var(--tooltip-popup-starting-opacity, 0);
-      translate: var(--tooltip-popup-starting-translate-x, 0)
-        var(--tooltip-popup-starting-translate-y, 0);
-      transform: scale(var(--tooltip-popup-starting-scale, var(--scale-popup)));
+      opacity: var(--tooltip-popup-starting-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--tooltip-popup-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
+        var(--tooltip-popup-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
+      transform: scale(var(--tooltip-popup-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup))));
     }
 
     to {
@@ -116,10 +121,10 @@
     }
 
     to {
-      opacity: var(--tooltip-popup-ending-opacity, 0);
-      translate: var(--tooltip-popup-ending-translate-x, 0)
-        var(--tooltip-popup-ending-translate-y, 0);
-      transform: scale(var(--tooltip-popup-ending-scale, var(--scale-popup)));
+      opacity: var(--tooltip-popup-ending-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--tooltip-popup-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
+        var(--tooltip-popup-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
+      transform: scale(var(--tooltip-popup-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup))));
     }
   }
 }

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
 import { ComponentProps } from "react";
-import { Tooltip } from "@ark-ui/react/tooltip";
+import { Tooltip, useTooltip, useTooltipContext } from "@ark-ui/react/tooltip";
 
 //#region src/components/tooltip/Tooltip.d.ts
 type TooltipRootProps = ComponentProps<typeof Tooltip.Root> & OverlayPortalProps;
@@ -19,10 +19,11 @@ declare const Tooltip$1: typeof TooltipRoot & {
   Root: typeof TooltipRoot;
   RootProvider: typeof TooltipRootProvider;
   Trigger: import("react").ForwardRefExoticComponent<Omit<Tooltip.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Body: import("react").ForwardRefExoticComponent<Omit<Tooltip.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Positioner: import("react").ForwardRefExoticComponent<Omit<Tooltip.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Content: import("react").ForwardRefExoticComponent<Omit<Tooltip.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Arrow: import("react").ForwardRefExoticComponent<Omit<Tooltip.ArrowProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ArrowTip: import("react").ForwardRefExoticComponent<Omit<Tooltip.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion
-export { Tooltip$1 as Tooltip };
+export { Tooltip$1 as Tooltip, useTooltip, useTooltipContext };

package/dist/components/tooltip/Tooltip.js

@@ -1,10 +1,10 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Tooltip_module_default from "./Tooltip.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Tooltip } from "@ark-ui/react/tooltip";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip, useTooltip, useTooltipContext } from "@ark-ui/react/tooltip";
 //#region src/components/tooltip/Tooltip.tsx
 function TooltipRoot({ portalled, portalRef, ...props }) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
@@ -45,6 +45,12 @@ const TooltipContent = forwardRef(function TooltipContent({ className, ...props
 		...props
 	});
 });
+const TooltipBody = forwardRef(function TooltipBody(props, ref) {
+	return /* @__PURE__ */ jsx(TooltipPositioner, { children: /* @__PURE__ */ jsx(TooltipContent, {
+		ref,
+		...props
+	}) });
+});
 const TooltipArrow = forwardRef(function TooltipArrow({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Tooltip.Arrow, {
 		ref,
@@ -66,10 +72,11 @@ const Tooltip$1 = Object.assign(TooltipRoot, {
 	Root: TooltipRoot,
 	RootProvider: TooltipRootProvider,
 	Trigger: TooltipTrigger,
+	Body: TooltipBody,
 	Positioner: TooltipPositioner,
 	Content: TooltipContent,
 	Arrow: TooltipArrow,
 	ArrowTip: TooltipArrowTip
 });
 //#endregion
-export { Tooltip$1 as Tooltip };
+export { Tooltip$1 as Tooltip, useTooltip, useTooltipContext };

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

@@ -1,2 +1,2 @@
-import { Tooltip } from "./Tooltip.js";
-export { Tooltip };
+import { Tooltip, useTooltip, useTooltipContext } from "./Tooltip.js";
+export { Tooltip, useTooltip, useTooltipContext };

package/dist/components/tour/Tour.css

@@ -59,7 +59,7 @@
 
   ._5wc7ja_content {
     --arrow-background: var(--tour-arrow-background, var(--tour-bg, var(--color-popover)));
-    --arrow-size: var(--tour-arrow-size, .625rem);
+    --arrow-size: var(--tour-arrow-size, var(--spacing-2-5));
     box-sizing: border-box;
     z-index: calc(var(--tour-z-index, var(--z-modal)) + var(--layer-index, 0));
     gap: var(--tour-gap, var(--spacing-1));
@@ -82,11 +82,17 @@
     overflow: visible;
 
     &[data-state="open"] {
-      animation: _5wc7ja_tour-content-in var(--tour-transition, var(--transition-default)) both;
+      animation: _5wc7ja_tour-content-in
+        var(--tour-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)))
+        both;
     }
 
     &[data-state="closed"] {
-      animation: _5wc7ja_tour-content-out var(--tour-transition, var(--transition-default)) both;
+      animation: _5wc7ja_tour-content-out
+        var(--tour-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)))
+        both;
     }
 
     &[data-type="dialog"] {
@@ -102,7 +108,7 @@
 
   ._5wc7ja_arrow {
     --arrow-background: var(--tour-arrow-background, var(--tour-bg, var(--color-popover)));
-    --arrow-size: var(--tour-arrow-size, .625rem);
+    --arrow-size: var(--tour-arrow-size, var(--spacing-2-5));
   }
 
   ._5wc7ja_arrowTip {
@@ -138,8 +144,8 @@
 
   ._5wc7ja_closeTrigger {
     box-sizing: border-box;
-    width: var(--tour-close-trigger-size, 1.75rem);
-    height: var(--tour-close-trigger-size, 1.75rem);
+    width: var(--tour-close-trigger-size, var(--spacing-7));
+    height: var(--tour-close-trigger-size, var(--spacing-7));
     border-radius: var(--tour-close-trigger-radius, var(--radius-md));
     background: var(--tour-close-trigger-bg, transparent);
     color: var(--tour-close-trigger-color, var(--color-muted-foreground));
@@ -152,12 +158,12 @@
     line-height: 1;
     display: inline-flex;
     position: absolute;
-    inset-block-start: var(--tour-close-trigger-offset, var(--spacing-2));
-    inset-inline-end: var(--tour-close-trigger-offset, var(--spacing-2));
+    inset-block-start: var(--tour-close-trigger-offset, var(--spacing-4));
+    inset-inline-end: var(--tour-close-trigger-offset, var(--spacing-4));
 
     & :where(svg) {
-      width: var(--tour-close-trigger-icon-size, .875rem);
-      height: var(--tour-close-trigger-icon-size, .875rem);
+      width: var(--tour-close-trigger-icon-size, var(--spacing-3));
+      height: var(--tour-close-trigger-icon-size, var(--spacing-3));
     }
 
     @media (hover: hover) {
@@ -168,26 +174,24 @@
     }
 
     &:focus-visible {
-      outline: var(--tour-focus-ring-width, var(--border-width-sm)) solid
-        var(--tour-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--tour-focus-ring-width, var(--border-width-sm)) * -1);
+      outline: var(--tour-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--tour-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--tour-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
     }
   }
 
   ._5wc7ja_closeIcon {
-    --close-button-size: var(--tour-close-trigger-size, 1.75rem);
+    --close-button-size: var(--tour-close-trigger-size, var(--spacing-7));
     --close-button-radius: var(--tour-close-trigger-radius, var(--radius-md));
-    --close-button-icon-size: var(--tour-close-trigger-icon-size, .875rem);
+    --close-button-icon-size: var(--tour-close-trigger-icon-size, var(--spacing-3));
     --close-button-bg: var(--tour-close-trigger-bg, transparent);
     --close-button-bg-hover: var(--tour-close-trigger-bg-hover, var(--color-accent));
     --close-button-color: var(--tour-close-trigger-color, var(--color-muted-foreground));
     --close-button-color-hover: var(--tour-close-trigger-color-hover, var(--tour-color, var(--color-popover-foreground)));
-    --close-button-focus-ring-width: var(--tour-focus-ring-width, var(--border-width-sm));
     --close-button-focus-ring-color: var(--tour-focus-ring-color, var(--color-ring));
-    --close-button-focus-ring-offset: calc(var(--tour-focus-ring-width, var(--border-width-sm)) * -1);
     position: absolute;
-    inset-block-start: var(--tour-close-trigger-offset, var(--spacing-2));
-    inset-inline-end: var(--tour-close-trigger-offset, var(--spacing-2));
+    inset-block-start: var(--tour-close-trigger-offset, var(--spacing-4));
+    inset-inline-end: var(--tour-close-trigger-offset, var(--spacing-4));
   }
 
   ._5wc7ja_control {
@@ -201,12 +205,12 @@
 
   ._5wc7ja_actionTrigger {
     box-sizing: border-box;
-    min-height: var(--tour-action-height, 2rem);
+    min-height: var(--tour-action-height, var(--size-sm));
     justify-content: center;
     align-items: center;
     gap: var(--tour-action-gap, var(--spacing-2));
-    padding-block: var(--tour-action-padding-y, .375rem);
-    padding-inline: var(--tour-action-padding-x, .75rem);
+    padding-block: var(--tour-action-padding-y, var(--spacing-1-5));
+    padding-inline: var(--tour-action-padding-x, var(--spacing-3));
     border: var(--tour-action-border-width, var(--border-width-sm)) solid
       var(--tour-action-border-color, var(--color-border));
     border-radius: var(--tour-action-radius, var(--radius-md));
@@ -242,9 +246,9 @@
     }
 
     &:focus-visible {
-      outline: var(--tour-focus-ring-width, var(--border-width-sm)) solid
-        var(--tour-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--tour-focus-ring-width, var(--border-width-sm)) * -1);
+      outline: var(--tour-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--tour-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--tour-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
     }
 
     &[data-disabled], &:disabled {
@@ -269,18 +273,19 @@
 
   @keyframes _5wc7ja_tour-content-in {
     from {
-      opacity: var(--tour-content-starting-opacity, 0);
-      translate: var(--tour-content-starting-translate-x, 0)
-        var(--tour-content-starting-translate-y, 0);
-      scale: var(--tour-content-starting-scale, var(--scale-popup));
+      opacity: var(--tour-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--tour-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
+        var(--tour-content-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
+      scale: var(--tour-content-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
     }
   }
 
   @keyframes _5wc7ja_tour-content-out {
     to {
-      opacity: var(--tour-content-ending-opacity, 0);
-      translate: var(--tour-content-ending-translate-x, 0) var(--tour-content-ending-translate-y, 0);
-      scale: var(--tour-content-ending-scale, var(--scale-popup));
+      opacity: var(--tour-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--tour-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
+        var(--tour-content-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
+      scale: var(--tour-content-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
     }
   }
 }

package/dist/components/tour/Tour.d.ts

@@ -9,6 +9,11 @@ declare function TourRoot({
   portalRef,
   ...props
 }: TourRootProps): import("react").JSX.Element;
+declare function TourActionList({
+  className
+}: {
+  className?: string;
+}): import("react").JSX.Element;
 declare const Tour$1: typeof TourRoot & {
   Root: typeof TourRoot;
   Backdrop: import("react").ForwardRefExoticComponent<Omit<Tour.BackdropProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -24,6 +29,7 @@ declare const Tour$1: typeof TourRoot & {
   CloseIcon: import("react").ForwardRefExoticComponent<Omit<Omit<Tour.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "asChild">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<Tour.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Actions: (props: Tour.ActionsProps) => import("react").ReactNode;
+  ActionList: typeof TourActionList;
   ActionTrigger: import("react").ForwardRefExoticComponent<Omit<Tour.ActionTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 };
 //#endregion

package/dist/components/tour/Tour.js

@@ -2,9 +2,9 @@ import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Tour_module_default from "./Tour.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { Tour, useTour, waitForElement, waitForElementValue, waitForEvent, waitForPromise } from "@ark-ui/react/tour";
 //#region src/components/tour/Tour.tsx
 const DEFAULT_CLOSE_BUTTON_LABEL = "Close tour";
@@ -128,6 +128,12 @@ const TourActionTrigger = forwardRef(function TourActionTrigger({ asChild, class
 	});
 });
 const TourActions = Tour.Actions;
+function TourActionList({ className }) {
+	return /* @__PURE__ */ jsx(Tour.Actions, { children: (actions) => actions.map((action) => /* @__PURE__ */ jsx(TourActionTrigger, {
+		action,
+		className
+	}, action.label)) });
+}
 const Tour$1 = Object.assign(TourRoot, {
 	Root: TourRoot,
 	Backdrop: TourBackdrop,
@@ -143,6 +149,7 @@ const Tour$1 = Object.assign(TourRoot, {
 	CloseIcon: TourCloseIcon,
 	Control: TourControl,
 	Actions: TourActions,
+	ActionList: TourActionList,
 	ActionTrigger: TourActionTrigger
 });
 //#endregion