@situaction/traq-ui-ste 1.1.16 → 1.1.18

package/dist/components/select/Select.d.ts

@@ -1,20 +1,39 @@
 import { FC } from 'react';
+import { Size } from '../interface';
 
-interface Option {
-    value: string | number;
-    label: string;
-}
+import * as PhosphorIcons from "@phosphor-icons/react";
+export type SelectItem = {
+    label?: string;
+    icon?: keyof typeof PhosphorIcons;
+    value: string;
+};
 export interface SelectProps {
-    /** options to display ( label with a value ) **/
-    options: Option[];
-    /** label to display when selected **/
-    placeholder: string;
-    /** function for taking back the selected value **/
-    onChange?: (value: string | number) => void;
-    /** disable option **/
-    disabled?: boolean;
-    /** options to display on top or bottom **/
-    top?: boolean;
+    /** The currently selected item. If not provided, the first item from `listItem` will be used. */
+    selected?: SelectItem;
+    /** The size of the select button ('s', 'm', 'l', 'xl'). Default is 'm'. */
+    size?: Size | 'menu';
+    /** The list of selectable items, each with a label, an optional icon, and a value. */
+    listItem: SelectItem[];
+    /** Determines how the selected item is displayed:
+     * - 'all' (icon + text if both exist),
+     * - 'icon' (only the icon),
+     * - 'text' (only the text).
+     * Default is 'all'.
+     */
+    modeDisplay?: 'icon' | 'text' | 'all';
+    /** Callback function triggered when an item is selected, returning the selected object. */
+    onSelect?: (selected: SelectItem) => void;
+    /** Position personnalized*/
+    positionOverride?: {
+        top?: string;
+        left?: string;
+        right?: string;
+        bottom?: string;
+    };
 }
+/**
+ * Select component that allows users to choose an option from a list.
+ * It supports three display modes: 'all' (icon + text), 'icon' (only icon), and 'text' (only text).
+ * The selected value is displayed in a button, and a modal opens to show the list of options.
+ */
 export declare const Select: FC<SelectProps>;
-export {};

package/dist/components/select/Select.js

