@konstructio/ui 0.0.12-alpha.1 → 0.0.12-alpha.2

package/dist/components/Switch/Switch.js

@@ -1,14 +1,14 @@
 import { jsxs as P, jsx as u } from "react/jsx-runtime";
 import * as p from "react";
 import { forwardRef as _, useState as H, useRef as A, useId as M, useImperativeHandle as $, useEffect as j, useCallback as z } from "react";
-import { c as B, a as q, d as F } from "../../index-8vgf-x5i.js";
-import { u as O } from "../../index-DoOsnuB6.js";
-import { u as V, a as D } from "../../index-BxeV34ij.js";
-import { P as g } from "../../index-1GLoikpT.js";
+import { a as B, c as q, b as F } from "../../index-Cva-e5M4.js";
+import { u as O } from "../../index-B_6_jmOO.js";
+import { u as V, a as D } from "../../index-4ecjw_Aj.js";
+import { P as g } from "../../index-BTeAm7mx.js";
 import { cn as x } from "../../utils/index.js";
-import { switchVariants as L, thumbVariants as U } from "./Switch.variants.js";
+import { thumbVariants as L, switchVariants as U } from "./Switch.variants.js";
 import { useTheme as W } from "../../contexts/theme.hook.js";
-var k = "Switch", [X, ie] = B(k), [G, J] = X(k), R = p.forwardRef(
+var k = "Switch", [X, ie] = q(k), [G, J] = X(k), R = p.forwardRef(
   (e, s) => {
     const {
       __scopeSwitch: t,
@@ -20,8 +20,8 @@ var k = "Switch", [X, ie] = B(k), [G, J] = X(k), R = p.forwardRef(
       value: i = "on",
       onCheckedChange: m,
       form: r,
-      ...d
-    } = e, [l, b] = p.useState(null), v = O(s, (C) => b(C)), f = p.useRef(!1), w = l ? r || !!l.closest("form") : !0, [S = !1, T] = q({
+      ...l
+    } = e, [d, b] = p.useState(null), v = O(s, (C) => b(C)), f = p.useRef(!1), w = d ? r || !!d.closest("form") : !0, [S = !1, T] = B({
       prop: n,
       defaultProp: h,
       onChange: m
@@ -38,7 +38,7 @@ var k = "Switch", [X, ie] = B(k), [G, J] = X(k), R = p.forwardRef(
           "data-disabled": a ? "" : void 0,
           disabled: a,
           value: i,
-          ...d,
+          ...l,
           ref: v,
           onClick: F(e.onClick, (C) => {
             T((I) => !I), w && (f.current = C.isPropagationStopped(), f.current || C.stopPropagation());
@@ -48,7 +48,7 @@ var k = "Switch", [X, ie] = B(k), [G, J] = X(k), R = p.forwardRef(
       w && /* @__PURE__ */ u(
         K,
         {
-          control: l,
+          control: d,
           bubbles: !f.current,
           name: c,
           value: i,
@@ -81,10 +81,10 @@ N.displayName = y;
 var K = (e) => {
   const { control: s, checked: t, bubbles: c = !0, ...n } = e, h = p.useRef(null), o = V(t), a = D(s);
   return p.useEffect(() => {
-    const i = h.current, m = window.HTMLInputElement.prototype, d = Object.getOwnPropertyDescriptor(m, "checked").set;
-    if (o !== t && d) {
-      const l = new Event("click", { bubbles: c });
-      d.call(i, t), i.dispatchEvent(l);
+    const i = h.current, m = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(m, "checked").set;
+    if (o !== t && l) {
+      const d = new Event("click", { bubbles: c });
+      l.call(i, t), i.dispatchEvent(d);
     }
   }, [o, t, c]), /* @__PURE__ */ u(
     "input",
@@ -120,7 +120,7 @@ const ue = _(
     className: h,
     label: o
   }, a) => {
-    const [i, m] = H(s ?? !1), r = A(null), d = M(), { theme: l } = W(), b = c ?? l, v = e ? `${d}-${e}` : d;
+    const [i, m] = H(s ?? !1), r = A(null), l = M(), { theme: d } = W(), b = c ?? d, v = e ? `${l}-${e}` : l;
     $(a, () => r.current, [r]), j(() => {
       r.current && (r.current.value = `${i}`);
     }, [i]);
@@ -151,12 +151,12 @@ const ue = _(
               id: v,
               defaultChecked: s,
               onCheckedChange: f,
-              className: x(L({ theme: b, className: h })),
+              className: x(U({ theme: b, className: h })),
               "aria-label": o,
               children: /* @__PURE__ */ u(
                 Y,
                 {
-                  className: U({
+                  className: L({
                     theme: b,
                     className: n
                   })

package/dist/components/TagSelect/TagSelect.js

@@ -3,7 +3,7 @@ import { forwardRef as g, useId as w, useRef as C, useImperativeHandle as T, use
 import { cn as r } from "../../utils/index.js";
 import { Tag as d } from "../Tag/Tag.js";
 import { useTagSelect as S } from "./hooks/useTagSelect.js";
-import { tagSelectVariants as k, tagListVariants as I, tagItemVariants as V } from "./TagSelect.variants.js";
+import { tagSelectVariants as k, tagItemVariants as I, tagListVariants as V } from "./TagSelect.variants.js";
 import { C as j } from "../../chevron-up-DgLBQCKD.js";
 import { useTheme as y } from "../../contexts/theme.hook.js";
 const z = g(({ label: s, name: l, options: f, placeholder: h = "Select a value...", theme: o }, x) => {
@@ -46,11 +46,11 @@ const z = g(({ label: s, name: l, options: f, placeholder: h = "Select a value..
       "ul",
       {
         role: "listbox",
-        className: r(I({ theme: o ?? a })),
+        className: r(V({ theme: o ?? a })),
         children: f.map((i) => /* @__PURE__ */ e(
           "li",
           {
-            className: r(V({ theme: o ?? a })),
+            className: r(I({ theme: o ?? a })),
             role: "option",
             children: /* @__PURE__ */ e(
               "button",

package/dist/components/Toast/Toast.js

@@ -1,15 +1,15 @@
-import { jsxs as D, jsx as c, Fragment as se } from "react/jsx-runtime";
-import { u as ae, S as j } from "../../index-DoOsnuB6.js";
+import { jsx as c, jsxs as D, Fragment as se } from "react/jsx-runtime";
+import { u as ae, S as j } from "../../index-B_6_jmOO.js";
 import * as s from "react";
 import { useState as Re, useRef as be, useEffect as ge, useMemo as oe, isValidElement as re, useCallback as Se } from "react";
-import { P as L, r as Ie, d as Ne } from "../../index-1GLoikpT.js";
-import { c as Ae, a as Fe, b as X, d as b, u as _e } from "../../index-8vgf-x5i.js";
-import { c as De } from "../../index-BBjak_0p.js";
-import { B as Le, R as Oe, P as Me } from "../../index-CoqDsznq.js";
-import { P as ke } from "../../index-D4Q2rMby.js";
-import { V as ie, R as Ve } from "../../index-KEdwcThH.js";
+import { P as L, r as Ie, d as Ne } from "../../index-BTeAm7mx.js";
+import { c as Ae, a as Fe, b, d as X, u as _e } from "../../index-Cva-e5M4.js";
+import { c as De } from "../../index-BbsJ0VIJ.js";
+import { B as Le, R as Oe, P as Me } from "../../index-B33at13_.js";
+import { P as ke } from "../../index-Dj1pom3_.js";
+import { V as ie, R as Ve } from "../../index-Z1voPZOH.js";
 import { cn as q } from "../../utils/index.js";
-import { toastVariants as Ke, closeToastVariants as He, viewportToastVariants as We } from "./Toast.variants.js";
+import { closeToastVariants as Ke, toastVariants as He, viewportToastVariants as We } from "./Toast.variants.js";
 import { X as Xe } from "../../x-DU-Zw-L_.js";
 import { useTheme as $e } from "../../contexts/theme.hook.js";
 var Z = "ToastProvider", [ee, Ue, Ye] = De("Toast"), [ce, gt] = Ae("Toast", [Ye]), [Be, $] = ce(Z), ue = (e) => {
@@ -452,14 +452,14 @@ const St = ({
     /* @__PURE__ */ D(
       ut,
       {
-        className: q(Ke({ theme: R, className: v })),
+        className: q(He({ theme: R, className: v })),
         open: n,
         onOpenChange: w,
         children: [
           /* @__PURE__ */ c(lt, { asChild: !0, className: "text-lg mb-2 font-semibold", children: g }),
           /* @__PURE__ */ c(dt, { asChild: !0, children: l }),
           m && /* @__PURE__ */ c(ft, { asChild: !0, altText: "Close the toast", children: /* @__PURE__ */ D("button", { type: "button", className: "absolute right-1.5 top-1.5", children: [
-            /* @__PURE__ */ c(Xe, { className: q(He({ theme: R })) }),
+            /* @__PURE__ */ c(Xe, { className: q(Ke({ theme: R })) }),
             /* @__PURE__ */ c(Ve, { children: "Close toast" })
           ] }) })
         ]

package/dist/components/Tooltip/Tooltip.js

@@ -1,8 +1,8 @@
 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 { S as a } from "../../index-B_6_jmOO.js";
 import { cn as o } from "../../utils/index.js";
-import { tooltipVariants as V, arrowVariants as b } from "./Tooltip.variants.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(
@@ -19,13 +19,13 @@ const q = N(
         "div",
         {
           ref: d,
-          className: o(V({ theme: m, position: s })),
+          className: o(b({ theme: m, position: s })),
           "data-visible": u,
           children: [
             /* @__PURE__ */ e(
               "span",
               {
-                className: o(b({ theme: m, position: s }))
+                className: o(V({ theme: m, position: s }))
               }
             ),
             /* @__PURE__ */ e(a, { children: l })

package/dist/components/Typography/Typography.js

@@ -0,0 +1,30 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useId as h } from "react";
+import { typographyVariants as i } from "./Typography.variants.js";
+import { useTheme as y } from "../../contexts/theme.hook.js";
+const n = ({
+  className: o,
+  theme: t,
+  children: e,
+  variant: r,
+  ...m
+}) => {
+  const p = h(), { theme: s } = y();
+  return /* @__PURE__ */ a(
+    "p",
+    {
+      id: p,
+      className: i({
+        className: o,
+        theme: t ?? s,
+        variant: r
+      }),
+      ...m,
+      children: e
+    }
+  );
+};
+n.displayName = "Typography";
+export {
+  n as Typography
+};

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

@@ -0,0 +1,36 @@
+import { c as t } from "../../index-BNmRGtA6.js";
+const x = t([""], {
+  variants: {
+    variant: {
+      h1: "text-[57px] font-normal leading-[64px]",
+      h2: "text-[45px] font-normal leading-[52px]",
+      h3: "text-[36px] font-normal leading-[44px]",
+      h4: "text-[32px] font-normal leading-[40px]",
+      h5: "text-[28px] font-normal leading-[36px]",
+      h6: "text-[24px] font-medium leading-[32px] tracking-[0.15px]",
+      subtitle1: "text-[22px] font-normal 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] font-normal 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] font-normal leading-[24px] tracking-[0.5px]",
+      body2: "text-[14px] font-normal leading-[20px] tracking-[0.25px]",
+      body3: "text-[12px] font-normal leading-[16px] tracking-[0.4px]",
+      tooltip: "text-[14px] font-normal leading-[22px]"
+    },
+    theme: {
+      kubefirst: "text-zinc-700",
+      colony: "text-zinc-700",
+      civo: "text-zinc-700"
+    }
+  },
+  defaultVariants: {
+    variant: "body1",
+    theme: "kubefirst"
+  }
+});
+export {
+  x as typographyVariants
+};

package/dist/components/index.js

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

package/dist/{index-BVppSRDQ.js → index-3jTPaVvh.js}

@@ -1,11 +1,11 @@
 import { jsx as c, jsxs as U, Fragment as j } from "react/jsx-runtime";
 import * as i from "react";
-import { u as xe, b as Y, c as ee, d as R, e as Le, a as ke } from "./index-8vgf-x5i.js";
-import { u as O, S as We, a as $e } from "./index-DoOsnuB6.js";
-import { D as Ue, P as Ge } from "./index-CoqDsznq.js";
-import { P } from "./index-1GLoikpT.js";
-import { P as G } from "./index-D4Q2rMby.js";
-import { R as Ke } from "./Combination-BQYb0Gw7.js";
+import { u as xe, d as Y, c as ee, e as Le, a as ke, b as R } from "./index-Cva-e5M4.js";
+import { u as O, S as We, a as $e } from "./index-B_6_jmOO.js";
+import { P as Ue, D as Ge } from "./index-B33at13_.js";
+import { P } from "./index-BTeAm7mx.js";
+import { P as G } from "./index-Dj1pom3_.js";
+import { R as Ke } from "./Combination-b348x__d.js";
 import { Button as Be } from "./components/Button/Button.js";
 import { useTheme as He } from "./contexts/theme.hook.js";
 var qe = i.useId || (() => {
@@ -13,7 +13,7 @@ var qe = i.useId || (() => {
 function x(e) {
   const [o, t] = i.useState(qe());
   return xe(() => {
-    e || t((r) => r ?? String(Ve++));
+    t((r) => r ?? String(Ve++));
   }, [e]), e || (o ? `radix-${o}` : "");
 }
 var L = "focusScope.autoFocusOnMount", k = "focusScope.autoFocusOnUnmount", Z = { bubbles: !1, cancelable: !0 }, je = "FocusScope", te = i.forwardRef((e, o) => {
@@ -260,7 +260,7 @@ var B = "DialogPortal", [st, le] = ne(B, {
   forceMount: void 0
 }), ue = (e) => {
   const { __scopeDialog: o, forceMount: t, children: r, container: n } = e, a = A(B, o);
-  return /* @__PURE__ */ c(st, { scope: o, forceMount: t, children: i.Children.map(r, (l) => /* @__PURE__ */ c(G, { present: t || a.open, children: /* @__PURE__ */ c(Ge, { asChild: !0, container: n, children: l }) })) });
+  return /* @__PURE__ */ c(st, { scope: o, forceMount: t, children: i.Children.map(r, (l) => /* @__PURE__ */ c(G, { present: t || a.open, children: /* @__PURE__ */ c(Ue, { asChild: !0, container: n, children: l }) })) });
 };
 ue.displayName = B;
 var F = "DialogOverlay", de = i.forwardRef(
@@ -358,7 +358,7 @@ var ct = i.forwardRef(
           onMountAutoFocus: n,
           onUnmountAutoFocus: a,
           children: /* @__PURE__ */ c(
-            Ue,
+            Ge,
             {
               role: "dialog",
               id: s.contentId,

package/dist/{index-BxeV34ij.js → index-4ecjw_Aj.js}

@@ -1,5 +1,5 @@
 import * as f from "react";
-import { u as a } from "./index-8vgf-x5i.js";
+import { u as a } from "./index-Cva-e5M4.js";
 function h(r) {
   const e = f.useRef({ value: r, previous: r });
   return f.useMemo(() => (e.current.value !== r && (e.current.previous = e.current.value, e.current.value = r), e.current.previous), [r]);

package/dist/{index-CoqDsznq.js → index-B33at13_.js}

@@ -1,7 +1,7 @@
 import * as i from "react";
-import { b, d as h, u as U } from "./index-8vgf-x5i.js";
-import { P as m, d as z, R as H } from "./index-1GLoikpT.js";
-import { u as T } from "./index-DoOsnuB6.js";
+import { d as b, b as h, u as U } from "./index-Cva-e5M4.js";
+import { P as m, d as z, R as H } from "./index-BTeAm7mx.js";
+import { u as T } from "./index-B_6_jmOO.js";
 import { jsx as P } from "react/jsx-runtime";
 function K(r, e = globalThis == null ? void 0 : globalThis.document) {
   const s = b(r);