@konstructio/ui 0.1.2-alpha.101 → 0.1.2-alpha.104

package/README.md

@@ -28,39 +28,33 @@ npm install @konstructio/ui
 
 ---
 
-### Step 2: Install Tailwind CSS
+### Step 2: Install Tailwind CSS v4
 
-If you don't already have Tailwind CSS installed, follow the official installation guide from the [Tailwind CSS documentation](https://tailwindcss.com/docs/installation). Ensure that Tailwind is properly configured in your project.
+Tailwind CSS v4 is a peer dependency. If you don't already have it installed, follow the official [Tailwind CSS installation guide](https://tailwindcss.com/docs/installation).
 
 ---
 
-### Step 3: Import and Configure the Plugin
+### Step 3: Import the theme styles
 
-To use the components provided by `@konstructio/ui`, you need to import the plugin and add it to your Tailwind CSS configuration file.
+In your global CSS file, import Tailwind and the library theme, plus the brand theme you need:
 
-Modify your Tailwind configuration file (usually `tailwind.config.js` or `tailwind.config.ts`) as follows:
-
-```ts
-import { konstructPlugin } from '@konstructio/ui';
-
-const config: Config = {
-  plugins: [konstructPlugin],
-};
+```css
+@import 'tailwindcss';
+@import '@konstructio/ui/ui/theme.css';
+@import '@konstructio/ui/ui/utilities.css';
+@import '@konstructio/ui/ui/civo-theme.css'; /* or kubefirst-theme.css */
 ```
 
+Component styles are bundled with the components and injected automatically — no extra CSS import is needed.
+
 ---
 
-### Step 4: Include `@konstructio/ui` in Tailwind Content
+### Step 4: Include `@konstructio/ui` in Tailwind's source detection
 
-To ensure Tailwind parses the components from `@konstructio/ui`, add its path to the `content` array in your Tailwind configuration file:
+So Tailwind generates the utility classes used by the components, add the package to your global CSS with `@source` (the path is relative to your CSS file):
 
-```ts
-const config: Config = {
-  content: [
-    // Other content paths
-    './node_modules/@konstructio/ui/dist/**/*.{js,ts,jsx,tsx}',
-  ],
-};
+```css
+@source '../node_modules/@konstructio/ui/dist';
 ```
 
 ## Final Steps

package/dist/{AdditionalOptions-Cj29eeMF.js → AdditionalOptions-D0BAS2HG.js}

@@ -1,4 +1,4 @@
-import { t as i } from "./dist-DqKFpce5.js";
+import { t as i } from "./dist-xCbHbMLA.js";
 import { t as p } from "./utils-Cx-WzRZF.js";
 import { useSelectContext as s } from "./components/Select/contexts/select.hook.js";
 import { listGroupLabelVariants as m } from "./components/Select/components/List/List.variants.js";

package/dist/AlertDialogTrigger-BGo_acd5.js

