@ck-ui/component-library 0.1.4 → 0.2.0

package/dist/components/MenuOptions/_types/menuOptions.types.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+export interface MenuOptionItem {
+    key: string;
+    label: string;
+    icon?: React.ReactNode;
+    defaultColor?: string;
+    activeColor?: string;
+    disabledColor?: string;
+    rightSlot?: React.ReactNode;
+    disabled?: boolean;
+    subItems?: MenuOptionItem[];
+    onClick?: (item: MenuOptionItem) => void;
+}
+export interface MenuCategory {
+    type?: "default" | "radio";
+    items: MenuOptionItem[];
+}
+export type MenuCategoriesData = Record<string, MenuCategory>;
+export interface MenuOptionsProps {
+    categories: MenuCategoriesData;
+    open: boolean;
+    onClose: () => void;
+    btnRef?: HTMLElement | null;
+    parentRef?: HTMLElement | null;
+    className?: string;
+    /** Controlled: key of the currently selected menu or submenu item */
+    selectedKey?: string;
+    /** Called when a (non-submenu-parent) item is clicked */
+    onSelect?: (key: string) => void;
+    /** Radio category values — Record<categoryKey, selectedItemKey> */
+    selectedRadioValues?: Record<string, string>;
+    onRadioChange?: (categoryKey: string, itemKey: string) => void;
+    /** Key of the submenu that is currently open (hover-driven). Lift to parent if needed. */
+    activeSubmenuKey?: string;
+    setActiveSubmenuKey?: (key: string) => void;
+    /** Renders a search input at the top of the menu that filters items by label */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Debounce delay in ms for the search input. Defaults to 0. */
+    searchDebounceMs?: number;
+}
+export interface MenuItemProps {
+    item: MenuOptionItem;
+    onClose: () => void;
+    selectedKey?: string;
+    onSelect?: (key: string) => void;
+    activeSubmenuKey?: string;
+    onSubmenuActivate?: (key: string) => void;
+}
+export interface RadioMenuItemProps {
+    item: MenuOptionItem;
+    checked: boolean;
+    onSelect: (key: string) => void;
+}
+//# sourceMappingURL=menuOptions.types.d.ts.map

package/dist/components/MenuOptions/_types/menuOptions.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuOptions.types.d.ts","sourceRoot":"","sources":["../../../../lib/components/MenuOptions/_types/menuOptions.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/D,0FAA0F;IAC1F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC"}

package/dist/components/MenuOptions/_types/menuOptions.types.js

@@ -0,0 +1 @@
+

package/dist/components/MenuOptions/_utils/computeMenuPosition.d.ts

@@ -0,0 +1,12 @@
+export type MenuPosition = {
+    top: number;
+    left?: number;
+    right?: number;
+};
+/**
+ * Computes the fixed position for the menu panel relative to its trigger button.
+ * Flips vertically if there is not enough space below, and horizontally if the
+ * panel would overflow the right edge of the boundary.
+ */
+export declare function computeMenuPosition(btnRef: HTMLElement, totalItems: number, parentRef?: HTMLElement | null): MenuPosition;
+//# sourceMappingURL=computeMenuPosition.d.ts.map

package/dist/components/MenuOptions/_utils/computeMenuPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"computeMenuPosition.d.ts","sourceRoot":"","sources":["../../../../lib/components/MenuOptions/_utils/computeMenuPosition.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAW1E;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,WAAW,EACnB,UAAU,EAAE,MAAM,EAClB,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,GAC7B,YAAY,CAsBd"}

package/dist/components/MenuOptions/_utils/computeMenuPosition.js

@@ -0,0 +1,14 @@
+function G(i) {
+  return i ? i.getBoundingClientRect() : new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+}
+function g(i, r, c) {
+  const n = i.getBoundingClientRect(), o = G(c), e = Math.min(
+    r * 32 + 16,
+    o.height - 8 * 2
+  );
+  let t = n.bottom + 4;
+  return t + e > o.bottom - 8 && (t = n.top - e - 4), t < o.top + 8 && (t = o.top + 8), n.left + 238 > o.right - 8 ? { top: t, right: window.innerWidth - n.right } : { top: t, left: n.left };
+}
+export {
+  g as computeMenuPosition
+};

package/dist/components/MenuOptions/_utils/computeSubmenuPosition.d.ts

