@handled-ai/design-system 0.18.22 → 0.18.24

package/dist/components/case-panel-email-composer.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+type CasePanelEmailComposerRowState = "default" | "confirmed" | "unconfirmed";
+interface CasePanelEmailComposerRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: React.ReactNode;
+    children?: React.ReactNode;
+    value?: React.ReactNode;
+    placeholder?: React.ReactNode;
+    actions?: React.ReactNode;
+    state?: CasePanelEmailComposerRowState;
+}
+declare function CasePanelEmailComposerRow({ label, children, value, placeholder, actions, state, className, ...props }: CasePanelEmailComposerRowProps): React.JSX.Element;
+interface CasePanelEmailComposerChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+}
+declare function CasePanelEmailComposerChip({ children, className, type, ...props }: CasePanelEmailComposerChipProps): React.JSX.Element;
+interface CasePanelEmailComposerSignatureRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    label?: React.ReactNode;
+    checked?: boolean;
+    disabled?: boolean;
+}
+declare function CasePanelEmailComposerSignatureRow({ children, label, checked, disabled, className, ...props }: CasePanelEmailComposerSignatureRowProps): React.JSX.Element;
+interface CasePanelEmailComposerSlotHelpers {
+    Row: typeof CasePanelEmailComposerRow;
+    Chip: typeof CasePanelEmailComposerChip;
+    SignatureRow: typeof CasePanelEmailComposerSignatureRow;
+}
+interface CasePanelEmailComposerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onKeyDown" | "title"> {
+    title?: React.ReactNode;
+    providerLabel?: React.ReactNode;
+    recipientRows?: React.ReactNode | ((helpers: CasePanelEmailComposerSlotHelpers) => React.ReactNode);
+    from?: React.ReactNode;
+    to?: React.ReactNode;
+    cc?: React.ReactNode;
+    bcc?: React.ReactNode;
+    subject?: React.ReactNode;
+    toState?: CasePanelEmailComposerRowState;
+    draftEditor?: React.ReactNode;
+    toolbar?: React.ReactNode;
+    sendBarActions?: React.ReactNode;
+    signatureControl?: React.ReactNode;
+    disabledReason?: React.ReactNode;
+    disabled?: boolean;
+    sendDisabled?: boolean;
+    sendLabel?: React.ReactNode;
+    onSendIntent?: () => void;
+    onContactsIntent?: () => void;
+    onAccountDetailsIntent?: () => void;
+    onAddCcIntent?: () => void;
+    onAddBccIntent?: () => void;
+    contactsLabel?: React.ReactNode;
+    accountDetailsLabel?: React.ReactNode;
+    addCcLabel?: React.ReactNode;
+    addBccLabel?: React.ReactNode;
+    showRecipientActionChips?: boolean;
+    onComposerKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+}
+declare function CasePanelEmailComposer({ title, providerLabel, recipientRows, from, to, cc, bcc, subject, toState, draftEditor, toolbar, sendBarActions, signatureControl, disabledReason, disabled, sendDisabled, sendLabel, onSendIntent, onContactsIntent, onAccountDetailsIntent, onAddCcIntent, onAddBccIntent, contactsLabel, accountDetailsLabel, addCcLabel, addBccLabel, showRecipientActionChips, onComposerKeyDown, className, ...props }: CasePanelEmailComposerProps): React.JSX.Element;
+
+export { CasePanelEmailComposer, CasePanelEmailComposerChip, type CasePanelEmailComposerChipProps, type CasePanelEmailComposerProps, CasePanelEmailComposerRow, type CasePanelEmailComposerRowProps, type CasePanelEmailComposerRowState, CasePanelEmailComposerSignatureRow, type CasePanelEmailComposerSignatureRowProps, type CasePanelEmailComposerSlotHelpers };

package/dist/components/case-panel-email-composer.js

