@ilo-org/react 0.17.8 → 0.18.1

package/lib/esm/_store/SearchField-chunk-D3wlTvCH.js

@@ -0,0 +1,64 @@
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
+import { forwardRef as v, useState as w } from "react";
+import { c as x } from "./index-chunk-0LeqwHm8.js";
+import { u as F } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { I as g } from "./Input-chunk-p-3N8OO4.js";
+import { I as j } from "./Icon-chunk-x0E_KQyQ.js";
+const B = v(
+  ({ action: f, callback: o, className: b, input: e }, C) => {
+    const [c, d] = w(""), { prefix: a } = F(), l = `${a}--searchfield`, S = `${l}--button`, y = `${l}--clear-button ${c.trim() !== "" && "show"}`, $ = `${a}--fieldset`, I = x(b, {
+      [l]: !0,
+      haslabel: e == null ? void 0 : e.label
+    }), N = (r) => {
+      o && o(r);
+    }, k = () => {
+      d("");
+    }, t = (r) => {
+      d(r.target.value);
+    }, m = !!(e != null && e.type);
+    if (!m)
+      throw new Error("SearchField: Input must have type prop");
+    return m ? /* @__PURE__ */ h("form", { className: I, action: f, children: [
+      /* @__PURE__ */ h("div", { className: $, children: [
+        /* @__PURE__ */ s(
+          g,
+          {
+            id: e == null ? void 0 : e.id,
+            name: e == null ? void 0 : e.name,
+            disabled: e == null ? void 0 : e.disabled,
+            callback: t,
+            error: e == null ? void 0 : e.error,
+            helper: e == null ? void 0 : e.helper,
+            label: e == null ? void 0 : e.label,
+            placeholder: e == null ? void 0 : e.placeholder,
+            type: e == null ? void 0 : e.type,
+            value: c,
+            className: `${a}--input`,
+            ref: C
+          }
+        ),
+        /* @__PURE__ */ s(
+          "span",
+          {
+            onClick: k,
+            className: y,
+            role: "presentation",
+            children: /* @__PURE__ */ s(j, { name: "close", hidden: !0 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ s(
+        "input",
+        {
+          className: S,
+          disabled: e == null ? void 0 : e.disabled,
+          type: "submit",
+          onClick: N
+        }
+      )
+    ] }) : null;
+  }
+), R = B;
+export {
+  R as S
+};

package/lib/esm/_store/SearchField-entry-BhsVXKLn.js

@@ -0,0 +1,4 @@
+import { S as a } from "./SearchField-chunk-D3wlTvCH.js";
+export {
+  a as SearchField
+};

package/lib/esm/_store/SocialMedia-chunk-DdOAr_Gj.js

@@ -0,0 +1,32 @@
+import { jsxs as N, jsx as a } from "react/jsx-runtime";
+import { c as t } from "./index-chunk-0LeqwHm8.js";
+import { u as S } from "./useGlobalSettings-chunk-gkijV3S1.js";
+const b = ({
+  className: n,
+  theme: r = "light",
+  justify: m = "start",
+  headline: e,
+  icons: $,
+  iconSize: _ = "normal"
+}) => {
+  const { prefix: h } = S(), s = `${h}--social-media`, d = `${s}__theme__${r}`, u = `${s}__justify__${m}`, C = t(s, d, u, n), f = `${s}--headline`, i = `${s}--list`, c = `${i}--item`, o = `${c}--icon`, p = `${c}--icon__${_}`;
+  return /* @__PURE__ */ N("div", { className: C, children: [
+    e && /* @__PURE__ */ a("h5", { className: f, children: e }),
+    /* @__PURE__ */ a("ul", { className: i, children: $.map((l) => /* @__PURE__ */ a("li", { className: c, children: /* @__PURE__ */ a(
+      "a",
+      {
+        title: l.label,
+        className: t(
+          o,
+          p,
+          `${o}__${l.icon}`
+        ),
+        href: l.url,
+        children: l.label
+      }
+    ) }, l.url)) })
+  ] });
+}, y = b;
+export {
+  y as S
+};

package/lib/esm/_store/SocialMedia-entry-BllaQbO-.js

@@ -0,0 +1,54 @@
+import { S as t } from "./SocialMedia-chunk-DdOAr_Gj.js";
+const o = {
+  headline: "Follow us on social media",
+  theme: "light",
+  justify: "start",
+  iconSize: "normal",
+  icons: [
+    {
+      icon: "facebook",
+      url: "https://www.facebook.com/ilo.org",
+      label: "Facebook"
+    },
+    {
+      icon: "x",
+      url: "https://x.com/ilo",
+      label: "x"
+    },
+    {
+      icon: "instagram",
+      url: "https://www.instagram.com/ilo.org/",
+      label: "Instagram"
+    },
+    {
+      icon: "linkedin",
+      url: "https://www.linkedin.com/company/international-labour-organization-ilo",
+      label: "LinkedIn"
+    },
+    {
+      icon: "youtube",
+      url: "https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA",
+      label: "YouTube"
+    },
+    {
+      icon: "tiktok",
+      url: "https://www.tiktok.com/@ilo",
+      label: "TikTok"
+    },
+    {
+      icon: "flickr",
+      url: "https://www.flickr.com/photos/ilopictures/albums",
+      label: "TikTok"
+    }
+  ]
+};
+({
+  ...o
+});
+({
+  ...o
+});
+export {
+  t as SocialMedia,
+  o as defaultArgs
+};

package/lib/esm/_store/TableOfContents-chunk-BXnS8D2s.js

@@ -0,0 +1,12 @@
+import { jsx as e } from "react/jsx-runtime";
+import { c } from "./index-chunk-0LeqwHm8.js";
+import { u as i } from "./useGlobalSettings-chunk-gkijV3S1.js";
+const m = ({ className: t, items: a }) => {
+  const { prefix: n } = i(), s = `${n}--table-of-contents`, r = c(t, {
+    [s]: !0
+  });
+  return /* @__PURE__ */ e("nav", { className: r, children: /* @__PURE__ */ e("ul", { className: `${s}--list`, children: a && a.map((l, o) => /* @__PURE__ */ e("li", { className: `${s}--list--item`, children: /* @__PURE__ */ e("a", { className: `${s}--link`, href: l.href, children: l.label }) }, o)) }) });
+}, p = m;
+export {
+  p as T
+};

package/lib/esm/_store/TableOfContents-entry-DHXKt1NR.js

@@ -0,0 +1,4 @@
+import { T as t } from "./TableOfContents-chunk-BXnS8D2s.js";
+export {
+  t as TableOfContents
+};

package/lib/esm/_store/Tabs-chunk-D2k0m68V.js

@@ -0,0 +1,40 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { useState as $ } from "react";
+import { u as h } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { c as p } from "./index-chunk-0LeqwHm8.js";
+import { I as d } from "./Icon-chunk-x0E_KQyQ.js";
+const f = ({ items: c }) => {
+  const [l, n] = $(0), i = (s, e) => {
+    n(s), e.preventDefault();
+  }, { prefix: r } = h(), a = `${r}--tabs`, m = p(a);
+  return /* @__PURE__ */ o("div", { className: `${m} tabs--js`, children: [
+    /* @__PURE__ */ t("ul", { className: `${a}--selection`, role: "tablist", children: c.map((s, e) => /* @__PURE__ */ t(
+      "li",
+      {
+        role: "tab",
+        className: `${a}--selection--item ${l === e ? "active" : ""}`,
+        onClick: (b) => i(e, b),
+        children: /* @__PURE__ */ o(
+          "a",
+          {
+            href: `#tab--${e}`,
+            className: `${a}--selection--button${s.icon ? " icon" : ""}`,
+            role: "tab",
+            "aria-controls": `tab--${e}`,
+            "aria-selected": e === l,
+            title: s.label,
+            children: [
+              /* @__PURE__ */ t("span", { className: `${a}--selection--label`, children: s.label }),
+              s.icon && /* @__PURE__ */ t(d, { name: s.icon.name, hidden: s.icon.hidden })
+            ]
+          }
+        )
+      },
+      `#tab--${e}`
+    )) }),
+    /* @__PURE__ */ t("div", { className: `${a}--content`, children: c[l].content })
+  ] });
+}, j = f;
+export {
+  j as T
+};

package/lib/esm/_store/Tabs-entry-B3sg3VMU.js

@@ -0,0 +1,4 @@
+import { T as r } from "./Tabs-chunk-D2k0m68V.js";
+export {
+  r as Tabs
+};

package/lib/esm/_store/Tag-chunk-BxCaTFBz.js

@@ -0,0 +1,65 @@
+import { jsx as t, Fragment as g, jsxs as x } from "react/jsx-runtime";
+import { createContext as T, useContext as I } from "react";
+import { c as _ } from "./index-chunk-0LeqwHm8.js";
+import { u as S } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { I as j } from "./Icon-chunk-x0E_KQyQ.js";
+import { e as w } from "./checkArrayDuplicates-chunk-C7cf0TQw.js";
+const A = T({}), B = ({
+  className: d,
+  children: n,
+  id: e,
+  url: h,
+  type: s,
+  callback: l,
+  ...a
+}) => {
+  const { prefix: m } = S(), { activeItems: u, setActiveItems: C, allowMultipleActive: b } = I(A), i = u.indexOf(e) > -1, c = `${m}--tag`, f = `${m}--tag-set__item`, v = s, r = _(d, {
+    [c]: !0,
+    [`${c}--active`]: i,
+    [`${c}--${s}`]: s,
+    "icon icon__position--right": !0
+  });
+  let p = i;
+  const $ = (o) => {
+    C(
+      w({
+        id: e,
+        itemStatuses: u,
+        allowMultipleExpanded: b
+      })
+    ), p = !1, l && l(o);
+  };
+  return /* @__PURE__ */ t(g, { children: v === "button" ? /* @__PURE__ */ t(g, { children: (() => {
+    let o;
+    return p && (o = /* @__PURE__ */ t("li", { className: f, children: /* @__PURE__ */ x(
+      "button",
+      {
+        type: "button",
+        className: r,
+        onClick: (N) => $(N),
+        id: e,
+        ...a,
+        children: [
+          n,
+          /* @__PURE__ */ t(j, { name: "close", hidden: !0 })
+        ]
+      }
+    ) })), o;
+  })() }) : /* @__PURE__ */ x("li", { className: f, children: [
+    s === "anchor" && /* @__PURE__ */ t(
+      "a",
+      {
+        className: r,
+        href: i ? h : "",
+        id: e,
+        ...a,
+        children: n
+      }
+    ),
+    s === "display" && /* @__PURE__ */ t("span", { className: r, id: e, ...a, children: n })
+  ] }) });
+}, z = B;
+export {
+  z as T,
+  A as a
+};

package/lib/esm/_store/Tag-entry-Cr5XkVR9.js

@@ -0,0 +1,45 @@
+import { a as h } from "./Tag-chunk-BxCaTFBz.js";
+import { T as J } from "./Tag-chunk-BxCaTFBz.js";
+import { jsx as e } from "react/jsx-runtime";
+import { c as x } from "./index-chunk-0LeqwHm8.js";
+import { useState as C, useEffect as T, Children as b } from "react";
+import { u as d } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { c as y } from "./checkArrayDuplicates-chunk-C7cf0TQw.js";
+const E = ({
+  className: n,
+  children: o,
+  onButtonClick: m,
+  defaultTagActive: s = [],
+  allowMultipleActive: r = !0,
+  ...c
+}) => {
+  const { prefix: i } = d(), f = `${i}--tag-set`, [g, a] = C([]), p = JSON.stringify(s);
+  if (T(() => {
+    const t = r ? s : s.length > 0 ? [s[0]] : s;
+    a(t);
+  }, [p, r]), o) {
+    const t = [];
+    b.forEach(o, (S) => {
+      t.push(S.props.id);
+    }), y(t) && console.warn("Warning: Tags must have unique ids.");
+  }
+  const u = x(n, {
+    [f]: !0
+  });
+  return /* @__PURE__ */ e(
+    h.Provider,
+    {
+      value: {
+        activeItems: g,
+        setActiveItems: a,
+        allowMultipleActive: r,
+        onButtonClick: m
+      },
+      children: /* @__PURE__ */ e("ul", { className: u, ...c, children: o })
+    }
+  );
+}, q = E;
+export {
+  J as Tag,
+  q as TagSet
+};

package/lib/esm/_store/TextInput-entry-BTZVvumC.js

@@ -0,0 +1,123 @@
+import { jsx as n } from "react/jsx-runtime";
+import p from "react";
+import { c as T } from "./index-chunk-0LeqwHm8.js";
+import { u as w } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { u as g, F as I } from "./FormControl-chunk-D_3t65GG.js";
+const _ = p.forwardRef(
+  ({
+    onChange: t,
+    onBlur: a,
+    error: o,
+    id: r,
+    name: s,
+    placeholder: l,
+    required: i,
+    pattern: c,
+    disabled: u = !1,
+    type: m = "text"
+  }, h) => {
+    const { prefix: b } = w(), f = g(), { ariaDescribedBy: x } = f, d = `${b}--text-input`, y = T(d, {
+      [`${d}__error`]: o
+    });
+    return /* @__PURE__ */ n(
+      "input",
+      {
+        ref: h,
+        id: r || s,
+        name: s,
+        onChange: t,
+        onBlur: a,
+        disabled: u,
+        placeholder: l,
+        required: i,
+        type: m,
+        className: y,
+        pattern: c,
+        "aria-describedby": x
+      }
+    );
+  }
+), C = p.forwardRef((t, a) => {
+  const { style: o, inputStyle: r, className: s, ...l } = t, i = t.id ? t.id : t.name;
+  return /* @__PURE__ */ n(
+    I,
+    {
+      fieldId: i,
+      style: o,
+      className: s,
+      ...l,
+      children: /* @__PURE__ */ n(_, { ref: a, style: r, ...l })
+    }
+  );
+}), P = C, e = {
+  disabled: !1,
+  errorMessage: "This is an error message",
+  error: !1,
+  style: { width: "100%" },
+  id: "text-input",
+  label: "Insert your name here",
+  labelPlacement: "top",
+  labelSize: "medium",
+  name: "text",
+  placeholder: "This is a text field",
+  required: !1,
+  type: "text"
+}, S = {
+  ...e,
+  disabled: !0,
+  placeholder: "Disabled Text Field"
+}, E = {
+  ...e,
+  placeholder: "This has a helper text"
+}, F = {
+  ...e,
+  placeholder: "This has an error",
+  error: !0
+}, j = {
+  ...e,
+  placeholder: "This has an tooltip",
+  tooltip: "This is a tooltip"
+}, q = {
+  ...e,
+  label: "Enter your email address",
+  placeholder: "my@email.com",
+  type: "email",
+  id: "email-input"
+}, M = {
+  ...e,
+  label: "Enter your password",
+  placeholder: "Must be 8 digits long",
+  type: "password",
+  id: "password-input"
+}, R = {
+  ...e,
+  name: "tel",
+  label: "Enter your telephone number",
+  placeholder: "###-###-####",
+  required: !1,
+  type: "tel",
+  pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}"
+}, $ = {
+  ...e,
+  label: "Enter website address",
+  id: "url-input",
+  name: "url",
+  placeholder: "https://www.example.com",
+  required: !1,
+  type: "url"
+}, v = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  basic: e,
+  email: q,
+  haserror: F,
+  hashelper: E,
+  hastooltip: j,
+  isdisabled: S,
+  password: M,
+  telephone: R,
+  url: $
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  P as TextInput,
+  v as TextInputArgs
+};

package/lib/esm/_store/Textarea-chunk-BCW6ZV8n.js

@@ -0,0 +1,38 @@
+import { jsx as n } from "react/jsx-runtime";
+import i from "react";
+import { c as b } from "./index-chunk-0LeqwHm8.js";
+import { u } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { u as C, F as y } from "./FormControl-chunk-D_3t65GG.js";
+const F = i.forwardRef(
+  ({ error: e, className: s, name: r, id: t, ...o }, a) => {
+    const { prefix: l } = u(), m = C(), { ariaDescribedBy: d } = m, c = `${l}--textarea`, f = `${c}__error`, x = b(c, s, {
+      [f]: e
+    });
+    return /* @__PURE__ */ n(
+      "textarea",
+      {
+        ref: a,
+        className: x,
+        name: r,
+        id: t || r,
+        "aria-describedby": d,
+        ...o
+      }
+    );
+  }
+), L = i.forwardRef((e, s) => {
+  const { style: r, inputStyle: t, className: o, ...a } = e, l = e.id ? e.id : e.name;
+  return /* @__PURE__ */ n(
+    y,
+    {
+      fieldId: l,
+      style: r,
+      className: o,
+      ...a,
+      children: /* @__PURE__ */ n(F, { ref: s, style: t, ...a })
+    }
+  );
+}), N = L;
+export {
+  N as L
+};

package/lib/esm/_store/Textarea-entry-CFe0s_hM.js

@@ -0,0 +1,28 @@
+import { L as i } from "./Textarea-chunk-BCW6ZV8n.js";
+const r = "It was a cold day in April and the clocks were striking thirteen....", e = {
+  id: "textarea",
+  disabled: !1,
+  name: "textarea",
+  placeholder: r,
+  required: !1,
+  spellcheck: !1,
+  label: "Insert your life story here",
+  labelPlacement: "top",
+  labelSize: "medium",
+  style: { width: "100%" },
+  errorMessage: "This is an error message"
+}, a = {
+  ...e,
+  error: !0
+}, s = {
+  ...e,
+  disabled: !0
+}, t = {
+  basic: e,
+  haserror: a,
+  disabled: s
+};
+export {
+  i as Textarea,
+  t as TextareaArgs
+};

package/lib/esm/_store/Toggle-entry-CehJKItc.js

@@ -0,0 +1,122 @@
+import { jsxs as z, jsx as a } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { u as S } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { c as $ } from "./index-chunk-0LeqwHm8.js";
+import { u as j, F as D } from "./FormControl-chunk-D_3t65GG.js";
+const v = d(
+  ({
+    size: s = "medium",
+    error: c = !1,
+    disabled: o = !1,
+    defaultChecked: i = !1,
+    required: n = !1,
+    id: r,
+    name: l,
+    onChange: g,
+    onBlur: u,
+    onClick: f,
+    checked: h,
+    className: b
+  }, p) => {
+    const { prefix: C } = S(), _ = j(), { ariaDescribedBy: T } = _, k = !o && !!c, t = `${C}--input--toggle`, y = `${t}--slider`, x = $(
+      t,
+      b,
+      `${t}__size__${s}`,
+      [
+        { [`${t}__error`]: k },
+        { [`${t}__disabled`]: o }
+      ]
+    );
+    return /* @__PURE__ */ z("div", { className: x, children: [
+      /* @__PURE__ */ a(
+        "input",
+        {
+          ref: p,
+          checked: h,
+          disabled: o,
+          defaultChecked: i,
+          name: l,
+          id: r || l,
+          type: "checkbox",
+          role: "switch",
+          required: n,
+          onChange: g,
+          onBlur: u,
+          onClick: f,
+          "aria-describedby": T
+        }
+      ),
+      /* @__PURE__ */ a("span", { className: y })
+    ] });
+  }
+), w = d(
+  (s, c) => {
+    const o = s.id ? s.id : s.name, { style: i, inputStyle: n, className: r, ...l } = s;
+    return /* @__PURE__ */ a(
+      D,
+      {
+        fieldId: o,
+        style: i,
+        className: r,
+        ...l,
+        children: /* @__PURE__ */ a(v, { ref: c, style: n, ...l })
+      }
+    );
+  }
+), J = w, e = {
+  defaultChecked: !1,
+  errorMessage: "Invalid option",
+  name: "my-toggle",
+  size: "medium",
+  label: "Show details",
+  labelPlacement: "end",
+  labelSize: "small"
+}, F = {
+  ...e,
+  defaultChecked: !0
+}, L = {
+  ...e,
+  disabled: !0
+}, m = {
+  ...e,
+  helper: "This is a helper text"
+}, M = {
+  ...m,
+  tooltip: "This is a tooltip"
+}, N = {
+  ...e,
+  error: !0
+}, E = {
+  ...e,
+  defaultChecked: !0
+}, I = {
+  ...e,
+  onClick: () => console.log("clicked"),
+  checked: !0
+}, O = {
+  ...e,
+  size: "large"
+}, P = {
+  ...e,
+  size: "medium"
+}, A = {
+  ...e,
+  size: "small"
+}, K = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Checked: F,
+  Controlled: I,
+  Default: e,
+  DefaultChecked: E,
+  Disabled: L,
+  Error: N,
+  Helper: m,
+  Large: O,
+  Medium: P,
+  Small: A,
+  Tooltip: M
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  J as Toggle,
+  K as ToggleArgs
+};