@konstructio/ui 0.1.2-alpha.75 → 0.1.2-alpha.77

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

@@ -1,67 +1,69 @@
-import { useId as A, useRef as S, useState as D, useCallback as d } from "react";
-const R = ({
-  defaultValue: g,
-  disabled: l,
-  options: o,
-  value: f,
-  onValueChange: x
-}) => {
-  const p = A(), I = S(null), u = f !== void 0, [k, w] = D(
-    () => g
-  ), a = u ? f : k, [b, m] = D("none"), s = d(
-    (e) => e ? o.findIndex((n) => n.value === e) : -1,
-    [o]
-  ), i = d(
-    (e) => {
-      if (l) return;
-      const n = s(a), t = s(e);
-      n !== -1 && t !== -1 && m(t > n ? "right" : "left"), u || w(e), x?.(e);
-    },
-    [l, s, u, x, a]
-  ), v = d(
-    (e, n) => {
-      const t = o.filter(
-        (c) => !c.disabled && !l
-      ), h = t.findIndex(
-        (c) => c.value === o[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;
+import { c as C } from "../../../compiler-runtime-DA41awpA.js";
+import { useId as O, useRef as $, useState as S } from "react";
+const K = (y) => {
+  const e = C.c(20), {
+    defaultValue: m,
+    disabled: r,
+    options: o,
+    value: w,
+    onValueChange: I
+  } = y, b = O(), k = $(null), u = w !== void 0;
+  let d;
+  e[0] !== m ? (d = () => m, e[0] = m, e[1] = d) : d = e[1];
+  const [B, R] = S(d), l = u ? w : B, [D, E] = S("none");
+  let f;
+  e[2] !== o ? (f = (t) => t ? o.findIndex((a) => a.value === t) : -1, e[2] = o, e[3] = f) : f = e[3];
+  const p = f;
+  let x;
+  e[4] !== r || e[5] !== p || e[6] !== u || e[7] !== I || e[8] !== l ? (x = (t) => {
+    if (r)
+      return;
+    const a = p(l), n = p(t);
+    a !== -1 && n !== -1 && E(n > a ? "right" : "left"), u || R(t), I?.(t);
+  }, e[4] = r, e[5] = p, e[6] = u, e[7] = I, e[8] = l, e[9] = x) : x = e[9];
+  const s = x;
+  let h;
+  e[10] !== r || e[11] !== s || e[12] !== o ? (h = (t, a) => {
+    const n = o.filter((i) => !i.disabled && !r), A = n.findIndex((i) => i.value === o[a].value);
+    let c;
+    e: switch (t.key) {
+      case "ArrowRight":
+      case "ArrowDown": {
+        t.preventDefault(), c = (A + 1) % n.length;
+        break e;
       }
-      if (r >= 0) {
-        const c = t[r];
-        i(c.value), I.current?.querySelector(
-          `[data-value="${c.value}"]`
-        )?.focus();
+      case "ArrowLeft":
+      case "ArrowUp": {
+        t.preventDefault(), c = (A - 1 + n.length) % n.length;
+        break e;
       }
-    },
-    [l, i, o]
-  );
-  return {
-    animationDirection: b,
-    groupRef: I,
-    id: p,
-    selected: a,
+      case "Home": {
+        t.preventDefault(), c = 0;
+        break e;
+      }
+      case "End": {
+        t.preventDefault(), c = n.length - 1;
+        break e;
+      }
+      default:
+        return;
+    }
+    if (c >= 0) {
+      const i = n[c];
+      s(i.value), k.current?.querySelector(`[data-value="${i.value}"]`)?.focus();
+    }
+  }, e[10] = r, e[11] = s, e[12] = o, e[13] = h) : h = e[13];
+  const v = h;
+  let g;
+  return e[14] !== D || e[15] !== v || e[16] !== s || e[17] !== b || e[18] !== l ? (g = {
+    animationDirection: D,
+    groupRef: k,
+    id: b,
+    selected: l,
     handleKeyDown: v,
-    handleSelect: i
-  };
+    handleSelect: s
+  }, e[14] = D, e[15] = v, e[16] = s, e[17] = b, e[18] = l, e[19] = g) : g = e[19], g;
 };
 export {
-  R as useButtonGroup
+  K as useButtonGroup
 };

package/dist/components/Card/Card.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { CardProps } from './Card.types';
+import { Props } from './Card.types';
 /**
  * A container card component with optional hover and active states.
  *
@@ -24,5 +24,5 @@ import { CardProps } from './Card.types';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-card--docs Storybook}
  */
-declare const Card: FC<CardProps>;
+declare const Card: FC<Props>;
 export { Card };

package/dist/components/Card/Card.js

@@ -1,37 +1,37 @@
-import { jsx as m } from "react/jsx-runtime";
-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
-        }
-      )
-    }
-  )
-);
-l.displayName = "Card";
+import { jsx as n } from "react/jsx-runtime";
+import { c as v } from "../../compiler-runtime-DA41awpA.js";
+import { forwardRef as h } from "react";
+import { cn as N } from "../../utils/index.js";
+import { cardBaseVariants as x, cardVariants as C } from "./Card.variants.js";
+const u = h((d, f) => {
+  const e = v.c(23);
+  let t, r, a, s, l, i;
+  e[0] !== d ? ({
+    className: r,
+    theme: l,
+    isActive: a,
+    canHover: t,
+    wrapperClassName: i,
+    ...s
+  } = d, e[0] = d, e[1] = t, e[2] = r, e[3] = a, e[4] = s, e[5] = l, e[6] = i) : (t = e[1], r = e[2], a = e[3], s = e[4], l = e[5], i = e[6]);
+  let m;
+  e[7] !== t || e[8] !== a || e[9] !== i ? (m = N(x({
+    canHover: t,
+    className: i,
+    isActive: a
+  })), e[7] = t, e[8] = a, e[9] = i, e[10] = m) : m = e[10];
+  let o;
+  e[11] !== t || e[12] !== r || e[13] !== a ? (o = N(C({
+    className: r,
+    isActive: a,
+    canHover: t
+  })), e[11] = t, e[12] = r, e[13] = a, e[14] = o) : o = e[14];
+  let c;
+  e[15] !== s || e[16] !== f || e[17] !== o ? (c = /* @__PURE__ */ n("div", { ref: f, className: o, ...s }), e[15] = s, e[16] = f, e[17] = o, e[18] = c) : c = e[18];
+  let p;
+  return e[19] !== m || e[20] !== c || e[21] !== l ? (p = /* @__PURE__ */ n("div", { "data-theme": l, className: m, children: c }), e[19] = m, e[20] = c, e[21] = l, e[22] = p) : p = e[22], p;
+});
+u.displayName = "Card";
 export {
-  l as Card
+  u as Card
 };