@@ -0,0 +1,304 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+import { BRAND_ICONS } from "../lib/icons.js";
+function CasePanelEmailComposerRow(_a) {
+  var _b = _a, {
+    label,
+    children,
+    value,
+    placeholder,
+    actions,
+    state = "default",
+    className
+  } = _b, props = __objRest(_b, [
+    "label",
+    "children",
+    "value",
+    "placeholder",
+    "actions",
+    "state",
+    "className"
+  ]);
+  var _a2;
+  const content = (_a2 = children != null ? children : value) != null ? _a2 : placeholder;
+  const rowClassName = state === "unconfirmed" ? "flex min-h-11 items-stretch border-b border-amber-200/80 bg-amber-50/75 text-sm dark:border-amber-900/50 dark:bg-amber-950/20" : "flex min-h-11 items-stretch border-b border-border/70 bg-background text-sm";
+  const labelClassName = state === "unconfirmed" ? "flex w-[60px] shrink-0 items-center border-r border-amber-200/80 px-3 text-[11px] font-semibold uppercase tracking-wide text-amber-700 dark:border-amber-900/50 dark:text-amber-300" : "flex w-[60px] shrink-0 items-center border-r border-border/70 px-3 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground";
+  const contentClassName = state === "unconfirmed" ? "flex min-w-0 flex-1 items-center gap-2 px-3 py-2 text-amber-950 dark:text-amber-100" : "flex min-w-0 flex-1 items-center gap-2 px-3 py-2 text-foreground";
+  const placeholderClassName = state === "unconfirmed" ? "min-w-0 truncate text-amber-700/80 dark:text-amber-200/80" : "min-w-0 truncate text-muted-foreground";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "case-panel-email-composer-row",
+      "data-state": state,
+      className: cn(rowClassName, className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-slot": "case-panel-email-composer-row-label", className: labelClassName, children: label }),
+        /* @__PURE__ */ jsxs("div", { "data-slot": "case-panel-email-composer-row-content", className: contentClassName, children: [
+          content ? /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 truncate", children: content }) : /* @__PURE__ */ jsxs("div", { className: placeholderClassName, children: [
+            "Add ",
+            label
+          ] }),
+          actions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: actions }) : null
+        ] })
+      ]
+    })
+  );
+}
+function CasePanelEmailComposerChip(_c) {
+  var _d = _c, {
+    children,
+    className,
+    type = "button"
+  } = _d, props = __objRest(_d, [
+    "children",
+    "className",
+    "type"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      "data-slot": "case-panel-email-composer-chip",
+      type,
+      className: cn(
+        "inline-flex h-6 items-center justify-center rounded-full border border-border bg-background px-2.5 text-[11px] font-medium text-muted-foreground shadow-xs transition-colors hover:bg-muted/60 hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
+        className
+      )
+    }, props), {
+      children
+    })
+  );
+}
+function CasePanelEmailComposerSignatureRow(_e) {
+  var _f = _e, {
+    children,
+    label = "Include signature",
+    checked = true,
+    disabled,
+    className
+  } = _f, props = __objRest(_f, [
+    "children",
+    "label",
+    "checked",
+    "disabled",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "case-panel-email-composer-signature-row",
+      className: cn(
+        "flex items-center justify-between border-t border-border/70 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground",
+        className
+      )
+    }, props), {
+      children: children != null ? children : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-checked": checked ? "true" : "false",
+            className: checked ? "flex size-4 items-center justify-center rounded border border-foreground bg-foreground text-[10px] leading-none text-background" : "flex size-4 items-center justify-center rounded border border-border bg-background text-[10px] leading-none text-background",
+            children: checked ? "\u2713" : ""
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: disabled ? "text-muted-foreground/60" : "text-muted-foreground", children: label })
+      ] })
+    })
+  );
+}
+const slotHelpers = {
+  Row: CasePanelEmailComposerRow,
+  Chip: CasePanelEmailComposerChip,
+  SignatureRow: CasePanelEmailComposerSignatureRow
+};
+function CasePanelEmailComposer(_g) {
+  var _h = _g, {
+    title = "Draft",
+    providerLabel = "Gmail",
+    recipientRows,
+    from,
+    to,
+    cc,
+    bcc,
+    subject,
+    toState = "default",
+    draftEditor,
+    toolbar,
+    sendBarActions,
+    signatureControl,
+    disabledReason,
+    disabled = false,
+    sendDisabled = false,
+    sendLabel = "Send",
+    onSendIntent,
+    onContactsIntent,
+    onAccountDetailsIntent,
+    onAddCcIntent,
+    onAddBccIntent,
+    contactsLabel = "Contacts",
+    accountDetailsLabel = "Account details",
+    addCcLabel = "Add Cc",
+    addBccLabel = "Add Bcc",
+    showRecipientActionChips = true,
+    onComposerKeyDown,
+    className
+  } = _h, props = __objRest(_h, [
+    "title",
+    "providerLabel",
+    "recipientRows",
+    "from",
+    "to",
+    "cc",
+    "bcc",
+    "subject",
+    "toState",
+    "draftEditor",
+    "toolbar",
+    "sendBarActions",
+    "signatureControl",
+    "disabledReason",
+    "disabled",
+    "sendDisabled",
+    "sendLabel",
+    "onSendIntent",
+    "onContactsIntent",
+    "onAccountDetailsIntent",
+    "onAddCcIntent",
+    "onAddBccIntent",
+    "contactsLabel",
+    "accountDetailsLabel",
+    "addCcLabel",
+    "addBccLabel",
+    "showRecipientActionChips",
+    "onComposerKeyDown",
+    "className"
+  ]);
+  const disabledReasonId = React.useId();
+  const sendIsDisabled = disabled || sendDisabled || Boolean(disabledReason);
+  const handleSendIntent = React.useCallback(() => {
+    if (sendIsDisabled) return;
+    onSendIntent == null ? void 0 : onSendIntent();
+  }, [onSendIntent, sendIsDisabled]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      onComposerKeyDown == null ? void 0 : onComposerKeyDown(event);
+      if (event.defaultPrevented) return;
+      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        handleSendIntent();
+      }
+    },
+    [handleSendIntent, onComposerKeyDown]
+  );
+  const renderedRecipientRows = typeof recipientRows === "function" ? recipientRows(slotHelpers) : recipientRows != null ? recipientRows : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CasePanelEmailComposerRow, { label: "From", value: from, placeholder: "Sender" }),
+    /* @__PURE__ */ jsx(CasePanelEmailComposerRow, { label: "To", value: to, placeholder: "Recipient", state: toState }),
+    cc ? /* @__PURE__ */ jsx(CasePanelEmailComposerRow, { label: "Cc", value: cc }) : null,
+    bcc ? /* @__PURE__ */ jsx(CasePanelEmailComposerRow, { label: "Bcc", value: bcc }) : null,
+    /* @__PURE__ */ jsx(CasePanelEmailComposerRow, { label: "Subject", value: subject, placeholder: "Subject" })
+  ] });
+  const showActionChips = showRecipientActionChips && (onContactsIntent || onAccountDetailsIntent || onAddCcIntent || onAddBccIntent);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "case-panel-email-composer",
+      "aria-disabled": disabled ? "true" : void 0,
+      className: cn(
+        "overflow-hidden rounded-xl border border-border bg-background shadow-sm",
+        className
+      ),
+      onKeyDown: handleKeyDown
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxs("div", { "data-slot": "case-panel-email-composer-header", className: "flex items-center justify-between border-b border-border/70 bg-muted/20 px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: BRAND_ICONS.gmail.icon,
+                alt: "Gmail",
+                className: "size-4 shrink-0 object-contain",
+                draggable: false
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 truncate text-sm font-semibold text-foreground", children: title })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "shrink-0 text-[11px] font-medium text-muted-foreground", children: providerLabel })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { "data-slot": "case-panel-email-composer-card", className: "bg-background", children: [
+          /* @__PURE__ */ jsx("div", { "data-slot": "case-panel-email-composer-recipient-rows", children: renderedRecipientRows }),
+          showActionChips ? /* @__PURE__ */ jsxs("div", { "data-slot": "case-panel-email-composer-chip-row", className: "flex flex-wrap items-center gap-1.5 border-b border-border/70 bg-muted/10 px-3 py-2", children: [
+            onContactsIntent ? /* @__PURE__ */ jsx(CasePanelEmailComposerChip, { onClick: onContactsIntent, disabled, children: contactsLabel }) : null,
+            onAccountDetailsIntent ? /* @__PURE__ */ jsx(CasePanelEmailComposerChip, { onClick: onAccountDetailsIntent, disabled, children: accountDetailsLabel }) : null,
+            onAddCcIntent ? /* @__PURE__ */ jsx(CasePanelEmailComposerChip, { onClick: onAddCcIntent, disabled, children: addCcLabel }) : null,
+            onAddBccIntent ? /* @__PURE__ */ jsx(CasePanelEmailComposerChip, { onClick: onAddBccIntent, disabled, children: addBccLabel }) : null
+          ] }) : null,
+          /* @__PURE__ */ jsx("div", { "data-slot": "case-panel-email-composer-editor", className: "min-h-40 px-4 py-4 text-sm text-foreground", children: draftEditor != null ? draftEditor : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: "Draft editor slot" }) }),
+          signatureControl ? /* @__PURE__ */ jsx("div", { "data-slot": "case-panel-email-composer-signature-control", children: signatureControl }) : /* @__PURE__ */ jsx(CasePanelEmailComposerSignatureRow, { disabled }),
+          /* @__PURE__ */ jsx("div", { "data-slot": "case-panel-email-composer-toolbar", className: "flex min-h-11 items-center gap-2 border-t border-border/70 bg-muted/10 px-3 py-2", children: toolbar != null ? toolbar : /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: "Toolbar" }) }),
+          /* @__PURE__ */ jsxs("div", { "data-slot": "case-panel-email-composer-send-bar", className: "flex items-center justify-between gap-3 border-t border-border/70 bg-background px-3 py-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: disabledReason ? /* @__PURE__ */ jsx("div", { id: disabledReasonId, "data-slot": "case-panel-email-composer-disabled-reason", className: "truncate text-xs text-muted-foreground", children: disabledReason }) : null }),
+            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+              sendBarActions,
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-slot": "case-panel-email-composer-send-button",
+                  "aria-describedby": disabledReason ? disabledReasonId : void 0,
+                  disabled: sendIsDisabled,
+                  onClick: handleSendIntent,
+                  className: "inline-flex h-8 items-center justify-center rounded-md bg-foreground px-3 text-xs font-semibold text-background shadow-xs transition-colors hover:bg-foreground/90 disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground",
+                  children: sendLabel
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    })
+  );
+}
+export {
+  CasePanelEmailComposer,
+  CasePanelEmailComposerChip,
+  CasePanelEmailComposerRow,
+  CasePanelEmailComposerSignatureRow
+};
+//# sourceMappingURL=case-panel-email-composer.js.map

