@situaction/traq-ui-ste 1.2.20 → 1.2.24

package/dist/Carousel.module-RC3aC2Nl.mjs

@@ -0,0 +1,22 @@
+import './styles/Carousel.css';const n = "_root_vqc19_6", t = "_viewport_vqc19_11", e = "_dragEnabled_vqc19_31", _ = "_dragging_vqc19_36", a = "_slide_vqc19_43", c = "_navButtonCtn_vqc19_50", o = "_navButton_vqc19_50", v = "_defaultBtn_vqc19_68", d = "_navPrev_vqc19_85", i = "_navNext_vqc19_90", s = "_fadeViewport_vqc19_95", f = "_fadeSlide_vqc19_102", g = "_fadeActive_vqc19_110", r = "_fadeOutgoing_vqc19_115", q = "_fadeIncoming_vqc19_119", u = "_fadeRunning_vqc19_123", l = "_fadeInteractive_vqc19_131", B = {
+  root: n,
+  viewport: t,
+  dragEnabled: e,
+  dragging: _,
+  slide: a,
+  navButtonCtn: c,
+  navButton: o,
+  defaultBtn: v,
+  navPrev: d,
+  navNext: i,
+  fadeViewport: s,
+  fadeSlide: f,
+  fadeActive: g,
+  fadeOutgoing: r,
+  fadeIncoming: q,
+  fadeRunning: u,
+  fadeInteractive: l
+};
+export {
+  B as s
+};

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

@@ -1,6 +1,20 @@
-import { FC, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Size } from '../interface';
 
+export interface AccordionHandle {
+    /** Open a specific item by id */
+    open: (id: string) => void;
+    /** Close a specific item by id */
+    close: (id: string) => void;
+    /** Toggle a specific item by id */
+    toggle: (id: string) => void;
+    /** Close all items */
+    closeAll: () => void;
+    /** Open only one item (close others) */
+    openOnly: (id: string) => void;
+    /** Get currently open ids */
+    getOpenIds: () => string[];
+}
 export interface AccordionProps {
     /** An array of accordion items, each containing a header, content, and optional settings. */
     items: {
@@ -18,9 +32,19 @@ export interface AccordionProps {
         onClickHeader?: (id: string) => void;
     }[];
     /** Accordion style if block type the header and the content are in the same block, if it is tile they are separated into 2 blocks */
-    type?: 'block' | 'tile';
+    type?: "block" | "tile";
     /** Padding size inside the Accordion: small, medium, large */
     paddingHeader?: Size;
+    /** If true, clicking anywhere on the header (excluding buttons) toggles the content */
+    toggleOnHeaderClick?: boolean;
+    /** Visual mode for all accordion items */
+    mode?: "primary" | "secondary";
+    /** If true, only one item can be open at a time */
+    singleOpen?: boolean;
+    /** Controlled open ids (optional) */
+    openItemIds?: string[];
+    /** Controlled change callback */
+    onOpenItemIdsChange?: (ids: string[]) => void;
 }
 /**
  * Accordion component that displays a list of AccordionItem components.
@@ -30,4 +54,4 @@ export interface AccordionProps {
  * @param {AccordionProps} props - The props for the Accordion component.
  * @returns {JSX.Element} The rendered Accordion component.
  */
-export declare const Accordion: FC<AccordionProps>;
+export declare const Accordion: import('react').ForwardRefExoticComponent<AccordionProps & import('react').RefAttributes<AccordionHandle>>;

package/dist/components/accordion/Accordion.js

@@ -1,23 +1,58 @@
-import { jsx as n } from "react/jsx-runtime";
-import { AccordionItem as i } from "./item/AccordionItem.js";
-import '../../styles/Accordion.css';const l = "_accordion_hz3a1_6", s = {
-  accordion: l
-}, h = ({ items: r, type: d = "block", paddingHeader: a }) => /* @__PURE__ */ n("div", { className: s.accordion, children: r.map((o, e) => /* @__PURE__ */ n(
-  i,
-  {
-    header: o.header,
-    iconPosition: o.iconPosition ?? "right",
-    defaultOpen: o.defaultOpen ?? !1,
-    type: d ?? "block",
-    paddingHeader: a ?? "m",
-    onClickHeader: () => {
-      var c;
-      return (c = o.onClickHeader) == null ? void 0 : c.call(o, o.id);
-    },
-    children: o.content
-  },
-  e
-)) });
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as x, useMemo as P, useState as j, useImperativeHandle as w } from "react";
+import { AccordionItem as z } from "./item/AccordionItem.js";
+import '../../styles/Accordion.css';const M = "_accordion_hz3a1_6", N = {
+  accordion: M
+}, q = x(
+  ({
+    items: s,
+    type: u = "block",
+    paddingHeader: O = "m",
+    toggleOnHeaderClick: g = !1,
+    mode: k = "primary",
+    singleOpen: y = !1,
+    openItemIds: t,
+    onOpenItemIdsChange: l
+  }, H) => {
+    const i = t !== void 0, v = P(() => s.filter((o) => o.defaultOpen).map((o) => o.id), [s]), [A, _] = j(v), r = i ? t ?? [] : A, c = (o) => {
+      i ? l == null || l(o) : _(o);
+    }, e = (o) => r.includes(o), a = (o) => {
+      if (e(o)) return;
+      const n = y ? [o] : [...r, o];
+      c(n);
+    }, d = (o) => {
+      e(o) && c(r.filter((n) => n !== o));
+    }, p = (o) => {
+      e(o) ? d(o) : a(o);
+    }, b = () => c([]), h = (o) => c([o]);
+    return w(H, () => ({
+      open: a,
+      close: d,
+      toggle: p,
+      closeAll: b,
+      openOnly: h,
+      getOpenIds: () => [...r]
+    })), /* @__PURE__ */ f("div", { className: N.accordion, children: s.map((o) => /* @__PURE__ */ f(
+      z,
+      {
+        header: o.header,
+        iconPosition: o.iconPosition ?? "right",
+        type: u ?? "block",
+        paddingHeader: O ?? "m",
+        toggleOnHeaderClick: g ?? !1,
+        mode: k ?? "primary",
+        open: e(o.id),
+        onToggle: () => p(o.id),
+        onClickHeader: () => {
+          var n;
+          return (n = o.onClickHeader) == null ? void 0 : n.call(o, o.id);
+        },
+        children: o.content
+      },
+      o.id
+    )) });
+  }
+);
 export {
-  h as Accordion
+  q as Accordion
 };