@@ -1,72 +1,87 @@
-import { jsxs as b, jsx as s } from "react/jsx-runtime";
-import { useState as r, useRef as f, useEffect as v } from "react";
-import { Button as h } from "../button/Button.js";
-import '../../styles/Select.css';const w = "_customSelect_12bxx_40", S = "_selectOptions_12bxx_46", g = "_option_12bxx_65", t = {
-  customSelect: w,
-  selectOptions: S,
-  "selectOptions-top": "_selectOptions-top_12bxx_55",
-  "selectOptions-bottom": "_selectOptions-bottom_12bxx_58",
-  "selectOptions-s": "_selectOptions-s_12bxx_61",
-  option: g,
-  "icon-size-s": "_icon-size-s_12bxx_73"
-}, k = ({
-  options: a,
-  placeholder: p = "",
-  onChange: l,
-  disabled: m,
-  top: d = !1
-  // size = "m",
-}) => {
-  const [o, n] = r(!1), [c, u] = r(null), i = f(null);
-  v(() => {
-    const e = (O) => {
-      i.current && !i.current.contains(O.target) && n(!1);
-    };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []);
-  const _ = () => [
-    t.selectOptions,
-    d ? t["selectOptions-top"] : t["selectOptions-bottom"],
-    t["selectOptions-s"]
-  ].join(" "), x = (e) => {
-    u(e), n(!1), l && l(e.value);
-  };
-  return /* @__PURE__ */ b("div", { className: `${t.customSelect}`, children: [
-    /* @__PURE__ */ s(
-      h,
+import { jsxs as u, jsx as l } from "react/jsx-runtime";
+import { useState as f, useRef as N, useEffect as C } from "react";
+import { Button as _ } from "../button/Button.js";
+import '../../styles/Size.css';import '../../styles/index.css';import '../../styles/Select.css';/* empty css                    */
+import { IconButton as S } from "../icon-button/IconButton.js";
+import { Icon as a } from "../icon/Icon.js";
+import { Modal as g } from "../modal/Modal.js";
+import "../theme/ThemeContext.js";
+/* empty css                   */
+const R = "_selectContainer_ak06l_40", y = "_selected_ak06l_43", z = "_children_ak06l_47", B = "_active_ak06l_62", F = "_selectList_ak06l_66", j = "_modal_ak06l_75", U = "_dropdownFadeIn_ak06l_1", $ = "_itemLabel_ak06l_81", c = {
+  selectContainer: R,
+  selected: y,
+  children: z,
+  active: B,
+  selectList: F,
+  modal: j,
+  dropdownFadeIn: U,
+  itemLabel: $
+}, K = ({ selected: i, size: s = "m", listItem: h, modeDisplay: r = "all", onSelect: p, positionOverride: d }) => {
+  const [n, o] = f(!1), k = N(null), [L, v] = f({ top: "calc(100% + 6px)" }), I = i ?? h[0], [t, b] = f(I);
+  C(() => {
+    i && b(i);
+  }, [i]), C(() => {
+    d && v(d);
+  }, [d]);
+  const w = (e) => {
+    b(e), o(!1), p && p(e);
+  }, x = () => {
+    const e = !!t.icon, m = !!t.label;
+    return t.icon && r === "icon" && e ? /* @__PURE__ */ l(S, { mode: "tertiary", size: s ?? "m", onClick: () => o(!n), children: /* @__PURE__ */ l(a, { icon: t.icon }) }) : t.label && r === "text" && m ? /* @__PURE__ */ l(
+      _,
       {
-        onClick: () => n(!o),
-        disabled: m,
-        size: "s",
         mode: "tertiary",
-        childrenRight: /* @__PURE__ */ s(
-          "svg",
-          {
-            className: t["icon-size-s"],
-            style: {
-              transition: ".3s",
-              rotate: o ? "180deg" : "0deg"
-            },
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 256 256",
-            children: /* @__PURE__ */ s("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" })
-          }
-        ),
-        label: c ? c.label : p
+        label: t.label,
+        childrenRight: /* @__PURE__ */ l(a, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
+        size: s ?? "m",
+        onClick: () => o(!n)
+      }
+    ) : t.label && t.icon && r === "all" && (e || m) ? /* @__PURE__ */ l(
+      _,
+      {
+        mode: "tertiary",
+        label: m ? t.label : "",
+        size: s ?? "m",
+        childrenLeft: e && /* @__PURE__ */ l(a, { icon: t.icon }),
+        childrenRight: /* @__PURE__ */ l(a, { icon: n ? "CaretUp" : "CaretDown", size: 14, weight: "bold" }),
+        onClick: () => o(!n)
       }
-    ),
-    o && /* @__PURE__ */ s("div", { className: _(), children: a.map((e) => /* @__PURE__ */ s(
-      "div",
+    ) : /* @__PURE__ */ l(
+      _,
       {
-        className: t.option,
-        role: "option",
-        onClick: () => x(e),
-        children: e.label
-      },
-      e.value
-    )) })
+        mode: "tertiary",
+        label: "Sélectionner",
+        size: s ?? "m",
+        onClick: () => o(!n)
+      }
+    );
+  };
+  return /* @__PURE__ */ u("div", { className: c.selectContainer, children: [
+    x(),
+    /* @__PURE__ */ l(
+      g,
+      {
+        ref: k,
+        open: n,
+        onClose: () => o(!1),
+        className: c.modal,
+        position: L,
+        children: /* @__PURE__ */ l("div", { className: c.selectList, children: h.map((e) => /* @__PURE__ */ u(
+          "div",
+          {
+            className: `${c.children} ${e.value === t.value ? c.active : ""}`,
+            onClick: () => w(e),
+            children: [
+              e.icon && /* @__PURE__ */ l(a, { icon: e.icon }),
+              e.label && /* @__PURE__ */ l("div", { className: c.itemLabel, children: e.label })
+            ]
+          },
+          e.value
+        )) })
+      }
+    )
   ] });
 };
 export {
-  k as Select
+  K as Select
 };

package/dist/components/select-filter-input-tags/SelectFilterInputTags.d.ts

@@ -0,0 +1,17 @@
+import { KeyboardEvent, FC, ReactNode } from 'react';
+
+export interface SelectFilterInputTagsProps {
+    /** Elements to display before the input (usually selected tags) */
+    children: ReactNode;
+    /** The current value of the input field */
+    inputValue: string;
+    /** Callback triggered when the input value changes */
+    handleInputChange: (value: string) => void;
+    /** Optional handler for key down events (e.g., Enter to submit) */
+    handleKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+/**
+ * A component that wraps an input field for filtering and tagging functionality,
+ * allowing children to be displayed alongside the input (e.g., selected tags).
+ */
+export declare const SelectFilterInputTags: FC<SelectFilterInputTagsProps>;

package/dist/components/select-filter-input-tags/SelectFilterInputTags.js

@@ -0,0 +1,31 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import '../../styles/Size.css';import '../../styles/index.css';import '../../styles/SelectFilterInputTags.css';/* empty css                    */
+import "react";
+import { Input as c } from "../input/Input.js";
+import "../modal/Modal.js";
+import "../theme/ThemeContext.js";
+/* empty css                   */
+const a = "_listTagSelect_2v3fb_6", u = "_flexAutoSize_2v3fb_24", n = {
+  listTagSelect: a,
+  flexAutoSize: u
+}, v = ({ children: l, inputValue: o, handleInputChange: s, handleKeyDown: i }) => /* @__PURE__ */ e("div", { className: n.listTagSelect, children: /* @__PURE__ */ r("div", { children: [
+  l,
+  /* @__PURE__ */ e("div", { className: "flexAutoSize", children: /* @__PURE__ */ e(
+    c,
+    {
+      type: "text",
+      value: o,
+      onKeyDown: (t) => {
+        t.key === "Enter" && i && i(t);
+      },
+      onChange: (t) => s(t.target.value),
+      autoFocus: !0,
+      placeholder: "",
+      status: "ghost",
+      sizeStyle: "s"
+    }
+  ) })
+] }) });
+export {
+  v as SelectFilterInputTags
+};

package/dist/components/select-multi-items/SelectMultiItems.d.ts

@@ -0,0 +1,24 @@
+import { FC, ReactNode } from 'react';
+
+/** Props for the SelectMultiItems component */
+export interface SelectMultiItemsProps {
+    /** Label displayed on the button */
+    label: string;
+    /** Optional icon displayed on the left of the button */
+    iconButton?: ReactNode;
+    /** Number of selected items to display */
+    selectedCount?: number;
+    /** Callback to clear the current selection */
+    onClearSelection?: () => void;
+    /** Content displayed inside the modal */
+    children: ReactNode;
+    /** Size of the button */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /** Modal alignment relative to the button */
+    align?: "left" | "right";
+}
+/**
+ * A button component that toggles a modal to select multiple items.
+ * Displays the number of selected items and an icon to clear the selection.
+ */
+export declare const SelectMultiItems: FC<SelectMultiItemsProps>;

package/dist/components/select-multi-items/SelectMultiItems.js

@@ -0,0 +1,44 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { useState as _, useRef as h } from "react";
+import { R as v, I as C, D as x } from "../../X-Bd1VjKAF.mjs";
+import { Button as M } from "../button/Button.js";
+import '../../styles/Size.css';import '../../styles/index.css';import '../../styles/SelectMultiItems.css';/* empty css                    */
+import { TagCounter as R } from "../tag-counter/TagCounter.js";
+import { Modal as w } from "../modal/Modal.js";
+import "../theme/ThemeContext.js";
+/* empty css                   */
+const y = "_relative_w7e9a_6", I = "_tagCounter_w7e9a_10", N = "_modal_w7e9a_18", r = {
+  relative: y,
+  tagCounter: I,
+  modal: N
+}, T = ({
+  label: s,
+  iconButton: l,
+  selectedCount: t = 0,
+  onClearSelection: n,
+  children: m,
+  size: c = "m",
+  align: p = "right"
+}) => {
+  const [e, a] = _(!1), d = h(null), f = () => a(!1), g = t > 0 ? /* @__PURE__ */ o(v, { onClick: n }) : e ? /* @__PURE__ */ o(C, {}) : /* @__PURE__ */ o(x, {}), u = t > 0 ? "secondary" : "tertiary";
+  return /* @__PURE__ */ i("div", { className: r.relative, children: [
+    /* @__PURE__ */ o(
+      M,
+      {
+        label: s,
+        mode: u,
+        size: c,
+        childrenLeft: l,
+        childrenRight: /* @__PURE__ */ i("div", { className: r.tagCounter, children: [
+          t > 0 && /* @__PURE__ */ o(R, { size: "s", label: t }),
+          g
+        ] }),
+        onClick: () => a(!e)
+      }
+    ),
+    /* @__PURE__ */ o(w, { ref: d, open: e, onClose: f, className: r.modal, position: { top: "calc(100% + 6px)", ...p === "right" ? { left: "0" } : { right: "0" } }, children: m })
+  ] });
+};
+export {
+  T as SelectMultiItems
+};

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,30 @@
+import { FC, ReactNode } from 'react';
+import { Size } from '../interface';
+
+import * as PhosphorIcons from "@phosphor-icons/react";
+/**
+ * A customizable toggle switch component with support for controlled and uncontrolled usage.
+ * You can pass a default value, retrieve its state through `onChange`, or control it manually via `checked`.
+ */
+export interface SwitchProps {
+    /** Optional size of the switch (e.g., 's', 'm', 'l', 'xl') */
+    size?: Size;
+    /** Controls the checked state of the switch (controlled mode) */
+    checked?: boolean;
+    /** Sets the default checked state of the switch (uncontrolled mode) */
+    defaultChecked?: boolean;
+    /** Callback triggered when the switch value changes */
+    onChange?: (checked: boolean) => void;
+    /** Optional content to display next to the switch */
+    children?: ReactNode;
+    /** Disables the switch if true */
+    disabled?: boolean;
+    /** Optional variant of the switch (classic, icon) */
+    variant?: 'classic' | 'icon';
+    /** Optional icons of the IconButton */
+    icons?: {
+        left: keyof typeof PhosphorIcons;
+        right: keyof typeof PhosphorIcons;
+    };
+}
+export declare const Switch: FC<SwitchProps>;

package/dist/components/switch/Switch.js

@@ -0,0 +1,93 @@
+import { jsxs as m, jsx as c } from "react/jsx-runtime";
+import { useState as $, useEffect as b } from "react";
+import '../../styles/Size.css';import '../../styles/index.css';import '../../styles/Switch.css';/* empty css                    */
+import { IconButton as k } from "../icon-button/IconButton.js";
+import { Icon as g } from "../icon/Icon.js";
+import "../modal/Modal.js";
+import "../theme/ThemeContext.js";
+/* empty css                   */
+const y = "_slider_1mxgk_21", I = "_s_1mxgk_6", N = "_m_1mxgk_58", S = "_l_1mxgk_75", j = "_xl_1mxgk_92", B = "_disabled_1mxgk_110", E = "_wrapper_1mxgk_121", R = "_button_1mxgk_136", T = "_active_1mxgk_145", t = {
+  switch: "_switch_1mxgk_6",
+  slider: y,
+  s: I,
+  m: N,
+  l: S,
+  xl: j,
+  disabled: B,
+  wrapper: E,
+  button: R,
+  active: T
+}, K = ({
+  size: i = "m",
+  variant: w = "classic",
+  checked: l,
+  onChange: s,
+  children: _,
+  disabled: r = !1,
+  defaultChecked: h = !1,
+  icons: a = { left: "Table", right: "Rows" }
+}) => {
+  const o = l !== void 0, [p, n] = $(h), u = o ? l : p, d = (e) => {
+    o || n(e), s == null || s(e);
+  }, v = (e) => {
+    const f = e.target.checked;
+    r || (o || n(f), s == null || s(f));
+  };
+  b(() => {
+    o && n(l);
+  }, [l, o]);
+  const x = () => {
+    switch (i) {
+      case "s":
+        return 18;
+      case "m":
+        return 18;
+      case "l":
+        return 22;
+      case "xl":
+        return 26;
+      default:
+        return 18;
+    }
+  };
+  return w === "icon" ? /* @__PURE__ */ m("div", { className: `${t.switch} ${t[i]}`, children: [
+    /* @__PURE__ */ m("div", { className: `${t.wrapper} ${r ? t.disabled : ""}`, children: [
+      /* @__PURE__ */ c(
+        k,
+        {
+          mode: u ? "ghost" : "tertiary",
+          size: i,
+          onClick: () => d(!1),
+          disabled: r,
+          children: /* @__PURE__ */ c(g, { icon: a.left, size: x() })
+        }
+      ),
+      /* @__PURE__ */ c(
+        k,
+        {
+          mode: u ? "tertiary" : "ghost",
+          size: i,
+          onClick: () => d(!0),
+          disabled: r,
+          children: /* @__PURE__ */ c(g, { icon: a.right, size: x() })
+        }
+      )
+    ] }),
+    _
+  ] }) : /* @__PURE__ */ m("div", { className: `${t.switch} ${t[i]} ${r ? t.disabled : ""}`, children: [
+    /* @__PURE__ */ c(
+      "input",
+      {
+        type: "checkbox",
+        checked: p,
+        onChange: (e) => v(e),
+        disabled: r
+      }
+    ),
+    /* @__PURE__ */ c("span", { className: t.slider }),
+    _
+  ] });
+};
+export {
+  K as Switch
+};

package/dist/components/tabs/Tabs.d.ts

@@ -12,4 +12,8 @@ export interface TabsProps {
     /** Callback function to handle tab selection, receiving the selected tab's label */
     onTabSelect: (selectedItem: string | ReactNode) => void;
 }
+/**
+ * Tabs component that allows tab navigation with text, icons, or buttons.
+ * It includes a dynamic underline to show the active tab.
+ */
 export declare const Tabs: FC<TabsProps>;

package/dist/components/tabs/Tabs.js

@@ -1,8 +1,9 @@
 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 = {
+import '../../styles/index.css';import '../../styles/Tabs.css';/* empty css                    */
+import { Button as p } from "../button/Button.js";
+import { IconButton as B } from "../icon-button/IconButton.js";
+const N = "_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,16 +11,16 @@ import '../../styles/Tabs.css';const p = "_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: p,
+  underline: N,
   "flexHorizontal-center": "_flexHorizontal-center_udv7v_58",
   "flexHorizontal-left": "_flexHorizontal-left_udv7v_64",
   "flexHorizontal-right": "_flexHorizontal-right_udv7v_70"
-}, 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) => {
+}, E = ({ listItems: c, type: o, onTabSelect: v, defaultActiveTab: i = 0, position: m = "left" }) => {
+  const [l, b] = f(i), [x, h] = f({}), a = u(null), g = u(null), _ = u(new Array(c.length).fill(null)), d = (t) => {
     b(t), v(c[t]);
   }, z = (t) => {
-    if (i.current && t) {
-      const e = t.getBoundingClientRect(), s = i.current.getBoundingClientRect();
+    if (a.current && t) {
+      const e = t.getBoundingClientRect(), s = a.current.getBoundingClientRect();
       h({
         left: `${e.left - s.left}px`,
         width: `${e.width}px`
@@ -33,15 +34,15 @@ import '../../styles/Tabs.css';const p = "_underline_udv7v_50", n = {
     const t = _.current[l];
     t && z(t);
   }, [l]), $(() => {
-    b(a);
-  }, [a]), /* @__PURE__ */ H("div", { className: `tab ${n["tab-container"]} ${n[`tab-container-${o}`]}`, ref: i, children: [
+    b(i);
+  }, [i]), /* @__PURE__ */ H("div", { className: `tab ${n["tab-container"]} ${n[`tab-container-${o}`]}`, ref: a, children: [
     /* @__PURE__ */ r("div", { className: R, children: c.map((t, e) => /* @__PURE__ */ r(
       "div",
       {
         ref: (s) => _.current[e] = s,
         className: o === "button" && e === l ? n["selected-button"] : "",
         children: o === "icon" ? /* @__PURE__ */ r(
-          N,
+          B,
           {
             mode: "icon",
             size: "s",
@@ -50,7 +51,7 @@ import '../../styles/Tabs.css';const p = "_underline_udv7v_50", n = {
             children: t
           }
         ) : /* @__PURE__ */ r(
-          B,
+          p,
           {
             size: "s",
             label: t,
@@ -66,5 +67,5 @@ import '../../styles/Tabs.css';const p = "_underline_udv7v_50", n = {
   ] });
 };
 export {
-  y as Tabs
+  E as Tabs
 };

package/dist/components/tag/Tag.d.ts

@@ -15,4 +15,8 @@ export interface TagProps {
     /** A callback function to be called when the tag is clicked. */
     onClick?: () => void;
 }
+/**
+ * Tag component to display a label with customizable color, size, and content.
+ * It can also display a delete icon if `deletable` is true.
+ */
 export declare const Tag: FC<TagProps>;

package/dist/components/tag-counter/TagCounter.d.ts

@@ -2,7 +2,12 @@ import { FC } from 'react';
 import { Size } from '../interface.ts';
 
 export interface TagCounterProps {
+    /** The number label to be displayed inside the counter */
     label: number;
+    /** The size of the tag counter, which affects its styling. */
     size?: Size;
 }
+/**
+ * TagCounter component to display a counter label with customizable size.
+ */
 export declare const TagCounter: FC<TagCounterProps>;

package/dist/components/theme/variables_dark.d.ts

@@ -213,4 +213,13 @@ export declare const variables_dark: {
     '--marker-cluster-background': string;
     '--marker-cluster-icon-text': string;
     '--marker-cluster-caret': string;
+    '--switch-diasbled-bullet': string;
+    '--switch-diasbled-background': string;
+    '--switch-default-off-bullet': string;
+    '--switch-default-off-background': string;
+    '--switch-default-on-bullet': string;
+    '--switch-default-on-background': string;
+    '--archive-background-tab': string;
+    '--archive-border': string;
+    '--archive-icon-text-tab': string;
 };

package/dist/components/theme/variables_dark.js

@@ -212,7 +212,16 @@ const r = {
   "--marker-cluster-border": "var(--color-purple-trans-50)",
   "--marker-cluster-background": "var(--color-purple-dark-900)",
   "--marker-cluster-icon-text": "var(--color-light-100)",
-  "--marker-cluster-caret": "var(--color-purple-dark-900)"
+  "--marker-cluster-caret": "var(--color-purple-dark-900)",
+  "--switch-diasbled-bullet": "var(--color-purple-dark-950)",
+  "--switch-diasbled-background": "var(--color-light-20)",
+  "--switch-default-off-bullet": "var(--color-purple-dark-950)",
+  "--switch-default-off-background": "var(--color-purple-trans-40)",
+  "--switch-default-on-bullet": "var(--color-purple-dark-950)",
+  "--switch-default-on-background": "var(--color-light-100)",
+  "--archive-background-tab": "var(--color-purple-dark-100)",
+  "--archive-border": "var(--color-purple-dark-100)",
+  "--archive-icon-text-tab": "var(--color-purple-dark-950)"
 };
 export {
   r as variables_dark

package/dist/components/theme/variables_light.d.ts

@@ -213,4 +213,13 @@ export declare const variables_light: {
     '--marker-cluster-background': string;
     '--marker-cluster-icon-text': string;
     '--marker-cluster-caret': string;
+    '--switch-diasbled-bullet': string;
+    '--switch-diasbled-background': string;
+    '--switch-default-off-bullet': string;
+    '--switch-default-off-background': string;
+    '--switch-default-on-bullet': string;
+    '--switch-default-on-background': string;
+    '--archive-background-tab': string;
+    '--archive-border': string;
+    '--archive-icon-text-tab': string;
 };

package/dist/components/theme/variables_light.js

@@ -212,7 +212,16 @@ const r = {
   "--marker-cluster-border": "var(--color-sable-900)",
   "--marker-cluster-background": "var(--color-sable-950)",
   "--marker-cluster-icon-text": "var(--color-light-100)",
-  "--marker-cluster-caret": "var(--color-sable-950)"
+  "--marker-cluster-caret": "var(--color-sable-950)",
+  "--switch-diasbled-bullet": "var(--color-light-100)",
+  "--switch-diasbled-background": "var(--color-dark-20)",
+  "--switch-default-off-bullet": "var(--color-light-100)",
+  "--switch-default-off-background": "var(--color-sable-trans-40)",
+  "--switch-default-on-bullet": "var(--color-light-100)",
+  "--switch-default-on-background": "var(--color-purple-dark-950)",
+  "--archive-background-tab": "var(--color-purple-dark-950)",
+  "--archive-border": "var(--color-purple-dark-950)",
+  "--archive-icon-text-tab": "var(--color-light-100)"
 };
 export {
   r as variables_light

package/dist/components/title/Title.d.ts

@@ -6,4 +6,7 @@ export interface TitleProps {
     /** Optional additional content to be displayed alongside the title, such as icons or other elements. */
     children?: ReactNode;
 }
+/**
+ * Title component to display a main title with optional additional content.
+ */
 export declare const Title: FC<TitleProps>;

package/dist/components/tooltip/Tooltip.d.ts

@@ -13,5 +13,10 @@ export type TooltipProps = {
     /** How large padding is. */
     padding?: SizeTooltip;
 };
+/**
+ * Tooltip component that shows additional information when hovering over an element.
+ * The tooltip can be positioned in various ways relative to the element, and its content
+ * can be customized. It also allows control over the gap and padding around the tooltip.
+ */
 export declare const Tooltip: FC<TooltipProps>;
 export default Tooltip;