@ktnpm_devops/react-component 0.16.0 → 0.18.0

package/dist/index73.js

@@ -1,87 +1,18 @@
-const root = "krc-root-WYIsp";
-const trigger = "krc-trigger-UedSS";
-const active = "krc-active-cH8Tl";
-const triggerContent = "krc-triggerContent-Kkhoi";
-const chevron = "krc-chevron-NoNsI";
-const label = "krc-label-RPlXR";
-const valueGroup = "krc-valueGroup-xfNcx";
-const value = "krc-value-aKdIW";
-const badge = "krc-badge-yVq9o";
-const clear = "krc-clear-11V9Q";
-const panel = "krc-panel-xf2f8";
-const header = "krc-header--VMR-";
-const search = "krc-search-4gQgB";
-const headerActions = "krc-headerActions-orxXD";
-const chip = "krc-chip--n-9m";
-const chipGhost = "krc-chipGhost-oayjh";
-const list = "krc-list-NRoxf";
-const status = "krc-status-j7xbM";
-const statusError = "krc-statusError-u6rfB";
-const option = "krc-option-ZAXum";
-const optionLabel = "krc-optionLabel-MdDyI";
-const optionCount = "krc-optionCount-JSQl9";
-const create = "krc-create-hO8Cq";
-const footer = "krc-footer-2yk6S";
-const selection = "krc-selection-aYDH-";
-const selectionDelta = "krc-selectionDelta-S1dV7";
-const footerActions = "krc-footerActions-77iCX";
+const root = "krc-root-GPZXT";
+const sm = "krc-sm-QGnvH";
+const md = "krc-md-rQKlJ";
+const lg = "krc-lg-eC2yT";
 const styles = {
   root,
-  trigger,
-  active,
-  triggerContent,
-  chevron,
-  label,
-  valueGroup,
-  value,
-  badge,
-  clear,
-  panel,
-  header,
-  search,
-  headerActions,
-  chip,
-  chipGhost,
-  list,
-  status,
-  statusError,
-  option,
-  optionLabel,
-  optionCount,
-  create,
-  footer,
-  selection,
-  selectionDelta,
-  footerActions
+  sm,
+  md,
+  lg
 };
 export {
-  active,
-  badge,
-  chevron,
-  chip,
-  chipGhost,
-  clear,
-  create,
   styles as default,
-  footer,
-  footerActions,
-  header,
-  headerActions,
-  label,
-  list,
-  option,
-  optionCount,
-  optionLabel,
-  panel,
+  lg,
+  md,
   root,
-  search,
-  selection,
-  selectionDelta,
-  status,
-  statusError,
-  trigger,
-  triggerContent,
-  value,
-  valueGroup
+  sm
 };
 //# sourceMappingURL=index73.js.map

package/dist/index73.js.map

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

package/dist/index74.cjs

@@ -1,60 +1,9 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "krc-root--s1oD";
-const trigger = "krc-trigger-WMlNa";
-const active = "krc-active-O65lj";
-const triggerContent = "krc-triggerContent-JipmE";
-const chevron = "krc-chevron-J2Zsy";
-const label = "krc-label-lZlV-";
-const value = "krc-value-HsQrC";
-const clear = "krc-clear-bsi5j";
-const panel = "krc-panel--0odx";
-const searchContainer = "krc-searchContainer-WRS-U";
-const search = "krc-search-Dh3pY";
-const list = "krc-list-1RUtr";
-const noResults = "krc-noResults-Hin1U";
-const option = "krc-option-0mFGi";
-const focused = "krc-focused-0-7tE";
-const selected = "krc-selected-1zIqI";
-const optionLabel = "krc-optionLabel-pj-hL";
-const optionCount = "krc-optionCount-rVlCP";
+const root = "krc-root-0ZI82";
 const styles = {
-  root,
-  trigger,
-  active,
-  triggerContent,
-  chevron,
-  label,
-  value,
-  clear,
-  panel,
-  searchContainer,
-  search,
-  list,
-  noResults,
-  option,
-  focused,
-  selected,
-  optionLabel,
-  optionCount
+  root
 };
-exports.active = active;
-exports.chevron = chevron;
-exports.clear = clear;
 exports.default = styles;
-exports.focused = focused;
-exports.label = label;
-exports.list = list;
-exports.noResults = noResults;
-exports.option = option;
-exports.optionCount = optionCount;
-exports.optionLabel = optionLabel;
-exports.panel = panel;
 exports.root = root;