@@ -0,0 +1,12 @@
+export type SubmenuPosition = {
+    top: number;
+    left?: number;
+    right?: number;
+};
+/**
+ * Computes the fixed position for a submenu panel relative to its parent menu item.
+ * Opens to the right by default; flips left if it would overflow the viewport.
+ * Clamps vertically so the panel stays within the viewport.
+ */
+export declare function computeSubmenuPosition(itemRect: DOMRect, subItemCount: number): SubmenuPosition;
+//# sourceMappingURL=computeSubmenuPosition.d.ts.map

package/dist/components/MenuOptions/_utils/computeSubmenuPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"computeSubmenuPosition.d.ts","sourceRoot":"","sources":["../../../../lib/components/MenuOptions/_utils/computeSubmenuPosition.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAM7E;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,OAAO,EACjB,YAAY,EAAE,MAAM,GACnB,eAAe,CAiBjB"}

package/dist/components/MenuOptions/_utils/computeSubmenuPosition.js

@@ -0,0 +1,8 @@
+function N(t, i) {
+  const E = window.innerWidth, o = window.innerHeight, G = Math.min(i * 32 + 16, o - 8 * 2);
+  let n = t.top;
+  return n + G > o - 8 && (n = o - G - 8), n < 8 && (n = 8), t.right + 12 + 238 > E - 8 ? { top: n, right: E - t.left + 12 } : { top: n, left: t.right + 12 };
+}
+export {
+  N as computeSubmenuPosition
+};

package/dist/components/MenuOptions/_utils/filterMenuCategories.d.ts

@@ -0,0 +1,9 @@
+import { MenuCategoriesData } from '../_types/menuOptions.types';
+/**
+ * Filters menu categories by a search query against item labels.
+ * - If a parent label matches, it is included with all its children.
+ * - If only a child label matches, the parent is still included so the submenu is reachable.
+ * - Returns the original categories object unchanged when query is empty.
+ */
+export declare function filterMenuCategories(categories: MenuCategoriesData, query: string): MenuCategoriesData;
+//# sourceMappingURL=filterMenuCategories.d.ts.map

package/dist/components/MenuOptions/_utils/filterMenuCategories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterMenuCategories.d.ts","sourceRoot":"","sources":["../../../../lib/components/MenuOptions/_utils/filterMenuCategories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAEnB,MAAM,6BAA6B,CAAC;AAErC;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAClC,UAAU,EAAE,kBAAkB,EAC9B,KAAK,EAAE,MAAM,GACZ,kBAAkB,CAgBpB"}

package/dist/components/MenuOptions/_utils/filterMenuCategories.js

@@ -0,0 +1,13 @@
+function l(o, c) {
+  const s = c.trim().toLowerCase();
+  if (!s) return o;
+  const i = (e) => e.label.toLowerCase().includes(s) || !!e.subItems?.some((t) => t.label.toLowerCase().includes(s)), r = {};
+  for (const [e, t] of Object.entries(o)) {
+    const n = t.items.filter(i);
+    n.length > 0 && (r[e] = { ...t, items: n });
+  }
+  return r;
+}
+export {
+  l as filterMenuCategories
+};

package/dist/components/MenuOptions/_utils/getIconStrokeColor.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns the CSS color value to use for a menu item's icon stroke.
+ * Falls back to CSS variable references so the value stays in sync with theming.
+ */
+export declare function getIconStrokeColor(isActive: boolean, isHovered: boolean, activeColor?: string, defaultColor?: string): string;
+//# sourceMappingURL=getIconStrokeColor.d.ts.map

package/dist/components/MenuOptions/_utils/getIconStrokeColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getIconStrokeColor.d.ts","sourceRoot":"","sources":["../../../../lib/components/MenuOptions/_utils/getIconStrokeColor.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,OAAO,EAClB,WAAW,CAAC,EAAE,MAAM,EACpB,YAAY,CAAC,EAAE,MAAM,GACpB,MAAM,CAGR"}

package/dist/components/MenuOptions/_utils/getIconStrokeColor.js

@@ -0,0 +1,6 @@
+function n(r, o, t, e) {
+  return r || o ? t ?? "var(--primary-600)" : e ?? "var(--black-500)";
+}
+export {
+  n as getIconStrokeColor
+};

package/dist/components/MenuOptions/_utils/getMenuItemActiveState.d.ts

@@ -0,0 +1,11 @@
+import { MenuOptionItem } from '../_types/menuOptions.types';
+/**
+ * Determines whether a menu item should be rendered in the active/highlighted state.
+ *
+ * An item is active when:
+ * - Its key matches the currently selected key, OR
+ * - It has a submenu and one of its children's composite keys matches the selected key, OR
+ * - Its submenu is currently open (hover-driven)
+ */
+export declare function getMenuItemActiveState(item: MenuOptionItem, selectedKey: string | undefined, isSubmenuOpen: boolean): boolean;
+//# sourceMappingURL=getMenuItemActiveState.d.ts.map

