@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.81

package/dist/components/ButtonGroup/ButtonGroup.variants.js

@@ -0,0 +1,32 @@
+import { t } from "../../dist-DtEbXv47.js";
+var e = t([
+  "absolute",
+  "top-2",
+  "bottom-2",
+  "bg-metal-800",
+  "rounded-lg",
+  "pointer-events-none"
+]), l = t([
+  "flex",
+  "flex-col",
+  "gap-2",
+  "w-full"
+]), r = t([
+  "inline-flex",
+  "items-stretch",
+  "w-full",
+  "relative",
+  "bg-metal-900",
+  "rounded-lg"
+], {
+  variants: { disabled: {
+    true: "opacity-50 cursor-not-allowed",
+    false: ""
+  } },
+  defaultVariants: { disabled: !1 }
+});
+export {
+  e as buttonGroupPillVariants,
+  r as buttonGroupVariants,
+  l as buttonGroupWrapperVariants
+};

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.js

@@ -0,0 +1,60 @@
+import { t as r } from "../../../../utils-DHuiYnx1.js";
+import { t as L } from "../../../../proxy-uLtw-ZML.js";
+import { buttonGroupDescriptionVariants as V, buttonGroupItemContentVariants as g, buttonGroupItemVariants as w, buttonGroupLabelVariants as o } from "./ButtonGroupItem.variants.js";
+import { memo as j } from "react";
+import { jsx as s, jsxs as a } from "react/jsx-runtime";
+var k = (t, n) => n === "none" ? t ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : t ? "inset(0 0 0 0)" : n === "right" ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)", B = j(({ animationDirection: t, className: n, contentClassName: d, descriptionAlign: p, descriptionClassName: h, duration: b = 0.3, hasDescription: f, index: c, isDisabled: l, isFirst: v, isLast: y, isSelected: i, labelAlign: m, labelClassName: u, option: e, value: N, onKeyDown: G, onSelect: x }) => /* @__PURE__ */ s("button", {
+  type: "button",
+  role: "radio",
+  "aria-checked": i,
+  "data-value": e.value,
+  disabled: l,
+  tabIndex: i || c === 0 ? 0 : -1,
+  onClick: () => !l && x(N),
+  onKeyDown: (I) => G(I, c),
+  className: r(w({
+    disabled: l,
+    isFirst: v,
+    isLast: y
+  }), "relative", n),
+  children: /* @__PURE__ */ a("div", {
+    className: r(g({ hasDescription: f }), "relative", d),
+    children: [/* @__PURE__ */ a("span", {
+      className: "relative w-full",
+      children: [/* @__PURE__ */ a("span", {
+        className: r(o({
+          selected: !1,
+          labelAlign: m
+        }), u),
+        children: [/* @__PURE__ */ a("span", {
+          className: "flex items-center gap-2",
+          children: [e.icon, e.label]
+        }), e.secondaryLabel && /* @__PURE__ */ s("span", { children: e.secondaryLabel })]
+      }), /* @__PURE__ */ a(L.span, {
+        className: r(o({
+          selected: !0,
+          labelAlign: m
+        }), "absolute inset-0", u),
+        "aria-hidden": "true",
+        initial: !1,
+        animate: { clipPath: k(i, t) },
+        transition: {
+          type: "tween",
+          ease: "linear",
+          duration: b
+        },
+        children: [/* @__PURE__ */ a("span", {
+          className: "flex items-center gap-2",
+          children: [e.icon, e.label]
+        }), e.secondaryLabel && /* @__PURE__ */ s("span", { children: e.secondaryLabel })]
+      })]
+    }), e.description && /* @__PURE__ */ s("span", {
+      className: r(V({ descriptionAlign: p }), h),
+      children: e.description
+    })]
+  })
+}, e.value));
+B.displayName = "KonstructButtonGroupItem";
+export {
+  B as ButtonGroupItem
+};

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.variants.js