-exports.search = search;
-exports.searchContainer = searchContainer;
-exports.selected = selected;
-exports.trigger = trigger;
-exports.triggerContent = triggerContent;
-exports.value = value;
 //# sourceMappingURL=index74.cjs.map

package/dist/index74.cjs.map

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

package/dist/index74.js

@@ -1,60 +1,9 @@
-const root = "krc-root--s1oD";
-const trigger = "krc-trigger-WMlNa";
-const active = "krc-active-O65lj";
-const triggerContent = "krc-triggerContent-JipmE";
-const chevron = "krc-chevron-J2Zsy";
-const label = "krc-label-lZlV-";
-const value = "krc-value-HsQrC";
-const clear = "krc-clear-bsi5j";
-const panel = "krc-panel--0odx";
-const searchContainer = "krc-searchContainer-WRS-U";
-const search = "krc-search-Dh3pY";
-const list = "krc-list-1RUtr";
-const noResults = "krc-noResults-Hin1U";
-const option = "krc-option-0mFGi";
-const focused = "krc-focused-0-7tE";
-const selected = "krc-selected-1zIqI";
-const optionLabel = "krc-optionLabel-pj-hL";
-const optionCount = "krc-optionCount-rVlCP";
+const root = "krc-root-0ZI82";
 const styles = {
-  root,
-  trigger,
-  active,
-  triggerContent,
-  chevron,
-  label,
-  value,
-  clear,
-  panel,
-  searchContainer,
-  search,
-  list,
-  noResults,
-  option,
-  focused,
-  selected,
-  optionLabel,
-  optionCount
+  root
 };
 export {
-  active,
-  chevron,
-  clear,
   styles as default,
-  focused,
-  label,
-  list,
-  noResults,
-  option,
-  optionCount,
-  optionLabel,
-  panel,
-  root,
-  search,
-  searchContainer,
-  selected,
-  trigger,
-  triggerContent,
-  value
+  root
 };
 //# sourceMappingURL=index74.js.map

package/dist/index74.js.map

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

package/dist/index75.cjs

@@ -1,42 +1,27 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "krc-root-7cxYt";
-const chip = "krc-chip-tgAQw";
-const active = "krc-active-hboGd";
-const summary = "krc-summary-E-FXy";
-const popover = "krc-popover-IJFWK";
-const popoverHeader = "krc-popoverHeader-mdeD8";
-const fields = "krc-fields-h5R5w";
-const field = "krc-field-u9yvp";
-const error = "krc-error-jsFkv";
-const actions = "krc-actions-prbFX";
-const btnGhost = "krc-btnGhost-x8cbA";
-const btnPrimary = "krc-btnPrimary-T0w2q";
+const root = "krc-root-xKc1n";
+const item = "krc-item-Omuyb";
+const head = "krc-head-ePoJ-";
+const headContent = "krc-headContent-wymxG";
+const chev = "krc-chev-yPNHx";
+const isOpen = "krc-isOpen-wp7DR";
+const body = "krc-body-pZ1Bk";
 const styles = {
   root,
-  chip,
-  active,
-  summary,
-  popover,
-  popoverHeader,
-  fields,
-  field,
-  error,
-  actions,
-  btnGhost,
-  btnPrimary
+  item,
+  head,
+  headContent,
+  chev,
+  isOpen,
+  body
 };
-exports.actions = actions;
-exports.active = active;
-exports.btnGhost = btnGhost;
-exports.btnPrimary = btnPrimary;
-exports.chip = chip;
+exports.body = body;
+exports.chev = chev;
 exports.default = styles;
-exports.error = error;
-exports.field = field;
-exports.fields = fields;
-exports.popover = popover;
-exports.popoverHeader = popoverHeader;
+exports.head = head;
+exports.headContent = headContent;
+exports.isOpen = isOpen;
+exports.item = item;
 exports.root = root;
-exports.summary = summary;
 //# sourceMappingURL=index75.cjs.map

package/dist/index75.cjs.map

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

package/dist/index75.js

