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

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

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import { Props } from './Card.types';
+/**
+ * A container card component with optional hover and active states.
+ *
+ * @example
+ * ```tsx
+ * // Basic card
+ * <Card>
+ *   <h3>Card Title</h3>
+ *   <p>Card content goes here</p>
+ * </Card>
+ *
+ * // Hoverable card
+ * <Card canHover onClick={handleClick}>
+ *   Hover to see effect
+ * </Card>
+ *
+ * // Active/selected card
+ * <Card isActive>
+ *   This card is selected
+ * </Card>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-card--docs Storybook}
+ */
+declare const Card: FC<Props>;
+export { Card };

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.types.d.ts

@@ -0,0 +1,26 @@
+import { VariantProps } from 'class-variance-authority';
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { Theme } from '../../domain/theme';
+import { cardVariants } from './Card.variants';
+/**
+ * Props for the Card component.
+ *
+ * @example
+ * ```tsx
+ * <Card>Basic card content</Card>
+ * <Card canHover>Hoverable card</Card>
+ * <Card isActive>Active/selected card</Card>
+ * ```
+ */
+export interface Props extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants>, PropsWithChildren {
+    /** Enable hover effect */
+    canHover?: boolean;
+    /** Show active/selected state */
+    isActive?: boolean;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** CSS classes for the outer wrapper */
+    wrapperClassName?: string;
+}
+/** @deprecated Use Props instead */
+export type CardProps = Props;

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

