@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/InformationCard.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { ControlledAccordionRoot, ControlledAccordionHeader, ControlledAccordionBody } from "./ControlledAccordion.js";
+import ControlledTooltip from "./ControlledTooltip.js";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+import { useBreakpoint } from "../../hooks/useBreakpoint.js";
+import { AccordionIcon } from "./AccordionIcon.js";
+import CustomCard from "./CustomCard.js";
+import SkeletonLoading from "./SkeletonLoading.js";
+const CompactStatCard = ({ card, loading, isMobile }) => /* @__PURE__ */ jsx(
+  CustomCard,
+  {
+    itsClickable: !loading && !!card.onClick,
+    onClickHook: card.onClick,
+    className: classNames(
+      "shrink-0 p-3",
+      isMobile ? "basis-[calc(50%_-_4px)] snap-start" : "min-w-[140px] flex-1 basis-[140px]"
+    ),
+    children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+        card.icon && /* @__PURE__ */ jsx(MaterialSymbol, { icon: card.icon, size: 22, color: "rgb(var(--color-primary))" }),
+        /* @__PURE__ */ jsx("div", { className: "text-base font-bold text-foreground", children: loading ? /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-5" }) : card.value })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1 flex items-center gap-x-1", children: loading ? /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-3.5" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-muted", children: card.title }),
+        card.tooltip && /* @__PURE__ */ jsx(ControlledTooltip, { content: card.tooltip, className: "max-w-80", children: /* @__PURE__ */ jsx(
+          MaterialSymbol,
+          {
+            icon: "info",
+            size: 14,
+            color: "rgb(var(--color-foreground-subtle))",
+            className: "cursor-help"
+          }
+        ) })
+      ] }) }),
+      !isMobile && card.secondaryValue && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-foreground-subtle", children: loading ? /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-3.5" }) : card.secondaryValue }),
+      !isMobile && card.subValue && card.subValueLabel && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-foreground-faint", children: loading ? /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-3.5" }) : `${card.subValueLabel} ${card.subValue}` })
+    ] })
+  }
+);
+const InformationCard = ({
+  cards,
+  loading,
+  headerTitle,
+  headerActionSlot,
+  collapsible = true,
+  showHeader = true
+}) => {
+  const { t } = useTranslation("ui");
+  const { isMobile } = useBreakpoint();
+  const [open, setOpen] = useState(isMobile ? 0 : 1);
+  useEffect(() => {
+    setOpen(isMobile ? 0 : 1);
+  }, [isMobile]);
+  const handleOpen = (value) => setOpen(open === value ? 0 : value);
+  const visibleCards = (cards ?? []).filter((card) => card.show !== false);
+  return /* @__PURE__ */ jsxs(
+    ControlledAccordionRoot,
+    {
+      open: collapsible ? open === 1 : true,
+      icon: collapsible ? /* @__PURE__ */ jsx(AccordionIcon, { id: 1, open }) : /* @__PURE__ */ jsx(Fragment, {}),
+      children: [
+        showHeader && /* @__PURE__ */ jsx(
+          ControlledAccordionHeader,
+          {
+            onClick: collapsible ? () => handleOpen(1) : void 0,
+            tabIndex: collapsible ? void 0 : -1,
+            className: classNames(
+              "inter-font w-full border-b-0 py-2",
+              isMobile ? "p-0 text-base" : "p-1 text-lg",
+              !collapsible && "cursor-default"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+              /* @__PURE__ */ jsx("span", { children: headerTitle ?? t("informationCard.defaultTitle") }),
+              headerActionSlot && /* @__PURE__ */ jsx(Fragment, { children: headerActionSlot })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(ControlledAccordionBody, { className: "py-2 pl-2 pr-1", children: isMobile ? /* @__PURE__ */ jsx("div", { className: "flex h-[70px] snap-x snap-mandatory flex-nowrap gap-2 overflow-x-auto pb-1", children: visibleCards.map((card, index) => /* @__PURE__ */ jsx(CompactStatCard, { card, loading, isMobile: true }, index)) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: visibleCards.map((card, index) => /* @__PURE__ */ jsx(CompactStatCard, { card, loading }, index)) }) })
+      ]
+    }
+  );
+};
+export {
+  InformationCard as default
+};
+//# sourceMappingURL=InformationCard.js.map

package/dist/components/UI/InformationCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InformationCard.js","sources":["../../../src/components/UI/InformationCard.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport {\n  ControlledAccordionBody,\n  ControlledAccordionHeader,\n  ControlledAccordionRoot,\n} from '@/components/UI/ControlledAccordion';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { useBreakpoint } from '@/hooks/useBreakpoint';\n\nimport { AccordionIcon } from './AccordionIcon';\nimport CustomCard from './CustomCard';\nimport SkeletonLoading from './SkeletonLoading';\n\nexport interface IInformationCard {\n  title: string;\n  icon?: SymbolCodepoints;\n  value: string;\n  secondaryValue?: string;\n  subValue?: string;\n  subValueLabel?: string;\n  show?: boolean;\n  tooltip?: string;\n  /** When set, the card becomes clickable (e.g. drill down to a filtered list). */\n  onClick?: () => void;\n}\n\ninterface IInformationCardProps {\n  cards: Array<IInformationCard>;\n  loading?: boolean;\n  headerTitle?: string;\n  showHeaderBorder?: boolean;\n  headerActionSlot?: React.ReactNode;\n  /** When false the section stays expanded and the collapse affordance is removed. */\n  collapsible?: boolean;\n  /** When false only the cards render, with no title row above them. */\n  showHeader?: boolean;\n}\n\ninterface ICompactStatCardProps {\n  card: IInformationCard;\n  loading?: boolean;\n  isMobile?: boolean;\n}\n\nconst CompactStatCard: React.FC<ICompactStatCardProps> = ({ card, loading, isMobile }) => (\n  <CustomCard\n    itsClickable={!loading && !!card.onClick}\n    onClickHook={card.onClick}\n    className={classNames(\n      'shrink-0 p-3',\n      isMobile ? 'basis-[calc(50%_-_4px)] snap-start' : 'min-w-[140px] flex-1 basis-[140px]',\n    )}\n  >\n    <div>\n      <div className=\"flex items-center gap-x-2\">\n        {card.icon && <MaterialSymbol icon={card.icon} size={22} color=\"rgb(var(--color-primary))\" />}\n        <div className=\"text-base font-bold text-foreground\">\n          {loading ? <SkeletonLoading className=\"!h-5\" /> : card.value}\n        </div>\n      </div>\n      <div className=\"mt-1 flex items-center gap-x-1\">\n        {loading ? (\n          <SkeletonLoading className=\"!h-3.5\" />\n        ) : (\n          <>\n            <span className=\"text-xs text-foreground-muted\">{card.title}</span>\n            {card.tooltip && (\n              <ControlledTooltip content={card.tooltip} className=\"max-w-80\">\n                <MaterialSymbol\n                  icon=\"info\"\n                  size={14}\n                  color=\"rgb(var(--color-foreground-subtle))\"\n                  className=\"cursor-help\"\n                />\n              </ControlledTooltip>\n            )}\n          </>\n        )}\n      </div>\n      {!isMobile && card.secondaryValue && (\n        <div className=\"mt-1 text-xs text-foreground-subtle\">\n          {loading ? <SkeletonLoading className=\"!h-3.5\" /> : card.secondaryValue}\n        </div>\n      )}\n      {!isMobile && card.subValue && card.subValueLabel && (\n        <div className=\"mt-0.5 text-xs text-foreground-faint\">\n          {loading ? <SkeletonLoading className=\"!h-3.5\" /> : `${card.subValueLabel} ${card.subValue}`}\n        </div>\n      )}\n    </div>\n  </CustomCard>\n);\n\nconst InformationCard: React.FC<IInformationCardProps> = ({\n  cards,\n  loading,\n  headerTitle,\n  headerActionSlot,\n  collapsible = true,\n  showHeader = true,\n}) => {\n  const { t } = useTranslation('ui');\n  const { isMobile } = useBreakpoint();\n  const [open, setOpen] = useState(isMobile ? 0 : 1);\n\n  useEffect(() => {\n    setOpen(isMobile ? 0 : 1);\n  }, [isMobile]);\n\n  const handleOpen = (value: number) => setOpen(open === value ? 0 : value);\n\n  const visibleCards = (cards ?? []).filter((card) => card.show !== false);\n\n  return (\n    <ControlledAccordionRoot\n      open={collapsible ? open === 1 : true}\n      icon={collapsible ? <AccordionIcon id={1} open={open} /> : <></>}\n    >\n      {showHeader && (\n        <ControlledAccordionHeader\n          onClick={collapsible ? () => handleOpen(1) : undefined}\n          tabIndex={collapsible ? undefined : -1}\n          className={classNames(\n            'inter-font w-full border-b-0 py-2',\n            isMobile ? 'p-0 text-base' : 'p-1 text-lg',\n            !collapsible && 'cursor-default',\n          )}\n        >\n          <div className=\"flex items-center gap-x-2\">\n            <span>{headerTitle ?? t('informationCard.defaultTitle')}</span>\n            {headerActionSlot && <>{headerActionSlot}</>}\n          </div>\n        </ControlledAccordionHeader>\n      )}\n      <ControlledAccordionBody className=\"py-2 pl-2 pr-1\">\n        {isMobile ? (\n          <div className=\"flex h-[70px] snap-x snap-mandatory flex-nowrap gap-2 overflow-x-auto pb-1\">\n            {visibleCards.map((card, index) => (\n              <CompactStatCard key={index} card={card} loading={loading} isMobile />\n            ))}\n          </div>\n        ) : (\n          <div className=\"flex flex-wrap gap-2\">\n            {visibleCards.map((card, index) => (\n              <CompactStatCard key={index} card={card} loading={loading} />\n            ))}\n          </div>\n        )}\n      </ControlledAccordionBody>\n    </ControlledAccordionRoot>\n  );\n};\n\nexport default InformationCard;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/Kanban/KanbanBoard.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
+interface IKanbanBoardProps {
+    /** Cartão que acompanha o cursor. O host devolve o conteúdo do que está sendo arrastado. */
+    renderDragOverlay?: (activeId: string) => ReactNode;
+    /**
+     * Ids das colunas na ordem atual. Junto com `onLaneReorder`, liga o arraste de colunas:
+     * a lane ganha uma alça no cabeçalho e o quadro devolve a nova ordem inteira.
+     */
+    laneIds?: Array<string>;
+    onLaneReorder?: (orderedLaneIds: Array<string>) => void;
+    /** Largura do overlay. O padrão casa com a largura útil de uma lane. */
+    overlayClassName?: string;
+    onDragStart?: (event: DragStartEvent) => void;
+    onDragEnd: (event: DragEndEvent) => void;
+    onDragCancel?: () => void;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Casca de um quadro Kanban: o contexto de arraste, a faixa horizontal de colunas e o
+ * cartão que segue o cursor. É a ÚNICA implementação de quadro do app; um Kanban novo
+ * compõe `KanbanBoard` + `KanbanLane` + `KanbanCard` e traz só o conteúdo do cartão.
+ */
+declare const KanbanBoard: React.FC<IKanbanBoardProps>;
+export default KanbanBoard;

package/dist/components/UI/Kanban/KanbanBoard.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import classNames from "classnames";
+import { createPortal } from "react-dom";
+import { getPortalHost } from "../../../helpers/portalHost.js";
+import { useSensors, useSensor, PointerSensor, DndContext, DragOverlay, pointerWithin } from "@dnd-kit/core";
+import { arrayMove, SortableContext, horizontalListSortingStrategy } from "@dnd-kit/sortable";
+import { KANBAN_LANE_DRAG_TYPE, KanbanBoardContext } from "./kanbanBoardContext.js";
+const laneUnderPointer = (args) => pointerWithin(args);
+const DRAG_ACTIVATION_DISTANCE_PX = 6;
+const KanbanBoard = ({
+  renderDragOverlay,
+  laneIds,
+  onLaneReorder,
+  overlayClassName = "w-[17rem]",
+  onDragStart,
+  onDragEnd,
+  onDragCancel,
+  className,
+  children
+}) => {
+  const [activeId, setActiveId] = useState(null);
+  const [activeType, setActiveType] = useState(null);
+  const laneSortingEnabled = !!laneIds && !!onLaneReorder;
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: DRAG_ACTIVATION_DISTANCE_PX } })
+  );
+  const handleDragStart = useCallback(
+    (event) => {
+      const isLane = event.active.data.current?.kanbanType === KANBAN_LANE_DRAG_TYPE;
+      setActiveId(String(event.active.id));
+      setActiveType(isLane ? "lane" : "card");
+      if (!isLane) onDragStart?.(event);
+    },
+    [onDragStart]
+  );
+  const reorderLanes = useCallback(
+    (event) => {
+      if (!laneIds || !onLaneReorder || !event.over) return;
+      const fromIndex = laneIds.indexOf(String(event.active.id));
+      const toIndex = laneIds.indexOf(String(event.over.id));
+      if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) return;
+      onLaneReorder(arrayMove(laneIds, fromIndex, toIndex));
+    },
+    [laneIds, onLaneReorder]
+  );
+  const handleDragEnd = useCallback(
+    (event) => {
+      const isLane = event.active.data.current?.kanbanType === KANBAN_LANE_DRAG_TYPE;
+      setActiveId(null);
+      setActiveType(null);
+      if (isLane) {
+        reorderLanes(event);
+        return;
+      }
+      onDragEnd(event);
+    },
+    [onDragEnd, reorderLanes]
+  );
+  const handleDragCancel = useCallback(() => {
+    setActiveId(null);
+    setActiveType(null);
+    onDragCancel?.();
+  }, [onDragCancel]);
+  const boardContext = useMemo(
+    () => ({ draggingType: activeType, laneSortingEnabled }),
+    [activeType, laneSortingEnabled]
+  );
+  const portalHost = getPortalHost();
+  return /* @__PURE__ */ jsx(KanbanBoardContext.Provider, { value: boardContext, children: /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: laneUnderPointer,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      onDragCancel: handleDragCancel,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: classNames("flex min-h-0 flex-1 items-stretch gap-3 overflow-x-auto pb-2", className), children: laneSortingEnabled ? /* @__PURE__ */ jsx(SortableContext, { items: laneIds ?? [], strategy: horizontalListSortingStrategy, children }) : children }),
+        portalHost !== null && createPortal(
+          /* @__PURE__ */ jsx(DragOverlay, { children: activeId && activeType === "card" && renderDragOverlay ? /* @__PURE__ */ jsx("div", { className: classNames("rotate-2", overlayClassName), children: renderDragOverlay(activeId) }) : null }),
+          portalHost
+        )
+      ]
+    }
+  ) });
+};
+export {
+  KanbanBoard as default
+};
+//# sourceMappingURL=KanbanBoard.js.map

