@moduix/react 1.1.0

package/dist/components/toast/Toast.js

@@ -0,0 +1,92 @@
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CloseButton } from "../close-button/CloseButton.js";
+import Toast_module_default from "./Toast.module.js";
+import { jsx } from "react/jsx-runtime";
+import { Portal } from "@ark-ui/react/portal";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { Toast, Toaster, createToaster, useToastContext } from "@ark-ui/react/toast";
+//#region src/components/toast/Toast.tsx
+const DEFAULT_CLOSE_TRIGGER_LABEL = "Close toast";
+const Toaster$1 = forwardRef(function Toaster$2({ className, portalled = true, portalRef, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Portal, {
+		disabled: !portalled,
+		container: portalRef,
+		children: /* @__PURE__ */ jsx(Toaster, {
+			ref,
+			"data-slot": "toast-toaster",
+			className: clsx(Toast_module_default.toaster, normalizeClassName(className)),
+			...props
+		})
+	});
+});
+const ToastRoot = forwardRef(function ToastRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toast.Root, {
+		ref,
+		"data-slot": "toast-root",
+		className: clsx(Toast_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const ToastTitle = forwardRef(function ToastTitle({ className, children, ...props }, ref) {
+	const toast = useToastContext();
+	return /* @__PURE__ */ jsx(Toast.Title, {
+		ref,
+		"data-slot": "toast-title",
+		className: clsx(Toast_module_default.title, normalizeClassName(className)),
+		...props,
+		children: children === void 0 ? toast.title : children
+	});
+});
+const ToastDescription = forwardRef(function ToastDescription({ className, children, ...props }, ref) {
+	const toast = useToastContext();
+	return /* @__PURE__ */ jsx(Toast.Description, {
+		ref,
+		"data-slot": "toast-description",
+		className: clsx(Toast_module_default.description, normalizeClassName(className)),
+		...props,
+		children: children === void 0 ? toast.description : children
+	});
+});
+const ToastActionTrigger = forwardRef(function ToastActionTrigger({ asChild, className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toast.ActionTrigger, {
+		ref,
+		asChild,
+		"data-slot": "toast-action-trigger",
+		className: clsx(!asChild && Toast_module_default.actionTrigger, normalizeClassName(className)),
+		...props,
+		children
+	});
+});
+const ToastCloseTrigger = forwardRef(function ToastCloseTrigger({ asChild, className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_TRIGGER_LABEL, ...props }, ref) {
+	if (asChild) return /* @__PURE__ */ jsx(Toast.CloseTrigger, {
+		ref,
+		asChild: true,
+		"data-slot": "toast-close-trigger",
+		"aria-label": ariaLabel,
+		className: normalizeClassName(className),
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(Toast.CloseTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			ref,
+			"data-slot": "toast-close-trigger",
+			"aria-label": ariaLabel,
+			className: clsx(Toast_module_default.closeTrigger, normalizeClassName(className)),
+			...props,
+			children
+		})
+	});
+});
+const Toast$1 = Object.assign(ToastRoot, {
+	Root: ToastRoot,
+	Title: ToastTitle,
+	Description: ToastDescription,
+	ActionTrigger: ToastActionTrigger,
+	CloseTrigger: ToastCloseTrigger,
+	Toaster: Toaster$1
+});
+//#endregion
+export { Toast$1 as Toast, Toaster$1 as Toaster, createToaster };

package/dist/components/toast/Toast.module.js

@@ -0,0 +1,12 @@
+import './Toast.css';
+//#region src/components/toast/Toast.module.css
+var Toast_module_default = {
+	"actionTrigger": "h6KXRa_actionTrigger",
+	"closeTrigger": "h6KXRa_closeTrigger",
+	"description": "h6KXRa_description",
+	"root": "h6KXRa_root",
+	"title": "h6KXRa_title",
+	"toaster": "h6KXRa_toaster"
+};
+//#endregion
+export { Toast_module_default as default };

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

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

package/dist/components/toggle/Toggle.css

@@ -0,0 +1,167 @@
+@layer ui.components {
+  .HKHPeq_root {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--toggle-content-gap, var(--spacing-2));
+    min-height: var(--toggle-size-md, var(--size-lg));
+    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);
+    color: var(--toggle-color, var(--color-foreground));
+    appearance: none;
+    font: inherit;
+    font-size: var(--toggle-font-size, var(--text-sm));
+    font-weight: var(--toggle-font-weight, var(--weight-medium));
+    line-height: var(--toggle-line-height, var(--line-height-text-sm));
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color var(--toggle-transition, var(--transition-default)),
+      border-color var(--toggle-transition, var(--transition-default)),
+      color var(--toggle-transition, var(--transition-default)),
+      opacity var(--toggle-transition, var(--transition-default));
+    background-color: #0000;
+    border-color: #0000;
+    margin: 0;
+    display: inline-flex;
+
+    &:focus-visible {
+      outline: var(--toggle-focus-ring-width, var(--border-width-md)) solid
+        var(--toggle-focus-ring-color, var(--color-ring));
+      outline-offset: var(--toggle-focus-ring-offset, -1px);
+    }
+
+    &[data-disabled] {
+      opacity: var(--toggle-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+      pointer-events: none;
+    }
+
+    & :where(svg) {
+      width: var(--toggle-icon-size, 1rem);
+      height: var(--toggle-icon-size, 1rem);
+      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)));
+
+      @media (hover: hover) {
+        &[data-state="off"]:not([data-disabled]):hover {
+          background-color: var(--toggle-default-bg-hover, var(--color-accent));
+        }
+      }
+
+      &[data-state="off"]:not([data-disabled]):active {
+        background-color: var(--toggle-default-bg-active, var(--color-accent));
+      }
+
+      &[data-state="on"] {
+        border-color: var(--toggle-default-border-color-pressed, var(--color-primary));
+        background-color: var(--toggle-default-bg-pressed, var(--color-primary));
+        color: var(--toggle-default-color-pressed, var(--color-primary-foreground));
+      }
+    }
+
+    &[data-variant="outline"] {
+      border-color: var(--toggle-outline-border-color, var(--color-border));
+      background-color: var(--toggle-outline-bg, var(--color-background));
+      color: var(--toggle-outline-color, var(--toggle-color, var(--color-foreground)));
+
+      @media (hover: hover) {
+        &[data-state="off"]:not([data-disabled]):hover {
+          background-color: var(--toggle-outline-bg-hover, var(--color-accent));
+        }
+      }
+
+      &[data-state="off"]:not([data-disabled]):active {
+        background-color: var(--toggle-outline-bg-active, var(--color-accent));
+      }
+
+      &[data-state="on"] {
+        border-color: var(--toggle-outline-border-color-pressed, var(--color-primary));
+        background-color: var(--toggle-outline-bg-pressed, var(--color-primary));
+        color: var(--toggle-outline-color-pressed, var(--color-primary-foreground));
+      }
+    }
+
+    &[data-variant="ghost"] {
+      border-color: var(--toggle-ghost-border-color, transparent);
+      background-color: var(--toggle-ghost-bg, transparent);
+      color: var(--toggle-ghost-color, var(--toggle-color, var(--color-foreground)));
+
+      @media (hover: hover) {
+        &[data-state="off"]:not([data-disabled]):hover {
+          background-color: var(--toggle-ghost-bg-hover, var(--color-accent));
+        }
+      }
+
+      &[data-state="off"]:not([data-disabled]):active {
+        background-color: var(--toggle-ghost-bg-active, var(--color-accent));
+      }
+
+      &[data-state="on"] {
+        background-color: var(--toggle-ghost-bg-pressed, var(--color-accent));
+        color: var(--toggle-ghost-color-pressed, var(--color-foreground));
+      }
+    }
+
+    &[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);
+      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);
+    }
+
+    &[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);
+      font-size: var(--toggle-font-size-lg, var(--text-md));
+      line-height: var(--toggle-line-height-lg, var(--line-height-text-md));
+    }
+
+    &[data-size="icon-sm"], &[data-size="icon-md"], &[data-size="icon-lg"] {
+      gap: 0;
+      padding: 0;
+    }
+
+    &[data-size="icon-sm"] {
+      width: var(--toggle-size-icon-sm, var(--size-sm));
+      min-width: var(--toggle-size-icon-sm, var(--size-sm));
+      height: var(--toggle-size-icon-sm, var(--size-sm));
+    }
+
+    &[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));
+    }
+
+    &[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));
+    }
+  }
+
+  .HKHPeq_indicator {
+    color: inherit;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+}

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+import { Toggle } from "@ark-ui/react/toggle";
+
+//#region src/components/toggle/Toggle.d.ts
+type ToggleVariant = 'default' | 'outline' | 'ghost';
+type ToggleSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon-sm' | 'icon-md' | 'icon-lg';
+type ToggleRootProps = ComponentProps<typeof Toggle.Root> & {
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+};
+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>>;
+};
+//#endregion
+export { Toggle$1 as Toggle };

