@umodeapporg/ui 0.1.0

package/dist/components/Form/attachments/AttachmentPreviewList.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../ControlledButton.js";
+import ControlledImage from "../ControlledImage/index.js";
+import ControlledTooltip from "../../UI/ControlledTooltip.js";
+import { MaterialSymbol } from "../../UI/MaterialSymbol/index.js";
+import { iconForMimeType, formatFileSize } from "../../../helpers/fileAttachments.js";
+const AttachmentPreviewList = ({ stagedAttachments, onRemove, onRetry }) => {
+  const { t } = useTranslation("ui");
+  if (!stagedAttachments.length) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: stagedAttachments.map((attachment) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        "relative flex w-44 animate-pop-in flex-col overflow-hidden rounded-xl border bg-surface",
+        attachment.status === "error" ? "border-danger-border" : "border-border"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 p-2", children: [
+          attachment.previewUrl && attachment.file.type.startsWith("image/") ? /* @__PURE__ */ jsx(ControlledImage, { src: attachment.previewUrl, className: "size-10 shrink-0 rounded-lg object-cover" }) : /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-brand-soft text-brand-emphasis", children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: iconForMimeType(attachment.file.type), size: 20 }) }),
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-medium text-foreground", children: attachment.file.name }),
+            /* @__PURE__ */ jsx("span", { className: "text-xxs text-foreground-subtle", children: attachment.status === "error" ? t("followUp.attachments.uploadFailed") : formatFileSize(attachment.file.size) })
+          ] }),
+          attachment.status === "error" && /* @__PURE__ */ jsx(ControlledTooltip, { content: t("actions.tryAgain"), className: "z-[9999]", children: /* @__PURE__ */ jsx(
+            ControlledButton,
+            {
+              defaultHtmlButton: true,
+              onClick: () => onRetry(attachment.stagingId),
+              className: "flex size-6 shrink-0 items-center justify-center rounded-full text-danger-emphasis hover:bg-danger-soft",
+              children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "refresh", size: 14 })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ControlledTooltip, { content: t("actions.remove"), className: "z-[9999]", children: /* @__PURE__ */ jsx(
+            ControlledButton,
+            {
+              defaultHtmlButton: true,
+              onClick: () => onRemove(attachment.stagingId),
+              className: "flex size-6 shrink-0 items-center justify-center rounded-full text-foreground-faint hover:bg-muted-hover hover:text-foreground-muted",
+              children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "close", size: 14 })
+            }
+          ) })
+        ] }),
+        attachment.status === "uploading" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-1 w-full bg-muted-hover",
+            role: "progressbar",
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": attachment.progress,
+            "aria-label": t("followUp.attachments.uploading"),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-1 rounded-r-full bg-brand transition-interactive duration-base",
+                style: { width: `${attachment.progress}%` }
+              }
+            )
+          }
+        )
+      ]
+    },
+    attachment.stagingId
+  )) });
+};
+export {
+  AttachmentPreviewList as default
+};
+//# sourceMappingURL=AttachmentPreviewList.js.map