@@ -0,0 +1,98 @@
+import { t } from "../../../../dist-DtEbXv47.js";
+var r = t([
+  "flex",
+  "flex-1",
+  "items-start",
+  "cursor-pointer",
+  "select-none",
+  "transition-colors",
+  "p-2",
+  "border-metal-700",
+  "border-t",
+  "border-b",
+  "bg-transparent",
+  "focus:outline-none",
+  "focus-visible:ring-2",
+  "focus-visible:ring-aurora-500",
+  "focus-visible:ring-inset"
+], {
+  variants: {
+    disabled: {
+      true: "pointer-events-none opacity-50",
+      false: ""
+    },
+    isFirst: {
+      true: "border-l rounded-l-lg",
+      false: ""
+    },
+    isLast: {
+      true: "border-r rounded-r-lg",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    disabled: !1,
+    isFirst: !1,
+    isLast: !1
+  }
+}), a = t([
+  "flex",
+  "flex-col",
+  "flex-1",
+  "rounded-lg",
+  "px-4",
+  "py-2"
+], {
+  variants: { hasDescription: {
+    true: "justify-start",
+    false: "justify-center"
+  } },
+  defaultVariants: { hasDescription: !1 }
+}), s = t([
+  "text-sm",
+  "font-medium",
+  "leading-5",
+  "tracking-[0.1px]",
+  "flex",
+  "items-center",
+  "gap-2",
+  "w-full",
+  "justify-between",
+  "transition-colors",
+  "ease-in-out"
+], {
+  variants: {
+    selected: {
+      true: "text-aurora-500",
+      false: "text-metal-50"
+    },
+    labelAlign: {
+      left: "justify-between",
+      center: "justify-center",
+      right: "justify-end"
+    }
+  },
+  defaultVariants: {
+    selected: !1,
+    labelAlign: "left"
+  }
+}), i = t([
+  "text-sm",
+  "font-normal",
+  "leading-5",
+  "tracking-[0.15px]",
+  "text-metal-300"
+], {
+  variants: { descriptionAlign: {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  } },
+  defaultVariants: { descriptionAlign: "left" }
+});
+export {
+  i as buttonGroupDescriptionVariants,
+  a as buttonGroupItemContentVariants,
+  r as buttonGroupItemVariants,
+  s as buttonGroupLabelVariants
+};

package/dist/components/ButtonGroup/components/ButtonGroupItem/index.js

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

package/dist/components/ButtonGroup/components/ButtonGroupLabel/ButtonGroupLabel.js

@@ -0,0 +1,23 @@
+import { t } from "../../../../utils-DHuiYnx1.js";
+import { Typography as e } from "../../../Typography/Typography.js";
+import { memo as n } from "react";
+import { jsx as s, jsxs as l } from "react/jsx-runtime";
+var i = n(({ className: r, htmlFor: o, isRequired: a, label: m, requiredClassName: p }) => /* @__PURE__ */ l(e, {
+  component: "label",
+  variant: "labelLarge",
+  htmlFor: o,
+  className: t("cursor-pointer", "flex", "gap-1", "text-sm", "font-medium", "text-metal-50", r),
+  children: [
+    m,
+    " ",
+    a && /* @__PURE__ */ s(e, {
+      component: "span",
+      className: t("text-red-600", "dark:text-red-500", "text-xs", "mt-0.5", p),
+      children: "*"
+    })
+  ]
+}));
+i.displayName = "KonstructButtonGroupLabel";
+export {
+  i as ButtonGroupLabel
+};

package/dist/components/ButtonGroup/components/ButtonGroupLabel/index.js

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

package/dist/components/ButtonGroup/components/ButtonGroupMessage/ButtonGroupMessage.js

@@ -0,0 +1,18 @@
+import { t as o } from "../../../../utils-DHuiYnx1.js";
+import { Typography as e } from "../../../Typography/Typography.js";
+import { memo as s } from "react";
+import { jsx as r } from "react/jsx-runtime";
+var p = s(({ error: t, errorClassName: a, helperText: n, helperTextClassName: m }) => typeof t == "string" && t.length > 0 ? /* @__PURE__ */ r(e, {
+  component: "span",
+  className: o("text-xs", "tracking-normal", "text-red-400", a),
+  children: t
+}) : n ? /* @__PURE__ */ r(e, {
+  component: "span",
+  variant: "body1",
+  className: o("text-xs", "text-metal-300", "select-none", "tracking-normal", m),
+  children: n
+}) : null);
+p.displayName = "KonstructButtonGroupMessage";
+export {
+  p as ButtonGroupMessage
+};

package/dist/components/ButtonGroup/components/ButtonGroupMessage/index.js

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

package/dist/components/ButtonGroup/components/index.js

@@ -0,0 +1,8 @@
+import { ButtonGroupItem as t } from "./ButtonGroupItem/ButtonGroupItem.js";
+import { ButtonGroupLabel as m } from "./ButtonGroupLabel/ButtonGroupLabel.js";
+import { ButtonGroupMessage as u } from "./ButtonGroupMessage/ButtonGroupMessage.js";
+export {
+  t as ButtonGroupItem,
+  m as ButtonGroupLabel,
+  u as ButtonGroupMessage
+};

package/dist/components/ButtonGroup/hooks/index.js

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

package/dist/components/ButtonGroup/hooks/useButtonGroup.js

@@ -0,0 +1,54 @@
+import { useCallback as d, useId as m, useRef as A, useState as D } from "react";
+var y = ({ defaultValue: g, disabled: l, options: a, value: f, onValueChange: x }) => {
+  const p = m(), I = A(null), o = f !== void 0, [k, v] = D(() => g), u = o ? f : k, [w, b] = D("none"), s = d((e) => e ? a.findIndex((n) => n.value === e) : -1, [a]), i = d((e) => {
+    if (l) return;
+    const n = s(u), t = s(e);
+    n !== -1 && t !== -1 && b(t > n ? "right" : "left"), o || v(e), x?.(e);
+  }, [
+    l,
+    s,
+    o,
+    x,
+    u
+  ]);
+  return {
+    animationDirection: w,
+    groupRef: I,
+    id: p,
+    selected: u,
+    handleKeyDown: d((e, n) => {
+      const t = a.filter((c) => !c.disabled && !l), h = t.findIndex((c) => c.value === a[n].value);
+      let r = -1;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          e.preventDefault(), r = (h + 1) % t.length;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          e.preventDefault(), r = (h - 1 + t.length) % t.length;
+          break;
+        case "Home":
+          e.preventDefault(), r = 0;
+          break;
+        case "End":
+          e.preventDefault(), r = t.length - 1;
+          break;
+        default:
+          return;
+      }
+      if (r >= 0) {
+        const c = t[r];
+        i(c.value), I.current?.querySelector(`[data-value="${c.value}"]`)?.focus();
+      }
+    }, [
+      l,
+      i,
+      a
+    ]),
+    handleSelect: i
+  };
+};
+export {
+  y as useButtonGroup
+};