@@ -0,0 +1,109 @@
+import { a as A } from "./dist-xCbHbMLA.js";
+import { t as d } from "./utils-Cx-WzRZF.js";
+import { i as m, r as _ } from "./dist-D-yS0HN8.js";
+import { a as C, c as P, i as R, l as u, n as v, o as S, r as T, s as O, t as w } from "./dist-C3YVLapk.js";
+import { Button as y } from "./components/Button/Button.js";
+import * as n from "react";
+import { forwardRef as h } from "react";
+import { jsx as i } from "react/jsx-runtime";
+var x = Object.defineProperty, c = (l, o) => x(l, "name", {
+  value: o,
+  configurable: !0
+}), [b, X] = m("AlertDialog", [u]), s = u(), E = /* @__PURE__ */ c((l) => {
+  const { __scopeAlertDialog: o, ...r } = l, e = s(o);
+  return /* @__PURE__ */ i(w, {
+    ...e,
+    ...r,
+    modal: !0
+  });
+}, "AlertDialog"), N = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, t = s(e);
+  return /* @__PURE__ */ i(P, {
+    ...t,
+    ...a,
+    ref: r
+  });
+}, "AlertDialogTrigger")), j = /* @__PURE__ */ c((l) => {
+  const { __scopeAlertDialog: o, ...r } = l, e = s(o);
+  return /* @__PURE__ */ i(S, {
+    ...e,
+    ...r
+  });
+}, "AlertDialogPortal"), F = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, t = s(e);
+  return /* @__PURE__ */ i(C, {
+    ...t,
+    ...a,
+    ref: r
+  });
+}, "AlertDialogOverlay")), [$, k] = b("AlertDialogContent"), B = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, children: a, ...t } = o, g = s(e), p = A(r, n.useRef(null)), f = n.useRef(null);
+  return /* @__PURE__ */ i($, {
+    scope: e,
+    cancelRef: f,
+    children: /* @__PURE__ */ i(T, {
+      role: "alertdialog",
+      ...g,
+      ...t,
+      ref: p,
+      onOpenAutoFocus: _(t.onOpenAutoFocus, (D) => {
+        D.preventDefault(), f.current?.focus({ preventScroll: !0 });
+      }),
+      onPointerDownOutside: (D) => D.preventDefault(),
+      onInteractOutside: (D) => D.preventDefault(),
+      children: a
+    })
+  });
+}, "AlertDialogContent")), H = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, t = s(e);
+  return /* @__PURE__ */ i(O, {
+    ...t,
+    ...a,
+    ref: r
+  });
+}, "AlertDialogTitle")), I = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, t = s(e);
+  return /* @__PURE__ */ i(R, {
+    ...t,
+    ...a,
+    ref: r
+  });
+}, "AlertDialogDescription")), L = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, t = s(e);
+  return /* @__PURE__ */ i(v, {
+    ...t,
+    ...a,
+    ref: r
+  });
+}, "AlertDialogAction")), M = "AlertDialogCancel", q = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, { cancelRef: t } = k(M, e), g = s(e), p = A(r, t);
+  return /* @__PURE__ */ i(v, {
+    ...g,
+    ...a,
+    ref: p
+  });
+}, "AlertDialogCancel")), Y = E, z = N, Z = j, oo = F, eo = B, ro = L, to = q, ao = H, lo = I, io = h(({ "data-theme": l, className: o, text: r, variant: e, onOpen: a, onClick: t }, g) => /* @__PURE__ */ i(z, {
+  asChild: !0,
+  children: /* @__PURE__ */ i(y, {
+    ref: g,
+    type: "button",
+    variant: e,
+    "data-theme": l,
+    className: d(o),
+    onClick: () => {
+      a(), t?.();
+    },
+    children: r
+  })
+}));
+export {
+  lo as a,
+  Y as c,
+  eo as i,
+  ao as l,
+  ro as n,
+  oo as o,
+  to as r,
+  Z as s,
+  io as t
+};

package/dist/{Breadcrumb-Bmv0vzgt.js → Breadcrumb-Cp3abB2w.js}

@@ -1,5 +1,5 @@
 import { o as b } from "./rolldown-runtime-Ck3dxwZt.js";
-import { t as y } from "./prop-types-CaJpPVsa.js";
+import { t as y } from "./prop-types-CfEYxTbR.js";
 import { t as u } from "./utils-Cx-WzRZF.js";
 import { breadcrumbVariants as O, breadcrumbWrapperVariants as j } from "./components/Breadcrumb/Breadcrumb.variants.js";
 import { BackButton as w } from "./components/Breadcrumb/components/BackButton/BackButton.js";

package/dist/Checkbox-B_ngk9Dj.js

