@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/Button-C0p8bEXn.js

@@ -0,0 +1,581 @@
+import { jsxs as O, Fragment as j, jsx as n } from "react/jsx-runtime";
+import { forwardRef as M, useId as R, useRef as E, useMemo as d, useCallback as T, useImperativeHandle as A } from "react";
+import { IressSpinner as K } from "./components/Spinner/Spinner.js";
+import "./components/Spinner/Spinner.styles.js";
+import { GlobalCSSClass as b } from "./enums.js";
+import "./components/ButtonGroup/ButtonGroup.js";
+import "./components/ButtonGroup/ButtonGroup.styles.js";
+import { useButtonGroupItem as L } from "./components/ButtonGroup/hooks/useButtonGroupItem.js";
+import { s as W } from "./is-valid-prop-C5D641yn.js";
+import { s as D, m as z, a as J, i as Q, c as U } from "./css-DVJ-ALYD.js";
+import { c as X } from "./cx-DN21T1EH.js";
+import { c as Y } from "./create-recipe-BDTG8O8S.js";
+import "./components/Popover/Popover.js";
+import "./components/Popover/Popover.styles.js";
+import "./components/Popover/InputPopover/InputPopover.js";
+import { usePopover as Z } from "./components/Popover/hooks/usePopover.js";
+import "./components/Popover/hooks/useFloatingPopover.js";
+import { IressIcon as $ } from "./components/Icon/Icon.js";
+import "./components/Icon/Icon.styles.js";
+import "./components/Icon/IconProvider.js";
+import { IressTooltip as oo } from "./components/Tooltip/Tooltip.js";
+import "./components/Tooltip/Tooltip.styles.js";
+const I = {}, ro = [
+  {
+    mode: "primary",
+    status: "danger",
+    css: {
+      root: {
+        bg: "colour.system.danger.fill",
+        borderColor: "colour.system.danger.fill",
+        color: "colour.system.danger.onFill",
+        _hover: {
+          bg: "colour.system.danger.fillHover",
+          borderColor: "colour.system.danger.fillHover"
+        },
+        _active: {
+          boxShadow: "color-mix(in srgb, {colors.colour.system.danger.fill}, transparent 80%) 0px 0px 0px 3px"
+        }
+      },
+      spinner: {
+        color: "colour.system.danger.onFill"
+      }
+    }
+  },
+  {
+    mode: "secondary",
+    status: "danger",
+    css: {
+      root: {
+        bg: "colour.system.danger.surface",
+        borderColor: "[color-mix(in srgb, {colors.colour.system.danger.surface}, black 5%)]",
+        color: "colour.system.danger.text",
+        _hover: {
+          bg: "colour.system.danger.surfaceHover",
+          borderColor: "[color-mix(in srgb, {colors.colour.system.danger.surfaceHover}, black 5%)]"
+        },
+        _active: {
+          boxShadow: "color-mix(in srgb, {colors.colour.system.danger.surface}, transparent 40%) 0px 0px 0px 3px"
+        }
+      },
+      spinner: {
+        color: "colour.system.danger.text"
+      }
+    }
+  },
+  {
+    mode: "tertiary",
+    status: "danger",
+    css: {
+      root: {
+        borderColor: "colour.system.danger.fill",
+        color: "colour.system.danger.text",
+        _hover: {
+          bg: "colour.system.danger.surfaceHover"
+        },
+        _active: {
+          boxShadow: "color-mix(in srgb, {colors.colour.system.danger.surface}, transparent 40%) 0px 0px 0px 3px"
+        }
+      },
+      spinner: {
+        color: "colour.system.danger.text"
+      }
+    }
+  },
+  {
+    mode: "quaternary",
+    status: "danger",
+    css: {
+      root: {
+        borderColor: "colour.system.danger.surface",
+        color: "colour.system.danger.text",
+        _hover: {
+          bg: "colour.system.danger.surfaceHover"
+        },
+        _active: {
+          boxShadow: "color-mix(in srgb, {colors.colour.system.danger.surface}, transparent 40%) 0px 0px 0px 3px"
+        }
+      },
+      spinner: {
+        color: "colour.system.danger.text"
+      }
+    }
+  },
+  {
+    mode: "muted",
+    status: "danger",
+    css: {
+      root: {
+        color: "colour.system.danger.text",
+        _hover: {
+          bg: "colour.system.danger.surfaceHover",
+          borderColor: "colour.system.danger.surfaceHover"
+        }
+      },
+      spinner: {
+        color: "colour.system.danger.text"
+      }
+    }
+  },
+  {
+    mode: "primary",
+    status: "success",
+    css: {
+      root: {
+        bg: "colour.system.success.fill",
+        borderColor: "colour.system.success.fill",
+        color: "colour.system.success.onFill",
+        _hover: {
+          bg: "colour.system.success.fillHover"
+        },
+        _active: {
+          boxShadow: "color-mix(in srgb, {colors.colour.system.success.fill}, transparent 80%) 0px 0px 0px 3px"
+        }
+      },
+      spinner: {
+        color: "colour.system.success.onFill"
+      }
+    }
+  },
+  {
+    mode: "secondary",
+    status: "success",
+    css: {
+      root: {
+        bg: "colour.system.success.surface",
+        borderColor: "[color-mix(in srgb, {colors.colour.system.success.surface}, black 5%)]",
+        color: "colour.system.success.text",
+        _hover: {
+          bg: "colour.system.success.surfaceHover",
+          borderColor: "[color-mix(in srgb, {colors.colour.system.success.surfaceHover}, black 5%)]"
+        },
+        _active: {
+          boxShadow: "color-mix(in srgb, {colors.colour.system.success.surface}, transparent 40%) 0px 0px 0px 3px"
+        }
+      },
+      spinner: {
+        color: "colour.system.success.text"
+      }
+    }
+  },
+  {
+    mode: "tertiary",
+    status: "success",
+    css: {
+      root: {
+        borderColor: "colour.system.success.fill",
+        color: "colour.system.success.text",
+        _hover: {
+          bg: "colour.system.success.surfaceHover"
+        },
+        _active: {
+          boxShadow: "color-mix(in srgb, {colors.colour.system.success.surface}, transparent 40%) 0px 0px 0px 3px"
+        }
+      },
+      spinner: {
+        color: "colour.system.success.text"
+      }
+    }
+  },
+  {
+    mode: "quaternary",
+    status: "success",
+    css: {
+      root: {
+        borderColor: "colour.system.success.surface",
+        color: "colour.system.success.text",
+        _hover: {
+          bg: "colour.system.success.surfaceHover"
+        },
+        _active: {
+          boxShadow: "color-mix(in srgb, {colors.colour.system.success.surface}, transparent 40%) 0px 0px 0px 3px"
+        }
+      },
+      spinner: {
+        color: "colour.system.success.text"
+      }
+    }
+  },
+  {
+    mode: "muted",
+    status: "success",
+    css: {
+      root: {
+        color: "colour.system.success.text",
+        _hover: {
+          bg: "colour.system.success.surfaceHover",
+          borderColor: "colour.system.success.surfaceHover"
+        }
+      },
+      spinner: {
+        color: "colour.system.success.text"
+      }
+    }
+  },
+  {
+    mode: "secondary",
+    status: "info",
+    css: {
+      root: {
+        bg: "colour.system.info.surface",
+        borderColor: "[color-mix(in srgb, {colors.colour.system.info.surface}, black 5%)]",
+        color: "colour.system.info.text",
+        _hover: {
+          bg: "colour.system.info.surfaceHover",
+          borderColor: "[color-mix(in srgb, {colors.colour.system.info.surfaceHover}, black 5%)]"
+        },
+        _active: {
+          boxShadow: "[color-mix(in srgb, {colors.colour.system.info.surface}, transparent 40%) 0px 0px 0px 3px]"
+        }
+      },
+      spinner: {
+        color: "colour.system.info.text"
+      }
+    }
+  },
+  {
+    mode: "tertiary",
+    status: "info",
+    css: {
+      root: {
+        borderColor: "colour.system.info.fill",
+        color: "colour.system.info.text",
+        _hover: {
+          bg: "colour.system.info.surfaceHover"
+        },
+        _active: {
+          boxShadow: "[color-mix(in srgb, {colors.colour.system.info.surface}, transparent 40%) 0px 0px 0px 3px]"
+        }
+      },
+      spinner: {
+        color: "colour.system.info.text"
+      }
+    }
+  },
+  {
+    mode: "secondary",
+    status: "warning",
+    css: {
+      root: {
+        bg: "colour.system.warning.surface",
+        borderColor: "[color-mix(in srgb, {colors.colour.system.warning.surface}, black 5%)]",
+        color: "colour.system.warning.text",
+        _hover: {
+          bg: "colour.system.warning.surfaceHover",
+          borderColor: "[color-mix(in srgb, {colors.colour.system.warning.surfaceHover}, black 5%)]"
+        },
+        _active: {
+          boxShadow: "[color-mix(in srgb, {colors.colour.system.warning.surface}, transparent 40%) 0px 0px 0px 3px]"
+        }
+      },
+      spinner: {
+        color: "colour.system.warning.text"
+      }
+    }
+  },
+  {
+    mode: "tertiary",
+    status: "warning",
+    css: {
+      root: {
+        borderColor: "colour.system.warning.fill",
+        color: "colour.system.warning.text",
+        _hover: {
+          bg: "colour.system.warning.surfaceHover"
+        },
+        _active: {
+          boxShadow: "[color-mix(in srgb, {colors.colour.system.warning.surface}, transparent 40%) 0px 0px 0px 3px]"
+        }
+      },
+      spinner: {
+        color: "colour.system.warning.text"
+      }
+    }
+  },
+  {
+    mode: "primary",
+    loading: !0,
+    css: {
+      root: {
+        bg: "colour.neutral.20",
+        borderColor: "colour.neutral.20",
+        color: "colour.neutral.70"
+      },
+      spinner: {
+        color: "colour.neutral.70"
+      }
+    }
+  },
+  {
+    mode: [
+      "secondary",
+      "quaternary"
+    ],
+    loading: !0,
+    css: {
+      root: {
+        bg: "colour.neutral.20",
+        borderColor: "colour.neutral.40",
+        color: "colour.neutral.70",
+        _hover: {
+          boxShadow: "none"
+        }
+      },
+      spinner: {
+        color: "colour.neutral.70"
+      }
+    }
+  },
+  {
+    mode: "tertiary",
+    loading: !0,
+    css: {
+      root: {
+        bg: "colour.neutral.20",
+        borderColor: "colour.neutral.70",
+        color: "colour.neutral.70"
+      },
+      spinner: {
+        color: "colour.neutral.70"
+      }
+    }
+  },
+  {
+    mode: "muted",
+    loading: !0,
+    css: {
+      root: {
+        bg: "transparent",
+        borderColor: "transparent",
+        color: "colour.neutral.60"
+      },
+      spinner: {
+        color: "colour.neutral.60"
+      }
+    }
+  },
+  {
+    mode: "tertiary",
+    inButtonGroup: !0,
+    css: {
+      root: {
+        color: "colour.neutral.80",
+        _hover: {
+          bg: "colour.primary.surfaceHover"
+        }
+      }
+    }
+  },
+  {
+    mode: [
+      "primary",
+      "secondary",
+      "tertiary",
+      "quaternary",
+      "muted"
+    ],
+    active: !0,
+    css: {
+      root: {
+        bg: "colour.primary.surface",
+        borderColor: "colour.primary.text",
+        color: "colour.primary.text"
+      }
+    }
+  }
+], so = [
+  [
+    "root",
+    "button__root"
+  ],
+  [
+    "prepend",
+    "button__prepend"
+  ],
+  [
+    "append",
+    "button__append"
+  ],
+  [
+    "spinner",
+    "button__spinner"
+  ]
+], eo = /* @__PURE__ */ so.map(([o, c]) => [o, Y(c, I, Q(ro, o))]), to = z((o = {}) => Object.fromEntries(eo.map(([c, r]) => [c, r.recipeFn(o)]))), S = [
+  "active",
+  "compact",
+  "fluid",
+  "inButtonGroup",
+  "iconOnly",
+  "loading",
+  "mode",
+  "noWrap",
+  "status"
+], co = (o) => ({ ...I, ...J(o) }), no = /* @__PURE__ */ Object.assign(to, {
+  __recipe__: !1,
+  __name__: "button",
+  raw: (o) => o,
+  classNameMap: {},
+  variantKeys: S,
+  variantMap: {
+    active: [
+      "true"
+    ],
+    compact: [
+      "true"
+    ],
+    fluid: [
+      "true",
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl",
+      "xxl"
+    ],
+    inButtonGroup: [
+      "true"
+    ],
+    iconOnly: [
+      "true"
+    ],
+    loading: [
+      "true"
+    ],
+    mode: [
+      "primary",
+      "secondary",
+      "tertiary",
+      "quaternary",
+      "muted"
+    ],
+    noWrap: [
+      "true"
+    ],
+    status: [
+      "success",
+      "danger",
+      "info",
+      "warning"
+    ]
+  },
+  splitVariantProps(o) {
+    return D(o, S);
+  },
+  getVariantProps: co
+}), ao = ({
+  active: o,
+  append: c,
+  children: r,
+  className: x,
+  compact: k,
+  element: u,
+  fluid: f,
+  icon: l,
+  loading: s = !1,
+  mode: g = "secondary",
+  prepend: y,
+  noWrap: F = !1,
+  onClick: v,
+  status: B,
+  value: G,
+  ..._
+}, P) => {
+  const i = R(), V = G ?? (typeof r == "string" || typeof r == "number" || typeof r == "boolean" ? r : void 0), q = Z(), m = E(null), e = L({ value: V }), N = d(() => e ? e.active ? "primary" : "tertiary" : g, [e, g]), t = no({
+    active: (
+      // eslint-disable-next-line react-hooks/refs -- ref needed for forwarding
+      o ?? q?.isActiveActivator(m.current)
+    ),
+    compact: k,
+    fluid: f === !0 ? "true" : f,
+    inButtonGroup: !!e,
+    mode: N,
+    iconOnly: !!l,
+    loading: !!s,
+    noWrap: F,
+    status: B
+  }), [h, a] = d(
+    () => W(_),
+    [_]
+  ), C = T(
+    (p) => {
+      s || (v?.(p), e?.toggle());
+    },
+    [e, s, v]
+  ), w = d(
+    () => ({
+      children: /* @__PURE__ */ O(j, { children: [
+        y && !s && /* @__PURE__ */ n("span", { className: t.prepend, children: y }),
+        !!s && /* @__PURE__ */ n(
+          K,
+          {
+            className: t.spinner,
+            id: i,
+            screenreaderText: s === !0 ? "Loading" : s
+          }
+        ),
+        l ? /* @__PURE__ */ n($, { name: l }) : r,
+        c && /* @__PURE__ */ n("span", { className: t.append, children: c })
+      ] }),
+      className: X(
+        x,
+        b.FormElement,
+        b.FormElementInner,
+        t.root,
+        U(h),
+        b.Button
+      ),
+      onClick: C
+    }),
+    [
+      c,
+      r,
+      x,
+      C,
+      l,
+      s,
+      y,
+      i,
+      h,
+      t.append,
+      t.prepend,
+      t.root,
+      t.spinner
+    ]
+  );
+  A(P, () => m.current);
+  const H = d(
+    () => u ?? (a.href ? "a" : "button"),
+    [u, a.href]
+  );
+  if (l && r) {
+    const p = String(r);
+    return /* @__PURE__ */ n(oo, { tooltipText: p, children: /* @__PURE__ */ n(
+      H,
+      {
+        "aria-label": p,
+        "aria-describedby": s ? i : void 0,
+        type: u || !a.href ? "button" : void 0,
+        ...w,
+        ...e?.props,
+        ...a,
+        ref: m
+      }
+    ) });
+  }
+  return /* @__PURE__ */ n(
+    H,
+    {
+      "aria-describedby": s ? i : void 0,
+      type: u || !a.href ? "button" : void 0,
+      ...w,
+      ...e?.props,
+      ...a,
+      ref: m
+    }
+  );
+}, lo = M(ao);
+lo.displayName = "IressButton";
+export {
+  lo as I,
+  no as b
+};

