@konstructio/ui 0.0.2

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

@@ -0,0 +1,8 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { tooltipVariants } from './Tooltip.variants';
+export interface TooltipProps extends PropsWithChildren, VariantProps<typeof tooltipVariants> {
+    content: ReactNode | string;
+    className?: string;
+    wrapperClassName?: string;
+}

package/dist/components/Tooltip/Tooltip.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,8 @@
+export declare const tooltipVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+    position?: "left" | "right" | "top" | "bottom" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const arrowVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+    position?: "left" | "right" | "top" | "bottom" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Tooltip/Tooltip.variants.js

@@ -0,0 +1,93 @@
+import { c as r } from "../../index-BwYCDOHZ.js";
+const e = r(
+  [
+    "absolute",
+    "w-max",
+    "p-2.5",
+    "rounded-lg",
+    "shadow-md",
+    "transition-all",
+    "ease-linear",
+    "opacity-0",
+    "duration-250",
+    "aria-expanded:opacity-100",
+    "delay-100"
+  ],
+  {
+    variants: {
+      theme: {
+        kubefirst: "bg-kubefirst-purple-light",
+        konstruct: "bg-orange-500",
+        colony: "bg-red-700"
+      },
+      position: {
+        top: ["-top-[110%]", "left-[50%]", "-translate-x-1/2"],
+        bottom: ["-bottom-[110%]", "right-[50%]", "translate-x-1/2"],
+        right: ["top-1/2", "ml-1", "left-[100%]", "-translate-y-2/4"],
+        left: ["top-1/2", "mr-1", "right-[100%]", "-translate-y-2/4"]
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst",
+      position: "right"
+    }
+  }
+), o = r(["absolute", "w-0", "h-0"], {
+  variants: {
+    theme: {
+      kubefirst: "border-kubefirst-purple-light",
+      konstruct: "border-orange-500",
+      colony: "border-red-700"
+    },
+    position: {
+      top: [
+        "top-full",
+        "right-1/2",
+        "translate-x-2/4",
+        "border-l-4",
+        "border-l-transparent",
+        "border-r-4",
+        "border-r-transparent",
+        "border-t-4"
+      ],
+      bottom: [
+        "bottom-full",
+        "right-1/2",
+        "translate-x-2/4",
+        "border-l-4",
+        "border-l-transparent",
+        "border-r-4",
+        "border-r-transparent",
+        "border-b-4"
+      ],
+      right: [
+        "right-full",
+        "top-1/2",
+        "-translate-y-2/4",
+        "border-t-4",
+        "border-t-transparent",
+        "border-b-4",
+        "border-b-transparent",
+        "border-r-4"
+      ],
+      left: [
+        "left-full",
+        "top-1/2",
+        "-translate-y-2/4",
+        "border-t-4",
+        "border-t-transparent",
+        "border-b-4",
+        "border-b-transparent",
+        "border-l-4"
+      ]
+    }
+  },
+  defaultVariants: {
+    theme: "kubefirst",
+    position: "right"
+  }
+});
+export {
+  o as arrowVariants,
+  e as tooltipVariants
+};

package/dist/components/Tooltip/hooks/useTooltip.d.ts

@@ -0,0 +1,4 @@
+export declare const useTooltip: () => {
+    isVisible: boolean;
+    componentRef: import('react').RefObject<HTMLElement>;
+};

package/dist/components/Tooltip/hooks/useTooltip.js

@@ -0,0 +1,25 @@
+import { useRef as l, useState as i, useEffect as u } from "react";
+const c = () => {
+  const e = l(null), [o, n] = i(!1);
+  return u(() => {
+    var s, r;
+    const t = new AbortController();
+    return (s = e.current) == null || s.addEventListener(
+      "mouseenter",
+      () => n(!0),
+      { signal: t.signal }
+    ), (r = e.current) == null || r.addEventListener(
+      "mouseleave",
+      () => n(!1),
+      { signal: t.signal }
+    ), () => {
+      t.abort();
+    };
+  }, []), {
+    isVisible: o,
+    componentRef: e
+  };
+};
+export {
+  c as useTooltip
+};

package/dist/components/index.d.ts

@@ -0,0 +1,19 @@
+export * from './AlertDialog/AlertDialog';
+export * from './Autocomplete/Autocomplete';
+export * from './Breadcrumb/Breadcrumb';
+export * from './Button/Button';
+export * from './Checkbox/Checkbox';
+export * from './Dropdown/Dropdown';
+export * from './Input/Input';
+export * from './Modal/Modal';
+export * from './NumberInput/NumberInput';
+export * from './ProgressBar/ProgressBar';
+export * from './Radio/Radio';
+export * from './Range/Range';
+export * from './Slider/Slider';
+export * from './Switch/Switch';
+export * from './Tag/Tag';
+export * from './TagSelect/TagSelect';
+export * from './TextArea/TextArea';
+export * from './Toast/Toast';
+export * from './Tooltip/Tooltip';

package/dist/components/index.js

@@ -0,0 +1,40 @@
+import { AlertDialog as e } from "./AlertDialog/AlertDialog.js";
+import { Autocomplete as p } from "./Autocomplete/Autocomplete.js";
+import { Breadcrumb as x } from "./Breadcrumb/Breadcrumb.js";
+import { Button as a } from "./Button/Button.js";
+import { Checkbox as u } from "./Checkbox/Checkbox.js";
+import { Dropdown as d } from "./Dropdown/Dropdown.js";
+import { Input as i } from "./Input/Input.js";
+import { M as T } from "../Modal-CO0_SnXD.js";
+import { NumberInput as b } from "./NumberInput/NumberInput.js";
+import { ProgressBar as B } from "./ProgressBar/ProgressBar.js";
+import { Radio as h } from "./Radio/Radio.js";
+import { Range as D } from "./Range/Range.js";
+import { Slider as M } from "./Slider/Slider.js";
+import { Switch as k } from "./Switch/Switch.js";
+import { Tag as N } from "./Tag/Tag.js";
+import { TagSelect as j } from "./TagSelect/TagSelect.js";
+import { TextArea as v } from "./TextArea/TextArea.js";
+import { Toast as z } from "./Toast/Toast.js";
+import { Tooltip as F } from "./Tooltip/Tooltip.js";
+export {
+  e as AlertDialog,
+  p as Autocomplete,
+  x as Breadcrumb,
+  a as Button,
+  u as Checkbox,
+  d as Dropdown,
+  i as Input,
+  T as Modal,
+  b as NumberInput,
+  B as ProgressBar,
+  h as Radio,
+  D as Range,
+  M as Slider,
+  k as Switch,
+  N as Tag,
+  j as TagSelect,
+  v as TextArea,
+  z as Toast,
+  F as Tooltip
+};

package/dist/contexts/index.d.ts

@@ -0,0 +1,3 @@
+export * from './theme.context';
+export * from './theme.hook';
+export * from './theme.provider';

package/dist/contexts/index.js

@@ -0,0 +1,8 @@
+import { ThemeContext as r } from "./theme.context.js";
+import { useTheme as t } from "./theme.hook.js";
+import { ThemeProvider as f } from "./theme.provider.js";
+export {
+  r as ThemeContext,
+  f as ThemeProvider,
+  t as useTheme
+};

package/dist/contexts/theme.context.d.ts

@@ -0,0 +1,6 @@
+export type Theme = 'kubefirst' | 'konstruct' | 'colony' | undefined;
+export type ThemeContextType = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+export declare const ThemeContext: import('react').Context<ThemeContextType>;

package/dist/contexts/theme.context.js

@@ -0,0 +1,10 @@
+import { createContext as e } from "react";
+const o = e({
+  theme: void 0,
+  setTheme() {
+    throw new Error("setTheme function must be overridden");
+  }
+});
+export {
+  o as ThemeContext
+};

package/dist/contexts/theme.hook.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from './theme.context';
+type ThemeProps = {
+    theme?: Theme;
+    setTheme?: (theme: Theme) => void;
+};
+export declare const useTheme: () => ThemeProps;
+export {};

package/dist/contexts/theme.hook.js

@@ -0,0 +1,9 @@
+import { useContext as e } from "react";
+import { ThemeContext as o } from "./theme.context.js";
+const m = () => {
+  const t = e(o);
+  return t || {};
+};
+export {
+  m as useTheme
+};

package/dist/contexts/theme.provider.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+import { ThemeContextType } from './theme.context';
+type Props = PropsWithChildren & {
+    theme?: ThemeContextType['theme'];
+};
+export declare const ThemeProvider: FC<Props>;
+export {};

package/dist/contexts/theme.provider.js

@@ -0,0 +1,17 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useState as i } from "react";
+import { a as n } from "../js.cookie-OLEfuq_g.js";
+import { isClient as s } from "../utils/index.js";
+import { ThemeContext as f } from "./theme.context.js";
+const v = ({ children: r, theme: e }) => {
+  const [t, o] = i(() => {
+    if (e)
+      return e;
+    if (s)
+      return n.get("konstruct-theme");
+  });
+  return /* @__PURE__ */ m(f.Provider, { value: { theme: t, setTheme: o }, children: r });
+};
+export {
+  v as ThemeProvider
+};

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useToggle';

