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

package/dist/components/Modal/Modal.js

@@ -1,8 +1,8 @@
-import { jsx as n, jsxs as w } from "react/jsx-runtime";
-import { useState as Z, useEffect as N, useMemo as oo } from "react";
-import "../../Button-mmhMLwp9.js";
+import { jsx as n, jsxs as v } from "react/jsx-runtime";
+import { useState as Z, useEffect as w, useMemo as oo } from "react";
+import "../../Button-C0p8bEXn.js";
 import { IressCloseButton as eo } from "../Button/CloseButton/CloseButton.js";
-import { u as to, b as ro, c as so, d as no, e as ao, F as io, f as lo, g as co } from "../../floating-ui.react-BetVZ099.js";
+import { u as to, b as so, c as ro, d as no, e as ao, F as io, f as lo, g as co } from "../../floating-ui.react-B0nDXRN6.js";
 import { idsLogger as mo } from "../../helpers/utility/idsLogger.js";
 import { propagateTestid as l } from "../../helpers/utility/propagateTestid.js";
 import { useIdIfNeeded as fo } from "../../hooks/useIdIfNeeded.js";
@@ -11,11 +11,11 @@ import { IressText as po } from "../Text/Text.js";
 import { useProviderModal as go } from "./hooks/useProviderModal.js";
 import { modal as ho } from "./Modal.styles.js";
 import { c as C } from "../../cx-DN21T1EH.js";
-import { s as u } from "../../factory-oPXoMw9H.js";
-import { s as bo } from "../../is-valid-prop-Ce0wiweq.js";
+import { s as u } from "../../factory-CcYfm2kB.js";
+import { s as bo } from "../../is-valid-prop-C5D641yn.js";
 import { GlobalCSSClass as p } from "../../enums.js";
 import { getTransitionDuration as yo } from "../../helpers/transition/getTransitionDuration.js";