package/dist/components/UI/Kanban/KanbanBoard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanBoard.js","sources":["../../../../src/components/UI/Kanban/KanbanBoard.tsx"],"sourcesContent":["import { ReactNode, useCallback, useMemo, useState } from 'react';\nimport classNames from 'classnames';\nimport { createPortal } from 'react-dom';\n\nimport { getPortalHost } from '@/helpers/portalHost';\nimport {\n  CollisionDetection,\n  DndContext,\n  DragEndEvent,\n  DragOverlay,\n  DragStartEvent,\n  PointerSensor,\n  pointerWithin,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport { arrayMove, horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';\n\nimport { KANBAN_LANE_DRAG_TYPE, KanbanBoardContext, TKanbanDragType } from './kanbanBoardContext';\n\n/**\n * A coluna de destino é a que está SOB O CURSOR, não a que mais se sobrepõe ao cartão.\n * A detecção padrão do dnd-kit (`rectIntersection`) compara o retângulo do cartão\n * arrastado com o das colunas, e um cartão mais largo que a folga entre elas cobre duas\n * ao mesmo tempo: soltar caía na coluna errada mesmo com o cursor na certa.\n *\n * Sem coluna sob o cursor não há destino, e soltar na fresta entre duas não move nada.\n * É a resposta previsível: melhor não mover do que escolher uma coluna por proximidade.\n */\nconst laneUnderPointer: CollisionDetection = (args) => pointerWithin(args);\n\n/** Abaixo disto o gesto é um clique, não um arraste. */\nconst DRAG_ACTIVATION_DISTANCE_PX = 6;\n\ninterface IKanbanBoardProps {\n  /** Cartão que acompanha o cursor. O host devolve o conteúdo do que está sendo arrastado. */\n  renderDragOverlay?: (activeId: string) => ReactNode;\n  /**\n   * Ids das colunas na ordem atual. Junto com `onLaneReorder`, liga o arraste de colunas:\n   * a lane ganha uma alça no cabeçalho e o quadro devolve a nova ordem inteira.\n   */\n  laneIds?: Array<string>;\n  onLaneReorder?: (orderedLaneIds: Array<string>) => void;\n  /** Largura do overlay. O padrão casa com a largura útil de uma lane. */\n  overlayClassName?: string;\n  onDragStart?: (event: DragStartEvent) => void;\n  onDragEnd: (event: DragEndEvent) => void;\n  onDragCancel?: () => void;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Casca de um quadro Kanban: o contexto de arraste, a faixa horizontal de colunas e o\n * cartão que segue o cursor. É a ÚNICA implementação de quadro do app; um Kanban novo\n * compõe `KanbanBoard` + `KanbanLane` + `KanbanCard` e traz só o conteúdo do cartão.\n */\nconst KanbanBoard: React.FC<IKanbanBoardProps> = ({\n  renderDragOverlay,\n  laneIds,\n  onLaneReorder,\n  overlayClassName = 'w-[17rem]',\n  onDragStart,\n  onDragEnd,\n  onDragCancel,\n  className,\n  children,\n}) => {\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [activeType, setActiveType] = useState<TKanbanDragType | null>(null);\n  const laneSortingEnabled = !!laneIds && !!onLaneReorder;\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: DRAG_ACTIVATION_DISTANCE_PX } }),\n  );\n\n  const handleDragStart = useCallback(\n    (event: DragStartEvent) => {\n      const isLane = event.active.data.current?.kanbanType === KANBAN_LANE_DRAG_TYPE;\n      setActiveId(String(event.active.id));\n      setActiveType(isLane ? 'lane' : 'card');\n      // Arrastar coluna não é assunto do host: quem reordena é este componente.\n      if (!isLane) onDragStart?.(event);\n    },\n    [onDragStart],\n  );\n\n  const reorderLanes = useCallback(\n    (event: DragEndEvent) => {\n      if (!laneIds || !onLaneReorder || !event.over) return;\n\n      const fromIndex = laneIds.indexOf(String(event.active.id));\n      const toIndex = laneIds.indexOf(String(event.over.id));\n      if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) return;\n\n      onLaneReorder(arrayMove(laneIds, fromIndex, toIndex));\n    },\n    [laneIds, onLaneReorder],\n  );\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const isLane = event.active.data.current?.kanbanType === KANBAN_LANE_DRAG_TYPE;\n      setActiveId(null);\n      setActiveType(null);\n\n      if (isLane) {\n        reorderLanes(event);\n        return;\n      }\n\n      onDragEnd(event);\n    },\n    [onDragEnd, reorderLanes],\n  );\n\n  const handleDragCancel = useCallback(() => {\n    setActiveId(null);\n    setActiveType(null);\n    onDragCancel?.();\n  }, [onDragCancel]);\n\n  const boardContext = useMemo(\n    () => ({ draggingType: activeType, laneSortingEnabled }),\n    [activeType, laneSortingEnabled],\n  );\n\n  const portalHost = getPortalHost();\n\n  return (\n    <KanbanBoardContext.Provider value={boardContext}>\n      <DndContext\n        sensors={sensors}\n        collisionDetection={laneUnderPointer}\n        onDragStart={handleDragStart}\n        onDragEnd={handleDragEnd}\n        onDragCancel={handleDragCancel}\n      >\n        <div className={classNames('flex min-h-0 flex-1 items-stretch gap-3 overflow-x-auto pb-2', className)}>\n          {laneSortingEnabled ? (\n            <SortableContext items={laneIds ?? []} strategy={horizontalListSortingStrategy}>\n              {children}\n            </SortableContext>\n          ) : (\n            children\n          )}\n        </div>\n\n        {/* O overlay é `position: fixed`, e basta UM ancestral com `transform` para ele\n            deixar de se posicionar pela viewport e nascer deslocado, longe do cursor. O\n            corpo da DataTable, por exemplo, mantém um `translateY(0)` residual de uma\n            animação com `forwards`. No portal para o body não existe esse risco. */}\n        {portalHost !== null &&\n          createPortal(\n            <DragOverlay>\n              {/* A coluna arrastada acompanha o cursor pelo próprio transform do sortable,\n                então overlay é só para cartão. */}\n              {activeId && activeType === 'card' && renderDragOverlay ? (\n                <div className={classNames('rotate-2', overlayClassName)}>{renderDragOverlay(activeId)}</div>\n              ) : null}\n            </DragOverlay>,\n            portalHost,\n          )}\n      </DndContext>\n    </KanbanBoardContext.Provider>\n  );\n};\n\nexport default KanbanBoard;\n"],"names":[],"mappings":";;;;;;;;AA6BA,MAAM,mBAAuC,CAAC,SAAS,cAAc,IAAI;AAGzE,MAAM,8BAA8B;AAyBpC,MAAM,cAA2C,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AAC5D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiC,IAAI;AACzE,QAAM,qBAAqB,CAAC,CAAC,WAAW,CAAC,CAAC;AAC1C,QAAM,UAAU;AAAA,IACd,UAAU,eAAe,EAAE,sBAAsB,EAAE,UAAU,4BAAA,GAA+B;AAAA,EAAA;AAG9F,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAA0B;AACzB,YAAM,SAAS,MAAM,OAAO,KAAK,SAAS,eAAe;AACzD,kBAAY,OAAO,MAAM,OAAO,EAAE,CAAC;AACnC,oBAAc,SAAS,SAAS,MAAM;AAEtC,UAAI,CAAC,OAAQ,eAAc,KAAK;AAAA,IAClC;AAAA,IACA,CAAC,WAAW;AAAA,EAAA;AAGd,QAAM,eAAe;AAAA,IACnB,CAAC,UAAwB;AACvB,UAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,MAAM,KAAM;AAE/C,YAAM,YAAY,QAAQ,QAAQ,OAAO,MAAM,OAAO,EAAE,CAAC;AACzD,YAAM,UAAU,QAAQ,QAAQ,OAAO,MAAM,KAAK,EAAE,CAAC;AACrD,UAAI,cAAc,MAAM,YAAY,MAAM,cAAc,QAAS;AAEjE,oBAAc,UAAU,SAAS,WAAW,OAAO,CAAC;AAAA,IACtD;AAAA,IACA,CAAC,SAAS,aAAa;AAAA,EAAA;AAGzB,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAAwB;AACvB,YAAM,SAAS,MAAM,OAAO,KAAK,SAAS,eAAe;AACzD,kBAAY,IAAI;AAChB,oBAAc,IAAI;AAElB,UAAI,QAAQ;AACV,qBAAa,KAAK;AAClB;AAAA,MACF;AAEA,gBAAU,KAAK;AAAA,IACjB;AAAA,IACA,CAAC,WAAW,YAAY;AAAA,EAAA;AAG1B,QAAM,mBAAmB,YAAY,MAAM;AACzC,gBAAY,IAAI;AAChB,kBAAc,IAAI;AAClB,mBAAA;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,cAAc,YAAY;IACnC,CAAC,YAAY,kBAAkB;AAAA,EAAA;AAGjC,QAAM,aAAa,cAAA;AAEnB,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,cAClC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,oBAAoB;AAAA,MACpB,aAAa;AAAA,MACb,WAAW;AAAA,MACX,cAAc;AAAA,MAEd,UAAA;AAAA,QAAA,oBAAC,SAAI,WAAW,WAAW,gEAAgE,SAAS,GACjG,UAAA,qBACC,oBAAC,iBAAA,EAAgB,OAAO,WAAW,IAAI,UAAU,+BAC9C,SAAA,CACH,IAEA,UAEJ;AAAA,QAMC,eAAe,QACd;AAAA,8BACG,aAAA,EAGE,UAAA,YAAY,eAAe,UAAU,oBACpC,oBAAC,OAAA,EAAI,WAAW,WAAW,YAAY,gBAAgB,GAAI,4BAAkB,QAAQ,EAAA,CAAE,IACrF,MACN;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA,GAEN;AAEJ;"}

package/dist/components/UI/Kanban/KanbanCard.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+interface IKanbanCardProps {
+    /** Único no quadro INTEIRO. Num campo de vários valores o mesmo registro aparece em
+     *  mais de uma coluna, e ids repetidos fazem o dnd-kit arrastar o cartão errado. */
+    id: string;
+    /** Carga lida no `onDragEnd` (a coluna de origem, o registro). */
+    data?: Record<string, unknown>;
+    draggable?: boolean;
+    /** A escrita do movimento ainda está em voo: o cartão esmaece e ganha o spinner. */
+    isMoving?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Cartão arrastável. Envolve o conteúdo do host sem impor formato.
+ *
+ * Os `attributes` do dnd-kit ficam de fora de propósito: eles marcam a casca com
+ * `role="button"`, e um cartão costuma ter controles próprios dentro, o que produziria
+ * um botão dentro de outro.
+ */
+declare const KanbanCard: React.FC<IKanbanCardProps>;
+export default KanbanCard;

package/dist/components/UI/Kanban/KanbanCard.js

@@ -0,0 +1,47 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import classNames from "classnames";
+import LoadingSpinner from "../LoadingSpinner.js";
+import { useDraggable } from "@dnd-kit/core";
+const KanbanCard = ({
+  id,
+  data,
+  draggable = true,
+  isMoving = false,
+  className,
+  children
+}) => {
+  const { listeners, setNodeRef, isDragging } = useDraggable({ id, data, disabled: !draggable || isMoving });
+  const suppressNextClickRef = useRef(false);
+  useEffect(() => {
+    if (isDragging) suppressNextClickRef.current = true;
+  }, [isDragging]);
+  const handleClickCapture = (event) => {
+    if (!suppressNextClickRef.current) return;
+    suppressNextClickRef.current = false;
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      ...listeners,
+      onClickCapture: handleClickCapture,
+      className: classNames(
+        "relative touch-none",
+        draggable && !isMoving && "cursor-grab active:cursor-grabbing",
+        isDragging && "opacity-40",
+        className
+      ),
+      children: [
+        children,
+        isMoving && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center rounded-lg bg-surface/70", children: /* @__PURE__ */ jsx(LoadingSpinner, { size: 5 }) })
+      ]
+    }
+  );
+};
+export {
+  KanbanCard as default
+};
+//# sourceMappingURL=KanbanCard.js.map

package/dist/components/UI/Kanban/KanbanCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanCard.js","sources":["../../../../src/components/UI/Kanban/KanbanCard.tsx"],"sourcesContent":["import { MouseEvent, ReactNode, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { useDraggable } from '@dnd-kit/core';\n\ninterface IKanbanCardProps {\n  /** Único no quadro INTEIRO. Num campo de vários valores o mesmo registro aparece em\n   *  mais de uma coluna, e ids repetidos fazem o dnd-kit arrastar o cartão errado. */\n  id: string;\n  /** Carga lida no `onDragEnd` (a coluna de origem, o registro). */\n  data?: Record<string, unknown>;\n  draggable?: boolean;\n  /** A escrita do movimento ainda está em voo: o cartão esmaece e ganha o spinner. */\n  isMoving?: boolean;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Cartão arrastável. Envolve o conteúdo do host sem impor formato.\n *\n * Os `attributes` do dnd-kit ficam de fora de propósito: eles marcam a casca com\n * `role=\"button\"`, e um cartão costuma ter controles próprios dentro, o que produziria\n * um botão dentro de outro.\n */\nconst KanbanCard: React.FC<IKanbanCardProps> = ({\n  id,\n  data,\n  draggable = true,\n  isMoving = false,\n  className,\n  children,\n}) => {\n  const { listeners, setNodeRef, isDragging } = useDraggable({ id, data, disabled: !draggable || isMoving });\n\n  // Soltar o cartão termina em `pointerup`, que o navegador converte em `click`: sem isso\n  // todo arraste também abre o registro que acabou de ser movido.\n  const suppressNextClickRef = useRef(false);\n\n  useEffect(() => {\n    if (isDragging) suppressNextClickRef.current = true;\n  }, [isDragging]);\n\n  const handleClickCapture = (event: MouseEvent<HTMLDivElement>) => {\n    if (!suppressNextClickRef.current) return;\n    suppressNextClickRef.current = false;\n    event.preventDefault();\n    event.stopPropagation();\n  };\n\n  return (\n    <div\n      ref={setNodeRef}\n      {...listeners}\n      onClickCapture={handleClickCapture}\n      className={classNames(\n        'relative touch-none',\n        draggable && !isMoving && 'cursor-grab active:cursor-grabbing',\n        isDragging && 'opacity-40',\n        className,\n      )}\n    >\n      {children}\n      {isMoving && (\n        <div className=\"absolute inset-0 flex items-center justify-center rounded-lg bg-surface/70\">\n          <LoadingSpinner size={5} />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default KanbanCard;\n"],"names":[],"mappings":";;;;;AA0BA,MAAM,aAAyC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,WAAW,YAAY,WAAA,IAAe,aAAa,EAAE,IAAI,MAAM,UAAU,CAAC,aAAa,UAAU;AAIzG,QAAM,uBAAuB,OAAO,KAAK;AAEzC,YAAU,MAAM;AACd,QAAI,iCAAiC,UAAU;AAAA,EACjD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,qBAAqB,CAAC,UAAsC;AAChE,QAAI,CAAC,qBAAqB,QAAS;AACnC,yBAAqB,UAAU;AAC/B,UAAM,eAAA;AACN,UAAM,gBAAA;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG;AAAA,MACJ,gBAAgB;AAAA,MAChB,WAAW;AAAA,QACT;AAAA,QACA,aAAa,CAAC,YAAY;AAAA,QAC1B,cAAc;AAAA,QACd;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA;AAAA,QACA,gCACE,OAAA,EAAI,WAAU,8EACb,UAAA,oBAAC,gBAAA,EAAe,MAAM,EAAA,CAAG,EAAA,CAC3B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/UI/Kanban/KanbanLane.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode, Ref, UIEvent } from 'react';
+interface IKanbanLaneProps {
+    /** Id do destino do arraste. É o que chega em `event.over.id` no `onDragEnd`. */
+    id: string;
+    title: ReactNode;
+    /** Contagem no cabeçalho. Omita enquanto o número ainda não for confiável. */
+    count?: number;
+    /** Ponto colorido antes do título. Cor de DADO (a cor da etapa), não token de tema. */
+    accentColor?: string;
+    /** Controles à direita do título: busca, follow-up, menu. */
+    headerActions?: ReactNode;
+    /** Linhas extras do cabeçalho, abaixo do título (chips, período). */
+    headerExtra?: ReactNode;
+    /** Faixa entre o cabeçalho e a lista: campo de busca, aviso de destino. */
+    banner?: ReactNode;
+    /**
+     * A coluna aceita o cartão que está sendo arrastado agora. Um quadro com transições
+     * livres deixa no padrão; um com regra de fluxo (o workflow) calcula por coluna.
+     */
+    accepts?: boolean;
+    onScroll?: (event: UIEvent<HTMLDivElement>) => void;
+    scrollRef?: Ref<HTMLDivElement>;
+    className?: string;
+    /** Rótulo acessível da alça de reordenar, sempre de `t()`. */
+    reorderHandleLabel?: string;
+    children: ReactNode;
+}
+/**
+ * Uma coluna do quadro. Desenha a casca (largura, borda, cabeçalho, corpo rolável) e o
+ * estado de destino durante um arraste; o conteúdo é do host.
+ *
+ * Os três estados de destino existem porque um quadro com regra de transição precisa
+ * dizer ANTES do gesto terminar onde o cartão pode cair: sob o cursor, disponível, ou
+ * recusada. Sem isso o usuário só descobre a recusa depois de soltar.
+ */
+declare const KanbanLane: React.FC<IKanbanLaneProps>;
+export default KanbanLane;

package/dist/components/UI/Kanban/KanbanLane.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import ControlledButton from "../../Form/ControlledButton.js";
+import OutlinedChip from "../Chips/OutlinedChip.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useKanbanBoardContext, KANBAN_LANE_DRAG_TYPE } from "./kanbanBoardContext.js";
+const KanbanLane = ({
+  id,
+  title,
+  count,
+  accentColor,
+  headerActions,
+  headerExtra,
+  banner,
+  accepts = true,
+  onScroll,
+  scrollRef,
+  className,
+  reorderHandleLabel,
+  children
+}) => {
+  const { draggingType, laneSortingEnabled } = useKanbanBoardContext();
+  const { attributes, listeners, setNodeRef, transform, transition, isOver, isDragging } = useSortable({
+    id,
+    data: { kanbanType: KANBAN_LANE_DRAG_TYPE },
+    disabled: { draggable: !laneSortingEnabled, droppable: !accepts }
+  });
+  const isDraggingCard = draggingType === "card";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style: { transform: CSS.Transform.toString(transform), transition },
+      className: classNames(
+        "flex h-full w-72 shrink-0 flex-col rounded-xl border transition-colors",
+        {
+          "border-brand-border bg-brand-soft": accepts && isOver && isDraggingCard,
+          "border-dashed border-brand-border bg-surface-sunken": accepts && !isOver && isDraggingCard,
+          "border-border-subtle bg-surface-sunken opacity-60": !accepts && isDraggingCard,
+          "border-border bg-surface-sunken": !isDraggingCard
+        },
+        isDragging && "z-10 opacity-80 shadow-elevation3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col gap-y-1.5 px-3 py-2.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            laneSortingEnabled && /* @__PURE__ */ jsx(
+              ControlledButton,
+              {
+                defaultHtmlButton: true,
+                ...attributes,
+                ...listeners,
+                "aria-label": reorderHandleLabel,
+                className: "-ml-1 flex size-6 shrink-0 cursor-grab items-center justify-center rounded-md text-foreground-faint transition-colors hover:bg-muted-hover hover:text-foreground-muted active:cursor-grabbing",
+                children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "drag_indicator", size: 16 })
+              }
+            ),
+            accentColor && /* @__PURE__ */ jsx("span", { className: "size-2 shrink-0 rounded-full", style: { backgroundColor: accentColor }, "aria-hidden": true }),
+            /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center", children: title }),
+            count != null && /* @__PURE__ */ jsx(OutlinedChip, { count, tone: "neutral", size: "sm", className: "shrink-0" }),
+            headerActions
+          ] }),
+          headerExtra
+        ] }),
+        banner,
+        /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2", onScroll, children })
+      ]
+    }
+  );
+};
+export {
+  KanbanLane as default
+};
+//# sourceMappingURL=KanbanLane.js.map

