@situaction/traq-ui-ste 1.1.4 → 1.1.6

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_1soy0_6", d = {
+  accordion: t
+}, l = ({ items: n, type: r = "block" }) => /* @__PURE__ */ c("div", { className: d.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 a, useEffect as g } from "react";
+import { IconButton as n } from "../../icon-button/IconButton.js";
+import '../../../styles/AccordionItem.css';const w = "_accordionHeader_zfdov_7", v = "_title_zfdov_16", f = "_accordionContent_zfdov_21", _ = "_fullHeight_zfdov_27", m = "_block_zfdov_31", p = "_tile_zfdov_39", l = {
+  accordionHeader: w,
+  title: v,
+  accordionContent: f,
+  fullHeight: _,
+  block: m,
+  tile: p
+}, k = ({
+  header: d,
+  children: h,
+  iconPosition: c = "right",
+  defaultOpen: e = !1,
+  type: r = "block"
+}) => {
+  const [o, i] = a(!1);
+  return g(() => {
+    e && i(e);
+  }, [e]), /* @__PURE__ */ s("div", { className: `${o && l.fullHeight} ${r === "tile" ? l.tile : l.block}`, children: [
+    /* @__PURE__ */ s("div", { className: l.accordionHeader, children: [
+      c === "left" && /* @__PURE__ */ t(
+        n,
+        {
+          mode: "ghost",
+          size: "s",
+          onClick: () => i(!o),
+          children: o ? /* @__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: d }),
+      c === "right" && /* @__PURE__ */ t(
+        n,
+        {
+          mode: "ghost",
+          size: "s",
+          onClick: () => i(!o),
+          children: o ? /* @__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" }) })
+        }
+      )
+    ] }),
+    o && /* @__PURE__ */ t("div", { className: l.accordionContent, children: h })
+  ] });
+};
+export {
+  k as AccordionItem
+};

package/dist/components/button/Button.js

@@ -1,56 +1,56 @@
-import { jsxs as d, jsx as n } from "react/jsx-runtime";
-import '../../styles/Button.css';const i = "_button_vdgnu_23", p = "_flexHorizontalCenter_vdgnu_184", t = {
-  button: i,
-  "button-primary": "_button-primary_vdgnu_47",
-  "button-secondary": "_button-secondary_vdgnu_61",
-  "button-tertiary": "_button-tertiary_vdgnu_77",
-  "button-ghost": "_button-ghost_vdgnu_93",
-  "button-text": "_button-text_vdgnu_109",
-  "button-text-selected": "_button-text-selected_vdgnu_122",
-  "button-error": "_button-error_vdgnu_128",
-  "button-size-xl": "_button-size-xl_vdgnu_141",
-  "button-size-l": "_button-size-l_vdgnu_147",
-  "button-size-m": "_button-size-m_vdgnu_153",
-  "button-size-s": "_button-size-s_vdgnu_159",
-  "button-size-menu": "_button-size-menu_vdgnu_165",
-  "button-gap-menu": "_button-gap-menu_vdgnu_171",
-  "button-gap-xl": "_button-gap-xl_vdgnu_174",
-  "button-gap-l": "_button-gap-l_vdgnu_177",
-  "button-gap-m": "_button-gap-m_vdgnu_171",
-  "button-gap-s": "_button-gap-s_vdgnu_180",
-  flexHorizontalCenter: p
-}, x = ({
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import '../../styles/Button.css';const v = "_button_wt8sv_23", w = "_flexHorizontalCenter_wt8sv_184", t = {
+  button: v,
+  "button-primary": "_button-primary_wt8sv_47",
+  "button-secondary": "_button-secondary_wt8sv_61",
+  "button-tertiary": "_button-tertiary_wt8sv_77",
+  "button-ghost": "_button-ghost_wt8sv_93",
+  "button-text": "_button-text_wt8sv_109",
+  "button-text-selected": "_button-text-selected_wt8sv_122",
+  "button-error": "_button-error_wt8sv_128",
+  "button-size-xl": "_button-size-xl_wt8sv_141",
+  "button-size-l": "_button-size-l_wt8sv_147",
+  "button-size-m": "_button-size-m_wt8sv_153",
+  "button-size-s": "_button-size-s_wt8sv_159",
+  "button-size-menu": "_button-size-menu_wt8sv_165",
+  "button-gap-menu": "_button-gap-menu_wt8sv_171",
+  "button-gap-xl": "_button-gap-xl_wt8sv_174",
+  "button-gap-l": "_button-gap-l_wt8sv_177",
+  "button-gap-m": "_button-gap-m_wt8sv_171",
+  "button-gap-s": "_button-gap-s_wt8sv_180",
+  flexHorizontalCenter: w
+}, m = ({
   mode: o = "primary",
-  size: u = "m",
-  label: b,
-  error: s,
+  size: e = "m",
+  label: u,
+  error: b,
   selected: r,
-  childrenLeft: e,
+  childrenLeft: s,
   childrenRight: _,
   ...a
 }) => {
-  const l = () => s ? "error" : o, g = [
+  const l = () => b ? "error" : o, i = [
     t.button,
     t[`button-${l()}`],
-    t[`button-size-${u}`],
-    t[`button-gap-${u}`],
+    t[`button-size-${e}`],
+    t[`button-gap-${e}`],
     r && o === "text" && t["button-text-selected"],
     t.flexHorizontalCenter
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ p(
     "button",
     {
       type: "button",
-      className: g,
+      className: i,
       ...a,
       children: [
-        e && /* @__PURE__ */ n("span", { className: t.flexHorizontalCenter, children: e }),
-        /* @__PURE__ */ n("span", { children: b }),
+        s && /* @__PURE__ */ n("span", { className: t.flexHorizontalCenter, children: s }),
+        /* @__PURE__ */ n("span", { children: u }),
         _ && /* @__PURE__ */ n("span", { className: t.flexHorizontalCenter, children: _ })
       ]
     }
   );
 };
 export {
-  x as Button
+  m as Button
 };

package/dist/components/calendar/Calendar.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+
+export interface CalendarProps {
+    /** Whether the date range selection is enabled */
+    selectRange?: boolean;
+    /** The currently selected date or a range of dates */
+    selectedDate?: Date | {
+        start: Date;
+        end: Date;
+    };
+    /** Callback to return the selected date or date range */
+    onDateSelect: (date: Date | {
+        start: Date;
+        end: Date;
+    }) => void;
+}
+export declare const Calendar: FC<CalendarProps>;