package/dist/components/case-panel-email-composer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/case-panel-email-composer.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\nimport { BRAND_ICONS } from \"../lib/icons\"\n\nexport type CasePanelEmailComposerRowState = \"default\" | \"confirmed\" | \"unconfirmed\"\n\nexport interface CasePanelEmailComposerRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: React.ReactNode\n  children?: React.ReactNode\n  value?: React.ReactNode\n  placeholder?: React.ReactNode\n  actions?: React.ReactNode\n  state?: CasePanelEmailComposerRowState\n}\n\nexport function CasePanelEmailComposerRow({\n  label,\n  children,\n  value,\n  placeholder,\n  actions,\n  state = \"default\",\n  className,\n  ...props\n}: CasePanelEmailComposerRowProps) {\n  const content = children ?? value ?? placeholder\n  const rowClassName =\n    state === \"unconfirmed\"\n      ? \"flex min-h-11 items-stretch border-b border-amber-200/80 bg-amber-50/75 text-sm dark:border-amber-900/50 dark:bg-amber-950/20\"\n      : \"flex min-h-11 items-stretch border-b border-border/70 bg-background text-sm\"\n  const labelClassName =\n    state === \"unconfirmed\"\n      ? \"flex w-[60px] shrink-0 items-center border-r border-amber-200/80 px-3 text-[11px] font-semibold uppercase tracking-wide text-amber-700 dark:border-amber-900/50 dark:text-amber-300\"\n      : \"flex w-[60px] shrink-0 items-center border-r border-border/70 px-3 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\"\n  const contentClassName =\n    state === \"unconfirmed\"\n      ? \"flex min-w-0 flex-1 items-center gap-2 px-3 py-2 text-amber-950 dark:text-amber-100\"\n      : \"flex min-w-0 flex-1 items-center gap-2 px-3 py-2 text-foreground\"\n  const placeholderClassName =\n    state === \"unconfirmed\"\n      ? \"min-w-0 truncate text-amber-700/80 dark:text-amber-200/80\"\n      : \"min-w-0 truncate text-muted-foreground\"\n\n  return (\n    <div\n      data-slot=\"case-panel-email-composer-row\"\n      data-state={state}\n      className={cn(rowClassName, className)}\n      {...props}\n    >\n      <div data-slot=\"case-panel-email-composer-row-label\" className={labelClassName}>\n        {label}\n      </div>\n      <div data-slot=\"case-panel-email-composer-row-content\" className={contentClassName}>\n        {content ? (\n          <div className=\"min-w-0 flex-1 truncate\">{content}</div>\n        ) : (\n          <div className={placeholderClassName}>Add {label}</div>\n        )}\n        {actions ? <div className=\"flex shrink-0 items-center gap-1.5\">{actions}</div> : null}\n      </div>\n    </div>\n  )\n}\n\nexport interface CasePanelEmailComposerChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode\n}\n\nexport function CasePanelEmailComposerChip({\n  children,\n  className,\n  type = \"button\",\n  ...props\n}: CasePanelEmailComposerChipProps) {\n  return (\n    <button\n      data-slot=\"case-panel-email-composer-chip\"\n      type={type}\n      className={cn(\n        \"inline-flex h-6 items-center justify-center rounded-full border border-border bg-background px-2.5 text-[11px] font-medium text-muted-foreground shadow-xs transition-colors hover:bg-muted/60 hover:text-foreground disabled:pointer-events-none disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport interface CasePanelEmailComposerSignatureRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode\n  label?: React.ReactNode\n  checked?: boolean\n  disabled?: boolean\n}\n\nexport function CasePanelEmailComposerSignatureRow({\n  children,\n  label = \"Include signature\",\n  checked = true,\n  disabled,\n  className,\n  ...props\n}: CasePanelEmailComposerSignatureRowProps) {\n  return (\n    <div\n      data-slot=\"case-panel-email-composer-signature-row\"\n      className={cn(\n        \"flex items-center justify-between border-t border-border/70 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {children ?? (\n        <div className=\"flex items-center gap-2\">\n          <span\n            aria-hidden=\"true\"\n            data-checked={checked ? \"true\" : \"false\"}\n            className={\n              checked\n                ? \"flex size-4 items-center justify-center rounded border border-foreground bg-foreground text-[10px] leading-none text-background\"\n                : \"flex size-4 items-center justify-center rounded border border-border bg-background text-[10px] leading-none text-background\"\n            }\n          >\n            {checked ? \"✓\" : \"\"}\n          </span>\n          <span className={disabled ? \"text-muted-foreground/60\" : \"text-muted-foreground\"}>{label}</span>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport interface CasePanelEmailComposerSlotHelpers {\n  Row: typeof CasePanelEmailComposerRow\n  Chip: typeof CasePanelEmailComposerChip\n  SignatureRow: typeof CasePanelEmailComposerSignatureRow\n}\n\nexport interface CasePanelEmailComposerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onKeyDown\" | \"title\"> {\n  title?: React.ReactNode\n  providerLabel?: React.ReactNode\n  recipientRows?: React.ReactNode | ((helpers: CasePanelEmailComposerSlotHelpers) => React.ReactNode)\n  from?: React.ReactNode\n  to?: React.ReactNode\n  cc?: React.ReactNode\n  bcc?: React.ReactNode\n  subject?: React.ReactNode\n  toState?: CasePanelEmailComposerRowState\n  draftEditor?: React.ReactNode\n  toolbar?: React.ReactNode\n  sendBarActions?: React.ReactNode\n  signatureControl?: React.ReactNode\n  disabledReason?: React.ReactNode\n  disabled?: boolean\n  sendDisabled?: boolean\n  sendLabel?: React.ReactNode\n  onSendIntent?: () => void\n  onContactsIntent?: () => void\n  onAccountDetailsIntent?: () => void\n  onAddCcIntent?: () => void\n  onAddBccIntent?: () => void\n  contactsLabel?: React.ReactNode\n  accountDetailsLabel?: React.ReactNode\n  addCcLabel?: React.ReactNode\n  addBccLabel?: React.ReactNode\n  showRecipientActionChips?: boolean\n  onComposerKeyDown?: React.KeyboardEventHandler<HTMLDivElement>\n}\n\nconst slotHelpers: CasePanelEmailComposerSlotHelpers = {\n  Row: CasePanelEmailComposerRow,\n  Chip: CasePanelEmailComposerChip,\n  SignatureRow: CasePanelEmailComposerSignatureRow,\n}\n\nexport function CasePanelEmailComposer({\n  title = \"Draft\",\n  providerLabel = \"Gmail\",\n  recipientRows,\n  from,\n  to,\n  cc,\n  bcc,\n  subject,\n  toState = \"default\",\n  draftEditor,\n  toolbar,\n  sendBarActions,\n  signatureControl,\n  disabledReason,\n  disabled = false,\n  sendDisabled = false,\n  sendLabel = \"Send\",\n  onSendIntent,\n  onContactsIntent,\n  onAccountDetailsIntent,\n  onAddCcIntent,\n  onAddBccIntent,\n  contactsLabel = \"Contacts\",\n  accountDetailsLabel = \"Account details\",\n  addCcLabel = \"Add Cc\",\n  addBccLabel = \"Add Bcc\",\n  showRecipientActionChips = true,\n  onComposerKeyDown,\n  className,\n  ...props\n}: CasePanelEmailComposerProps) {\n  const disabledReasonId = React.useId()\n  const sendIsDisabled = disabled || sendDisabled || Boolean(disabledReason)\n\n  const handleSendIntent = React.useCallback(() => {\n    if (sendIsDisabled) return\n    onSendIntent?.()\n  }, [onSendIntent, sendIsDisabled])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      onComposerKeyDown?.(event)\n      if (event.defaultPrevented) return\n      if (event.key === \"Enter\" && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault()\n        handleSendIntent()\n      }\n    },\n    [handleSendIntent, onComposerKeyDown],\n  )\n\n  const renderedRecipientRows =\n    typeof recipientRows === \"function\"\n      ? recipientRows(slotHelpers)\n      : recipientRows ?? (\n          <>\n            <CasePanelEmailComposerRow label=\"From\" value={from} placeholder=\"Sender\" />\n            <CasePanelEmailComposerRow label=\"To\" value={to} placeholder=\"Recipient\" state={toState} />\n            {cc ? <CasePanelEmailComposerRow label=\"Cc\" value={cc} /> : null}\n            {bcc ? <CasePanelEmailComposerRow label=\"Bcc\" value={bcc} /> : null}\n            <CasePanelEmailComposerRow label=\"Subject\" value={subject} placeholder=\"Subject\" />\n          </>\n        )\n\n  const showActionChips =\n    showRecipientActionChips &&\n    (onContactsIntent || onAccountDetailsIntent || onAddCcIntent || onAddBccIntent)\n\n  return (\n    <div\n      data-slot=\"case-panel-email-composer\"\n      aria-disabled={disabled ? \"true\" : undefined}\n      className={cn(\n        \"overflow-hidden rounded-xl border border-border bg-background shadow-sm\",\n        className,\n      )}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      <div data-slot=\"case-panel-email-composer-header\" className=\"flex items-center justify-between border-b border-border/70 bg-muted/20 px-4 py-3\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <img\n            src={BRAND_ICONS.gmail.icon}\n            alt=\"Gmail\"\n            className=\"size-4 shrink-0 object-contain\"\n            draggable={false}\n          />\n          <div className=\"min-w-0 truncate text-sm font-semibold text-foreground\">{title}</div>\n        </div>\n        <div className=\"shrink-0 text-[11px] font-medium text-muted-foreground\">{providerLabel}</div>\n      </div>\n\n      <div data-slot=\"case-panel-email-composer-card\" className=\"bg-background\">\n        <div data-slot=\"case-panel-email-composer-recipient-rows\">{renderedRecipientRows}</div>\n\n        {showActionChips ? (\n          <div data-slot=\"case-panel-email-composer-chip-row\" className=\"flex flex-wrap items-center gap-1.5 border-b border-border/70 bg-muted/10 px-3 py-2\">\n            {onContactsIntent ? (\n              <CasePanelEmailComposerChip onClick={onContactsIntent} disabled={disabled}>\n                {contactsLabel}\n              </CasePanelEmailComposerChip>\n            ) : null}\n            {onAccountDetailsIntent ? (\n              <CasePanelEmailComposerChip onClick={onAccountDetailsIntent} disabled={disabled}>\n                {accountDetailsLabel}\n              </CasePanelEmailComposerChip>\n            ) : null}\n            {onAddCcIntent ? (\n              <CasePanelEmailComposerChip onClick={onAddCcIntent} disabled={disabled}>\n                {addCcLabel}\n              </CasePanelEmailComposerChip>\n            ) : null}\n            {onAddBccIntent ? (\n              <CasePanelEmailComposerChip onClick={onAddBccIntent} disabled={disabled}>\n                {addBccLabel}\n              </CasePanelEmailComposerChip>\n            ) : null}\n          </div>\n        ) : null}\n\n        <div data-slot=\"case-panel-email-composer-editor\" className=\"min-h-40 px-4 py-4 text-sm text-foreground\">\n          {draftEditor ?? <div className=\"text-muted-foreground\">Draft editor slot</div>}\n        </div>\n\n        {signatureControl ? (\n          <div data-slot=\"case-panel-email-composer-signature-control\">{signatureControl}</div>\n        ) : (\n          <CasePanelEmailComposerSignatureRow disabled={disabled} />\n        )}\n\n        <div data-slot=\"case-panel-email-composer-toolbar\" className=\"flex min-h-11 items-center gap-2 border-t border-border/70 bg-muted/10 px-3 py-2\">\n          {toolbar ?? <div className=\"text-xs font-medium text-muted-foreground\">Toolbar</div>}\n        </div>\n\n        <div data-slot=\"case-panel-email-composer-send-bar\" className=\"flex items-center justify-between gap-3 border-t border-border/70 bg-background px-3 py-3\">\n          <div className=\"min-w-0 flex-1\">\n            {disabledReason ? (\n              <div id={disabledReasonId} data-slot=\"case-panel-email-composer-disabled-reason\" className=\"truncate text-xs text-muted-foreground\">\n                {disabledReason}\n              </div>\n            ) : null}\n          </div>\n          <div className=\"flex shrink-0 items-center gap-2\">\n            {sendBarActions}\n            <button\n              type=\"button\"\n              data-slot=\"case-panel-email-composer-send-button\"\n              aria-describedby={disabledReason ? disabledReasonId : undefined}\n              disabled={sendIsDisabled}\n              onClick={handleSendIntent}\n              className=\"inline-flex h-8 items-center justify-center rounded-md bg-foreground px-3 text-xs font-semibold text-background shadow-xs transition-colors hover:bg-foreground/90 disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground\"\n            >\n              {sendLabel}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":["_a"]}