package/dist/components/Card/Card.js

@@ -1,36 +1,24 @@
-import { jsx as m } from "react/jsx-runtime";
+import { t as m } from "../../utils-DHuiYnx1.js";
+import { cardBaseVariants as f, cardVariants as p } from "./Card.variants.js";
 import { forwardRef as c } from "react";
-import { cn as s } from "../../utils/index.js";
-import { cardVariants as f, cardBaseVariants as p } from "./Card.variants.js";
-const l = c(
-  ({ className: d, theme: o, isActive: a, canHover: r, wrapperClassName: t, ...e }, i) => /* @__PURE__ */ m(
-    "div",
-    {
-      "data-theme": o,
-      className: s(
-        p({
-          canHover: r,
-          className: t,
-          isActive: a
-        })
-      ),
-      children: /* @__PURE__ */ m(
-        "div",
-        {
-          ref: i,
-          className: s(
-            f({
-              className: d,
-              isActive: a,
-              canHover: r
-            })
-          ),
-          ...e
-        }
-      )
-    }
-  )
-);
+import { jsx as s } from "react/jsx-runtime";
+var l = c(({ className: d, theme: o, isActive: a, canHover: r, wrapperClassName: t, ...e }, i) => /* @__PURE__ */ s("div", {
+  "data-theme": o,
+  className: m(f({
+    canHover: r,
+    className: t,
+    isActive: a
+  })),
+  children: /* @__PURE__ */ s("div", {
+    ref: i,
+    className: m(p({
+      className: d,
+      isActive: a,
+      canHover: r
+    })),
+    ...e
+  })
+}));
 l.displayName = "Card";
 export {
   l as Card

package/dist/components/Card/Card.variants.js

@@ -1,50 +1,46 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const o = r(
-  ["border", "border-slate-200", "rounded-xl"],
-  {
-    variants: {
-      isActive: {
-        true: "border-transparent",
-        false: ""
-      },
-      canHover: {
-        true: ["group", "hover:border-transparent"],
-        false: ""
-      }
-    }
+import { t as r } from "../../dist-DtEbXv47.js";
+var e = r([
+  "rounded-xl",
+  "border",
+  "border-gray-200",
+  "dark:border-metal-700"
+], { variants: {
+  isActive: {
+    true: "border-transparent",
+    false: ""
+  },
+  canHover: {
+    true: ["group", "hover:border-transparent"],
+    false: ""
   }
-), a = r(
-  ["border", "border-4", "p-3", "text-card-foreground", "rounded-xl"],
-  {
-    variants: {
-      isActive: {
-        true: [
-          "border-kubefirst-primary",
-          "shadow",
-          "civo:border-civo-primary"
-        ],
-        false: "border-transparent"
-      },
-      canHover: {
-        true: [
-          "cursor-pointer",
-          "border-transparent",
-          "group-hover:border-kubefirst-primary",
-          "civo:group-hover:border-civo-primary"
-        ],
-        false: ""
-      }
+} }), o = r([
+  "border",
+  "border-4",
+  "p-3",
+  "text-card-foreground",
+  "rounded-xl"
+], {
+  variants: {
+    isActive: {
+      true: ["border-aurora-500", "shadow"],
+      false: "border-transparent"
     },
-    compoundVariants: [
-      {
-        canHover: void 0,
-        isActive: void 0,
-        class: "border-transparent"
-      }
-    ]
-  }
-);
+    canHover: {
+      true: [
+        "cursor-pointer",
+        "border-transparent",
+        "group-hover:border-aurora-500"
+      ],
+      false: ""
+    }
+  },
+  compoundVariants: [{
+    canHover: void 0,
+    isActive: void 0,
+    class: "border-transparent"
+  }]
+});
 export {
-  o as cardBaseVariants,
-  a as cardVariants
+  e as cardBaseVariants,
+  o as cardVariants
 };