package/dist/components/Form/attachments/AttachmentPreviewList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentPreviewList.js","sources":["../../../../src/components/Form/attachments/AttachmentPreviewList.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledImage from '@/components/Form/ControlledImage';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { formatFileSize, iconForMimeType } from '@/helpers/fileAttachments';\nimport { IStagedAttachment } from '@/hooks/useFileAttachments';\n\ninterface IAttachmentPreviewListProps {\n  stagedAttachments: Array<IStagedAttachment>;\n  onRemove: (stagingId: string) => void;\n  onRetry: (stagingId: string) => void;\n}\n\nconst AttachmentPreviewList: React.FC<IAttachmentPreviewListProps> = ({ stagedAttachments, onRemove, onRetry }) => {\n  const { t } = useTranslation('ui');\n\n  if (!stagedAttachments.length) return null;\n\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      {stagedAttachments.map((attachment) => (\n        <div\n          key={attachment.stagingId}\n          className={classNames(\n            'relative flex w-44 animate-pop-in flex-col overflow-hidden rounded-xl border bg-surface',\n            attachment.status === 'error' ? 'border-danger-border' : 'border-border',\n          )}\n        >\n          <div className=\"flex items-center gap-x-2 p-2\">\n            {attachment.previewUrl && attachment.file.type.startsWith('image/') ? (\n              <ControlledImage src={attachment.previewUrl} className=\"size-10 shrink-0 rounded-lg object-cover\" />\n            ) : (\n              <span className=\"flex size-10 shrink-0 items-center justify-center rounded-lg bg-brand-soft text-brand-emphasis\">\n                <MaterialSymbol icon={iconForMimeType(attachment.file.type)} size={20} />\n              </span>\n            )}\n\n            <span className=\"flex min-w-0 flex-1 flex-col\">\n              <span className=\"truncate text-xs font-medium text-foreground\">{attachment.file.name}</span>\n              <span className=\"text-xxs text-foreground-subtle\">\n                {attachment.status === 'error'\n                  ? t('followUp.attachments.uploadFailed')\n                  : formatFileSize(attachment.file.size)}\n              </span>\n            </span>\n\n            {attachment.status === 'error' && (\n              <ControlledTooltip content={t('actions.tryAgain')} className=\"z-[9999]\">\n                <ControlledButton\n                  defaultHtmlButton\n                  onClick={() => onRetry(attachment.stagingId)}\n                  className=\"flex size-6 shrink-0 items-center justify-center rounded-full text-danger-emphasis hover:bg-danger-soft\"\n                >\n                  <MaterialSymbol icon=\"refresh\" size={14} />\n                </ControlledButton>\n              </ControlledTooltip>\n            )}\n\n            <ControlledTooltip content={t('actions.remove')} className=\"z-[9999]\">\n              <ControlledButton\n                defaultHtmlButton\n                onClick={() => onRemove(attachment.stagingId)}\n                className=\"flex size-6 shrink-0 items-center justify-center rounded-full text-foreground-faint hover:bg-muted-hover hover:text-foreground-muted\"\n              >\n                <MaterialSymbol icon=\"close\" size={14} />\n              </ControlledButton>\n            </ControlledTooltip>\n          </div>\n\n          {attachment.status === 'uploading' && (\n            <div\n              className=\"h-1 w-full bg-muted-hover\"\n              role=\"progressbar\"\n              aria-valuemin={0}\n              aria-valuemax={100}\n              aria-valuenow={attachment.progress}\n              aria-label={t('followUp.attachments.uploading')}\n            >\n              <div\n                className=\"h-1 rounded-r-full bg-brand transition-interactive duration-base\"\n                style={{ width: `${attachment.progress}%` }}\n              />\n            </div>\n          )}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default AttachmentPreviewList;\n"],"names":[],"mappings":";;;;;;;;AAgBA,MAAM,wBAA+D,CAAC,EAAE,mBAAmB,UAAU,cAAc;AACjH,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,MAAI,CAAC,kBAAkB,OAAQ,QAAO;AAEtC,6BACG,OAAA,EAAI,WAAU,wBACZ,UAAA,kBAAkB,IAAI,CAAC,eACtB;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,WAAW,UAAU,yBAAyB;AAAA,MAAA;AAAA,MAG3D,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,iCACZ,UAAA;AAAA,UAAA,WAAW,cAAc,WAAW,KAAK,KAAK,WAAW,QAAQ,IAChE,oBAAC,iBAAA,EAAgB,KAAK,WAAW,YAAY,WAAU,4CAA2C,IAElG,oBAAC,QAAA,EAAK,WAAU,kGACd,UAAA,oBAAC,gBAAA,EAAe,MAAM,gBAAgB,WAAW,KAAK,IAAI,GAAG,MAAM,IAAI,GACzE;AAAA,UAGF,qBAAC,QAAA,EAAK,WAAU,gCACd,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAK,WAAU,gDAAgD,UAAA,WAAW,KAAK,MAAK;AAAA,YACrF,oBAAC,QAAA,EAAK,WAAU,mCACb,qBAAW,WAAW,UACnB,EAAE,mCAAmC,IACrC,eAAe,WAAW,KAAK,IAAI,EAAA,CACzC;AAAA,UAAA,GACF;AAAA,UAEC,WAAW,WAAW,WACrB,oBAAC,mBAAA,EAAkB,SAAS,EAAE,kBAAkB,GAAG,WAAU,YAC3D,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,mBAAiB;AAAA,cACjB,SAAS,MAAM,QAAQ,WAAW,SAAS;AAAA,cAC3C,WAAU;AAAA,cAEV,UAAA,oBAAC,gBAAA,EAAe,MAAK,WAAU,MAAM,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA,GAE7C;AAAA,8BAGD,mBAAA,EAAkB,SAAS,EAAE,gBAAgB,GAAG,WAAU,YACzD,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,mBAAiB;AAAA,cACjB,SAAS,MAAM,SAAS,WAAW,SAAS;AAAA,cAC5C,WAAU;AAAA,cAEV,UAAA,oBAAC,gBAAA,EAAe,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA,EACzC,CACF;AAAA,QAAA,GACF;AAAA,QAEC,WAAW,WAAW,eACrB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,iBAAe,WAAW;AAAA,YAC1B,cAAY,EAAE,gCAAgC;AAAA,YAE9C,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,GAAG,WAAW,QAAQ,IAAA;AAAA,cAAI;AAAA,YAAA;AAAA,UAC5C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IA5DG,WAAW;AAAA,EAAA,CA+DnB,GACH;AAEJ;"}

package/dist/components/Form/attachments/FileDropzone.d.ts

@@ -0,0 +1,12 @@
+interface IFileDropzoneProps {
+    disabled?: boolean;
+    onFilesDropped: (files: Array<File>) => void;
+    className?: string;
+    overlayClassName?: string;
+    /** Set by a zone nested inside another one, so a drop is staged once and not twice. */
+    stopPropagation?: boolean;
+    children: React.ReactNode;
+}
+/** Wraps a composing surface so a file dragged anywhere over it becomes an attachment. */
+declare const FileDropzone: React.FC<IFileDropzoneProps>;
+export default FileDropzone;

package/dist/components/Form/attachments/FileDropzone.js

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { twMerge } from "tailwind-merge";
+import { MaterialSymbol } from "../../UI/MaterialSymbol/index.js";
+const FileDropzone = ({
+  disabled = false,
+  onFilesDropped,
+  className,
+  overlayClassName,
+  stopPropagation = false,
+  children
+}) => {
+  const { t } = useTranslation("ui");
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+  const dragDepthRef = useRef(0);
+  const hasFiles = (event) => Array.from(event.dataTransfer?.types ?? []).includes("Files");
+  const handleDragEnter = useCallback(
+    (event) => {
+      if (disabled || !hasFiles(event)) return;
+      event.preventDefault();
+      dragDepthRef.current += 1;
+      setIsDraggingOver(true);
+    },
+    [disabled]
+  );
+  const handleDragOver = useCallback(
+    (event) => {
+      if (disabled || !hasFiles(event)) return;
+      event.preventDefault();
+    },
+    [disabled]
+  );
+  const handleDragLeave = useCallback(
+    (event) => {
+      if (disabled || !hasFiles(event)) return;
+      dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+      if (dragDepthRef.current === 0) setIsDraggingOver(false);
+    },
+    [disabled]
+  );
+  const handleDrop = useCallback(
+    (event) => {
+      if (disabled) return;
+      event.preventDefault();
+      if (stopPropagation) event.stopPropagation();
+      dragDepthRef.current = 0;
+      setIsDraggingOver(false);
+      const files = Array.from(event.dataTransfer?.files ?? []);
+      if (files.length) onFilesDropped(files);
+    },
+    [disabled, onFilesDropped, stopPropagation]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: twMerge("relative flex min-h-0 flex-1 flex-col", className),
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children: [
+        children,
+        isDraggingOver && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: twMerge(
+              "pointer-events-none absolute inset-0 z-20 flex items-center justify-center rounded-2xl border-2 border-dashed border-brand-border bg-brand-soft/90",
+              overlayClassName
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex animate-pop-in flex-col items-center gap-y-2 text-brand-emphasis", children: [
+              /* @__PURE__ */ jsx(MaterialSymbol, { icon: "upload_file", size: 40 }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: t("followUp.attachments.dropHere") })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  FileDropzone as default
+};
+//# sourceMappingURL=FileDropzone.js.map

package/dist/components/Form/attachments/FileDropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropzone.js","sources":["../../../../src/components/Form/attachments/FileDropzone.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { twMerge } from 'tailwind-merge';\n\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\ninterface IFileDropzoneProps {\n  disabled?: boolean;\n  onFilesDropped: (files: Array<File>) => void;\n  className?: string;\n  overlayClassName?: string;\n  /** Set by a zone nested inside another one, so a drop is staged once and not twice. */\n  stopPropagation?: boolean;\n  children: React.ReactNode;\n}\n\n/** Wraps a composing surface so a file dragged anywhere over it becomes an attachment. */\nconst FileDropzone: React.FC<IFileDropzoneProps> = ({\n  disabled = false,\n  onFilesDropped,\n  className,\n  overlayClassName,\n  stopPropagation = false,\n  children,\n}) => {\n  const { t } = useTranslation('ui');\n  const [isDraggingOver, setIsDraggingOver] = useState(false);\n  const dragDepthRef = useRef(0);\n\n  const hasFiles = (event: React.DragEvent): boolean => Array.from(event.dataTransfer?.types ?? []).includes('Files');\n\n  const handleDragEnter = useCallback(\n    (event: React.DragEvent) => {\n      if (disabled || !hasFiles(event)) return;\n      event.preventDefault();\n      dragDepthRef.current += 1;\n      setIsDraggingOver(true);\n    },\n    [disabled],\n  );\n\n  const handleDragOver = useCallback(\n    (event: React.DragEvent) => {\n      if (disabled || !hasFiles(event)) return;\n      event.preventDefault();\n    },\n    [disabled],\n  );\n\n  const handleDragLeave = useCallback(\n    (event: React.DragEvent) => {\n      if (disabled || !hasFiles(event)) return;\n      dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);\n      if (dragDepthRef.current === 0) setIsDraggingOver(false);\n    },\n    [disabled],\n  );\n\n  const handleDrop = useCallback(\n    (event: React.DragEvent) => {\n      if (disabled) return;\n      event.preventDefault();\n      if (stopPropagation) event.stopPropagation();\n      dragDepthRef.current = 0;\n      setIsDraggingOver(false);\n\n      const files = Array.from(event.dataTransfer?.files ?? []);\n      if (files.length) onFilesDropped(files);\n    },\n    [disabled, onFilesDropped, stopPropagation],\n  );\n\n  return (\n    <div\n      className={twMerge('relative flex min-h-0 flex-1 flex-col', className)}\n      onDragEnter={handleDragEnter}\n      onDragOver={handleDragOver}\n      onDragLeave={handleDragLeave}\n      onDrop={handleDrop}\n    >\n      {children}\n\n      {isDraggingOver && (\n        <div\n          className={twMerge(\n            'pointer-events-none absolute inset-0 z-20 flex items-center justify-center rounded-2xl border-2 border-dashed border-brand-border bg-brand-soft/90',\n            overlayClassName,\n          )}\n        >\n          <div className=\"flex animate-pop-in flex-col items-center gap-y-2 text-brand-emphasis\">\n            <MaterialSymbol icon=\"upload_file\" size={40} />\n            <span className=\"text-sm font-medium\">{t('followUp.attachments.dropHere')}</span>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default FileDropzone;\n"],"names":[],"mappings":";;;;;AAiBA,MAAM,eAA6C,CAAC;AAAA,EAClD,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,eAAe,OAAO,CAAC;AAE7B,QAAM,WAAW,CAAC,UAAoC,MAAM,KAAK,MAAM,cAAc,SAAS,CAAA,CAAE,EAAE,SAAS,OAAO;AAElH,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAA2B;AAC1B,UAAI,YAAY,CAAC,SAAS,KAAK,EAAG;AAClC,YAAM,eAAA;AACN,mBAAa,WAAW;AACxB,wBAAkB,IAAI;AAAA,IACxB;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAGX,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAA2B;AAC1B,UAAI,YAAY,CAAC,SAAS,KAAK,EAAG;AAClC,YAAM,eAAA;AAAA,IACR;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAGX,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAA2B;AAC1B,UAAI,YAAY,CAAC,SAAS,KAAK,EAAG;AAClC,mBAAa,UAAU,KAAK,IAAI,GAAG,aAAa,UAAU,CAAC;AAC3D,UAAI,aAAa,YAAY,EAAG,mBAAkB,KAAK;AAAA,IACzD;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAGX,QAAM,aAAa;AAAA,IACjB,CAAC,UAA2B;AAC1B,UAAI,SAAU;AACd,YAAM,eAAA;AACN,UAAI,uBAAuB,gBAAA;AAC3B,mBAAa,UAAU;AACvB,wBAAkB,KAAK;AAEvB,YAAM,QAAQ,MAAM,KAAK,MAAM,cAAc,SAAS,EAAE;AACxD,UAAI,MAAM,OAAQ,gBAAe,KAAK;AAAA,IACxC;AAAA,IACA,CAAC,UAAU,gBAAgB,eAAe;AAAA,EAAA;AAG5C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,QAAQ,yCAAyC,SAAS;AAAA,MACrE,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA,MAEP,UAAA;AAAA,QAAA;AAAA,QAEA,kBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAA,qBAAC,OAAA,EAAI,WAAU,yEACb,UAAA;AAAA,cAAA,oBAAC,gBAAA,EAAe,MAAK,eAAc,MAAM,IAAI;AAAA,kCAC5C,QAAA,EAAK,WAAU,uBAAuB,UAAA,EAAE,+BAA+B,EAAA,CAAE;AAAA,YAAA,EAAA,CAC5E;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/Navigation/ControlledBreadcrumb.d.ts

@@ -0,0 +1,13 @@
+export interface IControlledBreadcrumbItem {
+    key: string;
+    label: string;
+    to?: string;
+    onClick?: () => void;
+}
+interface IControlledBreadcrumbProps {
+    items: Array<IControlledBreadcrumbItem>;
+    ariaLabel: string;
+    className?: string;
+}
+declare const ControlledBreadcrumb: React.FC<IControlledBreadcrumbProps>;
+export default ControlledBreadcrumb;

package/dist/components/Navigation/ControlledBreadcrumb.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, Fragment } from "react";
+import classNames from "classnames";
+import { Link } from "react-router-dom";
+import ControlledButton from "../Form/ControlledButton.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+const ARIA_CURRENT_PAGE = "page";
+const CRUMB_LINK_CLASS = "rounded text-foreground-subtle transition-colors hover:text-brand-emphasis focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-border";
+const ControlledBreadcrumb = ({ items, ariaLabel, className }) => {
+  const trail = useMemo(() => Array.isArray(items) ? items : [], [items]);
+  if (trail.length === 0) return null;
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: classNames("flex flex-wrap items-center gap-1 text-sm", className), children: trail.map((item, position) => {
+    const isLast = position === trail.length - 1;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      position > 0 && /* @__PURE__ */ jsx(MaterialSymbol, { icon: "chevron_right", size: 16, color: "rgb(var(--color-foreground-subtle))" }),
+      isLast ? /* @__PURE__ */ jsx("span", { "aria-current": ARIA_CURRENT_PAGE, className: "font-semibold text-foreground", children: item.label }) : item.to ? /* @__PURE__ */ jsx(Link, { to: item.to, className: CRUMB_LINK_CLASS, children: item.label }) : /* @__PURE__ */ jsx(ControlledButton, { defaultHtmlButton: true, type: "button", onClick: item.onClick, className: CRUMB_LINK_CLASS, children: item.label })
+    ] }, item.key);
+  }) });
+};
+export {
+  ControlledBreadcrumb as default
+};
+//# sourceMappingURL=ControlledBreadcrumb.js.map

