@iress-oss/ids-components 5.20.2 → 6.0.0-alpha.1

package/dist/components/Icon/Icon.styles.js

@@ -0,0 +1,44 @@
+import { c as a } from "../../cva-JiDXAa83.js";
+const n = a({
+  variants: {
+    flip: {
+      horizontal: {
+        transform: "scaleX(-1)"
+      },
+      vertical: {
+        transform: "scaleY(-1)"
+      },
+      both: {
+        transform: "scale(-1)"
+      }
+    },
+    rotate: {
+      90: {
+        transform: "rotate(90deg)"
+      },
+      180: {
+        transform: "rotate(180deg)"
+      },
+      270: {
+        transform: "rotate(270deg)"
+      }
+    },
+    spin: {
+      half: {
+        animationStyle: "icon-spin-half"
+      },
+      1: {
+        animationStyle: "icon-spin-1"
+      },
+      2: {
+        animationStyle: "icon-spin-2"
+      },
+      3: {
+        animationStyle: "icon-spin-3"
+      }
+    }
+  }
+});
+export {
+  n as icon
+};

package/dist/components/Icon/index.js

@@ -1,15 +1,6 @@
-import { k as S } from "../../LoadingSuspense-BtzikVZk.js";
-import { ICON_FLIPS as c, ICON_ROTATES as e, ICON_SETS as N, ICON_SIZES as O, ICON_SPINS as r, IconFlip as t, IconRotate as C, IconSet as _, IconSize as p, IconSpin as i } from "./Icon.types.js";
+import { IressIcon as e } from "./Icon.js";
+import { icon as f } from "./Icon.styles.js";
 export {
-  c as ICON_FLIPS,
-  e as ICON_ROTATES,
-  N as ICON_SETS,
-  O as ICON_SIZES,
-  r as ICON_SPINS,
-  t as IconFlip,
-  C as IconRotate,
-  _ as IconSet,
-  p as IconSize,
-  i as IconSpin,
-  S as IressIcon
+  e as IressIcon,
+  f as icon
 };

package/dist/components/Image/Image.js

@@ -0,0 +1,27 @@
+import { jsx as e } from "react/jsx-runtime";
+import { GlobalCSSClass as a } from "../../enums.js";
+import { image as i } from "./Image.styles.js";
+import { c as l } from "../../cx-DN21T1EH.js";
+import { s as c } from "../../factory-oPXoMw9H.js";
+const n = c("img", i), y = ({
+  className: m,
+  maxWidth: s = "100%",
+  style: o,
+  ...r
+}) => {
+  const t = {
+    ...o,
+    maxWidth: s
+  };
+  return /* @__PURE__ */ e(
+    n,
+    {
+      className: l(m, a.Image),
+      style: t,
+      ...r
+    }
+  );
+};
+export {
+  y as IressImage
+};

package/dist/components/Image/Image.styles.js

@@ -0,0 +1,13 @@
+import { c as a } from "../../cva-JiDXAa83.js";
+const i = a({
+  base: {
+    display: "block",
+    height: "auto",
+    objectFit: "contain"
+  },
+  variants: {},
+  defaultVariants: {}
+});
+export {
+  i as image
+};

package/dist/components/Image/index.js

@@ -0,0 +1,6 @@
+import { IressImage as m } from "./Image.js";
+import { image as a } from "./Image.styles.js";
+export {
+  m as IressImage,
+  a as image
+};

package/dist/components/Inline/Inline.js

