@konstructio/ui 0.0.12-alpha.9 → 0.0.13-alpha.1

package/dist/components/Tooltip/Tooltip.js

@@ -1,34 +1,28 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { forwardRef as N, useRef as w, useImperativeHandle as x, useMemo as R, isValidElement as T } from "react";
-import { S as a } from "../../index-B_6_jmOO.js";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { S as i } from "../../index-Bk324h27.js";
+import { forwardRef as v, useRef as N, useImperativeHandle as w, useMemo as h, isValidElement as x } from "react";
 import { cn as o } from "../../utils/index.js";
-import { arrowVariants as V, tooltipVariants as b } from "./Tooltip.variants.js";
-import { useTooltip as j } from "./hooks/useTooltip.js";
-import { useTheme as C } from "../../contexts/theme.hook.js";
-const q = N(
-  ({ children: t, content: l, className: n, theme: c, position: s, wrapperClassName: p }, f) => {
-    const d = w(null), { theme: h } = C(), m = c ?? h, { isVisible: u, componentRef: r } = j();
-    x(f, () => r.current, [r]);
-    const v = R(
-      () => T(t) ? t : /* @__PURE__ */ e("p", { className: "p-2", children: t }),
-      [t]
+import { arrowVariants as R, tooltipVariants as V } from "./Tooltip.variants.js";
+import { useTooltip as b } from "./hooks/useTooltip.js";
+const I = v(
+  ({ children: r, content: l, className: m, theme: n, position: a, wrapperClassName: c }, p) => {
+    const f = N(null), { isVisible: d, componentRef: s } = b();
+    w(p, () => s.current, [s]);
+    const u = h(
+      () => x(r) ? r : /* @__PURE__ */ e("p", { className: "p-2", children: r }),
+      [r]
     );
-    return /* @__PURE__ */ e("div", { className: o("w-full", p), children: /* @__PURE__ */ i("div", { className: "relative w-max", children: [
-      /* @__PURE__ */ e(a, { ref: r, className: o("cursor-pointer ", n), children: v }),
-      /* @__PURE__ */ i(
+    return /* @__PURE__ */ e("div", { className: o("w-full", c), "data-theme": n, children: /* @__PURE__ */ t("div", { className: "relative w-max", children: [
+      /* @__PURE__ */ e(i, { ref: s, className: o("cursor-pointer ", m), children: u }),
+      /* @__PURE__ */ t(
         "div",
         {
-          ref: d,
-          className: o(b({ theme: m, position: s })),
-          "data-visible": u,
+          ref: f,
+          className: o(V({ position: a })),
+          "data-visible": d,
           children: [
-            /* @__PURE__ */ e(
-              "span",
-              {
-                className: o(V({ theme: m, position: s }))
-              }
-            ),
-            /* @__PURE__ */ e(a, { children: l })
+            /* @__PURE__ */ e("span", { className: o(R({ position: a })) }),
+            /* @__PURE__ */ e(i, { children: l })
           ]
         }
       )
@@ -36,5 +30,5 @@ const q = N(
   }
 );
 export {
-  q as Tooltip
+  I as Tooltip
 };

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

@@ -1,5 +1,5 @@
 import { c as r } from "../../index-BNmRGtA6.js";
-const e = r(
+const o = r(
   [
     "absolute",
     "w-max",
@@ -11,15 +11,12 @@ const e = r(
     "opacity-0",
     "duration-250",
     "[&[data-visible='true']]:opacity-100",
-    "delay-100"
+    "delay-100",
+    "bg-kubefirst-primary",
+    "colony:bg-red-700"
   ],
   {
     variants: {
-      theme: {
-        kubefirst: "bg-kubefirst-primary",
-        colony: "bg-red-700",
-        civo: ""
-      },
       position: {
         top: ["-top-[120%]", "left-[50%]", "-translate-x-1/2"],
         bottom: ["-bottom-[120%]", "right-[50%]", "translate-x-1/2"],
@@ -28,66 +25,68 @@ const e = r(
       }
     },
     defaultVariants: {
-      theme: "kubefirst",
       position: "right"
     }
   }
-), o = r(["absolute", "w-0", "h-0"], {
-  variants: {
-    theme: {
-      kubefirst: "border-kubefirst-primary",
-      colony: "border-red-700",
-      civo: ""
+), a = r(
+  [
+    "absolute",
+    "w-0",
+    "h-0",
+    "border-kubefirst-primary",
+    "colony:border-red-700"
+  ],
+  {
+    variants: {
+      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"
+        ]
+      }
     },
-    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: {
+      position: "right"
     }
-  },
-  defaultVariants: {
-    theme: "kubefirst",
-    position: "right"
   }
-});
+);
 export {
-  o as arrowVariants,
-  e as tooltipVariants
+  a as arrowVariants,
+  o as tooltipVariants
 };

package/dist/components/Typography/Typography.js

@@ -1,31 +1,35 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
 import { useId as d } from "react";
-import { typographyVariants as f } from "./Typography.variants.js";
-import { useTheme as n } from "../../contexts/theme.hook.js";
-const u = ({
-  className: e,
+import { cn as h } from "../../utils/index.js";
+import { typographyVariants as l } from "./Typography.variants.js";
+import { S as g } from "../../index-Bk324h27.js";
+const i = ({
+  className: p,
   theme: m,
-  children: p,
+  children: s,
   variant: o,
-  component: s,
+  component: r,
+  asChild: e = !1,
   ...t
 }) => {
-  const r = d(), { theme: h } = n(), y = s ?? (o != null && o.includes("h") ? o : "p");
-  return /* @__PURE__ */ c(
-    y,
+  const y = d(), c = e ? g : r ?? (o != null && o.includes("h") ? o : "p");
+  return /* @__PURE__ */ f(
+    c,
     {
-      id: r,
-      className: f({
-        className: e,
-        theme: m ?? h,
-        variant: o
-      }),
+      id: y,
+      "data-theme": m,
+      className: h(
+        l({
+          className: p,
+          variant: o
+        })
+      ),
       ...t,
-      children: p
+      children: s
     }
   );
 };
-u.displayName = "Typography";
+i.displayName = "Typography";
 export {
-  u as Typography
+  i as Typography
 };

package/dist/components/Typography/Typography.variants.js

@@ -46,16 +46,10 @@ const e = t([], {
       body2: ["text-[14px]", "leading-[20px]", "tracking-[0.25px]"],
       body3: ["text-[12px]", "leading-[16px]", "tracking-[0.4px]"],
       tooltip: ["text-[14px]", "leading-[22px]"]
-    },
-    theme: {
-      kubefirst: "",
-      colony: "",
-      civo: ""
     }
   },
   defaultVariants: {
-    variant: "body1",
-    theme: "kubefirst"
+    variant: "body1"
   }
 });
 export {

package/dist/components/index.js

@@ -4,10 +4,10 @@ import { Autocomplete as x } from "./Autocomplete/Autocomplete.js";
 import { Breadcrumb as a } from "./Breadcrumb/Breadcrumb.js";
 import { Button as d } from "./Button/Button.js";
 import { Card as n } from "./Card/Card.js";
-import { Checkbox as l } from "./Checkbox/Checkbox.js";
-import { Dropdown as c } from "./Dropdown/Dropdown.js";
-import { Input as N } from "./Input/Input.js";
-import { M as S } from "../Modal-B-E9uaA6.js";
+import { Checkbox as u } from "./Checkbox/Checkbox.js";
+import { Dropdown as b } from "./Dropdown/Dropdown.js";
+import { Input as v } from "./Input/Input.js";
+import { M as R } from "../Modal-i7eolhYH.js";
 import { NumberInput as s } from "./NumberInput/NumberInput.js";
 import { ProgressBar as C } from "./ProgressBar/ProgressBar.js";
 import { Radio as B } from "./Radio/Radio.js";
@@ -26,12 +26,13 @@ import { Tooltip as Y } from "./Tooltip/Tooltip.js";
 import { Loading as _ } from "./Loading/Loading.js";
 import { Typography as oo } from "./Typography/Typography.js";
 import { Divider as to } from "./Divider/Divider.js";
-import { Footer as po } from "./Sidebar/components/Footer/Footer.js";
-import { Logo as xo } from "./Sidebar/components/Logo/Logo.js";
-import { Navigation as ao } from "./Sidebar/components/Navigation/Navigation.js";
-import { NavigationGroup as go } from "./Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as uo } from "./Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as To } from "./Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { Table as po } from "./Table/Table.js";
+import { Footer as xo } from "./Sidebar/components/Footer/Footer.js";
+import { Logo as ao } from "./Sidebar/components/Logo/Logo.js";
+import { Navigation as go } from "./Sidebar/components/Navigation/Navigation.js";
+import { NavigationGroup as lo } from "./Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as To } from "./Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as co } from "./Sidebar/components/NavigationSeparator/NavigationSeparator.js";
 export {
   t as Alert,
   p as AlertDialog,
@@ -39,18 +40,18 @@ export {
   a as Breadcrumb,
   d as Button,
   n as Card,
-  l as Checkbox,
+  u as Checkbox,
   to as Divider,
-  c as Dropdown,
-  po as Footer,
-  N as Input,
+  b as Dropdown,
+  xo as Footer,
+  v as Input,
   _ as Loading,
-  xo as Logo,
-  S as Modal,
-  ao as Navigation,
-  go as NavigationGroup,
-  uo as NavigationOption,
-  To as NavigationSeparator,
+  ao as Logo,
+  R as Modal,
+  go as Navigation,
+  lo as NavigationGroup,
+  To as NavigationOption,
+  co as NavigationSeparator,
   s as NumberInput,
   C as ProgressBar,
   B as Radio,
@@ -61,6 +62,7 @@ export {
   O as Sidebar,
   j as Slider,
   z as Switch,
+  po as Table,
   H as Tag,
   K as TagSelect,
   U as TextArea,

package/dist/contexts/theme.provider.js

@@ -1,89 +1,87 @@
 import { jsx as v } from "react/jsx-runtime";
-import { useState as h } from "react";
-import { isClient as g } from "../utils/index.js";
+import { useState as h, useEffect as g } from "react";
+import { isClient as l } from "../utils/index.js";
 import { ThemeContext as C } from "./theme.context.js";
 /*! js-cookie v3.0.5 | MIT */
-function u(r) {
+function p(n) {
   for (var o = 1; o < arguments.length; o++) {
     var t = arguments[o];
     for (var f in t)
-      r[f] = t[f];
+      n[f] = t[f];
   }
-  return r;
+  return n;
 }
-var l = {
-  read: function(r) {
-    return r[0] === '"' && (r = r.slice(1, -1)), r.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent);
+var a = {
+  read: function(n) {
+    return n[0] === '"' && (n = n.slice(1, -1)), n.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent);
   },
-  write: function(r) {
-    return encodeURIComponent(r).replace(
+  write: function(n) {
+    return encodeURIComponent(n).replace(
       /%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,
       decodeURIComponent
     );
   }
 };
-function s(r, o) {
-  function t(n, p, e) {
+function s(n, o) {
+  function t(e, u, r) {
     if (!(typeof document > "u")) {
-      e = u({}, o, e), typeof e.expires == "number" && (e.expires = new Date(Date.now() + e.expires * 864e5)), e.expires && (e.expires = e.expires.toUTCString()), n = encodeURIComponent(n).replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent).replace(/[()]/g, escape);
+      r = p({}, o, r), typeof r.expires == "number" && (r.expires = new Date(Date.now() + r.expires * 864e5)), r.expires && (r.expires = r.expires.toUTCString()), e = encodeURIComponent(e).replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent).replace(/[()]/g, escape);
       var i = "";
-      for (var c in e)
-        e[c] && (i += "; " + c, e[c] !== !0 && (i += "=" + e[c].split(";")[0]));
-      return document.cookie = n + "=" + r.write(p, n) + i;
+      for (var c in r)
+        r[c] && (i += "; " + c, r[c] !== !0 && (i += "=" + r[c].split(";")[0]));
+      return document.cookie = e + "=" + n.write(u, e) + i;
     }
   }
-  function f(n) {
-    if (!(typeof document > "u" || arguments.length && !n)) {
-      for (var p = document.cookie ? document.cookie.split("; ") : [], e = {}, i = 0; i < p.length; i++) {
-        var c = p[i].split("="), m = c.slice(1).join("=");
+  function f(e) {
+    if (!(typeof document > "u" || arguments.length && !e)) {
+      for (var u = document.cookie ? document.cookie.split("; ") : [], r = {}, i = 0; i < u.length; i++) {
+        var c = u[i].split("="), m = c.slice(1).join("=");
         try {
           var d = decodeURIComponent(c[0]);
-          if (e[d] = r.read(m, d), n === d)
+          if (r[d] = n.read(m, d), e === d)
             break;
         } catch {
         }
       }
-      return n ? e[n] : e;
+      return e ? r[e] : r;
     }
   }
   return Object.create(
     {
       set: t,
       get: f,
-      remove: function(n, p) {
+      remove: function(e, u) {
         t(
-          n,
+          e,
           "",
-          u({}, p, {
+          p({}, u, {
             expires: -1
           })
         );
       },
-      withAttributes: function(n) {
-        return s(this.converter, u({}, this.attributes, n));
+      withAttributes: function(e) {
+        return s(this.converter, p({}, this.attributes, e));
       },
-      withConverter: function(n) {
-        return s(u({}, this.converter, n), this.attributes);
+      withConverter: function(e) {
+        return s(p({}, this.converter, e), this.attributes);
       }
     },
     {
       attributes: { value: Object.freeze(o) },
-      converter: { value: Object.freeze(r) }
+      converter: { value: Object.freeze(n) }
     }
   );
 }
-var a = s(l, { path: "/" });
+var x = s(a, { path: "/" });
 const R = ({
-  children: r,
+  children: n,
   theme: o
 }) => {
-  const [t, f] = h(() => {
-    if (o)
-      return o;
-    if (g)
-      return a.get("konstruct-theme");
-  });
-  return /* @__PURE__ */ v(C.Provider, { value: { theme: t, setTheme: f }, children: r });
+  const [t, f] = h(() => o || (l ? x.get("konstruct-theme") : "kubefirst"));
+  return g(() => {
+    var e;
+    (e = document.querySelector("body")) == null || e.setAttribute("data-theme", t);
+  }, [t]), /* @__PURE__ */ v(C.Provider, { value: { theme: t, setTheme: f }, children: n });
 };
 export {
   R as ThemeProvider

package/dist/index-AM3avohj.js

@@ -0,0 +1,133 @@
+import { jsx as i, jsxs as w } from "react/jsx-runtime";
+import * as l from "react";
+import { c as M, b as x } from "./index-bYyfdsls.js";
+import { u as A, b as I } from "./index-Bk324h27.js";
+import { c as v, R as $, P as L, O as F, W as G, C as W, T as j, d as B, b as D, e as Y } from "./index-DvFiic6N.js";
+import { Button as k } from "./components/Button/Button.js";
+import { cn as q } from "./utils/index.js";
+var f = "AlertDialog", [H, se] = M(f, [
+  v
+]), s = v(), m = (e) => {
+  const { __scopeAlertDialog: o, ...r } = e, a = s(o);
+  return /* @__PURE__ */ i($, { ...a, ...r, modal: !0 });
+};
+m.displayName = f;
+var V = "AlertDialogTrigger", y = l.forwardRef(
+  (e, o) => {
+    const { __scopeAlertDialog: r, ...a } = e, t = s(r);
+    return /* @__PURE__ */ i(Y, { ...t, ...a, ref: o });
+  }
+);
+y.displayName = V;
+var z = "AlertDialogPortal", _ = (e) => {
+  const { __scopeAlertDialog: o, ...r } = e, a = s(o);
+  return /* @__PURE__ */ i(L, { ...a, ...r });
+};
+_.displayName = z;
+var J = "AlertDialogOverlay", N = l.forwardRef(
+  (e, o) => {
+    const { __scopeAlertDialog: r, ...a } = e, t = s(r);
+    return /* @__PURE__ */ i(F, { ...t, ...a, ref: o });
+  }
+);
+N.displayName = J;
+var n = "AlertDialogContent", [K, Q] = H(n), U = I("AlertDialogContent"), h = l.forwardRef(
+  (e, o) => {
+    const { __scopeAlertDialog: r, children: a, ...t } = e, d = s(r), p = l.useRef(null), O = A(o, p), g = l.useRef(null);
+    return /* @__PURE__ */ i(
+      G,
+      {
+        contentName: n,
+        titleName: C,
+        docsSlug: "alert-dialog",
+        children: /* @__PURE__ */ i(K, { scope: r, cancelRef: g, children: /* @__PURE__ */ w(
+          W,
+          {
+            role: "alertdialog",
+            ...d,
+            ...t,
+            ref: O,
+            onOpenAutoFocus: x(t.onOpenAutoFocus, (c) => {
+              var u;
+              c.preventDefault(), (u = g.current) == null || u.focus({ preventScroll: !0 });
+            }),
+            onPointerDownOutside: (c) => c.preventDefault(),
+            onInteractOutside: (c) => c.preventDefault(),
+            children: [
+              /* @__PURE__ */ i(U, { children: a }),
+              /* @__PURE__ */ i(Z, { contentRef: p })
+            ]
+          }
+        ) })
+      }
+    );
+  }
+);
+h.displayName = n;
+var C = "AlertDialogTitle", R = l.forwardRef(
+  (e, o) => {
+    const { __scopeAlertDialog: r, ...a } = e, t = s(r);
+    return /* @__PURE__ */ i(j, { ...t, ...a, ref: o });
+  }
+);
+R.displayName = C;
+var E = "AlertDialogDescription", P = l.forwardRef((e, o) => {
+  const { __scopeAlertDialog: r, ...a } = e, t = s(r);
+  return /* @__PURE__ */ i(B, { ...t, ...a, ref: o });
+});
+P.displayName = E;
+var X = "AlertDialogAction", S = l.forwardRef(
+  (e, o) => {
+    const { __scopeAlertDialog: r, ...a } = e, t = s(r);
+    return /* @__PURE__ */ i(D, { ...t, ...a, ref: o });
+  }
+);
+S.displayName = X;
+var T = "AlertDialogCancel", b = l.forwardRef(
+  (e, o) => {
+    const { __scopeAlertDialog: r, ...a } = e, { cancelRef: t } = Q(T, r), d = s(r), p = A(o, t);
+    return /* @__PURE__ */ i(D, { ...d, ...a, ref: p });
+  }
+);
+b.displayName = T;
+var Z = ({ contentRef: e }) => {
+  const o = `\`${n}\` requires a description for the component to be accessible for screen reader users.
+
+You can add a description to the \`${n}\` by passing a \`${E}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
+
+Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${n}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
+
+For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
+  return l.useEffect(() => {
+    var a;
+    document.getElementById(
+      (a = e.current) == null ? void 0 : a.getAttribute("aria-describedby")
+    ) || console.warn(o);
+  }, [o, e]), null;
+}, ne = m, ee = y, ce = _, pe = N, de = h, ge = S, ue = b, Ae = R, ve = P;
+const De = ({
+  "data-theme": e,
+  className: o,
+  text: r,
+  onOpen: a
+}) => /* @__PURE__ */ i(ee, { asChild: !0, children: /* @__PURE__ */ i(
+  k,
+  {
+    type: "button",
+    "data-theme": e,
+    className: q(o),
+    onClick: a,
+    children: r
+  }
+) });
+export {
+  De as A,
+  de as C,
+  ve as D,
+  pe as O,
+  ce as P,
+  ne as R,
+  Ae as T,
+  ue as a,
+  ge as b
+};

package/dist/{index-BzaHYXkt.js → index-BOx5P4tS.js}

@@ -1,9 +1,9 @@
 import * as d from "react";
-import { a as ae, c as ce, b as _ } from "./index-Cva-e5M4.js";
-import { u as K } from "./index-B_6_jmOO.js";
-import { a as le, u as de } from "./index-4ecjw_Aj.js";
-import { P as T } from "./index-D7QNmo_D.js";
-import { c as ue } from "./index-BbsJ0VIJ.js";
+import { a as ae, c as ce, b as _ } from "./index-bYyfdsls.js";
+import { u as K } from "./index-Bk324h27.js";
+import { a as le, u as de } from "./index-Bry5AFQ2.js";
+import { P as T } from "./index-g-TFwd6Y.js";
+import { c as ue } from "./index-D9BbbgUq.js";
 import { jsx as g, jsxs as fe } from "react/jsx-runtime";
 function $(e, [t, n]) {
   return Math.min(n, Math.max(t, e));