package/dist/components/UI/Kanban/KanbanLane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanLane.js","sources":["../../../../src/components/UI/Kanban/KanbanLane.tsx"],"sourcesContent":["import { ReactNode, Ref, UIEvent } from 'react';\nimport classNames from 'classnames';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport OutlinedChip from '@/components/UI/Chips/OutlinedChip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\n\nimport { KANBAN_LANE_DRAG_TYPE, useKanbanBoardContext } from './kanbanBoardContext';\n\ninterface IKanbanLaneProps {\n  /** Id do destino do arraste. É o que chega em `event.over.id` no `onDragEnd`. */\n  id: string;\n  title: ReactNode;\n  /** Contagem no cabeçalho. Omita enquanto o número ainda não for confiável. */\n  count?: number;\n  /** Ponto colorido antes do título. Cor de DADO (a cor da etapa), não token de tema. */\n  accentColor?: string;\n  /** Controles à direita do título: busca, follow-up, menu. */\n  headerActions?: ReactNode;\n  /** Linhas extras do cabeçalho, abaixo do título (chips, período). */\n  headerExtra?: ReactNode;\n  /** Faixa entre o cabeçalho e a lista: campo de busca, aviso de destino. */\n  banner?: ReactNode;\n  /**\n   * A coluna aceita o cartão que está sendo arrastado agora. Um quadro com transições\n   * livres deixa no padrão; um com regra de fluxo (o workflow) calcula por coluna.\n   */\n  accepts?: boolean;\n  onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n  scrollRef?: Ref<HTMLDivElement>;\n  className?: string;\n  /** Rótulo acessível da alça de reordenar, sempre de `t()`. */\n  reorderHandleLabel?: string;\n  children: ReactNode;\n}\n\n/**\n * Uma coluna do quadro. Desenha a casca (largura, borda, cabeçalho, corpo rolável) e o\n * estado de destino durante um arraste; o conteúdo é do host.\n *\n * Os três estados de destino existem porque um quadro com regra de transição precisa\n * dizer ANTES do gesto terminar onde o cartão pode cair: sob o cursor, disponível, ou\n * recusada. Sem isso o usuário só descobre a recusa depois de soltar.\n */\nconst KanbanLane: React.FC<IKanbanLaneProps> = ({\n  id,\n  title,\n  count,\n  accentColor,\n  headerActions,\n  headerExtra,\n  banner,\n  accepts = true,\n  onScroll,\n  scrollRef,\n  className,\n  reorderHandleLabel,\n  children,\n}) => {\n  const { draggingType, laneSortingEnabled } = useKanbanBoardContext();\n\n  // `useSortable` registra o nó como arrastável E como destino, então ele cobre os dois\n  // papéis da coluna. Registrar um `useDroppable` ao lado criaria dois destinos com o\n  // mesmo id, e o dnd-kit resolveria o drop para o errado.\n  const { attributes, listeners, setNodeRef, transform, transition, isOver, isDragging } = useSortable({\n    id,\n    data: { kanbanType: KANBAN_LANE_DRAG_TYPE },\n    disabled: { draggable: !laneSortingEnabled, droppable: !accepts },\n  });\n\n  const isDraggingCard = draggingType === 'card';\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={{ transform: CSS.Transform.toString(transform), transition }}\n      className={classNames(\n        'flex h-full w-72 shrink-0 flex-col rounded-xl border transition-colors',\n        {\n          'border-brand-border bg-brand-soft': accepts && isOver && isDraggingCard,\n          'border-dashed border-brand-border bg-surface-sunken': accepts && !isOver && isDraggingCard,\n          'border-border-subtle bg-surface-sunken opacity-60': !accepts && isDraggingCard,\n          'border-border bg-surface-sunken': !isDraggingCard,\n        },\n        isDragging && 'z-10 opacity-80 shadow-elevation3',\n        className,\n      )}\n    >\n      <div className=\"flex shrink-0 flex-col gap-y-1.5 px-3 py-2.5\">\n        <div className=\"flex items-center gap-2\">\n          {laneSortingEnabled && (\n            <ControlledButton\n              defaultHtmlButton\n              {...attributes}\n              {...listeners}\n              aria-label={reorderHandleLabel}\n              className=\"-ml-1 flex size-6 shrink-0 cursor-grab items-center justify-center rounded-md text-foreground-faint transition-colors hover:bg-muted-hover hover:text-foreground-muted active:cursor-grabbing\"\n            >\n              <MaterialSymbol icon=\"drag_indicator\" size={16} />\n            </ControlledButton>\n          )}\n          {accentColor && (\n            <span className=\"size-2 shrink-0 rounded-full\" style={{ backgroundColor: accentColor }} aria-hidden />\n          )}\n          <div className=\"flex min-w-0 flex-1 items-center\">{title}</div>\n          {count != null && <OutlinedChip count={count} tone=\"neutral\" size=\"sm\" className=\"shrink-0\" />}\n          {headerActions}\n        </div>\n        {headerExtra}\n      </div>\n\n      {banner}\n\n      <div ref={scrollRef} className=\"flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2\" onScroll={onScroll}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default KanbanLane;\n"],"names":[],"mappings":";;;;;;;;AA8CA,MAAM,aAAyC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,cAAc,mBAAA,IAAuB,sBAAA;AAK7C,QAAM,EAAE,YAAY,WAAW,YAAY,WAAW,YAAY,QAAQ,WAAA,IAAe,YAAY;AAAA,IACnG;AAAA,IACA,MAAM,EAAE,YAAY,sBAAA;AAAA,IACpB,UAAU,EAAE,WAAW,CAAC,oBAAoB,WAAW,CAAC,QAAA;AAAA,EAAQ,CACjE;AAED,QAAM,iBAAiB,iBAAiB;AAExC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO,EAAE,WAAW,IAAI,UAAU,SAAS,SAAS,GAAG,WAAA;AAAA,MACvD,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,qCAAqC,WAAW,UAAU;AAAA,UAC1D,uDAAuD,WAAW,CAAC,UAAU;AAAA,UAC7E,qDAAqD,CAAC,WAAW;AAAA,UACjE,mCAAmC,CAAC;AAAA,QAAA;AAAA,QAEtC,cAAc;AAAA,QACd;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,gDACb,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,YAAA,sBACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,mBAAiB;AAAA,gBAChB,GAAG;AAAA,gBACH,GAAG;AAAA,gBACJ,cAAY;AAAA,gBACZ,WAAU;AAAA,gBAEV,UAAA,oBAAC,gBAAA,EAAe,MAAK,kBAAiB,MAAM,GAAA,CAAI;AAAA,cAAA;AAAA,YAAA;AAAA,YAGnD,eACC,oBAAC,QAAA,EAAK,WAAU,gCAA+B,OAAO,EAAE,iBAAiB,YAAA,GAAe,eAAW,KAAA,CAAC;AAAA,YAEtG,oBAAC,OAAA,EAAI,WAAU,oCAAoC,UAAA,OAAM;AAAA,YACxD,SAAS,QAAQ,oBAAC,cAAA,EAAa,OAAc,MAAK,WAAU,MAAK,MAAK,WAAU,WAAA,CAAW;AAAA,YAC3F;AAAA,UAAA,GACH;AAAA,UACC;AAAA,QAAA,GACH;AAAA,QAEC;AAAA,4BAEA,OAAA,EAAI,KAAK,WAAW,WAAU,gEAA+D,UAC3F,SAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/UI/Kanban/index.d.ts