@@ -1,41 +1,9 @@
-import "react/jsx-runtime";
-import "../../index-cbHCAGLB.js";
-import "./Inline.types.js";
-import "../../helpers/responsive/getResponsiveLayoutModifiers.js";
-import { l as N } from "../../LoadingSuspense-BtzikVZk.js";
-import "react";
-import "../../fuzzysort-BNka47rs.js";
-import "../Badge/Badge.js";
-import "../ButtonGroup/ButtonGroupProvider.js";
-import "../../enums.js";
-import "../Card/Card.js";
-import "../CheckboxGroup/CheckboxGroup.js";
-import "../Col/Col.js";
-import "../Expander/Expander.js";
-import "../Form/FormContext.js";
-import "../Menu/Menu.js";
-import "../Menu/MenuProvider.js";
-import "../../PopoverProvider-DZ92QV8I.js";
-import "../CheckboxMark/CheckboxMark.types.js";
-import "../CheckboxMark/CheckboxMark.js";
-import "../Modal/ModalProvider.js";
-import "../Panel/Panel.js";
-import "../Popover/Popover.js";
-import "../Popover/InputPopover/InputPopover.js";
-import "../../SlideoutProvider-CQh140HM.js";
-import "react-dom";
-import "../RadioGroup/RadioGroup.js";
-import "../Text/Text.js";
-import "../Skeleton/Skeleton.js";
-import "../SkipLink/SkipLink.js";
-import "../Stack/Stack.js";
-import "../Table/TableContext.js";
-import "../Table/TableProvider.js";
-import "../TabSet/Tab/Tab.js";
-import "../TabSet/TabSet.js";
-import "../Toggle/Toggle.js";
-import "../Tooltip/Tooltip.js";
-import "../ValidationMessage/ValidationMessage.js";
+import { jsx as m } from "react/jsx-runtime";
+import { inline as r } from "./Inline.styles.js";
+import { s as i } from "../../factory-oPXoMw9H.js";
+import { GlobalCSSClass as n } from "../../enums.js";
+import { c as t } from "../../cx-DN21T1EH.js";
+const e = i("div", r), x = ({ className: o, ...s }) => /* @__PURE__ */ m(e, { ...s, className: t(o, n.Inline) });
 export {
-  N as IressInline
+  x as IressInline
 };

package/dist/components/Inline/Inline.styles.js

@@ -0,0 +1,60 @@
+import { c as e } from "../../cva-JiDXAa83.js";
+const n = e({
+  base: {
+    display: "flex",
+    flexDirection: "row",
+    gap: "spacing.000"
+  },
+  variants: {
+    horizontalAlign: {
+      around: {
+        justifyContent: "space-around"
+      },
+      between: {
+        justifyContent: "space-between"
+      },
+      center: {
+        justifyContent: "center"
+      },
+      evenly: {
+        justifyContent: "space-evenly"
+      },
+      left: {
+        justifyContent: "flex-start"
+      },
+      right: {
+        justifyContent: "flex-end"
+      }
+    },
+    verticalAlign: {
+      bottom: {
+        alignItems: "flex-end"
+      },
+      middle: {
+        alignItems: "center"
+      },
+      top: {
+        alignItems: "flex-start"
+      },
+      stretch: {
+        alignItems: "stretch"
+      }
+    },
+    noWrap: {
+      true: {
+        flexWrap: "nowrap"
+      },
+      false: {
+        flexWrap: "wrap"
+      }
+    }
+  },
+  defaultVariants: {
+    horizontalAlign: "left",
+    verticalAlign: "top",
+    noWrap: !1
+  }
+});
+export {
+  n as inline
+};

package/dist/components/Inline/index.js

@@ -1,6 +1,6 @@
-import { InlineCssClass as r } from "./Inline.types.js";
-import { l as n } from "../../LoadingSuspense-BtzikVZk.js";
+import { inline as n } from "./Inline.styles.js";
+import { IressInline as i } from "./Inline.js";
 export {
-  r as InlineCssClass,
-  n as IressInline
+  i as IressInline,
+  n as inline
 };

package/dist/components/Input/Input.js