package/dist/components/Navigation/ControlledBreadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledBreadcrumb.js","sources":["../../../src/components/Navigation/ControlledBreadcrumb.tsx"],"sourcesContent":["import { Fragment, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { Link } from 'react-router-dom';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\nexport interface IControlledBreadcrumbItem {\n  key: string;\n  label: string;\n  to?: string;\n  onClick?: () => void;\n}\n\ninterface IControlledBreadcrumbProps {\n  items: Array<IControlledBreadcrumbItem>;\n  ariaLabel: string;\n  className?: string;\n}\n\nconst ARIA_CURRENT_PAGE = 'page';\nconst CRUMB_LINK_CLASS =\n  'rounded text-foreground-subtle transition-colors hover:text-brand-emphasis focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-border';\n\nconst ControlledBreadcrumb: React.FC<IControlledBreadcrumbProps> = ({ items, ariaLabel, className }) => {\n  const trail = useMemo(() => (Array.isArray(items) ? items : []), [items]);\n\n  if (trail.length === 0) return null;\n\n  return (\n    <nav aria-label={ariaLabel} className={classNames('flex flex-wrap items-center gap-1 text-sm', className)}>\n      {trail.map((item, position) => {\n        const isLast = position === trail.length - 1;\n\n        return (\n          <Fragment key={item.key}>\n            {position > 0 && (\n              <MaterialSymbol icon=\"chevron_right\" size={16} color=\"rgb(var(--color-foreground-subtle))\" />\n            )}\n            {isLast ? (\n              <span aria-current={ARIA_CURRENT_PAGE} className=\"font-semibold text-foreground\">\n                {item.label}\n              </span>\n            ) : item.to ? (\n              <Link to={item.to} className={CRUMB_LINK_CLASS}>\n                {item.label}\n              </Link>\n            ) : (\n              <ControlledButton defaultHtmlButton type=\"button\" onClick={item.onClick} className={CRUMB_LINK_CLASS}>\n                {item.label}\n              </ControlledButton>\n            )}\n          </Fragment>\n        );\n      })}\n    </nav>\n  );\n};\n\nexport default ControlledBreadcrumb;\n"],"names":[],"mappings":";;;;;;AAoBA,MAAM,oBAAoB;AAC1B,MAAM,mBACJ;AAEF,MAAM,uBAA6D,CAAC,EAAE,OAAO,WAAW,gBAAgB;AACtG,QAAM,QAAQ,QAAQ,MAAO,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAA,GAAK,CAAC,KAAK,CAAC;AAExE,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,SACE,oBAAC,OAAA,EAAI,cAAY,WAAW,WAAW,WAAW,6CAA6C,SAAS,GACrG,UAAA,MAAM,IAAI,CAAC,MAAM,aAAa;AAC7B,UAAM,SAAS,aAAa,MAAM,SAAS;AAE3C,gCACG,UAAA,EACE,UAAA;AAAA,MAAA,WAAW,yBACT,gBAAA,EAAe,MAAK,iBAAgB,MAAM,IAAI,OAAM,sCAAA,CAAsC;AAAA,MAE5F,SACC,oBAAC,QAAA,EAAK,gBAAc,mBAAmB,WAAU,iCAC9C,UAAA,KAAK,OACR,IACE,KAAK,KACP,oBAAC,MAAA,EAAK,IAAI,KAAK,IAAI,WAAW,kBAC3B,UAAA,KAAK,MAAA,CACR,IAEA,oBAAC,oBAAiB,mBAAiB,MAAC,MAAK,UAAS,SAAS,KAAK,SAAS,WAAW,kBACjF,eAAK,MAAA,CACR;AAAA,IAAA,EAAA,GAfW,KAAK,GAiBpB;AAAA,EAEJ,CAAC,EAAA,CACH;AAEJ;"}

package/dist/components/Navigation/ErrorPage.d.ts

@@ -0,0 +1,2 @@
+declare const ErrorPage: () => import("react").JSX.Element;
+export default ErrorPage;

package/dist/components/Navigation/ErrorPage.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import NoDataFound from "../UI/NoDataFound/index.js";
+const ErrorPage = () => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsx("div", { className: "mt-[15vh] flex items-center justify-center", children: /* @__PURE__ */ jsx(
+    NoDataFound,
+    {
+      variant: "error",
+      size: "lg",
+      title: t("errorPage.message"),
+      description: t("errorPage.headline"),
+      action: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "/",
+          className: "rounded-xl bg-brand px-4 py-2.5 text-xs font-semibold text-brand-fg shadow-md shadow-brand/20 transition-interactive duration-base hover:-translate-y-px hover:bg-brand hover:shadow-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+          children: t("errorPage.backToStart")
+        }
+      )
+    }
+  ) });
+};
+export {
+  ErrorPage as default
+};
+//# sourceMappingURL=ErrorPage.js.map

package/dist/components/Navigation/ErrorPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorPage.js","sources":["../../../src/components/Navigation/ErrorPage.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\n\nimport NoDataFound from '../UI/NoDataFound';\n\nconst ErrorPage = () => {\n  const { t } = useTranslation('ui');\n  return (\n    <div className=\"mt-[15vh] flex items-center justify-center\">\n      <NoDataFound\n        variant=\"error\"\n        size=\"lg\"\n        title={t('errorPage.message')}\n        description={t('errorPage.headline')}\n        action={\n          <a\n            href=\"/\"\n            className=\"rounded-xl bg-brand px-4 py-2.5 text-xs font-semibold text-brand-fg shadow-md shadow-brand/20 transition-interactive duration-base hover:-translate-y-px hover:bg-brand hover:shadow-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n          >\n            {t('errorPage.backToStart')}\n          </a>\n        }\n      />\n    </div>\n  );\n};\n\nexport default ErrorPage;\n"],"names":[],"mappings":";;;AAIA,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,SACE,oBAAC,OAAA,EAAI,WAAU,8CACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAO,EAAE,mBAAmB;AAAA,MAC5B,aAAa,EAAE,oBAAoB;AAAA,MACnC,QACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UAET,YAAE,uBAAuB;AAAA,QAAA;AAAA,MAAA;AAAA,IAC5B;AAAA,EAAA,GAGN;AAEJ;"}

package/dist/components/Navigation/PageTitle.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { SymbolCodepoints } from '../UI/MaterialSymbol';
+interface IPageTitleProps {
+    title?: string;
+    /** Substitui o span do título por conteúdo rico (ex.: nome editável inline da ficha técnica). */
+    titleContent?: ReactNode;
+    /** Rótulo pequeno em caixa alta acima do título (ex.: "FICHA TÉCNICA"). */
+    eyebrow?: string;
+    /** Conteúdo abaixo da linha do título, dentro da coluna de texto (tags, steppers). */
+    subtitleSlot?: ReactNode;
+    slot?: ReactNode;
+    /** Conteúdo renderizado à ESQUERDA, imediatamente ao lado do título (o `slot` fica à direita). */
+    titleSlot?: ReactNode;
+    /** Conteúdo renderizado ANTES do ícone/título (ex.: botão voltar customizado, alvo de drop). */
+    leadingSlot?: ReactNode;
+    /** Trilha custom acima do título (use `ControlledBreadcrumb`). Sem ela, a trilha é derivada do menu. */
+    breadcrumb?: ReactNode;
+    /** Deriva a trilha automaticamente da árvore de navegação quando `breadcrumb` não é passado. */
+    autoBreadcrumb?: boolean;
+    /** Ícone em chip à esquerda do título. Sem ele, herda o ícone do item de menu da rota atual. */
+    titleIcon?: SymbolCodepoints;
+    titleIconClassName?: string;
+    /** Deriva o ícone automaticamente do menu quando `titleIcon` não é passado. */
+    autoIcon?: boolean;
+    /** Variante compacta: título menor, para headers de navegação interna (ex.: pastas). */
+    compact?: boolean;
+    /** Desligue para títulos digitados pelo usuário (nomes de pastas etc.), que não podem ter a caixa alterada. */
+    capitalizeTitle?: boolean;
+    /** Desligue quando o header é seguido imediatamente por tabs ou outra divisão própria. */
+    showDivider?: boolean;
+    canBack?: boolean;
+    canBackTo?: string;
+    canFloat?: boolean;
+    headline?: string;
+    className?: string;
+    titleClassName?: string;
+    onBackClick?: () => void;
+    disableBack?: boolean;
+}
+declare const PageTitle: React.FC<IPageTitleProps>;
+export default PageTitle;

package/dist/components/Navigation/PageTitle.js

@@ -0,0 +1,147 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useLocation } from "react-router-dom";
+import ControlledButton from "../Form/ControlledButton.js";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { capitalizeAllLetters } from "../../helpers/stringHelpers.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import ControlledBreadcrumb from "./ControlledBreadcrumb.js";
+import { usePageTitleNavigation } from "./PageTitleNavigationContext.js";
+const PageTitle = ({
+  canBack = false,
+  canFloat = false,
+  canBackTo,
+  title = "",
+  titleContent,
+  eyebrow,
+  subtitleSlot,
+  headline,
+  slot,
+  titleSlot,
+  leadingSlot,
+  breadcrumb,
+  autoBreadcrumb = true,
+  titleIcon,
+  titleIconClassName,
+  autoIcon = true,
+  compact = false,
+  capitalizeTitle = true,
+  showDivider = true,
+  className,
+  titleClassName,
+  onBackClick,
+  disableBack = false
+}) => {
+  const { t } = useTranslation("ui");
+  const navigate = useNavigate();
+  const location = useLocation();
+  const isFirefox = () => typeof navigator !== "undefined" && navigator.userAgent.toLowerCase().includes("firefox");
+  const handleBack = () => {
+    if (disableBack) return;
+    if (onBackClick) {
+      onBackClick();
+    } else if (canBackTo) {
+      navigate(canBackTo);
+    } else {
+      navigate(-1, {
+        state: { ignoreActiveTab: true }
+      });
+    }
+  };
+  const { resolveTrail } = usePageTitleNavigation();
+  const menuTrail = useMemo(() => {
+    const needsTrail = autoBreadcrumb && !breadcrumb && !canFloat || autoIcon && !titleIcon;
+    return needsTrail ? resolveTrail(location.pathname) : [];
+  }, [autoBreadcrumb, breadcrumb, canFloat, autoIcon, titleIcon, location.pathname, resolveTrail]);
+  const resolvedBreadcrumb = breadcrumb ?? (autoBreadcrumb && !canFloat && menuTrail.length >= 2 ? /* @__PURE__ */ jsx(
+    ControlledBreadcrumb,
+    {
+      ariaLabel: t("pageTitle.breadcrumbLabel"),
+      items: menuTrail.map((item, index) => ({
+        key: item.key,
+        label: item.label,
+        to: index < menuTrail.length - 1 ? item.to : void 0
+      }))
+    }
+  ) : void 0);
+  const resolvedTitleIcon = titleIcon ?? (autoIcon ? menuTrail[menuTrail.length - 1]?.icon : void 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("flex flex-col", {
+        "zIndexMax fixed top-16 mr-7": canFloat,
+        className
+      }),
+      style: {
+        width: canFloat ? isFirefox() ? "-moz-available" : "-webkit-fill-available" : "100%"
+      },
+      children: [
+        resolvedBreadcrumb && /* @__PURE__ */ jsx("div", { className: "mb-2 shrink-0", children: resolvedBreadcrumb }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames("flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2", {
+              "bg-surface py-5": canFloat
+            }),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: classNames("flex min-w-0 flex-1 basis-60 items-center", compact ? "gap-2" : "gap-3"), children: [
+                leadingSlot,
+                canBack && /* @__PURE__ */ jsx(ControlledTooltip, { content: t("actions.back"), children: /* @__PURE__ */ jsx(
+                  ControlledButton,
+                  {
+                    defaultHtmlButton: true,
+                    onClick: handleBack,
+                    disabled: disableBack,
+                    className: classNames(
+                      "flex shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-interactive duration-base ease-enter hover:bg-muted-hover hover:text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border active:scale-90 disabled:pointer-events-none disabled:text-foreground-faint",
+                      compact ? "size-8" : "size-9"
+                    ),
+                    children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "arrow_back", size: compact ? 18 : 20 })
+                  }
+                ) }),
+                resolvedTitleIcon && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: classNames(
+                      "flex shrink-0 items-center justify-center",
+                      compact ? "size-8 rounded-lg" : "size-10 rounded-xl",
+                      titleIconClassName ?? "bg-brand-soft text-brand-emphasis"
+                    ),
+                    children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: resolvedTitleIcon, size: compact ? 18 : 22, fill: true, className: "text-inherit" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+                  eyebrow && /* @__PURE__ */ jsx("span", { className: "mb-0.5 text-xs font-semibold uppercase tracking-widest text-foreground-faint", children: eyebrow }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                    titleContent ?? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: classNames(
+                          "min-w-0 truncate",
+                          compact ? "text-sm font-semibold text-foreground" : "text-lg font-bold tracking-tight text-foreground laptop:text-xl",
+                          titleClassName
+                        ),
+                        children: capitalizeTitle ? capitalizeAllLetters(title) : title
+                      }
+                    ),
+                    titleSlot
+                  ] }),
+                  headline && /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-xs text-foreground-subtle", children: headline }),
+                  subtitleSlot && /* @__PURE__ */ jsx("div", { className: "mt-1 flex min-w-0 flex-col gap-1", children: subtitleSlot })
+                ] })
+              ] }),
+              slot && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 flex-wrap items-center justify-end gap-2", children: slot })
+            ]
+          }
+        ),
+        showDivider && !canFloat && (title.length > 0 || Boolean(titleContent)) && /* @__PURE__ */ jsx("hr", { className: classNames("border-border-subtle", compact ? "mb-2 mt-2" : "mb-2 mt-3") })
+      ]
+    }
+  );
+};
+export {
+  PageTitle as default
+};
+//# sourceMappingURL=PageTitle.js.map

