@situaction/traq-ui-ste 1.1.16 → 1.1.17

package/dist/components/icon-button/IconButton.d.ts

@@ -1,7 +1,7 @@
-import { FC, ReactElement } from 'react';
+import { ButtonHTMLAttributes, FC, MouseEvent, ReactElement } from 'react';
 import { Size } from '../interface';
 
-export interface IconButtonProps {
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Specifies the visual style of the button. */
     mode?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'icon';
     /** How large should the button be? */
@@ -17,6 +17,11 @@ export interface IconButtonProps {
     /** Only icons (React elements) allowed inside the button */
     children: ReactElement;
     /** Optional click handler */
-    onClick?: () => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 }
+/**
+ * IconButton component renders a button with an icon inside.
+ * It supports customization such as size, style mode, and error state.
+ * The button can also be disabled or selected based on props.
+ */
 export declare const IconButton: FC<IconButtonProps>;

package/dist/components/input/Input.d.ts

@@ -19,4 +19,9 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Disable the input field **/
     disabled?: boolean;
 }
+/**
+ * The Input component renders an input field with optional icons or labels on the left and right.
+ * It supports different input sizes, status styles, and focus handling.
+ * The input can also be disabled and have rounded corners.
+ */
 export declare const Input: FC<InputProps>;

package/dist/components/list/list-controls/ListControls.d.ts

@@ -0,0 +1,19 @@
+import { FC, ReactElement } from 'react';
+
+export interface FilterProps {
+    /** List of child components to display in the list-controls */
+    listChildren: ReactElement[];
+    /** Function to handle item click and update selection state */
+    handleItemClick: (id: string) => void;
+    /** Array of booleans representing the selected state of each item */
+    selectedItems: string[];
+    /** Optional function to reset the list-controls */
+    onReset?: () => void;
+    /** Name label button reset */
+    labelButtonReset?: string;
+}
+/**
+ * A component that displays a list of items with checkboxes, allowing users to select or deselect items.
+ * It also includes an optional reset button to clear all selections.
+ */
+export declare const ListControls: FC<FilterProps>;

package/dist/components/list/list-controls/ListControls.js

@@ -0,0 +1,49 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { Button as p } from "../../button/Button.js";
+import "react";
+import '../../../styles/Size.css';import '../../../styles/index.css';import '../../../styles/ListControls.css';/* empty css                       */
+import { Checkbox as _ } from "../../checkbox/Checkbox.js";
+import { Icon as a } from "../../icon/Icon.js";
+import "../../modal/Modal.js";
+import "../../theme/ThemeContext.js";
+/* empty css                      */
+const u = "_list_1nihg_6", f = "_children_1nihg_29", g = "_selected_1nihg_43", k = "_reset_1nihg_47", i = {
+  list: u,
+  children: f,
+  selected: g,
+  reset: k
+}, F = ({ listChildren: o, handleItemClick: d, selectedItems: h, onReset: t, labelButtonReset: r }) => /* @__PURE__ */ l("div", { className: i.list, children: [
+  /* @__PURE__ */ e("div", { children: o.map((n, m) => {
+    if (n.key == null) return null;
+    const s = n.key, c = h.includes(s);
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        className: `${c ? i.selected : ""} ${i.children}`,
+        children: [
+          /* @__PURE__ */ e(
+            _,
+            {
+              checked: c,
+              onChange: () => d(s)
+            }
+          ),
+          /* @__PURE__ */ e("span", { children: n })
+        ]
+      },
+      m
+    );
+  }) }),
+  t && r && /* @__PURE__ */ e("div", { className: i.reset, children: /* @__PURE__ */ e(
+    p,
+    {
+      mode: "ghost",
+      label: r,
+      onClick: t,
+      childrenLeft: /* @__PURE__ */ e(a, { icon: "FunnelX" })
+    }
+  ) })
+] });
+export {
+  F as ListControls
+};

package/dist/components/list/nested-list/NestedList.d.ts

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from 'react';
+import { FilterMenuItemProps } from './item/NestedListItem';
+
+export interface NestedListProps {
+    /** List of menu items */
+    items: FilterMenuItemProps[];
+    align?: "left" | "right";
+    children: ReactNode;
+    /** Function to reset filters */
+    onReset?: () => void;
+    /** Name label button reset */
+    labelButtonReset?: string;
+}
+/**
+ * The NestedList component renders a list of `NestedListItem` components with optional
+ * filtering functionality via a reset button.
+ */
+export declare const NestedList: FC<NestedListProps>;

