@konstructio/ui 0.0.12 → 0.0.13-alpha.2

package/dist/components/Toast/Toast.variants.js

@@ -1,74 +1,45 @@
 import { c as e } from "../../index-BNmRGtA6.js";
-const a = e(
-  [
-    "bg-white",
-    "rounded-md",
-    "shadow-md",
-    "p-4",
-    "flex",
-    "flex-col",
-    "relative",
-    "border",
-    "overflow-hidden",
-    "data-[state=open]:animate-slide-in",
-    "data-[state=closed]:animate-hide",
-    "data-[swipe=move]:translate-x-4",
-    "data-[swipe=cancel]:translate-x-0",
-    "data-[swipe=end]:animate-swipe-out"
-  ],
-  {
-    variants: {
-      theme: {
-        kubefirst: ["shadow-purple-200", "border-purple-100"],
-        colony: ["shadow-red-200", "border-red-100"],
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-), r = e(
-  [
-    "fixed",
-    "bottom-0",
-    "right-0",
-    "flex",
-    "flex-col",
-    "p-[var(--viewport-padding)]",
-    "gap-8",
-    "w-[390px]",
-    "max-w-[100vw]",
-    "m-0",
-    "z-50",
-    "outline-none"
-  ],
-  {
-    variants: {
-      theme: {
-        kubefirst: "",
-        colony: "",
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-), i = e(["top-2", "right-2", "w-4", "h-4"], {
-  variants: {
-    theme: {
-      kubefirst: ["text-kubefirst-primary"],
-      colony: ["text-red-400"],
-      civo: ""
-    }
-  },
-  defaultVariants: {
-    theme: "kubefirst"
-  }
-});
+const t = e([
+  "rounded-md",
+  "shadow-md",
+  "p-4",
+  "flex",
+  "flex-col",
+  "relative",
+  "border",
+  "overflow-hidden",
+  "data-[state=open]:animate-slide-in",
+  "data-[state=closed]:animate-hide",
+  "data-[swipe=move]:translate-x-4",
+  "data-[swipe=cancel]:translate-x-0",
+  "data-[swipe=end]:animate-swipe-out",
+  "shadow-purple-200",
+  "border-purple-100",
+  "colony:shadow-red-200",
+  "colony:border-red-100"
+]), o = e([
+  "fixed",
+  "bottom-0",
+  "right-0",
+  "flex",
+  "flex-col",
+  "p-[var(--viewport-padding)]",
+  "gap-8",
+  "w-[390px]",
+  "max-w-[100vw]",
+  "m-0",
+  "z-50",
+  "outline-none"
+]), r = e([
+  "top-2",
+  "right-2",
+  "w-4",
+  "h-4",
+  "text-kubefirst-primary",
+  "colony:text-red-400"
+]);
 export {
-  i as closeToastVariants,
-  a as toastVariants,
-  r as viewportToastVariants
+  r as closeToastVariants,
+  t as toastVariants,
+  o as viewportToastVariants
 };

package/dist/components/Tooltip/Tooltip.js

@@ -1,36 +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-DoOsnuB6.js";
-import "../../contexts/theme.context.js";
-import { useTheme as V } from "../../contexts/theme.hook.js";
-import "../../js.cookie-OLEfuq_g.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 { tooltipVariants as b, arrowVariants as j } from "./Tooltip.variants.js";
-import { useTooltip as C } from "./hooks/useTooltip.js";
-const z = N(
-  ({ children: t, content: l, className: n, theme: p, position: s, wrapperClassName: c }, f) => {
-    const d = w(null), { theme: h } = V(), m = p ?? h, { isVisible: u, componentRef: r } = C();
-    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", c), 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(j({ theme: m, position: s }))
-              }
-            ),
-            /* @__PURE__ */ e(a, { children: l })
+            /* @__PURE__ */ e("span", { className: o(R({ position: a })) }),
+            /* @__PURE__ */ e(i, { children: l })
           ]
         }
       )
@@ -38,5 +30,5 @@ const z = N(
   }
 );
 export {
-  z 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

@@ -0,0 +1,35 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useId as d } from "react";
+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: s,
+  variant: o,
+  component: r,
+  asChild: e = !1,
+  ...t
+}) => {
+  const y = d(), c = e ? g : r ?? (o != null && o.includes("h") ? o : "p");
+  return /* @__PURE__ */ f(
+    c,
+    {
+      id: y,
+      "data-theme": m,
+      className: h(
+        l({
+          className: p,
+          variant: o
+        })
+      ),
+      ...t,
+      children: s
+    }
+  );
+};
+i.displayName = "Typography";
+export {
+  i as Typography
+};

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