@@ -1,42 +1,27 @@
-const root = "krc-root-7cxYt";
-const chip = "krc-chip-tgAQw";
-const active = "krc-active-hboGd";
-const summary = "krc-summary-E-FXy";
-const popover = "krc-popover-IJFWK";
-const popoverHeader = "krc-popoverHeader-mdeD8";
-const fields = "krc-fields-h5R5w";
-const field = "krc-field-u9yvp";
-const error = "krc-error-jsFkv";
-const actions = "krc-actions-prbFX";
-const btnGhost = "krc-btnGhost-x8cbA";
-const btnPrimary = "krc-btnPrimary-T0w2q";
+const root = "krc-root-xKc1n";
+const item = "krc-item-Omuyb";
+const head = "krc-head-ePoJ-";
+const headContent = "krc-headContent-wymxG";
+const chev = "krc-chev-yPNHx";
+const isOpen = "krc-isOpen-wp7DR";
+const body = "krc-body-pZ1Bk";
 const styles = {
   root,
-  chip,
-  active,
-  summary,
-  popover,
-  popoverHeader,
-  fields,
-  field,
-  error,
-  actions,
-  btnGhost,
-  btnPrimary
+  item,
+  head,
+  headContent,
+  chev,
+  isOpen,
+  body
 };
 export {
-  actions,
-  active,
-  btnGhost,
-  btnPrimary,
-  chip,
+  body,
+  chev,
   styles as default,
-  error,
-  field,
-  fields,
-  popover,
-  popoverHeader,
-  root,
-  summary
+  head,
+  headContent,
+  isOpen,
+  item,
+  root
 };
 //# sourceMappingURL=index75.js.map

package/dist/index75.js.map

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

package/dist/index76.cjs

