@situaction/traq-ui-ste 1.1.5 → 1.1.7

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

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from 'react';
+
+export interface AccordionProps {
+    /** An array of accordion items, each containing a header, content, and optional settings. */
+    items: {
+        /** The header content of the accordion item. */
+        header: ReactNode;
+        /** Defines the position of the icon, either on the left or right of the header. */
+        iconPosition?: "left" | "right";
+        /** Determines whether the accordion item should be open by default (true) or closed (false). */
+        defaultOpen?: boolean;
+        /** The content displayed when the accordion item is expanded. */
+        content: ReactNode;
+    }[];
+    /** 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';
+}
+/**
+ * Accordion component that displays a list of AccordionItem components.
+ * Each AccordionItem can be expanded or collapsed.
+ * The Accordion takes an array of items to render each item with its header and content.
+ *
+ * @param {AccordionProps} props - The props for the Accordion component.
+ * @returns {JSX.Element} The rendered Accordion component.
+ */
+export declare const Accordion: FC<AccordionProps>;

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,18 @@
+import { jsx as c } from "react/jsx-runtime";
+import { AccordionItem as i } from "./item/AccordionItem.js";
+import '../../styles/Accordion.css';const t = "_accordion_avh0n_6", a = {
+  accordion: t
+}, l = ({ items: n, type: r = "block" }) => /* @__PURE__ */ c("div", { className: a.accordion, children: n.map((o, e) => /* @__PURE__ */ c(
+  i,
+  {
+    header: o.header,
+    iconPosition: o.iconPosition ?? "right",
+    defaultOpen: o.defaultOpen ?? !1,
+    type: r ?? "block",
+    children: o.content
+  },
+  e
+)) });
+export {
+  l as Accordion
+};

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

@@ -0,0 +1,25 @@
+import { FC, ReactNode } from 'react';
+
+interface AccordionItemProps {
+    /** The header content of the accordion item. */
+    header: ReactNode;
+    /** The content displayed when the accordion is expanded. */
+    children: ReactNode;
+    /** Defines the position of the icon, either on the left or right of the header. */
+    iconPosition?: "left" | "right";
+    /** 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';
+}
+/**
+ * AccordionItem component represents an individual item in an accordion.
+ * It can be opened and closed, showing or hiding its content.
+ * The icon can be positioned either to the left or right of the header.
+ * The item can also be set to be open by default.
+ *
+ * @param {AccordionItemProps} props - The props for the AccordionItem component.
+ * @returns {JSX.Element} The rendered AccordionItem component.
+ */
+export declare const AccordionItem: FC<AccordionItemProps>;
+export {};

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

@@ -0,0 +1,48 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useState as d, useEffect as w } from "react";
+import { IconButton as n } from "../../icon-button/IconButton.js";
+import '../../../styles/AccordionItem.css';const g = "_accordionHeader_e4xbv_7", v = "_title_e4xbv_16", _ = "_accordionContent_e4xbv_21", m = "_fullHeight_e4xbv_26", x = "_block_e4xbv_30", f = "_tile_e4xbv_38", l = {
+  accordionHeader: g,
+  title: v,
+  accordionContent: _,
+  fullHeight: m,
+  block: x,
+  tile: f
+}, H = ({
+  header: r,
+  children: h,
+  iconPosition: c = "right",
+  defaultOpen: i = !1,
+  type: a = "block"
+}) => {
+  const [e, o] = d(!1);
+  return w(() => {
+    i && o(i);
+  }, [i]), /* @__PURE__ */ s("div", { className: `${a === "tile" ? l.tile : l.block}`, children: [
+    /* @__PURE__ */ s("div", { className: l.accordionHeader, children: [
+      c === "left" && /* @__PURE__ */ t(
+        n,
+        {
+          mode: "ghost",
+          size: "s",
+          onClick: () => o(!e),
+          children: e ? /* @__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 }),
+      c === "right" && /* @__PURE__ */ t(
+        n,
+        {
+          mode: "ghost",
+          size: "s",
+          onClick: () => o(!e),
+          children: e ? /* @__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" }) })
+        }
+      )
+    ] }),
+    e && /* @__PURE__ */ t("div", { className: l.accordionContent, children: h })
+  ] });
+};
+export {
+  H as AccordionItem
+};

package/dist/components/card/Card.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+
+export interface CardProps {
+    children: ReactNode;
+}
+export declare const Card: FC<CardProps>;

package/dist/components/card/Card.js

@@ -0,0 +1,7 @@
+import { jsx as c } from "react/jsx-runtime";
+import '../../styles/Card.css';const s = "_card_12xhq_6", a = {
+  card: s
+}, d = ({ children: r }) => /* @__PURE__ */ c("div", { className: a.card, children: r });
+export {
+  d as Card
+};

package/dist/components/checkbox/Checkbox.js

@@ -1,49 +1,44 @@
 import { jsx as o } from "react/jsx-runtime";
-import { useState as d, useEffect as a } from "react";
-import '../../styles/Checkbox.css';const n = "_checkbox_owci7_23", w = "_checked_owci7_31", r = "_disabled_owci7_37", c = {
+import { useState as d, useEffect as m } from "react";
+import '../../styles/Checkbox.css';const n = "_checkbox_10m2o_23", a = "_checked_10m2o_30", r = "_disabled_10m2o_36", e = {
   checkbox: n,
-  checked: w,
+  checked: a,
   disabled: r,
-  "checkbox-size-xs": "_checkbox-size-xs_owci7_45",
-  "checkbox-size-s": "_checkbox-size-s_owci7_50",
-  "checkbox-size-m": "_checkbox-size-m_owci7_55",
-  "checkbox-size-l": "_checkbox-size-l_owci7_60",
-  "checkbox-size-xl": "_checkbox-size-xl_owci7_65"
-}, f = ({
-  checked: e = !1,
-  icon: x = /* @__PURE__ */ o("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 256 256", children: /* @__PURE__ */ o(
-    "path",
-    {
-      d: "M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
-    }
-  ) }),
-  size: k = "m",
-  disabled: _ = !1,
+  "checkbox-size-xs": "_checkbox-size-xs_10m2o_44",
+  "checkbox-size-s": "_checkbox-size-s_10m2o_49",
+  "checkbox-size-m": "_checkbox-size-m_10m2o_54",
+  "checkbox-size-l": "_checkbox-size-l_10m2o_59",
+  "checkbox-size-xl": "_checkbox-size-xl_10m2o_64"
+}, w = ({
+  checked: c = !1,
+  icon: x = /* @__PURE__ */ o("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", children: /* @__PURE__ */ o("path", { d: "M2.66667 6.1L0.666667 4L0 4.7L2.66667 7.5L8 1.2L7.33333 0.5L2.66667 6.1Z", fill: "white" }) }),
+  size: l = "m",
+  disabled: k = !1,
   onChange: i
 }) => {
-  const [s, h] = d(e);
-  a(() => {
-    h(e);
-  }, [e]);
-  const l = () => {
+  const [s, h] = d(c);
+  m(() => {
+    h(c);
+  }, [c]);
+  const _ = () => {
     const t = !s;
     h(t), i && i(t);
   }, b = [
-    c.checkbox,
-    c[`checkbox-size-${k}`],
-    s && c.checked,
-    _ && c.disabled
+    e.checkbox,
+    e[`checkbox-size-${l}`],
+    s && e.checked,
+    k && e.disabled
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ o(
     "div",
     {
       "data-testid": "checkbox",
       className: b,
-      onClick: l,
+      onClick: _,
       children: s && x
     }
   );
 };
 export {
-  f as Checkbox
+  w as Checkbox
 };

package/dist/components/tabs/Tabs.js

@@ -1,8 +1,8 @@
-import { jsxs as H, jsx as a } from "react/jsx-runtime";
-import { useState as d, useRef as s, useLayoutEffect as C } from "react";
-import { Button as $ } from "../button/Button.js";
-import { IconButton as B } from "../icon-button/IconButton.js";
-import '../../styles/Tabs.css';const N = "_underline_udv7v_50", n = {
+import { jsxs as H, jsx as r } from "react/jsx-runtime";
+import { useState as f, useRef as u, useLayoutEffect as C, useEffect as $ } from "react";
+import { Button as B } from "../button/Button.js";
+import { IconButton as N } from "../icon-button/IconButton.js";
+import '../../styles/Tabs.css';const p = "_underline_udv7v_50", n = {
   "tab-container": "_tab-container_udv7v_23",
   "tab-container-button": "_tab-container-button_udv7v_27",
   "tab-container-icon": "_tab-container-icon_udv7v_32",
@@ -10,58 +10,61 @@ import '../../styles/Tabs.css';const N = "_underline_udv7v_50", n = {
   "tab-items": "_tab-items_udv7v_35",
   "tab-items-button": "_tab-items-button_udv7v_39",
   "selected-button": "_selected-button_udv7v_44",
-  underline: N,
+  underline: p,
   "flexHorizontal-center": "_flexHorizontal-center_udv7v_58",
   "flexHorizontal-left": "_flexHorizontal-left_udv7v_64",
   "flexHorizontal-right": "_flexHorizontal-right_udv7v_70"
-}, w = ({ listItems: r, type: o, onTabSelect: _, defaultActiveTab: f = 0, position: v = "left" }) => {
-  const [l, m] = d(f), [x, h] = d({}), c = s(null), g = s(null), u = s(new Array(r.length).fill(null)), b = (t) => {
-    m(t), _(r[t]);
+}, y = ({ listItems: c, type: o, onTabSelect: v, defaultActiveTab: a = 0, position: m = "left" }) => {
+  const [l, b] = f(a), [x, h] = f({}), i = u(null), g = u(null), _ = u(new Array(c.length).fill(null)), d = (t) => {
+    b(t), v(c[t]);
   }, z = (t) => {
-    if (c.current && t) {
-      const e = t.getBoundingClientRect(), i = c.current.getBoundingClientRect();
+    if (i.current && t) {
+      const e = t.getBoundingClientRect(), s = i.current.getBoundingClientRect();
       h({
-        left: `${e.left - i.left}px`,
+        left: `${e.left - s.left}px`,
         width: `${e.width}px`
       });
     }
   }, R = [
-    n[`flexHorizontal-${v}`],
+    n[`flexHorizontal-${m}`],
     o === "button" ? n["tab-items-button"] : n["tab-items"]
   ].filter(Boolean).join(" ");
   return C(() => {
-    const t = u.current[l];
+    const t = _.current[l];
     t && z(t);
-  }, [l]), /* @__PURE__ */ H("div", { className: `tab ${n["tab-container"]} ${n[`tab-container-${o}`]}`, ref: c, children: [
-    /* @__PURE__ */ a("div", { className: R, children: r.map((t, e) => /* @__PURE__ */ a(
+  }, [l]), $(() => {
+    b(a);
+  }, [a]), /* @__PURE__ */ H("div", { className: `tab ${n["tab-container"]} ${n[`tab-container-${o}`]}`, ref: i, children: [
+    /* @__PURE__ */ r("div", { className: R, children: c.map((t, e) => /* @__PURE__ */ r(
       "div",
       {
-        ref: (i) => u.current[e] = i,
+        ref: (s) => _.current[e] = s,
         className: o === "button" && e === l ? n["selected-button"] : "",
-        children: o === "icon" ? /* @__PURE__ */ a(
-          B,
+        children: o === "icon" ? /* @__PURE__ */ r(
+          N,
           {
             mode: "icon",
             size: "s",
             selected: e === l,
-            onClick: () => b(e),
+            onClick: () => d(e),
             children: t
           }
-        ) : /* @__PURE__ */ a(
-          $,
+        ) : /* @__PURE__ */ r(
+          B,
           {
+            size: "s",
             label: t,
             mode: o === "text" ? "text" : "ghost",
             selected: e === l,
-            onClick: () => b(e)
+            onClick: () => d(e)
           }
         )
       },
       e
     )) }),
-    o !== "button" && /* @__PURE__ */ a("div", { ref: g, className: n.underline, style: x })
+    o !== "button" && /* @__PURE__ */ r("div", { ref: g, className: n.underline, style: x })
   ] });
 };
 export {
-  w as Tabs
+  y as Tabs
 };

package/dist/main.d.ts

@@ -10,4 +10,7 @@ export { Checkbox } from './components/checkbox/Checkbox.tsx';
 export { Tooltip } from './components/tooltip/Tooltip.tsx';
 export { Select } from './components/select/Select.tsx';
 export { Calendar } from './components/calendar/Calendar';
+export { Accordion } from './components/accordion/Accordion';
+export { AccordionItem } from './components/accordion/item/AccordionItem';
+export { Card } from './components/card/Card';
 export { ThemeProvider, useTheme } from './components/theme/ThemeContext';

package/dist/main.js

@@ -1,27 +1,33 @@
 import { Button as e } from "./components/button/Button.js";
 import { Input as m } from "./components/input/Input.js";
 import { Tabs as x } from "./components/tabs/Tabs.js";
-import { IconButton as T } from "./components/icon-button/IconButton.js";
-import { Tag as a } from "./components/tag/Tag.js";
-import { Title as l } from "./components/title/Title.js";
-import { TagCounter as h } from "./components/tag-counter/TagCounter.js";
+import { IconButton as n } from "./components/icon-button/IconButton.js";
+import { Tag as T } from "./components/tag/Tag.js";
+import { Title as d } from "./components/title/Title.js";
+import { TagCounter as u } from "./components/tag-counter/TagCounter.js";
 import { Checkbox as C } from "./components/checkbox/Checkbox.js";
-import { Tooltip as d } from "./components/tooltip/Tooltip.js";
-import { Select as s } from "./components/select/Select.js";
-import { Calendar as I } from "./components/calendar/Calendar.js";
-import { ThemeProvider as v, useTheme as P } from "./components/theme/ThemeContext.js";
+import { Tooltip as I } from "./components/tooltip/Tooltip.js";
+import { Select as g } from "./components/select/Select.js";
+import { Calendar as A } from "./components/calendar/Calendar.js";
+import { Accordion as k } from "./components/accordion/Accordion.js";
+import { AccordionItem as P } from "./components/accordion/item/AccordionItem.js";
+import { Card as j } from "./components/card/Card.js";
+import { ThemeProvider as w, useTheme as y } from "./components/theme/ThemeContext.js";
 import './styles/main.css';export {
+  k as Accordion,
+  P as AccordionItem,
   e as Button,
-  I as Calendar,
+  A as Calendar,
+  j as Card,
   C as Checkbox,
-  T as IconButton,
+  n as IconButton,
   m as Input,
-  s as Select,
+  g as Select,
   x as Tabs,
-  a as Tag,
-  h as TagCounter,
-  v as ThemeProvider,
-  l as Title,
-  d as Tooltip,
-  P as useTheme
+  T as Tag,
+  u as TagCounter,
+  w as ThemeProvider,
+  d as Title,
+  I as Tooltip,
+  y as useTheme
 };

package/dist/styles/Accordion.css

@@ -0,0 +1 @@
+._accordion_avh0n_6{border-radius:.375rem;width:100%;overflow-y:auto;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:.625rem}

package/dist/styles/AccordionItem.css

@@ -0,0 +1 @@
+@charset "UTF-8";._accordionHeader_e4xbv_7{display:flex;align-items:center;justify-content:space-between;padding:.75rem;border-radius:.375rem;gap:.375rem}._title_e4xbv_16{flex-grow:1;text-align:left}._accordionContent_e4xbv_21{border-radius:0 0 .375rem .375rem;padding:0 .75rem .75rem}._fullHeight_e4xbv_26{height:100%}._block_e4xbv_30{border:1px solid var(--general-border-window);box-shadow:0 4px 5px 0 var(--shadow-color-minimal);background:var(--background-primary);border-radius:.375rem}._tile_e4xbv_38 ._accordionHeader_e4xbv_7{border-radius:.375rem;margin-bottom:.375rem;border:1px solid var(--general-border-window);background:var(--background-primary)}._tile_e4xbv_38 ._accordionContent_e4xbv_21{border-radius:.375rem;box-shadow:0 2px 4px #0000001a}

package/dist/styles/Card.css

@@ -0,0 +1 @@
+._card_12xhq_6{border-radius:.375rem;padding:.75rem;border:1px solid var(--general-border-window)}

package/dist/styles/Checkbox.css

@@ -1 +1 @@
-._checkbox_owci7_23{cursor:pointer;display:flex;align-items:center;justify-content:center;border:1px solid var(--checkbox-default-uncoched-default-stroke);padding:.125rem}._checkbox_owci7_23._checked_owci7_31{background-color:var(--checkbox-default-coched-default-background)}._checkbox_owci7_23._checked_owci7_31 *{fill:var(--checkbox-default-coched-default-coche)}._checkbox_owci7_23._disabled_owci7_37{border:1px solid var(--checkbox-disabled-uncoched-default-hover-stroke);pointer-events:none}._checkbox_owci7_23._disabled_owci7_37._checked_owci7_31{border:1px solid transparent;background-color:var(--checkbox-disabled-coched-default-hover-background)}._checkbox-size-xs_owci7_45{width:8px;height:8px;border-radius:.125rem}._checkbox-size-s_owci7_50{width:10px;height:10px;border-radius:.063rem}._checkbox-size-m_owci7_55{width:12px;height:12px;border-radius:.125rem}._checkbox-size-l_owci7_60{width:14px;height:14px;border-radius:.125rem}._checkbox-size-xl_owci7_65{width:16px;height:16px;border-radius:.125rem}
+._checkbox_10m2o_23{cursor:pointer;display:flex;align-items:center;justify-content:center;border:1px solid var(--checkbox-default-uncoched-default-stroke)}._checkbox_10m2o_23._checked_10m2o_30{background-color:var(--checkbox-default-coched-default-background)}._checkbox_10m2o_23._checked_10m2o_30 *{fill:var(--checkbox-default-coched-default-coche)}._checkbox_10m2o_23._disabled_10m2o_36{border:1px solid var(--checkbox-disabled-uncoched-default-hover-stroke);pointer-events:none}._checkbox_10m2o_23._disabled_10m2o_36._checked_10m2o_30{border:1px solid transparent;background-color:var(--checkbox-disabled-coched-default-hover-background)}._checkbox-size-xs_10m2o_44{width:8px;height:8px;border-radius:.125rem}._checkbox-size-s_10m2o_49{width:10px;height:10px;border-radius:.063rem}._checkbox-size-m_10m2o_54{width:12px;height:12px;border-radius:.125rem}._checkbox-size-l_10m2o_59{width:14px;height:14px;border-radius:.125rem}._checkbox-size-xl_10m2o_64{width:16px;height:16px;border-radius:.125rem}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",