@kakadu/components 6.1.1 → 6.3.0

package/build/components/popover.mjs

@@ -1,49 +1,56 @@
-import { j as s } from "../jsx-runtime-B4hRZ52C.mjs";
+import { j as n } from "../jsx-runtime-B4hRZ52C.mjs";
 import { cx as p } from "@kuma-ui/core";
-import { createContext as ee, useRef as P, useState as n, useCallback as R, useMemo as b, useEffect as F, useContext as te } from "react";
-import { f as se } from "../focus-trap-react-Dr3BYLw6.mjs";
+import { createContext as te, useRef as P, useState as o, useCallback as R, useMemo as A, useEffect as F, useContext as se } from "react";
+import { f as ne } from "../focus-trap-react-Dr3BYLw6.mjs";
+import oe from "../utilities/listeners.mjs";
 import K, { defaultAtomElementType as Q } from "./atom.mjs";
-const X = ee({
+const re = oe((t) => {
+  window.addEventListener("resize", t, {
+    passive: !0
+  });
+}, (t) => {
+  window.removeEventListener("resize", t);
+}), X = te({
   isVisible: !1,
   isPreparingFocus: !1,
   isFocused: !1
 }), {
-  Provider: ne
+  Provider: ae
 } = X;
-function le() {
-  return te(X);
+function pe() {
+  return se(X);
 }
-function fe({
-  as: u,
-  className: t,
+function ve({
+  as: t,
+  className: s,
   ...l
 }) {
-  return /* @__PURE__ */ s.jsx(K, { as: u ?? Q, ...l, className: p("kakadu-components-2845019685", t) });
+  return /* @__PURE__ */ n.jsx(K, { as: t ?? Q, ...l, className: p("kakadu-components-2845019685", s) });
 }
-function de({
-  as: u,
-  isVisible: t,
+function ke({
+  as: t,
+  isVisible: s,
   label: l,
   shouldCloseOnOutsideClick: v = !0,
-  shouldCloseOnEscapePress: r = !0,
+  shouldCloseOnEscapePress: a = !0,
   children: k,
-  className: a,
+  className: c,
   innerClassName: f,
-  onClose: c,
+  onClose: i,
   ...j
 }) {
-  const w = P(null), g = P(null), [o, h] = n(!1), [d, I] = n(!1), [y, Y] = n(!1), [i, T] = n(!1), [Z, E] = n(!1), z = R((e) => {
+  const w = P(null), g = P(null), [r, h] = o(!1), [d, I] = o(!1), [O, Y] = o(!1), [u, T] = o(!1), [Z, b] = o(!1), V = R((e) => {
     w.current = e, T(!1);
-  }, []), N = P(null), B = R((e) => {
-    e && (N.current = e);
-  }, []), _ = b(() => ({
-    initialFocus: () => N.current ?? void 0,
+  }, []), E = P(null), y = R((e) => {
+    e && (E.current = e);
+  }, []), _ = A(() => ({
+    initialFocus: () => E.current ?? void 0,
     onPostActivate() {
       var e;
-      I(!0), h(!1), (e = N.current) == null || e.focus();
+      I(!0), h(!1), (e = E.current) == null || e.focus();
     },
     clickOutsideDeactivates: v,
-    escapeDeactivates: r,
+    escapeDeactivates: a,
     onPostUnpause() {
       I(!0);
     },
@@ -51,40 +58,42 @@ function de({
       I(!1);
     },
     onDeactivate() {
-      E(!1), T(!1), I(!1);
+      b(!1), T(!1), I(!1);
     }
-  }), [v, r]), [L, C] = n(t ?? !1), $ = b(() => ({
-    isVisible: L,
-    isPreparingFocus: o,
+  }), [v, a]), [N, B] = o(s ?? !1), $ = A(() => ({
+    isVisible: N,
+    isPreparingFocus: r,
     isFocused: d,
-    setInitialFocus: B,
-    close: z
-  }), [L, o, d, B, z]), [m, W] = n("center");
+    setInitialFocus: y,
+    close: V
+  }), [N, r, d, y, V]), [m, C] = o("center");
   return F(() => {
     const e = g.current;
     if (e) {
-      const D = () => {
-        const q = e.offsetParent, M = q instanceof HTMLElement ? q.getBoundingClientRect() : null, H = e.getBoundingClientRect();
-        if (!M) {
-          W("center");
+      const W = () => {
+        const q = e.offsetParent, z = q instanceof HTMLElement ? q.getBoundingClientRect() : null, H = e.getBoundingClientRect();
+        if (!z) {
+          C("center");
           return;
         }
-        const O = 16, S = window.innerWidth - O, V = M.left + M.width / 2 - H.width / 2, U = V + H.width, G = V < O, J = U > S;
+        const D = 16, S = window.innerWidth - D, M = z.left + z.width / 2 - H.width / 2, U = M + H.width, G = M < D, J = U > S;
         let x = "center";
         if (G && J) {
-          const A = O - V;
-          x = U - S > A ? "right" : "left";
+          const L = D - M;
+          x = U - S > L ? "right" : "left";
         } else J ? x = "right" : G && (x = "left");
-        W((A) => A === x ? A : x);
+        C((L) => L === x ? L : x);
       };
-      return D(), window.addEventListener("resize", D), () => {
-        window.removeEventListener("resize", D);
+      W();
+      const ee = re(W);
+      return () => {
+        ee();
       };
     }
   }, []), F(() => {
-    t && (Y(!0), C(!0));
-  }, [t]), F(() => {
-    if (t) {
+    s && (Y(!0), B(!0));
+  }, [s]), F(() => {
+    if (s) {
       const e = setTimeout(() => {
         T(!0);
       }, 100);
@@ -93,55 +102,55 @@ function de({
       };
     }
     T(!1);
-  }, [t]), F(() => {
-    if (!i) {
-      E(!1), h(!1);
+  }, [s]), F(() => {
+    if (!u) {
+      b(!1), h(!1);
       return;
     }
     h(!0);
     const e = window.requestAnimationFrame(() => {
-      E(!0);
+      b(!0);
     });
     return () => {
       window.cancelAnimationFrame(e);
     };
-  }, [i]), F(() => {
-    if (y && !i) {
+  }, [u]), F(() => {
+    if (O && !u) {
       const e = setTimeout(() => {
-        C(!1), c == null || c(w.current ?? void 0);
+        B(!1), i == null || i(w.current ?? void 0);
       }, 370);
       return () => {
         clearTimeout(e);
       };
     }
-  }, [y, i, c]), L ? /* @__PURE__ */ s.jsx(K, { reference: g, as: u ?? Q, role: "dialog", "aria-hidden": !i && !d, "aria-label": l ?? "Popover", ...j, className: p("kakadu-components-3920007758", m === "left" && "kakadu-components-611400930", m === "right" && "kakadu-components-944244368", i && "kakadu-components-1399012551", a), children: /* @__PURE__ */ s.jsxs("div", { className: p("kakadu-components-1118152266", i && "kakadu-components-231244945"), children: [
-    /* @__PURE__ */ s.jsx("div", { className: p("kakadu-components-1951789226", m === "left" && "kakadu-components-1495725644", m === "right" && "kakadu-components-4235689197") }),
-    /* @__PURE__ */ s.jsx(se.FocusTrap, { active: Z, focusTrapOptions: _, children: /* @__PURE__ */ s.jsxs("div", { className: p("kakadu-components-2488426662", f), children: [
-      /* @__PURE__ */ s.jsx(ne, { value: $, children: k }),
-      /* @__PURE__ */ s.jsx("div", { className: p("kakadu-components-3252390100", m === "left" && "kakadu-components-3754561431", m === "right" && "kakadu-components-2265262600") })
+  }, [O, u, i]), N ? /* @__PURE__ */ n.jsx(K, { reference: g, as: t ?? Q, role: "dialog", "aria-hidden": !u && !d, "aria-label": l ?? "Popover", ...j, className: p("kakadu-components-3920007758", m === "left" && "kakadu-components-611400930", m === "right" && "kakadu-components-944244368", u && "kakadu-components-1399012551", c), children: /* @__PURE__ */ n.jsxs("div", { className: p("kakadu-components-1118152266", u && "kakadu-components-231244945"), children: [
+    /* @__PURE__ */ n.jsx("div", { className: p("kakadu-components-1951789226", m === "left" && "kakadu-components-1495725644", m === "right" && "kakadu-components-4235689197") }),
+    /* @__PURE__ */ n.jsx(ne.FocusTrap, { active: Z, focusTrapOptions: _, children: /* @__PURE__ */ n.jsxs("div", { className: p("kakadu-components-2488426662", f), children: [
+      /* @__PURE__ */ n.jsx(ae, { value: $, children: k }),
+      /* @__PURE__ */ n.jsx("div", { className: p("kakadu-components-3252390100", m === "left" && "kakadu-components-3754561431", m === "right" && "kakadu-components-2265262600") })
     ] }) })
   ] }) }) : null;
 }
-function me(u, t) {
-  const [l, v] = n(!1), [r, k] = n(!1), a = P(void 0), f = P(void 0), c = R(async () => (f.current = void 0, v(!0), k(!0), new Promise((o) => {
-    a.current = o;
-  })), []), j = R((o) => {
-    f.current = o, k(!1);
-  }, []), w = R((o) => {
+function we(t, s) {
+  const [l, v] = o(!1), [a, k] = o(!1), c = P(void 0), f = P(void 0), i = R(async () => (f.current = void 0, v(!0), k(!0), new Promise((r) => {
+    c.current = r;
+  })), []), j = R((r) => {
+    f.current = r, k(!1);
+  }, []), w = R((r) => {
     var d;
-    const h = o ?? f.current;
-    f.current = void 0, (d = a.current) == null || d.call(a, h), a.current = void 0, v(!1), k(!1);
-  }, []), g = b(() => l ? /* @__PURE__ */ s.jsx(u, { ...t, isVisible: r, onClose: w }) : null, [l, u, t, r, w]);
-  return b(() => ({
-    isVisible: r,
-    show: c,
+    const h = r ?? f.current;
+    f.current = void 0, (d = c.current) == null || d.call(c, h), c.current = void 0, v(!1), k(!1);
+  }, []), g = A(() => l ? /* @__PURE__ */ n.jsx(t, { ...s, isVisible: a, onClose: w }) : null, [l, t, s, a, w]);
+  return A(() => ({
+    isVisible: a,
+    show: i,
     close: j,
     popover: g
-  }), [r, c, j, g]);
+  }), [a, i, j, g]);
 }
 export {
-  fe as PopoverContainer,
-  de as default,
-  me as usePopover,
-  le as usePopoverContext
+  ve as PopoverContainer,
+  ke as default,
+  we as usePopover,
+  pe as usePopoverContext
 };

package/build/components/revealer.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type RefObject } from 'react';
+import React, { type CSSProperties, type RefObject } from 'react';
 import { type AtomElementType, type AtomProperties } from './atom';
 type RevealerOptions = {
     readonly delay?: number;
@@ -15,5 +15,5 @@ export declare function useRevealer(reference: RefObject<HTMLElement | null>, op
     style: CSSProperties;
     className: string;
 };
-export default function Revealer<Type extends AtomElementType = 'span'>({ as, delay, animationDelay, duration, threshold, distance, isMoving, isCentered, shouldReveal, children, className, ...properties }: AtomProperties<Type> & RevealerOptions): import("react/jsx-runtime").JSX.Element;
+export default function Revealer<Type extends AtomElementType = 'span'>({ as, delay, animationDelay, duration, threshold, distance, isMoving, isCentered, shouldReveal, children, className, ...properties }: AtomProperties<Type> & RevealerOptions): React.JSX.Element;
 export {};

package/build/components/select.d.ts

@@ -1,4 +1,4 @@
-import { type ChangeEvent, type HTMLProps, type ReactNode } from 'react';
+import React, { type ChangeEvent, type HTMLProps, type ReactNode } from 'react';
 import { type InputLabelControllerProperties } from './input';
 export type SelectOption<Type extends string = string> = {
     readonly value: Type;
@@ -9,4 +9,4 @@ export type SelectProperties<Type extends string = string> = Omit<InputLabelCont
     readonly options: Array<SelectOption<Type>>;
     readonly onChange?: (value: Type, event: ChangeEvent<HTMLSelectElement>) => void;
 };
-export default function Select<Type extends string = string>({ label, options, error, warning, information, footnote, className, onChange, ...properties }: SelectProperties<Type>): import("react/jsx-runtime").JSX.Element;
+export default function Select<Type extends string = string>({ label, options, error, warning, information, footnote, className, onChange, ...properties }: SelectProperties<Type>): React.JSX.Element;

package/build/components/separator.d.ts

@@ -1,7 +1,7 @@
-import { type HTMLProps } from 'react';
-export default function Separator({ className, ...properties }: HTMLProps<HTMLHRElement>): import("react/jsx-runtime").JSX.Element;
-export declare function SmallSeparator({ className, ...properties }: HTMLProps<HTMLHRElement>): import("react/jsx-runtime").JSX.Element;
+import React, { type HTMLProps } from 'react';
+export default function Separator({ className, ...properties }: HTMLProps<HTMLHRElement>): React.JSX.Element;
+export declare function SmallSeparator({ className, ...properties }: HTMLProps<HTMLHRElement>): React.JSX.Element;
 export declare function SeparatorLabel({ label, className, ...properties }: {
     readonly label: string;
-} & HTMLProps<HTMLHRElement>): import("react/jsx-runtime").JSX.Element;
-export declare function VerticalSeparator({ className, ...properties }: HTMLProps<HTMLHRElement>): import("react/jsx-runtime").JSX.Element;
+} & HTMLProps<HTMLHRElement>): React.JSX.Element;
+export declare function VerticalSeparator({ className, ...properties }: HTMLProps<HTMLHRElement>): React.JSX.Element;

package/build/components/skeleton.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { type AtomElementType, type AtomProperties } from './atom';
 export declare function getDeterministicSkeletonWidth(a: number, b: number, { minimum, maximum }: {
     readonly minimum: number;
@@ -10,11 +11,11 @@ type SkeletonProperties = {
     readonly className?: string;
     readonly isAnimated?: boolean;
 };
-export declare function SkeletonInstance<Type extends AtomElementType = 'span'>({ as, label, width, height, className, children, isAnimated, ...properties }: SkeletonProperties & AtomProperties<Type>): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonInstance<Type extends AtomElementType = 'span'>({ as, label, width, height, className, children, isAnimated, ...properties }: SkeletonProperties & AtomProperties<Type>): React.JSX.Element;
 export default function Skeleton({ label, lines, isDeterministic, isAnimated, }: {
     readonly label?: string;
     readonly lines?: number;
     readonly isDeterministic?: boolean;
     readonly isAnimated?: boolean;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): React.JSX.Element | null;
 export {};

package/build/components/spinner.d.ts

@@ -1,10 +1,11 @@
+import React from 'react';
 type SpinnerProperties = {
     readonly size?: number;
     readonly strokeWidth?: number;
     readonly isAnimated?: boolean;
 };
-export default function Spinner({ size, strokeWidth, isAnimated, }: SpinnerProperties): import("react/jsx-runtime").JSX.Element;
+export default function Spinner({ size, strokeWidth, isAnimated, }: SpinnerProperties): React.JSX.Element;
 export declare function RevealSpinner({ isVisible, ...properties }: {
     readonly isVisible?: boolean;
-} & Omit<SpinnerProperties, 'isAnimated'>): import("react/jsx-runtime").JSX.Element;
+} & Omit<SpinnerProperties, 'isAnimated'>): React.JSX.Element;
 export {};

package/build/components/text-button.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLProps, type ReactNode } from 'react';
+import React, { type HTMLProps, type ReactNode } from 'react';
 import { type ButtonTooltipPosition } from './button-tooltip';
 export declare const textButtonVariants: readonly ["primary", "delete"];
 export type TextButtonVariant = (typeof textButtonVariants)[number];
@@ -19,5 +19,5 @@ export type TextButtonProperties = BaseTextButtonProperties & ({
     children?: never;
     label: string;
 });
-export default function TextButton({ ref, iconLeft, iconRight, variant, tooltip, tooltipPosition, href, target, rel, disabled, hasUnderline, isSkeleton, isSkeletonAnimated, className, children, label, ...properties }: TextButtonProperties): import("react/jsx-runtime").JSX.Element;
+export default function TextButton({ ref, iconLeft, iconRight, variant, tooltip, tooltipPosition, href, target, rel, disabled, hasUnderline, isSkeleton, isSkeletonAnimated, className, children, label, ...properties }: TextButtonProperties): React.JSX.Element;
 export {};

package/build/components/text.d.ts

@@ -1,19 +1,20 @@
+import React from 'react';
 import { type AtomElementType, type AtomProperties } from './atom';
 import { type WrapperWidth } from './wrapper';
 export declare const textShadowStyles: string;
 export type DefaultHeadingElementType = 'h1';
 export declare const defaultHeadingElementType = "h1";
-export declare function Heading<Type extends AtomElementType = DefaultHeadingElementType>({ reference, as, className, ...properties }: AtomProperties<Type>): import("react/jsx-runtime").JSX.Element;
+export declare function Heading<Type extends AtomElementType = DefaultHeadingElementType>({ reference, as, className, ...properties }: AtomProperties<Type>): React.JSX.Element;
 export declare function AnchorHeading<Type extends AtomElementType = 'h1'>({ as, id, children, className, ...properties }: Omit<AtomProperties<Type>, 'id'> & {
     readonly id: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare const spanStyles: string;
-export declare function Span<Type extends AtomElementType = 'span'>({ as, className, ...properties }: AtomProperties<Type>): import("react/jsx-runtime").JSX.Element;
-export declare function Paragraph<Type extends AtomElementType = 'p'>({ as, className, ...properties }: AtomProperties<Type>): import("react/jsx-runtime").JSX.Element;
-export declare function Footnote<Type extends AtomElementType = 'small'>({ as, className, ...properties }: AtomProperties<Type>): import("react/jsx-runtime").JSX.Element;
-export declare function Label<Type extends AtomElementType = 'span'>({ as, className, ...properties }: AtomProperties<Type>): import("react/jsx-runtime").JSX.Element;
+export declare function Span<Type extends AtomElementType = 'span'>({ as, className, ...properties }: AtomProperties<Type>): React.JSX.Element;
+export declare function Paragraph<Type extends AtomElementType = 'p'>({ as, className, ...properties }: AtomProperties<Type>): React.JSX.Element;
+export declare function Footnote<Type extends AtomElementType = 'small'>({ as, className, ...properties }: AtomProperties<Type>): React.JSX.Element;
+export declare function Label<Type extends AtomElementType = 'span'>({ as, className, ...properties }: AtomProperties<Type>): React.JSX.Element;
 export type TextProperties<Type extends AtomElementType = 'div'> = Omit<AtomProperties<Type>, 'width'> & {
     readonly width?: WrapperWidth;
 };
-export default function Text<Type extends AtomElementType = 'div'>({ as, width, className, ...properties }: TextProperties<Type>): import("react/jsx-runtime").JSX.Element;
-export declare function Hero<Type extends AtomElementType = 'div'>(properties: TextProperties<Type>): import("react/jsx-runtime").JSX.Element;
+export default function Text<Type extends AtomElementType = 'div'>({ as, width, className, ...properties }: TextProperties<Type>): React.JSX.Element;
+export declare function Hero<Type extends AtomElementType = 'div'>(properties: TextProperties<Type>): React.JSX.Element;

package/build/components/theme-setter.d.ts

@@ -1,4 +1,4 @@
-import { type RefObject } from 'react';
+import React, { type RefObject } from 'react';
 export declare const themePreferences: string[];
 type ThemePreference = (typeof themePreferences)[number];
 type ThemeElement = HTMLElement | RefObject<HTMLElement | null>;
@@ -7,5 +7,5 @@ export declare function useIsLightTheme(element?: ThemeElement): boolean;
 export declare function useIsDarkTheme(element?: ThemeElement): boolean;
 export declare function getThemePreference(): string;
 export declare function setThemePreference(preference: ThemePreference): void;
-export default function ThemeSetter(): import("react/jsx-runtime").JSX.Element;
+export default function ThemeSetter(): React.JSX.Element;
 export {};

package/build/components/veil.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 export default function Veil({ className, hasMovingStars, }: {
     readonly className?: string;
     readonly hasMovingStars?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/build/components/wrapper.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import { type AtomElementType, type DefaultAtomElementType } from './atom';
 import { type FlexProperties } from './flex';
 export declare const wrapperWidths: readonly ["wide", "page", "text", "content"];
@@ -9,4 +9,4 @@ export type WrapperProperties<Type extends AtomElementType = DefaultAtomElementT
     readonly outerChildrenBefore?: ReactNode;
     readonly outerChildrenAfter?: ReactNode;
 };
-export default function Wrapper<Type extends AtomElementType = DefaultAtomElementType>({ as, gap, direction, preset, distribution, alignment, wrap, width, className, innerClassName, children, outerChildrenBefore, outerChildrenAfter, ...properties }: WrapperProperties<Type>): import("react/jsx-runtime").JSX.Element;
+export default function Wrapper<Type extends AtomElementType = DefaultAtomElementType>({ as, gap, direction, preset, distribution, alignment, wrap, width, className, innerClassName, children, outerChildrenBefore, outerChildrenAfter, ...properties }: WrapperProperties<Type>): React.JSX.Element;