package/dist/components/Card/Card.types.d.ts

@@ -12,7 +12,7 @@ import { cardVariants } from './Card.variants';
  * <Card isActive>Active/selected card</Card>
  * ```
  */
-export interface CardProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants>, PropsWithChildren {
+export interface Props extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants>, PropsWithChildren {
     /** Enable hover effect */
     canHover?: boolean;
     /** Show active/selected state */
@@ -22,3 +22,5 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement>, VariantProps<
     /** CSS classes for the outer wrapper */
     wrapperClassName?: string;
 }
+/** @deprecated Use Props instead */
+export type CardProps = Props;

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

@@ -1,44 +1,32 @@
 import { c as r } from "../../index-D29mdTf5.js";
-const 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: ""
-      }
+const 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: ""
     }
   }
-), o = r(
-  ["border", "border-4", "p-3", "text-card-foreground", "rounded-xl"],
-  {
-    variants: {
-      isActive: {
-        true: ["border-aurora-500", "shadow"],
-        false: "border-transparent"
-      },
-      canHover: {
-        true: [
-          "cursor-pointer",
-          "border-transparent",
-          "group-hover:border-aurora-500"
-        ],
-        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 {
   e as cardBaseVariants,
   o as cardVariants

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { CheckboxProps } from './Checkbox.types';
+import { Props } from './Checkbox.types';
 /**
  * A checkbox component built on Radix UI primitives.
  * Supports controlled and uncontrolled modes with label support.
@@ -22,5 +22,5 @@ import { CheckboxProps } from './Checkbox.types';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-checkbox--docs Storybook}
  */
-declare const Checkbox: FC<CheckboxProps>;
+declare const Checkbox: FC<Props>;
 export { Checkbox };