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

package/dist/components/Button/Button.variants.js

@@ -1,277 +1,322 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const t = r(
-  [
-    "border",
-    "cursor-pointer",
-    "disabled:pointer-events-none",
-    "flex",
-    "focus-visible:outline-none",
-    "focus-visible:ring-1",
-    "focus-visible:ring-ring",
-    "font-semibold",
-    "gap-[7px]",
-    "inline-flex",
-    "items-center",
-    "justify-center",
-    "rounded",
-    "transition-colors",
-    "whitespace-nowrap",
-    "h-10",
-    "px-4",
-    "py-2",
-    "text-sm",
-    "kubefirst:border-kubefirst-primary",
-    "kubefirst:bg-kubefirst-primary",
-    "kubefirst:hover:bg-kubefirst-secondary",
-    "kubefirst:hover:border-kubefirst-secondary",
-    "kubefirst:text-white",
-    "bg-aurora-500",
-    "border-aurora-500",
-    "text-slate-700",
-    "hover:bg-aurora-400",
-    "hover:border-aurora-400"
-  ],
-  {
-    variants: {
-      variant: {
-        primary: "",
-        secondary: ["bg-white"],
-        danger: [
-          "border-red-700",
-          "bg-red-700",
-          "text-white",
-          "hover:bg-red-800",
-          "hover:border-red-800"
-        ],
-        text: ["bg-transparent", "border-transparent", "text-slate-500"]
-      },
-      shape: {
-        circle: ["rounded-full", "p-1"]
-      },
-      version: {
-        default: "",
-        alternate: ""
-      },
-      disabled: {
-        true: ["text-zinc-500", "border-zinc-200", "bg-zinc-200"],
-        false: ""
-      },
-      size: {
-        medium: "",
-        large: ""
-      },
-      appearance: {
-        compact: [
-          "px-2",
-          "py-1",
-          "h-auto",
-          "text-[0.8125rem]",
-          "leading-[1.375rem]",
-          "h-[30px]"
-        ]
-      }
+import { t as r } from "../../dist-DtEbXv47.js";
+var a = r([
+  "select-none",
+  "border",
+  "cursor-pointer",
+  "disabled:pointer-events-none",
+  "flex",
+  "focus-visible:outline-none",
+  "focus-visible:ring-1",
+  "focus-visible:ring-ring",
+  "font-semibold",
+  "gap-2",
+  "inline-flex",
+  "items-center",
+  "justify-center",
+  "rounded",
+  "transition-colors",
+  "whitespace-nowrap",
+  "h-10",
+  "px-4",
+  "py-2",
+  "text-sm",
+  "bg-aurora-500",
+  "border-aurora-500",
+  "text-metal-900",
+  "focus-visible:bg-aurora-400",
+  "hover:bg-aurora-400",
+  "hover:border-aurora-400",
+  "kubefirst:border-kubefirst-primary",
+  "kubefirst:bg-kubefirst-primary",
+  "kubefirst:hover:bg-kubefirst-secondary",
+  "kubefirst:hover:border-kubefirst-secondary",
+  "kubefirst:text-white"
+], {
+  variants: {
+    variant: {
+      primary: "",
+      secondary: ["bg-white"],
+      tertiary: [],
+      danger: [
+        "border-red-700",
+        "bg-red-700",
+        "text-white",
+        "hover:bg-red-800",
+        "hover:border-red-800",
+        "focus-visible:bg-red-800",
+        "focus-visible:border-red-800",
+        "focus-visible:ring-red-300"
+      ],
+      link: [
+        "bg-transparent",
+        "border-transparent",
+        "text-blue-600",
+        "hover:underline",
+        "hover:text-blue-700",
+        "hover:bg-transparent",
+        "hover:border-transparent",
+        "dark:text-aurora-500",
+        "dark:hover:text-aurora-500",
+        "focus-visible:bg-transparent"
+      ]
+    },
+    shape: { circle: ["rounded-full", "p-1"] },
+    version: {
+      default: "",
+      alternate: ""
+    },
+    disabled: {
+      true: [
+        "text-zinc-500",
+        "border-zinc-200",
+        "bg-zinc-200"
+      ],
+      false: ""
     },
-    compoundVariants: [
-      {
-        variant: "secondary",
-        disabled: !1,
-        class: [
-          "bg-white",
-          "hover:bg-white",
-          "text-slate-700",
-          "border-slate-300",
-          "hover:text-slate-700",
-          "hover:border-slate-300",
-          "hover:bg-slate-50",
-          "dark:bg-transparent",
-          "dark:text-aurora-500",
-          "dark:border-aurora-500",
-          "dark:hover:bg-aurora-900",
-          "dark:hover:border-aurora-500",
-          "dark:hover:text-aurora-500",
-          "kubefirst:text-kubefirst-primary",
-          "kubefirst:border-kubefirst-primary",
-          "kubefirst:hover:text-kubefirst-secondary",
-          "kubefirst:hover:border-kubefirst-secondary",
-          "kubefirst:hover:bg-purple-50",
-          "kubefirst:bg-white"
-        ]
-      },
-      {
-        variant: "primary",
-        disabled: !0,
-        class: [
-          "kubefirst:bg-zinc-200",
-          "kubefirst:border-zinc-200",
-          "kubefirst:text-zinc-500",
-          "text-gray-700",
-          "opacity-45"
-        ]
-      },
-      {
-        variant: "secondary",
-        disabled: !0,
-        class: [
-          "kubefirst:bg-white",
-          "kubefirst:border-zinc-500",
-          "kubefirst:text-zinc-500",
-          "border-slate-300/45",
-          "bg-white",
-          "text-slate-700/45"
-        ]
-      },
-      {
-        variant: "danger",
-        version: "alternate",
-        class: [
-          "kubefirst:border-red-700",
-          "kubefirst:text-red-700",
-          "kubefirst:bg-white",
-          "kubefirst:hover:bg-red-50",
-          "border-red-700",
-          "text-red-700",
-          "bg-white",
-          "hover:bg-red-50"
-        ]
-      },
-      {
-        variant: "danger",
-        disabled: !0,
-        class: ["text-white", "bg-red-700/45", "border-transparent"]
-      },
-      {
-        variant: "text",
-        disabled: !1,
-        version: "default",
-        class: [
-          "kubefirst:hover:border-transparent",
-          "kubefirst:hover:text-kubefirst-primary",
-          "kubefirst:text-kubefirst-primary",
-          "kubefirst:hover:bg-purple-50",
-          "kubefirst:bg-white",
-          "kubefirst:border-transparent",
-          "bg-white",
-          "border-transparent",
-          "text-slate-700",
-          "hover:border-transparent",
-          "hover:text-aurora-500",
-          "hover:bg-transparent"
-        ]
-      },
-      {
-        variant: "text",
-        disabled: !1,
-        version: "alternate",
-        class: [
-          "bg-white",
-          "border-transparent",
-          "text-aurora-500",
-          "hover:border-transparent",
-          "hover:text-aurora-500",
-          "hover:bg-aurora-50",
-          "kubefirst:hover:border-transparent",
-          "kubefirst:text-kubefirst-primary",
-          "kubefirst:border-transparent",
-          "kubefirst:bg-white",
-          "kubefirst:hover:text-kubefirst-primary",
-          "kubefirst:hover:bg-purple-50"
-        ]
-      },
-      {
-        variant: "text",
-        disabled: !0,
-        version: ["default", "alternate"],
-        class: [
-          "kubefirst:bg-white",
-          "kubefirst:border-white",
-          "kubefirst:text-zinc-400",
-          "bg-white",
-          "border-white",
-          "text-slate-700/45"
-        ]
-      },
-      {
-        shape: "circle",
-        size: ["medium", "large"],
-        disabled: !1,
-        class: [
-          "w-8",
-          "h-8",
-          "text-slate-400",
-          "bg-transparent",
-          "border-transparent",
-          "hover:border-transparent",
-          "hover:bg-aurora-500/5",
-          "hover:text-slate-800",
-          "[&>svg]:w-5",
-          "[&>svg]:h-5",
-          "dark:text-slate-400",
-          "dark:hover:text-aurora-500",
-          "dark:hover:bg-aurora-900",
-          "kubefirst:text-slate-400",
-          "kubefirst:bg-transparent",
-          "kubefirst:border-transparent",
-          "kubefirst:hover:border-transparent",
-          "kubefirst:hover:bg-kubefirst-primary/5",
-          "kubefirst:hover:text-kubefirst-primary",
-          "kubefirst-dark:text-slate-400",
-          "kubefirst-dark:bg-transparent",
-          "kubefirst-dark:border-transparent",
-          "kubefirst-dark:hover:border-transparent",
-          "kubefirst-dark:hover:bg-kubefirst-primary/5",
-          "kubefirst-dark:hover:text-kubefirst-primary",
-          "kubefirst-dark:hover:bg-kubefirst-primary/25"
-        ]
-      },
-      {
-        shape: "circle",
-        size: "large",
-        disabled: !1,
-        class: ["w-11", "h-11", "[&>svg]:w-6", "[&>svg]:h-6"]
-      },
-      {
-        variant: "danger",
-        shape: "circle",
-        size: ["medium", "large"],
-        disabled: !1,
-        class: [
-          "text-red-700",
-          "hover:text-red-700",
-          "hover:bg-red-50",
-          "dark:text-red-700",
-          "dark:hover:text-red-500",
-          "dark:hover:bg-red-700/25"
-        ]
-      },
-      {
-        shape: "circle",
-        size: ["medium", "large"],
-        disabled: !0,
-        class: [
-          "text-slate-400",
-          "bg-transparent",
-          "border-transparent",
-          "w-8",
-          "h-8",
-          "[&>svg]:w-5",
-          "[&>svg]:h-5"
-        ]
-      },
-      {
-        shape: "circle",
-        size: "large",
-        disabled: !0,
-        class: ["w-11", "h-11", "[&>svg]:w-6", "[&>svg]:h-6"]
-      }
-    ],
-    defaultVariants: {
+    size: {
+      medium: "",
+      large: ""
+    },
+    appearance: { compact: [
+      "px-2",
+      "py-1",
+      "text-[13px]",
+      "leading-5.5",
+      "h-7.5"
+    ] }
+  },
+  compoundVariants: [
+    {
       variant: "primary",
-      version: "default",
+      disabled: !0,
+      class: [
+        "text-metal-900",
+        "bg-aurora-500",
+        "border-transparent",
+        "kubefirst:bg-zinc-200",
+        "kubefirst:border-zinc-200",
+        "kubefirst:text-zinc-500",
+        "text-gray-700",
+        "opacity-45"
+      ]
+    },
+    {
+      variant: "secondary",
+      disabled: !1,
+      class: [
+        "transition-colors",
+        "bg-white",
+        "hover:bg-white",
+        "text-slate-700",
+        "border-slate-300",
+        "hover:text-slate-700",
+        "hover:border-slate-300",
+        "hover:bg-slate-50",
+        "focus-visible:bg-slate-50",
+        "dark:bg-transparent",
+        "dark:text-aurora-500",
+        "dark:border-aurora-500",
+        "dark:focus-visible:bg-aurora-900",
+        "dark:hover:bg-aurora-900",
+        "dark:hover:border-aurora-500",
+        "dark:hover:text-aurora-500",
+        "kubefirst:text-kubefirst-primary",
+        "kubefirst:border-kubefirst-primary",
+        "kubefirst:hover:text-kubefirst-secondary",
+        "kubefirst:hover:border-kubefirst-secondary",
+        "kubefirst:hover:bg-purple-50",
+        "kubefirst:bg-white"
+      ]
+    },
+    {
+      variant: "secondary",
+      disabled: !0,
+      class: [
+        "kubefirst:bg-white",
+        "kubefirst:border-zinc-500",
+        "kubefirst:text-zinc-500",
+        "border-slate-300",
+        "bg-white",
+        "text-slate-700",
+        "dark:bg-aurora-900",
+        "dark:border-aurora-500",
+        "dark:text-aurora-500",
+        "opacity-45"
+      ]
+    },
+    {
+      variant: "tertiary",
+      disabled: !1,
+      class: [
+        "transition-colors",
+        "bg-transparent",
+        "border-transparent",
+        "text-slate-700",
+        "hover:bg-aurora-100",
+        "focus-visible:bg-aurora-100",
+        "hover:text-slate-700",
+        "hover:border-transparent",
+        "dark:bg-transparent",
+        "dark:text-metal-100",
+        "dark:border-metal-100",
+        "dark:focus-visible:bg-green-400/15",
+        "dark:hover:bg-green-400/15",
+        "dark:hover:border-metal-100",
+        "dark:hover:text-metal-100"
+      ]
+    },
+    {
+      variant: "tertiary",
+      disabled: !0,
+      class: [
+        "border-transparent",
+        "bg-white",
+        "text-slate-700",
+        "opacity-45",
+        "dark:bg-transparent",
+        "dark:border-metal-100",
+        "dark:text-metal-100"
+      ]
+    },
+    {
+      variant: "danger",
+      version: "alternate",
+      class: [
+        "text-red-700",
+        "border-red-700",
+        "bg-white",
+        "hover:bg-red-50",
+        "focus-visible:bg-red-50",
+        "focus-visible:border-red-700",
+        "focus-visible:ring-red-300",
+        "dark:bg-transparent",
+        "dark:border-rose-400",
+        "dark:text-rose-400",
+        "dark:hover:bg-rose-950",
+        "dark:hover:border-rose-400",
+        "dark:focus-visible:bg-rose-950"
+      ]
+    },
+    {
+      variant: "danger",
+      disabled: !0,
+      class: [
+        "text-white",
+        "border-red-700",
+        "bg-red-700",
+        "opacity-45"
+      ]
+    },
+    {
+      variant: "danger",
+      version: "alternate",
+      disabled: !0,
+      class: [
+        "text-red-700",
+        "border-red-700",
+        "bg-white",
+        "opacity-45"
+      ]
+    },
+    {
+      variant: "link",
+      disabled: !0,
+      class: [
+        "bg-transparent",
+        "border-transparent",
+        "text-blue-600",
+        "opacity-45"
+      ]
+    },
+    {
+      shape: "circle",
+      size: ["medium", "large"],
+      disabled: !1,
+      class: [
+        "w-8",
+        "h-8",
+        "text-slate-500",
+        "bg-transparent",
+        "border-transparent",
+        "hover:border-transparent",
+        "hover:bg-aurora-50",
+        "focus-visible:bg-aurora-50",
+        "hover:text-slate-800",
+        "focus-visible:text-slate-800",
+        "[&>svg]:w-5",
+        "[&>svg]:h-5",
+        "dark:text-metal-400",
+        "dark:focus-visible:text-aurora-500",
+        "dark:hover:text-aurora-500",
+        "dark:hover:bg-green-400/15",
+        "dark:focus-visible:bg-green-400/15"
+      ]
+    },
+    {
+      shape: "circle",
+      size: "large",
       disabled: !1,
-      size: "medium"
+      class: [
+        "w-11",
+        "h-11",
+        "[&>svg]:w-6",
+        "[&>svg]:h-6"
+      ]
+    },
+    {
+      variant: "danger",
+      shape: "circle",
+      size: ["medium", "large"],
+      disabled: !1,
+      class: [
+        "text-red-700",
+        "focus-visible:text-red-700",
+        "hover:text-red-700",
+        "focus-visible:bg-red-50",
+        "focus-visible:ring-red-300",
+        "hover:bg-red-50",
+        "dark:text-red-500",
+        "dark:hover:text-red-500",
+        "dark:focus-visible:text-red-500",
+        "dark:hover:bg-red-950/55",
+        "dark:focus-visible:bg-red-950/55"
+      ]
+    },
+    {
+      shape: "circle",
+      size: ["medium", "large"],
+      disabled: !0,
+      class: [
+        "opacity-45",
+        "text-slate-500",
+        "bg-transparent",
+        "border-transparent",
+        "w-8",
+        "h-8",
+        "[&>svg]:w-5",
+        "[&>svg]:h-5",
+        "dark:text-metal-400"
+      ]
+    },
+    {
+      shape: "circle",
+      size: "large",
+      disabled: !0,
+      class: [
+        "w-11",
+        "h-11",
+        "[&>svg]:w-6",
+        "[&>svg]:h-6"
+      ]
     }
+  ],
+  defaultVariants: {
+    variant: "primary",
+    version: "default",
+    disabled: !1,
+    size: "medium"
   }
-);
+});
 export {
-  t as buttonVariants
+  a as buttonVariants
 };

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,88 @@
+import { t as n } from "../../utils-DHuiYnx1.js";
+import { t as k } from "../../proxy-uLtw-ZML.js";
+import { buttonGroupPillVariants as q, buttonGroupVariants as z, buttonGroupWrapperVariants as A } from "./ButtonGroup.variants.js";
+import { ButtonGroupItem as E } from "./components/ButtonGroupItem/ButtonGroupItem.js";
+import { ButtonGroupLabel as H } from "./components/ButtonGroupLabel/ButtonGroupLabel.js";
+import { ButtonGroupMessage as J } from "./components/ButtonGroupMessage/ButtonGroupMessage.js";
+import { useButtonGroup as Q } from "./hooks/useButtonGroup.js";
+import { useMemo as T } from "react";
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+var U = ({ className: p, contentClassName: f, defaultValue: h, descriptionAlign: v, descriptionClassName: G, disabled: s, duration: l, error: b, errorClassName: N, helperText: y, helperTextClassName: B, isRequired: D, itemClassName: g, itemLabelClassName: x, label: i, labelAlign: w, labelClassName: I, name: K, options: t, pillClassName: S, requiredClassName: V, theme: $, value: j, wrapperClassName: F, onValueChange: L }) => {
+  const { animationDirection: M, groupRef: C, id: m, selected: r, handleKeyDown: O, handleSelect: P } = Q({
+    defaultValue: h,
+    disabled: s ?? void 0,
+    options: t,
+    value: j,
+    onValueChange: L
+  }), u = t.length, c = T(() => t.findIndex((e) => e.value === r), [t, r]);
+  return /* @__PURE__ */ d("div", {
+    className: n(A(), F),
+    "data-theme": $,
+    children: [
+      i && /* @__PURE__ */ a(H, {
+        className: I,
+        htmlFor: m,
+        isRequired: D,
+        label: i,
+        requiredClassName: V
+      }),
+      /* @__PURE__ */ d("div", {
+        ref: C,
+        role: "radiogroup",
+        "aria-labelledby": i ? m : void 0,
+        className: n(z({ disabled: s }), p),
+        children: [c >= 0 && /* @__PURE__ */ a(k.div, {
+          "aria-hidden": "true",
+          className: n(q(), S),
+          initial: !1,
+          animate: {
+            left: `calc(${c} * (100% / ${u}) + 8px)`,
+            width: `calc(100% / ${u} - 16px)`
+          },
+          transition: {
+            type: "tween",
+            ease: "linear",
+            duration: l ?? 0.3
+          }
+        }), t.map((e, o) => {
+          const R = r === e.value, W = s || e.disabled;
+          return /* @__PURE__ */ a(E, {
+            animationDirection: M,
+            className: g,
+            contentClassName: f,
+            descriptionAlign: v,
+            descriptionClassName: G,
+            duration: l,
+            hasDescription: !!e.description,
+            index: o,
+            isDisabled: !!W,
+            isFirst: o === 0,
+            isLast: o === t.length - 1,
+            isSelected: R,
+            labelAlign: w,
+            labelClassName: x,
+            option: e,
+            value: e.value,
+            onKeyDown: O,
+            onSelect: P
+          }, e.value);
+        })]
+      }),
+      /* @__PURE__ */ a("input", {
+        type: "hidden",
+        name: K,
+        value: r ?? ""
+      }),
+      /* @__PURE__ */ a(J, {
+        error: b,
+        errorClassName: N,
+        helperText: y,
+        helperTextClassName: B
+      })
+    ]
+  });
+};
+U.displayName = "KonstructButtonGroup";
+export {
+  U as ButtonGroup
+};