@@ -0,0 +1,4 @@
+export { default as KanbanBoard } from './KanbanBoard';
+export { useKanbanBoardContext } from './kanbanBoardContext';
+export { default as KanbanCard } from './KanbanCard';
+export { default as KanbanLane } from './KanbanLane';

package/dist/components/UI/Kanban/index.js

@@ -0,0 +1,11 @@
+import { default as default2 } from "./KanbanBoard.js";
+import { useKanbanBoardContext } from "./kanbanBoardContext.js";
+import { default as default3 } from "./KanbanCard.js";
+import { default as default4 } from "./KanbanLane.js";
+export {
+  default2 as KanbanBoard,
+  default3 as KanbanCard,
+  default4 as KanbanLane,
+  useKanbanBoardContext
+};
+//# sourceMappingURL=index.js.map

package/dist/components/UI/Kanban/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/UI/Kanban/kanbanBoardContext.d.ts

@@ -0,0 +1,13 @@
+/** O que está sendo arrastado agora no quadro. */
+export type TKanbanDragType = 'card' | 'lane';
+interface IKanbanBoardContext {
+    /** `null` quando nada está sendo arrastado. */
+    draggingType: TKanbanDragType | null;
+    /** As colunas podem ser reordenadas: a lane mostra a alça no cabeçalho. */
+    laneSortingEnabled: boolean;
+}
+export declare const KanbanBoardContext: import('react').Context<IKanbanBoardContext>;
+export declare const useKanbanBoardContext: () => IKanbanBoardContext;
+/** Marca o arraste de uma coluna, para o quadro separar dos arrastes de cartão. */
+export declare const KANBAN_LANE_DRAG_TYPE: "lane";
+export {};

