@alfadocs/ui-kit-debug 0.69.0 → 0.71.0

package/dist/_chunks/tab-bar-B1ovILzh.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tab-bar-B1ovILzh.js","sources":["../../src/components/tab-bar/tab-bar.tsx"],"sourcesContent":["/**\n * TabBar — a floating-pill bar of page-level navigation tabs.\n *\n * Each tab is an icon + label (+ optional count badge); the active tab is\n * marked with `aria-current=\"page\"` and an `--accent` underline. The bar is a\n * glassy `--card` pill that floats on whatever canvas the consumer provides\n * (the strip area itself is transparent, so it blends with the surrounding\n * surface).\n *\n * Two layouts:\n * - default (`fill` off): content-width tabs that **centre** when they fit and\n *   scroll from the inline-start (`safe center`) when they overflow, with a\n *   gutter preserved at both ends. The label stacks under the icon below `sm`.\n *   Use this when the tab set is open-ended (e.g. a marketplace app's routes).\n * - `fill`: equal-width tabs that fill the bar and always stack the label under\n *   the icon — a fixed, always-visible set that fits any column width without\n *   scrolling (e.g. a patient portal's four sections).\n *\n * Tabs render as links when given an `href` (real navigation) or as buttons\n * otherwise (in-app view switching via `onSelect`). Use it as a header (top,\n * default) for section navigation; `position=\"bottom\"` floats it from the\n * bottom edge for a footer.\n *\n * SPA / consumer-router links: pass `renderLink` and TabBar hands each `href`\n * tab off to your router's `<Link>` instead of rendering its own `<a>` — the\n * embedded MarketplaceAppShell strip uses this so a tab click is a client-side\n * route change, not a full page navigation. The kit forwards the same\n * `className` + `aria-current` so the accent-underline active styling and the\n * `aria-current=\"page\"` marker survive in both modes. With `renderLink`\n * omitted the output is the plain `<a href>` exactly as before.\n */\nimport { forwardRef, Fragment, type MouseEvent, type ReactNode } from 'react';\nimport { cva } from 'class-variance-authority';\n\nimport { Badge } from '../badge';\n\nexport interface TabBarItem {\n  /** Stable id; also the value handed to `onSelect` for button tabs. */\n  id: string;\n  /** Pre-translated label — consumers localise their own nav copy. */\n  label: string;\n  /** Optional leading icon (a lucide-react element or equivalent), tinted with `--accent`. */\n  icon?: ReactNode;\n  /** Optional unseen-item count rendered as a pill badge. */\n  badgeCount?: number;\n  /** Mark the tab as the current page (`aria-current='page'` + accent underline). */\n  isActive?: boolean;\n  /** When set, the tab renders as a link to this href; otherwise it's a button. */\n  href?: string;\n  /**\n   * Optional click handler threaded onto the link tab's `<a>` (or, when\n   * `renderLink` is supplied, available to the consumer's router element). Use\n   * it to intercept a same-origin click and route client-side without a full\n   * navigation. Only applies to `href` (link) tabs — button tabs use `onSelect`.\n   */\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n}\n\n/**\n * Props the kit hands to `renderLink` for each `href` tab. The consumer returns\n * their router's `<Link to={href}>` carrying the same `className` (the active\n * accent-underline styling) and `aria-current` (`'page'` on the active tab).\n */\nexport interface TabBarRenderLinkProps {\n  /** The tab's destination — feed it to your router's `to` / `href`. */\n  href: string;\n  /** The kit's tab classes (CVA output) — apply verbatim to the link element. */\n  className: string;\n  /** Icon + label + badge — render as the link's children. */\n  children: ReactNode;\n  /** `'page'` on the active tab, otherwise omitted — forward to the link. */\n  'aria-current'?: 'page';\n  /** Optional per-item click handler (the item's `onClick`), if supplied. */\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n}\n\nexport interface TabBarProps {\n  /** The tabs, in order. */\n  items: TabBarItem[];\n  /** Accessible name for the `<nav>` landmark. */\n  ariaLabel: string;\n  /** Fires with the tab `id` when a button tab (one without `href`) is chosen. */\n  onSelect?: (id: string) => void;\n  /**\n   * Render an `href` tab via the consumer's router instead of the kit's own\n   * `<a>`. TabBar calls it for each link tab and renders the returned node; the\n   * consumer returns their `<Link to={href}>` carrying the supplied `className`\n   * + `aria-current` so the active accent underline and the `aria-current=\"page\"`\n   * marker are preserved. Use it for SPA navigation (e.g. the MarketplaceAppShell\n   * strip) so a tab click is a client-side route change, not a full page load.\n   * Omit it to render the plain `<a href>` exactly as before. Button tabs (no\n   * `href`) ignore `renderLink` and continue to use `onSelect`.\n   */\n  renderLink?: (props: TabBarRenderLinkProps) => ReactNode;\n  /**\n   * Equal-width tabs that fill the bar and always stack the label under the\n   * icon (for a fixed, always-visible set). Off (default) = content-width tabs\n   * that centre when they fit and scroll when they overflow.\n   */\n  fill?: boolean;\n  /**\n   * Float side. `'top'` (default) gutters from the top edge for a header;\n   * `'bottom'` gutters from the bottom edge for a footer.\n   */\n  position?: 'top' | 'bottom';\n  /** Extra classes merged onto the outer strip (e.g. sticky/fixed positioning). */\n  className?: string;\n}\n\nfunction formatBadgeCount(count: number): string {\n  return count > 99 ? '99+' : String(count);\n}\n\n/* Transparent strip area — provides the floating gutter on the active side. The\n   default layout also insets the pill horizontally so it reads as a floating\n   strip; `fill` drops that inset so the pill spans the full width and aligns\n   with the consumer's content (e.g. a portal's cards). */\nconst stripVariants = cva('ds:shrink-0', {\n  variants: {\n    position: {\n      top: 'ds:pt-[var(--spacing-md)]',\n      bottom: 'ds:pb-[var(--spacing-md)]',\n    },\n    fill: {\n      false: 'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n      true: '',\n    },\n  },\n  defaultVariants: { position: 'top', fill: false },\n});\n\n/* The pill is the flex scroll container. `safe center` centres the tabs when\n   they fit but falls back to start-alignment the moment they overflow, so the\n   row stays fully scrollable end to end with nothing clipped. */\nconst pillClasses =\n  'ds:flex ds:[justify-content:safe_center] ds:overflow-x-auto ds:rounded-[var(--radius-lg)] ds:border ds:border-[color:var(--card-border)] ds:bg-[var(--card)]/80 ds:backdrop-blur-md ds:shadow-[var(--shadow-md)] ds:py-[var(--spacing-xs)]';\n\n/* The nav's inline padding is the start/end gutter — it scrolls WITH the tabs,\n   so the gutter survives a full scroll. Content width (`shrink-0`) by default so\n   it overflows and scrolls; `w-full` in fill mode so the tabs spread to fit. */\nconst navVariants = cva(\n  'ds:flex ds:items-stretch ds:gap-[var(--spacing-xs)] ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]',\n  {\n    variants: {\n      fill: { false: 'ds:shrink-0', true: 'ds:w-full' },\n    },\n    defaultVariants: { fill: false },\n  },\n);\n\n/* Each tab is a centred flex box so the icon + label sit centred on both axes.\n   Regular weight; the active state is carried by the accent underline + accent\n   icon, not a heavier weight. */\nconst tabVariants = cva(\n  'ds:group ds:flex ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:whitespace-nowrap ds:cursor-pointer ds:appearance-none ds:border-0 ds:bg-transparent ds:text-[length:var(--font-size-sm)] ds:font-[var(--font-weight-regular)] ds:text-[color:var(--foreground)] ds:no-underline ds:hover:bg-[var(--muted)]/20 ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]',\n  {\n    variants: {\n      fill: {\n        // Responsive: label under the icon below `sm`, beside it at `sm`+.\n        false: 'ds:flex-col ds:sm:flex-row ds:sm:gap-[var(--spacing-sm)]',\n        // Fill the bar, always icon-over-label. No `min-w-0`, so a tab never\n        // shrinks below its label (labels never overlap); if the full set can't\n        // fit, the pill scrolls instead.\n        true: 'ds:flex-1 ds:basis-0 ds:flex-col',\n      },\n    },\n    defaultVariants: { fill: false },\n  },\n);\n\nconst iconClasses =\n  'ds:inline-flex ds:items-center ds:text-[color:var(--accent)] ds:[&>svg]:size-4';\n\n/* The accent underline rides the label text itself (not the whole tab), so it\n   never reaches the icon or badge and never has to propagate through flex. */\nconst labelClasses =\n  'ds:group-aria-[current=page]:underline ds:group-aria-[current=page]:decoration-2 ds:group-aria-[current=page]:decoration-[color:var(--accent)] ds:group-aria-[current=page]:underline-offset-[var(--spacing-xs)]';\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(\n  (\n    {\n      items,\n      ariaLabel,\n      onSelect,\n      renderLink,\n      fill = false,\n      position = 'top',\n      className,\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        data-component=\"tab-bar\"\n        className={`${stripVariants({ position, fill })}${className ? ` ${className}` : ''}`}\n      >\n        <div className={pillClasses}>\n          <nav aria-label={ariaLabel} className={navVariants({ fill })}>\n            {items.map((item) => {\n              const badge =\n                typeof item.badgeCount === 'number' && item.badgeCount > 0\n                  ? item.badgeCount\n                  : undefined;\n              const ariaCurrent = item.isActive ? 'page' : undefined;\n              const inner = (\n                <>\n                  {item.icon ? (\n                    <span aria-hidden=\"true\" className={iconClasses}>\n                      {item.icon}\n                    </span>\n                  ) : null}\n                  {/* Label + badge stay paired; they sit under the icon when the\n                      tab stacks to a column. */}\n                  <span className=\"ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]\">\n                    <span className={labelClasses}>{item.label}</span>\n                    {badge !== undefined ? (\n                      <Badge variant=\"neutral\">{formatBadgeCount(badge)}</Badge>\n                    ) : null}\n                  </span>\n                </>\n              );\n              if (item.href !== undefined) {\n                const tabClassName = tabVariants({ fill });\n                // Consumer-router mode: hand the tab to the consumer's <Link>,\n                // forwarding the same className + aria-current (+ the item's\n                // onClick) so the active styling and `aria-current=\"page\"`\n                // marker carry over and clicking routes client-side.\n                if (renderLink) {\n                  return (\n                    <Fragment key={item.id}>\n                      {renderLink({\n                        href: item.href,\n                        className: tabClassName,\n                        children: inner,\n                        'aria-current': ariaCurrent,\n                        onClick: item.onClick,\n                      })}\n                    </Fragment>\n                  );\n                }\n                // Default: plain anchor — byte-identical to before when no\n                // per-item onClick is supplied (onClick is omitted entirely,\n                // not passed as undefined, so the rendered <a> is unchanged).\n                return (\n                  <a\n                    key={item.id}\n                    href={item.href}\n                    aria-current={ariaCurrent}\n                    className={tabClassName}\n                    {...(item.onClick ? { onClick: item.onClick } : {})}\n                  >\n                    {inner}\n                  </a>\n                );\n              }\n              return (\n                <button\n                  key={item.id}\n                  type=\"button\"\n                  aria-current={ariaCurrent}\n                  className={tabVariants({ fill })}\n                  onClick={() => onSelect?.(item.id)}\n                >\n                  {inner}\n                </button>\n              );\n            })}\n          </nav>\n        </div>\n      </div>\n    );\n  },\n);\nTabBar.displayName = 'TabBar';\n"],"names":["formatBadgeCount","count","stripVariants","cva","pillClasses","navVariants","tabVariants","iconClasses","labelClasses","TabBar","forwardRef","items","ariaLabel","onSelect","renderLink","fill","position","className","ref","jsx","item","badge","ariaCurrent","inner","jsxs","Fragment","Badge","tabClassName"],"mappings":";;;;AA6GA,SAASA,EAAiBC,GAAuB;AAC/C,SAAOA,IAAQ,KAAK,QAAQ,OAAOA,CAAK;AAC1C;AAMA,MAAMC,IAAgBC,EAAI,eAAe;AAAA,EACvC,UAAU;AAAA,IACR,UAAU;AAAA,MACR,KAAK;AAAA,MACL,QAAQ;AAAA,IAAA;AAAA,IAEV,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,iBAAiB,EAAE,UAAU,OAAO,MAAM,GAAA;AAC5C,CAAC,GAKKC,IACJ,8OAKIC,IAAcF;AAAA,EAClB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM,EAAE,OAAO,eAAe,MAAM,YAAA;AAAA,IAAY;AAAA,IAElD,iBAAiB,EAAE,MAAM,GAAA;AAAA,EAAM;AAEnC,GAKMG,IAAcH;AAAA,EAClB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA;AAAA,QAEJ,OAAO;AAAA;AAAA;AAAA;AAAA,QAIP,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB,EAAE,MAAM,GAAA;AAAA,EAAM;AAEnC,GAEMI,IACJ,kFAIIC,IACJ,oNAEWC,IAASC;AAAA,EACpB,CACE;AAAA,IACE,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,EAAA,GAEFC,MAGE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,kBAAe;AAAA,MACf,WAAW,GAAGhB,EAAc,EAAE,UAAAc,GAAU,MAAAD,EAAA,CAAM,CAAC,GAAGE,IAAY,IAAIA,CAAS,KAAK,EAAE;AAAA,MAElF,4BAAC,OAAA,EAAI,WAAWb,GACd,UAAA,gBAAAe,EAAC,SAAI,cAAYP,GAAW,WAAWP,EAAY,EAAE,MAAAU,EAAA,CAAM,GACxD,UAAAJ,EAAM,IAAI,CAACS,MAAS;AACnB,cAAMC,IACJ,OAAOD,EAAK,cAAe,YAAYA,EAAK,aAAa,IACrDA,EAAK,aACL,QACAE,IAAcF,EAAK,WAAW,SAAS,QACvCG,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,UAAAL,EAAK,yBACH,QAAA,EAAK,eAAY,QAAO,WAAWb,GACjC,UAAAa,EAAK,KAAA,CACR,IACE;AAAA,UAGJ,gBAAAI,EAAC,QAAA,EAAK,WAAU,6DACd,UAAA;AAAA,YAAA,gBAAAL,EAAC,QAAA,EAAK,WAAWX,GAAe,UAAAY,EAAK,OAAM;AAAA,YAC1CC,MAAU,SACT,gBAAAF,EAACO,GAAA,EAAM,SAAQ,WAAW,UAAA1B,EAAiBqB,CAAK,EAAA,CAAE,IAChD;AAAA,UAAA,EAAA,CACN;AAAA,QAAA,GACF;AAEF,YAAID,EAAK,SAAS,QAAW;AAC3B,gBAAMO,IAAerB,EAAY,EAAE,MAAAS,GAAM;AAKzC,iBAAID,IAEA,gBAAAK,EAACM,GAAA,EACE,UAAAX,EAAW;AAAA,YACV,MAAMM,EAAK;AAAA,YACX,WAAWO;AAAA,YACX,UAAUJ;AAAA,YACV,gBAAgBD;AAAA,YAChB,SAASF,EAAK;AAAA,UAAA,CACf,EAAA,GAPYA,EAAK,EAQpB,IAOF,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,MAAMC,EAAK;AAAA,cACX,gBAAcE;AAAA,cACd,WAAWK;AAAA,cACV,GAAIP,EAAK,UAAU,EAAE,SAASA,EAAK,QAAA,IAAY,CAAA;AAAA,cAE/C,UAAAG;AAAA,YAAA;AAAA,YANIH,EAAK;AAAA,UAAA;AAAA,QAShB;AACA,eACE,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,gBAAcG;AAAA,YACd,WAAWhB,EAAY,EAAE,MAAAS,GAAM;AAAA,YAC/B,SAAS,MAAMF,KAAA,gBAAAA,EAAWO,EAAK;AAAA,YAE9B,UAAAG;AAAA,UAAA;AAAA,UANIH,EAAK;AAAA,QAAA;AAAA,MAShB,CAAC,GACH,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AACAX,EAAO,cAAc;"}

package/dist/_chunks/task-card-BwY9jaV1.js

@@ -1,124 +0,0 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import { c as g } from "./index-D2ZczOXr.js";
-import { useTranslation as x } from "react-i18next";
-import { C as y } from "./chevron-right-BrpYejk0.js";
-import { S as N } from "./square-check-big-Jr-0202D.js";
-import { C as k } from "./circle-alert-ChA9opNA.js";
-import { S as C } from "./square-CZoGU14v.js";
-const L = g(
-  [
-    "ds:relative ds:flex ds:items-start ds:gap-[var(--spacing-sm)]",
-    "ds:rounded-[var(--radius-sm)]",
-    "ds:transition-colors",
-    "ds:motion-reduce:transition-none",
-    "ds:text-start ds:group",
-    "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2",
-    "ds:forced-colors:border ds:forced-colors:border-[CanvasText]"
-  ].join(" "),
-  {
-    variants: {
-      size: {
-        sm: "ds:p-[var(--spacing-sm)]",
-        md: "ds:p-[var(--spacing-md)]"
-      },
-      interactive: {
-        true: "ds:hover:bg-[color:var(--muted)]/40 ds:cursor-pointer",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      size: "sm",
-      interactive: !1
-    }
-  }
-), u = [
-  "ds:focus-visible:outline-none",
-  "ds:after:content-[''] ds:after:absolute ds:after:inset-0 ds:after:rounded-[var(--radius-sm)]",
-  "ds:after:pointer-events-auto",
-  "ds:focus-visible:after:outline-[length:var(--focus-ring-width)]",
-  "ds:focus-visible:after:outline-solid",
-  "ds:focus-visible:after:outline-[color:var(--ring)]",
-  "ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]",
-  "ds:forced-colors:focus-visible:after:outline-[CanvasText]"
-].join(" ");
-function w(s) {
-  return /^(https?:\/\/(?!\/)|\/(?!\/)|#)/.test(s);
-}
-function z({
-  status: s,
-  priority: a
-}) {
-  const e = a === "high" ? "ds:text-[color:var(--destructive)]" : "ds:text-[color:var(--muted-foreground)]";
-  return s === "done" ? /* @__PURE__ */ r(N, { "aria-hidden": "true", className: `ds:size-4 ${e}` }) : a === "high" ? /* @__PURE__ */ r(k, { "aria-hidden": "true", className: `ds:size-4 ${e}` }) : /* @__PURE__ */ r(C, { "aria-hidden": "true", className: `ds:size-4 ${e}` });
-}
-const S = b(
-  ({ item: s, size: a = "sm", onActivate: e, actions: l, className: f, ...p }, m) => {
-    const { t: h } = x(), t = !!e, v = !!s.url && w(s.url), i = h("taskCard.itemLabel", {
-      title: s.title,
-      due: s.dueLabel ?? "",
-      defaultValue: '{{title}}{{due, prepend, " · "}}'
-    }), n = /* @__PURE__ */ r("span", { className: "ds:flex-1 ds:min-w-0 ds:truncate type-body-sm ds:text-[color:var(--foreground)]", children: s.title });
-    let d;
-    return t && v ? d = /* @__PURE__ */ r(
-      "a",
-      {
-        href: s.url,
-        "aria-label": i,
-        className: u + " ds:contents",
-        onClick: (o) => {
-          o.defaultPrevented || o.metaKey || o.ctrlKey || o.shiftKey || e == null || e(s);
-        },
-        children: n
-      }
-    ) : t ? d = /* @__PURE__ */ r(
-      "button",
-      {
-        type: "button",
-        "aria-label": i,
-        className: u + " ds:contents ds:bg-transparent ds:border-0 ds:p-0 ds:text-start",
-        onClick: () => e == null ? void 0 : e(s),
-        children: n
-      }
-    ) : d = n, /* @__PURE__ */ c(
-      "div",
-      {
-        ref: m,
-        role: "listitem",
-        "data-component": "task-card",
-        "data-component-id": s.id,
-        "data-status": s.status ?? "open",
-        "data-priority": s.priority ?? "normal",
-        className: L({ size: a, interactive: t, className: f }),
-        ...p,
-        children: [
-          /* @__PURE__ */ r("span", { className: "ds:mt-[var(--spacing-2xs)] ds:shrink-0", children: /* @__PURE__ */ r(z, { status: s.status, priority: s.priority }) }),
-          /* @__PURE__ */ c("div", { className: "ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]", children: [
-            d,
-            s.description ? /* @__PURE__ */ r("span", { className: "type-body-sm ds:text-[color:var(--muted-foreground)] ds:truncate", children: s.description }) : null,
-            s.note ? /* @__PURE__ */ r("span", { className: "type-body-sm ds:text-[color:var(--muted-foreground)] ds:line-clamp-2", children: s.note }) : null,
-            s.linkedLabel ? /* @__PURE__ */ r("span", { className: "type-eyebrow ds:text-[color:var(--muted-foreground)] ds:truncate", children: s.linkedLabel }) : null,
-            s.dueLabel ? /* @__PURE__ */ r("span", { className: "type-eyebrow ds:text-[color:var(--muted-foreground)]", children: s.dueLabel }) : null
-          ] }),
-          l ? (
-            // Above the stretched-link overlay so the buttons stay clickable.
-            /* @__PURE__ */ r("span", { className: "ds:relative ds:z-[1] ds:flex ds:items-center ds:gap-[var(--spacing-2xs)] ds:shrink-0", children: l })
-          ) : null,
-          t ? /* @__PURE__ */ r(
-            y,
-            {
-              "aria-hidden": "true",
-              className: "ds:mt-[var(--spacing-2xs)] ds:size-4 ds:shrink-0 ds:text-[color:var(--muted-foreground)] ds:opacity-0 ds:transition-opacity ds:motion-reduce:transition-none ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:rtl:rotate-180"
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
-S.displayName = "TaskCard";
-export {
-  S as T,
-  w as i
-};
-//# sourceMappingURL=task-card-BwY9jaV1.js.map

package/dist/_chunks/task-card-BwY9jaV1.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"task-card-BwY9jaV1.js","sources":["../../src/components/task-card/task-card.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { CheckSquare, Square, AlertCircle, ChevronRight } from 'lucide-react';\n\n/* ------------------------------------------------------------------ */\n/* Types                                                               */\n/* ------------------------------------------------------------------ */\n\nexport type TaskStatus = 'open' | 'in-progress' | 'done';\nexport type TaskPriority = 'low' | 'normal' | 'high';\n\nexport interface TaskItem {\n  /** Unique identifier for the task. */\n  id: string;\n  /** Title — single line, primary content. */\n  title: string;\n  /** Optional secondary line (e.g. \"Patient A · Due today\"). */\n  description?: string;\n  /**\n   * Localised due-date hint (e.g. \"Due today\" / \"Tomorrow\"). Rendered as a\n   * trailing eyebrow chip when set; consumers compute the bucket and pass\n   * the localised string.\n   */\n  dueLabel?: string;\n  /**\n   * Linked-entity line (the patient / company / operator the task points\n   * at). Rendered as an eyebrow under the description; localised by the\n   * consumer (e.g. \"Patient: Mario Rossi\").\n   */\n  linkedLabel?: string;\n  /** Free-text note attached to the task — muted body line, clamped. */\n  note?: string;\n  /** Lifecycle state — drives the leading icon. */\n  status?: TaskStatus;\n  /** Priority — `high` colours the leading icon as `--destructive`. */\n  priority?: TaskPriority;\n  /** Optional deep link — when present the row is an anchor. */\n  url?: string;\n}\n\nexport interface TaskCardProps\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role' | 'title'>,\n    VariantProps<typeof taskCardVariants> {\n  /** The task to render. */\n  item: TaskItem;\n  /** Visual density. */\n  size?: 'sm' | 'md';\n  /** Fires when the row is activated (click / Enter / Space). */\n  onActivate?: (item: TaskItem) => void;\n  /**\n   * Trailing per-row action toolbar (icon buttons: mark done, schedule,\n   * edit, …). Rendered above the stretched-link overlay so the controls\n   * stay clickable inside an interactive row.\n   */\n  actions?: ReactNode;\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst taskCardVariants = cva(\n  [\n    'ds:relative ds:flex ds:items-start ds:gap-[var(--spacing-sm)]',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:transition-colors',\n    'ds:motion-reduce:transition-none',\n    'ds:text-start ds:group',\n    'ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2',\n    'ds:forced-colors:border ds:forced-colors:border-[CanvasText]',\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: 'ds:p-[var(--spacing-sm)]',\n        md: 'ds:p-[var(--spacing-md)]',\n      },\n      interactive: {\n        true: 'ds:hover:bg-[color:var(--muted)]/40 ds:cursor-pointer',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n      interactive: false,\n    },\n  },\n);\n\nconst stretchedLinkClass = [\n  'ds:focus-visible:outline-none',\n  \"ds:after:content-[''] ds:after:absolute ds:after:inset-0 ds:after:rounded-[var(--radius-sm)]\",\n  'ds:after:pointer-events-auto',\n  'ds:focus-visible:after:outline-[length:var(--focus-ring-width)]',\n  'ds:focus-visible:after:outline-solid',\n  'ds:focus-visible:after:outline-[color:var(--ring)]',\n  'ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]',\n  'ds:forced-colors:focus-visible:after:outline-[CanvasText]',\n].join(' ');\n\n/* ------------------------------------------------------------------ */\n/* Helpers                                                             */\n/* ------------------------------------------------------------------ */\n\nexport function isSafeTaskUrl(url: string): boolean {\n  return /^(https?:\\/\\/(?!\\/)|\\/(?!\\/)|#)/.test(url);\n}\n\nfunction StatusIcon({\n  status,\n  priority,\n}: {\n  status?: TaskStatus;\n  priority?: TaskPriority;\n}): ReactNode {\n  const tone =\n    priority === 'high'\n      ? 'ds:text-[color:var(--destructive)]'\n      : 'ds:text-[color:var(--muted-foreground)]';\n  if (status === 'done') {\n    return <CheckSquare aria-hidden=\"true\" className={`ds:size-4 ${tone}`} />;\n  }\n  if (priority === 'high') {\n    return <AlertCircle aria-hidden=\"true\" className={`ds:size-4 ${tone}`} />;\n  }\n  return <Square aria-hidden=\"true\" className={`ds:size-4 ${tone}`} />;\n}\n\n/* ------------------------------------------------------------------ */\n/* Component                                                           */\n/* ------------------------------------------------------------------ */\n\nexport const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(\n  ({ item, size = 'sm', onActivate, actions, className, ...rest }, ref) => {\n    const { t } = useTranslation();\n    const interactive = !!onActivate;\n    const hasSafeUrl = !!item.url && isSafeTaskUrl(item.url);\n    const ariaLabel = t('taskCard.itemLabel', {\n      title: item.title,\n      due: item.dueLabel ?? '',\n      defaultValue: '{{title}}{{due, prepend, \" · \"}}',\n    });\n\n    const titleNode = (\n      <span className=\"ds:flex-1 ds:min-w-0 ds:truncate type-body-sm ds:text-[color:var(--foreground)]\">\n        {item.title}\n      </span>\n    );\n\n    let activator: ReactNode;\n    if (interactive && hasSafeUrl) {\n      activator = (\n        <a\n          href={item.url}\n          aria-label={ariaLabel}\n          className={stretchedLinkClass + ' ds:contents'}\n          onClick={(e) => {\n            if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey)\n              return;\n            onActivate?.(item);\n          }}\n        >\n          {titleNode}\n        </a>\n      );\n    } else if (interactive) {\n      activator = (\n        <button\n          type=\"button\"\n          aria-label={ariaLabel}\n          className={\n            stretchedLinkClass +\n            ' ds:contents ds:bg-transparent ds:border-0 ds:p-0 ds:text-start'\n          }\n          onClick={() => onActivate?.(item)}\n        >\n          {titleNode}\n        </button>\n      );\n    } else {\n      activator = titleNode;\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"listitem\"\n        data-component=\"task-card\"\n        data-component-id={item.id}\n        data-status={item.status ?? 'open'}\n        data-priority={item.priority ?? 'normal'}\n        className={taskCardVariants({ size, interactive, className })}\n        {...rest}\n      >\n        <span className=\"ds:mt-[var(--spacing-2xs)] ds:shrink-0\">\n          <StatusIcon status={item.status} priority={item.priority} />\n        </span>\n\n        <div className=\"ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]\">\n          {activator}\n          {item.description ? (\n            <span className=\"type-body-sm ds:text-[color:var(--muted-foreground)] ds:truncate\">\n              {item.description}\n            </span>\n          ) : null}\n          {item.note ? (\n            <span className=\"type-body-sm ds:text-[color:var(--muted-foreground)] ds:line-clamp-2\">\n              {item.note}\n            </span>\n          ) : null}\n          {item.linkedLabel ? (\n            <span className=\"type-eyebrow ds:text-[color:var(--muted-foreground)] ds:truncate\">\n              {item.linkedLabel}\n            </span>\n          ) : null}\n          {item.dueLabel ? (\n            <span className=\"type-eyebrow ds:text-[color:var(--muted-foreground)]\">\n              {item.dueLabel}\n            </span>\n          ) : null}\n        </div>\n\n        {actions ? (\n          // Above the stretched-link overlay so the buttons stay clickable.\n          <span className=\"ds:relative ds:z-[1] ds:flex ds:items-center ds:gap-[var(--spacing-2xs)] ds:shrink-0\">\n            {actions}\n          </span>\n        ) : null}\n\n        {interactive ? (\n          <ChevronRight\n            aria-hidden=\"true\"\n            className=\"ds:mt-[var(--spacing-2xs)] ds:size-4 ds:shrink-0 ds:text-[color:var(--muted-foreground)] ds:opacity-0 ds:transition-opacity ds:motion-reduce:transition-none ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:rtl:rotate-180\"\n          />\n        ) : null}\n      </div>\n    );\n  },\n);\n\nTaskCard.displayName = 'TaskCard';\n"],"names":["taskCardVariants","cva","stretchedLinkClass","isSafeTaskUrl","url","StatusIcon","status","priority","tone","CheckSquare","AlertCircle","Square","TaskCard","forwardRef","item","size","onActivate","actions","className","rest","ref","t","useTranslation","interactive","hasSafeUrl","ariaLabel","titleNode","jsx","activator","e","jsxs","ChevronRight"],"mappings":"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"}