impact-ui 3.7.34-alpha.2 → 3.7.34-alpha.3

package/dist/_virtual/separateStyles.js

@@ -0,0 +1,4 @@
+var separateStyles = {};
+export {
+  separateStyles as __exports
+};

package/dist/_virtual/useThemeWithoutDefault.js

@@ -0,0 +1,4 @@
+var useThemeWithoutDefault = {};
+export {
+  useThemeWithoutDefault as __exports
+};

package/dist/components/Accordion/Accordion.types.d.ts

@@ -0,0 +1,118 @@
+import { ReactNode } from 'react';
+import { AccordionProps as MUIAccordionProps } from '@mui/material/Accordion';
+import { BaseComponentProps } from '../../types';
+
+/**
+ * Data structure for individual accordion items
+ */
+export interface AccordionItemData {
+    /**
+     * Unique identifier/value for the accordion item
+     * Used to track expanded state
+     */
+    value: string;
+    /**
+     * Content displayed in the accordion header/summary
+     * Can be a string or React component
+     */
+    header: ReactNode;
+    /**
+     * Content displayed when the accordion is expanded
+     */
+    content: ReactNode;
+    /**
+     * Whether this specific item is disabled
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Data structure for single accordion mode
+ */
+export interface SingleAccordionData {
+    /**
+     * Unique identifier/value for the accordion item
+     */
+    value: string;
+    /**
+     * Content displayed in the accordion header/summary
+     */
+    header: ReactNode;
+    /**
+     * Content displayed when the accordion is expanded
+     */
+    content: ReactNode;
+}
+export interface AccordionProps extends Omit<BaseComponentProps, 'children'>, Omit<MUIAccordionProps, 'expanded' | 'onChange' | 'children' | 'disabled'> {
+    /**
+     * Current expanded state. For single expansion mode, this is a string value.
+     * For multi-expansion mode (isMultiExpanded=true), this is an array of string values.
+     * @example
+     * // Single expansion
+     * expanded="panel1"
+     *
+     * // Multi expansion
+     * expanded={['panel1', 'panel3']}
+     */
+    expanded: string | string[];
+    /**
+     * Callback to update the expanded state.
+     * Required when not using the onChange prop for controlled behavior.
+     * @example
+     * const [expanded, setExpanded] = useState<string>('');
+     * <Accordion expanded={expanded} setExpanded={setExpanded} data={items} />
+     */
+    setExpanded?: (value: string | string[]) => void;
+    /**
+     * When true, multiple accordion items can be expanded simultaneously.
+     * When false (default), only one item can be expanded at a time.
+     * @default false
+     * @example
+     * <Accordion isMultiExpanded expanded={['panel1', 'panel2']} ... />
+     */
+    isMultiExpanded?: boolean;
+    /**
+     * Array of accordion items to render.
+     * Each item should have a unique `value`, `header`, and `content`.
+     * Required when isSingleItem is false or not provided.
+     * @example
+     * const data = [
+     *   { value: 'panel1', header: 'Section 1', content: <p>Content 1</p> },
+     *   { value: 'panel2', header: 'Section 2', content: <p>Content 2</p> },
+     * ];
+     */
+    data?: AccordionItemData[];
+    /**
+     * Custom onChange handler for accordion state changes.
+     * When provided, this takes precedence over setExpanded.
+     * Receives the value of the accordion item that was toggled.
+     * @param value - The value of the accordion item being toggled
+     * @example
+     * <Accordion onChange={(value) => console.log('Toggled:', value)} ... />
+     */
+    onChange?: (value: string) => void;
+    /**
+     * When true, renders a single accordion item using singleData prop.
+     * Useful for standalone accordions without a list of items.
+     * @default false
+     */
+    isSingleItem?: boolean;
+    /**
+     * Data for single accordion mode (when isSingleItem is true).
+     * Contains value, header, and content for the single accordion.
+     * @example
+     * <Accordion
+     *   isSingleItem
+     *   singleData={{ value: 'faq', header: 'FAQ', content: '...' }}
+     *   expanded="faq"
+     * />
+     */
+    singleData?: SingleAccordionData;
+    /**
+     * Disables all accordion items when true.
+     * Individual items can also be disabled via their disabled property in data array.
+     * @default false
+     */
+    disabled?: boolean;
+}
+//# sourceMappingURL=Accordion.types.d.ts.map

package/dist/components/Accordion/Accordion.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.types.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,cAAc,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACnF,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,cACf,SACE,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,EACpC,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;IAC5E;;;;;;;;;OASG;IACH,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE5B;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAEjD;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAE3B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC;IAEjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

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

@@ -0,0 +1,21 @@
+import { AccordionProps } from './Accordion.types';
+
+/**
+ * Accordion component for collapsible content sections.
+ * Supports single and multi-expansion modes, single item mode, and disabled states.
+ * Meets WCAG 2.1 Level AA accessibility standards.
+ *
+ * @example
+ * // Single expansion mode
+ * const [expanded, setExpanded] = useState('');
+ * <Accordion expanded={expanded} setExpanded={setExpanded} data={items} />
+ *
+ * // Multi expansion mode
+ * const [expanded, setExpanded] = useState<string[]>([]);
+ * <Accordion isMultiExpanded expanded={expanded} setExpanded={setExpanded} data={items} />
+ *
+ * // Single item mode
+ * <Accordion isSingleItem singleData={item} expanded="" setExpanded={setExpanded} />
+ */
+export declare const Accordion: import('react').ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,yBAAyB,CAAC;AAEjC;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,SAAS,wHA+HrB,CAAC"}

package/dist/components/Accordion/index.js

@@ -0,0 +1,137 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.appendChild(document.createTextNode(".impact_accordion_main_container{background:#eceefd;display:flex;flex-direction:column;flex-wrap:wrap;gap:0;gap:12px;width:100%}.impact_accordion_main_container .Mui-expanded{margin:0!important}.impact_accordion_main_container .accordion_main_container{border-bottom:1px solid #d4d4d4;border-radius:8px;box-shadow:none!important}.impact_accordion_main_container .accordion_main_container:before{opacity:0!important}.impact_accordion_main_container .accordion_main_container .accordion_header{display:flex!important;flex-direction:row-reverse;flex-grow:0!important;font-size:16px;gap:12px;height:48px;justify-content:flex-end!important;margin:0 16px!important;padding:0!important}.impact_accordion_main_container .accordion_main_container .accordion_header .MuiAccordionSummary-content{color:#0d152c;flex-grow:0!important;justify-content:flex-end}.impact_accordion_main_container .accordion_main_container .accordion_header .css-yw020d-MuiAccordionSummary-expandIconWrapper{align-items:center;background:#f5f6fa;border-radius:8px;height:32px;justify-content:center;transform:rotate(-90deg);width:32px}.impact_accordion_main_container .accordion_main_container .accordion_header .css-yw020d-MuiAccordionSummary-expandIconWrapper.Mui-expanded{transform:rotate(-180deg)}.impact_accordion_main_container .accordion_main_container .accordion_header.Mui-expanded{margin:0 16px!important;min-height:48px!important}.impact_accordion_main_container .accordion_main_container .accordion_body{color:#0d152c;padding:12px 16px!important}.impact_accordion_main_container .css-1elwnq4-MuiPaper-root-MuiAccordion-root.Mui-disabled{background-color:#fff}.impact_accordion_main_container .css-1elwnq4-MuiPaper-root-MuiAccordion-root.Mui-disabled .css-yw020d-MuiAccordionSummary-expandIconWrapper{background-color:#f8f9fb}.impact_accordion_main_container .css-1elwnq4-MuiPaper-root-MuiAccordion-root.Mui-disabled .MuiAccordionSummary-content,.impact_accordion_main_container .css-1elwnq4-MuiPaper-root-MuiAccordion-root.Mui-disabled .accordion_body{color:#b4bac7}.impact_accordion_main_container_single .accordion_main_container:last-child{border-radius:8px}.Mui-expanded.accordion_main_container{border:1px solid #eff2fa!important}.Mui-expanded.MuiAccordionSummary-content{font-weight:500}.accordion_main_container:focus{box-shadow:-3px 3px #eceefd,1px -1px 0 2px #eceefd!important}.impact_accordion_main_container .css-1086bdv-MuiPaper-root-MuiAccordion-root.Mui-expanded{margin:0!important}.accordions_white .impact_accordion_main_container{background:#fff}.impact_accordion_main_container .accordion_main_container{border:1px solid #eff2fa}.accordion_header .Mui-expanded{font-weight:600}")),document.head.appendChild(o)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
+import default_1 from "../../node_modules/@mui/icons-material/ExpandMore.js";
+
+import Accordion$1 from "../../node_modules/@mui/material/Accordion/Accordion.js";
+import AccordionSummary from "../../node_modules/@mui/material/AccordionSummary/AccordionSummary.js";
+import AccordionDetails from "../../node_modules/@mui/material/AccordionDetails/AccordionDetails.js";
+const Accordion = forwardRef(
+  ({
+    expanded,
+    setExpanded,
+    isMultiExpanded = false,
+    data = [],
+    onChange,
+    isSingleItem = false,
+    singleData,
+    disabled = false,
+    className = "",
+    id,
+    "data-testid": dataTestId,
+    ...args
+  }, ref) => {
+    const handleSingleAccordionChange = useCallback(
+      (value) => {
+        if (onChange) {
+          onChange(value);
+          return;
+        }
+        if (setExpanded) {
+          setExpanded(value);
+        }
+      },
+      [onChange, setExpanded]
+    );
+    const handleMultiAccordionChange = useCallback(
+      (value) => {
+        if (onChange) {
+          onChange(value);
+          return;
+        }
+        if (!setExpanded) return;
+        if (isMultiExpanded && Array.isArray(expanded)) {
+          if (!expanded.includes(value)) {
+            setExpanded([...expanded, value]);
+          } else {
+            setExpanded(expanded.filter((item) => item !== value));
+          }
+        } else if (expanded === value) {
+          setExpanded("");
+        } else {
+          setExpanded(value);
+        }
+      },
+      [onChange, setExpanded, isMultiExpanded, expanded]
+    );
+    if (isSingleItem && singleData) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: `impact_accordion_main_container impact_accordion_main_container_single ${className}`.trim(),
+          "data-testid": dataTestId,
+          id,
+          children: /* @__PURE__ */ jsxs(
+            Accordion$1,
+            {
+              className: "accordion_main_container",
+              defaultExpanded: expanded === singleData.value,
+              disabled,
+              onChange: () => {
+                handleSingleAccordionChange(singleData.value);
+              },
+              ...args,
+              children: [
+                /* @__PURE__ */ jsx(
+                  AccordionSummary,
+                  {
+                    "aria-controls": `${singleData.value}-content`,
+                    className: "accordion_header",
+                    expandIcon: /* @__PURE__ */ jsx(default_1, {}),
+                    id: `${singleData.value}-header`,
+                    children: singleData.header
+                  }
+                ),
+                /* @__PURE__ */ jsx(AccordionDetails, { className: "accordion_body", children: singleData.content })
+              ]
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: `impact_accordion_main_container ${className}`.trim(),
+        "data-testid": dataTestId,
+        id,
+        children: data.map((item, index) => {
+          const isExpanded = isMultiExpanded ? Array.isArray(expanded) && expanded.includes(item.value) : expanded === item.value;
+          return /* @__PURE__ */ jsxs(
+            Accordion$1,
+            {
+              className: "accordion_main_container",
+              defaultExpanded: isExpanded,
+              disabled: disabled || item.disabled,
+              expanded: isExpanded,
+              onChange: () => {
+                handleMultiAccordionChange(item.value);
+              },
+              ...args,
+              children: [
+                /* @__PURE__ */ jsx(
+                  AccordionSummary,
+                  {
+                    "aria-controls": `${item.value}-content`,
+                    className: "accordion_header",
+                    expandIcon: /* @__PURE__ */ jsx(default_1, {}),
+                    id: `${item.value}-header`,
+                    children: item.header
+                  }
+                ),
+                /* @__PURE__ */ jsx(AccordionDetails, { className: "accordion_body", children: item.content })
+              ]
+            },
+            item.value || index
+          );
+        })
+      }
+    );
+  }
+);
+Accordion.displayName = "Accordion";
+export {
+  Accordion
+};

package/dist/components/AccordionModern/AccordionModern.types.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { BaseComponentProps } from '../../types';
+
+/**
+ * Single accordion item for AccordionModern
+ */
+export interface AccordionModernItem {
+    /** Unique id (required for drag-and-drop) */
+    id: string;
+    /** Value used for expansion state */
+    value: string;
+    /** Header content */
+    header: ReactNode;
+    /** Body content when expanded */
+    content: ReactNode;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Optional count badge next to header (e.g. number of children) */
+    childCount?: number;
+}
+export interface AccordionModernProps extends BaseComponentProps {
+    /** Whether items can be reordered by drag-and-drop */
+    draggable?: boolean;
+    /** Controlled expanded value (string for single, or string[] for multi) */
+    expanded: string | string[];
+    /** Callback when expansion changes */
+    setExpanded: (value: string | string[]) => void;
+    /** Allow multiple items expanded at once */
+    isMultiExpanded?: boolean;
+    /** List of accordion items (must have `id` when draggable) */
+    data: AccordionModernItem[];
+    /** Optional change callback (if provided, setExpanded may still be called) */
+    onChange?: (value: string) => void;
+}
+//# sourceMappingURL=AccordionModern.types.d.ts.map

package/dist/components/AccordionModern/AccordionModern.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionModern.types.d.ts","sourceRoot":"","sources":["../../../src/components/AccordionModern/AccordionModern.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,MAAM,EAAE,SAAS,CAAC;IAClB,iCAAiC;IACjC,OAAO,EAAE,SAAS,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,sCAAsC;IACtC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAChD,4CAA4C;IAC5C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC"}

package/dist/components/AccordionModern/SortableAccordionComp.d.ts

@@ -0,0 +1,19 @@
+import { AccordionModernItem } from './AccordionModern.types';
+
+type CheckExpandFn = (item: AccordionModernItem) => string;
+interface SortableAccordionListProps {
+    data: AccordionModernItem[];
+    handleMultiAccordionChange: (value: string) => void;
+    checkExpand: CheckExpandFn;
+}
+interface SortableAccordionCompProps {
+    item: AccordionModernItem;
+    handleMultiAccordionChange: (value: string) => void;
+    checkExpand: CheckExpandFn;
+    isDragging?: boolean;
+    isOverlay?: boolean;
+}
+export declare function SortableAccordionComp({ item, handleMultiAccordionChange, checkExpand, isDragging, isOverlay, }: SortableAccordionCompProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableAccordionList({ data, handleMultiAccordionChange, checkExpand, }: SortableAccordionListProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SortableAccordionComp.d.ts.map

package/dist/components/AccordionModern/SortableAccordionComp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableAccordionComp.d.ts","sourceRoot":"","sources":["../../../src/components/AccordionModern/SortableAccordionComp.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAEnE,KAAK,aAAa,GAAG,CAAC,IAAI,EAAE,mBAAmB,KAAK,MAAM,CAAC;AAE3D,UAAU,0BAA0B;IAClC,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,0BAA0B,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,WAAW,EAAE,aAAa,CAAC;CAC5B;AAED,UAAU,0BAA0B;IAClC,IAAI,EAAE,mBAAmB,CAAC;IAC1B,0BAA0B,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,WAAW,EAAE,aAAa,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,0BAA0B,EAC1B,WAAW,EACX,UAAkB,EAClB,SAAiB,GAClB,EAAE,0BAA0B,2CAwE5B;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,0BAA0B,EAC1B,WAAW,GACZ,EAAE,0BAA0B,2CA6D5B"}

package/dist/components/AccordionModern/SortableAccordionComp.js

@@ -0,0 +1,145 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { useSensors, useSensor, MouseSensor, TouchSensor, DndContext, closestCenter, DragOverlay } from "@dnd-kit/core";
+import { arrayMove, SortableContext, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import default_1 from "../../node_modules/@mui/icons-material/DragIndicator.js";
+import default_1$1 from "../../node_modules/@mui/icons-material/KeyboardArrowRight.js";
+function SortableAccordionComp({
+  item,
+  handleMultiAccordionChange,
+  checkExpand,
+  isDragging = false,
+  isOverlay = false
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: item.id
+  });
+  const style = {
+    transform: isDragging && transform ? CSS.Transform.toString(transform) : void 0,
+    transition: transition ?? void 0,
+    width: "100%"
+  };
+  const inlineStyles = {
+    opacity: isDragging ? 0.5 : 1,
+    transformOrigin: "50% 50%",
+    borderRadius: "10px",
+    cursor: isDragging ? "grabbing" : "grab",
+    backgroundColor: "#ffffff",
+    display: "flex",
+    flexDirection: "column",
+    boxShadow: isDragging ? "rgb(63 63 68 / 5%) 0px 2px 0px 2px, rgb(34 33 81 / 15%) 0px 2px 3px 2px" : "rgb(63 63 68 / 5%) 0px 0px 0px 1px, rgb(34 33 81 / 15%) 0px 1px 3px 0px",
+    transform: isDragging ? "scale(1.05)" : "scale(1)",
+    ...style
+  };
+  const expandClass = checkExpand(item);
+  return /* @__PURE__ */ jsx("div", { ref: setNodeRef, className: "impact-modern-accordion-container", style: inlineStyles, children: /* @__PURE__ */ jsxs("div", { className: "impact-modern-accordion-item", children: [
+    /* @__PURE__ */ jsxs("div", { className: "impact-modern-accordion-header", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "impact-modern-accordion-drag-icon",
+          ...isOverlay ? {} : { ...attributes, ...listeners },
+          "aria-label": "Drag to reorder",
+          children: /* @__PURE__ */ jsx(default_1, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-controls": `${item.value}-content`,
+          "aria-expanded": expandClass === "expand-content",
+          "aria-label": expandClass === "expand-content" ? "Collapse" : "Expand",
+          className: `impact-modern-accordion-expand-icon ${expandClass}-icon`,
+          role: "button",
+          tabIndex: 0,
+          onClick: (event) => {
+            event.stopPropagation();
+            handleMultiAccordionChange(item.value);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleMultiAccordionChange(item.value);
+            }
+          },
+          children: /* @__PURE__ */ jsx(default_1$1, {})
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "impact-modern-accordion-title", children: item.header })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-labelledby": `${item.value}-header`,
+        className: `impact-modern-accordion-content ${expandClass}`,
+        id: `${item.value}-content`,
+        role: "region",
+        children: item.content
+      }
+    )
+  ] }) });
+}
+function SortableAccordionList({
+  data,
+  handleMultiAccordionChange,
+  checkExpand
+}) {
+  const [items, setItems] = useState(data);
+  const [activeId, setActiveId] = useState(null);
+  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
+  const handleDragStart = useCallback((event) => {
+    setActiveId(String(event.active.id));
+  }, []);
+  const handleDragEnd = useCallback((event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      setItems((current) => {
+        const oldIndex = current.findIndex((item) => item.id === active.id);
+        const newIndex = current.findIndex((item) => item.id === over.id);
+        if (oldIndex === -1 || newIndex === -1) return current;
+        return arrayMove(current, oldIndex, newIndex);
+      });
+    }
+    setActiveId(null);
+  }, []);
+  const handleDragCancel = useCallback(() => {
+    setActiveId(null);
+  }, []);
+  const activeItem = activeId ? items.find((i) => i.id === activeId) : null;
+  return /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      collisionDetection: closestCenter,
+      sensors,
+      onDragCancel: handleDragCancel,
+      onDragEnd: handleDragEnd,
+      onDragStart: handleDragStart,
+      children: [
+        /* @__PURE__ */ jsx(SortableContext, { items, children: /* @__PURE__ */ jsx("div", { className: "impact-accordion-modern-main-container", children: items.map((item) => /* @__PURE__ */ jsx(
+          SortableAccordionComp,
+          {
+            checkExpand,
+            handleMultiAccordionChange,
+            item
+          },
+          item.id
+        )) }) }),
+        /* @__PURE__ */ jsx(DragOverlay, { adjustScale: false, style: { width: "inherit", transformOrigin: "0 0" }, children: activeItem ? /* @__PURE__ */ jsx(
+          SortableAccordionComp,
+          {
+            isDragging: true,
+            isOverlay: true,
+            checkExpand,
+            handleMultiAccordionChange,
+            item: activeItem
+          }
+        ) : null })
+      ]
+    }
+  );
+}
+export {
+  SortableAccordionComp,
+  SortableAccordionList
+};

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