@@ -0,0 +1,249 @@
+import { o as X } from "./rolldown-runtime-Ck3dxwZt.js";
+import { t as J } from "./prop-types-CfEYxTbR.js";
+import { a as U } from "./dist-xCbHbMLA.js";
+import { t as N } from "./dist-CCdbu9GU.js";
+import { t as O } from "./utils-Cx-WzRZF.js";
+import { i as Q, r as S, t as Y } from "./dist-D-yS0HN8.js";
+import { t as Z } from "./dist-BUocnzkM.js";
+import { useToggle as ee } from "./hooks/useToggle.js";
+import { t as te } from "./dist-pWlMx4Fi2.js";
+import { checkboxVariants as re, labelVariants as oe } from "./components/Checkbox/Checkbox.variants.js";
+import * as u from "react";
+import q, { forwardRef as A, useId as ne } from "react";
+import { Fragment as ce, jsx as f, jsxs as $ } from "react/jsx-runtime";
+var w = /* @__PURE__ */ X(J());
+function j() {
+  return j = Object.assign || function(e) {
+    for (var o = 1; o < arguments.length; o++) {
+      var n = arguments[o];
+      for (var t in n) Object.prototype.hasOwnProperty.call(n, t) && (e[t] = n[t]);
+    }
+    return e;
+  }, j.apply(this, arguments);
+}
+function ae(e, o) {
+  if (e == null) return {};
+  var n = se(e, o), t, r;
+  if (Object.getOwnPropertySymbols) {
+    var c = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < c.length; r++)
+      t = c[r], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
+  }
+  return n;
+}
+function se(e, o) {
+  if (e == null) return {};
+  var n = {}, t = Object.keys(e), r, c;
+  for (c = 0; c < t.length; c++)
+    r = t[c], !(o.indexOf(r) >= 0) && (n[r] = e[r]);
+  return n;
+}
+var B = A(function(e, o) {
+  var n = e.color, t = n === void 0 ? "currentColor" : n, r = e.size, c = r === void 0 ? 24 : r, a = ae(e, ["color", "size"]);
+  return /* @__PURE__ */ q.createElement("svg", j({
+    ref: o,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: c,
+    height: c,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, a), /* @__PURE__ */ q.createElement("polyline", { points: "20 6 9 17 4 12" }));
+});
+B.propTypes = {
+  color: w.default.string,
+  size: w.default.oneOfType([w.default.string, w.default.number])
+};
+B.displayName = "Check";
+var ie = Object.defineProperty, x = (e, o) => ie(e, "name", {
+  value: o,
+  configurable: !0
+}), T = "Checkbox", [ue, je] = Q(T), [le, z] = ue(T);
+function D(e) {
+  const { __scopeCheckbox: o, checked: n, children: t, defaultChecked: r, disabled: c, form: a, name: l, onCheckedChange: s, required: d, value: C = "on", internal_do_not_use_render: h } = e, [p, b] = Y({
+    prop: n,
+    defaultProp: r ?? !1,
+    onChange: s,
+    caller: T
+  }), [v, m] = u.useState(null), [y, R] = u.useState(null), _ = u.useRef(!1), [i, k] = u.useReducer((I) => I + 1, 0), P = v ? !!a || !!v.closest("form") : !0, E = {
+    checked: p,
+    disabled: c,
+    setChecked: b,
+    control: v,
+    setControl: m,
+    name: l,
+    form: a,
+    value: C,
+    hasConsumerStoppedPropagationRef: _,
+    userInteractionCount: i,
+    onUserInteraction: k,
+    required: d,
+    defaultChecked: g(r) ? !1 : r,
+    isFormControl: P,
+    bubbleInput: y,
+    setBubbleInput: R
+  };
+  return /* @__PURE__ */ f(le, {
+    scope: o,
+    ...E,
+    children: H(h) ? h(E) : t
+  });
+}
+x(D, "CheckboxProvider");
+var de = "CheckboxTrigger", fe = /* @__PURE__ */ u.forwardRef(/* @__PURE__ */ x(function({ __scopeCheckbox: o, onKeyDown: n, onClick: t, ...r }, c) {
+  const { control: a, value: l, disabled: s, checked: d, required: C, setControl: h, setChecked: p, hasConsumerStoppedPropagationRef: b, onUserInteraction: v, isFormControl: m, bubbleInput: y } = z(de, o), R = U(c, h), _ = u.useRef(d);
+  return u.useEffect(() => {
+    const i = a?.form;
+    if (i) {
+      const k = /* @__PURE__ */ x(() => p(_.current), "reset");
+      return i.addEventListener("reset", k), () => i.removeEventListener("reset", k);
+    }
+  }, [a, p]), /* @__PURE__ */ f(N.button, {
+    type: "button",
+    role: "checkbox",
+    "aria-checked": g(d) ? "mixed" : d,
+    "aria-required": C,
+    "data-state": F(d),
+    "data-disabled": s ? "" : void 0,
+    disabled: s,
+    value: l,
+    ...r,
+    ref: R,
+    onKeyDown: S(n, (i) => {
+      i.key === "Enter" && i.preventDefault();
+    }),
+    onClick: S(t, (i) => {
+      v(), p((k) => g(k) ? !0 : !k), y && m && (b.current = i.isPropagationStopped(), b.current || i.stopPropagation());
+    })
+  });
+}, "CheckboxTrigger")), pe = /* @__PURE__ */ u.forwardRef(/* @__PURE__ */ x(function(o, n) {
+  const { __scopeCheckbox: t, name: r, checked: c, defaultChecked: a, required: l, disabled: s, value: d, onCheckedChange: C, form: h, ...p } = o;
+  return /* @__PURE__ */ f(D, {
+    __scopeCheckbox: t,
+    checked: c,
+    defaultChecked: a,
+    disabled: s,
+    required: l,
+    onCheckedChange: C,
+    name: r,
+    form: h,
+    value: d,
+    internal_do_not_use_render: ({ isFormControl: b }) => /* @__PURE__ */ $(ce, { children: [/* @__PURE__ */ f(fe, {
+      ...p,
+      ref: n,
+      __scopeCheckbox: t
+    }), b && /* @__PURE__ */ f(ke, { __scopeCheckbox: t })] })
+  });
+}, "Checkbox")), he = "CheckboxIndicator", be = /* @__PURE__ */ u.forwardRef(/* @__PURE__ */ x(function(o, n) {
+  const { __scopeCheckbox: t, forceMount: r, ...c } = o, a = z(he, t);
+  return /* @__PURE__ */ f(Z, {
+    present: r || g(a.checked) || a.checked === !0,
+    children: /* @__PURE__ */ f(N.span, {
+      "data-state": F(a.checked),
+      "data-disabled": a.disabled ? "" : void 0,
+      ...c,
+      ref: n,
+      style: {
+        pointerEvents: "none",
+        ...o.style
+      }
+    })
+  });
+}, "CheckboxIndicator")), me = "CheckboxBubbleInput", ke = /* @__PURE__ */ u.forwardRef(/* @__PURE__ */ x(function({ __scopeCheckbox: o, onClick: n, ...t }, r) {
+  const { control: c, hasConsumerStoppedPropagationRef: a, userInteractionCount: l, checked: s, defaultChecked: d, required: C, disabled: h, name: p, value: b, form: v, bubbleInput: m, setBubbleInput: y } = z(me, o), R = U(r, y), _ = te(c), i = u.useRef(!1), k = u.useRef(s), P = u.useRef(l);
+  u.useEffect(() => {
+    const I = m;
+    if (!I) return;
+    const K = window.HTMLInputElement.prototype, L = Object.getOwnPropertyDescriptor(K, "checked").set, M = l !== P.current;
+    P.current = l;
+    const W = k.current !== s;
+    k.current = s;
+    const G = !(M && a.current);
+    if (W && L) {
+      i.current = !M;
+      const V = new Event("click", { bubbles: G });
+      I.indeterminate = g(s), L.call(I, g(s) ? !1 : s), I.dispatchEvent(V), i.current = !1;
+    }
+  }, [
+    m,
+    s,
+    a,
+    l
+  ]);
+  const E = u.useRef(g(s) ? !1 : s);
+  return /* @__PURE__ */ f(N.input, {
+    type: "checkbox",
+    "aria-hidden": !0,
+    defaultChecked: d ?? E.current,
+    required: C,
+    disabled: h,
+    name: p,
+    value: b,
+    form: v,
+    ...t,
+    tabIndex: -1,
+    ref: R,
+    onClick: S(n, (I) => {
+      i.current && I.stopPropagation();
+    }),
+    style: {
+      ...t.style,
+      ..._,
+      position: "absolute",
+      pointerEvents: "none",
+      opacity: 0,
+      margin: 0,
+      transform: "translateX(-100%)"
+    }
+  });
+}, "CheckboxBubbleInput"));
+function H(e) {
+  return typeof e == "function";
+}
+x(H, "isFunction");
+function g(e) {
+  return e === "indeterminate";
+}
+x(g, "isIndeterminate");
+function F(e) {
+  return g(e) ? "indeterminate" : e ? "checked" : "unchecked";
+}
+x(F, "getState");
+var Ce = A(({ ariaLabelledBy: e, className: o, defaultChecked: n, disabled: t, id: r, label: c, labelClassName: a, labelWrapperClassName: l, name: s, theme: d, title: C, variant: h, onChange: p, ...b }, v) => {
+  const [m, y] = ee(n ?? !1), R = ne(), _ = (i) => {
+    y(i), p?.(i);
+  };
+  return /* @__PURE__ */ $("div", {
+    className: O("flex items-center gap-4", l),
+    "data-theme": d,
+    children: [/* @__PURE__ */ f(pe, {
+      id: r ?? R,
+      checked: m,
+      ref: v,
+      name: s,
+      disabled: t,
+      "aria-labelledby": e,
+      title: C,
+      className: O(re({
+        className: o,
+        variant: h,
+        checked: m
+      })),
+      onCheckedChange: _,
+      ...b,
+      children: /* @__PURE__ */ f(be, { children: /* @__PURE__ */ f(B, { className: "w-4 h-4 stroke-2" }) })
+    }), c ? /* @__PURE__ */ f("label", {
+      htmlFor: s ?? r,
+      className: O(oe({ className: a }), { "cursor-not-allowed": t }),
+      onClick: () => !t && _(!m),
+      children: c
+    }) : null]
+  });
+});
+Ce.displayName = "KonstructCheckbox";
+export {
+  Ce as t
+};