package/dist/components/list/nested-list/NestedList.js

@@ -0,0 +1,19 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { NestedListItem as c } from "./item/NestedListItem.js";
+import { Button as p } from "../../button/Button.js";
+import "react";
+import '../../../styles/Size.css';import '../../../styles/index.css';import '../../../styles/NestedList.css';/* empty css                       */
+import { Icon as a } from "../../icon/Icon.js";
+import "../../modal/Modal.js";
+import "../../theme/ThemeContext.js";
+/* empty css                      */
+const h = "_nestedlist_7rnd3_6", _ = "_reset_7rnd3_18", r = {
+  nestedlist: h,
+  reset: _
+}, k = ({ items: i, align: o = "right", onReset: e, children: n, labelButtonReset: s }) => /* @__PURE__ */ l("div", { className: r.nestedlist, children: [
+  i.map((m, d) => /* @__PURE__ */ t(c, { ...m, align: o ?? "right", children: n }, d)),
+  e && s && /* @__PURE__ */ t("div", { className: r.reset, children: /* @__PURE__ */ t(p, { mode: "ghost", label: s, onClick: e, childrenLeft: /* @__PURE__ */ t(a, { icon: "FunnelX" }) }) })
+] });
+export {
+  k as NestedList
+};

package/dist/components/list/nested-list/item/NestedListItem.d.ts

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+
+import * as PhosphorIcons from "@phosphor-icons/react";
+export interface FilterMenuItemProps {
+    /** Icon displayed on the left */
+    icon?: keyof typeof PhosphorIcons;
+    /** Text of the item */
+    title: string;
+    /** Optional indicator (number, badge, etc.) */
+    numberSelect?: number;
+    /** Content to be displayed inside the modal */
+    children: ReactNode;
+    /** Function called on click */
+    onClick: () => void;
+    /** Position modal */
+    align?: "left" | "right";
+}
+/**
+ * The NestedListItem component renders an item in a nested list, with an optional icon,
+ * title, and a number indicator. It opens a modal when clicked, positioning the modal
+ * relative to the item.
+ */
+export declare const NestedListItem: FC<FilterMenuItemProps>;

package/dist/components/list/nested-list/item/NestedListItem.js