package/dist/components/MenuOptions/_utils/getMenuItemActiveState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMenuItemActiveState.d.ts","sourceRoot":"","sources":["../../../../lib/components/MenuOptions/_utils/getMenuItemActiveState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAElE;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,MAAM,GAAG,SAAS,EAC/B,aAAa,EAAE,OAAO,GACrB,OAAO,CAWT"}

package/dist/components/MenuOptions/_utils/getMenuItemActiveState.js

@@ -0,0 +1,6 @@
+function n(r, t, u) {
+  return !!(u || t === r.key || r.subItems?.length && t && r.subItems.some((e) => `${r.key}__${e.key}` === t));
+}
+export {
+  n as getMenuItemActiveState
+};

package/dist/components/MenuOptions/index.d.ts

@@ -0,0 +1,5 @@
+import { MenuOptionsProps } from './_types/menuOptions.types';
+export type { MenuOptionsProps, MenuOptionItem, MenuCategoriesData, MenuCategory, } from './_types/menuOptions.types';
+export { MenuOptionsWrapper } from './MenuOptionsWrapper';
+export declare function MenuOptions({ categories, open, onClose, btnRef, parentRef, className, selectedKey, onSelect, selectedRadioValues, onRadioChange, activeSubmenuKey, setActiveSubmenuKey, searchable, searchPlaceholder, searchDebounceMs, }: MenuOptionsProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MenuOptions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/MenuOptions/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAQnE,YAAY,EACV,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,YAAY,GACb,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,IAAI,EACJ,OAAO,EACP,MAAM,EACN,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,mBAAmB,EACnB,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACV,iBAA4B,EAC5B,gBAAsB,GACvB,EAAE,gBAAgB,kDAgJlB"}

package/dist/components/MenuOptions/index.js

@@ -0,0 +1,122 @@
+import { jsxs as j, jsx as i } from "react/jsx-runtime";
+import { useRef as W, useState as v, useEffect as p, useCallback as $, useMemo as q } from "react";
+import { s as m } from "../../styles.module-B5fY7mP8.js";
+import { M as B } from "../../MenuItem-DlaRT10y.js";
+import { RadioMenuItem as D } from "./_helpers/RadioMenuItem.js";
+import { mergeClasses as G } from "../../utils/mergeClasses.js";
+import { Search as H } from "../Search/index.js";
+import { filterMenuCategories as J } from "./_utils/filterMenuCategories.js";
+import { computeMenuPosition as T } from "./_utils/computeMenuPosition.js";
+import { MenuOptionsWrapper as ne } from "./MenuOptionsWrapper.js";
+function ee({
+  categories: a,
+  open: r,
+  onClose: o,
+  btnRef: u,
+  parentRef: w,
+  className: x,
+  selectedKey: y,
+  onSelect: N,
+  selectedRadioValues: O,
+  onRadioChange: S,
+  activeSubmenuKey: z,
+  setActiveSubmenuKey: l,
+  searchable: c,
+  searchPlaceholder: I = "Search",
+  searchDebounceMs: P = 300
+}) {
+  const h = W(null), [d, k] = v(null), [Q, C] = v(
+    O ?? {}
+  ), [f, E] = v("");
+  p(() => {
+    if (!r) return;
+    const e = (t) => {
+      h.current && !h.current.contains(t.target) && !u?.contains(t.target) && o();
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [r, o, u]), p(() => {
+    if (!r) return;
+    const e = (t) => {
+      t.key === "Escape" && o();
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [r, o]);
+  const g = Object.values(a).reduce(
+    (e, t) => e + t.items.length,
+    0
+  ), n = $(() => {
+    u && k(T(u, g, w));
+  }, [u, w, g]);
+  p(() => {
+    r ? (n(), l?.("")) : (k(null), E(""));
+  }, [r, n]), p(() => {
+    if (!r) return;
+    window.addEventListener("scroll", n, !0);
+    const e = () => {
+      n(), l?.("");
+    };
+    return window.addEventListener("resize", e), () => {
+      window.removeEventListener("scroll", n, !0), window.removeEventListener("resize", e);
+    };
+  }, [r, n, l]);
+  const M = q(
+    () => c ? J(a, f) : a,
+    [c, f, a]
+  );
+  return r ? /* @__PURE__ */ j(
+    "div",
+    {
+      ref: h,
+      tabIndex: -1,
+      className: G(m["ckds-menu-panel"], x),
+      style: {
+        top: d?.top,
+        visibility: d ? "visible" : "hidden",
+        ...d?.right !== void 0 ? { right: d.right, left: "auto" } : { left: d?.left, right: "auto" }
+      },
+      children: [
+        c && /* @__PURE__ */ i("div", { className: m["menu-search-wrapper"], children: /* @__PURE__ */ i(
+          H,
+          {
+            value: f,
+            onChange: E,
+            placeholder: I,
+            size: "medium",
+            autoFocus: !0,
+            debounceMs: P
+          }
+        ) }),
+        c && f.trim() && Object.keys(M).length === 0 && /* @__PURE__ */ i("span", { className: `ckds-cap-reg ${m["menu-no-results"]}`, children: "0 Result" }),
+        Object.entries(M).map(([e, t], F) => /* @__PURE__ */ j("div", { className: m["menu-category"], children: [
+          F > 0 && /* @__PURE__ */ i("hr", { className: m["menu-divider"] }),
+          t.type === "radio" ? t.items.map((s) => /* @__PURE__ */ i(
+            D,
+            {
+              item: s,
+              checked: Q[e] === s.key,
+              onSelect: (L) => {
+                C((R) => ({ ...R, [e]: L })), S?.(e, L);
+              }
+            },
+            s.key
+          )) : t.items.map((s) => /* @__PURE__ */ i(
+            B,
+            {
+              item: s,
+              onClose: o,
+              selectedKey: y,
+              onSelect: N,
+              activeSubmenuKey: z,
+              onSubmenuActivate: l
+            },
+            s.key
+          ))
+        ] }, e))
+      ]
+    }
+  ) : null;
+}
+export {
+  ee as MenuOptions,
+  ne as MenuOptionsWrapper
+};

package/dist/components/MetricCards/Component/CardWithIconAndForecast/index.d.ts

@@ -0,0 +1,3 @@
+import { CardIconProps } from '../../_types/metricCards.types';
+export declare function CardWithIconAndForecast({ icon, title, value, dateRange, deviationChip, forecastValue, className, actionLink, secondarySection, }: CardIconProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MetricCards/Component/CardWithIconAndForecast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../lib/components/MetricCards/Component/CardWithIconAndForecast/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAKpE,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,aAAa,EACb,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,GACjB,EAAE,aAAa,2CAuDf"}

package/dist/components/MetricCards/Component/CardWithIconAndForecast/index.js

@@ -0,0 +1,71 @@
+import { jsxs as c, Fragment as g, jsx as r } from "react/jsx-runtime";
+import { DeviationTag as h } from "../../../DeviationTag/index.js";
+import '../../../../assets/index-0R9p-l95.css';const u = "data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_2177_11954)'%3e%3cpath%20d='M6.5001%205.5L10.6001%201.4'%20stroke='%233060C1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11%203.41504V1.00005H8.585'%20stroke='%233060C1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M5.5%201H4.5C2%201%201%202%201%204.5V7.5C1%2010%202%2011%204.5%2011H7.5C10%2011%2011%2010%2011%207.5V6.5'%20stroke='%233060C1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2177_11954'%3e%3crect%20width='12'%20height='12'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e", m = "_card_4gun4_1", v = "_icon_4gun4_19", p = "_title_4gun4_22", f = "_value_4gun4_36", N = "_forecast_4gun4_48", e = {
+  card: m,
+  icon: v,
+  title: p,
+  "action-link": "_action-link_4gun4_29",
+  value: f,
+  "date-range": "_date-range_4gun4_43",
+  "forecast-card": "_forecast-card_4gun4_48",
+  forecast: N,
+  "regular-card": "_regular-card_4gun4_54",
+  "secondary-section": "_secondary-section_4gun4_58"
+};
+function C({
+  icon: n,
+  title: i,
+  value: t,
+  dateRange: l,
+  deviationChip: o,
+  forecastValue: s,
+  className: _,
+  actionLink: a,
+  secondarySection: d
+}) {
+  return /* @__PURE__ */ c(g, { children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: `${e.card} ${s ? e.forecast : ""} ${_}`,
+        children: [
+          /* @__PURE__ */ c("div", { className: e["regular-card"], children: [
+            (n || i) && /* @__PURE__ */ c("div", { className: e.header, children: [
+              n && /* @__PURE__ */ r("div", { className: e.icon, children: n }),
+              i && /* @__PURE__ */ r("div", { className: e.title, children: i })
+            ] }),
+            t && /* @__PURE__ */ r("div", { className: e.value, children: t }),
+            l && /* @__PURE__ */ r("div", { className: e["date-range"], children: l }),
+            o && /* @__PURE__ */ r(
+              h,
+              {
+                price: "+$1,100",
+                percentage: "0.13",
+                arrowDirection: "up",
+                arrowColor: "green"
+              }
+            )
+          ] }),
+          s && /* @__PURE__ */ c("div", { className: e["forecast-card"], children: [
+            /* @__PURE__ */ r("div", { className: e.title, children: "Forecast" }),
+            /* @__PURE__ */ r("div", { className: e.value, children: s })
+          ] }),
+          a?.href && /* @__PURE__ */ r(
+            "a",
+            {
+              href: a?.href,
+              target: a?.target ?? "_blank",
+              rel: "noreferrer",
+              className: `${e["action-link"]} ${a?.className}`,
+              children: /* @__PURE__ */ r("img", { src: u, alt: "Redirection Link" })
+            }
+          )
+        ]
+      }
+    ),
+    d && /* @__PURE__ */ r("div", { className: e["secondary-section"], children: d })
+  ] });
+}
+export {
+  C as CardWithIconAndForecast
+};

package/dist/components/MetricCards/Constant/constant.d.ts

@@ -0,0 +1,13 @@
+export declare const VARIANT: {
+    readonly DEFAULT: "default";
+    readonly CUSTOM: "custom";
+};
+export declare const LINK_TARGET: {
+    readonly BLANK: "_blank";
+    readonly SELF: "_self";
+};
+export declare const SIZE: {
+    readonly REGULAR: "regular";
+    readonly LARGE: "large";
+};
+//# sourceMappingURL=constant.d.ts.map

package/dist/components/MetricCards/Constant/constant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constant.d.ts","sourceRoot":"","sources":["../../../../lib/components/MetricCards/Constant/constant.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;CAGV,CAAC;AAEX,eAAO,MAAM,WAAW;;;CAGd,CAAC;AAEX,eAAO,MAAM,IAAI;;;CAGP,CAAC"}

package/dist/components/MetricCards/Constant/constant.js

@@ -0,0 +1,15 @@
+const A = {
+  DEFAULT: "default",
+  CUSTOM: "custom"
+}, t = {
+  BLANK: "_blank",
+  SELF: "_self"
+}, E = {
+  REGULAR: "regular",
+  LARGE: "large"
+};
+export {
+  t as LINK_TARGET,
+  E as SIZE,
+  A as VARIANT
+};

package/dist/components/MetricCards/_types/metricCards.types.d.ts

@@ -0,0 +1,38 @@
+import { LINK_TARGET, VARIANT, SIZE } from '../Constant/constant';
+export type LinkTarget = (typeof LINK_TARGET)[keyof typeof LINK_TARGET];
+export type variantOption = (typeof VARIANT)[keyof typeof VARIANT];
+export type Size = (typeof SIZE)[keyof typeof SIZE];
+interface DeviationChip {
+    price?: string;
+    percentage?: string;
+    arrowDirection?: string;
+    arrowColor?: string;
+}
+interface ActionLink {
+    href: string;
+    target?: LinkTarget;
+    className?: string;
+}
+export interface CardIconProps {
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    value?: React.ReactNode;
+    dateRange?: string;
+    deviationChip?: DeviationChip;
+    forecastValue?: React.ReactNode;
+    className?: string;
+    actionLink?: ActionLink;
+    secondarySection?: React.ReactNode;
+}
+export interface MetricCardProps {
+    cardData: CardIconProps;
+    size: Size;
+    variant: variantOption;
+    children?: React.ReactNode;
+    className?: string;
+    boxBg?: boolean;
+    cardFooter?: React.ReactNode;
+    shadow?: boolean;
+}
+export {};
+//# sourceMappingURL=metricCards.types.d.ts.map

package/dist/components/MetricCards/_types/metricCards.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metricCards.types.d.ts","sourceRoot":"","sources":["../../../../lib/components/MetricCards/_types/metricCards.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAG,IAAI,EAAC,MAAM,sBAAsB,CAAC;AAEvE,MAAM,MAAM,UAAU,GACpB,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAEjD,MAAM,MAAM,aAAa,GACvB,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAEzC,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,OAAO,IAAI,CAAC,CAAC;AACpD,UAAU,aAAa;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAC,MAAM,CAAC;CACpB;AAED,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,aAAa,CAAC;IACxB,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB"}

package/dist/components/MetricCards/_types/metricCards.types.js

@@ -0,0 +1 @@
+

package/dist/components/MetricCards/index.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { MetricCardProps } from './_types/metricCards.types';
+export declare const MetricCard: React.FC<MetricCardProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MetricCards/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/MetricCards/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGlE,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwBhD,CAAC"}

package/dist/components/MetricCards/index.js

@@ -0,0 +1,31 @@
+import { jsxs as c, jsx as d } from "react/jsx-runtime";
+import "react";
+import { CardBox as f } from "../CardBox/index.js";
+import { CardWithIconAndForecast as n } from "./Component/CardWithIconAndForecast/index.js";
+import { SIZE as x, VARIANT as r } from "./Constant/constant.js";
+const F = ({
+  className: t,
+  cardFooter: m,
+  shadow: i,
+  children: e,
+  cardData: p = {},
+  boxBg: s = !1,
+  size: A = x.REGULAR,
+  variant: o = r.DEFAULT
+}) => /* @__PURE__ */ c(
+  f,
+  {
+    className: t,
+    boxBg: s,
+    cardFooter: m,
+    shadow: i,
+    size: A,
+    children: [
+      o === r.DEFAULT && /* @__PURE__ */ d(n, { ...p }),
+      o === r.CUSTOM && e
+    ]
+  }
+);
+export {
+  F as MetricCard
+};

package/dist/components/PopupAndDialogBox/_types/popupAndDialog.types.d.ts

@@ -0,0 +1,31 @@
+import { ButtonSize } from '../../CKButton/_types/button.types';
+import { TYPE, BUTTON_LAYOUT } from '../constant/popupAndDialog';
+export type DialogType = (typeof TYPE)[keyof typeof TYPE];
+export interface DialogProps {
+    open: boolean;
+    children: React.ReactNode;
+    type: DialogType;
+    onClose?: () => void;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    className?: string;
+}
+export interface ButtonProps {
+    label?: string;
+    onClick?: () => void;
+    size?: ButtonSize;
+}
+export type ButtonLayout = (typeof BUTTON_LAYOUT)[keyof typeof BUTTON_LAYOUT];
+export interface FooterProps {
+    children?: React.ReactNode;
+    buttonLayout?: ButtonLayout;
+    primaryButtonDetail?: ButtonProps;
+    secondaryButtonDetail?: ButtonProps;
+}
+export interface HeaderProps {
+    title?: string;
+    children?: React.ReactNode;
+    onClose?: () => void;
+    showClose?: boolean;
+}
+//# sourceMappingURL=popupAndDialog.types.d.ts.map

package/dist/components/PopupAndDialogBox/_types/popupAndDialog.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popupAndDialog.types.d.ts","sourceRoot":"","sources":["../../../../lib/components/PopupAndDialogBox/_types/popupAndDialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEtE,MAAM,MAAM,UAAU,GAAE,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,OAAO,IAAI,CAAC,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,MAAM,YAAY,GACvB,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,qBAAqB,CAAC,EAAE,WAAW,CAAC;CACrC;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/components/PopupAndDialogBox/_types/popupAndDialog.types.js

@@ -0,0 +1 @@
+

package/dist/components/PopupAndDialogBox/components/DialogContent.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export declare const DialogContent: React.FC<{
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=DialogContent.d.ts.map

package/dist/components/PopupAndDialogBox/components/DialogContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.d.ts","sourceRoot":"","sources":["../../../../lib/components/PopupAndDialogBox/components/DialogContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAQjE,CAAC"}

package/dist/components/PopupAndDialogBox/components/DialogContent.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import { s } from "../../../styles.module-yNDMDNO-.js";
+const m = ({
+  children: o
+}) => /* @__PURE__ */ t("div", { className: s["ckds-dialog-content"], children: o });
+export {
+  m as DialogContent
+};

package/dist/components/PopupAndDialogBox/components/DialogFooter.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { FooterProps } from '../_types/popupAndDialog.types';
+export declare const DialogFooter: React.FC<FooterProps>;
+//# sourceMappingURL=DialogFooter.d.ts.map

package/dist/components/PopupAndDialogBox/components/DialogFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogFooter.d.ts","sourceRoot":"","sources":["../../../../lib/components/PopupAndDialogBox/components/DialogFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAIlE,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+C9C,CAAC"}