package/dist/Provider-uPW2d6U5.js

@@ -0,0 +1,49 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import "./components/Modal/Modal.styles.js";
+import "./components/Modal/Modal.js";
+import { IressModalProvider as m } from "./components/Modal/ModalProvider.js";
+import "./components/Modal/hooks/useModal.js";
+import { IressToasterProvider as d } from "./components/Toaster/ToasterProvider.js";
+import "./components/Toaster/hooks/useToaster.js";
+import "./components/Toaster/Toaster.styles.js";
+import "./components/Toaster/components/Toast/Toast.styles.js";
+import "./components/Slideout/Slideout.js";
+import "./components/Slideout/Slideout.styles.js";
+import { IressSlideoutProvider as g } from "./components/Slideout/SlideoutProvider.js";
+import "./components/Slideout/hooks/useSlideout.js";
+import { createPortal as n } from "react-dom";
+import "./components/Icon/Icon.js";
+import "./components/Icon/Icon.styles.js";
+import { IressIconProvider as h } from "./components/Icon/IconProvider.js";
+var r = /* @__PURE__ */ ((o) => (o.Color = "color", o.Dimension = "dimension", o.FontFamily = "fontFamily", o.FontSize = "fontSize", o.Background = "background", o.Border = "border", o.Radius = "radius", o.Shadow = "shadow", o.Typography = "typography", o))(r || {});
+const l = [
+  "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
+];
+r.FontSize, r.FontFamily, r.FontFamily, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography, r.Typography;
+const $ = ({
+  children: o,
+  container: p,
+  noDefaultFont: y,
+  position: i,
+  ...s
+}) => /* @__PURE__ */ a(m, { container: p, children: [
+  /* @__PURE__ */ e(d, { container: p, position: i, children: /* @__PURE__ */ e(g, { container: p, ...s, children: /* @__PURE__ */ e(h, { container: p, noSubsetting: !0, children: o }) }) }),
+  !y && n(
+    l.map((t) => /* @__PURE__ */ e(
+      "link",
+      {
+        rel: "stylesheet",
+        href: t,
+        "data-iress-design-system-font": !0
+      },
+      t
+    )),
+    document.head,
+    "design-system-font"
+  )
+] });
+$.displayName = "IressProvider";
+export {
+  $ as I,
+  l as i
+};

