@moduix/react 2.1.0 → 2.2.4

package/dist/components/steps/Steps.module.js

@@ -1,17 +1,15 @@
-import './Steps.css';
-//#region src/components/steps/Steps.module.css
-var Steps_module_default = {
-	"completedContent": "_1tbAxa_completedContent",
-	"content": "_1tbAxa_content",
-	"indicator": "_1tbAxa_indicator",
-	"item": "_1tbAxa_item",
-	"list": "_1tbAxa_list",
-	"nextTrigger": "_1tbAxa_nextTrigger",
-	"prevTrigger": "_1tbAxa_prevTrigger",
-	"progress": "_1tbAxa_progress",
-	"root": "_1tbAxa_root",
-	"separator": "_1tbAxa_separator",
-	"trigger": "_1tbAxa_trigger"
+import "./Steps_module.css";
+const Steps_module = {
+    root: "root-FkZrbo",
+    list: "list-heLEy0",
+    item: "item-mpBfoh",
+    separator: "separator-KWpGaK",
+    trigger: "trigger-mmZxCr",
+    indicator: "indicator-C3B2HX",
+    content: "content-AM56xB",
+    completedContent: "completedContent-qEpQ8K",
+    prevTrigger: "prevTrigger-n0gQx3",
+    nextTrigger: "nextTrigger-y2dzVS",
+    progress: "progress-oYMuFz"
 };
-//#endregion
-export { Steps_module_default as default };
+export default Steps_module;

package/dist/components/steps/Steps_module.css

@@ -0,0 +1,306 @@
+@layer moduix.components {
+  .root-FkZrbo {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: var(--moduix-steps-max-width, 52rem);
+    min-width: 0;
+    color: var(--moduix-steps-color, var(--moduix-color-foreground));
+    display: flex;
+  }
+
+  .root-FkZrbo[data-orientation="horizontal"] {
+    gap: var(--moduix-steps-root-gap, var(--moduix-spacing-4));
+    flex-direction: column;
+  }
+
+  .root-FkZrbo[data-orientation="vertical"] {
+    align-items: stretch;
+    gap: var(--moduix-steps-vertical-gap, var(--moduix-spacing-6));
+    flex-direction: row;
+  }
+
+  @media (max-width: 40rem) {
+    .root-FkZrbo[data-orientation="vertical"] {
+      gap: var(--moduix-steps-root-gap, var(--moduix-spacing-4));
+      flex-direction: column;
+    }
+  }
+
+  .list-heLEy0 {
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .list-heLEy0[data-orientation="horizontal"] {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .list-heLEy0[data-orientation="vertical"] {
+    align-items: flex-start;
+    gap: var(--moduix-steps-gap, var(--moduix-spacing-4));
+    flex-direction: column;
+    flex: none;
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+
+  @media (max-width: 40rem) {
+    .list-heLEy0[data-orientation="horizontal"] {
+      scrollbar-width: thin;
+      overflow-x: auto;
+    }
+
+    .list-heLEy0[data-orientation="horizontal"] .item-mpBfoh {
+      flex: none;
+    }
+  }
+
+  .item-mpBfoh {
+    align-items: center;
+    gap: var(--moduix-steps-trigger-gap, var(--moduix-spacing-3));
+    flex: 1 1 0;
+    min-width: 0;
+    display: flex;
+    position: relative;
+  }
+
+  .item-mpBfoh:last-child {
+    flex: none;
+  }
+
+  .item-mpBfoh:last-child .separator-KWpGaK {
+    display: none;
+  }
+
+  .item-mpBfoh[data-orientation="vertical"] {
+    min-height: var(--moduix-steps-vertical-item-min-height, 4rem);
+    flex: none;
+    align-items: flex-start;
+  }
+
+  .trigger-mmZxCr {
+    z-index: 1;
+    align-items: center;
+    gap: var(--moduix-steps-trigger-gap, var(--moduix-spacing-3));
+    border-radius: var(--moduix-steps-trigger-radius, var(--moduix-radius-md));
+    min-width: 0;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    outline: none;
+    padding: 0;
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .trigger-mmZxCr[data-orientation="vertical"] {
+    align-items: flex-start;
+  }
+
+  .trigger-mmZxCr:focus-visible {
+    outline: var(--moduix-steps-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-steps-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-steps-focus-ring-offset, var(--moduix-focus-ring-offset));
+  }
+
+  .trigger-mmZxCr[data-incomplete] {
+    color: var(--moduix-steps-trigger-color-incomplete, inherit);
+  }
+
+  @media (hover: hover) {
+    .trigger-mmZxCr:hover .indicator-C3B2HX[data-incomplete] {
+      border-color: var(--moduix-steps-indicator-border-color-hover, var(--moduix-steps-indicator-border-color-current, var(--moduix-color-foreground)));
+      color: var(--moduix-steps-indicator-color-hover, var(--moduix-steps-indicator-color-current, var(--moduix-color-foreground)));
+    }
+  }
+
+  .indicator-C3B2HX {
+    box-sizing: border-box;
+    width: var(--moduix-steps-indicator-size, var(--moduix-spacing-8));
+    height: var(--moduix-steps-indicator-size, var(--moduix-spacing-8));
+    border: var(--moduix-steps-indicator-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-steps-indicator-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-steps-indicator-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-steps-indicator-bg, var(--moduix-color-background));
+    color: var(--moduix-steps-indicator-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-steps-indicator-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-steps-indicator-font-weight, var(--moduix-weight-semibold));
+    transition: background-color var(--moduix-transition-default),
+      border-color var(--moduix-transition-default),
+      color var(--moduix-transition-default),
+      opacity var(--moduix-transition-default);
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    line-height: 1;
+    display: inline-flex;
+  }
+
+  .indicator-C3B2HX :where(svg) {
+    width: var(--moduix-steps-indicator-icon-size, var(--moduix-spacing-3-5));
+    height: var(--moduix-steps-indicator-icon-size, var(--moduix-spacing-3-5));
+  }
+
+  .indicator-C3B2HX[data-current] {
+    border-color: var(--moduix-steps-indicator-border-color-current, var(--moduix-steps-indicator-border-color-complete, var(--moduix-color-foreground)));
+    background-color: var(--moduix-steps-indicator-bg-current, var(--moduix-steps-indicator-bg, var(--moduix-color-background)));
+    color: var(--moduix-steps-indicator-color-current, var(--moduix-color-foreground));
+  }
+
+  .indicator-C3B2HX[data-complete] {
+    border-color: var(--moduix-steps-indicator-border-color-complete, var(--moduix-color-foreground));
+    background-color: var(--moduix-steps-indicator-bg-complete, var(--moduix-color-foreground));
+    color: var(--moduix-steps-indicator-color-complete, var(--moduix-color-background));
+  }
+
+  .separator-KWpGaK {
+    height: var(--moduix-steps-separator-thickness, var(--moduix-border-width-sm));
+    min-width: var(--moduix-steps-separator-min-width, var(--moduix-spacing-8));
+    margin-inline: var(--moduix-steps-separator-inset, var(--moduix-spacing-2));
+    background-color: var(--moduix-steps-separator-color, var(--moduix-color-border));
+    pointer-events: none;
+    flex: auto;
+  }
+
+  .separator-KWpGaK[data-complete] {
+    background-color: var(--moduix-steps-separator-color-complete, var(--moduix-color-foreground));
+  }
+
+  .separator-KWpGaK[data-orientation="vertical"] {
+    top: calc(var(--moduix-steps-indicator-size, var(--moduix-spacing-8)) +
+          var(--moduix-steps-separator-inset, var(--moduix-spacing-2)));
+    bottom: calc(var(--moduix-steps-gap, var(--moduix-spacing-4)) * -1);
+    width: var(--moduix-steps-separator-thickness, var(--moduix-border-width-sm));
+    min-width: 0;
+    height: auto;
+    margin-inline: 0;
+    position: absolute;
+    inset-inline-start: calc((var(--moduix-steps-indicator-size, var(--moduix-spacing-8)) -
+            var(--moduix-steps-separator-thickness, var(--moduix-border-width-sm))) /
+          2);
+  }
+
+  .content-AM56xB, .completedContent-qEpQ8K {
+    box-sizing: border-box;
+    min-height: var(--moduix-steps-content-min-height, 10rem);
+    min-width: 0;
+    padding-block: var(--moduix-steps-content-padding-y, var(--moduix-spacing-4));
+    padding-inline: var(--moduix-steps-content-padding-x, var(--moduix-spacing-4));
+    border-radius: var(--moduix-steps-content-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-steps-content-bg, var(--moduix-color-muted));
+    color: var(--moduix-steps-content-color, var(--moduix-color-foreground));
+    font-size: var(--moduix-steps-content-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-steps-content-line-height, var(--moduix-line-height-text-sm));
+    outline: none;
+    place-items: center;
+    display: grid;
+  }
+
+  :is(.content-AM56xB, .completedContent-qEpQ8K)[hidden]:not([hidden="until-found"]) {
+    display: none;
+  }
+
+  :is(.content-AM56xB, .completedContent-qEpQ8K)[data-orientation="vertical"] {
+    flex: auto;
+  }
+
+  :is(.content-AM56xB, .completedContent-qEpQ8K):focus-visible {
+    outline: var(--moduix-steps-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-steps-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: calc(var(--moduix-steps-focus-ring-offset, var(--moduix-focus-ring-offset)) * -1);
+  }
+
+  .completedContent-qEpQ8K {
+    color: var(--moduix-steps-completed-content-color, var(--moduix-color-foreground));
+    font-weight: var(--moduix-steps-completed-content-font-weight, var(--moduix-weight-medium));
+    text-align: center;
+  }
+
+  .prevTrigger-n0gQx3, .nextTrigger-y2dzVS {
+    box-sizing: border-box;
+    min-height: var(--moduix-steps-action-height, var(--moduix-size-sm));
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-steps-action-gap, var(--moduix-spacing-2));
+    border: var(--moduix-steps-action-border-width, var(--moduix-border-width-sm)) solid
+      var(--moduix-steps-action-border-color, var(--moduix-color-border));
+    border-radius: var(--moduix-steps-action-radius, var(--moduix-radius-md));
+    padding-block: var(--moduix-steps-action-padding-y, var(--moduix-spacing-1-5));
+    padding-inline: var(--moduix-steps-action-padding-x, var(--moduix-spacing-3));
+    background-color: var(--moduix-steps-action-bg, var(--moduix-color-background));
+    color: var(--moduix-steps-action-color, var(--moduix-color-foreground));
+    font: inherit;
+    font-size: var(--moduix-steps-action-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-steps-action-line-height, var(--moduix-line-height-text-sm));
+    cursor: pointer;
+    transition: background-color var(--moduix-transition-default),
+      border-color var(--moduix-transition-default),
+      color var(--moduix-transition-default),
+      opacity var(--moduix-transition-default);
+    outline: none;
+    text-decoration: none;
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    :is(.prevTrigger-n0gQx3, .nextTrigger-y2dzVS):hover:not(:disabled):not([data-disabled]) {
+      background-color: var(--moduix-steps-action-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  :is(.prevTrigger-n0gQx3, .nextTrigger-y2dzVS):focus-visible {
+    outline: var(--moduix-steps-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-steps-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-steps-focus-ring-offset, var(--moduix-focus-ring-offset));
+  }
+
+  :is(.prevTrigger-n0gQx3, .nextTrigger-y2dzVS):is(:disabled, [data-disabled]) {
+    opacity: var(--moduix-steps-disabled-opacity, var(--moduix-opacity-disabled));
+    cursor: default;
+  }
+
+  .nextTrigger-y2dzVS {
+    border-color: var(--moduix-steps-next-action-border-color, var(--moduix-color-foreground));
+    background-color: var(--moduix-steps-next-action-bg, var(--moduix-color-foreground));
+    color: var(--moduix-steps-next-action-color, var(--moduix-color-background));
+  }
+
+  @media (hover: hover) {
+    .nextTrigger-y2dzVS:hover:not(:disabled):not([data-disabled]) {
+      background-color: var(--moduix-steps-next-action-bg-hover, var(--moduix-color-foreground));
+    }
+  }
+
+  .progress-oYMuFz {
+    width: 100%;
+    height: var(--moduix-steps-progress-height, var(--moduix-border-width-md));
+    border-radius: var(--moduix-steps-progress-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-steps-progress-bg, var(--moduix-color-border));
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .progress-oYMuFz:before {
+    content: "";
+    width: var(--percent, 0%);
+    border-radius: inherit;
+    background-color: var(--moduix-steps-progress-fill-bg, var(--moduix-color-foreground));
+    transition: width var(--moduix-transition-default);
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
+}
+

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

@@ -1,2 +1 @@
-import { Steps } from "./Steps.js";
-export { Steps };
+export { Steps, useSteps, useStepsContext, useStepsItemContext } from './Steps.js';

package/dist/components/steps/index.js

@@ -0,0 +1 @@
+export { Steps, useSteps, useStepsContext, useStepsItemContext } from "./Steps.js";

package/dist/components/swap/Swap.d.ts

@@ -1,11 +1,16 @@
-import { Swap, useSwapContext } from "@ark-ui/react/swap";
-
-//#region src/components/swap/Swap.d.ts
-declare const Swap$1: import("react").ForwardRefExoticComponent<Omit<Swap.RootProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<Swap.RootProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<Swap.RootProviderProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Indicator: import("react").ForwardRefExoticComponent<Omit<Swap.IndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  useSwap: (props?: import("@ark-ui/react/swap").UseSwapProps) => import("@ark-ui/react/swap").UseSwapReturn;
+import { Swap as SwapPrimitive, useSwap, useSwapContext } from '@ark-ui/react/swap';
+import type { ComponentProps } from 'react';
+type SwapAnimation = 'fade' | 'scale' | 'rotate' | 'flip' | (string & {});
+type SwapRootProps = ComponentProps<typeof SwapPrimitive.Root> & {
+    animation?: SwapAnimation;
 };
-//#endregion
-export { Swap$1 as Swap, useSwapContext };
+type SwapRootProviderProps = ComponentProps<typeof SwapPrimitive.RootProvider> & {
+    animation?: SwapAnimation;
+};
+declare const Swap: import("react").ForwardRefExoticComponent<Omit<SwapRootProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<SwapRootProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<SwapRootProviderProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<SwapPrimitive.IndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    useSwap: (props?: import("@ark-ui/react/swap").UseSwapProps) => import("@ark-ui/react/swap").UseSwapReturn;
+};
+export { Swap, useSwap, useSwapContext, type SwapAnimation };

package/dist/components/swap/Swap.js

@@ -1,39 +1,40 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Swap_module_default from "./Swap.module.js";
-import { clsx } from "clsx";
-import { forwardRef } from "react";
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { Swap, useSwap, useSwapContext } from "@ark-ui/react/swap";
-//#region src/components/swap/Swap.tsx
-const SwapRoot = forwardRef(function SwapRoot({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Swap.Root, {
-		ref,
-		"data-slot": "swap-root",
-		className: clsx(Swap_module_default.root, normalizeClassName(className)),
-		...props
-	});
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Swap_module from "./Swap.module.js";
+const Swap_SwapRoot = /*#__PURE__*/ forwardRef(function({ animation = 'scale', className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Swap.Root, {
+        ref: ref,
+        "data-slot": "swap-root",
+        "data-animation": animation,
+        className: clsx(Swap_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const SwapRootProvider = forwardRef(function SwapRootProvider({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Swap.RootProvider, {
-		ref,
-		"data-slot": "swap-root-provider",
-		className: clsx(Swap_module_default.root, normalizeClassName(className)),
-		...props
-	});
+const Swap_SwapRootProvider = /*#__PURE__*/ forwardRef(function({ animation = 'scale', className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Swap.RootProvider, {
+        ref: ref,
+        "data-slot": "swap-root-provider",
+        "data-animation": animation,
+        className: clsx(Swap_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const SwapIndicator = forwardRef(function SwapIndicator({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Swap.Indicator, {
-		ref,
-		"data-slot": "swap-indicator",
-		className: clsx(Swap_module_default.indicator, normalizeClassName(className)),
-		...props
-	});
+const Swap_SwapIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Swap.Indicator, {
+        ref: ref,
+        "data-slot": "swap-indicator",
+        className: clsx(Swap_module.indicator, normalizeClassName(className)),
+        ...props
+    });
 });
-const Swap$1 = Object.assign(SwapRoot, {
-	Root: SwapRoot,
-	RootProvider: SwapRootProvider,
-	Indicator: SwapIndicator,
-	useSwap
+const Swap_Swap = Object.assign(Swap_SwapRoot, {
+    Root: Swap_SwapRoot,
+    RootProvider: Swap_SwapRootProvider,
+    Indicator: Swap_SwapIndicator,
+    useSwap: useSwap
 });
-//#endregion
-export { Swap$1 as Swap, useSwapContext };
+export { Swap_Swap as Swap, useSwap, useSwapContext };

package/dist/components/swap/Swap.module.js

@@ -1,11 +1,22 @@
-import './Swap.css';
-//#region src/components/swap/Swap.module.css
-var Swap_module_default = {
-	"indicator": "jqWswG_indicator",
-	"root": "jqWswG_root",
-	"swap": "jqWswG_swap",
-	"swap-enter": "jqWswG_swap-enter",
-	"swap-exit": "jqWswG_swap-exit"
+import "./Swap_module.css";
+const Swap_module = {
+    root: "root-hsHHcI",
+    indicator: "indicator-S0xChs",
+    "swap-enter": "swap-enter-VItkkF",
+    swapEnter: "swap-enter-VItkkF",
+    "swap-exit": "swap-exit-LhGw4e",
+    swapExit: "swap-exit-LhGw4e",
+    "swap-scale-enter": "swap-scale-enter-Dk2hX4",
+    swapScaleEnter: "swap-scale-enter-Dk2hX4",
+    "swap-scale-exit": "swap-scale-exit-_CsIGz",
+    swapScaleExit: "swap-scale-exit-_CsIGz",
+    "swap-rotate-enter": "swap-rotate-enter-tH9kI6",
+    swapRotateEnter: "swap-rotate-enter-tH9kI6",
+    "swap-rotate-exit": "swap-rotate-exit-KRzyNE",
+    swapRotateExit: "swap-rotate-exit-KRzyNE",
+    "swap-flip-enter": "swap-flip-enter-kaIqut",
+    swapFlipEnter: "swap-flip-enter-kaIqut",
+    "swap-flip-exit": "swap-flip-exit-x6dSs8",
+    swapFlipExit: "swap-flip-exit-x6dSs8"
 };
-//#endregion
-export { Swap_module_default as default };
+export default Swap_module;

package/dist/components/swap/Swap_module.css

@@ -0,0 +1,118 @@
+@layer moduix.components {
+  .root-hsHHcI {
+    vertical-align: middle;
+    grid-template-areas: "swap";
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .root-hsHHcI[data-animation="flip"] {
+    perspective: 24rem;
+  }
+
+  .indicator-S0xChs {
+    color: inherit;
+    grid-area: swap;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .root-hsHHcI[data-animation="fade"] .indicator-S0xChs[data-state="open"] {
+    animation: swap-enter-VItkkF var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  .root-hsHHcI[data-animation="fade"] .indicator-S0xChs[data-state="closed"] {
+    animation: swap-exit-LhGw4e var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  .root-hsHHcI[data-animation="scale"] .indicator-S0xChs[data-state="open"] {
+    animation: swap-scale-enter-Dk2hX4 var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  .root-hsHHcI[data-animation="scale"] .indicator-S0xChs[data-state="closed"] {
+    animation: swap-scale-exit-_CsIGz var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  .root-hsHHcI[data-animation="rotate"] .indicator-S0xChs[data-state="open"] {
+    animation: swap-rotate-enter-tH9kI6 var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  .root-hsHHcI[data-animation="rotate"] .indicator-S0xChs[data-state="closed"] {
+    animation: swap-rotate-exit-KRzyNE var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  .root-hsHHcI[data-animation="flip"] .indicator-S0xChs {
+    backface-visibility: hidden;
+  }
+
+  .root-hsHHcI[data-animation="flip"] .indicator-S0xChs[data-state="open"] {
+    animation: swap-flip-enter-kaIqut var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  .root-hsHHcI[data-animation="flip"] .indicator-S0xChs[data-state="closed"] {
+    animation: swap-flip-exit-x6dSs8 var(--moduix-swap-transition, var(--moduix-transition-slow));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .indicator-S0xChs[data-state] {
+      animation-duration: 1ms;
+      animation-delay: 0s;
+    }
+  }
+
+  @keyframes swap-enter-VItkkF {
+    from {
+      opacity: var(--moduix-swap-enter-starting-opacity, 0);
+    }
+  }
+
+  @keyframes swap-exit-LhGw4e {
+    to {
+      opacity: var(--moduix-swap-exit-ending-opacity, 0);
+    }
+  }
+
+  @keyframes swap-scale-enter-Dk2hX4 {
+    from {
+      opacity: var(--moduix-swap-enter-starting-opacity, 0);
+      transform: scale(var(--moduix-swap-enter-starting-scale, .5));
+    }
+  }
+
+  @keyframes swap-scale-exit-_CsIGz {
+    to {
+      opacity: var(--moduix-swap-exit-ending-opacity, 0);
+      transform: scale(var(--moduix-swap-exit-ending-scale, .5));
+    }
+  }
+
+  @keyframes swap-rotate-enter-tH9kI6 {
+    from {
+      opacity: var(--moduix-swap-enter-starting-opacity, 0);
+      transform: rotate(-180deg);
+    }
+  }
+
+  @keyframes swap-rotate-exit-KRzyNE {
+    to {
+      opacity: var(--moduix-swap-exit-ending-opacity, 0);
+      transform: rotate(180deg);
+    }
+  }
+
+  @keyframes swap-flip-enter-kaIqut {
+    from {
+      opacity: var(--moduix-swap-enter-starting-opacity, 0);
+      transform: rotateY(-180deg);
+    }
+  }
+
+  @keyframes swap-flip-exit-x6dSs8 {
+    to {
+      opacity: var(--moduix-swap-exit-ending-opacity, 0);
+      transform: rotateY(180deg);
+    }
+  }
+}
+

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

@@ -1,2 +1 @@
-import { Swap, useSwapContext } from "./Swap.js";
-export { Swap, useSwapContext };
+export { Swap, useSwap, useSwapContext, type SwapAnimation } from './Swap.js';

package/dist/components/swap/index.js

@@ -0,0 +1 @@
+export { Swap, useSwap, useSwapContext } from "./Swap.js";

package/dist/components/switch/Switch.d.ts

@@ -1,21 +1,19 @@
-import { ComponentProps, ReactNode } from "react";
-import { Switch, useSwitch, useSwitchContext } from "@ark-ui/react/switch";
-
-//#region src/components/switch/Switch.d.ts
+import { Switch as SwitchPrimitive, useSwitch, useSwitchContext } from '@ark-ui/react/switch';
+import type { ComponentProps, ReactNode } from 'react';
 type SwitchSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type SwitchRootProps = ComponentProps<typeof Switch.Root> & {
-  size?: SwitchSize;
+type SwitchRootProps = ComponentProps<typeof SwitchPrimitive.Root> & {
+    size?: SwitchSize;
 };
-type SwitchRootProviderProps = ComponentProps<typeof Switch.RootProvider> & {
-  size?: SwitchSize;
+type SwitchRootProviderProps = ComponentProps<typeof SwitchPrimitive.RootProvider> & {
+    size?: SwitchSize;
 };
-declare const Switch$1: import("react").ForwardRefExoticComponent<Omit<SwitchRootProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<SwitchRootProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<SwitchRootProviderProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-  Control: import("react").ForwardRefExoticComponent<Omit<Switch.ControlProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Thumb: import("react").ForwardRefExoticComponent<Omit<Switch.ThumbProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Label: import("react").ForwardRefExoticComponent<Omit<Switch.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Context: (props: Switch.ContextProps) => ReactNode;
+declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchRootProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<SwitchRootProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<SwitchRootProviderProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Omit<SwitchPrimitive.ControlProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Thumb: import("react").ForwardRefExoticComponent<Omit<SwitchPrimitive.ThumbProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<SwitchPrimitive.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Context: (props: SwitchPrimitive.ContextProps) => ReactNode;
 };
-//#endregion
-export { Switch$1 as Switch, type SwitchRootProps, type SwitchRootProviderProps, type SwitchSize, useSwitch, useSwitchContext };
+export { Switch, useSwitch, useSwitchContext };
+export type { SwitchRootProps, SwitchRootProviderProps, SwitchSize };