@@ -1,20 +1,49 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const marked_esm = require("./index124.cjs");
-const purify_es = require("./index125.cjs");
-const renderer = {
-  link({ href, tokens }) {
-    var _a;
-    const text = ((_a = this.parser) == null ? void 0 : _a.parseInline(tokens)) ?? tokens.map((t) => t.raw).join("");
-    return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`;
-  }
+const react = require("react");
+const constants = require("./index62.cjs");
+const clippingRect = require("./index129.cjs");
+const DEFAULT_PLACEMENT = { align: "start" };
+const samePlacement = (a, b) => {
+  var _a, _b;
+  return a.align === b.align && ((_a = a.style) == null ? void 0 : _a.transform) === ((_b = b.style) == null ? void 0 : _b.transform);
 };
-marked_esm.marked.use({ gfm: true, breaks: true, renderer });
-const sanitizeHtml = (html) => purify_es.sanitize(html, {
-  USE_PROFILES: { html: true },
-  ADD_ATTR: ["target", "rel"]
-});
-const parseMarkdown = (markdown) => sanitizeHtml(marked_esm.marked.parse(markdown));
-exports.parseMarkdown = parseMarkdown;
-exports.sanitizeHtml = sanitizeHtml;
+function resolvePanelPlacement(anchor, panelWidth, boundary, margin = constants.PANEL_EDGE_MARGIN) {
+  const left = boundary.left + margin;
+  const right = boundary.right - margin;
+  if (panelWidth === 0 || anchor.left + panelWidth <= right) return DEFAULT_PLACEMENT;
+  if (anchor.right - panelWidth >= left) return { align: "end" };
+  const shift = Math.max(right - panelWidth, left) - anchor.left;
+  return { align: "start", style: { transform: `translateX(${shift}px)` } };
+}
+function usePanelPlacement(anchorRef, panelRef, isOpen) {
+  const [placement, setPlacement] = react.useState(DEFAULT_PLACEMENT);
+  react.useLayoutEffect(() => {
+    const anchor = anchorRef.current;
+    const panel = panelRef.current;
+    if (!isOpen || !anchor || !panel) {
+      setPlacement(DEFAULT_PLACEMENT);
+      return;
+    }
+    const measure = () => {
+      const next = resolvePanelPlacement(
+        anchor.getBoundingClientRect(),
+        panel.getBoundingClientRect().width,
+        clippingRect.getClippingRect(anchor)
+      );
+      setPlacement((prev) => samePlacement(prev, next) ? prev : next);
+    };
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer == null ? void 0 : observer.observe(panel);
+    window.addEventListener("resize", measure);
+    return () => {
+      observer == null ? void 0 : observer.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [anchorRef, panelRef, isOpen]);
+  return placement;
+}
+exports.resolvePanelPlacement = resolvePanelPlacement;
+exports.usePanelPlacement = usePanelPlacement;
 //# sourceMappingURL=index76.cjs.map

package/dist/index76.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index76.cjs","sources":["../src/utils/markdown.ts"],"sourcesContent":["import { marked, type Renderer } from 'marked';\nimport DOMPurify from 'dompurify';\n\n// Use a function (not arrow) so `this` binds to marked's renderer instance,\n// which exposes `parser.parseInline`. The default `text` arg is the raw link\n// label (`**bold** text`) — passing it through unchanged would print the\n// asterisks instead of rendering nested inline markdown. `parseInline(tokens)`\n// recurses into bold / italic / code / etc. inside the link text.\nconst renderer: Partial<Renderer> = {\n  link({ href, tokens }) {\n    /* `this.parser` is provided at runtime when marked wires the renderer\n       into its pipeline; the type definition models it as possibly\n       undefined for standalone use. `parseInline(tokens)` falls back to\n       the join of token raw strings when the parser is absent. */\n    const text = this.parser?.parseInline(tokens) ?? tokens.map((t) => t.raw).join('');\n    return `<a href=\"${href}\" target=\"_blank\" rel=\"noopener noreferrer\">${text}</a>`;\n  },\n};\n\nmarked.use({ gfm: true, breaks: true, renderer });\n\nexport const sanitizeHtml = (html: string): string =>\n  DOMPurify.sanitize(html, {\n    USE_PROFILES: { html: true },\n    ADD_ATTR: ['target', 'rel'],\n  });\n\nexport const parseMarkdown = (markdown: string): string =>\n  sanitizeHtml(marked.parse(markdown) as string);\n"],"names":["marked","DOMPurify"],"mappings":";;;;AAQA,MAAM,WAA8B;AAAA,EAClC,KAAK,EAAE,MAAM,UAAU;;AAKrB,UAAM,SAAO,UAAK,WAAL,mBAAa,YAAY,YAAW,OAAO,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE;AACjF,WAAO,YAAY,IAAI,+CAA+C,IAAI;AAAA,EAC5E;AACF;AAEAA,WAAAA,OAAO,IAAI,EAAE,KAAK,MAAM,QAAQ,MAAM,UAAU;AAEzC,MAAM,eAAe,CAAC,SAC3BC,UAAU,SAAS,MAAM;AAAA,EACvB,cAAc,EAAE,MAAM,KAAA;AAAA,EACtB,UAAU,CAAC,UAAU,KAAK;AAC5B,CAAC;AAEI,MAAM,gBAAgB,CAAC,aAC5B,aAAaD,WAAAA,OAAO,MAAM,QAAQ,CAAW;;;"}
+{"version":3,"file":"index76.cjs","sources":["../src/hooks/usePanelPlacement.ts"],"sourcesContent":["import { useLayoutEffect, useState, type CSSProperties, type RefObject } from 'react';\nimport { PANEL_EDGE_MARGIN } from '../constants';\nimport { getClippingRect, type HorizontalRect } from '../utils/clippingRect';\n\n/** Which trigger edge a dropdown panel is anchored to. */\nexport type PanelAlign = 'start' | 'end';\n\nexport interface PanelPlacement {\n  align: PanelAlign;\n  /** Horizontal shift, only when the panel fits on neither side of the trigger. */\n  style?: CSSProperties;\n}\n\nconst DEFAULT_PLACEMENT: PanelPlacement = { align: 'start' };\n\nconst samePlacement = (a: PanelPlacement, b: PanelPlacement) =>\n  a.align === b.align && a.style?.transform === b.style?.transform;\n\n/**\n * Places a panel of `panelWidth` against `anchor` so it stays inside `boundary`:\n * left-aligned if it fits rightwards, else right-aligned if it fits leftwards, else\n * shifted just enough to fit, keeping its left edge visible first. The shift is a\n * `transform` so it does not change the panel's shrink-to-fit width.\n */\nexport function resolvePanelPlacement(\n  anchor: HorizontalRect,\n  panelWidth: number,\n  boundary: HorizontalRect,\n  margin = PANEL_EDGE_MARGIN,\n): PanelPlacement {\n  const left = boundary.left + margin;\n  const right = boundary.right - margin;\n\n  // A zero width means the panel was never laid out (e.g. a test DOM): keep the default.\n  if (panelWidth === 0 || anchor.left + panelWidth <= right) return DEFAULT_PLACEMENT;\n  if (anchor.right - panelWidth >= left) return { align: 'end' };\n\n  const shift = Math.max(right - panelWidth, left) - anchor.left;\n  return { align: 'start', style: { transform: `translateX(${shift}px)` } };\n}\n\n/**\n * Chooses the side a dropdown panel opens towards, so the box that clips it never cuts\n * it off. Measures before paint on opening, again on window resize and panel resize\n * while open, and resets on close.\n */\nexport function usePanelPlacement(\n  anchorRef: RefObject<HTMLElement | null>,\n  panelRef: RefObject<HTMLElement | null>,\n  isOpen: boolean,\n): PanelPlacement {\n  const [placement, setPlacement] = useState<PanelPlacement>(DEFAULT_PLACEMENT);\n\n  useLayoutEffect(() => {\n    const anchor = anchorRef.current;\n    const panel = panelRef.current;\n    if (!isOpen || !anchor || !panel) {\n      setPlacement(DEFAULT_PLACEMENT);\n      return;\n    }\n\n    const measure = () => {\n      const next = resolvePanelPlacement(\n        anchor.getBoundingClientRect(),\n        panel.getBoundingClientRect().width,\n        getClippingRect(anchor),\n      );\n      setPlacement((prev) => (samePlacement(prev, next) ? prev : next));\n    };\n\n    measure();\n    // jsdom, which consumers often test with, has no ResizeObserver.\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);\n    observer?.observe(panel);\n    window.addEventListener('resize', measure);\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener('resize', measure);\n    };\n  }, [anchorRef, panelRef, isOpen]);\n\n  return placement;\n}\n"],"names":["PANEL_EDGE_MARGIN","useState","useLayoutEffect","getClippingRect"],"mappings":";;;;;AAaA,MAAM,oBAAoC,EAAE,OAAO,QAAA;AAEnD,MAAM,gBAAgB,CAAC,GAAmB,MAAA;;AACxC,WAAE,UAAU,EAAE,WAAS,OAAE,UAAF,mBAAS,iBAAc,OAAE,UAAF,mBAAS;AAAA;AAQlD,SAAS,sBACd,QACA,YACA,UACA,SAASA,UAAAA,mBACO;AAChB,QAAM,OAAO,SAAS,OAAO;AAC7B,QAAM,QAAQ,SAAS,QAAQ;AAG/B,MAAI,eAAe,KAAK,OAAO,OAAO,cAAc,MAAO,QAAO;AAClE,MAAI,OAAO,QAAQ,cAAc,KAAM,QAAO,EAAE,OAAO,MAAA;AAEvD,QAAM,QAAQ,KAAK,IAAI,QAAQ,YAAY,IAAI,IAAI,OAAO;AAC1D,SAAO,EAAE,OAAO,SAAS,OAAO,EAAE,WAAW,cAAc,KAAK,QAAM;AACxE;AAOO,SAAS,kBACd,WACA,UACA,QACgB;AAChB,QAAM,CAAC,WAAW,YAAY,IAAIC,MAAAA,SAAyB,iBAAiB;AAE5EC,QAAAA,gBAAgB,MAAM;AACpB,UAAM,SAAS,UAAU;AACzB,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,UAAU,CAAC,UAAU,CAAC,OAAO;AAChC,mBAAa,iBAAiB;AAC9B;AAAA,IACF;AAEA,UAAM,UAAU,MAAM;AACpB,YAAM,OAAO;AAAA,QACX,OAAO,sBAAA;AAAA,QACP,MAAM,wBAAwB;AAAA,QAC9BC,aAAAA,gBAAgB,MAAM;AAAA,MAAA;AAExB,mBAAa,CAAC,SAAU,cAAc,MAAM,IAAI,IAAI,OAAO,IAAK;AAAA,IAClE;AAEA,YAAA;AAEA,UAAM,WAAW,OAAO,mBAAmB,cAAc,OAAO,IAAI,eAAe,OAAO;AAC1F,yCAAU,QAAQ;AAClB,WAAO,iBAAiB,UAAU,OAAO;AACzC,WAAO,MAAM;AACX,2CAAU;AACV,aAAO,oBAAoB,UAAU,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,WAAW,UAAU,MAAM,CAAC;AAEhC,SAAO;AACT;;;"}

