skillgrid 0.0.80 → 0.0.82

package/dist/components/InputBase/InputBase.js

@@ -0,0 +1,159 @@
+import { jsx as j } from "react/jsx-runtime";
+import { forwardRef as ta, useState as ca, useCallback as y, useEffect as fa } from "react";
+import { Input as C } from "./Input.js";
+import d from "./InputBase.module.css.js";
+import { clsx as ma } from "clsx";
+import { useCompatId as da } from "../../hooks/useCompatId.js";
+const xa = ta(
+  ({
+    component: s = "input",
+    size: V = "L",
+    className: E,
+    error: r = !1,
+    disabled: f = !1,
+    loading: c = !1,
+    placeholder: L,
+    showLabel: v = !0,
+    labelClassName: N,
+    helper: R,
+    prefix: S,
+    suffix: T,
+    id: W,
+    onFocus: w,
+    onBlur: I,
+    onKeyDown: X,
+    onSuffixClick: g,
+    onChange: h,
+    value: m = "",
+    wrapperProps: q,
+    wrapperStyles: A,
+    floatingLabelStyles: D,
+    prefixStyles: G,
+    suffixStyles: H,
+    textareaStyles: J,
+    labelProps: M,
+    helperProps: O,
+    showLimit: Q = !1,
+    maxLength: b,
+    inputProps: a,
+    hint: Y,
+    showHint: Z = !1,
+    showHintOnEmpty: _ = !1,
+    truncate: B = !1,
+    resize: F,
+    showGrip: z = !1,
+    ...o
+  }, u) => {
+    const n = da("input-base"), x = W || n, [i, K] = ca(m), U = m !== void 0 ? m : i, $ = (U || "").length > 0, k = U || "", P = v && (V === "XL" || s === "textarea") && !S, p = y(
+      (e) => {
+        var l;
+        f || c || (w == null || w(), (l = a == null ? void 0 : a.onFocus) == null || l.call(
+          a,
+          e
+        ));
+      },
+      [w, a, f, c]
+    ), aa = y(
+      (e) => {
+        var l;
+        if (e.key === "Tab") {
+          const t = e.target.closest(`.${d.wrapper}`);
+          t && t.classList.add(d.tabFocused);
+        }
+        (l = a == null ? void 0 : a.onKeyUp) == null || l.call(
+          a,
+          e
+        );
+      },
+      [a]
+    ), ea = y(
+      (e) => {
+        var t;
+        const l = e.target.closest(`.${d.wrapper}`);
+        l && l.classList.remove(d.tabFocused), I == null || I(), (t = a == null ? void 0 : a.onBlur) == null || t.call(
+          a,
+          e
+        );
+      },
+      [I, a]
+    ), la = y(
+      (e) => {
+        var t;
+        if (f || c) return;
+        const l = e.target.value;
+        K(l), h == null || h(l, e), (t = a == null ? void 0 : a.onChange) == null || t.call(
+          a,
+          e
+        );
+      },
+      [h, a, f, c]
+    );
+    return fa(() => {
+      K(m || "");
+    }, [m]), /* @__PURE__ */ j(
+      C.Wrapper,
+      {
+        size: V,
+        error: r,
+        disabled: f || c,
+        loading: c,
+        className: ma(E, s === "textarea" && d["textarea-wrapper"]),
+        wrapperProps: q,
+        wrapperStyles: A,
+        floatingLabelStyles: D,
+        prefixStyles: G,
+        suffixStyles: H,
+        labelProps: M,
+        helperProps: O,
+        showLimit: Q,
+        maxLength: b,
+        hint: Y,
+        showHint: Z,
+        showHintOnEmpty: _,
+        prefix: S,
+        suffix: T,
+        onSuffixClick: g,
+        placeholder: L,
+        showLabel: v,
+        labelClassName: N,
+        hasValue: $,
+        helper: R,
+        id: x,
+        value: k,
+        showGrip: z,
+        resize: F,
+        ...o,
+        children: /* @__PURE__ */ j(
+          C,
+          {
+            ref: u,
+            component: s,
+            size: V,
+            value: k,
+            placeholder: L,
+            disabled: f,
+            loading: c,
+            onFocus: p,
+            onBlur: ea,
+            onChange: la,
+            onKeyDown: X,
+            onKeyUp: aa,
+            maxLength: b,
+            truncate: B,
+            "data-empty": !$,
+            shouldShowFloatingLabelClass: P,
+            style: s === "textarea" ? J : void 0,
+            "aria-invalid": !!r,
+            "aria-errormessage": r ? `${x}-error` : void 0,
+            id: x,
+            resize: F,
+            ...a
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  xa as InputBase
+};

package/dist/components/InputBase/InputBase.module.css.js

@@ -0,0 +1,96 @@
+import '../../assets/components/InputBase/InputBase.module-DXxaE94N.css';const o = "_base_e8o7z_1", _ = "_content_e8o7z_1", e = "_background_e8o7z_1", t = "_button_e8o7z_1", n = "_link_e8o7z_1", a = "_input_e8o7z_92", i = "_suffix_e8o7z_1", s = "_prefix_e8o7z_1", c = "_tooltip_e8o7z_1", r = "_hint_e8o7z_781", l = "_dropdown_e8o7z_1", z = "_popover_e8o7z_1", d = "_modalBackdrop_e8o7z_1", p = "_modal_e8o7z_1", f = "_overlay_e8o7z_1", u = "_drawer_e8o7z_1", b = "_notification_e8o7z_1", h = "_alert_e8o7z_1", g = "_toast_e8o7z_1", L = "_loading_e8o7z_285", x = "_error_e8o7z_246", w = "_critical_e8o7z_1", m = "_inputBase_e8o7z_92", S = "_wrapper_e8o7z_102", k = "_gripHandle_e8o7z_180", v = "_tabFocused_e8o7z_253", B = "_disabled_e8o7z_278", M = "_label_e8o7z_295", X = "_S_e8o7z_308", y = "_M_e8o7z_314", F = "_XL_e8o7z_321", H = "_leftSection_e8o7z_328", j = "_rightSection_e8o7z_340", q = "_helper_e8o7z_378", A = "_floatingLabel_e8o7z_406", C = "_focused_e8o7z_471", D = "_filled_e8o7z_472", E = "_L_e8o7z_513", G = "_characterLimit_e8o7z_555", I = "_textarea_e8o7z_120", J = "_truncate_e8o7z_696", K = {
+  base: o,
+  content: _,
+  background: e,
+  button: t,
+  link: n,
+  input: a,
+  suffix: i,
+  prefix: s,
+  tooltip: c,
+  hint: r,
+  dropdown: l,
+  popover: z,
+  modalBackdrop: d,
+  modal: p,
+  overlay: f,
+  drawer: u,
+  notification: b,
+  alert: h,
+  toast: g,
+  loading: L,
+  error: x,
+  critical: w,
+  inputBase: m,
+  wrapper: S,
+  "textarea-wrapper": "_textarea-wrapper_e8o7z_120",
+  gripHandle: k,
+  tabFocused: v,
+  disabled: B,
+  label: M,
+  S: X,
+  M: y,
+  XL: F,
+  leftSection: H,
+  rightSection: j,
+  helper: q,
+  floatingLabel: A,
+  focused: C,
+  filled: D,
+  L: E,
+  characterLimit: G,
+  textarea: I,
+  "size-S": "_size-S_e8o7z_635",
+  "size-M": "_size-M_e8o7z_645",
+  "size-L": "_size-L_e8o7z_651",
+  "size-XL": "_size-XL_e8o7z_657",
+  "with-floating-label": "_with-floating-label_e8o7z_664",
+  truncate: J,
+  "has-hint": "_has-hint_e8o7z_802",
+  "has-suffix": "_has-suffix_e8o7z_808",
+  "has-limit": "_has-limit_e8o7z_831"
+};
+export {
+  E as L,
+  y as M,
+  X as S,
+  F as XL,
+  h as alert,
+  e as background,
+  o as base,
+  t as button,
+  G as characterLimit,
+  _ as content,
+  w as critical,
+  K as default,
+  B as disabled,
+  u as drawer,
+  l as dropdown,
+  x as error,
+  D as filled,
+  A as floatingLabel,
+  C as focused,
+  k as gripHandle,
+  q as helper,
+  r as hint,
+  a as input,
+  m as inputBase,
+  M as label,
+  H as leftSection,
+  n as link,
+  L as loading,
+  p as modal,
+  d as modalBackdrop,
+  b as notification,
+  f as overlay,
+  z as popover,
+  s as prefix,
+  j as rightSection,
+  i as suffix,
+  v as tabFocused,
+  I as textarea,
+  g as toast,
+  c as tooltip,
+  J as truncate,
+  S as wrapper
+};

package/dist/components/InputBase/assets/GripIcon.js

@@ -0,0 +1,29 @@
+import { jsx as e } from "react/jsx-runtime";
+const r = ({
+  width: l = 8,
+  height: C = 8,
+  className: o,
+  color: n = "#AABBCA"
+}) => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: l,
+    height: C,
+    viewBox: "0 0 8 8",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: o,
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M6.10178 0.236172C6.41679 -0.0787239 6.93824 -0.0787239 7.25325 0.236172C7.56826 0.551067 7.56826 1.07227 7.25325 1.38717L1.38772 7.25074C1.22479 7.41362 1.01837 7.48963 0.811988 7.48963C0.605604 7.48963 0.399189 7.41362 0.236255 7.25074C-0.0787516 6.93584 -0.0787516 6.41464 0.236255 6.09974L6.10178 0.236172ZM6.61276 4.19954C6.92777 3.88464 7.44895 3.88464 7.76396 4.19954C8.07897 4.52529 8.07897 5.03564 7.76396 5.35053L5.35256 7.76111C5.18963 7.92399 4.98321 8 4.77683 8C4.57045 8 4.36403 7.92399 4.2011 7.76111C3.88609 7.44622 3.88609 6.92501 4.2011 6.61012L6.61276 4.19954Z",
+        fill: n
+      }
+    )
+  }
+);
+export {
+  r as GripIcon
+};

package/dist/components/InputBase/assets/XIcon.js

@@ -0,0 +1,48 @@
+import { jsx as t } from "react/jsx-runtime";
+const d = ({
+  className: e = "",
+  style: i,
+  size: o = "md",
+  color: h = "currentColor",
+  onClick: x,
+  ...s
+}) => {
+  const n = {
+    display: "inline-block",
+    color: h,
+    ...{
+      xxxs: { width: "8px", height: "8px" },
+      xxs: { width: "12px", height: "12px" },
+      xs: { width: "20px", height: "20px" },
+      sm: { width: "24px", height: "24px" },
+      md: { width: "32px", height: "32px" },
+      lg: { width: "40px", height: "40px" }
+    }[o],
+    ...i
+  };
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      className: e,
+      style: n,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      onClick: x,
+      ...s,
+      children: /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M12 4L4 12M4 4L12 12",
+          stroke: "currentColor",
+          strokeWidth: "1.33333",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+};
+export {
+  d as XIcon
+};

package/dist/components/InputBase/lib/constants.js

@@ -0,0 +1,4 @@
+const o = 30;
+export {
+  o as MAX_HINT_LENGTH
+};

package/dist/components/InputBase/lib/useGripResize.js

@@ -0,0 +1,21 @@
+import { useCallback as h } from "react";
+import v from "../InputBase.module.css.js";
+const w = (o, s, r, t) => ({ handleGripMouseDown: h(
+  (e) => {
+    if (!o || s || r || !(t === "fixed" || !t)) return;
+    e.preventDefault(), e.stopPropagation();
+    const n = e.currentTarget.closest(`.${v.wrapper}`);
+    if (!n) return;
+    const m = e.clientY, u = n.clientHeight, c = (a) => {
+      const p = a.clientY - m, l = Math.min(100, u), d = Math.max(l, u + p);
+      n.style.height = `${d}px`;
+    }, i = () => {
+      document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", i);
+    };
+    document.addEventListener("mousemove", c), document.addEventListener("mouseup", i);
+  },
+  [o, s, r, t]
+) });
+export {
+  w as useGripResize
+};

package/dist/components/InputBase/lib/useInputSync.js

@@ -0,0 +1,15 @@
+import { useRef as f, useEffect as c } from "react";
+const a = (e, t) => {
+  const r = f(null), u = f(null);
+  return c(() => {
+    const n = t === "textarea" ? r.current : u.current;
+    n && n.value !== e && (n.value = e || "");
+  }, [e, t]), {
+    textareaRef: r,
+    inputRef: u,
+    currentRef: t === "textarea" ? r : u
+  };
+};
+export {
+  a as useInputSync
+};

package/dist/components/InputBase/lib/useTextareaResize.js

@@ -0,0 +1,19 @@
+import { useEffect as e } from "react";
+import i from "../InputBase.module.css.js";
+const h = (c, t, r) => {
+  const o = () => {
+    if (!r.current || t !== "hug") return;
+    const n = r.current.scrollTop;
+    if (r.current.style.setProperty("height", "auto", "important"), !c) return;
+    const u = r.current.scrollHeight + "px";
+    r.current.style.setProperty("height", u, "important"), r.current.scrollTop = n;
+    const s = r.current.closest(`.${i.wrapper}`);
+    s && (s.setAttribute("data-resize", "hug"), s.setAttribute("data-show-grip", "false"));
+  };
+  return e(o, [c, t]), e(() => {
+    t === "hug" && r.current && o();
+  }, []), { resizeTextArea: o };
+};
+export {
+  h as useTextareaResize
+};

package/dist/components/List/List.js

@@ -0,0 +1,31 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import r from "./List.module.css.js";
+import n from "classnames";
+import { ListItem as f } from "./ListItem/ListItem.js";
+const j = Object.assign(
+  l((s, e) => {
+    const {
+      variant: t = "unordered",
+      className: o,
+      children: a,
+      size: m = "md",
+      "data-testid": d = "list",
+      ...i
+    } = s;
+    return /* @__PURE__ */ c(
+      t === "ordered" ? "ol" : "ul",
+      {
+        "data-testid": d,
+        ref: e,
+        className: n(r.root, r[t], r[m], o),
+        ...t === "ordered" && i,
+        children: a
+      }
+    );
+  }),
+  { Item: f }
+);
+export {
+  j as List
+};

package/dist/components/List/List.module.css.js

@@ -0,0 +1,19 @@
+import '../../assets/components/List/List.module-RZ8hggiA.css';const e = "_root_1jj3e_25", o = "_unordered_1jj3e_39", _ = "_ordered_1jj3e_43", d = "_sm_1jj3e_48", r = "_md_1jj3e_59", j = "_lg_1jj3e_70", s = "_xl_1jj3e_81", t = {
+  root: e,
+  unordered: o,
+  ordered: _,
+  sm: d,
+  md: r,
+  lg: j,
+  xl: s
+};
+export {
+  t as default,
+  j as lg,
+  r as md,
+  _ as ordered,
+  e as root,
+  d as sm,
+  o as unordered,
+  s as xl
+};

package/dist/components/List/ListItem/ListItem.js

@@ -0,0 +1,8 @@
+import { jsx as i } from "react/jsx-runtime";
+const r = (t) => {
+  const { children: s, className: e, "data-testid": a = "list-item" } = t;
+  return /* @__PURE__ */ i("li", { "data-testid": a, className: e, children: s });
+};
+export {
+  r as ListItem
+};

package/dist/components/Loader/Loader.js

@@ -0,0 +1,67 @@
+import { jsx as a, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import s from "./Loader.module.css.js";
+import f from "classnames";
+const h = c(
+  ({
+    size: e = 24,
+    variant: t = "accent",
+    className: r,
+    "data-testid": n = "loader",
+    style: o,
+    ...d
+  }, i) => {
+    const l = f(
+      s.loader,
+      s[t],
+      s[`size-${e}`],
+      r
+    );
+    return /* @__PURE__ */ a(
+      "svg",
+      {
+        ref: i,
+        className: l,
+        fill: "none",
+        viewBox: "0 0 16 16",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-testid": n,
+        style: o,
+        ...d,
+        children: /* @__PURE__ */ a(
+          "path",
+          {
+            d: "M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeWidth: "1.33333"
+          }
+        )
+      }
+    );
+  }
+), p = c((e, t) => {
+  const {
+    loading: r = !1,
+    size: n = 24,
+    variant: o = "accent",
+    children: d,
+    className: i,
+    style: l,
+    "data-testid": m,
+    ...v
+  } = e, C = f(s.container, i);
+  return /* @__PURE__ */ N("div", { ref: t, className: C, style: l, "data-testid": m, ...v, children: [
+    d,
+    r && /* @__PURE__ */ a("div", { className: s.overlay, children: /* @__PURE__ */ a(h, { size: n, variant: o, "data-testid": `${m}-spinner` }) })
+  ] });
+}), L = c((e, t) => e.children ? /* @__PURE__ */ a(
+  p,
+  {
+    ref: t,
+    ...e
+  }
+) : /* @__PURE__ */ a(h, { ref: t, ...e }));
+export {
+  L as Loader
+};

package/dist/components/Loader/Loader.module.css.js

@@ -0,0 +1,30 @@
+import '../../assets/components/Loader/Loader.module-C3ql4FAI.css';const s = "_loader_1xslo_1", _ = "_spin_1xslo_1", o = "_accent_1xslo_19", e = "_neutral_1xslo_23", t = "_positive_1xslo_27", n = "_negative_1xslo_31", a = "_gray_1xslo_35", l = "_contrast_1xslo_39", i = "_container_1xslo_43", c = "_overlay_1xslo_53", r = {
+  loader: s,
+  spin: _,
+  accent: o,
+  neutral: e,
+  positive: t,
+  negative: n,
+  gray: a,
+  contrast: l,
+  container: i,
+  overlay: c,
+  "size-16": "_size-16_1xslo_68",
+  "size-24": "_size-24_1xslo_72",
+  "size-48": "_size-48_1xslo_76",
+  "size-64": "_size-64_1xslo_80",
+  "size-96": "_size-96_1xslo_84"
+};
+export {
+  o as accent,
+  i as container,
+  l as contrast,
+  r as default,
+  a as gray,
+  s as loader,
+  n as negative,
+  e as neutral,
+  c as overlay,
+  t as positive,
+  _ as spin
+};