@kiva/kv-components 8.9.0 → 8.10.0

package/SKILLS.md

@@ -0,0 +1,31 @@
+# @kiva/kv-components Skills Catalog
+
+AI-assisted development guides for common workflows in this package.
+
+## Available Skills
+
+| Skill | File | Description |
+|-------|------|-------------|
+| make-to-vue | [docs/make-to-vue.md](docs/make-to-vue.md) | Use when porting a Figma Make (or other React) component into a Vue 3 kv-components component. Triggered by requests like "port this to Vue" or by the user sharing React source, a Figma Make URL, or a Figma file link. |
+
+## AI Prompts
+
+Drop-in prompts for generating Storybook stories and MDX documentation with an AI assistant.
+
+| Prompt | File | Description |
+|--------|------|-------------|
+| ai-stories-prompt | [docs/ai-stories-prompt.md](docs/ai-stories-prompt.md) | Prompt for generating standardized Storybook `.stories.js` files for a component. |
+| ai-documentation-prompt | [docs/ai-documentation-prompt.md](docs/ai-documentation-prompt.md) | Prompt for generating the matching `Docs.mdx` documentation page for a component. |
+| how-to-use-ai-prompts | [docs/how-to-use-ai-prompts.md](docs/how-to-use-ai-prompts.md) | Walkthrough of when and how to use the prompt files above. |
+
+## Authoring Guides & Checklists
+
+Reference material the AI prompts pull from — useful when reviewing output by hand or authoring without a prompt.
+
+| Doc | File | Description |
+|-----|------|-------------|
+| Component Stories Guide | [docs/component-stories-guide.md](docs/component-stories-guide.md) | Standards and best practices for Storybook stories in kv-components. |
+| Component Stories Checklist | [docs/component-stories-checklist.md](docs/component-stories-checklist.md) | Checklist for verifying story coverage and quality before merging. |
+| Component Documentation Guide | [docs/component-documentation-guide.md](docs/component-documentation-guide.md) | Standards and best practices for MDX component documentation. |
+| Component Documentation Checklist | [docs/component-documentation-checklist.md](docs/component-documentation-checklist.md) | Checklist for verifying documentation completeness before merging. |
+| Storybook Folder Prefixes | [docs/storybook-folder-prefixes.md](docs/storybook-folder-prefixes.md) | Required title prefixes for organizing components in the Storybook sidebar. |

package/dist/index.js

@@ -12,9 +12,9 @@ import { default as N } from "./vue/KvChip.js";
 import { default as E } from "./vue/KvClassicLoanCard.js";
 import { default as M } from "./vue/KvCompactLoanCard.js";
 import { default as I } from "./vue/KvCommentsAdd.js";
-import { default as g } from "./vue/KvCommentsContainer.js";
+import { default as P } from "./vue/KvCommentsContainer.js";
 import { default as G } from "./vue/KvCommentsHeartButton.js";
-import { default as h } from "./vue/KvCommentsList.js";
+import { default as F } from "./vue/KvCommentsList.js";
 import { default as B } from "./vue/KvCommentsListItem.js";
 import { default as y } from "./vue/KvCommentsReplyButton.js";
 import { default as k } from "./vue/KvContentfulImg.js";
@@ -38,9 +38,9 @@ import { default as Lo } from "./vue/KvLoanActivities.js";
 import { default as To } from "./vue/KvLoanBookmark.js";
 import { default as Ro } from "./vue/KvLoanCallouts.js";
 import { KV_LOAN_INFO_CARD_FRAGMENT as Oo, default as Io } from "./vue/KvLoanInfoCard.js";
-import { default as go } from "./vue/KvLoanProgressGroup.js";
+import { default as Po } from "./vue/KvLoanProgressGroup.js";
 import { default as Go } from "./vue/KvLoanTag.js";
-import { default as ho } from "./vue/KvLoanTeamPick.js";
+import { default as Fo } from "./vue/KvLoanTeamPick.js";
 import { default as Bo } from "./vue/KvLoanUse.js";
 import { default as yo } from "./vue/KvLoadingPlaceholder.js";
 import { default as ko } from "./vue/KvLoadingSpinner.js";
@@ -49,85 +49,86 @@ import { default as Ho } from "./vue/KvMaterialIcon.js";
 import { default as zo } from "./vue/KvPageContainer.js";
 import { default as Zo } from "./vue/KvPagination.js";
 import { default as Jo } from "./vue/KvPieChart.js";