package/dist/components/UI/Kanban/kanbanBoardContext.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+const KanbanBoardContext = createContext({
+  draggingType: null,
+  laneSortingEnabled: false
+});
+const useKanbanBoardContext = () => useContext(KanbanBoardContext);
+const KANBAN_LANE_DRAG_TYPE = "lane";
+export {
+  KANBAN_LANE_DRAG_TYPE,
+  KanbanBoardContext,
+  useKanbanBoardContext
+};
+//# sourceMappingURL=kanbanBoardContext.js.map

package/dist/components/UI/Kanban/kanbanBoardContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kanbanBoardContext.js","sources":["../../../../src/components/UI/Kanban/kanbanBoardContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n/** O que está sendo arrastado agora no quadro. */\nexport type TKanbanDragType = 'card' | 'lane';\n\ninterface IKanbanBoardContext {\n  /** `null` quando nada está sendo arrastado. */\n  draggingType: TKanbanDragType | null;\n  /** As colunas podem ser reordenadas: a lane mostra a alça no cabeçalho. */\n  laneSortingEnabled: boolean;\n}\n\nexport const KanbanBoardContext = createContext<IKanbanBoardContext>({\n  draggingType: null,\n  laneSortingEnabled: false,\n});\n\nexport const useKanbanBoardContext = (): IKanbanBoardContext => useContext(KanbanBoardContext);\n\n/** Marca o arraste de uma coluna, para o quadro separar dos arrastes de cartão. */\nexport const KANBAN_LANE_DRAG_TYPE = 'lane' as const;\n"],"names":[],"mappings":";AAYO,MAAM,qBAAqB,cAAmC;AAAA,EACnE,cAAc;AAAA,EACd,oBAAoB;AACtB,CAAC;AAEM,MAAM,wBAAwB,MAA2B,WAAW,kBAAkB;AAGtF,MAAM,wBAAwB;"}