@@ -0,0 +1,12 @@
+import { AccordionModernProps } from './AccordionModern.types';
+
+export type { AccordionModernProps, AccordionModernItem } from './AccordionModern.types';
+/**
+ * AccordionModern – compact accordion with optional drag-and-drop reorder.
+ * Supports single or multi expansion. Use `draggable` with items that have `id` for reordering.
+ */
+export declare function AccordionModern({ draggable, expanded, setExpanded, isMultiExpanded, data, onChange, className, }: AccordionModernProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AccordionModern {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AccordionModern/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAuB,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,+BAA+B,CAAC;AAEvC,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAEzF;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,SAAiB,EACjB,QAAQ,EACR,WAAW,EACX,eAAuB,EACvB,IAAS,EACT,QAAQ,EACR,SAAc,GACf,EAAE,oBAAoB,2CAoGtB;yBA5Ge,eAAe"}

package/dist/components/AccordionModern/index.js

@@ -0,0 +1,121 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var o=document.createElement("style");o.appendChild(document.createTextNode(".impact-accordion-modern-main-container{display:flex;flex-direction:column;gap:12px}.impact-modern-accordion-item{background-color:#fff;border:1px solid #eff2fa;border-radius:8px;display:flex;flex-direction:column;transition:border .2s ease}.impact-modern-accordion-item .impact-modern-accordion-header{align-items:center;display:flex;flex-direction:row;gap:12px;height:48px;padding:8px 16px;width:100%}.impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-drag-icon svg{color:#60697d;height:20px;margin-top:2px;width:20px}.impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-expand-icon{align-items:center;background-color:#f5f6fa;border-radius:8px;display:flex;height:32px;justify-content:center;padding:8px;transition:transform .2s ease-in-out;width:32px}.impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-expand-icon:hover{cursor:pointer}.impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-expand-icon svg{fill:#60697d;height:20px;width:20px}.impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-title{color:#0d152c;font-family:Manrope,sans-serif;font-size:14px;font-weight:600;line-height:21px;width:100%}.impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-title.child-count{align-items:center;display:flex;gap:12px}.impact-modern-accordion-item .impact-modern-accordion-header .impact-modern-accordion-title.disabled{color:#b4bac7}.impact-modern-accordion-item .impact-modern-accordion-content{box-sizing:border-box;color:#0d152c;font-family:Manrope,sans-serif!important;font-size:14px;font-weight:500;height:0;line-height:21px;opacity:0;overflow:hidden;padding:0 16px;transition:height .2s ease,padding .2s ease,opacity .2s ease;visibility:hidden}.impact-modern-accordion-item .expand-content{height:auto;opacity:1;padding:16px;visibility:visible}.impact-modern-accordion-container.disabled{cursor:not-allowed}.impact-modern-accordion-container.disabled .impact-modern-accordion-item .impact-modern-accordion-header{pointer-events:none}.impact-modern-accordion-container.disabled .impact-modern-accordion-item .impact-modern-accordion-drag-icon,.impact-modern-accordion-container.disabled .impact-modern-accordion-item .impact-modern-accordion-expand-icon{background-color:#f8f9fb}.expand-content-icon{transform:rotate(-90deg)}.expand-content-icon+.impact-modern-accordion-title{fill:#60697d;font-weight:800!important}.expand-content-icon+.impact-modern-accordion-title h3{font-weight:800}.impact-modern-accordion-container:not(.disabled) .impact-modern-accordion-item:focus{box-shadow:0 0 0 3px #eceefd;outline:none}.impact-modern-accordion-container:not(.disabled) .impact-modern-accordion-item:focus-visible{box-shadow:0 0 0 3px #eceefd;outline:none}.impact-modern-accordion-container.disabled .impact-modern-accordion-item:focus,.impact-modern-accordion-container.disabled .impact-modern-accordion-item:focus-visible{box-shadow:none;outline:none}")),document.head.appendChild(o)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import default_1 from "../../node_modules/@mui/icons-material/KeyboardArrowRight.js";
+import { Badge } from "../Badge/index.js";
+import { SortableAccordionList } from "./SortableAccordionComp.js";
+
+function AccordionModern({
+  draggable = false,
+  expanded,
+  setExpanded,
+  isMultiExpanded = false,
+  data = [],
+  onChange,
+  className = ""
+}) {
+  const handleMultiAccordionChange = useCallback(
+    (value) => {
+      if (onChange) {
+        onChange(value);
+      }
+      const expandedArr = Array.isArray(expanded) ? expanded : [];
+      if (isMultiExpanded) {
+        if (!expandedArr.includes(value)) {
+          setExpanded([...expandedArr, value]);
+        } else {
+          setExpanded(expandedArr.filter((v) => v !== value));
+        }
+      } else if (expanded === value) {
+        setExpanded("");
+      } else {
+        setExpanded(value);
+      }
+    },
+    [expanded, isMultiExpanded, onChange, setExpanded]
+  );
+  const checkExpand = useCallback(
+    (item) => {
+      if (isMultiExpanded && Array.isArray(expanded) && expanded.includes(item.value)) {
+        return "expand-content";
+      }
+      if (expanded === item.value) {
+        return "expand-content";
+      }
+      return "";
+    },
+    [expanded, isMultiExpanded]
+  );
+  if (draggable && data.length > 0) {
+    return /* @__PURE__ */ jsx(
+      SortableAccordionList,
+      {
+        checkExpand,
+        data,
+        handleMultiAccordionChange
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: `impact-accordion-modern-main-container ${className}`.trim(), children: data.map((item) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `impact-modern-accordion-container ${item.disabled ? "disabled" : ""}`,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "aria-controls": `${item.value}-content`,
+          "aria-disabled": item.disabled,
+          "aria-expanded": checkExpand(item) === "expand-content",
+          className: "impact-modern-accordion-item",
+          id: `${item.value}-header`,
+          role: "button",
+          tabIndex: item.disabled ? -1 : 0,
+          onClick: () => !item.disabled && handleMultiAccordionChange(item.value),
+          onKeyDown: (e) => {
+            if (!item.disabled && (e.key === "Enter" || e.key === " ")) {
+              e.preventDefault();
+              handleMultiAccordionChange(item.value);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "impact-modern-accordion-header", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  className: `impact-modern-accordion-expand-icon ${checkExpand(item)}-icon`,
+                  children: /* @__PURE__ */ jsx(default_1, {})
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `impact-modern-accordion-title ${(item.childCount ?? 0) > 0 ? "child-count" : ""} ${item.disabled ? "disabled" : ""}`,
+                  children: [
+                    item.header,
+                    (item.childCount ?? 0) > 0 ? /* @__PURE__ */ jsx(Badge, { color: "info", label: String(item.childCount), variant: "stroke" }) : null
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-labelledby": `${item.value}-header`,
+                className: `impact-modern-accordion-content ${checkExpand(item)}`,
+                id: `${item.value}-content`,
+                role: "region",
+                children: item.content
+              }
+            )
+          ]
+        }
+      )
+    },
+    item.value
+  )) });
+}
+AccordionModern.displayName = "AccordionModern";
+export {
+  AccordionModern
+};