package/dist/index76.js

@@ -1,20 +1,49 @@
-import { marked as g } from "./index124.js";
-import purify from "./index125.js";
-const renderer = {
-  link({ href, tokens }) {
-    var _a;
-    const text = ((_a = this.parser) == null ? void 0 : _a.parseInline(tokens)) ?? tokens.map((t) => t.raw).join("");
-    return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`;
-  }
+import { useState, useLayoutEffect } from "react";
+import { PANEL_EDGE_MARGIN } from "./index62.js";
+import { getClippingRect } from "./index129.js";
+const DEFAULT_PLACEMENT = { align: "start" };
+const samePlacement = (a, b) => {
+  var _a, _b;
+  return a.align === b.align && ((_a = a.style) == null ? void 0 : _a.transform) === ((_b = b.style) == null ? void 0 : _b.transform);
 };
-g.use({ gfm: true, breaks: true, renderer });
-const sanitizeHtml = (html) => purify.sanitize(html, {
-  USE_PROFILES: { html: true },
-  ADD_ATTR: ["target", "rel"]
-});
-const parseMarkdown = (markdown) => sanitizeHtml(g.parse(markdown));
+function resolvePanelPlacement(anchor, panelWidth, boundary, margin = PANEL_EDGE_MARGIN) {
+  const left = boundary.left + margin;
+  const right = boundary.right - margin;
+  if (panelWidth === 0 || anchor.left + panelWidth <= right) return DEFAULT_PLACEMENT;
+  if (anchor.right - panelWidth >= left) return { align: "end" };
+  const shift = Math.max(right - panelWidth, left) - anchor.left;
+  return { align: "start", style: { transform: `translateX(${shift}px)` } };
+}
+function usePanelPlacement(anchorRef, panelRef, isOpen) {
+  const [placement, setPlacement] = useState(DEFAULT_PLACEMENT);
+  useLayoutEffect(() => {
+    const anchor = anchorRef.current;
+    const panel = panelRef.current;
+    if (!isOpen || !anchor || !panel) {
+      setPlacement(DEFAULT_PLACEMENT);
+      return;
+    }
+    const measure = () => {
+      const next = resolvePanelPlacement(
+        anchor.getBoundingClientRect(),
+        panel.getBoundingClientRect().width,
+        getClippingRect(anchor)
+      );
+      setPlacement((prev) => samePlacement(prev, next) ? prev : next);
+    };
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer == null ? void 0 : observer.observe(panel);
+    window.addEventListener("resize", measure);
+    return () => {
+      observer == null ? void 0 : observer.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [anchorRef, panelRef, isOpen]);
+  return placement;
+}
 export {
-  parseMarkdown,
-  sanitizeHtml
+  resolvePanelPlacement,
+  usePanelPlacement
 };
 //# sourceMappingURL=index76.js.map

package/dist/index76.js.map

@@ -1 +1 @@
-{"version":3,"file":"index76.js","sources":["../src/utils/markdown.ts"],"sourcesContent":["import { marked, type Renderer } from 'marked';\nimport DOMPurify from 'dompurify';\n\n// Use a function (not arrow) so `this` binds to marked's renderer instance,\n// which exposes `parser.parseInline`. The default `text` arg is the raw link\n// label (`**bold** text`) — passing it through unchanged would print the\n// asterisks instead of rendering nested inline markdown. `parseInline(tokens)`\n// recurses into bold / italic / code / etc. inside the link text.\nconst renderer: Partial<Renderer> = {\n  link({ href, tokens }) {\n    /* `this.parser` is provided at runtime when marked wires the renderer\n       into its pipeline; the type definition models it as possibly\n       undefined for standalone use. `parseInline(tokens)` falls back to\n       the join of token raw strings when the parser is absent. */\n    const text = this.parser?.parseInline(tokens) ?? tokens.map((t) => t.raw).join('');\n    return `<a href=\"${href}\" target=\"_blank\" rel=\"noopener noreferrer\">${text}</a>`;\n  },\n};\n\nmarked.use({ gfm: true, breaks: true, renderer });\n\nexport const sanitizeHtml = (html: string): string =>\n  DOMPurify.sanitize(html, {\n    USE_PROFILES: { html: true },\n    ADD_ATTR: ['target', 'rel'],\n  });\n\nexport const parseMarkdown = (markdown: string): string =>\n  sanitizeHtml(marked.parse(markdown) as string);\n"],"names":["marked","DOMPurify"],"mappings":";;AAQA,MAAM,WAA8B;AAAA,EAClC,KAAK,EAAE,MAAM,UAAU;;AAKrB,UAAM,SAAO,UAAK,WAAL,mBAAa,YAAY,YAAW,OAAO,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE;AACjF,WAAO,YAAY,IAAI,+CAA+C,IAAI;AAAA,EAC5E;AACF;AAEAA,EAAO,IAAI,EAAE,KAAK,MAAM,QAAQ,MAAM,UAAU;AAEzC,MAAM,eAAe,CAAC,SAC3BC,OAAU,SAAS,MAAM;AAAA,EACvB,cAAc,EAAE,MAAM,KAAA;AAAA,EACtB,UAAU,CAAC,UAAU,KAAK;AAC5B,CAAC;AAEI,MAAM,gBAAgB,CAAC,aAC5B,aAAaD,EAAO,MAAM,QAAQ,CAAW;"}
+{"version":3,"file":"index76.js","sources":["../src/hooks/usePanelPlacement.ts"],"sourcesContent":["import { useLayoutEffect, useState, type CSSProperties, type RefObject } from 'react';\nimport { PANEL_EDGE_MARGIN } from '../constants';\nimport { getClippingRect, type HorizontalRect } from '../utils/clippingRect';\n\n/** Which trigger edge a dropdown panel is anchored to. */\nexport type PanelAlign = 'start' | 'end';\n\nexport interface PanelPlacement {\n  align: PanelAlign;\n  /** Horizontal shift, only when the panel fits on neither side of the trigger. */\n  style?: CSSProperties;\n}\n\nconst DEFAULT_PLACEMENT: PanelPlacement = { align: 'start' };\n\nconst samePlacement = (a: PanelPlacement, b: PanelPlacement) =>\n  a.align === b.align && a.style?.transform === b.style?.transform;\n\n/**\n * Places a panel of `panelWidth` against `anchor` so it stays inside `boundary`:\n * left-aligned if it fits rightwards, else right-aligned if it fits leftwards, else\n * shifted just enough to fit, keeping its left edge visible first. The shift is a\n * `transform` so it does not change the panel's shrink-to-fit width.\n */\nexport function resolvePanelPlacement(\n  anchor: HorizontalRect,\n  panelWidth: number,\n  boundary: HorizontalRect,\n  margin = PANEL_EDGE_MARGIN,\n): PanelPlacement {\n  const left = boundary.left + margin;\n  const right = boundary.right - margin;\n\n  // A zero width means the panel was never laid out (e.g. a test DOM): keep the default.\n  if (panelWidth === 0 || anchor.left + panelWidth <= right) return DEFAULT_PLACEMENT;\n  if (anchor.right - panelWidth >= left) return { align: 'end' };\n\n  const shift = Math.max(right - panelWidth, left) - anchor.left;\n  return { align: 'start', style: { transform: `translateX(${shift}px)` } };\n}\n\n/**\n * Chooses the side a dropdown panel opens towards, so the box that clips it never cuts\n * it off. Measures before paint on opening, again on window resize and panel resize\n * while open, and resets on close.\n */\nexport function usePanelPlacement(\n  anchorRef: RefObject<HTMLElement | null>,\n  panelRef: RefObject<HTMLElement | null>,\n  isOpen: boolean,\n): PanelPlacement {\n  const [placement, setPlacement] = useState<PanelPlacement>(DEFAULT_PLACEMENT);\n\n  useLayoutEffect(() => {\n    const anchor = anchorRef.current;\n    const panel = panelRef.current;\n    if (!isOpen || !anchor || !panel) {\n      setPlacement(DEFAULT_PLACEMENT);\n      return;\n    }\n\n    const measure = () => {\n      const next = resolvePanelPlacement(\n        anchor.getBoundingClientRect(),\n        panel.getBoundingClientRect().width,\n        getClippingRect(anchor),\n      );\n      setPlacement((prev) => (samePlacement(prev, next) ? prev : next));\n    };\n\n    measure();\n    // jsdom, which consumers often test with, has no ResizeObserver.\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);\n    observer?.observe(panel);\n    window.addEventListener('resize', measure);\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener('resize', measure);\n    };\n  }, [anchorRef, panelRef, isOpen]);\n\n  return placement;\n}\n"],"names":[],"mappings":";;;AAaA,MAAM,oBAAoC,EAAE,OAAO,QAAA;AAEnD,MAAM,gBAAgB,CAAC,GAAmB,MAAA;;AACxC,WAAE,UAAU,EAAE,WAAS,OAAE,UAAF,mBAAS,iBAAc,OAAE,UAAF,mBAAS;AAAA;AAQlD,SAAS,sBACd,QACA,YACA,UACA,SAAS,mBACO;AAChB,QAAM,OAAO,SAAS,OAAO;AAC7B,QAAM,QAAQ,SAAS,QAAQ;AAG/B,MAAI,eAAe,KAAK,OAAO,OAAO,cAAc,MAAO,QAAO;AAClE,MAAI,OAAO,QAAQ,cAAc,KAAM,QAAO,EAAE,OAAO,MAAA;AAEvD,QAAM,QAAQ,KAAK,IAAI,QAAQ,YAAY,IAAI,IAAI,OAAO;AAC1D,SAAO,EAAE,OAAO,SAAS,OAAO,EAAE,WAAW,cAAc,KAAK,QAAM;AACxE;AAOO,SAAS,kBACd,WACA,UACA,QACgB;AAChB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAyB,iBAAiB;AAE5E,kBAAgB,MAAM;AACpB,UAAM,SAAS,UAAU;AACzB,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,UAAU,CAAC,UAAU,CAAC,OAAO;AAChC,mBAAa,iBAAiB;AAC9B;AAAA,IACF;AAEA,UAAM,UAAU,MAAM;AACpB,YAAM,OAAO;AAAA,QACX,OAAO,sBAAA;AAAA,QACP,MAAM,wBAAwB;AAAA,QAC9B,gBAAgB,MAAM;AAAA,MAAA;AAExB,mBAAa,CAAC,SAAU,cAAc,MAAM,IAAI,IAAI,OAAO,IAAK;AAAA,IAClE;AAEA,YAAA;AAEA,UAAM,WAAW,OAAO,mBAAmB,cAAc,OAAO,IAAI,eAAe,OAAO;AAC1F,yCAAU,QAAQ;AAClB,WAAO,iBAAiB,UAAU,OAAO;AACzC,WAAO,MAAM;AACX,2CAAU;AACV,aAAO,oBAAoB,UAAU,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,WAAW,UAAU,MAAM,CAAC;AAEhC,SAAO;AACT;"}