@@ -0,0 +1,57 @@
+import { c as t } from "../../index-BNmRGtA6.js";
+const e = t([], {
+  variants: {
+    variant: {
+      h1: ["text-[57px]", "leading-[64px]"],
+      h2: ["text-[45px]", "leading-[52px]"],
+      h3: ["text-[36px]", "leading-[44px]"],
+      h4: ["text-[32px]", "leading-[40px]"],
+      h5: ["text-[28px]", "leading-[36px]"],
+      h6: ["text-[24px]", "font-medium", "leading-[32px]", "tracking-[0.15px]"],
+      subtitle1: ["text-[22px]", "leading-[28px]"],
+      subtitle2: [
+        "text-[16px]",
+        "font-medium",
+        "leading-[24px]",
+        "tracking-[0.15px]"
+      ],
+      subtitle3: [
+        "text-[14px]",
+        "font-medium",
+        "leading-[20px]",
+        "tracking-[0.1px]"
+      ],
+      labelLarge: ["text-[14px]", "leading-[20px]", "tracking-[0.1px]"],
+      labelMedium: [
+        "text-[12px]",
+        "font-medium",
+        "leading-[16px]",
+        "tracking-[0.5px]",
+        "uppercase"
+      ],
+      labelSmall: [
+        "text-[11px]",
+        "font-medium",
+        "leading-[16px]",
+        "tracking-[0.5px]",
+        "uppercase"
+      ],
+      buttonSmall: [
+        "text-[14px]",
+        "font-semibold",
+        "leading-[20px]",
+        "tracking-[0.25px]"
+      ],
+      body1: ["text-[16px]", "leading-[24px]", "tracking-[0.5px]"],
+      body2: ["text-[14px]", "leading-[20px]", "tracking-[0.25px]"],
+      body3: ["text-[12px]", "leading-[16px]", "tracking-[0.4px]"],
+      tooltip: ["text-[14px]", "leading-[22px]"]
+    }
+  },
+  defaultVariants: {
+    variant: "body1"
+  }
+});
+export {
+  e as typographyVariants
+};

package/dist/components/index.js