package/dist/components/Navigation/PageTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTitle.js","sources":["../../../src/components/Navigation/PageTitle.tsx"],"sourcesContent":["import { ReactNode, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\nimport { useLocation, useNavigate } from 'react-router-dom';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { capitalizeAllLetters } from '@/helpers/stringHelpers';\n\nimport { MaterialSymbol, SymbolCodepoints } from '../UI/MaterialSymbol';\n\nimport ControlledBreadcrumb from './ControlledBreadcrumb';\nimport { usePageTitleNavigation } from './PageTitleNavigationContext';\n\ninterface IPageTitleProps {\n  title?: string;\n  /** Substitui o span do título por conteúdo rico (ex.: nome editável inline da ficha técnica). */\n  titleContent?: ReactNode;\n  /** Rótulo pequeno em caixa alta acima do título (ex.: \"FICHA TÉCNICA\"). */\n  eyebrow?: string;\n  /** Conteúdo abaixo da linha do título, dentro da coluna de texto (tags, steppers). */\n  subtitleSlot?: ReactNode;\n  slot?: ReactNode;\n  /** Conteúdo renderizado à ESQUERDA, imediatamente ao lado do título (o `slot` fica à direita). */\n  titleSlot?: ReactNode;\n  /** Conteúdo renderizado ANTES do ícone/título (ex.: botão voltar customizado, alvo de drop). */\n  leadingSlot?: ReactNode;\n  /** Trilha custom acima do título (use `ControlledBreadcrumb`). Sem ela, a trilha é derivada do menu. */\n  breadcrumb?: ReactNode;\n  /** Deriva a trilha automaticamente da árvore de navegação quando `breadcrumb` não é passado. */\n  autoBreadcrumb?: boolean;\n  /** Ícone em chip à esquerda do título. Sem ele, herda o ícone do item de menu da rota atual. */\n  titleIcon?: SymbolCodepoints;\n  titleIconClassName?: string;\n  /** Deriva o ícone automaticamente do menu quando `titleIcon` não é passado. */\n  autoIcon?: boolean;\n  /** Variante compacta: título menor, para headers de navegação interna (ex.: pastas). */\n  compact?: boolean;\n  /** Desligue para títulos digitados pelo usuário (nomes de pastas etc.), que não podem ter a caixa alterada. */\n  capitalizeTitle?: boolean;\n  /** Desligue quando o header é seguido imediatamente por tabs ou outra divisão própria. */\n  showDivider?: boolean;\n  canBack?: boolean;\n  canBackTo?: string;\n  canFloat?: boolean;\n  headline?: string;\n  className?: string;\n  titleClassName?: string;\n  onBackClick?: () => void;\n  disableBack?: boolean;\n}\n\nconst PageTitle: React.FC<IPageTitleProps> = ({\n  canBack = false,\n  canFloat = false,\n  canBackTo,\n  title = '',\n  titleContent,\n  eyebrow,\n  subtitleSlot,\n  headline,\n  slot,\n  titleSlot,\n  leadingSlot,\n  breadcrumb,\n  autoBreadcrumb = true,\n  titleIcon,\n  titleIconClassName,\n  autoIcon = true,\n  compact = false,\n  capitalizeTitle = true,\n  showDivider = true,\n  className,\n  titleClassName,\n  onBackClick,\n  disableBack = false,\n}) => {\n  const { t } = useTranslation('ui');\n  const navigate = useNavigate();\n  const location = useLocation();\n\n  const isFirefox = () => typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().includes('firefox');\n\n  const handleBack = () => {\n    if (disableBack) return;\n\n    if (onBackClick) {\n      onBackClick();\n    } else if (canBackTo) {\n      navigate(canBackTo);\n    } else {\n      navigate(-1 as unknown as string, {\n        state: { ignoreActiveTab: true },\n      });\n    }\n  };\n\n  const { resolveTrail } = usePageTitleNavigation();\n\n  const menuTrail = useMemo(() => {\n    const needsTrail = (autoBreadcrumb && !breadcrumb && !canFloat) || (autoIcon && !titleIcon);\n    return needsTrail ? resolveTrail(location.pathname) : [];\n  }, [autoBreadcrumb, breadcrumb, canFloat, autoIcon, titleIcon, location.pathname, resolveTrail]);\n\n  const resolvedBreadcrumb =\n    breadcrumb ??\n    (autoBreadcrumb && !canFloat && menuTrail.length >= 2 ? (\n      <ControlledBreadcrumb\n        ariaLabel={t('pageTitle.breadcrumbLabel')}\n        items={menuTrail.map((item, index) => ({\n          key: item.key,\n          label: item.label,\n          to: index < menuTrail.length - 1 ? item.to : undefined,\n        }))}\n      />\n    ) : undefined);\n\n  const resolvedTitleIcon = titleIcon ?? (autoIcon ? menuTrail[menuTrail.length - 1]?.icon : undefined);\n\n  return (\n    <div\n      className={classNames('flex flex-col', {\n        'zIndexMax fixed top-16 mr-7': canFloat,\n        className,\n      })}\n      style={{\n        width: canFloat ? (isFirefox() ? '-moz-available' : '-webkit-fill-available') : '100%',\n      }}\n    >\n      {resolvedBreadcrumb && <div className=\"mb-2 shrink-0\">{resolvedBreadcrumb}</div>}\n\n      <div\n        className={classNames('flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2', {\n          'bg-surface py-5': canFloat,\n        })}\n      >\n        <div className={classNames('flex min-w-0 flex-1 basis-60 items-center', compact ? 'gap-2' : 'gap-3')}>\n          {leadingSlot}\n\n          {canBack && (\n            <ControlledTooltip content={t('actions.back')}>\n              <ControlledButton\n                defaultHtmlButton\n                onClick={handleBack}\n                disabled={disableBack}\n                className={classNames(\n                  'flex shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-interactive duration-base ease-enter hover:bg-muted-hover hover:text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border active:scale-90 disabled:pointer-events-none disabled:text-foreground-faint',\n                  compact ? 'size-8' : 'size-9',\n                )}\n              >\n                <MaterialSymbol icon=\"arrow_back\" size={compact ? 18 : 20} />\n              </ControlledButton>\n            </ControlledTooltip>\n          )}\n\n          {resolvedTitleIcon && (\n            <span\n              className={classNames(\n                'flex shrink-0 items-center justify-center',\n                compact ? 'size-8 rounded-lg' : 'size-10 rounded-xl',\n                titleIconClassName ?? 'bg-brand-soft text-brand-emphasis',\n              )}\n            >\n              <MaterialSymbol icon={resolvedTitleIcon} size={compact ? 18 : 22} fill className=\"text-inherit\" />\n            </span>\n          )}\n\n          <div className=\"flex min-w-0 flex-1 flex-col\">\n            {eyebrow && (\n              <span className=\"mb-0.5 text-xs font-semibold uppercase tracking-widest text-foreground-faint\">\n                {eyebrow}\n              </span>\n            )}\n\n            <div className=\"flex min-w-0 items-center gap-2\">\n              {titleContent ?? (\n                <span\n                  className={classNames(\n                    'min-w-0 truncate',\n                    compact\n                      ? 'text-sm font-semibold text-foreground'\n                      : 'text-lg font-bold tracking-tight text-foreground laptop:text-xl',\n                    titleClassName,\n                  )}\n                >\n                  {capitalizeTitle ? capitalizeAllLetters(title) : title}\n                </span>\n              )}\n\n              {titleSlot}\n            </div>\n\n            {headline && <span className=\"mt-0.5 text-xs text-foreground-subtle\">{headline}</span>}\n\n            {subtitleSlot && <div className=\"mt-1 flex min-w-0 flex-col gap-1\">{subtitleSlot}</div>}\n          </div>\n        </div>\n\n        {slot && <div className=\"ml-auto flex shrink-0 flex-wrap items-center justify-end gap-2\">{slot}</div>}\n      </div>\n      {showDivider && !canFloat && (title.length > 0 || Boolean(titleContent)) && (\n        <hr className={classNames('border-border-subtle', compact ? 'mb-2 mt-2' : 'mb-2 mt-3')} />\n      )}\n    </div>\n  );\n};\n\nexport default PageTitle;\n"],"names":[],"mappings":"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"}

package/dist/components/Navigation/PageTitleNavigationContext.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { SymbolCodepoints } from '../UI/MaterialSymbol';
+export interface IPageTitleTrailItem {
+    key: string;
+    /** Already translated: the host resolves i18n keys before handing the trail over. */
+    label: string;
+    to: string;
+    icon?: SymbolCodepoints;
+}
+export type TPageTitleTrailResolver = (pathname: string) => Array<IPageTitleTrailItem>;
+interface IPageTitleNavigationContextValue {
+    resolveTrail: TPageTitleTrailResolver;
+}
+interface IPageTitleNavigationProviderProps {
+    resolveTrail: TPageTitleTrailResolver;
+    children: ReactNode;
+}
+/** Lets `PageTitle` derive breadcrumb and icon from the host's navigation tree without knowing it. */
+export declare const PageTitleNavigationProvider: React.FC<IPageTitleNavigationProviderProps>;
+export declare const usePageTitleNavigation: () => IPageTitleNavigationContextValue;
+export {};

package/dist/components/Navigation/PageTitleNavigationContext.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useMemo, useContext } from "react";
+const resolveNoTrail = () => [];
+const PageTitleNavigationContext = createContext({ resolveTrail: resolveNoTrail });
+const PageTitleNavigationProvider = ({
+  resolveTrail,
+  children
+}) => {
+  const value = useMemo(() => ({ resolveTrail }), [resolveTrail]);
+  return /* @__PURE__ */ jsx(PageTitleNavigationContext.Provider, { value, children });
+};
+const usePageTitleNavigation = () => useContext(PageTitleNavigationContext);
+export {
+  PageTitleNavigationProvider,
+  usePageTitleNavigation
+};
+//# sourceMappingURL=PageTitleNavigationContext.js.map

package/dist/components/Navigation/PageTitleNavigationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTitleNavigationContext.js","sources":["../../../src/components/Navigation/PageTitleNavigationContext.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext, useMemo } from 'react';\n\nimport { SymbolCodepoints } from '../UI/MaterialSymbol';\n\nexport interface IPageTitleTrailItem {\n  key: string;\n  /** Already translated: the host resolves i18n keys before handing the trail over. */\n  label: string;\n  to: string;\n  icon?: SymbolCodepoints;\n}\n\nexport type TPageTitleTrailResolver = (pathname: string) => Array<IPageTitleTrailItem>;\n\ninterface IPageTitleNavigationContextValue {\n  resolveTrail: TPageTitleTrailResolver;\n}\n\nconst resolveNoTrail: TPageTitleTrailResolver = () => [];\n\nconst PageTitleNavigationContext = createContext<IPageTitleNavigationContextValue>({ resolveTrail: resolveNoTrail });\n\ninterface IPageTitleNavigationProviderProps {\n  resolveTrail: TPageTitleTrailResolver;\n  children: ReactNode;\n}\n\n/** Lets `PageTitle` derive breadcrumb and icon from the host's navigation tree without knowing it. */\nexport const PageTitleNavigationProvider: React.FC<IPageTitleNavigationProviderProps> = ({\n  resolveTrail,\n  children,\n}) => {\n  const value = useMemo(() => ({ resolveTrail }), [resolveTrail]);\n  return <PageTitleNavigationContext.Provider value={value}>{children}</PageTitleNavigationContext.Provider>;\n};\n\nexport const usePageTitleNavigation = (): IPageTitleNavigationContextValue => useContext(PageTitleNavigationContext);\n"],"names":[],"mappings":";;AAkBA,MAAM,iBAA0C,MAAM,CAAA;AAEtD,MAAM,6BAA6B,cAAgD,EAAE,cAAc,gBAAgB;AAQ5G,MAAM,8BAA2E,CAAC;AAAA,EACvF;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,QAAQ,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAAC;AAC9D,SAAO,oBAAC,2BAA2B,UAA3B,EAAoC,OAAe,SAAA,CAAS;AACtE;AAEO,MAAM,yBAAyB,MAAwC,WAAW,0BAA0B;"}