@@ -1,14 +1,146 @@
-import "react/jsx-runtime";
-import "../../index-cbHCAGLB.js";
-import "react";
-import "../../enums.js";
-import "../../helpers/form/getFormControlValueAsString.js";
-import "./ClearButton/ClearButton.js";
-import "../../InputBase-C0zGNQy5.js";
-import "./Input.types.js";
-import { m as u } from "../../LoadingSuspense-BtzikVZk.js";
-import "../../hooks/useControlledState.js";
-import "../Form/hooks/useNoDefaultValueInForms.js";
+import { jsx as r, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as G, useRef as S, useState as H, useMemo as w, useImperativeHandle as U } from "react";
+import { GlobalCSSClass as v } from "../../enums.js";
+import { getFormControlValueAsString as z } from "../../helpers/form/getFormControlValueAsString.js";
+import { InputBase as J } from "./InputBase/InputBase.js";
+import { IressSpinner as K } from "../Spinner/Spinner.js";
+import "../Spinner/Spinner.styles.js";
+import { useControlledState as L } from "../../hooks/useControlledState.js";
+import { IressReadonly as Q } from "../Readonly/Readonly.js";
+import "../Readonly/Readonly.styles.js";
+import { c as i } from "../../cx-DN21T1EH.js";
+import { input as W } from "./Input.styles.js";
+import { s as X } from "../../factory-oPXoMw9H.js";
+import { s as Y } from "../../is-valid-prop-Ce0wiweq.js";
+import { useNoDefaultValueInForms as Z } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+import "../../Button-D6AL0bia.js";
+import { IressCloseButton as _ } from "../Button/CloseButton/CloseButton.js";
+const $ = ({ rows: a, ...g }, M) => {
+  const {
+    loading: c = !1,
+    clearable: P = !1,
+    defaultValue: C,
+    onClear: D,
+    width: R,
+    prepend: I,
+    append: m,
+    onChange: B,
+    className: h,
+    readOnly: E,
+    formatter: n,
+    type: y,
+    inline: T,
+    alignRight: x,
+    ...t
+  } = g;
+  Z({
+    component: "IressInput",
+    defaultValue: C
+  });
+  const p = S(null), d = S(null), { value: l, setValue: V } = L({
+    component: "IressInput",
+    defaultValue: C,
+    value: g.value
+  }), f = z(l), [u, b] = H(!1), [j, O] = Y(t), F = w(() => n && !u ? n(l) : f, [n, l, f, u]), k = w(() => {
+    if (a === void 0)
+      return n && !u ? { type: "text" } : { type: y };
+  }, [n, u, y, a]);
+  if (U(
+    M,
+    () => ({
+      ...p.current,
+      extras: {
+        additionalOnChangeProps: ["onClear"]
+      }
+    })
+  ), E)
+    return /* @__PURE__ */ r(
+      Q,
+      {
+        ...t,
+        defaultValue: void 0,
+        value: l,
+        alignRight: x,
+        append: m,
+        className: h,
+        children: F
+      }
+    );
+  const q = (e) => {
+    V(""), p.current?.focus();
+    const s = new Event("change", {
+      bubbles: !0
+    });
+    Object.defineProperty(s, "target", {
+      writable: !1,
+      value: { value: "", ...e.target }
+    }), D?.(s);
+  }, A = (e) => {
+    const s = e.target.value;
+    V(s), B?.(e, s);
+  }, o = W({
+    alignRight: x,
+    inline: T,
+    isTextarea: a !== void 0,
+    width: R
+  });
+  return /* @__PURE__ */ N(
+    X.div,
+    {
+      className: i(
+        // classes.root,
+        v.FormElement,
+        v.Input,
+        h,
+        o.wrapper,
+        v.FormElementInner
+      ),
+      "data-testid": t["data-testid"],
+      ...j,
+      children: [
+        I && /* @__PURE__ */ r("div", { className: i(o.addon), children: I }),
+        /* @__PURE__ */ r(
+          J,
+          {
+            ...O,
+            ...k,
+            className: o.formControl,
+            value: F,
+            onChange: A,
+            onFocus: (e) => {
+              b(!0), t?.onFocus?.(e), d.current ? d.current = null : queueMicrotask(() => e.target.select());
+            },
+            onMouseDown: (e) => {
+              t?.onMouseDown?.(e), d.current = !0;
+            },
+            onBlur: (e) => {
+              b(!1), t?.onBlur?.(e);
+            },
+            rows: a,
+            ref: p
+          }
+        ),
+        /* @__PURE__ */ N("div", { className: i(o.internal), children: [
+          c && /* @__PURE__ */ r(
+            K,
+            {
+              screenreaderText: c === !0 ? "loading" : c
+            }
+          ),
+          f && P && /* @__PURE__ */ r(
+            _,
+            {
+              onClick: q,
+              onMouseDown: (e) => e.preventDefault(),
+              screenreaderText: "Clear"
+            }
+          )
+        ] }),
+        m && /* @__PURE__ */ r("div", { className: i(o.addon), children: m })
+      ]
+    }
+  );
+}, Ce = G($);
 export {
-  u as IressInput
+  Ce as IressInput
 };

