@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/ai-prompt-input.agent-0NHYLTWD.js

@@ -0,0 +1,476 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { forwardRef as Fe, useId as He, useRef as U, useCallback as v, useState as g, useLayoutEffect as Be, useImperativeHandle as $e } from "react";
+import { c as Oe } from "./index-D2ZczOXr.js";
+import { useTranslation as ae } from "react-i18next";
+import { _ as h } from "./index-4xgbg-sn.js";
+import { u as je } from "./index-CeY1nNvd.js";
+import { I as re } from "./icon-button-Wnnde5lc.js";
+import { S as De } from "./select-DY1Cb2Tg.js";
+import { S as _e } from "./send-CySZIRPJ.js";
+import { X as Ce } from "./x-CCcI3eJp.js";
+const Le = Oe(
+  [
+    "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:w-full",
+    "ds:rounded-[var(--radius-md)] ds:border ds:border-border ds:bg-background",
+    "ds:transition-[border-color] ds:duration-[var(--animation-duration)]",
+    "ds:focus-within:border-[color:var(--primary)]",
+    "ds:motion-reduce:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:text-[length:var(--font-size-sm)]",
+        md: "ds:text-[length:var(--font-size-base)]",
+        lg: "ds:text-[length:var(--font-size-lg)]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), Ue = Fe(
+  ({
+    commands: s = [],
+    models: d,
+    defaultModelId: E,
+    modelId: W,
+    onModelChange: F,
+    maxSize: b,
+    accept: ie,
+    context: H,
+    onContextDismiss: x,
+    onSubmit: y,
+    onAttach: I,
+    onAttachmentRejected: k,
+    minRows: B = 2,
+    maxRows: A = 8,
+    value: Q,
+    defaultValue: Z,
+    size: ne = "md",
+    disabled: q,
+    className: oe,
+    placeholder: de,
+    onChange: $,
+    onKeyDown: O,
+    onCompositionStart: j,
+    onCompositionEnd: D,
+    onPaste: _,
+    id: R,
+    ...le
+  }, ce) => {
+    var te;
+    const { t: o } = ae(), pe = He(), N = U(null), w = U(!1), ue = U(null), me = v(
+      (e) => {
+        N.current = e;
+      },
+      []
+    ), c = Q !== void 0, [fe, f] = g(
+      String(Z ?? "")
+    ), n = c ? String(Q) : fe, [u, S] = g([]), [z, P] = g(!1), [ve, V] = g(""), [ge, he] = g(
+      E ?? ((te = d == null ? void 0 : d[0]) == null ? void 0 : te.id) ?? ""
+    ), X = W !== void 0, C = X ? W : ge, Y = v(() => {
+      const e = N.current;
+      if (!e) return;
+      const t = window.getComputedStyle(e), i = parseFloat(t.lineHeight) || 24, r = parseFloat(t.paddingTop) || 0, p = parseFloat(t.paddingBottom) || 0, l = parseFloat(t.borderTopWidth) || 0, L = parseFloat(t.borderBottomWidth) || 0, T = r + p + l + L, Te = i * B + T, se = i * A + T;
+      e.style.height = "auto";
+      const Ee = Math.max(Te, Math.min(e.scrollHeight, se));
+      e.style.height = `${Ee}px`, e.style.overflowY = e.scrollHeight > se ? "auto" : "hidden";
+    }, [B, A]);
+    Be(() => {
+      Y();
+    }, [Y, n]);
+    const be = v(
+      (e, t) => {
+        const r = e.slice(0, t).lastIndexOf(`
+`) + 1, p = e.slice(r, t);
+        if (p.startsWith("/")) {
+          const l = p.slice(1);
+          if (!/\s/.test(l)) {
+            P(!0), V(l);
+            return;
+          }
+        }
+        P(!1), V("");
+      },
+      []
+    ), xe = (e) => {
+      if (c || f(e.target.value), w.current) return;
+      $ == null || $(e);
+      const t = e.target.selectionStart ?? e.target.value.length;
+      be(e.target.value, t);
+    }, ye = (e) => {
+      w.current = !0, j == null || j(e);
+    }, Ie = (e) => {
+      w.current = !1, D == null || D(e);
+    }, ke = (e) => e.nativeEvent.isComposing || e.keyCode === 229 || w.current, M = v(() => {
+      if (!n.trim() && u.length === 0) return;
+      let t, i = n;
+      const r = n.match(/^\/(\S+)\s?/);
+      r && (t = r[1], i = n.slice(r[0].length)), y == null || y({
+        text: i,
+        command: t,
+        attachments: u,
+        modelId: C || void 0
+      }), c || f(""), S([]);
+    }, [n, u, y, C, c]);
+    $e(
+      ce,
+      () => ({
+        getValue: () => n,
+        isEmpty: () => !n.trim() && u.length === 0,
+        isSubmitting: () => !1,
+        setValue: (e) => {
+          c || f(e);
+        },
+        clear: () => {
+          c || f(""), S([]);
+        },
+        submit: () => {
+          M();
+        },
+        focus: () => {
+          var e;
+          (e = N.current) == null || e.focus();
+        }
+      }),
+      [n, u, c, M]
+    );
+    const Ne = (e) => {
+      if (O == null || O(e), !e.defaultPrevented && !ke(e)) {
+        if (z && e.key === "Escape") {
+          e.preventDefault(), P(!1);
+          return;
+        }
+        e.key === "Enter" && (e.metaKey || e.ctrlKey) && (e.preventDefault(), M());
+      }
+    }, we = (e) => {
+      const t = N.current;
+      if (!t) return;
+      const i = t.selectionStart ?? n.length, p = n.slice(0, i).lastIndexOf(`
+`) + 1;
+      let l = i;
+      for (; l < n.length && !/\s/.test(n[l]); )
+        l += 1;
+      const L = n.slice(l), T = n.slice(0, p) + `/${e.id} ` + L;
+      c || f(T), P(!1), V(""), queueMicrotask(() => t.focus());
+    }, Se = (e) => {
+      if (_ == null || _(e), e.defaultPrevented) return;
+      const { clipboardData: t } = e;
+      if (!t) return;
+      const i = [];
+      for (let r = 0; r < t.items.length; r += 1) {
+        const p = t.items[r];
+        if (p.kind === "file") {
+          const l = p.getAsFile();
+          l && i.push(l);
+        }
+      }
+      i.length > 0 && (e.preventDefault(), G(i));
+    }, G = v(
+      (e) => {
+        var i;
+        const t = [];
+        for (const r of e) {
+          if (typeof b == "number" && r.size > b) {
+            k == null || k(
+              o("ui.chat.attachment.rejected", { reason: "size" })
+            );
+            continue;
+          }
+          t.push({ id: ((i = crypto.randomUUID) == null ? void 0 : i.call(crypto)) ?? `att-${Math.random()}`, file: r });
+        }
+        t.length > 0 && (S((r) => [...r, ...t]), I == null || I(t.map((r) => r.file)));
+      },
+      [b, I, k, o]
+    ), { getRootProps: ze, getInputProps: Pe, isDragActive: Ve } = je({
+      onDrop: G,
+      maxSize: b,
+      accept: ie,
+      noClick: !0,
+      noKeyboard: !0
+    }), Me = (e) => {
+      S((t) => t.filter((i) => i.id !== e));
+    }, K = R ?? pe, J = `${K}-label`, ee = `${K}-slash-list`, Ke = (d == null ? void 0 : d.map((e) => ({ value: e.id, label: e.label }))) ?? [];
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ...ze({
+          className: [
+            Le({ size: ne, className: oe }),
+            Ve ? "ds:outline ds:outline-dashed ds:outline-[color:var(--primary)] ds:outline-offset-2 ds:bg-[color:var(--primary)]/5" : ""
+          ].join(" ")
+        }),
+        "aria-label": o("ui.chat.attachmentZone"),
+        "data-component": "ai-prompt-input",
+        "data-component-id": R,
+        children: [
+          /* @__PURE__ */ a("input", { ...Pe() }),
+          H ? /* @__PURE__ */ a("div", { className: "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-xs)] ds:pt-[var(--spacing-xs)]", children: /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              "aria-label": o("ui.chat.contextActive", { name: H }),
+              onClick: x,
+              onKeyDown: (e) => {
+                (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), x == null || x());
+              },
+              className: [
+                "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]",
+                "ds:rounded-[var(--radius-full)] ds:border ds:border-[color:var(--accent)]/30",
+                "ds:bg-[color:var(--accent)]/10 ds:text-[color:var(--foreground)]",
+                "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]",
+                "ds:min-h-[var(--min-target-size)]",
+                "type-body-sm",
+                "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)]",
+                "ds:forced-colors:focus-visible:outline-[CanvasText]"
+              ].join(" "),
+              children: o("ui.chat.contextActive", { name: H })
+            }
+          ) }) : null,
+          /* @__PURE__ */ a("label", { id: J, htmlFor: K, className: "ds:sr-only", children: o("ui.chat.prompt") }),
+          /* @__PURE__ */ m("div", { className: "ds:relative", children: [
+            /* @__PURE__ */ a(
+              "textarea",
+              {
+                ref: me,
+                id: K,
+                rows: B,
+                value: c ? n : void 0,
+                defaultValue: c ? void 0 : Z,
+                disabled: q,
+                placeholder: de ?? o("ui.chat.input.placeholder"),
+                "aria-labelledby": J,
+                "aria-controls": z ? ee : void 0,
+                "aria-expanded": z,
+                onChange: xe,
+                onKeyDown: Ne,
+                onPaste: Se,
+                onCompositionStart: ye,
+                onCompositionEnd: Ie,
+                className: [
+                  "ds:w-full ds:resize-none ds:bg-transparent ds:outline-none",
+                  "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)]",
+                  "ds:placeholder:text-[color:var(--muted-foreground)]",
+                  "ds:leading-[var(--line-height-base)]",
+                  "ds:disabled:opacity-50 ds:disabled:cursor-not-allowed"
+                ].join(" "),
+                ...le
+              }
+            ),
+            z ? /* @__PURE__ */ a(
+              "div",
+              {
+                ref: ue,
+                className: [
+                  "ds:absolute ds:start-[var(--spacing-md)] ds:top-full ds:z-50",
+                  "ds:mt-[var(--spacing-xs)]",
+                  "ds:min-w-[240px] ds:rounded-[var(--radius-md)] ds:border ds:border-border",
+                  "ds:bg-[color:var(--popover)] ds:text-[color:var(--popover-foreground)]",
+                  "ds:shadow-[var(--shadow-md)]",
+                  // Match the Dialog / DropdownMenu open pattern: fade + scale
+                  // in from 95%. Origin set to the block-start so the menu
+                  // appears to expand from the textarea it sits beneath.
+                  "ds:origin-top ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:zoom-in-95",
+                  "ds:duration-[var(--animation-duration)] ds:ease-[var(--ease-out)]"
+                ].join(" "),
+                id: ee,
+                children: /* @__PURE__ */ m(h, { label: o("ui.chat.slashMenu.label"), loop: !0, children: [
+                  /* @__PURE__ */ a(
+                    h.Input,
+                    {
+                      value: ve,
+                      onValueChange: V,
+                      className: "ds:sr-only"
+                    }
+                  ),
+                  /* @__PURE__ */ m(h.List, { className: "ds:max-h-60 ds:overflow-y-auto ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]", children: [
+                    /* @__PURE__ */ a(h.Empty, { className: "type-body-sm ds:text-[color:var(--muted-foreground)] ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]", children: o("ui.chat.slashMenu.empty") }),
+                    s.map((e) => /* @__PURE__ */ m(
+                      h.Item,
+                      {
+                        value: e.id,
+                        onSelect: () => we(e),
+                        className: [
+                          "ds:flex ds:flex-col ds:gap-[2px]",
+                          "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+                          "ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]",
+                          "type-body-sm ds:cursor-pointer",
+                          "ds:aria-selected:bg-muted/20",
+                          "ds:data-[selected=true]:bg-muted/20"
+                        ].join(" "),
+                        children: [
+                          /* @__PURE__ */ m("span", { className: "ds:font-medium", children: [
+                            "/",
+                            e.id
+                          ] }),
+                          e.description ? /* @__PURE__ */ a("span", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: e.description }) : null
+                        ]
+                      },
+                      e.id
+                    ))
+                  ] })
+                ] })
+              }
+            ) : null
+          ] }),
+          u.length > 0 ? /* @__PURE__ */ a(
+            "div",
+            {
+              role: "group",
+              "aria-label": o("ui.chat.attachmentZone"),
+              className: "ds:flex ds:flex-wrap ds:gap-[var(--spacing-xs)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+              children: u.map((e) => /* @__PURE__ */ a(
+                Ae,
+                {
+                  file: e.file,
+                  onRemove: () => Me(e.id)
+                },
+                e.id
+              ))
+            }
+          ) : null,
+          /* @__PURE__ */ m("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]", children: [
+            d && d.length > 0 ? /* @__PURE__ */ a("div", { className: "ds:me-auto ds:min-w-[140px]", children: /* @__PURE__ */ a(
+              De,
+              {
+                "aria-label": o("ui.chat.model.select"),
+                options: Ke,
+                value: C || "",
+                onValueChange: (e) => {
+                  X || he(e), F == null || F(e);
+                },
+                size: "sm"
+              }
+            ) }) : /* @__PURE__ */ a("div", { className: "ds:me-auto" }),
+            /* @__PURE__ */ a("span", { className: "ds:sr-only", children: o("ui.chat.input.sendHint") }),
+            /* @__PURE__ */ a(
+              re,
+              {
+                icon: /* @__PURE__ */ a(_e, {}),
+                "aria-label": o("ui.chat.send"),
+                intent: "primary",
+                size: "sm",
+                disabled: q || !n.trim() && u.length === 0,
+                onClick: M,
+                "aria-keyshortcuts": "Meta+Enter Control+Enter"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Ue.displayName = "AIPromptInput";
+function We(s) {
+  return s < 1024 ? `${s} B` : s < 1024 * 1024 ? `${(s / 1024).toFixed(1)} KB` : `${(s / (1024 * 1024)).toFixed(1)} MB`;
+}
+function Ae({
+  file: s,
+  onRemove: d
+}) {
+  const { t: E } = ae();
+  return /* @__PURE__ */ m(
+    "span",
+    {
+      className: [
+        "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]",
+        "ds:rounded-[var(--radius-full)] ds:bg-muted/30",
+        "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-xs)]",
+        "ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]",
+        "type-meta",
+        // Entrance when a file is attached via drop / paste / picker.
+        "ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:slide-in-from-bottom-1",
+        "ds:duration-[var(--animation-duration)] ds:ease-[var(--ease-out)]"
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ a("span", { className: "ds:truncate ds:max-w-[16ch]", children: s.name }),
+        /* @__PURE__ */ a("span", { className: "ds:text-[color:var(--muted-foreground)] ds:tabular-nums", children: We(s.size) }),
+        /* @__PURE__ */ a(
+          re,
+          {
+            icon: /* @__PURE__ */ a(Ce, {}),
+            "aria-label": E("ui.chat.attachment.remove", { name: s.name }),
+            intent: "ghost",
+            size: "sm",
+            onClick: d
+          }
+        )
+      ]
+    }
+  );
+}
+const st = {
+  id: "ai-prompt-input",
+  capabilities: ["edit_inline", "submit"],
+  state: {
+    value: {
+      type: "string",
+      descriptionKey: "ui.agent.aiPromptInput.state.value",
+      description: "Current text in the composer (no PHI processing).",
+      read: (s) => s.getValue()
+    },
+    isEmpty: {
+      type: "boolean",
+      descriptionKey: "ui.agent.aiPromptInput.state.isEmpty",
+      description: "True when the composer has no text and no attachments.",
+      read: (s) => s.isEmpty()
+    },
+    isSubmitting: {
+      type: "boolean",
+      descriptionKey: "ui.agent.aiPromptInput.state.isSubmitting",
+      description: "True while an onSubmit invocation is in flight (best-effort).",
+      read: (s) => s.isSubmitting()
+    }
+  },
+  actions: {
+    set_value: {
+      safety: "write",
+      argsType: "{ value: string }",
+      descriptionKey: "ui.agent.aiPromptInput.actions.setValue",
+      description: "Replace the composer text with the given value.",
+      invoke: (s, d) => {
+        s.setValue(d.value);
+      }
+    },
+    clear: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.aiPromptInput.actions.clear",
+      description: "Clear text and attachments. Irreversible from the same UI.",
+      invoke: (s) => {
+        s.clear();
+      }
+    },
+    submit: {
+      safety: "write",
+      descriptionKey: "ui.agent.aiPromptInput.actions.submit",
+      description: "Submit the current composer state via onSubmit.",
+      invoke: (s) => {
+        s.submit();
+      }
+    },
+    focus: {
+      safety: "read",
+      descriptionKey: "ui.agent.aiPromptInput.actions.focus",
+      description: "Move keyboard focus into the textarea.",
+      invoke: (s) => {
+        s.focus();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "ai-prompt-input",
+      description: "Marks the AIPromptInput wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop; addresses a specific composer instance."
+    }
+  }
+};
+export {
+  Ue as A,
+  st as a
+};
+//# sourceMappingURL=ai-prompt-input.agent-0NHYLTWD.js.map

package/dist/_chunks/{aspect-ratio-CxsdG8vk.js → aspect-ratio-DeSNzASA.js}

@@ -1,8 +1,8 @@
-import { jsx as l } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
 import "@radix-ui/react-aspect-ratio";
 import { c as m } from "./index-D2ZczOXr.js";
-const v = m(
+const u = m(
   [
     "ds:relative ds:inline-size-full ds:overflow-hidden",
     "ds:[&>*]:absolute ds:[&>*]:inset-0 ds:[&>*]:inline-size-full ds:[&>*]:block-size-full",
@@ -30,28 +30,28 @@ const v = m(
       fit: "cover"
     }
   }
-), b = f(
-  ({ ratio: t, fit: a, objectPosition: s, className: i, style: o, children: c, ...r }, d) => {
-    const e = typeof t == "number", n = e ? void 0 : t, p = e || s || o ? {
+), v = f(
+  ({ ratio: t, fit: a, objectPosition: s, className: i, style: o, children: c, ...r }, n) => {
+    const e = typeof t == "number", d = e ? null : t, l = e || s || o ? {
       ...o,
       ...e ? { aspectRatio: t } : {},
       ...s ? { "--ar-object-position": s } : {}
     } : void 0;
-    return /* @__PURE__ */ l(
+    return /* @__PURE__ */ p(
       "div",
       {
-        ref: d,
+        ref: n,
         "data-component": "aspect-ratio",
-        className: v({ ratio: n, fit: a, className: i }),
-        style: p,
+        className: u({ ratio: d, fit: a, className: i }),
+        style: l,
         ...r,
         children: c
       }
     );
   }
 );
-b.displayName = "AspectRatio";
+v.displayName = "AspectRatio";
 export {
-  b as A
+  v as A
 };
-//# sourceMappingURL=aspect-ratio-CxsdG8vk.js.map
+//# sourceMappingURL=aspect-ratio-DeSNzASA.js.map