package/dist/components/Search/UnifiedSearchBar.d.ts

@@ -0,0 +1,31 @@
+interface IUnifiedSearchBarSelectedFilters {
+    textSearch?: string | null;
+}
+interface IBaseSearchBarProps {
+    label?: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    className?: string;
+    debounceTime?: number;
+    initialValue?: string;
+    onClearFilter?: () => void;
+    minSearchLength?: number;
+    showClearButton?: boolean;
+    containerClassName?: string;
+    onSearchTermChange?: (searchTerm: string) => void;
+    selectedFilters?: IUnifiedSearchBarSelectedFilters;
+}
+interface IArraySearchBarProps<T> extends IBaseSearchBarProps {
+    mode: 'default';
+    searchableItems: Array<T> | null;
+    searchKeys: Array<keyof T>;
+    setFilteredItems: (filteredItems: Array<T>) => void;
+    useOnlyKeyword?: boolean;
+}
+interface ICallbackSearchBarProps extends IBaseSearchBarProps {
+    mode: 'callback';
+    filterCallback: (value: string) => void;
+}
+type TUnifiedSearchBarProps<T> = IArraySearchBarProps<T> | ICallbackSearchBarProps;
+declare function UnifiedSearchBar<T>(props: TUnifiedSearchBarProps<T>): import("react").JSX.Element;
+export default UnifiedSearchBar;