package/dist/components/UI/LazyMarkdown.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+declare const Markdown: import('react').LazyExoticComponent<typeof import('react-markdown').default>;
+type TLazyMarkdownProps = ComponentProps<typeof Markdown>;
+declare const LazyMarkdown: (props: TLazyMarkdownProps) => import("react").JSX.Element;
+export default LazyMarkdown;

package/dist/components/UI/LazyMarkdown.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { lazy, Suspense } from "react";
+const Markdown = lazy(() => import("react-markdown"));
+const LazyMarkdown = (props) => /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Markdown, { ...props }) });
+export {
+  LazyMarkdown as default
+};
+//# sourceMappingURL=LazyMarkdown.js.map

package/dist/components/UI/LazyMarkdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LazyMarkdown.js","sources":["../../../src/components/UI/LazyMarkdown.tsx"],"sourcesContent":["import { ComponentProps, lazy, Suspense } from 'react';\n\nconst Markdown = lazy(() => import('react-markdown'));\n\ntype TLazyMarkdownProps = ComponentProps<typeof Markdown>;\n\nconst LazyMarkdown = (props: TLazyMarkdownProps) => (\n  <Suspense fallback={null}>\n    <Markdown {...props} />\n  </Suspense>\n);\n\nexport default LazyMarkdown;\n"],"names":[],"mappings":";;AAEA,MAAM,WAAW,KAAK,MAAM,OAAO,gBAAgB,CAAC;AAIpD,MAAM,eAAe,CAAC,UACpB,oBAAC,UAAA,EAAS,UAAU,MAClB,UAAA,oBAAC,UAAA,EAAU,GAAG,MAAA,CAAO,EAAA,CACvB;"}