package/dist/index77.cjs

@@ -1,9 +1,36 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "krc-root-93Nfs";
+const root = "krc-root-oXC0g";
+const trigger = "krc-trigger-2YW6R";
+const triggerContent = "krc-triggerContent-Nfhff";
+const chevron = "krc-chevron-otnpb";
+const chevronOpen = "krc-chevronOpen-UoLND";
+const badge = "krc-badge-dN-p-";
+const pop = "krc-pop-IfyfL";
+const chips = "krc-chips-J7YEf";
+const clear = "krc-clear--yvPZ";
+const input = "krc-input--QI2U";
 const styles = {
-  root
+  root,
+  trigger,
+  triggerContent,
+  chevron,
+  chevronOpen,
+  badge,
+  pop,
+  chips,
+  clear,
+  input
 };
+exports.badge = badge;
+exports.chevron = chevron;
+exports.chevronOpen = chevronOpen;
+exports.chips = chips;
+exports.clear = clear;
 exports.default = styles;
+exports.input = input;
+exports.pop = pop;
 exports.root = root;
+exports.trigger = trigger;
+exports.triggerContent = triggerContent;
 //# sourceMappingURL=index77.cjs.map

package/dist/index77.cjs.map

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

package/dist/index77.js

@@ -1,9 +1,36 @@
-const root = "krc-root-93Nfs";
+const root = "krc-root-oXC0g";
+const trigger = "krc-trigger-2YW6R";
+const triggerContent = "krc-triggerContent-Nfhff";
+const chevron = "krc-chevron-otnpb";
+const chevronOpen = "krc-chevronOpen-UoLND";
+const badge = "krc-badge-dN-p-";
+const pop = "krc-pop-IfyfL";
+const chips = "krc-chips-J7YEf";
+const clear = "krc-clear--yvPZ";
+const input = "krc-input--QI2U";
 const styles = {
-  root
+  root,
+  trigger,
+  triggerContent,
+  chevron,
+  chevronOpen,
+  badge,
+  pop,
+  chips,
+  clear,
+  input
 };
 export {
+  badge,
+  chevron,
+  chevronOpen,
+  chips,
+  clear,
   styles as default,
-  root
+  input,
+  pop,
+  root,
+  trigger,
+  triggerContent
 };
 //# sourceMappingURL=index77.js.map

package/dist/index77.js.map

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