package/dist/components/Input/Input.styles.js

@@ -0,0 +1,208 @@
+import { s as r } from "../../sva-OmxClA9g.js";
+const o = r({
+  slots: ["root", "wrapper", "inline", "addon", "internal", "formControl"],
+  base: {
+    wrapper: {
+      display: "flex",
+      alignItems: "stretch",
+      borderRadius: "radius.system.form",
+      backgroundColor: "colour.neutral.10",
+      minHeight: "[calc({sizes.input.height} - 2px)]",
+      margin: "[0]",
+      flexGrow: "1",
+      border: "input",
+      "&:has(input:focus, textarea:focus)": {
+        borderColor: "colour.primary.fill",
+        layerStyle: "elevation.focus"
+      }
+    },
+    addon: {
+      borderRadius: "radius.100",
+      backgroundColor: "colour.neutral.10",
+      minHeight: "[calc({sizes.input.height} - 2px)]",
+      color: "colour.neutral.80",
+      lineHeight: "1",
+      fontWeight: "300",
+      display: "inline-flex",
+      alignItems: "center",
+      py: "none",
+      "&:not(:empty)": {
+        px: "spacing.250"
+      },
+      _empty: {
+        display: "none"
+      },
+      "&:not(:empty):has(button)": {
+        px: "none"
+      }
+    },
+    internal: {
+      display: "flex",
+      alignItems: "center",
+      "& > *": {
+        padding: "[0 {spacing.spacing.250}]"
+      },
+      _empty: {
+        display: "none"
+      }
+    },
+    formControl: {
+      borderWidth: 0,
+      borderRadius: "radius.system.form",
+      padding: "spacing.200",
+      backgroundColor: "colour.neutral.10",
+      textStyle: "typography.body.md",
+      color: "colour.neutral.80",
+      display: "block",
+      boxSizing: "border-box",
+      flex: "auto",
+      maxWidth: "[100%]",
+      minHeight: "[calc({sizes.input.height} - 2px)]",
+      lineHeight: 1,
+      _focus: {
+        outline: "[none]"
+      },
+      _placeholder: {
+        color: "colour.neutral.60"
+      },
+      "&::file-selector-button": {
+        backgroundColor: "colour.primary.surface",
+        color: "colour.primary.text",
+        borderRadius: "radius.system.form",
+        py: "spacing.150",
+        px: "spacing.200",
+        m: "-spacing.100",
+        mr: "spacing.200",
+        cursor: "pointer",
+        _hover: {
+          backgroundColor: "colour.primary.surfaceHover"
+        }
+      }
+    }
+  },
+  variants: {
+    alignRight: {
+      true: {
+        formControl: {
+          textAlign: "right"
+        }
+      }
+    },
+    inline: {
+      true: {
+        wrapper: {
+          display: "inline-flex"
+        }
+      }
+    },
+    isTextarea: {
+      true: {
+        formControl: {
+          lineHeight: 1.5,
+          height: "auto"
+        }
+      }
+    },
+    readOnly: {
+      true: {
+        wrapper: {
+          border: "[none]"
+        }
+      }
+    },
+    width: {
+      2: {
+        wrapper: {
+          maxWidth: "[fit-content]"
+        },
+        formControl: {
+          width: "input.2"
+        }
+      },
+      4: {
+        wrapper: {
+          maxWidth: "[fit-content]"
+        },
+        formControl: {
+          width: "input.4"
+        }
+      },
+      6: {
+        wrapper: {
+          maxWidth: "[fit-content]"
+        },
+        formControl: {
+          width: "input.6"
+        }
+      },
+      8: {
+        wrapper: {
+          maxWidth: "[fit-content]"
+        },
+        formControl: {
+          width: "input.8"
+        }
+      },
+      10: {
+        wrapper: {
+          maxWidth: "[fit-content]"
+        },
+        formControl: {
+          width: "input.10"
+        }
+      },
+      12: {
+        wrapper: {
+          maxWidth: "[fit-content]"
+        },
+        formControl: {
+          width: "input.12"
+        }
+      },
+      16: {
+        wrapper: {
+          maxWidth: "[fit-content]"
+        },
+        formControl: {
+          width: "input.16"
+        }
+      },
+      "25perc": {
+        wrapper: {
+          width: "input.25perc"
+        },
+        formControl: {
+          width: "[100%]"
+        }
+      },
+      "50perc": {
+        wrapper: {
+          width: "input.50perc"
+        },
+        formControl: {
+          width: "[100%]"
+        }
+      },
+      "75perc": {
+        wrapper: {
+          width: "input.75perc"
+        },
+        formControl: {
+          width: "[100%]"
+        }
+      },
+      "100perc": {
+        wrapper: {
+          width: "input.100perc"
+        },
+        formControl: {
+          width: "[100%]"
+        }
+      }
+    }
+  },
+  defaultVariants: {}
+});
+export {
+  o as input
+};