package/dist/TableProvider-CNduJwA4.js

@@ -0,0 +1,82 @@
+import { jsx as f } from "react/jsx-runtime";
+import * as s from "react";
+import { createContext as d, useMemo as c } from "react";
+import { c as g, a as p, g as b, b as m } from "./composeTableColumnDefs-BfFBOARB.js";
+import { composeTableInitialSorting as y } from "./components/Table/helpers/composeTableInitialSorting.js";
+function k(t, e) {
+  return t ? C(t) ? /* @__PURE__ */ s.createElement(t, e) : t : null;
+}
+function C(t) {
+  return S(t) || typeof t == "function" || R(t);
+}
+function S(t) {
+  return typeof t == "function" && (() => {
+    const e = Object.getPrototypeOf(t);
+    return e.prototype && e.prototype.isReactComponent;
+  })();
+}
+function R(t) {
+  return typeof t == "object" && typeof t.$$typeof == "symbol" && ["react.memo", "react.forward_ref"].includes(t.$$typeof.description);
+}
+function T(t) {
+  const e = {
+    state: {},
+    // Dummy state
+    onStateChange: () => {
+    },
+    // noop
+    renderFallbackValue: null,
+    ...t
+  }, [o] = s.useState(() => ({
+    current: g(e)
+  })), [a, n] = s.useState(() => o.current.initialState);
+  return o.current.setOptions((i) => ({
+    ...i,
+    ...t,
+    state: {
+      ...a,
+      ...t.state
+    },
+    // Similarly, we'll maintain both our internal state and any user-provided
+    // state.
+    onStateChange: (r) => {
+      n(r), t.onStateChange == null || t.onStateChange(r);
+    }
+  })), o.current;
+}
+function x() {
+  return d(void 0);
+}
+function v() {
+  return M;
+}
+const M = x(), h = ({
+  children: t,
+  columns: e,
+  rows: o
+}) => {
+  const a = c(() => p(o, e), [e, o]), n = T({
+    columns: a,
+    data: o,
+    getCoreRowModel: m(),
+    getSortedRowModel: b(),
+    initialState: {
+      sorting: y(e)
+    }
+  }), i = c(
+    () => ({
+      api: n,
+      getColumnByKey: (l) => e?.find((u) => u.key === l)
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- only update when columns and rows change
+    [o, e, n.getState().sorting]
+  ), { Provider: r } = v();
+  return /* @__PURE__ */ f(r, { value: i, children: t });
+};
+h.displayName = "TableProvider";
+export {
+  h as T,
+  M as a,
+  k as f,
+  v as g
+};