package/dist/components/case-panel-why.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+type CasePanelWhyTone = "neutral" | "alert" | "warn" | "info" | "success";
+interface CasePanelWhyRow {
+    id: string;
+    label: React.ReactNode;
+    value?: React.ReactNode;
+    meta?: React.ReactNode;
+    description?: React.ReactNode;
+}
+interface CasePanelWhyItem {
+    id: string;
+    label: React.ReactNode;
+    /** Count rendered in the summary pill as ×N when provided. */
+    count?: number;
+    summary?: React.ReactNode;
+    details?: React.ReactNode;
+    rows?: CasePanelWhyRow[];
+    icon?: React.ReactNode;
+    tone?: CasePanelWhyTone;
+}
+interface CasePanelWhyProps {
+    items: CasePanelWhyItem[];
+    label?: React.ReactNode;
+    defaultExpandedId?: string | null;
+    onExpandedChange?: (itemId: string | null) => void;
+    className?: string;
+}
+declare function CasePanelWhy({ items, label, defaultExpandedId, onExpandedChange, className, }: CasePanelWhyProps): React.JSX.Element | null;
+interface CasePanelSignalApprovalActionsProps {
+    className?: string;
+}
+declare function CasePanelSignalApprovalActions({ className }: CasePanelSignalApprovalActionsProps): React.JSX.Element;
+
+export { CasePanelSignalApprovalActions, type CasePanelSignalApprovalActionsProps, CasePanelWhy, type CasePanelWhyItem, type CasePanelWhyProps, type CasePanelWhyRow, type CasePanelWhyTone };