package/dist/components/UI/LoadingPage.d.ts

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

package/dist/components/UI/LoadingPage.js

@@ -0,0 +1,13 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+const LoadingPage = () => {
+  return (
+    // <div className="flex w-full justify-center">
+    //   <LoadingSpinner label="Carregando Aplicação..." />
+    // </div>
+    /* @__PURE__ */ jsx(Fragment, {})
+  );
+};
+export {
+  LoadingPage as default
+};
+//# sourceMappingURL=LoadingPage.js.map

package/dist/components/UI/LoadingPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingPage.js","sources":["../../../src/components/UI/LoadingPage.tsx"],"sourcesContent":["// general loading page\nconst LoadingPage = () => {\n  return (\n    // <div className=\"flex w-full justify-center\">\n    //   <LoadingSpinner label=\"Carregando Aplicação...\" />\n    // </div>\n    <></>\n  );\n};\n\nexport default LoadingPage;\n"],"names":[],"mappings":";AACA,MAAM,cAAc,MAAM;AACxB;AAAA;AAAA;AAAA;AAAA,IAIE,oBAAA,UAAA,CAAA,CAAE;AAAA;AAEN;"}

package/dist/components/UI/LoadingSpinner.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+interface ILoadingSpinnerProps {
+    className?: string;
+    size?: number;
+    /**
+     * A token name, NOT a CSS colour: it is interpolated into `text-${color}`. Passing a
+     * palette shade freezes the spinner to one theme, and passing `rgb(var(--…))` produces
+     * a class that does not exist, so the spinner renders with no colour at all.
+     */
+    color?: string;
+    label?: string;
+}
+declare const LoadingSpinner: React.FC<ILoadingSpinnerProps>;
+export default LoadingSpinner;