@@ -0,0 +1,8 @@
+export declare const cardBaseVariants: (props?: ({
+    isActive?: boolean | null | undefined;
+    canHover?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const cardVariants: (props?: ({
+    isActive?: boolean | null | undefined;
+    canHover?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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
 };

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

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { Props } from './Checkbox.types';
+/**
+ * A checkbox component built on Radix UI primitives.
+ * Supports controlled and uncontrolled modes with label support.
+ *
+ * @example
+ * ```tsx
+ * // Basic checkbox with label
+ * <Checkbox label="Accept terms and conditions" />
+ *
+ * // Controlled checkbox
+ * <Checkbox
+ *   label="Subscribe to newsletter"
+ *   defaultChecked={subscribed}
+ *   onChange={(checked) => setSubscribed(checked)}
+ * />
+ *
+ * // Disabled checkbox
+ * <Checkbox label="Premium feature" disabled />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-checkbox--docs Storybook}
+ */
+declare const Checkbox: FC<Props>;
+export { Checkbox };

package/dist/components/Checkbox/Checkbox.js

@@ -1,355 +1,4 @@
-import { jsx as u, jsxs as B, Fragment as U } from "react/jsx-runtime";
-import * as h from "react";
-import S, { forwardRef as z, useId as V, useCallback as X } from "react";
-import { u as L } from "../../index-DQH6odE9.js";
-import { c as J, a as Q, b as j } from "../../index-BfXxHr_2.js";
-import { u as Y } from "../../index-BZPx6jYI.js";
-import { u as Z } from "../../index-BAEWsOG1.js";
-import { P as ee } from "../../index-C1g_chDT.js";
-import { P as w } from "../../index-BVRIAMfe.js";
-import { cn as T } from "../../utils/index.js";
-import { checkboxVariants as te, labelVariants as re } from "./Checkbox.variants.js";
-import { useToggle as oe } from "../../hooks/useToggle.js";
-import { P as y } from "../../index-N2OStZoU.js";
-function R() {
-  return R = Object.assign || function(e) {
-    for (var a = 1; a < arguments.length; a++) {
-      var o = arguments[a];
-      for (var n in o)
-        Object.prototype.hasOwnProperty.call(o, n) && (e[n] = o[n]);
-    }
-    return e;
-  }, R.apply(this, arguments);
-}
-function ne(e, a) {
-  if (e == null) return {};
-  var o = ae(e, a), n, r;
-  if (Object.getOwnPropertySymbols) {
-    var t = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < t.length; r++)
-      n = t[r], !(a.indexOf(n) >= 0) && Object.prototype.propertyIsEnumerable.call(e, n) && (o[n] = e[n]);
-  }
-  return o;
-}
-function ae(e, a) {
-  if (e == null) return {};
-  var o = {}, n = Object.keys(e), r, t;
-  for (t = 0; t < n.length; t++)
-    r = n[t], !(a.indexOf(r) >= 0) && (o[r] = e[r]);
-  return o;
-}
-var I = z(function(e, a) {
-  var o = e.color, n = o === void 0 ? "currentColor" : o, r = e.size, t = r === void 0 ? 24 : r, l = ne(e, ["color", "size"]);
-  return /* @__PURE__ */ S.createElement("svg", R({
-    ref: a,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: t,
-    height: t,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: n,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, l), /* @__PURE__ */ S.createElement("polyline", {
-    points: "20 6 9 17 4 12"
-  }));
-});
-I.propTypes = {
-  color: y.string,
-  size: y.oneOfType([y.string, y.number])
-};
-I.displayName = "Check";
-var P = "Checkbox", [ce, Pe] = J(P), [se, N] = ce(P);
-function ie(e) {
-  const {
-    __scopeCheckbox: a,
-    checked: o,
-    children: n,
-    defaultChecked: r,
-    disabled: t,
-    form: l,
-    name: f,
-    onCheckedChange: d,
-    required: b,
-    value: k = "on",
-    // @ts-expect-error
-    internal_do_not_use_render: i
-  } = e, [p, x] = Q({
-    prop: o,
-    defaultProp: r ?? !1,
-    onChange: d,
-    caller: P
-  }), [m, C] = h.useState(null), [g, c] = h.useState(null), s = h.useRef(!1), _ = m ? !!l || !!m.closest("form") : (
-    // We set this to true by default so that events bubble to forms without JS (SSR)
-    !0
-  ), E = {
-    checked: p,
-    disabled: t,
-    setChecked: x,
-    control: m,
-    setControl: C,
-    name: f,
-    form: l,
-    value: k,
-    hasConsumerStoppedPropagationRef: s,
-    required: b,
-    defaultChecked: v(r) ? !1 : r,
-    isFormControl: _,
-    bubbleInput: g,
-    setBubbleInput: c
-  };
-  return /* @__PURE__ */ u(
-    se,
-    {
-      scope: a,
-      ...E,
-      children: le(i) ? i(E) : n
-    }
-  );
-}
-var M = "CheckboxTrigger", q = h.forwardRef(
-  ({ __scopeCheckbox: e, onKeyDown: a, onClick: o, ...n }, r) => {
-    const {
-      control: t,
-      value: l,
-      disabled: f,
-      checked: d,
-      required: b,
-      setControl: k,
-      setChecked: i,
-      hasConsumerStoppedPropagationRef: p,
-      isFormControl: x,
-      bubbleInput: m
-    } = N(M, e), C = L(r, k), g = h.useRef(d);
-    return h.useEffect(() => {
-      const c = t?.form;
-      if (c) {
-        const s = () => i(g.current);
-        return c.addEventListener("reset", s), () => c.removeEventListener("reset", s);
-      }
-    }, [t, i]), /* @__PURE__ */ u(
-      w.button,
-      {
-        type: "button",
-        role: "checkbox",
-        "aria-checked": v(d) ? "mixed" : d,
-        "aria-required": b,
-        "data-state": W(d),
-        "data-disabled": f ? "" : void 0,
-        disabled: f,
-        value: l,
-        ...n,
-        ref: C,
-        onKeyDown: j(a, (c) => {
-          c.key === "Enter" && c.preventDefault();
-        }),
-        onClick: j(o, (c) => {
-          i((s) => v(s) ? !0 : !s), m && x && (p.current = c.isPropagationStopped(), p.current || c.stopPropagation());
-        })
-      }
-    );
-  }
-);
-q.displayName = M;
-var A = h.forwardRef(
-  (e, a) => {
-    const {
-      __scopeCheckbox: o,
-      name: n,
-      checked: r,
-      defaultChecked: t,
-      required: l,
-      disabled: f,
-      value: d,
-      onCheckedChange: b,
-      form: k,
-      ...i
-    } = e;
-    return /* @__PURE__ */ u(
-      ie,
-      {
-        __scopeCheckbox: o,
-        checked: r,
-        defaultChecked: t,
-        disabled: f,
-        required: l,
-        onCheckedChange: b,
-        name: n,
-        form: k,
-        value: d,
-        internal_do_not_use_render: ({ isFormControl: p }) => /* @__PURE__ */ B(U, { children: [
-          /* @__PURE__ */ u(
-            q,
-            {
-              ...i,
-              ref: a,
-              __scopeCheckbox: o
-            }
-          ),
-          p && /* @__PURE__ */ u(
-            K,
-            {
-              __scopeCheckbox: o
-            }
-          )
-        ] })
-      }
-    );
-  }
-);
-A.displayName = P;
-var F = "CheckboxIndicator", D = h.forwardRef(
-  (e, a) => {
-    const { __scopeCheckbox: o, forceMount: n, ...r } = e, t = N(F, o);
-    return /* @__PURE__ */ u(
-      ee,
-      {
-        present: n || v(t.checked) || t.checked === !0,
-        children: /* @__PURE__ */ u(
-          w.span,
-          {
-            "data-state": W(t.checked),
-            "data-disabled": t.disabled ? "" : void 0,
-            ...r,
-            ref: a,
-            style: { pointerEvents: "none", ...e.style }
-          }
-        )
-      }
-    );
-  }
-);
-D.displayName = F;
-var H = "CheckboxBubbleInput", K = h.forwardRef(
-  ({ __scopeCheckbox: e, ...a }, o) => {
-    const {
-      control: n,
-      hasConsumerStoppedPropagationRef: r,
-      checked: t,
-      defaultChecked: l,
-      required: f,
-      disabled: d,
-      name: b,
-      value: k,
-      form: i,
-      bubbleInput: p,
-      setBubbleInput: x
-    } = N(H, e), m = L(o, x), C = Y(t), g = Z(n);
-    h.useEffect(() => {
-      const s = p;
-      if (!s) return;
-      const _ = window.HTMLInputElement.prototype, O = Object.getOwnPropertyDescriptor(
-        _,
-        "checked"
-      ).set, $ = !r.current;
-      if (C !== t && O) {
-        const G = new Event("click", { bubbles: $ });
-        s.indeterminate = v(t), O.call(s, v(t) ? !1 : t), s.dispatchEvent(G);
-      }
-    }, [p, C, t, r]);
-    const c = h.useRef(v(t) ? !1 : t);
-    return /* @__PURE__ */ u(
-      w.input,
-      {
-        type: "checkbox",
-        "aria-hidden": !0,
-        defaultChecked: l ?? c.current,
-        required: f,
-        disabled: d,
-        name: b,
-        value: k,
-        form: i,
-        ...a,
-        tabIndex: -1,
-        ref: m,
-        style: {
-          ...a.style,
-          ...g,
-          position: "absolute",
-          pointerEvents: "none",
-          opacity: 0,
-          margin: 0,
-          // We transform because the input is absolutely positioned but we have
-          // rendered it **after** the button. This pulls it back to sit on top
-          // of the button.
-          transform: "translateX(-100%)"
-        }
-      }
-    );
-  }
-);
-K.displayName = H;
-function le(e) {
-  return typeof e == "function";
-}
-function v(e) {
-  return e === "indeterminate";
-}
-function W(e) {
-  return v(e) ? "indeterminate" : e ? "checked" : "unchecked";
-}
-const de = z(
-  ({
-    ariaLabelledBy: e,
-    className: a,
-    defaultChecked: o,
-    disabled: n,
-    id: r,
-    label: t,
-    labelClassName: l,
-    name: f,
-    theme: d,
-    title: b,
-    variant: k,
-    onChange: i,
-    ...p
-  }, x) => {
-    const [m, C] = oe(o ?? !1), g = V(), c = X(
-      (s) => {
-        C(s), i?.(s);
-      },
-      [i, C]
-    );
-    return /* @__PURE__ */ B("div", { className: "flex items-center gap-2", "data-theme": d, children: [
-      /* @__PURE__ */ u(
-        A,
-        {
-          id: r ?? g,
-          checked: m,
-          ref: x,
-          name: f,
-          disabled: n,
-          "aria-labelledby": e,
-          title: b,
-          className: T(
-            te({
-              className: a,
-              variant: k,
-              checked: m
-            })
-          ),
-          onCheckedChange: c,
-          ...p,
-          children: /* @__PURE__ */ u(D, { children: /* @__PURE__ */ u(I, { className: "w-4 h-4 stroke-2 civo:text-slate-700" }) })
-        }
-      ),
-      t ? /* @__PURE__ */ u(
-        "label",
-        {
-          htmlFor: f ?? r,
-          className: T(
-            re({
-              className: l
-            })
-          ),
-          children: t
-        }
-      ) : null
-    ] });
-  }
-);
-de.displayName = "KonstructCheckbox";
+import { t as r } from "../../Checkbox-Cn0UWlk8.js";
 export {
-  de as Checkbox
+  r as Checkbox
 };

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

@@ -0,0 +1,40 @@
+import { CheckboxProps as CheckboxPropsPrimitive } from '@radix-ui/react-checkbox';
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { checkboxVariants } from './Checkbox.variants';
+/**
+ * Props for the Checkbox component.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox label="Accept terms" onChange={(checked) => setAccepted(checked)} />
+ * <Checkbox label="Remember me" defaultChecked />
+ * <Checkbox label="Disabled option" disabled />
+ * ```
+ */
+export interface Props extends Omit<CheckboxPropsPrimitive, 'onChange'>, Omit<VariantProps<typeof checkboxVariants>, 'checked'> {
+    /** ID of element that labels the checkbox for accessibility */
+    ariaLabelledBy?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Initial checked state */
+    defaultChecked?: boolean;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** HTML id attribute */
+    id?: string;
+    /** Label text displayed next to checkbox */
+    label?: string;
+    /** CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Form field name */
+    name?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Callback when checked state changes */
+    onChange?: (checked: boolean) => void;
+}
+/** @deprecated Use Props instead */
+export type CheckboxProps = Props;

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

@@ -0,0 +1,5 @@
+export declare const checkboxVariants: (props?: ({
+    variant?: "default" | null | undefined;
+    checked?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const labelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;