package/dist/hooks/index.js

@@ -0,0 +1,4 @@
+import { useToggle as g } from "./useToggle.js";
+export {
+  g as useToggle
+};

package/dist/hooks/useToggle.d.ts

@@ -0,0 +1 @@
+export declare const useToggle: (initialState?: boolean) => [boolean, (value?: boolean) => void];

package/dist/hooks/useToggle.js

@@ -0,0 +1,11 @@
+import { useState as l, useCallback as u } from "react";
+const c = (t = !1) => {
+  const [e, o] = l(t), s = u(
+    (a) => o(a ?? !e),
+    [e]
+  );
+  return [e, s];
+};
+export {
+  c as useToggle
+};

package/dist/index-2K8qjK4R.js

@@ -0,0 +1,145 @@
+import * as i from "react";
+import { b as m, d as h, u as U } from "./index-8vgf-x5i.js";
+import { P as b, d as z } from "./index-BJ7FQg17.js";
+import { u as T } from "./index-CCavb-1K.js";
+import { jsx as P } from "react/jsx-runtime";
+import { R as H } from "./index-2hJuj4UN.js";
+function K(r, e = globalThis == null ? void 0 : globalThis.document) {
+  const s = m(r);
+  i.useEffect(() => {
+    const n = (t) => {
+      t.key === "Escape" && s(t);
+    };
+    return e.addEventListener("keydown", n, { capture: !0 }), () => e.removeEventListener("keydown", n, { capture: !0 });
+  }, [s, e]);
+}
+var j = "DismissableLayer", p = "dismissableLayer.update", X = "dismissableLayer.pointerDownOutside", Y = "dismissableLayer.focusOutside", g, B = i.createContext({
+  layers: /* @__PURE__ */ new Set(),
+  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
+  branches: /* @__PURE__ */ new Set()
+}), x = i.forwardRef(
+  (r, e) => {
+    const {
+      disableOutsidePointerEvents: s = !1,
+      onEscapeKeyDown: n,
+      onPointerDownOutside: t,
+      onFocusOutside: o,
+      onInteractOutside: l,
+      onDismiss: u,
+      ...v
+    } = r, c = i.useContext(B), [d, N] = i.useState(null), f = (d == null ? void 0 : d.ownerDocument) ?? (globalThis == null ? void 0 : globalThis.document), [, F] = i.useState({}), W = T(e, (a) => N(a)), D = Array.from(c.layers), [k] = [...c.layersWithOutsidePointerEventsDisabled].slice(-1), I = D.indexOf(k), L = d ? D.indexOf(d) : -1, _ = c.layersWithOutsidePointerEventsDisabled.size > 0, C = L >= I, M = G((a) => {
+      const E = a.target, R = [...c.branches].some((y) => y.contains(E));
+      !C || R || (t == null || t(a), l == null || l(a), a.defaultPrevented || u == null || u());
+    }, f), O = J((a) => {
+      const E = a.target;
+      [...c.branches].some((y) => y.contains(E)) || (o == null || o(a), l == null || l(a), a.defaultPrevented || u == null || u());
+    }, f);
+    return K((a) => {
+      L === c.layers.size - 1 && (n == null || n(a), !a.defaultPrevented && u && (a.preventDefault(), u()));
+    }, f), i.useEffect(() => {
+      if (d)
+        return s && (c.layersWithOutsidePointerEventsDisabled.size === 0 && (g = f.body.style.pointerEvents, f.body.style.pointerEvents = "none"), c.layersWithOutsidePointerEventsDisabled.add(d)), c.layers.add(d), w(), () => {
+          s && c.layersWithOutsidePointerEventsDisabled.size === 1 && (f.body.style.pointerEvents = g);
+        };
+    }, [d, f, s, c]), i.useEffect(() => () => {
+      d && (c.layers.delete(d), c.layersWithOutsidePointerEventsDisabled.delete(d), w());
+    }, [d, c]), i.useEffect(() => {
+      const a = () => F({});
+      return document.addEventListener(p, a), () => document.removeEventListener(p, a);
+    }, []), /* @__PURE__ */ P(
+      b.div,
+      {
+        ...v,
+        ref: W,
+        style: {
+          pointerEvents: _ ? C ? "auto" : "none" : void 0,
+          ...r.style
+        },
+        onFocusCapture: h(r.onFocusCapture, O.onFocusCapture),
+        onBlurCapture: h(r.onBlurCapture, O.onBlurCapture),
+        onPointerDownCapture: h(
+          r.onPointerDownCapture,
+          M.onPointerDownCapture
+        )
+      }
+    );
+  }
+);
+x.displayName = j;
+var q = "DismissableLayerBranch", S = i.forwardRef((r, e) => {
+  const s = i.useContext(B), n = i.useRef(null), t = T(e, n);
+  return i.useEffect(() => {
+    const o = n.current;
+    if (o)
+      return s.branches.add(o), () => {
+        s.branches.delete(o);
+      };
+  }, [s.branches]), /* @__PURE__ */ P(b.div, { ...r, ref: t });
+});
+S.displayName = q;
+function G(r, e = globalThis == null ? void 0 : globalThis.document) {
+  const s = m(r), n = i.useRef(!1), t = i.useRef(() => {
+  });
+  return i.useEffect(() => {
+    const o = (u) => {
+      if (u.target && !n.current) {
+        let v = function() {
+          A(
+            X,
+            s,
+            c,
+            { discrete: !0 }
+          );
+        };
+        const c = { originalEvent: u };
+        u.pointerType === "touch" ? (e.removeEventListener("click", t.current), t.current = v, e.addEventListener("click", t.current, { once: !0 })) : v();
+      } else
+        e.removeEventListener("click", t.current);
+      n.current = !1;
+    }, l = window.setTimeout(() => {
+      e.addEventListener("pointerdown", o);
+    }, 0);
+    return () => {
+      window.clearTimeout(l), e.removeEventListener("pointerdown", o), e.removeEventListener("click", t.current);
+    };
+  }, [e, s]), {
+    // ensures we check React component tree (not just DOM tree)
+    onPointerDownCapture: () => n.current = !0
+  };
+}
+function J(r, e = globalThis == null ? void 0 : globalThis.document) {
+  const s = m(r), n = i.useRef(!1);
+  return i.useEffect(() => {
+    const t = (o) => {
+      o.target && !n.current && A(Y, s, { originalEvent: o }, {
+        discrete: !1
+      });
+    };
+    return e.addEventListener("focusin", t), () => e.removeEventListener("focusin", t);
+  }, [e, s]), {
+    onFocusCapture: () => n.current = !0,
+    onBlurCapture: () => n.current = !1
+  };
+}
+function w() {
+  const r = new CustomEvent(p);
+  document.dispatchEvent(r);
+}
+function A(r, e, s, { discrete: n }) {
+  const t = s.originalEvent.target, o = new CustomEvent(r, { bubbles: !1, cancelable: !0, detail: s });
+  e && t.addEventListener(r, e, { once: !0 }), n ? z(t, o) : t.dispatchEvent(o);
+}
+var ne = x, re = S, Q = "Portal", V = i.forwardRef((r, e) => {
+  var u;
+  const { container: s, ...n } = r, [t, o] = i.useState(!1);
+  U(() => o(!0), []);
+  const l = s || t && ((u = globalThis == null ? void 0 : globalThis.document) == null ? void 0 : u.body);
+  return l ? H.createPortal(/* @__PURE__ */ P(b.div, { ...n, ref: e }), l) : null;
+});
+V.displayName = Q;
+export {
+  re as B,
+  x as D,
+  V as P,
+  ne as R
+};