package/dist/components/accordion/item/AccordionItem.d.ts

@@ -11,11 +11,19 @@ interface AccordionItemProps {
     /** Determines whether the accordion should be open by default (true) or closed (false). */
     defaultOpen?: boolean;
     /** Accordion style if block type the header and the content are in the same block, if it is tile they are separated into 2 blocks */
-    type?: 'block' | 'tile';
+    type?: "block" | "tile";
     /** Padding size inside the Accordion: small, medium, large */
     paddingHeader?: Size;
     /** Click handler on the padding header (outside of IconButtons) */
     onClickHeader?: () => void;
+    /** If true, clicking anywhere on the header (excluding buttons) toggles the content */
+    toggleOnHeaderClick?: boolean;
+    /** Visual mode for the accordion item */
+    mode?: "primary" | "secondary";
+    /** Controlled open state (optional) */
+    open?: boolean;
+    /** Toggle callback used when open is controlled */
+    onToggle?: () => void;
 }
 /**
  * AccordionItem component represents an individual item in an accordion.

package/dist/components/accordion/item/AccordionItem.js

@@ -1,61 +1,67 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { useState as p, useEffect as m } from "react";
-import { IconButton as n } from "../../icon-button/IconButton.js";
-import '../../../styles/AccordionItem.css';const u = "_accordionHeader_1tsuj_7", f = "_title_1tsuj_31", v = "_fullHeight_1tsuj_36", x = "_block_1tsuj_40", j = "_tile_1tsuj_48", l = {
-  accordionHeader: u,
-  "padding-s": "_padding-s_1tsuj_15",
-  "padding-m": "_padding-m_1tsuj_19",
-  "padding-l": "_padding-l_1tsuj_23",
-  "padding-xl": "_padding-xl_1tsuj_27",
-  title: f,
-  fullHeight: v,
-  block: x,
-  tile: j
-}, H = ({
-  header: r,
-  children: g,
-  iconPosition: d = "right",
-  defaultOpen: s = !1,
-  type: h = "block",
-  paddingHeader: _ = "m",
-  onClickHeader: e
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { useState as k, useEffect as y, useMemo as B } from "react";
+import { IconButton as w } from "../../icon-button/IconButton.js";
+import '../../../styles/AccordionItem.css';const O = "_accordionHeader_bor6q_7", A = "_title_bor6q_31", M = "_fullHeight_bor6q_36", H = "_block_bor6q_40", I = "_tile_bor6q_48", L = "_secondaryOpen_bor6q_56", e = {
+  accordionHeader: O,
+  "padding-s": "_padding-s_bor6q_15",
+  "padding-m": "_padding-m_bor6q_19",
+  "padding-l": "_padding-l_bor6q_23",
+  "padding-xl": "_padding-xl_bor6q_27",
+  title: A,
+  fullHeight: M,
+  block: H,
+  tile: I,
+  secondaryOpen: L
+}, z = ({
+  header: m,
+  children: f,
+  iconPosition: a = "right",
+  defaultOpen: d = !1,
+  type: c = "block",
+  paddingHeader: b = "m",
+  onClickHeader: s,
+  toggleOnHeaderClick: v = !1,
+  mode: h = "primary",
+  open: g,
+  onToggle: r
 }) => {
-  const [i, o] = p(!1);
-  m(() => {
-    s && o(s);
-  }, [s]);
-  const w = (a) => {
-    if (a.target.closest("button")) {
-      a.stopPropagation();
+  const l = g !== void 0, [u, _] = k(!1);
+  y(() => {
+    l || _(!!d);
+  }, [d, l]);
+  const i = l ? !!g : u, n = () => {
+    if (l) {
+      r == null || r();
       return;
     }
-    e == null || e();
-  };
-  return /* @__PURE__ */ c("div", { className: `${h === "tile" ? l.tile : l.block}`, children: [
-    /* @__PURE__ */ c("div", { className: `${l.accordionHeader} ${l[`padding-${_}`]}`, onClick: w, "data-ignore-outside-click": !0, children: [
-      d === "left" && /* @__PURE__ */ t(
-        n,
-        {
-          mode: "ghost",
-          size: "s",
-          onClick: () => o(!i),
-          children: i ? /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }) }) : /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) })
-        }
-      ),
-      /* @__PURE__ */ t("div", { className: l.title, children: r }),
-      d === "right" && /* @__PURE__ */ t(
-        n,
-        {
-          mode: "ghost",
-          size: "s",
-          onClick: () => o(!i),
-          children: i ? /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }) }) : /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) })
-        }
-      )
-    ] }),
-    i && g
+    _((o) => !o);
+  }, x = (o) => {
+    if (o.target.closest("button")) {
+      o.stopPropagation();
+      return;
+    }
+    v && n(), s == null || s();
+  }, q = B(() => [
+    c === "tile" ? e.tile : e.block,
+    h === "secondary" && i ? e.secondaryOpen : ""
+  ].filter(Boolean).join(" "), [c, h, i]);
+  return /* @__PURE__ */ p("div", { className: q, children: [
+    /* @__PURE__ */ p(
+      "div",
+      {
+        className: `${e.accordionHeader} ${e[`padding-${b}`]}`,
+        onClick: x,
+        "data-ignore-outside-click": !0,
+        children: [
+          a === "left" && /* @__PURE__ */ t(w, { mode: "ghost", size: "s", onClick: n, children: i ? /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }) }) : /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) }) }),
+          /* @__PURE__ */ t("div", { className: e.title, children: m }),
+          a === "right" && /* @__PURE__ */ t(w, { mode: "ghost", size: "s", onClick: n, children: i ? /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }) }) : /* @__PURE__ */ t("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "#000000", viewBox: "0 0 256 256", children: /* @__PURE__ */ t("path", { d: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z" }) }) })
+        ]
+      }
+    ),
+    i && f
   ] });
 };
 export {
-  H as AccordionItem
+  z as AccordionItem
 };