package/dist/components/Input/InputBase/InputBase.js

@@ -1,9 +1,36 @@
-import "react/jsx-runtime";
-import "react";
-import { I as e } from "../../../InputBase-C0zGNQy5.js";
-import "../../../index-cbHCAGLB.js";
-import "../../../helpers/utility/idsLogger.js";
-import "../../../enums.js";
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as l, useRef as s, useImperativeHandle as d } from "react";
+import { s as f } from "../../../factory-oPXoMw9H.js";
+const m = ({ "data-testid": t, rows: e, ...u }, i) => {
+  const a = e !== void 0, r = s(null), n = s(null);
+  if (d(i, () => {
+    const c = a ? n.current : r.current;
+    return {
+      focus: () => c?.focus(),
+      blur: () => c?.blur(),
+      input: a ? n.current : r.current
+    };
+  }), e !== void 0)
+    return /* @__PURE__ */ p(
+      f.textarea,
+      {
+        rows: e,
+        ...t && { "data-testid": `${t}__textarea` },
+        ...u,
+        ref: n
+      }
+    );
+  const o = u;
+  return /* @__PURE__ */ p(
+    f.input,
+    {
+      ...t && { "data-testid": `${t}__input` },
+      ...o,
+      type: o.type ?? "text",
+      ref: r
+    }
+  );
+}, v = l(m);
 export {
-  e as InputBase
+  v as InputBase
 };

package/dist/components/Input/index.js

@@ -1,7 +1,6 @@
-import { m as e } from "../../LoadingSuspense-BtzikVZk.js";
-import { INPUT_MODES as t, InputMode as I } from "./Input.types.js";
+import { IressInput as p } from "./Input.js";
+import { input as e } from "./Input.styles.js";
 export {
-  t as INPUT_MODES,
-  I as InputMode,
-  e as IressInput
+  p as IressInput,
+  e as input
 };