package/dist/components/case-panel-why.js

@@ -0,0 +1,149 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CirclePlus, Loader2, ThumbsDown } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { SignalApprovalActions, useSignalApproval } from "./signal-feedback-inline.js";
+const toneDotClasses = {
+  neutral: "bg-muted-foreground/50",
+  alert: "bg-red-500",
+  warn: "bg-amber-500",
+  info: "bg-blue-500",
+  success: "bg-emerald-500"
+};
+function makeDomId(...parts) {
+  return parts.filter((part) => Boolean(part)).join("-").replace(/[^A-Za-z0-9_-]+/g, "-");
+}
+function DefaultWhyIcon({ tone = "neutral" }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("h-1.5 w-1.5 rounded-full", toneDotClasses[tone]) });
+}
+function CasePanelWhy({
+  items,
+  label = "Why",
+  defaultExpandedId = null,
+  onExpandedChange,
+  className
+}) {
+  const [expandedId, setExpandedId] = React.useState(defaultExpandedId);
+  const reactId = React.useId();
+  const idPrefix = makeDomId("case-panel-why", reactId);
+  const toggleExpanded = React.useCallback(
+    (itemId) => {
+      setExpandedId((current) => {
+        const next = current === itemId ? null : itemId;
+        onExpandedChange == null ? void 0 : onExpandedChange(next);
+        return next;
+      });
+    },
+    [onExpandedChange]
+  );
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-2", className), "aria-label": typeof label === "string" ? label : "Case panel why", children: [
+    label ? /* @__PURE__ */ jsx("div", { className: "text-[11px] font-semibold uppercase tracking-[0.07em] text-muted-foreground", children: label }) : null,
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: items.map((item) => {
+      var _a;
+      const isExpanded = expandedId === item.id;
+      const panelId = `${idPrefix}-panel-${makeDomId(item.id)}`;
+      const buttonId = `${idPrefix}-button-${makeDomId(item.id)}`;
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            id: buttonId,
+            type: "button",
+            "aria-expanded": isExpanded,
+            "aria-controls": panelId,
+            onClick: () => toggleExpanded(item.id),
+            onKeyDown: (event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                toggleExpanded(item.id);
+              }
+            },
+            className: cn(
+              "inline-flex min-h-8 max-w-full items-center gap-2 rounded-full border border-border bg-background px-3 py-1.5 text-left text-xs font-semibold text-foreground shadow-[0_1px_1.5px_rgba(0,0,0,0.03)] transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              isExpanded ? "bg-muted/30" : "bg-background"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-muted", children: (_a = item.icon) != null ? _a : /* @__PURE__ */ jsx(DefaultWhyIcon, { tone: item.tone }) }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item.label }),
+              typeof item.count === "number" ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 rounded-full bg-muted px-1.5 py-0 text-[10px] font-bold tabular-nums text-muted-foreground", children: [
+                "\xD7",
+                item.count
+              ] }) : null
+            ]
+          }
+        ),
+        isExpanded ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: panelId,
+            role: "region",
+            "aria-labelledby": buttonId,
+            className: "mt-2 rounded-xl border border-border bg-background p-3 shadow-[0_1px_2px_rgba(0,0,0,0.03)]",
+            children: [
+              item.summary ? /* @__PURE__ */ jsx("div", { className: "text-sm leading-6 text-foreground", children: item.summary }) : null,
+              item.details ? /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs leading-5 text-muted-foreground", children: item.details }) : null,
+              item.rows && item.rows.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "mt-3 divide-y divide-border/50", "aria-label": "Why details", children: item.rows.map((row) => /* @__PURE__ */ jsx("li", { className: "py-2 first:pt-0 last:pb-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-sm font-medium leading-5 text-foreground", children: row.label }),
+                  row.description ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: row.description }) : null,
+                  row.meta ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-[11px] leading-4 text-muted-foreground/80", children: row.meta }) : null
+                ] }),
+                row.value ? /* @__PURE__ */ jsx("div", { className: "shrink-0 text-right text-xs font-semibold tabular-nums text-foreground", children: row.value }) : null
+              ] }) }, row.id)) }) : null
+            ]
+          }
+        ) : null
+      ] }, item.id);
+    }) })
+  ] });
+}
+function CasePanelSignalApprovalActions({ className }) {
+  const {
+    approvalState,
+    labels,
+    hideApproveButton,
+    approveButtonIconUrl,
+    requestingApproval,
+    requestApproval,
+    requestDismiss
+  } = useSignalApproval();
+  if (approvalState !== "pending") {
+    return /* @__PURE__ */ jsx(SignalApprovalActions, {});
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [
+    !hideApproveButton ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: requestApproval,
+        disabled: requestingApproval,
+        className: "inline-flex h-8 items-center gap-1.5 rounded-md border border-foreground bg-foreground px-3 text-xs font-semibold text-background shadow-none transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:opacity-50",
+        children: [
+          requestingApproval ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : approveButtonIconUrl ? /* @__PURE__ */ jsx("img", { src: approveButtonIconUrl, alt: "", className: "h-3.5 w-3.5 object-contain", draggable: false }) : /* @__PURE__ */ jsx(CirclePlus, { className: "h-3.5 w-3.5" }),
+          labels.approveButton
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: requestDismiss,
+        className: "inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background px-3 text-xs font-medium text-muted-foreground shadow-none transition-colors hover:bg-muted hover:text-foreground",
+        children: [
+          /* @__PURE__ */ jsx(ThumbsDown, { className: "h-3.5 w-3.5" }),
+          labels.dismissButton
+        ]
+      }
+    )
+  ] });
+}
+export {
+  CasePanelSignalApprovalActions,
+  CasePanelWhy
+};
+//# sourceMappingURL=case-panel-why.js.map