@@ -0,0 +1,71 @@
+import { jsxs as r, Fragment as w, jsx as t } from "react/jsx-runtime";
+import { useState as g, useRef as u, useLayoutEffect as z } from "react";
+import '../../../../styles/Size.css';import '../../../../styles/index.css';import '../../../../styles/NestedListItem.css';/* empty css                          */
+import { TagCounter as B } from "../../../tag-counter/TagCounter.js";
+import { Icon as l } from "../../../icon/Icon.js";
+import { Modal as L } from "../../../modal/Modal.js";
+import "../../../theme/ThemeContext.js";
+/* empty css                         */
+const S = "_nestedlist_2r2ga_6", $ = "_items_2r2ga_21", j = "_textSmall_2r2ga_28", v = "_modal_2r2ga_34", s = {
+  nestedlist: S,
+  items: $,
+  textSmall: j,
+  modal: v
+}, T = ({
+  icon: a,
+  title: h,
+  numberSelect: i,
+  children: _,
+  onClick: m,
+  align: e = "right"
+}) => {
+  const [c, d] = g(!1), n = u(null), o = u(null), [x, C] = g({
+    top: "0px"
+  });
+  z(() => {
+    var p;
+    if (n.current && o.current) {
+      const N = o.current.getBoundingClientRect(), f = n.current.getBoundingClientRect().width, M = ((p = o.current.parentElement) == null ? void 0 : p.getBoundingClientRect().top) || 0;
+      C({
+        top: `${N.top - M}px`,
+        ...e === "right" ? { right: `-${f + 6}px` } : { left: `-${f + 6}px` }
+      });
+    }
+  }, [c, e]);
+  const R = () => {
+    d(!0), m && m();
+  };
+  return /* @__PURE__ */ r(w, { children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        ref: o,
+        className: s.nestedlist,
+        onClick: R,
+        children: [
+          e === "left" && /* @__PURE__ */ t(l, { icon: "CaretLeft", size: 14, weight: "regular" }),
+          /* @__PURE__ */ r("div", { className: s.items, children: [
+            a && /* @__PURE__ */ t(l, { icon: a }),
+            /* @__PURE__ */ t("span", { className: s.textSmall, children: h }),
+            i && i > 0 && /* @__PURE__ */ t(B, { size: "s", label: i ?? 0 })
+          ] }),
+          e === "right" && /* @__PURE__ */ t(l, { icon: "CaretRight", size: 14, weight: "regular" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      L,
+      {
+        ref: n,
+        className: s.modal,
+        open: c,
+        onClose: () => d(!1),
+        position: x,
+        children: _
+      }
+    )
+  ] });
+};
+export {
+  T as NestedListItem
+};

package/dist/components/menu/Menu.d.ts

@@ -0,0 +1,57 @@
+import { FC, ReactElement } from 'react';
+
+/**
+ * Interface for a standard menu item that triggers an action on click.
+ */
+export interface MenuItem {
+    /** Unique identifier for the menu item */
+    id: string;
+    /** Icon displayed for the menu item */
+    icon: ReactElement;
+    /** Text label for the menu item */
+    label: string;
+    /** Callback function executed when the item is clicked */
+    onClick: () => void;
+}
+/**
+ * Interface for a parameterized menu item that can open a modal or execute a custom action.
+ */
+export interface MenuParam {
+    /** Unique identifier for the menu param */
+    id: string;
+    /** Icon displayed for the menu param */
+    icon: ReactElement;
+    /** Text label for the menu param */
+    label: string;
+    /** Optional content to display inside a modal */
+    content?: ReactElement;
+    /** Optional callback triggered when the param is clicked (if no content is provided) */
+    onClick?: () => void;
+    /** Position of the modal relative to the menu */
+    position: {
+        bottom: string;
+        left: string;
+    };
+}
+/**
+ * Props for the Menu component, which renders a vertical navigation menu with actions and optional modal parameters.
+ */
+export interface MenuProps {
+    /** List of clickable menu items */
+    menuItems?: MenuItem[];
+    /** List of parameter items with optional modal content */
+    menuParams?: MenuParam[];
+    /** Short version of the logo, shown when the menu is collapsed */
+    shortLogo?: string;
+    /** Full logo displayed when the menu is expanded */
+    logo?: string;
+    /** Callback function to notify when the menu open state changes */
+    isOpen?: (value: boolean) => void;
+    /** Whether the menu should be open by default */
+    defaultOpen?: boolean;
+}
+/**
+ * Menu component renders a vertical navigation bar with collapsible state,
+ * supporting both simple actions and modal-based parameters.
+ */
+export declare const Menu: FC<MenuProps>;

package/dist/components/menu/Menu.js

@@ -0,0 +1,117 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { useState as c, useRef as B, useEffect as S } from "react";
+import { Button as C } from "../button/Button.js";
+import '../../styles/Size.css';import '../../styles/index.css';import '../../styles/Menu.css';/* empty css                    */
+import { IconButton as f } from "../icon-button/IconButton.js";
+import { Icon as v } from "../icon/Icon.js";
+import { Modal as P } from "../modal/Modal.js";
+import "../theme/ThemeContext.js";
+/* empty css                   */
+const W = "_fullHeight_ikhx4_15", y = "_fullWidth_ikhx4_18", O = "_open_ikhx4_21", j = "_close_ikhx4_25", D = "_menuButton_ikhx4_29", q = "_closeIcon_ikhx4_37", A = "_label_ikhx4_42", F = "_textEllipsis_ikhx4_46", G = "_pointer_ikhx4_51", J = "_fullImg_ikhx4_54", K = "_menuParams_ikhx4_60", Q = "_line_ikhx4_66", T = "_borderRadiusM_ikhx4_73", U = "_menuItem_ikhx4_77", X = "_flexVerticalBetweenStart_ikhx4_86", Y = "_flexHorizontalBetween_ikhx4_93", Z = "_flexVertical_ikhx4_86", ee = "_flexVerticalBetweenCenter_ikhx4_107", e = {
+  fullHeight: W,
+  fullWidth: y,
+  open: O,
+  close: j,
+  menuButton: D,
+  closeIcon: q,
+  label: A,
+  textEllipsis: F,
+  pointer: G,
+  fullImg: J,
+  menuParams: K,
+  line: Q,
+  borderRadiusM: T,
+  menuItem: U,
+  flexVerticalBetweenStart: X,
+  flexHorizontalBetween: Y,
+  flexVertical: Z,
+  flexVerticalBetweenCenter: ee
+}, de = ({ menuItems: s = [], menuParams: r = [], shortLogo: h, logo: _, isOpen: x, defaultOpen: M = !1 }) => {
+  const [o, m] = c(M ?? !1), [p, $] = c(s ? s[0].id : null), b = B(null), [w, u] = c(!1), [I, k] = c(!1), [N, V] = c(null), [H, E] = c({}), z = B(null), g = (l, i) => {
+    if (l.stopPropagation(), $(i), s) {
+      const n = s.find((a) => a.id === i);
+      n == null || n.onClick();
+    }
+  }, R = () => {
+    m(!o), u(!1);
+  }, L = (l) => {
+    var i;
+    if (r) {
+      const n = r.find((a) => a.id === l);
+      if (!n) return;
+      if (n.content) {
+        const a = o ? "200px" : "40px";
+        V(n.content), E({ ...n.position, left: a }), k(!0);
+      } else
+        (i = n.onClick) == null || i.call(n);
+    }
+  };
+  return S(() => {
+    x && x(o);
+  }, [o]), /* @__PURE__ */ t("nav", { ref: b, children: /* @__PURE__ */ d("div", { className: `${e.flexVerticalBetweenStart} ${e.fullHeight} ${o ? e.open : e.close}`, children: [
+    /* @__PURE__ */ d("div", { className: e.fullWidth, children: [
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: `${e.flexHorizontalBetween} ${e.pointer} ${e.textEllipsis}`,
+          onClick: () => R(),
+          children: o ? /* @__PURE__ */ d("div", { className: e.fullImg, children: [
+            _ && /* @__PURE__ */ t("img", { src: _, alt: "Logo situaction" }),
+            /* @__PURE__ */ t(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ t(v, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
+          ] }) : /* @__PURE__ */ t(
+            "div",
+            {
+              className: e.closeIcon,
+              onMouseEnter: () => u(!0),
+              onMouseLeave: () => u(!1),
+              onClick: () => m(!o),
+              children: w || !h ? /* @__PURE__ */ t(f, { mode: "ghost", size: "menu", children: /* @__PURE__ */ t(v, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ t("img", { src: h, alt: "Logo situaction" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: e.menuItem, children: s && s.map((l) => o ? /* @__PURE__ */ t("div", { className: `${e.textEllipsis} ${e.menuButton}`, children: /* @__PURE__ */ t(
+        C,
+        {
+          mode: p === l.id ? "secondary" : "ghost",
+          label: l.label,
+          onClick: (i) => g(i, l.id),
+          childrenLeft: l.icon
+        }
+      ) }, `button-${l.id}`) : /* @__PURE__ */ t("div", { className: e.textEllipsis, children: /* @__PURE__ */ t(
+        f,
+        {
+          mode: p === l.id ? "secondary" : "ghost",
+          children: l.icon,
+          onClick: (i) => g(i, l.id)
+        }
+      ) }, `icon-${l.id}`)) }),
+      /* @__PURE__ */ t("div", { className: e.line })
+    ] }),
+    /* @__PURE__ */ d("div", { className: `${e.menuParams} ${e.flexVerticalBetweenCenter}`, children: [
+      r && r.map((l) => /* @__PURE__ */ t(
+        "div",
+        {
+          className: `${e.fullWidth} ${e.textEllipsis}`,
+          onClick: () => L(l.id),
+          children: o ? /* @__PURE__ */ t("div", { className: e.menuButton, children: /* @__PURE__ */ t(C, { mode: "ghost", label: l.label, childrenLeft: l.icon }, l.id) }) : /* @__PURE__ */ t(f, { mode: "ghost", children: l.icon })
+        },
+        `param-icon-${l.id}`
+      )),
+      /* @__PURE__ */ t(
+        P,
+        {
+          ref: z,
+          className: e.borderRadiusM,
+          open: I,
+          onClose: () => k(!1),
+          position: H,
+          children: N
+        }
+      )
+    ] })
+  ] }) });
+};
+export {
+  de as Menu
+};

package/dist/components/modal/Modal.d.ts

@@ -0,0 +1,32 @@
+import { default as React, ReactNode } from 'react';
+
+export interface ModalProps {
+    /** Determines whether the modal is open or closed.
+     * If true, the modal is displayed; if false, it is hidden. */
+    open: boolean;
+    /** Callback function to handle closing the modal.
+     * Triggered when clicking outside the modal content. */
+    onClose: () => void;
+    /** Content to be displayed inside the modal.
+     * Typically includes child components or HTML elements. */
+    children: ReactNode;
+    /** Optional object to specify the positioning of the modal.
+     * Supports CSS properties such as top, left, right, bottom, and width. */
+    position?: {
+        top?: string;
+        left?: string;
+        right?: string;
+        bottom?: string;
+        width?: string;
+    };
+    /** Optional additional CSS class names to apply custom styles to the modal. */
+    className?: string;
+    /** Option to disable the overlay and the blocking of events outside the modal */
+    disableOverlay?: boolean;
+}
+/**
+ * Modal component that renders content in a floating layer above the main UI.
+ * It supports custom positioning and closes when clicking outside of its content area.
+ * The component uses a ref to detect clicks outside the modal.
+ */
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/modal/Modal.js

@@ -0,0 +1,24 @@
+import { jsxs as v, Fragment as y, jsx as a } from "react/jsx-runtime";
+import { forwardRef as f, useEffect as _ } from "react";
+import '../../styles/Modal.css';const g = "_overlay_lv2n7_2", C = "_modalContent_lv2n7_12", s = {
+  overlay: g,
+  modalContent: C
+}, x = f(
+  ({ open: e, onClose: n, children: c, position: d, className: m, disableOverlay: i = !1 }, t) => (_(() => {
+    const o = (l) => {
+      if (t && t.current && e) {
+        const r = t.current;
+        r && !r.contains(l.target) && ![...document.querySelectorAll(".dialog")].some((u) => u.contains(l.target)) && n();
+      }
+    };
+    return document.addEventListener("mousedown", o), () => {
+      document.removeEventListener("mousedown", o);
+    };
+  }, [n, e, t]), e ? /* @__PURE__ */ v(y, { children: [
+    i && /* @__PURE__ */ a("div", { className: s.overlay, onClick: n }),
+    /* @__PURE__ */ a("div", { ref: t, className: `${s.modalContent} ${m}`, style: d, children: c })
+  ] }) : null)
+);
+export {
+  x as Modal
+};

package/dist/components/panel/side-panel/SidePanel.d.ts

@@ -0,0 +1,30 @@
+import { FC, ReactElement } from 'react';
+
+export interface SidePanelProps {
+    /** Content to display inside the side panel */
+    children: ReactElement;
+    /** Width of the side panel (e.g. '300px') */
+    width: string;
+    /** Determines if the panel appears on the left side (true) or right side (false) */
+    left?: boolean;
+    /** Controls whether the panel is open (useful for controlled mode) */
+    opened?: boolean;
+    /** Callback triggered when the panel is toggled */
+    onToggle?: (isOpen: boolean) => void;
+}
+/**
+ * SidePanel is a sliding panel component that appears from either the left or right side of the screen.
+ * It is designed to display additional content or interactive elements without navigating away from the current page.
+ *
+ * The component supports both controlled and uncontrolled modes:
+ * - In controlled mode, the parent component controls the open/close state via the `opened` prop and `onToggle` callback.
+ * - In uncontrolled mode, the component manages its own internal state.
+ *
+ * Features:
+ * - Slide-in animation from left or right
+ * - Customizable width
+ * - Click outside to close (with optional `onClickOutside` callback)
+ * - Clean CSS-based transitions
+ * - Designed to be easily styled via CSS modules
+ */
+export declare const SidePanel: FC<SidePanelProps>;

package/dist/components/panel/side-panel/SidePanel.js

@@ -0,0 +1,47 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useState as _, useRef as y, useEffect as f } from "react";
+import '../../../styles/SidePanel.css';const x = "_panel_1d46d_1", v = "_openPanelBtn_1d46d_9", b = "_box_1d46d_18", B = "_panelLeft_1d46d_26", C = "_panelRight_1d46d_33", H = "_panelOpenedLeft_1d46d_40", S = "_panelOpenedRight_1d46d_44", E = "_panelHidden_1d46d_48", N = "_displayPanel_1d46d_52", g = "_hidePanel_1d46d_56", e = {
+  panel: x,
+  openPanelBtn: v,
+  box: b,
+  panelLeft: B,
+  panelRight: C,
+  panelOpenedLeft: H,
+  panelOpenedRight: S,
+  panelHidden: E,
+  displayPanel: N,
+  hidePanel: g
+}, $ = ({
+  children: u,
+  width: s,
+  left: p = !0,
+  opened: n = !1,
+  onToggle: t
+}) => {
+  const [a, l] = _(n), [m, d] = _(n), i = y(null), h = {
+    "--dynamic-left": `-${s}`,
+    "--dynamic-right": `-${s}`,
+    width: s
+  }, P = p ? e.panelLeft : e.panelRight, O = p ? e.panelOpenedLeft : e.panelOpenedRight, R = [
+    e.panel,
+    P,
+    !a && e.panelHidden,
+    a && O,
+    m ? e.displayPanel : e.hidePanel
+  ].filter(Boolean).join(" ");
+  return f(() => {
+    n ? (d(!0), setTimeout(() => l(!0), 10)) : (l(!1), setTimeout(() => d(!1), 300));
+  }, [n]), f(() => {
+    const o = (L) => {
+      const c = L.target;
+      c.closest("[data-ignore-outside-click]") || i.current && !i.current.contains(c) && (l(!1), t == null || t(!1), setTimeout(() => d(!1), 300));
+    };
+    if (a)
+      return document.addEventListener("mousedown", o), () => {
+        document.removeEventListener("mousedown", o);
+      };
+  }, [a, t]), /* @__PURE__ */ r("div", { style: h, className: R, children: /* @__PURE__ */ r("div", { ref: i, className: e.box, children: u }) });
+};
+export {
+  $ as SidePanel
+};

package/dist/components/panel/side-panel-header/SidePanelHeader.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+
+import * as PhosphorIcons from "@phosphor-icons/react";
+export interface SidePanelHeaderProps {
+    /** Title text displayed in the panel header */
+    title: string;
+    /** Icon displayed next to the title */
+    icon?: keyof typeof PhosphorIcons;
+    /** Triggered when the back navigation button is clicked */
+    onClickBack?: () => void;
+    /** Triggered when the forward navigation button is clicked */
+    onClickForward?: () => void;
+    /** Triggered when the close button is clicked */
+    onClickClose?: () => void;
+    /** Determines if the navigation buttons should be disabled */
+    disabledBack?: boolean;
+    disabledForward?: boolean;
+}
+/**
+ * Header component for a SidePanel, with title, icon, navigation, and close actions.
+ */
+export declare const SidePanelHeader: FC<SidePanelHeaderProps>;

package/dist/components/panel/side-panel-header/SidePanelHeader.js

@@ -0,0 +1,60 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import '../../../styles/Size.css';import '../../../styles/index.css';import '../../../styles/SidePanelHeader.css';/* empty css                       */
+import "react";
+import { IconButton as r } from "../../icon-button/IconButton.js";
+import { Icon as i } from "../../icon/Icon.js";
+import "../../modal/Modal.js";
+import "../../theme/ThemeContext.js";
+/* empty css                      */
+const b = "_sidePanelHeader_72g7b_6", h = "_buttonArrow_72g7b_13", p = "_title_72g7b_20", o = {
+  sidePanelHeader: b,
+  buttonArrow: h,
+  title: p
+}, w = ({
+  title: n,
+  icon: s,
+  onClickBack: l,
+  onClickForward: a,
+  onClickClose: d,
+  disabledBack: c = !1,
+  disabledForward: m = !1
+}) => /* @__PURE__ */ t("div", { className: o.sidePanelHeader, children: [
+  /* @__PURE__ */ t("div", { className: o.buttonArrow, children: [
+    /* @__PURE__ */ e(
+      r,
+      {
+        disabled: c,
+        mode: "tertiary",
+        size: "s",
+        onClick: l,
+        children: /* @__PURE__ */ e(i, { icon: "CaretLeft", size: 18 })
+      }
+    ),
+    /* @__PURE__ */ e(
+      r,
+      {
+        disabled: m,
+        mode: "tertiary",
+        size: "s",
+        onClick: a,
+        children: /* @__PURE__ */ e(i, { icon: "CaretRight", size: 18 })
+      }
+    )
+  ] }),
+  /* @__PURE__ */ t("div", { className: o.title, children: [
+    s && /* @__PURE__ */ e(i, { icon: s, size: 22 }),
+    /* @__PURE__ */ e("h3", { children: n })
+  ] }),
+  /* @__PURE__ */ e(
+    r,
+    {
+      size: "s",
+      mode: "tertiary",
+      children: /* @__PURE__ */ e(i, { icon: "SquareHalf", size: 18 }),
+      onClick: d
+    }
+  )
+] });
+export {
+  w as SidePanelHeader
+};