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

package/dist/components/Tag/TagInput/TagInput.js

@@ -1,131 +1,136 @@
-import { jsxs as y, jsx as d } from "react/jsx-runtime";
-import { forwardRef as $, useState as b, useCallback as z } from "react";
-import { IressInput as F } from "../../Input/Input.js";
+import { jsxs as h, jsx as c } from "react/jsx-runtime";
+import { forwardRef as b, useState as z, useCallback as F } from "react";
+import { IressInput as G } from "../../Input/Input.js";
 import "../../Input/Input.styles.js";
-import { useControlledState as G } from "../../../hooks/useControlledState.js";
+import { useControlledState as H } from "../../../hooks/useControlledState.js";
 import { getValueAsEvent as p } from "../../../helpers/form/getValueAsEvent.js";
-import { IressTag as h } from "../Tag.js";
+import { IressTag as I } from "../Tag.js";
 import { propagateTestid as v } from "../../../helpers/utility/propagateTestid.js";
 import "../../Inline/Inline.styles.js";
-import { IressInline as H } from "../../Inline/Inline.js";
-import { tagInput as J } from "./TagInput.styles.js";
-const L = ({
-  "data-testid": s,
-  onTagDelete: c,
-  onTagDeleteAll: u,
-  onTagDeleteButtonBlur: i,
-  selectedOptionsTagText: n,
-  tags: r = [],
+import { IressInline as J } from "../../Inline/Inline.js";
+import { tagInput as L } from "./TagInput.styles.js";
+const w = ({
+  "data-testid": l,
+  onTagDelete: d,
+  onTagDeleteAll: i,
+  onTagDeleteButtonBlur: u,
+  selectedOptionsTagText: r,
+  tags: n = [],
   tagLimit: m = 5
-}) => r.length ? r.length <= m ? r.map((l) => /* @__PURE__ */ d(
-  h,
+}) => n.length ? n.length <= m ? n.map((s) => /* @__PURE__ */ c(
+  I,
   {
-    deleteButtonText: `Delete ${l}`,
-    onDelete: c,
-    onDeleteButtonBlur: i,
-    "data-testid": v(s, "tag"),
-    ml: "xs",
-    children: l
+    deleteButtonText: `Delete ${s}`,
+    onDelete: d,
+    onDeleteButtonBlur: u,
+    "data-testid": v(l, "tag"),
+    compact: !0,
+    my: "spacing.1",
+    mr: "spacing.1",
+    children: s
   },
-  l
-)) : /* @__PURE__ */ y(
-  h,
+  s
+)) : /* @__PURE__ */ h(
+  I,
   {
-    onDelete: u,
-    onDeleteButtonBlur: i,
-    "data-testid": v(s, "tag"),
-    ml: "xs",
-    py: "none",
+    onDelete: i,
+    onDeleteButtonBlur: u,
+    "data-testid": v(l, "tag"),
+    compact: !0,
+    my: "spacing.1",
+    mr: "spacing.1",
     children: [
-      String(r.length) || "0",
+      String(n.length) || "0",
       " ",
-      n
+      r
     ]
   }
-) : null, M = $(
+) : null;
+w.displayName = "Tags";
+const M = b(
   ({
-    className: s,
-    defaultValue: c,
-    name: u,
-    onBlur: i,
-    onChange: n,
-    onExistingTag: r,
+    className: l,
+    defaultValue: d,
+    name: i,
+    onBlur: u,
+    onChange: r,
+    onExistingTag: n,
     onKeyDown: m,
-    onTagDelete: l,
-    onTagDeleteAll: w,
-    onTagDeleteButtonBlur: B,
-    selectedOptionsTagText: x = "selected",
-    style: k,
-    tagLimit: j = 5,
-    width: A = "100perc",
+    onTagDelete: s,
+    onTagDeleteAll: B,
+    onTagDeleteButtonBlur: k,
+    selectedOptionsTagText: j = "selected",
+    style: x,
+    tagLimit: A = 5,
+    width: N = "100%",
     value: S,
     ...f
   }, E) => {
-    const [D, g] = b(""), { value: a, setValue: o } = G({
+    const [y, g] = z(""), { value: a, setValue: o } = H({
       component: "IressTagInput",
-      defaultValue: c,
+      defaultValue: d,
       value: S
-    }), K = J(), I = z(
+    }), K = L(), D = F(
       (e = "") => {
         if (!e)
           return;
         if (a?.includes(e)) {
-          r?.(e);
+          n?.(e);
           return;
         }
         const t = [...a ?? [], e];
-        n?.(p(t), t), o(t);
+        r?.(p(t), t), o(t);
       },
-      [n, r, o, a]
-    ), N = (e) => {
-      i?.(e), I(e.currentTarget.value), g("");
-    }, V = (e) => {
-      if (m?.(e), e.key === "Backspace" && !D) {
+      [r, n, o, a]
+    ), V = (e) => {
+      u?.(e), D(e.currentTarget.value), g("");
+    }, q = (e) => {
+      if (m?.(e), e.key === "Backspace" && !y) {
         const t = a?.slice(0, -1);
-        n?.(p(t), t), o(t);
+        r?.(p(t), t), o(t);
       } else if (e.key === "Enter") {
         const t = e.currentTarget;
-        t.value && (e.preventDefault(), I(t.value), g(""));
+        t.value && (e.preventDefault(), D(t.value), g(""));
       }
-    }, q = (e, t) => {
-      t.stopPropagation(), l?.(e, t);
-      const T = a?.filter((R) => R !== e);
-      n?.(p(T), T), o(T);
     }, Q = (e, t) => {
-      t.stopPropagation(), w?.(e, t), n?.(p([]), []), o([]);
+      t.stopPropagation(), s?.(e, t);
+      const T = a?.filter(($) => $ !== e);
+      r?.(p(T), T), o(T);
+    }, R = (e, t) => {
+      t.stopPropagation(), B?.(e, t), r?.(p([]), []), o([]);
     };
-    return /* @__PURE__ */ y(H, { gap: "sm", className: s, style: k, children: [
-      /* @__PURE__ */ d(
-        F,
+    return /* @__PURE__ */ h(J, { gap: "sm", className: l, style: x, children: [
+      /* @__PURE__ */ c(
+        G,
         {
           ...f,
           className: K.input,
-          onBlur: N,
+          onBlur: V,
           onChange: (e) => g(e.currentTarget.value),
-          onKeyDown: V,
-          prepend: /* @__PURE__ */ d(
-            L,
+          onKeyDown: q,
+          prepend: /* @__PURE__ */ c(
+            w,
             {
               "data-testid": f["data-testid"],
-              onTagDelete: q,
-              onTagDeleteAll: Q,
-              onTagDeleteButtonBlur: B,
-              selectedOptionsTagText: x,
+              onTagDelete: Q,
+              onTagDeleteAll: R,
+              onTagDeleteButtonBlur: k,
+              selectedOptionsTagText: j,
               tags: a ?? [],
-              tagLimit: j
+              tagLimit: A
             }
           ),
           ref: E,
-          width: A,
-          value: D
+          width: N,
+          value: y
         }
       ),
-      u && /* @__PURE__ */ d(
+      i && /* @__PURE__ */ c(
         "input",
         {
           type: "hidden",
           value: (a ?? []).join(", "),
-          name: u,
+          name: i,
           "data-testid": v(
             f["data-testid"],
             "hidden-input"

package/dist/components/Tag/TagInput/TagInput.styles.js

@@ -1,26 +1,23 @@
-import { s as t } from "../../../sva-OmxClA9g.js";
-const s = t({
+import { s as e } from "../../../sva-CsHRIRDW.js";
+const t = e({
   slots: ["input", "tag"],
   base: {
     input: {
-      flexWrap: "wrap",
-      rowGap: "xs",
-      py: "xs",
-      "& > :first-child": {
+      "& > .iress-form-element__inner": {
+        flexWrap: "wrap",
+        pl: "spacing.1"
+      },
+      "& > .iress-form-element__inner > :first-child": {
         display: "contents",
         minHeight: "[0px]"
       },
-      "& > input": {
+      "& > .iress-form-element__inner > input": {
         width: "auto",
-        minHeight: "[calc({sizes.input.height} - {spacing.xs} * 2.5)]",
-        py: "none"
+        pl: "spacing.1"
       }
-    },
-    tag: {
-      marginLeft: "xs"
     }
   }
 });
 export {
-  s as tagInput
+  t as tagInput
 };

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,12 @@
+import { IressStyledProps } from '../../types';
+export type TextElements = 'p' | 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'small' | 'cite' | 'caption' | 'strong' | 'em' | 'a' | 'blockquote' | 'pre';
+export type IressTextProps<E extends TextElements = 'div'> = IressStyledProps<E> & {
+    /**
+     * The HTML element that should be rendered.
+     */
+    element?: E;
+};
+export declare const IressText: {
+    <E extends TextElements = "div">({ className, ...restProps }: IressTextProps<E>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Text/Text.js

@@ -1,25 +1,26 @@
-import { jsx as e } from "react/jsx-runtime";
-import { s as r } from "../../factory-oPXoMw9H.js";
+import { jsx as t } from "react/jsx-runtime";
+import { s as r } from "../../factory-CcYfm2kB.js";
 import { text as s } from "./Text.styles.js";
-import { useMemo as i } from "react";
-import { c as l } from "../../cx-DN21T1EH.js";
-import { GlobalCSSClass as n } from "../../enums.js";
-const d = ({
-  className: o,
-  ...m
+import { useMemo as a } from "react";
+import { c as i } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as l } from "../../enums.js";
+const n = ({
+  className: m,
+  ...e
 }) => {
-  const t = i(
-    () => r(m.element ?? "div", s),
-    [m.element]
+  const o = a(
+    () => r(e.element ?? "div", s),
+    [e.element]
   );
-  return /* @__PURE__ */ e(
-    t,
+  return /* @__PURE__ */ t(
+    o,
     {
-      ...m,
-      className: l(o, n.Text)
+      ...e,
+      className: i(m, l.Text)
     }
   );
 };
+n.displayName = "IressText";
 export {
-  d as IressText
+  n as IressText
 };

package/dist/components/Text/Text.styles.js

@@ -1,6 +1,6 @@
-import { m as a, s as n } from "../../css-fGu_jDvv.js";
-import { c as s, m as i } from "../../create-recipe-C-ASk1Hy.js";
-const e = /* @__PURE__ */ s("text", {
+import { m as a, s as n } from "../../css-DVJ-ALYD.js";
+import { m as s, c as i } from "../../create-recipe-BDTG8O8S.js";
+const e = /* @__PURE__ */ i("text", {
   element: "div"
 }, [
   {
@@ -18,7 +18,7 @@ const e = /* @__PURE__ */ s("text", {
         color: "colour.neutral.80",
         borderWidth: "0.5px",
         borderColor: "colour.neutral.30",
-        borderRadius: "radius.025",
+        borderRadius: "radius.system.form",
         alignSelf: "flex-start"
       },
       "& small": {
@@ -70,7 +70,7 @@ const e = /* @__PURE__ */ s("text", {
   variantKeys: o,
   variantMap: r,
   merge(t) {
-    return i(this, t);
+    return s(this, t);
   },
   splitVariantProps(t) {
     return n(t, o);

package/dist/components/Toaster/Toaster.d.ts

@@ -0,0 +1,28 @@
+import { FloatingUIContainer, IressStyledProps } from '../../types';
+import { ToastProps } from './components/Toast/Toast';
+export interface ToasterItem extends Omit<ToastProps, 'animation'> {
+    /**
+     * A unique identifier for the toast.
+     */
+    id: string;
+}
+export interface ToasterProps extends Omit<IressStyledProps, 'children'> {
+    /**
+     * The container element to render the toaster into.
+     * By default, the toaster will render at the end of the document body.
+     */
+    container?: FloatingUIContainer;
+    /**
+     * The position on the screen where the toast will appear.
+     * @default bottom-end
+     */
+    position?: 'bottom-center' | 'bottom-end' | 'bottom-start' | 'top-center' | 'top-end' | 'top-start';
+    /**
+     * The toasts that will be displayed in the toaster.
+     */
+    toasts?: ToasterItem[];
+}
+export declare const Toaster: {
+    ({ className, container, position, toasts, ...restProps }: ToasterProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/components/Toaster/Toaster.js

@@ -1,14 +1,14 @@
 import { jsx as r, jsxs as u, Fragment as x } from "react/jsx-runtime";
-import { useContext as b, useRef as v, useEffect as C, createElement as T } from "react";
+import { useContext as b, useRef as T, useEffect as v, createElement as C } from "react";
 import "../Stack/Stack.styles.js";
 import { IressStack as g } from "../Stack/Stack.js";
-import { g as h } from "../../floating-ui.react-BetVZ099.js";
-import { toaster as A } from "./Toaster.styles.js";
-import { c as y } from "../../cx-DN21T1EH.js";
-import { ToastAnimated as E } from "./components/Toast/ToastAnimated.js";
-import { s as l } from "../../factory-oPXoMw9H.js";
-import { GlobalCSSClass as S } from "../../enums.js";
-import { ToasterContext as j } from "./hooks/useToaster.js";
+import { g as h } from "../../floating-ui.react-B0nDXRN6.js";
+import { toaster as y } from "./Toaster.styles.js";
+import { c as A } from "../../cx-DN21T1EH.js";
+import { s as l } from "../../factory-CcYfm2kB.js";
+import { GlobalCSSClass as E } from "../../enums.js";
+import { ToasterContext as S } from "./hooks/useToaster.js";
+import { Toast as j } from "./components/Toast/Toast.js";
 const k = {
   "bottom-end": "end-x",
   "bottom-start": "start-x",
@@ -16,47 +16,48 @@ const k = {
   "top-end": "end-x",
   "top-start": "start-x",
   "top-center": "start-y"
-}, m = {
+}, a = {
   role: "alert",
   "aria-relevant": "additions",
   "aria-live": "assertive"
-}, q = ({
+}, F = ({
   className: d,
   container: t,
-  position: a = "bottom-end",
-  toasts: n = [],
+  position: m = "bottom-end",
+  toasts: i = [],
   ...f
 }) => {
-  const i = b(j), o = v(null), c = A({ position: a });
-  return C(() => {
+  const n = b(S), o = T(null), c = y({ position: m });
+  return v(() => {
     if (!t)
       return;
     const e = t instanceof HTMLElement ? t : t.current;
-    Object.entries(m).forEach(([s, p]) => {
+    Object.entries(a).forEach(([s, p]) => {
       e?.setAttribute(s, String(p));
     });
-  }, [t]), n.length ? /* @__PURE__ */ u(x, { children: [
-    !t && /* @__PURE__ */ r(l.div, { ref: o, ...m }),
+  }, [t]), i.length ? /* @__PURE__ */ u(x, { children: [
+    !t && /* @__PURE__ */ r(l.div, { ref: o, ...a }),
     /* @__PURE__ */ r(h, { root: t ?? o, children: /* @__PURE__ */ r(
       g,
       {
-        className: y(c.root, d, S.Toaster),
+        className: A(c.root, d, E.Toaster),
         gap: "md",
         ...f,
-        children: n.map((e) => /* @__PURE__ */ T(
-          E,
+        children: i.map((e) => /* @__PURE__ */ C(
+          j,
           {
             ...e,
-            animation: k[a],
+            animation: k[m],
             key: e.id,
-            onClose: (s) => i?.remove(e.id, s),
-            onTimeout: () => i?.remove(e.id)
+            onClose: (s) => n?.remove(e.id, s),
+            onTimeout: () => n?.remove(e.id)
           }
         ))
       }
     ) })
-  ] }) : t ? null : /* @__PURE__ */ r(l.div, { ref: o, ...m });
+  ] }) : t ? null : /* @__PURE__ */ r(l.div, { ref: o, ...a });
 };
+F.displayName = "Toaster";
 export {
-  q as Toaster
+  F as Toaster
 };

package/dist/components/Toaster/Toaster.styles.js

@@ -1,4 +1,4 @@
-import { s as t } from "../../sva-OmxClA9g.js";
+import { s as t } from "../../sva-CsHRIRDW.js";
 const n = t({
   slots: ["root"],
   base: {

package/dist/components/Toaster/ToasterProvider.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import { ToasterProps } from './Toaster';
+export interface IressToasterProviderProps extends Omit<ToasterProps, 'toasts'>, PropsWithChildren {
+    /**
+     * A unique identifier for the toaster provider.
+     * This is useful if you have multiple toaster providers in your application based on context.
+     */
+    id?: string;
+}
+export declare const IressToasterProvider: {
+    ({ children, id, position, ...restProps }: IressToasterProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Toaster/ToasterProvider.js

@@ -1,51 +1,52 @@
 import { jsxs as x, jsx as g } from "react/jsx-runtime";
-import { useState as C, useCallback as a, useMemo as h, useEffect as j } from "react";
-import { Toaster as v } from "./Toaster.js";
-import { registerToaster as w, unregisterToaster as I } from "./helpers/toasterRegister.js";
-import { ToasterContext as P } from "./hooks/useToaster.js";
-const S = ({
-  children: d,
+import { useState as v, useCallback as u, useMemo as C, useEffect as I } from "react";
+import { Toaster as P } from "./Toaster.js";
+import { registerToaster as h, unregisterToaster as j } from "./helpers/toasterRegister.js";
+import { ToasterContext as w } from "./hooks/useToaster.js";
+const b = ({
+  children: l,
   id: s,
   position: n,
   ...p
 }) => {
-  const [T, m] = C([]), i = a(
-    (t, r) => {
-      m((e) => (e?.find((o) => o.id === t)?.onClose?.(r), e?.filter((o) => o.id !== t)));
+  const [T, a] = v([]), c = u(
+    (r, t) => {
+      a((e) => (e?.find((o) => o.id === r)?.onClose?.(t), e?.filter((o) => o.id !== r)));
     },
     []
-  ), f = a(
-    (t, r) => {
-      const e = r.id ?? `${(/* @__PURE__ */ new Date()).getTime()}`, c = n?.includes("top");
-      return m((o = []) => [
-        ...c ? [] : o,
-        { ...r, id: e, status: t },
-        ...c ? o : []
+  ), d = u(
+    (r, t) => {
+      const e = t.id ?? `${(/* @__PURE__ */ new Date()).getTime()}`, i = n?.includes("top");
+      return a((o = []) => [
+        ...i ? [] : o,
+        { ...t, id: e, status: r },
+        ...i ? o : []
       ]), e;
     },
     [n]
-  ), l = a((t) => {
-    m(
-      (r) => r?.map(
-        (e) => e.id === t ? { ...e, timeout: 100 } : e
+  ), f = u((r) => {
+    a(
+      (t) => t?.map(
+        (e) => e.id === r ? { ...e, timeout: 100 } : e
       )
     );
-  }, []), u = h(
+  }, []), m = C(
     () => ({
-      close: l,
-      remove: i,
-      show: f
+      close: f,
+      remove: c,
+      show: d
     }),
-    [l, i, f]
+    [f, c, d]
   );
-  return j(() => {
+  return I(() => {
     if (s)
-      return w(s, u), () => I(s);
-  }, [s, u]), /* @__PURE__ */ x(P.Provider, { value: u, children: [
-    d,
-    /* @__PURE__ */ g(v, { id: s, position: n, ...p, toasts: T })
+      return h(s, m), () => j(s);
+  }, [s, m]), /* @__PURE__ */ x(w.Provider, { value: m, children: [
+    l,
+    /* @__PURE__ */ g(P, { id: s, position: n, ...p, toasts: T })
   ] });
 };
+b.displayName = "IressToasterProvider";
 export {
-  S as IressToasterProvider
+  b as IressToasterProvider
 };

package/dist/components/Toaster/components/Toast/Toast.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { IressAlertProps } from '../../../Alert';
+export interface ToastProps extends Omit<IressAlertProps, 'children' | 'content' | 'multiLine' | 'variant'> {
+    /**
+     * The animation of the toast. If not provided, it will simply fade in and out.
+     */
+    animation?: 'start-x' | 'end-x' | 'start-y' | 'end-y';
+    /**
+     * Contents of the toast.
+     */
+    content?: ReactNode;
+    /**
+     * Called when the element timed out.
+     */
+    onTimeout?: () => void;
+    /**
+     * The amount of time, in milliseconds, the toast is displayed on screen without
+     * the users interaction. Will fall back to timeout prop on parent toaster and then
+     * the default time of 6000ms. If set to 0, the toast will not auto dismiss.
+     * @default 6000
+     */
+    timeout?: number;
+}
+export declare const Toast: {
+    ({ animation, className, content, onClose, onTimeout, timeout, ...restProps }: ToastProps): false | import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};