-import { default as Yo } from "./vue/KvPill.js";
-import { default as oe } from "./vue/KvPopper.js";
-import { default as re } from "./vue/KvProgressBar.js";
-import { default as ae } from "./vue/KvProgressCircle.js";
-import { default as le } from "./vue/KvPulsingDot.js";
-import { default as se } from "./vue/KvRadio.js";
-import { default as de } from "./vue/KvSelect.js";
-import { default as xe } from "./vue/KvSideSheet.js";
-import { default as Ke } from "./vue/KvSwitch.js";
-import { default as Ae } from "./vue/KvTab.js";
-import { default as ie } from "./vue/KvTabPanel.js";
-import { default as ce } from "./vue/KvTabs.js";
-import { default as Ne } from "./vue/KvTextInput.js";
-import { default as Ee } from "./vue/KvTextLink.js";
-import { default as Me } from "./vue/KvThemeProvider.js";
-import { default as Ie } from "./vue/KvToast.js";
-import { default as ge } from "./vue/KvTooltip.js";
-import { default as Ge } from "./vue/KvTreeMapChart.js";
-import { default as he } from "./vue/KvUserAvatar.js";
-import { default as Be } from "./vue/KvUtilityMenu.js";
-import { default as ye } from "./vue/KvVerticalCarousel.js";
-import { default as ke } from "./vue/KvVotingCard.js";
-import { default as we } from "./vue/KvVotingCardV2.js";
-import { default as He } from "./vue/KvWideLoanCard.js";
-import { default as ze } from "./vue/KvAtbModal.js";
-import { default as Ze } from "./vue/KvSecondaryNav.js";
-import { default as Je } from "./vue/KvWwwHeader.js";
-import { default as Ye, Mash as $e } from "./utils/Alea.js";
-import { groupBy as er, sortBy as rr } from "./utils/arrayUtils.js";
-import { useAttrs as ar } from "./utils/attrs.js";
-import { carouselUtil as lr } from "./utils/carousels.js";
-import { abc as sr, indexIn as pr, startsWith as dr } from "./utils/comparators.js";
-import { debounce as xr } from "./utils/debounce.js";
-import { useEventListener as Kr } from "./utils/event.js";
-import { collapse as Ar, expand as Cr } from "./utils/expander.js";
-import { getKivaImageUrl as _r, isLegacyPlaceholderAvatar as cr, randomizedUserAvatarClass as Lr } from "./utils/imageUtils.js";
-import { LOAN_CALLOUTS_FRAGMENT as Tr, LOAN_GEOCODE_FRAGMENT as Er, LOAN_PROGRESS_FRAGMENT as Rr, loanCardComputedProperties as Mr, loanCardMethods as Or } from "./utils/loanCard.js";
-import { BALANCE_CAMPAIGN as Sr, BASE_CAMPAIGN as gr, ERL_COOKIE_NAME as Pr, NO_BALANCE_CAMPAIGN as Gr, TOP_UP_CAMPAIGN as Fr, getDropdownPriceArray as hr, getLendCtaSelectedOption as Vr, isBetween25And50 as Br, isLessThan25 as Dr, truncateStringByWords as yr } from "./utils/loanUtils.js";
-import { animationCoordinator as kr, computeMapCenter as Ur, computeMapZoom as wr, generateMapMarkers as Wr, getCoordinatesBetween as Hr, getCountryColor as jr, getLoansIntervals as zr } from "./utils/mapUtils.js";
-import { lockPrintSingleEl as Zr, unlockPrintSingleEl as qr } from "./utils/printing.js";
-import { lockScroll as Xr, lockScrollSmallOnly as Yr, unlockScroll as $r, unlockScrollSmallOnly as ot } from "./utils/scrollLock.js";
-import { buildTailwindClassName as rt, headerNumberCase as tt, kebabCase as at, removeObjectProperty as ft } from "./utils/themeUtils.js";
-import { throttle as mt } from "./utils/throttle.js";
-import { isTargetElement as pt, offBodyTouchstart as dt, onBodyTouchstart as ut } from "./utils/touchEvents.js";
-import { getTreemap as nt } from "./utils/treemap.js";
-import { KvBlueskyIcon as vt } from "./assets/icons/bluesky.js";
-import { KV_CLASSIC_LOAN_CARD_FRAGMENT as Ct, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as it } from "./vue/KvClassicLoanCard2.js";
-import { KV_COMPACT_LOAN_CARD_FRAGMENT as ct, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as Lt } from "./vue/KvCompactLoanCard2.js";
-import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as Tt, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as Et } from "./vue/KvIntroductionLoanCard2.js";
-import { KV_LEND_CTA_FRAGMENT as Mt, KV_LEND_CTA_USER_FRAGMENT as Ot } from "./vue/KvLendCta2.js";
-import { KV_LOAN_ACTIVITIES_FRAGMENT as St } from "./vue/KvLoanActivities2.js";
-import { KV_LOAN_BOOKMARK_FRAGMENT as Pt } from "./vue/KvLoanBookmark2.js";
-import { KV_LOAN_TAG_FRAGMENT as Ft } from "./vue/KvLoanTag2.js";
-import { KV_LOAN_USE_FRAGMENT as Vt } from "./vue/KvLoanUse2.js";
-import { KV_WIDE_LOAN_CARD_FRAGMENT as Dt, KV_WIDE_LOAN_CARD_USER_FRAGMENT as yt } from "./vue/KvWideLoanCard2.js";
+import { default as Yo } from "./vue/KvPieChartV2.js";
+import { default as oe } from "./vue/KvPill.js";
+import { default as re } from "./vue/KvPopper.js";
+import { default as ae } from "./vue/KvProgressBar.js";
+import { default as le } from "./vue/KvProgressCircle.js";
+import { default as se } from "./vue/KvPulsingDot.js";
+import { default as de } from "./vue/KvRadio.js";
+import { default as xe } from "./vue/KvSelect.js";
+import { default as Ke } from "./vue/KvSideSheet.js";
+import { default as Ae } from "./vue/KvSwitch.js";
+import { default as ie } from "./vue/KvTab.js";
+import { default as ce } from "./vue/KvTabPanel.js";
+import { default as Ne } from "./vue/KvTabs.js";
+import { default as Ee } from "./vue/KvTextInput.js";
+import { default as Me } from "./vue/KvTextLink.js";
+import { default as Ie } from "./vue/KvThemeProvider.js";
+import { default as Pe } from "./vue/KvToast.js";
+import { default as Ge } from "./vue/KvTooltip.js";
+import { default as Fe } from "./vue/KvTreeMapChart.js";
+import { default as Be } from "./vue/KvUserAvatar.js";
+import { default as ye } from "./vue/KvUtilityMenu.js";
+import { default as ke } from "./vue/KvVerticalCarousel.js";
+import { default as we } from "./vue/KvVotingCard.js";
+import { default as He } from "./vue/KvVotingCardV2.js";
+import { default as ze } from "./vue/KvWideLoanCard.js";
+import { default as Ze } from "./vue/KvAtbModal.js";
+import { default as Je } from "./vue/KvSecondaryNav.js";
+import { default as Ye } from "./vue/KvWwwHeader.js";
+import { default as or, Mash as er } from "./utils/Alea.js";
+import { groupBy as tr, sortBy as ar } from "./utils/arrayUtils.js";
+import { useAttrs as lr } from "./utils/attrs.js";
+import { carouselUtil as sr } from "./utils/carousels.js";
+import { abc as dr, indexIn as ur, startsWith as xr } from "./utils/comparators.js";
+import { debounce as Kr } from "./utils/debounce.js";
+import { useEventListener as Ar } from "./utils/event.js";
+import { collapse as ir, expand as _r } from "./utils/expander.js";
+import { getKivaImageUrl as Lr, isLegacyPlaceholderAvatar as Nr, randomizedUserAvatarClass as Tr } from "./utils/imageUtils.js";
+import { LOAN_CALLOUTS_FRAGMENT as Rr, LOAN_GEOCODE_FRAGMENT as Mr, LOAN_PROGRESS_FRAGMENT as Or, loanCardComputedProperties as Ir, loanCardMethods as Sr } from "./utils/loanCard.js";
+import { BALANCE_CAMPAIGN as gr, BASE_CAMPAIGN as Gr, ERL_COOKIE_NAME as hr, NO_BALANCE_CAMPAIGN as Fr, TOP_UP_CAMPAIGN as Vr, getDropdownPriceArray as Br, getLendCtaSelectedOption as Dr, isBetween25And50 as yr, isLessThan25 as br, truncateStringByWords as kr } from "./utils/loanUtils.js";
+import { animationCoordinator as wr, computeMapCenter as Wr, computeMapZoom as Hr, generateMapMarkers as jr, getCoordinatesBetween as zr, getCountryColor as Qr, getLoansIntervals as Zr } from "./utils/mapUtils.js";
+import { lockPrintSingleEl as Jr, unlockPrintSingleEl as Xr } from "./utils/printing.js";
+import { lockScroll as $r, lockScrollSmallOnly as ot, unlockScroll as et, unlockScrollSmallOnly as rt } from "./utils/scrollLock.js";
+import { buildTailwindClassName as at, headerNumberCase as ft, kebabCase as lt, removeObjectProperty as mt } from "./utils/themeUtils.js";
+import { throttle as pt } from "./utils/throttle.js";
+import { isTargetElement as ut, offBodyTouchstart as xt, onBodyTouchstart as nt } from "./utils/touchEvents.js";
+import { getTreemap as vt } from "./utils/treemap.js";
+import { KvBlueskyIcon as Ct } from "./assets/icons/bluesky.js";
+import { KV_CLASSIC_LOAN_CARD_FRAGMENT as _t, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as ct } from "./vue/KvClassicLoanCard2.js";
+import { KV_COMPACT_LOAN_CARD_FRAGMENT as Nt, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as Tt } from "./vue/KvCompactLoanCard2.js";
+import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as Rt, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as Mt } from "./vue/KvIntroductionLoanCard2.js";
+import { KV_LEND_CTA_FRAGMENT as It, KV_LEND_CTA_USER_FRAGMENT as St } from "./vue/KvLendCta2.js";
+import { KV_LOAN_ACTIVITIES_FRAGMENT as gt } from "./vue/KvLoanActivities2.js";
+import { KV_LOAN_BOOKMARK_FRAGMENT as ht } from "./vue/KvLoanBookmark2.js";
+import { KV_LOAN_TAG_FRAGMENT as Vt } from "./vue/KvLoanTag2.js";
+import { KV_LOAN_USE_FRAGMENT as Dt } from "./vue/KvLoanUse2.js";
+import { KV_WIDE_LOAN_CARD_FRAGMENT as bt, KV_WIDE_LOAN_CARD_USER_FRAGMENT as kt } from "./vue/KvWideLoanCard2.js";
 export {
-  Ye as Alea,
-  Sr as BALANCE_CAMPAIGN,
-  gr as BASE_CAMPAIGN,
-  Pr as ERL_COOKIE_NAME,
-  Ct as KV_CLASSIC_LOAN_CARD_FRAGMENT,
-  it as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
-  ct as KV_COMPACT_LOAN_CARD_FRAGMENT,
-  Lt as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
-  Tt as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
-  Et as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
-  Mt as KV_LEND_CTA_FRAGMENT,
-  Ot as KV_LEND_CTA_USER_FRAGMENT,
-  St as KV_LOAN_ACTIVITIES_FRAGMENT,
-  Pt as KV_LOAN_BOOKMARK_FRAGMENT,
+  or as Alea,
+  gr as BALANCE_CAMPAIGN,
+  Gr as BASE_CAMPAIGN,
+  hr as ERL_COOKIE_NAME,
+  _t as KV_CLASSIC_LOAN_CARD_FRAGMENT,
+  ct as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
+  Nt as KV_COMPACT_LOAN_CARD_FRAGMENT,
+  Tt as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  Rt as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
+  Mt as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
+  It as KV_LEND_CTA_FRAGMENT,
+  St as KV_LEND_CTA_USER_FRAGMENT,
+  gt as KV_LOAN_ACTIVITIES_FRAGMENT,
+  ht as KV_LOAN_BOOKMARK_FRAGMENT,
   Oo as KV_LOAN_INFO_CARD_FRAGMENT,
-  Ft as KV_LOAN_TAG_FRAGMENT,
-  Vt as KV_LOAN_USE_FRAGMENT,
-  Dt as KV_WIDE_LOAN_CARD_FRAGMENT,
-  yt as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
+  Vt as KV_LOAN_TAG_FRAGMENT,
+  Dt as KV_LOAN_USE_FRAGMENT,
+  bt as KV_WIDE_LOAN_CARD_FRAGMENT,
+  kt as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
   r as KvAccordionItem,
   a as KvActivityRow,
-  ze as KvAtbModal,
-  vt as KvBlueskyIcon,
+  Ze as KvAtbModal,
+  Ct as KvBlueskyIcon,
   l as KvBorrowerImage,
   s as KvButton,
   d as KvCardFrame,
@@ -139,9 +140,9 @@ export {
   N as KvChip,
   E as KvClassicLoanCard,
   I as KvCommentsAdd,
-  g as KvCommentsContainer,
+  P as KvCommentsContainer,
   G as KvCommentsHeartButton,
-  h as KvCommentsList,
+  F as KvCommentsList,
   B as KvCommentsListItem,
   y as KvCommentsReplyButton,
   M as KvCompactLoanCard,
@@ -168,88 +169,89 @@ export {
   To as KvLoanBookmark,
   Ro as KvLoanCallouts,
   Io as KvLoanInfoCard,
-  go as KvLoanProgressGroup,
+  Po as KvLoanProgressGroup,
   Go as KvLoanTag,
-  ho as KvLoanTeamPick,
+  Fo as KvLoanTeamPick,
   Bo as KvLoanUse,
   wo as KvMap,
   Ho as KvMaterialIcon,
   zo as KvPageContainer,
   Zo as KvPagination,
   Jo as KvPieChart,
-  Yo as KvPill,
-  oe as KvPopper,
-  re as KvProgressBar,
-  ae as KvProgressCircle,
-  le as KvPulsingDot,
-  se as KvRadio,
-  Ze as KvSecondaryNav,
-  de as KvSelect,
-  xe as KvSideSheet,
-  Ke as KvSwitch,
-  Ae as KvTab,
-  ie as KvTabPanel,
-  ce as KvTabs,
-  Ne as KvTextInput,
-  Ee as KvTextLink,
-  Me as KvThemeProvider,
-  Ie as KvToast,
-  ge as KvTooltip,
-  Ge as KvTreeMapChart,
-  he as KvUserAvatar,
-  Be as KvUtilityMenu,
-  ye as KvVerticalCarousel,
-  ke as KvVotingCard,
-  we as KvVotingCardV2,
-  He as KvWideLoanCard,
-  Je as KvWwwHeader,
-  Tr as LOAN_CALLOUTS_FRAGMENT,
-  Er as LOAN_GEOCODE_FRAGMENT,
-  Rr as LOAN_PROGRESS_FRAGMENT,
-  $e as Mash,
-  Gr as NO_BALANCE_CAMPAIGN,
-  Fr as TOP_UP_CAMPAIGN,
-  sr as abc,
-  kr as animationCoordinator,
-  rt as buildTailwindClassName,
-  lr as carouselUtil,
-  Ar as collapse,
-  Ur as computeMapCenter,
-  wr as computeMapZoom,
-  xr as debounce,
-  Cr as expand,
-  Wr as generateMapMarkers,
-  Hr as getCoordinatesBetween,
-  jr as getCountryColor,
-  hr as getDropdownPriceArray,
-  _r as getKivaImageUrl,
-  Vr as getLendCtaSelectedOption,
-  zr as getLoansIntervals,
-  nt as getTreemap,
-  er as groupBy,
-  tt as headerNumberCase,
-  pr as indexIn,
-  Br as isBetween25And50,
-  cr as isLegacyPlaceholderAvatar,
-  Dr as isLessThan25,
-  pt as isTargetElement,
-  at as kebabCase,
-  Mr as loanCardComputedProperties,
-  Or as loanCardMethods,
-  Zr as lockPrintSingleEl,
-  Xr as lockScroll,
-  Yr as lockScrollSmallOnly,
-  dt as offBodyTouchstart,
-  ut as onBodyTouchstart,
-  Lr as randomizedUserAvatarClass,
-  ft as removeObjectProperty,
-  rr as sortBy,
-  dr as startsWith,
-  mt as throttle,
-  yr as truncateStringByWords,
-  qr as unlockPrintSingleEl,
-  $r as unlockScroll,
-  ot as unlockScrollSmallOnly,
-  ar as useAttrs,
-  Kr as useEventListener
+  Yo as KvPieChartV2,
+  oe as KvPill,
+  re as KvPopper,
+  ae as KvProgressBar,
+  le as KvProgressCircle,
+  se as KvPulsingDot,
+  de as KvRadio,
+  Je as KvSecondaryNav,
+  xe as KvSelect,
+  Ke as KvSideSheet,
+  Ae as KvSwitch,
+  ie as KvTab,
+  ce as KvTabPanel,
+  Ne as KvTabs,
+  Ee as KvTextInput,
+  Me as KvTextLink,
+  Ie as KvThemeProvider,
+  Pe as KvToast,
+  Ge as KvTooltip,
+  Fe as KvTreeMapChart,
+  Be as KvUserAvatar,
+  ye as KvUtilityMenu,
+  ke as KvVerticalCarousel,
+  we as KvVotingCard,
+  He as KvVotingCardV2,
+  ze as KvWideLoanCard,
+  Ye as KvWwwHeader,
+  Rr as LOAN_CALLOUTS_FRAGMENT,
+  Mr as LOAN_GEOCODE_FRAGMENT,
+  Or as LOAN_PROGRESS_FRAGMENT,
+  er as Mash,
+  Fr as NO_BALANCE_CAMPAIGN,
+  Vr as TOP_UP_CAMPAIGN,
+  dr as abc,
+  wr as animationCoordinator,
+  at as buildTailwindClassName,
+  sr as carouselUtil,
+  ir as collapse,
+  Wr as computeMapCenter,
+  Hr as computeMapZoom,
+  Kr as debounce,
+  _r as expand,
+  jr as generateMapMarkers,
+  zr as getCoordinatesBetween,
+  Qr as getCountryColor,
+  Br as getDropdownPriceArray,
+  Lr as getKivaImageUrl,
+  Dr as getLendCtaSelectedOption,
+  Zr as getLoansIntervals,
+  vt as getTreemap,
+  tr as groupBy,
+  ft as headerNumberCase,
+  ur as indexIn,
+  yr as isBetween25And50,
+  Nr as isLegacyPlaceholderAvatar,
+  br as isLessThan25,
+  ut as isTargetElement,
+  lt as kebabCase,
+  Ir as loanCardComputedProperties,
+  Sr as loanCardMethods,
+  Jr as lockPrintSingleEl,
+  $r as lockScroll,
+  ot as lockScrollSmallOnly,
+  xt as offBodyTouchstart,
+  nt as onBodyTouchstart,
+  Tr as randomizedUserAvatarClass,
+  mt as removeObjectProperty,
+  ar as sortBy,
+  xr as startsWith,
+  pt as throttle,
+  kr as truncateStringByWords,
+  Xr as unlockPrintSingleEl,
+  et as unlockScroll,
+  rt as unlockScrollSmallOnly,
+  lr as useAttrs,
+  Ar as useEventListener
 };

package/dist/utils/pieChartColors.d.ts

@@ -0,0 +1,4 @@
+export declare const LOADING_BG_COLOR: string;
+export declare const OTHER_SEGMENT_BG_COLOR: string;
+export declare const PIE_CHART_COLORS: string[];
+export declare function getPieChartColor(index: number, customColor?: string): string;

package/dist/utils/pieChartColors.js

@@ -0,0 +1,42 @@
+import n from "@kiva/kv-tokens";
+const { colors: e } = n, i = e.gray[100], g = e.gray[300], o = [
+  // Tier 1 — Bold primaries
+  e["eco-green"][3],
+  // #276A43
+  e.marigold.DEFAULT,
+  // #F4B539
+  e["desert-rose"].DEFAULT,
+  // #C45F4F
+  "#2E3BAD",
+  // Custom blue for contrast
+  "#874FFF",
+  // Custom purple for contrast
+  e.stone[3],
+  // #635544
+  e.brand[500],
+  // #4AB67E
+  e.marigold[3],
+  // #996210
+  // Tier 2 — Lighter variants
+  e["eco-green"][2],
+  // #78C79F
+  e.marigold[2],
+  // #F8CD69
+  e["desert-rose"][2],
+  // #E0988D
+  e.stone[2],
+  // #AA9E8D
+  e.brand[300],
+  // #95D4B3
+  e["desert-rose"][3]
+  // #A24536
+];
+function a(t, r) {
+  return r || o[t % o.length];
+}
+export {
+  i as LOADING_BG_COLOR,
+  g as OTHER_SEGMENT_BG_COLOR,
+  o as PIE_CHART_COLORS,
+  a as getPieChartColor
+};

package/dist/utils/useCountUp.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'vue';
+export declare function easeInOutCubic(t: number): number;
+export declare function useCountUp(target: Ref<number>, active: Ref<boolean>, duration?: number): {
+    displayValue: Ref<number, number>;
+};

package/dist/utils/useCountUp.js

@@ -0,0 +1,7 @@
+import "vue";
+function r(e) {
+  return e < 0.5 ? 4 * e * e * e : 1 - (-2 * e + 2) ** 3 / 2;
+}
+export {
+  r as easeInOutCubic
+};

package/dist/vue/KvPieChartV2.css

@@ -0,0 +1 @@
+.segment-circle[data-v-3e2d3156]{transition:stroke-dashoffset .5s ease-in-out}.skeleton-ring[data-v-3e2d3156]{transition:opacity .5s ease-in-out}.legend-dot[data-v-3e2d3156]{transition:background-color .5s ease-in-out}

package/dist/vue/KvPieChartV2.js

@@ -0,0 +1,143 @@
+import y from "./KvPieChartV22.js";
+import { resolveComponent as x, openBlock as l, createElementBlock as o, createElementVNode as r, normalizeClass as k, createCommentVNode as n, Fragment as d, renderList as c, normalizeStyle as a, toDisplayString as w, createBlock as _, withCtx as b } from "vue";
+import "./KvPieChartV2.css";
+import u from "../_virtual/_plugin-vue_export-helper.js";
+const v = {
+  class: "kv-pie-chart-v2 tw-flex tw-flex-col tw-items-center tw-gap-1",
+  "aria-label": "Pie chart"
+}, C = { class: "tw-px-2" }, D = {
+  viewBox: "0 0 262 262",
+  fill: "none",
+  class: "tw-w-full",
+  role: "img",
+  "aria-hidden": "true"
+}, S = ["cx", "cy", "r", "stroke", "stroke-width"], L = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "transform"], O = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "transform"], V = {
+  key: 0,
+  class: "tw-flex tw-flex-wrap tw-justify-center tw-gap-0.5 tw-w-full tw-pt-0.5"
+}, W = { class: "tw-flex tw-gap-0.5 tw-items-center tw-min-w-0 tw-overflow-hidden" }, p = { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap tw-truncate" }, B = { class: "tw-flex tw-gap-0.5 tw-items-center tw-shrink-0" }, I = { class: "tw-grid tw-grid-cols-2 tw-grid-flow-row tw-gap-0.5" }, E = { class: "tw-flex tw-gap-0.5 tw-items-center tw-shrink-0 tw-overflow-hidden" }, X = { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap tw-truncate" }, Y = {
+  class: "tw-font-light tw-text-small tw-text-primary tw-text-right tw-shrink-0 tw-tabular-nums",
+  style: { "min-width": "2.8ch" }
+};
+function G(N, s, i, t, M, R) {
+  var h, m;
+  const f = x("kv-lightbox");
+  return l(), o("figure", v, [
+    r("div", C, [
+      (l(), o("svg", D, [
+        i.loading || !t.hasData ? (l(), o("circle", {
+          key: 0,
+          cx: t.CX,
+          cy: t.CY,
+          r: t.radius,
+          stroke: t.LOADING_BG_COLOR,
+          "stroke-width": i.strokeWidth,
+          fill: "none",
+          class: k(["skeleton-ring tw-opacity-0", { "skeleton-ring--hidden": t.animatedIn }])
+        }, null, 10, S)) : n("", !0),
+        (l(!0), o(d, null, c(t.visibleSegments, (e) => (l(), o("circle", {
+          key: e.label,
+          cx: t.CX,
+          cy: t.CY,
+          r: t.radius,
+          stroke: e.color,
+          "stroke-width": i.strokeWidth,
+          fill: "none",
+          "stroke-dasharray": `${e.dashLength} ${t.circumference * 2}`,
+          transform: `rotate(${e.startDeg}, ${t.CX}, ${t.CY})`,
+          class: "segment-circle",
+          style: a({
+            strokeDashoffset: e.isVisible ? 0 : e.dashLength,
+            transitionDelay: `${e.delay}ms`
+          })
+        }, null, 12, L))), 128)),
+        t.otherSegment ? (l(), o("circle", {
+          key: 1,
+          cx: t.CX,
+          cy: t.CY,
+          r: t.radius,
+          stroke: t.OTHER_SEGMENT_BG_COLOR,
+          "stroke-width": i.strokeWidth,
+          fill: "none",
+          "stroke-dasharray": `${t.otherSegment.dashLength} ${t.circumference * 2}`,
+          transform: `rotate(${t.otherSegment.startDeg}, ${t.CX}, ${t.CY})`,
+          class: "segment-circle",
+          style: a({
+            strokeDashoffset: t.otherSegment.isVisible ? 0 : t.otherSegment.dashLength,
+            transitionDelay: `${t.otherSegment.delay}ms`
+          })
+        }, null, 12, O)) : n("", !0)
+      ]))
+    ]),
+    t.hasData && !i.loading ? (l(), o("div", V, [
+      (l(!0), o(d, null, c(t.visibleSegments, (e, g) => (l(), o("div", {
+        key: e.label,
+        class: "tw-bg-gray-100 tw-flex tw-gap-0.5 tw-items-center tw-px-1 tw-py-0.5 tw-rounded-xs"
+      }, [
+        r("div", W, [
+          r("span", {
+            class: "tw-shrink-0 tw-w-1 tw-h-1 tw-rounded-full legend-dot",
+            style: a({
+              backgroundColor: e.isVisible ? e.color : "#d1d5db",
+              transitionDelay: `${e.delay}ms`
+            })
+          }, null, 4),
+          r("span", p, w(e.label), 1)
+        ]),
+        r("span", {
+          class: "tw-font-light tw-text-small tw-text-primary tw-text-right tw-shrink-0 tw-tabular-nums",
+          style: a({ minWidth: t.valueMinWidth })
+        }, w(t.formatDisplayValue(g)), 5)
+      ]))), 128)),
+      t.otherItems.length > 0 ? (l(), o("button", {
+        key: 0,
+        class: "tw-bg-gray-100 tw-flex tw-gap-0.5 tw-items-center tw-px-1 tw-py-0.5 tw-rounded-xs tw-cursor-pointer tw-border-0 tw-text-left",
+        type: "button",
+        onClick: s[0] || (s[0] = (e) => t.showOtherLightbox = !0)
+      }, [
+        r("div", B, [
+          r("span", {
+            class: "tw-shrink-0 tw-w-1 tw-h-1 tw-rounded-full legend-dot",
+            style: a({
+              backgroundColor: (h = t.otherSegment) != null && h.isVisible ? "#C4C4C4" : "#d1d5db",
+              transitionDelay: `${((m = t.otherSegment) == null ? void 0 : m.delay) ?? 0}ms`
+            })
+          }, null, 4),
+          s[2] || (s[2] = r("span", { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap" }, " Other ", -1))
+        ]),
+        r("span", {
+          class: "tw-font-light tw-text-small tw-text-primary tw-text-right tw-shrink-0 tw-tabular-nums",
+          style: a({ minWidth: t.valueMinWidth })
+        }, w(t.formatOtherDisplayValue()), 5)
+      ])) : n("", !0)
+    ])) : n("", !0),
+    t.hasData && !i.loading ? (l(), _(f, {
+      key: 1,
+      visible: t.showOtherLightbox,
+      title: "Other",
+      onLightboxClosed: s[1] || (s[1] = (e) => t.showOtherLightbox = !1)
+    }, {
+      default: b(() => [
+        r("div", I, [
+          (l(!0), o(d, null, c(t.allItemsWithColors, (e) => (l(), o("div", {
+            key: e.label,
+            class: "tw-bg-gray-100 tw-flex tw-gap-0.5 tw-items-center tw-px-1 tw-py-0.5 tw-rounded-xs tw-justify-between tw-w-full"
+          }, [
+            r("div", E, [
+              r("span", {
+                class: "tw-shrink-0 tw-w-1 tw-h-1 tw-rounded-full",
+                style: a({ backgroundColor: e.color })
+              }, null, 4),
+              r("span", X, w(e.label), 1)
+            ]),
+            r("span", Y, w(t.formatItemValue(e)), 1)
+          ]))), 128))
+        ])
+      ]),
+      _: 1
+    }, 8, ["visible"])) : n("", !0)
+  ]);
+}
+const A = /* @__PURE__ */ u(y, [["render", G], ["__scopeId", "data-v-3e2d3156"]]);
+export {
+  A as default
+};