@@ -1,56 +1,72 @@
-import { AlertDialog as t } 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 { Card as g } from "./Card/Card.js";
-import { Checkbox as d } from "./Checkbox/Checkbox.js";
-import { Dropdown as u } from "./Dropdown/Dropdown.js";
-import { Input as N } from "./Input/Input.js";
-import { M as T } from "../Modal-L73dmnHv.js";
+import { Alert as t } from "./Alert/Alert.js";
+import { AlertDialog as p } from "./AlertDialog/AlertDialog.js";
+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 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 A } from "./ProgressBar/ProgressBar.js";
-import { Radio as h } from "./Radio/Radio.js";
-import { Range as C } from "./Range/Range.js";
-import { Sidebar as I } from "./Sidebar/Sidebar.js";
-import { Slider as R } from "./Slider/Slider.js";
-import { Switch as F } from "./Switch/Switch.js";
-import { Tag as L } from "./Tag/Tag.js";
-import { TagSelect as P } from "./TagSelect/TagSelect.js";
-import { TextArea as q } from "./TextArea/TextArea.js";
-import { Toast as z } from "./Toast/Toast.js";
-import { Tooltip as H } from "./Tooltip/Tooltip.js";
-import { Footer as K } from "./Sidebar/components/Footer/Footer.js";
-import { Logo as U } from "./Sidebar/components/Logo/Logo.js";
-import { Navigation as W } from "./Sidebar/components/Navigation/Navigation.js";
-import { NavigationGroup as Y } from "./Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as _ } from "./Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as oo } from "./Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { ProgressBar as C } from "./ProgressBar/ProgressBar.js";
+import { Radio as B } from "./Radio/Radio.js";
+import { RadioCard as G } from "./RadioCard/RadioCard.js";
+import { RadioCardGroup as y } from "./RadioCardGroup/RadioCardGroup.js";
+import { RadioGroup as L } from "./RadioGroup/RadioGroup.js";
+import { Range as k } from "./Range/Range.js";
+import { Sidebar as O } from "./Sidebar/Sidebar.js";
+import { Slider as j } from "./Slider/Slider.js";
+import { Switch as z } from "./Switch/Switch.js";
+import { Tag as H } from "./Tag/Tag.js";
+import { TagSelect as K } from "./TagSelect/TagSelect.js";
+import { TextArea as U } from "./TextArea/TextArea.js";
+import { Toast as W } from "./Toast/Toast.js";
+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 { 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 AlertDialog,
-  p as Autocomplete,
-  x as Breadcrumb,
-  a as Button,
-  g as Card,
-  d as Checkbox,
-  u as Dropdown,
-  K as Footer,
-  N as Input,
-  U as Logo,
-  T as Modal,
-  W as Navigation,
-  Y as NavigationGroup,
-  _ as NavigationOption,
-  oo as NavigationSeparator,
+  t as Alert,
+  p as AlertDialog,
+  x as Autocomplete,
+  a as Breadcrumb,
+  d as Button,
+  n as Card,
+  u as Checkbox,
+  to as Divider,
+  b as Dropdown,
+  xo as Footer,
+  v as Input,
+  _ as Loading,
+  ao as Logo,
+  R as Modal,
+  go as Navigation,
+  lo as NavigationGroup,
+  To as NavigationOption,
+  co as NavigationSeparator,
   s as NumberInput,
-  A as ProgressBar,
-  h as Radio,
-  C as Range,
-  I as Sidebar,
-  R as Slider,
-  F as Switch,
-  L as Tag,
-  P as TagSelect,
-  q as TextArea,
-  z as Toast,
-  H as Tooltip
+  C as ProgressBar,
+  B as Radio,
+  G as RadioCard,
+  y as RadioCardGroup,
+  L as RadioGroup,
+  k as Range,
+  O as Sidebar,
+  j as Slider,
+  z as Switch,
+  po as Table,
+  H as Tag,
+  K as TagSelect,
+  U as TextArea,
+  W as Toast,
+  Y as Tooltip,
+  oo as Typography
 };

package/dist/contexts/theme.provider.js

@@ -1,20 +1,88 @@
-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
+import { jsx as v } from "react/jsx-runtime";
+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 p(n) {
+  for (var o = 1; o < arguments.length; o++) {
+    var t = arguments[o];
+    for (var f in t)
+      n[f] = t[f];
+  }
+  return n;
+}
+var a = {
+  read: function(n) {
+    return n[0] === '"' && (n = n.slice(1, -1)), n.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent);
+  },
+  write: function(n) {
+    return encodeURIComponent(n).replace(
+      /%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,
+      decodeURIComponent
+    );
+  }
+};
+function s(n, o) {
+  function t(e, u, r) {
+    if (!(typeof document > "u")) {
+      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 r)
+        r[c] && (i += "; " + c, r[c] !== !0 && (i += "=" + r[c].split(";")[0]));
+      return document.cookie = e + "=" + n.write(u, e) + i;
+    }
+  }
+  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 (r[d] = n.read(m, d), e === d)
+            break;
+        } catch {
+        }
+      }
+      return e ? r[e] : r;
+    }
+  }
+  return Object.create(
+    {
+      set: t,
+      get: f,
+      remove: function(e, u) {
+        t(
+          e,
+          "",
+          p({}, u, {
+            expires: -1
+          })
+        );
+      },
+      withAttributes: function(e) {
+        return s(this.converter, p({}, this.attributes, e));
+      },
+      withConverter: function(e) {
+        return s(p({}, this.converter, e), this.attributes);
+      }
+    },
+    {
+      attributes: { value: Object.freeze(o) },
+      converter: { value: Object.freeze(n) }
+    }
+  );
+}
+var x = s(a, { path: "/" });
+const R = ({
+  children: n,
+  theme: o
 }) => {
-  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 });
+  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 {
-  v as ThemeProvider
+  R as ThemeProvider
 };