package/dist/components/case-panel-why.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/case-panel-why.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { CirclePlus, Loader2, ThumbsDown } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\nimport { SignalApprovalActions, useSignalApproval } from \"./signal-feedback-inline\"\n\nexport type CasePanelWhyTone = \"neutral\" | \"alert\" | \"warn\" | \"info\" | \"success\"\n\nexport interface CasePanelWhyRow {\n  id: string\n  label: React.ReactNode\n  value?: React.ReactNode\n  meta?: React.ReactNode\n  description?: React.ReactNode\n}\n\nexport interface CasePanelWhyItem {\n  id: string\n  label: React.ReactNode\n  /** Count rendered in the summary pill as ×N when provided. */\n  count?: number\n  summary?: React.ReactNode\n  details?: React.ReactNode\n  rows?: CasePanelWhyRow[]\n  icon?: React.ReactNode\n  tone?: CasePanelWhyTone\n}\n\nexport interface CasePanelWhyProps {\n  items: CasePanelWhyItem[]\n  label?: React.ReactNode\n  defaultExpandedId?: string | null\n  onExpandedChange?: (itemId: string | null) => void\n  className?: string\n}\n\nconst toneDotClasses: Record<CasePanelWhyTone, string> = {\n  neutral: \"bg-muted-foreground/50\",\n  alert: \"bg-red-500\",\n  warn: \"bg-amber-500\",\n  info: \"bg-blue-500\",\n  success: \"bg-emerald-500\",\n}\n\nfunction makeDomId(...parts: Array<string | undefined>): string {\n  return parts\n    .filter((part): part is string => Boolean(part))\n    .join(\"-\")\n    .replace(/[^A-Za-z0-9_-]+/g, \"-\")\n}\n\nfunction DefaultWhyIcon({ tone = \"neutral\" }: { tone?: CasePanelWhyTone }) {\n  return <span aria-hidden=\"true\" className={cn(\"h-1.5 w-1.5 rounded-full\", toneDotClasses[tone])} />\n}\n\nexport function CasePanelWhy({\n  items,\n  label = \"Why\",\n  defaultExpandedId = null,\n  onExpandedChange,\n  className,\n}: CasePanelWhyProps) {\n  const [expandedId, setExpandedId] = React.useState<string | null>(defaultExpandedId)\n  const reactId = React.useId()\n  const idPrefix = makeDomId(\"case-panel-why\", reactId)\n\n  const toggleExpanded = React.useCallback(\n    (itemId: string) => {\n      setExpandedId((current) => {\n        const next = current === itemId ? null : itemId\n        onExpandedChange?.(next)\n        return next\n      })\n    },\n    [onExpandedChange],\n  )\n\n  if (items.length === 0) return null\n\n  return (\n    <section className={cn(\"space-y-2\", className)} aria-label={typeof label === \"string\" ? label : \"Case panel why\"}>\n      {label ? (\n        <div className=\"text-[11px] font-semibold uppercase tracking-[0.07em] text-muted-foreground\">\n          {label}\n        </div>\n      ) : null}\n\n      <div className=\"space-y-2\">\n        {items.map((item) => {\n          const isExpanded = expandedId === item.id\n          const panelId = `${idPrefix}-panel-${makeDomId(item.id)}`\n          const buttonId = `${idPrefix}-button-${makeDomId(item.id)}`\n\n          return (\n            <div key={item.id} className=\"space-y-2\">\n              <button\n                id={buttonId}\n                type=\"button\"\n                aria-expanded={isExpanded}\n                aria-controls={panelId}\n                onClick={() => toggleExpanded(item.id)}\n                onKeyDown={(event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault()\n                    toggleExpanded(item.id)\n                  }\n                }}\n                className={cn(\n                  \"inline-flex min-h-8 max-w-full items-center gap-2 rounded-full border border-border bg-background px-3 py-1.5 text-left text-xs font-semibold text-foreground shadow-[0_1px_1.5px_rgba(0,0,0,0.03)] transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n                  isExpanded ? \"bg-muted/30\" : \"bg-background\",\n                )}\n              >\n                <span className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-muted\">\n                  {item.icon ?? <DefaultWhyIcon tone={item.tone} />}\n                </span>\n                <span className=\"min-w-0 truncate\">{item.label}</span>\n                {typeof item.count === \"number\" ? (\n                  <span className=\"shrink-0 rounded-full bg-muted px-1.5 py-0 text-[10px] font-bold tabular-nums text-muted-foreground\">\n                    ×{item.count}\n                  </span>\n                ) : null}\n              </button>\n\n              {isExpanded ? (\n                <div\n                  id={panelId}\n                  role=\"region\"\n                  aria-labelledby={buttonId}\n                  className=\"mt-2 rounded-xl border border-border bg-background p-3 shadow-[0_1px_2px_rgba(0,0,0,0.03)]\"\n                >\n                  {item.summary ? <div className=\"text-sm leading-6 text-foreground\">{item.summary}</div> : null}\n                  {item.details ? <div className=\"mt-2 text-xs leading-5 text-muted-foreground\">{item.details}</div> : null}\n                  {item.rows && item.rows.length > 0 ? (\n                    <ul className=\"mt-3 divide-y divide-border/50\" aria-label=\"Why details\">\n                      {item.rows.map((row) => (\n                        <li key={row.id} className=\"py-2 first:pt-0 last:pb-0\">\n                          <div className=\"flex items-start justify-between gap-3\">\n                            <div className=\"min-w-0\">\n                              <div className=\"text-sm font-medium leading-5 text-foreground\">{row.label}</div>\n                              {row.description ? (\n                                <div className=\"mt-1 text-xs leading-5 text-muted-foreground\">{row.description}</div>\n                              ) : null}\n                              {row.meta ? <div className=\"mt-1 text-[11px] leading-4 text-muted-foreground/80\">{row.meta}</div> : null}\n                            </div>\n                            {row.value ? (\n                              <div className=\"shrink-0 text-right text-xs font-semibold tabular-nums text-foreground\">\n                                {row.value}\n                              </div>\n                            ) : null}\n                          </div>\n                        </li>\n                      ))}\n                    </ul>\n                  ) : null}\n                </div>\n              ) : null}\n            </div>\n          )\n        })}\n      </div>\n    </section>\n  )\n}\n\nexport interface CasePanelSignalApprovalActionsProps {\n  className?: string\n}\n\nexport function CasePanelSignalApprovalActions({ className }: CasePanelSignalApprovalActionsProps) {\n  const {\n    approvalState,\n    labels,\n    hideApproveButton,\n    approveButtonIconUrl,\n    requestingApproval,\n    requestApproval,\n    requestDismiss,\n  } = useSignalApproval()\n\n  if (approvalState !== \"pending\") {\n    return <SignalApprovalActions />\n  }\n\n  return (\n    <div className={cn(\"flex flex-wrap items-center gap-2\", className)}>\n      {!hideApproveButton ? (\n        <button\n          type=\"button\"\n          onClick={requestApproval}\n          disabled={requestingApproval}\n          className=\"inline-flex h-8 items-center gap-1.5 rounded-md border border-foreground bg-foreground px-3 text-xs font-semibold text-background shadow-none transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:opacity-50\"\n        >\n          {requestingApproval ? (\n            <Loader2 className=\"h-3.5 w-3.5 animate-spin\" />\n          ) : approveButtonIconUrl ? (\n            <img src={approveButtonIconUrl} alt=\"\" className=\"h-3.5 w-3.5 object-contain\" draggable={false} />\n          ) : (\n            <CirclePlus className=\"h-3.5 w-3.5\" />\n          )}\n          {labels.approveButton}\n        </button>\n      ) : null}\n      <button\n        type=\"button\"\n        onClick={requestDismiss}\n        className=\"inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background px-3 text-xs font-medium text-muted-foreground shadow-none transition-colors hover:bg-muted hover:text-foreground\"\n      >\n        <ThumbsDown className=\"h-3.5 w-3.5\" />\n        {labels.dismissButton}\n      </button>\n    </div>\n  )\n}\n"],"mappings":";AAqDS,cAiES,YAjET;AAnDT,YAAY,WAAW;AACvB,SAAS,YAAY,SAAS,kBAAkB;AAChD,SAAS,UAAU;AACnB,SAAS,uBAAuB,yBAAyB;AAgCzD,MAAM,iBAAmD;AAAA,EACvD,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AACX;AAEA,SAAS,aAAa,OAA0C;AAC9D,SAAO,MACJ,OAAO,CAAC,SAAyB,QAAQ,IAAI,CAAC,EAC9C,KAAK,GAAG,EACR,QAAQ,oBAAoB,GAAG;AACpC;AAEA,SAAS,eAAe,EAAE,OAAO,UAAU,GAAgC;AACzE,SAAO,oBAAC,UAAK,eAAY,QAAO,WAAW,GAAG,4BAA4B,eAAe,IAAI,CAAC,GAAG;AACnG;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAwB,iBAAiB;AACnF,QAAM,UAAU,MAAM,MAAM;AAC5B,QAAM,WAAW,UAAU,kBAAkB,OAAO;AAEpD,QAAM,iBAAiB,MAAM;AAAA,IAC3B,CAAC,WAAmB;AAClB,oBAAc,CAAC,YAAY;AACzB,cAAM,OAAO,YAAY,SAAS,OAAO;AACzC,6DAAmB;AACnB,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AAEA,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,SACE,qBAAC,aAAQ,WAAW,GAAG,aAAa,SAAS,GAAG,cAAY,OAAO,UAAU,WAAW,QAAQ,kBAC7F;AAAA,YACC,oBAAC,SAAI,WAAU,+EACZ,iBACH,IACE;AAAA,IAEJ,oBAAC,SAAI,WAAU,aACZ,gBAAM,IAAI,CAAC,SAAS;AAzF7B;AA0FU,YAAM,aAAa,eAAe,KAAK;AACvC,YAAM,UAAU,GAAG,QAAQ,UAAU,UAAU,KAAK,EAAE,CAAC;AACvD,YAAM,WAAW,GAAG,QAAQ,WAAW,UAAU,KAAK,EAAE,CAAC;AAEzD,aACE,qBAAC,SAAkB,WAAU,aAC3B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,SAAS,MAAM,eAAe,KAAK,EAAE;AAAA,YACrC,WAAW,CAAC,UAAU;AACpB,kBAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,sBAAM,eAAe;AACrB,+BAAe,KAAK,EAAE;AAAA,cACxB;AAAA,YACF;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA,aAAa,gBAAgB;AAAA,YAC/B;AAAA,YAEA;AAAA,kCAAC,UAAK,WAAU,kFACb,qBAAK,SAAL,YAAa,oBAAC,kBAAe,MAAM,KAAK,MAAM,GACjD;AAAA,cACA,oBAAC,UAAK,WAAU,oBAAoB,eAAK,OAAM;AAAA,cAC9C,OAAO,KAAK,UAAU,WACrB,qBAAC,UAAK,WAAU,uGAAsG;AAAA;AAAA,gBAClH,KAAK;AAAA,iBACT,IACE;AAAA;AAAA;AAAA,QACN;AAAA,QAEC,aACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,MAAK;AAAA,YACL,mBAAiB;AAAA,YACjB,WAAU;AAAA,YAET;AAAA,mBAAK,UAAU,oBAAC,SAAI,WAAU,qCAAqC,eAAK,SAAQ,IAAS;AAAA,cACzF,KAAK,UAAU,oBAAC,SAAI,WAAU,gDAAgD,eAAK,SAAQ,IAAS;AAAA,cACpG,KAAK,QAAQ,KAAK,KAAK,SAAS,IAC/B,oBAAC,QAAG,WAAU,kCAAiC,cAAW,eACvD,eAAK,KAAK,IAAI,CAAC,QACd,oBAAC,QAAgB,WAAU,6BACzB,+BAAC,SAAI,WAAU,0CACb;AAAA,qCAAC,SAAI,WAAU,WACb;AAAA,sCAAC,SAAI,WAAU,iDAAiD,cAAI,OAAM;AAAA,kBACzE,IAAI,cACH,oBAAC,SAAI,WAAU,gDAAgD,cAAI,aAAY,IAC7E;AAAA,kBACH,IAAI,OAAO,oBAAC,SAAI,WAAU,uDAAuD,cAAI,MAAK,IAAS;AAAA,mBACtG;AAAA,gBACC,IAAI,QACH,oBAAC,SAAI,WAAU,0EACZ,cAAI,OACP,IACE;AAAA,iBACN,KAdO,IAAI,EAeb,CACD,GACH,IACE;AAAA;AAAA;AAAA,QACN,IACE;AAAA,WA7DI,KAAK,EA8Df;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;AAMO,SAAS,+BAA+B,EAAE,UAAU,GAAwC;AACjG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAEtB,MAAI,kBAAkB,WAAW;AAC/B,WAAO,oBAAC,yBAAsB;AAAA,EAChC;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,qCAAqC,SAAS,GAC9D;AAAA,KAAC,oBACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAU;AAAA,QAET;AAAA,+BACC,oBAAC,WAAQ,WAAU,4BAA2B,IAC5C,uBACF,oBAAC,SAAI,KAAK,sBAAsB,KAAI,IAAG,WAAU,8BAA6B,WAAW,OAAO,IAEhG,oBAAC,cAAW,WAAU,eAAc;AAAA,UAErC,OAAO;AAAA;AAAA;AAAA,IACV,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAU;AAAA,QAEV;AAAA,8BAAC,cAAW,WAAU,eAAc;AAAA,UACnC,OAAO;AAAA;AAAA;AAAA,IACV;AAAA,KACF;AAEJ;","names":[]}