-const Ro = ({
+const Io = ({
   children: P,
   className: k,
   closeText: S,
@@ -33,97 +33,98 @@ const Ro = ({
   onStatus: b,
   onTransitionEnd: _,
   show: c,
+  size: $ = "md",
   static: a,
-  style: $,
+  style: G,
   ...m
 }) => {
-  const [G, L] = Z(E);
+  const [L, U] = Z(E);
   let y = 240;
-  const s = go(m.id), F = fo({ id: m.id }), f = `${F}--heading`, U = s.opened || c || G, I = (o) => {
-    s.show(o), L(o), R?.(o);
+  const r = go(m.id), I = fo({ id: m.id }), f = `${I}--heading`, q = r.opened || c || L, F = (o) => {
+    r.show(o), U(o), R?.(o);
   }, { context: e } = to({
-    open: U,
-    onOpenChange: I
-  }), q = ro(e, {
+    open: q,
+    onOpenChange: F
+  }), z = so(e, {
     enabled: !B,
     outsidePress: (o) => !o.target.closest(`.${p.Toaster}`),
     outsidePressEvent: "mousedown"
-  }), z = so(e), A = no([q, z]);
+  }), A = ro(e), H = no([z, A]);
   e.refs.floating.current && (y = yo(
     e.refs.floating.current,
     1.2,
     240
   ));
-  const { isMounted: H, status: i } = ao(e, {
+  const { isMounted: J, status: i } = ao(e, {
     duration: {
       close: y
     }
-  }), r = ho({
+  }), s = ho({
     fixedFooter: T,
+    size: $,
     static: a,
     status: i
-  }), [J, K] = bo(m), { p: v = "lg", width: Q = "overlay.md", ...V } = J;
-  N(() => {
-    s.opened && c && mo(
+  }), [K, Q] = bo(m), { p: M = "lg", ...V } = K;
+  w(() => {
+    r.opened && c && mo(
       "IressModal: Please use either IressModalProvider for uncontrolled components, or the show prop for controlled components, rather than both. If you use both, the open state of the modal will become unpredictable. If you want to show a modal by default in uncontrolled mode, use the defaultShow prop."
     );
-  }, [s.opened, c]), N(() => {
+  }, [r.opened, c]), w(() => {
     b?.(i);
   }, [i, b]);
   const x = oo(() => typeof d == "string" ? /* @__PURE__ */ n(
     po,
     {
-      className: r.header,
+      className: s.header,
       id: f,
       element: "h2",
       "data-testid": l(t, "heading"),
       children: d
     }
-  ) : d, [t, f, d, r.header]), W = (o) => {
+  ) : d, [t, f, d, s.header]), W = (o) => {
     _?.(o), !(!(o.propertyName === "opacity" || !o.propertyName) || o.target !== o.currentTarget) && (i === "open" ? (D?.(), a || e.refs.floating?.current?.focus()) : i === "close" && O?.());
   };
-  if (!H) return null;
-  const M = /* @__PURE__ */ n(
+  if (!J) return null;
+  const N = /* @__PURE__ */ n(
     io,
     {
-      className: C(k, r.backdrop, p.ModalBackdrop),
+      className: C(k, s.backdrop, p.ModalBackdrop),
       "data-testid": l(t, "backdrop"),
       lockScroll: !a,
-      style: $,
+      style: G,
       children: /* @__PURE__ */ n(
         lo,
         {
           context: e,
           initialFocus: e.refs.floating,
           disabled: a,
-          children: /* @__PURE__ */ w(
+          children: /* @__PURE__ */ v(
             u.div,
             {
               ref: (o) => e.refs.setFloating(o),
-              className: C(r.modal, uo(), p.Modal),
-              id: F,
+              className: C(s.modal, uo(), p.Modal),
+              id: I,
               "data-testid": t,
               "aria-labelledby": x ? f : void 0,
-              ...A.getFloatingProps(K),
+              ...H.getFloatingProps(Q),
               ...V,
-              w: Q,
               onTransitionEnd: W,
               children: [
                 !j && /* @__PURE__ */ n(
                   eo,
                   {
-                    onClick: () => I(!1),
+                    onClick: () => F(!1),
                     screenreaderText: S,
-                    className: r.closeButton,
+                    className: s.closeButton,
                     "data-testid": l(t, "close-button__button")
                   }
                 ),
-                /* @__PURE__ */ w(
+                /* @__PURE__ */ v(
                   u.div,
                   {
-                    className: r.content,
+                    className: s.content,
                     "data-testid": l(t, "content"),
-                    p: v,
+                    p: M,
                     children: [
                       x,
                       P
@@ -133,9 +134,9 @@ const Ro = ({
                 h && /* @__PURE__ */ n(
                   u.div,
                   {
-                    className: r.footer,
+                    className: s.footer,
                     "data-testid": l(t, "footer"),
-                    p: v,
+                    p: M,
                     children: h
                   }
                 )
@@ -145,9 +146,10 @@ const Ro = ({
         }
       )
     }
-  ), X = g ?? s?.container;
-  return a && !X ? M : /* @__PURE__ */ n(co, { root: g ?? s?.container, children: M });
+  ), X = g ?? r?.container;
+  return a && !X ? N : /* @__PURE__ */ n(co, { root: g ?? r?.container, children: N });
 };
+Io.displayName = "IressModal";
 export {
-  Ro as IressModal
+  Io as IressModal
 };

package/dist/components/Modal/Modal.styles.d.ts

@@ -0,0 +1,110 @@
+/**
+ * The atomic recipe is a function that takes a variant and returns a class name object. It can be used to create a component without JSX (eg. as a utility class).
+ *
+ * [Learn more](https://panda-css.com/docs/concepts/recipes#atomic-recipe-or-cva)
+ */
+export declare const modal: import('../../styled-system/types').SlotRecipeRuntimeFn<"footer" | "header" | "content" | "modal" | "backdrop" | "closeButton" | "pushElement", {
+    /**
+     * When set to `true` the modal's footer will always be visible and fixed to the bottom of the modal.
+     */
+    fixedFooter: {
+        true: {
+            modal: {
+                display: "flex";
+                flexDirection: "column";
+                maxHeight: "[calc(100vh - ({spacing.spacing.7} * 2))]";
+                '@media (min-height: 600px)': {
+                    maxHeight: "[calc(100vh - (100px * 2))]";
+                };
+                overflow: "clip";
+            };
+            content: {
+                flex: "[1]";
+                overflowX: "hidden";
+                maxHeight: "[calc(100vh - ({spacing.spacing.7} * 2))]";
+                '@media (min-height: 600px)': {
+                    maxHeight: "[calc(100vh - (100px * 2))]";
+                };
+            };
+            footer: {
+                flex: "[0]";
+            };
+        };
+    };
+    /**
+     * Size of the modal
+     * - `sm`: Small modals communicate the outcome of an irreversible action. They should be concise and straightforward, containing a single action and, in some cases, a single input field.
+     * - `md`: Medium modals provide optional supporting information to help users understand the context of a word or screen. They may contain a single action and, in some cases, a larger input such as a textarea.
+     * - `lg`: Large modals are used for more complex tasks that require multiple steps or a lot of information as well as media such as video and PDF documents. They can contain multiple actions, inputs, and supporting information.
+     */
+    size: {
+        sm: {
+            modal: {
+                width: "overlay.sm";
+            };
+        };
+        md: {
+            modal: {
+                width: "overlay.md";
+            };
+        };
+        lg: {
+            modal: {
+                width: "overlay.lg";
+            };
+        };
+    };
+    /**
+     * The state of the modal.
+     */
+    status: {
+        initial: {
+            backdrop: {
+                bg: "transparent";
+            };
+            modal: {
+                opacity: number;
+            };
+        };
+        close: {
+            backdrop: {
+                bg: "transparent";
+            };
+            modal: {
+                opacity: number;
+            };
+        };
+        open: {
+            backdrop: {
+                bg: "colour.globalInteractions.backdrop";
+                'backdrop-filter': string;
+            };
+            modal: {
+                opacity: number;
+            };
+        };
+        unmounted: {
+            backdrop: {
+                display: "none";
+            };
+            modal: {
+                display: "none";
+            };
+        };
+    };
+    /**
+     * When set to `true`, the modal will act like a static element when open.
+     * This means it will not lock scroll or focus within the modal.
+     * Note: This is used internally to display modals in Styler. It is not recommended to use this prop in your own applications.
+     */
+    static: {
+        true: {
+            backdrop: {
+                position: "static !important";
+            };
+            modal: {
+                position: "relative";
+            };
+        };
+    };
+}>;

package/dist/components/Modal/Modal.styles.js

@@ -1,4 +1,4 @@
-import { s as a } from "../../sva-OmxClA9g.js";
+import { s as a } from "../../sva-CsHRIRDW.js";
 const o = [
   "modal",
   "backdrop",
@@ -7,7 +7,7 @@ const o = [
   "content",
   "footer",
   "pushElement"
-], t = a({
+], i = a({
   slots: o,
   base: {
     backdrop: {
@@ -19,20 +19,27 @@ const o = [
       top: "spacing.2",
       right: "spacing.2"
     },
+    content: {
+      scrollable: "y"
+    },
     header: {
-      mb: "spacing.4"
+      textStyle: "typography.heading.3",
+      mb: "spacing.4",
+      color: "colour.neutral.90"
     },
     footer: {
-      borderBlockStart: "divider"
+      textAlign: "right"
     },
     modal: {
+      // Performance: CSS containment (no paint due to fixed positioning)
+      contain: "layout style",
       position: "relative",
       borderRadius: "radius.system.layout",
+      border: "table",
       padding: "spacing.0",
       width: "overlay.md",
       maxWidth: "[calc(100vw - ({spacing.spacing.7}))]",
       minHeight: "auto",
-      layerStyle: "elevation.floating",
       background: "colour.neutral.10",
       outline: "[0]",
       opacity: 0,
@@ -62,7 +69,6 @@ const o = [
         content: {
           flex: "[1]",
           overflowX: "hidden",
-          overflowY: "auto",
           maxHeight: "[calc(100vh - ({spacing.spacing.7} * 2))]",
           "@media (min-height: 600px)": {
             maxHeight: "[calc(100vh - (100px * 2))]"
@@ -73,6 +79,29 @@ const o = [
         }
       }
     },
+    /**
+     * Size of the modal
+     * - `sm`: Small modals communicate the outcome of an irreversible action. They should be concise and straightforward, containing a single action and, in some cases, a single input field.
+     * - `md`: Medium modals provide optional supporting information to help users understand the context of a word or screen. They may contain a single action and, in some cases, a larger input such as a textarea.
+     * - `lg`: Large modals are used for more complex tasks that require multiple steps or a lot of information as well as media such as video and PDF documents. They can contain multiple actions, inputs, and supporting information.
+     */
+    size: {
+      sm: {
+        modal: {
+          width: "overlay.sm"
+        }
+      },
+      md: {
+        modal: {
+          width: "overlay.md"
+        }
+      },
+      lg: {
+        modal: {
+          width: "overlay.lg"
+        }
+      }
+    },
     /**
      * The state of the modal.
      */
@@ -95,7 +124,8 @@ const o = [
       },
       open: {
         backdrop: {
-          bg: "colour.system.backdrop.fill"
+          bg: "colour.globalInteractions.backdrop",
+          "backdrop-filter": "[blur(2px)]"
         },
         modal: {
           opacity: 1
@@ -128,5 +158,5 @@ const o = [
   }
 });
 export {
-  t as modal
+  i as modal
 };

package/dist/components/Modal/ModalProvider.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import { FloatingUIContainer } from '../../types';
+export interface IressModalProviderProps extends PropsWithChildren {
+    /**
+     * The container element to render the modal into.
+     * By default, the modal will render at the end of the document body.
+     */
+    container?: FloatingUIContainer;
+}
+export declare const IressModalProvider: {
+    ({ children, container, }: IressModalProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Modal/ModalProvider.js

@@ -1,32 +1,33 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useState as i, useCallback as t, useMemo as p } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { useState as f, useCallback as s, useMemo as p } from "react";
 import { ModalContext as M } from "./hooks/useModal.js";
-const b = ({
-  children: a,
-  container: s
+const x = ({
+  children: u,
+  container: t
 }) => {
-  const [r, n] = i([]), l = t((e) => {
-    n((o) => o.includes(e) ? [...o] : [...o, e]);
-  }, []), u = t((e) => {
-    n(
+  const [r, l] = f([]), n = s((e) => {
+    l((o) => o.includes(e) ? [...o] : [...o, e]);
+  }, []), a = s((e) => {
+    l(
       (o) => o.includes(e) ? o.filter((m) => m !== e) : [...o]
     );
-  }, []), c = t(
+  }, []), d = s(
     (e, o = !0) => {
-      if (o) return l(e);
-      u(e);
+      if (o) return n(e);
+      a(e);
     },
-    [u, l]
-  ), d = p(
+    [a, n]
+  ), c = p(
     () => ({
       opened: r,
-      container: s,
-      showModal: c
+      container: t,
+      showModal: d
     }),
-    [s, r, c]
+    [t, r, d]
   );
-  return /* @__PURE__ */ f(M.Provider, { value: d, children: a });
+  return /* @__PURE__ */ i(M.Provider, { value: c, children: u });
 };
+x.displayName = "IressModalProvider";
 export {
-  b as IressModalProvider
+  x as IressModalProvider
 };

package/dist/components/Panel/Panel.d.ts

@@ -0,0 +1,6 @@
+import { IressCardProps } from '../Card';
+export type IressPanelProps = IressCardProps;
+export declare const IressPanel: {
+    ({ className, children, ...restProps }: IressPanelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Panel/Panel.js

@@ -1,10 +1,14 @@
-import { jsx as s } from "react/jsx-runtime";
-import { panel as m } from "./Panel.styles.js";
-import { s as t } from "../../factory-oPXoMw9H.js";
-import { IressText as e } from "../Text/Text.js";
-import { c as a } from "../../cx-DN21T1EH.js";
-import { GlobalCSSClass as p } from "../../enums.js";
-const l = t(e, m), I = ({ className: o, ...r }) => /* @__PURE__ */ s(l, { ...r, className: a(o, p.Panel) });
+import { jsx as a } from "react/jsx-runtime";
+import { c as m } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as e } from "../../enums.js";
+import { IressCard as l } from "../Card/Card.js";
+import "../Card/Card.styles.js";
+const p = ({
+  className: r,
+  children: s,
+  ...o
+}) => /* @__PURE__ */ a(l, { ...o, className: m(r, e.Panel), children: s });
+p.displayName = "IressPanel";
 export {
-  I as IressPanel
+  p as IressPanel
 };

package/dist/components/Panel/index.d.ts

@@ -0,0 +1 @@
+export * from './Panel';

package/dist/components/Panel/index.js

@@ -1,6 +1,4 @@
 import { IressPanel as o } from "./Panel.js";
-import { panel as a } from "./Panel.styles.js";
 export {
-  o as IressPanel,
-  a as panel
+  o as IressPanel
 };

package/dist/components/Pill/Pill.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { IressStyledProps } from '../../types';
+export interface IressPillProps extends IressStyledProps<'span'> {
+    /**
+     * Content of the badge.
+     */
+    children?: ReactNode;
+    /**
+     * Style of the badge, based on the data colour palette (10-90) or system status colours (danger, info, success, warning).
+     * Can be a number (10-90), a string ('10'-'90'), or a system status ('danger', 'info', 'success', 'warning').
+     * @default '90'
+     */
+    mode?: 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | 'danger' | 'info' | 'success' | 'warning';
+}
+export declare const IressPill: {
+    ({ children, mode, className, ...restProps }: IressPillProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Pill/Pill.js

@@ -0,0 +1,29 @@
+import { jsx as i } from "react/jsx-runtime";
+import { c as a } from "../../css-DVJ-ALYD.js";
+import { c as e } from "../../cx-DN21T1EH.js";
+import { pill as c } from "./Pill.styles.js";
+import { s as f } from "../../factory-CcYfm2kB.js";
+import { s as n } from "../../is-valid-prop-C5D641yn.js";
+import { GlobalCSSClass as P } from "../../enums.js";
+const y = ({
+  children: s,
+  mode: o = "90",
+  className: r,
+  ...l
+}) => {
+  const t = c.raw({
+    mode: o
+  }), [m, p] = n(l);
+  return /* @__PURE__ */ i(
+    f.span,
+    {
+      ...p,
+      className: e(a(t, m), r, P.Pill),
+      children: s
+    }
+  );
+};
+y.displayName = "IressPill";
+export {
+  y as IressPill
+};

package/dist/components/Pill/Pill.styles.d.ts

@@ -0,0 +1,56 @@
+export declare const pill: import('../../styled-system/types').RecipeRuntimeFn<{
+    mode: {
+        '10': {
+            bg: "colour.data.bold.10";
+            color: "colour.data.subtle.10";
+        };
+        '20': {
+            bg: "colour.data.bold.20";
+            color: "colour.data.subtle.20";
+        };
+        '30': {
+            bg: "colour.data.bold.30";
+            color: "colour.data.subtle.30";
+        };
+        '40': {
+            bg: "colour.data.bold.40";
+            color: "colour.data.subtle.40";
+        };
+        '50': {
+            bg: "colour.data.bold.50";
+            color: "colour.data.subtle.50";
+        };
+        '60': {
+            bg: "colour.data.bold.60";
+            color: "colour.data.subtle.60";
+        };
+        '70': {
+            bg: "colour.data.bold.70";
+            color: "colour.data.subtle.70";
+        };
+        '80': {
+            bg: "colour.data.bold.80";
+            color: "colour.data.subtle.80";
+        };
+        '90': {
+            bg: "colour.data.bold.90";
+            color: "colour.data.subtle.90";
+        };
+        danger: {
+            bg: "colour.system.danger.fill";
+            color: "colour.system.danger.onFill";
+        };
+        info: {
+            bg: "colour.system.info.fill";
+            color: "colour.system.info.onFill";
+        };
+        success: {
+            bg: "colour.system.success.fill";
+            color: "colour.system.success.onFill";
+        };
+        warning: {
+            bg: "colour.system.warning.fill";
+            color: "colour.system.warning.onFill";
+        };
+    };
+}>;