package/dist/components/toggle/Toggle.js

@@ -0,0 +1,31 @@
+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";
+//#region src/components/toggle/Toggle.tsx
+const ToggleRoot = forwardRef(function ToggleRoot({ className, variant = "default", size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toggle.Root, {
+		ref,
+		"data-slot": "toggle-root",
+		"data-variant": variant,
+		"data-size": size,
+		className: clsx(Toggle_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const ToggleIndicator = forwardRef(function ToggleIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Toggle.Indicator, {
+		ref,
+		"data-slot": "toggle-indicator",
+		className: clsx(Toggle_module_default.indicator, normalizeClassName(className)),
+		...props
+	});
+});
+const Toggle$1 = Object.assign(ToggleRoot, {
+	Root: ToggleRoot,
+	Indicator: ToggleIndicator
+});
+//#endregion
+export { Toggle$1 as Toggle };

package/dist/components/toggle/Toggle.module.js

@@ -0,0 +1,8 @@
+import './Toggle.css';
+//#region src/components/toggle/Toggle.module.css
+var Toggle_module_default = {
+	"indicator": "HKHPeq_indicator",
+	"root": "HKHPeq_root"
+};
+//#endregion
+export { Toggle_module_default as default };

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

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

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

@@ -0,0 +1,42 @@
+@layer ui.components {
+  ._7gmn9G_root {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--toggle-group-gap, var(--border-width-sm));
+    padding: var(--toggle-group-padding, var(--border-width-md));
+    border: var(--toggle-group-border-width, var(--border-width-sm)) solid
+      var(--toggle-group-border-color, var(--color-border));
+    border-radius: var(--toggle-group-radius, var(--radius-lg));
+    background-color: var(--toggle-group-bg, var(--color-muted));
+    color: var(--toggle-group-color, var(--color-foreground));
+    display: inline-flex;
+
+    &[data-orientation="vertical"] {
+      flex-direction: column;
+      align-items: stretch;
+
+      & > ._7gmn9G_item {
+        justify-content: flex-start;
+        width: 100%;
+      }
+    }
+
+    &[data-variant="ghost"] {
+      --toggle-group-bg: var(--toggle-group-ghost-bg, transparent);
+      --toggle-group-border-color: var(--toggle-group-ghost-border-color, transparent);
+      --toggle-group-padding: var(--toggle-group-ghost-padding, 0);
+    }
+
+    &[data-variant="outline"] {
+      --toggle-group-bg: var(--toggle-group-outline-bg, var(--color-background));
+    }
+  }
+
+  ._7gmn9G_item {
+    border-radius: var(--toggle-group-item-radius, var(--radius-md));
+    --toggle-default-color: var(--toggle-group-color, var(--color-foreground));
+    --toggle-ghost-color: var(--toggle-group-color, var(--color-foreground));
+    --toggle-outline-color: var(--toggle-group-color, var(--color-foreground));
+    flex: none;
+  }
+}

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

@@ -0,0 +1,25 @@
+import { ComponentProps } from "react";
+import { ToggleGroup } from "@ark-ui/react/toggle-group";
+
+//#region src/components/toggle-group/ToggleGroup.d.ts
+type ToggleVariant = 'default' | 'outline' | 'ghost';
+type ToggleSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon-sm' | 'icon-md' | 'icon-lg';
+type ToggleGroupRootProps = ComponentProps<typeof ToggleGroup.Root> & {
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+};
+type ToggleGroupRootProviderProps = ComponentProps<typeof ToggleGroup.RootProvider> & {
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+};
+type ToggleGroupItemProps = ComponentProps<typeof ToggleGroup.Item> & {
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+};
+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>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<ToggleGroupItemProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { ToggleGroup$1 as ToggleGroup };

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

@@ -0,0 +1,62 @@
+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";
+//#region src/components/toggle-group/ToggleGroup.tsx
+const ToggleGroupStyleContext = createContext({
+	variant: "default",
+	size: "md"
+});
+const ToggleGroupRoot = forwardRef(function ToggleGroupRoot({ className, variant = "default", size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ToggleGroupStyleContext.Provider, {
+		value: {
+			variant,
+			size
+		},
+		children: /* @__PURE__ */ jsx(ToggleGroup.Root, {
+			ref,
+			"data-slot": "toggle-group-root",
+			"data-variant": variant,
+			"data-size": size,
+			className: clsx(ToggleGroup_module_default.root, normalizeClassName(className)),
+			...props
+		})
+	});
+});
+const ToggleGroupRootProvider = forwardRef(function ToggleGroupRootProvider({ className, variant = "default", size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ToggleGroupStyleContext.Provider, {
+		value: {
+			variant,
+			size
+		},
+		children: /* @__PURE__ */ jsx(ToggleGroup.RootProvider, {
+			ref,
+			"data-slot": "toggle-group-root-provider",
+			"data-variant": variant,
+			"data-size": size,
+			className: clsx(ToggleGroup_module_default.root, normalizeClassName(className)),
+			...props
+		})
+	});
+});
+const ToggleGroupItem = forwardRef(function ToggleGroupItem({ className, variant, size, ...props }, ref) {
+	const inherited = useContext(ToggleGroupStyleContext);
+	return /* @__PURE__ */ jsx(ToggleGroup.Item, {
+		ref,
+		"data-slot": "toggle-group-item",
+		"data-variant": variant ?? inherited.variant,
+		"data-size": size ?? inherited.size,
+		className: clsx(Toggle_module_default.root, ToggleGroup_module_default.item, normalizeClassName(className)),
+		...props
+	});
+});
+const ToggleGroup$1 = Object.assign(ToggleGroupRoot, {
+	Root: ToggleGroupRoot,
+	RootProvider: ToggleGroupRootProvider,
+	Item: ToggleGroupItem
+});
+//#endregion
+export { ToggleGroup$1 as ToggleGroup };

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

@@ -0,0 +1,8 @@
+import './ToggleGroup.css';
+//#region src/components/toggle-group/ToggleGroup.module.css
+var ToggleGroup_module_default = {
+	"item": "_7gmn9G_item",
+	"root": "_7gmn9G_root"
+};
+//#endregion
+export { ToggleGroup_module_default as default };

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

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

package/dist/components/tooltip/Tooltip.css

@@ -0,0 +1,125 @@
+@layer ui.components {
+  .DqDdfq_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);
+    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));
+    background-color: var(--tooltip-trigger-bg, var(--color-background));
+    color: var(--tooltip-trigger-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--tooltip-trigger-font-size, var(--text-sm));
+    line-height: var(--tooltip-trigger-line-height, var(--line-height-text-sm));
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--tooltip-transition, var(--duration-fast)) var(--ease-in-out),
+      border-color var(--tooltip-transition, var(--duration-fast)) var(--ease-in-out),
+      color var(--tooltip-transition, var(--duration-fast)) var(--ease-in-out);
+    outline: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--tooltip-trigger-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:active, &[data-state="open"] {
+      background-color: var(--tooltip-trigger-bg-active, var(--tooltip-trigger-bg-hover, var(--color-accent)));
+    }
+
+    &: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);
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      opacity: var(--tooltip-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .DqDdfq_positioner {
+    z-index: var(--z-index, var(--z-popup));
+    max-width: var(--available-width);
+    max-height: var(--available-height);
+  }
+
+  .DqDdfq_content {
+    --arrow-background: var(--tooltip-arrow-background, var(--tooltip-bg, var(--color-popover)));
+    --arrow-size: var(--tooltip-arrow-size, .625rem);
+    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);
+    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));
+    background-color: var(--tooltip-bg, var(--color-popover));
+    color: var(--tooltip-color, var(--color-popover-foreground));
+    box-shadow: var(--tooltip-shadow, var(--shadow-lg));
+    font-size: var(--tooltip-font-size, var(--text-sm));
+    line-height: var(--tooltip-line-height, var(--line-height-text-sm));
+    text-align: center;
+    transform-origin: var(--transform-origin);
+    position: relative;
+
+    &[data-state="open"] {
+      animation: DqDdfq_tooltip-content-in var(--tooltip-transition, var(--duration-fast)) ease-out;
+    }
+
+    &[data-state="closed"] {
+      animation: DqDdfq_tooltip-content-out var(--tooltip-transition, var(--duration-fast)) ease-in;
+    }
+
+    &[data-instant] {
+      animation-duration: 0s;
+    }
+  }
+
+  .DqDdfq_arrow {
+    --arrow-background: var(--tooltip-arrow-background, var(--tooltip-bg, var(--color-popover)));
+    --arrow-size: var(--tooltip-arrow-size, .625rem);
+  }
+
+  .DqDdfq_arrowTip {
+    border-top: var(--tooltip-border-width, var(--border-width-sm)) solid
+      var(--tooltip-arrow-stroke-color, var(--tooltip-border-color, var(--color-border)));
+    border-left: var(--tooltip-border-width, var(--border-width-sm)) solid
+      var(--tooltip-arrow-stroke-color, var(--tooltip-border-color, var(--color-border)));
+  }
+
+  @keyframes DqDdfq_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)));
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes DqDdfq_tooltip-content-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    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)));
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
+import { ComponentProps } from "react";
+import { Tooltip } from "@ark-ui/react/tooltip";
+
+//#region src/components/tooltip/Tooltip.d.ts
+type TooltipRootProps = ComponentProps<typeof Tooltip.Root> & OverlayPortalProps;
+type TooltipRootProviderProps = ComponentProps<typeof Tooltip.RootProvider> & OverlayPortalProps;
+declare function TooltipRoot({
+  portalled,
+  portalRef,
+  ...props
+}: TooltipRootProps): import("react").JSX.Element;
+declare function TooltipRootProvider({
+  portalled,
+  portalRef,
+  ...props
+}: TooltipRootProviderProps): import("react").JSX.Element;
+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>>;
+  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 };