package/dist/components/UI/LoadingSpinner.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const LoadingSpinner = ({ className, size = 8, color = "foreground-muted", label }) => /* @__PURE__ */ jsxs("div", { className: classNames("flex items-center justify-center gap-x-2", className), children: [
+  /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: classNames("animate-spin", {
+        [`w-${size}`]: size,
+        [`text-${color}`]: color
+      }),
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      children: [
+        /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          }
+        )
+      ]
+    }
+  ),
+  label && /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-subtle", children: label })
+] });
+export {
+  LoadingSpinner as default
+};
+//# sourceMappingURL=LoadingSpinner.js.map

package/dist/components/UI/LoadingSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.js","sources":["../../../src/components/UI/LoadingSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\n\ninterface ILoadingSpinnerProps {\n  className?: string;\n  size?: number;\n  /**\n   * A token name, NOT a CSS colour: it is interpolated into `text-${color}`. Passing a\n   * palette shade freezes the spinner to one theme, and passing `rgb(var(--…))` produces\n   * a class that does not exist, so the spinner renders with no colour at all.\n   */\n  color?: string;\n  label?: string;\n}\n\nconst LoadingSpinner: React.FC<ILoadingSpinnerProps> = ({ className, size = 8, color = 'foreground-muted', label }) => (\n  <div className={classNames('flex items-center justify-center gap-x-2', className)}>\n    <svg\n      className={classNames('animate-spin', {\n        [`w-${size}`]: size,\n        [`text-${color}`]: color,\n      })}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n    >\n      {/* eslint-disable-next-line i18n-check/no-literal-jsx-strings */}\n      <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      ></path>\n    </svg>\n\n    {label && <span className=\"text-xs text-foreground-subtle\">{label}</span>}\n  </div>\n);\n\nexport default LoadingSpinner;\n"],"names":[],"mappings":";;AAeA,MAAM,iBAAiD,CAAC,EAAE,WAAW,OAAO,GAAG,QAAQ,oBAAoB,MAAA,2BACxG,OAAA,EAAI,WAAW,WAAW,4CAA4C,SAAS,GAC9E,UAAA;AAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,gBAAgB;AAAA,QACpC,CAAC,KAAK,IAAI,EAAE,GAAG;AAAA,QACf,CAAC,QAAQ,KAAK,EAAE,GAAG;AAAA,MAAA,CACpB;AAAA,MACD,OAAM;AAAA,MACN,MAAK;AAAA,MACL,SAAQ;AAAA,MAGR,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,WAAU,cAAa,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,gBAAe,aAAY,KAAI;AAAA,QAC5F;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAAA,EAGF,SAAS,oBAAC,QAAA,EAAK,WAAU,kCAAkC,UAAA,MAAA,CAAM;AAAA,EAAA,CACpE;"}