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

package/dist/components/Popover/hooks/usePopoverNavigation.js

@@ -1,32 +1,33 @@
-import { useMemo as r, useState as O, useEffect as N, useRef as c } from "react";
-import { x as R } from "../../../floating-ui.react-BetVZ099.js";
-const b = (s, e, o, m, u = 0) => {
-  const t = r(
+import { useMemo as f, useState as I, useEffect as N, useRef as c } from "react";
+import { x as R } from "../../../floating-ui.react-B0nDXRN6.js";
+const p = (o, e, s, m, u = 0) => {
+  const t = f(
     () => !!(e && ["menu", "listbox"].includes(e)),
     [e]
-  ), l = r(() => t ? o?.focusItemOnOpen : !1, [o?.focusItemOnOpen, t]), [i, n] = O(null);
+  ), l = f(() => t ? s?.focusItemOnOpen : !1, [s?.focusItemOnOpen, t]), [i, n] = I(null);
   N(() => {
-    s.open ? n(l ? u : null) : n(null);
-  }, [s.open, l, u]);
-  const a = c([]), v = c(null), I = R(s, {
-    ...o,
+    o.open ? n(l ? u : null) : n(null);
+  }, [o.open, l, u]);
+  const a = c([]), v = c(null), O = R(o, {
+    ...s,
     activeIndex: i,
     enabled: t,
     focusItemOnHover: !1,
     listRef: a,
     loop: e === "menu",
-    onNavigate: (f) => {
-      n(f), m?.(f);
+    openOnArrowKeyDown: !1,
+    onNavigate: (r) => {
+      n(r), m?.(r);
     },
     virtualItemRef: v
   });
   return {
     activeIndex: i,
     list: a,
-    listNav: I,
+    listNav: O,
     setActiveIndex: n
   };
 };
 export {
-  b as usePopoverNavigation
+  p as usePopoverNavigation
 };

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

@@ -0,0 +1,8 @@
+export * from './Popover';
+export * from './Popover.styles';
+export * from './InputPopover/InputPopover';
+export * from './hooks/usePopover';
+export * from './hooks/usePopoverItem';
+export type { PopoverAriaHookReturn } from './hooks/usePopoverAria';
+export type { FloatingPopoverHookReturn } from './hooks/useFloatingPopover';
+export type * from './hooks/usePopoverImperativeHandle';

package/dist/components/Popover/index.js

@@ -1,10 +1,12 @@
 import { IressPopover as e } from "./Popover.js";
 import { popover as t } from "./Popover.styles.js";
 import { IressInputPopover as s } from "./InputPopover/InputPopover.js";
-import { usePopoverItem as v } from "./hooks/usePopoverItem.js";
+import { usePopover as v } from "./hooks/usePopover.js";
+import { usePopoverItem as I } from "./hooks/usePopoverItem.js";
 export {
   s as IressInputPopover,
   e as IressPopover,
   t as popover,
-  v as usePopoverItem
+  v as usePopover,
+  I as usePopoverItem
 };

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,52 @@
+import { CSSProperties } from 'react';
+import { IressStyledProps } from '../../types';
+import { UtilityValues } from '../../styled-system/types/prop-type';
+type ProgressElement<TMin extends number | undefined = undefined> = TMin extends number ? 'meter' : 'progress';
+/**
+ * The component will render as a `<progress>` element by default, but if the `min` prop is set, it will render as a `<meter>` element instead. This is useful for indicating a measurement that is not necessarily a progress bar.
+ * If you are using `IressProgressProps` in your own components, make sure to set the correct generic type for `TMin` to ensure that the correct element attributes are used.
+ *
+ * Examples:
+ * - `IressProgressProps<undefined>` will use the attributes of a `<progress />` element.
+ * - `IressProgressProps<0>` will use the attributes of a `<meter />` element.
+ */
+export type IressProgressProps<TMin extends number | undefined = undefined> = Omit<IressStyledProps<ProgressElement<TMin>>, 'borderRadius' | 'value'> & {
+    /**
+     * A background image URL to be used as the background of the progress bar.
+     */
+    backgroundImage?: string;
+    /**
+     * The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
+     * @see https://developer.mozilla.org/docs/Web/CSS/border-radius
+     */
+    borderRadius?: UtilityValues['borderRadius'];
+    /**
+     * The maximum value of the progress indicator.
+     * @default 100
+     **/
+    max?: number;
+    /**
+     * The minimum value of the progress indicator. If `min` is set, the progress indicator will render as a `<meter />` element instead of a `<progress />` element, thereby changing its role to `meter` instead of `progressbar`.
+     * @default 0
+     **/
+    min?: TMin;
+    /**
+     * The text that is announced by the screen reader. Should contain a description of the section the progress is being measured for. You can use {{current}} and {{max}} as string replacers for the current value and maximum value respectively.
+     * @default "Progress is {{current}} of {{max}}"
+     */
+    sectionTitle?: string;
+    /**
+     * The current value of the progress indicator.
+     * @default 0
+     **/
+    value?: number;
+};
+export interface ProgressCustomCSSProperties extends CSSProperties {
+    '--iress-border-radius'?: string;
+    '--iress-background-image'?: string;
+}
+export declare const IressProgress: {
+    <TMin extends number | undefined = undefined>({ backgroundImage, borderRadius, className: classNameProp, max, min, sectionTitle, style: styleProp, value, ...restProps }: IressProgressProps<TMin>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/Progress/Progress.js

@@ -1,56 +1,59 @@
-import { jsx as m } from "react/jsx-runtime";
-import { stringReplacer as v } from "../../helpers/formatting/stringReplacer.js";
-import { c as P } from "../../css-fGu_jDvv.js";
+import { jsx as n } from "react/jsx-runtime";
+import { stringReplacer as P } from "../../helpers/formatting/stringReplacer.js";
+import { c as y } from "../../css-DVJ-ALYD.js";
 import { c as S } from "../../cx-DN21T1EH.js";
-import { progress as y } from "./Progress.styles.js";
-import { s as n } from "../../factory-oPXoMw9H.js";
-import { s as b } from "../../is-valid-prop-Ce0wiweq.js";
-import { GlobalCSSClass as x } from "../../enums.js";
-import { t as C } from "../../index-CZ9ot38T.js";
-const V = ({
-  borderRadius: e,
-  className: p,
+import { progress as b } from "./Progress.styles.js";
+import { s as p } from "../../factory-CcYfm2kB.js";
+import { s as x } from "../../is-valid-prop-C5D641yn.js";
+import { GlobalCSSClass as C } from "../../enums.js";
+import { t as N } from "../../index-BPhnth66.js";
+const h = ({
+  backgroundImage: e,
+  borderRadius: t,
+  className: c,
   max: r = 100,
   min: s,
-  sectionTitle: c = "Progress is {{current}} of {{max}}",
-  style: f,
-  value: u = 0,
-  ...g
+  sectionTitle: f = "Progress is {{current}} of {{max}}",
+  style: u,
+  value: g = 0,
+  ...d
 }) => {
-  const [d, t] = b(g), a = S(
-    p,
-    P(y.raw(), d),
-    x.Progress
-  ), o = Math.min(Math.max(u, s ?? 0), r), i = () => v(c, [
+  const [v, a] = x(d), i = S(
+    c,
+    y(b.raw(), v),
+    C.Progress
+  ), o = Math.min(Math.max(g, s ?? 0), r), l = () => P(f, [
     { name: "{{current}}", value: String(o) },
     { name: "{{max}}", value: r.toString() }
-  ]), l = {
-    "--iress-border-radius": e ? C(`radii.${e}`) : void 0,
-    ...f
+  ]), m = {
+    "--iress-border-radius": t ? N(`radii.${t}`) : void 0,
+    "--iress-background-image": e ? `url(${e})` : void 0,
+    ...u
   };
-  return s !== void 0 ? /* @__PURE__ */ m(
-    n.meter,
+  return s !== void 0 ? /* @__PURE__ */ n(
+    p.meter,
     {
-      "aria-label": i(),
-      className: a,
+      "aria-label": l(),
+      className: i,
       max: r,
       min: s,
       value: o,
-      ...t,
-      style: l
+      ...a,
+      style: m
     }
-  ) : /* @__PURE__ */ m(
-    n.progress,
+  ) : /* @__PURE__ */ n(
+    p.progress,
     {
-      "aria-label": i(),
-      className: a,
+      "aria-label": l(),
+      className: i,
       max: r,
       value: o,
-      ...t,
-      style: l
+      ...a,
+      style: m
     }
   );
 };
+h.displayName = "IressProgress";
 export {
-  V as IressProgress
+  h as IressProgress
 };

package/dist/components/Progress/Progress.styles.js

@@ -1,9 +1,11 @@
-import { c as r } from "../../cva-JiDXAa83.js";
+import { c as r } from "../../cva-3iuaj0TL.js";
 const e = r({
   base: {
+    // Performance: CSS containment limits style recalculation scope
+    contain: "layout style paint",
     appearance: "none",
     bg: "colour.neutral.40",
-    color: "colour.neutral.50",
+    color: "colour.primary.fill",
     display: "block",
     height: "progress.height",
     width: "[100%]",
@@ -18,6 +20,9 @@ const e = r({
     _progressValue: {
       appearance: "none",
       bg: "[currentColor]",
+      backgroundImage: "var(--iress-background-image)",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
       borderRadius: "var(--iress-border-radius)",
       margin: "spacing.0",
       transition: "all"
@@ -25,6 +30,9 @@ const e = r({
     _mozProgressValue: {
       appearance: "none",
       bg: "[currentColor]",
+      backgroundImage: "var(--iress-background-image)",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
       borderRadius: "var(--iress-border-radius)",
       margin: "spacing.0",
       transition: "all"

package/dist/components/Provider/Provider.d.ts

@@ -0,0 +1,31 @@
+import { FloatingUIContainer } from '../../types';
+import { ReactNode } from 'react';
+import { IressToasterProviderProps } from '../Toaster';
+import { IressSlideoutProviderProps } from '../Slideout';
+import { IressIconProviderProps } from '../Icon';
+export interface IressProviderProps extends IressSlideoutProviderProps, Pick<IressToasterProviderProps, 'position'> {
+    /**
+     * The contents of your application, and/or the components which will be calling slideouts, modals and toasts.
+     */
+    children?: ReactNode;
+    /**
+     * Container to render modal, slideouts and toasts into.
+     * If not provided, will render into the body of the document.
+     */
+    container?: FloatingUIContainer;
+    /**
+     * Disable automatic font subsetting via Google Fonts CDN
+     * When false, only icons actually used in the component tree are loaded
+     * When true, the full Material Symbols font is loaded
+     * @default false
+     */
+    noSubsetting?: IressIconProviderProps['noSubsetting'];
+    /**
+     * If you don't want to load the default Iress font from the CDN, set this to true.
+     */
+    noDefaultFont?: boolean;
+}
+export declare const IressProvider: {
+    ({ children, container, noDefaultFont, position, ...restProps }: IressProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Provider/Provider.js

@@ -1,20 +1,21 @@
 import "react/jsx-runtime";
 import "../Modal/Modal.styles.js";
-import "react";
-import "../../Button-mmhMLwp9.js";
-import "../Button/CloseButton/CloseButton.js";
-import "../Modal/hooks/useModal.js";
+import "../Modal/Modal.js";
 import "../Modal/ModalProvider.js";
+import "../Modal/hooks/useModal.js";
 import "../Toaster/ToasterProvider.js";
 import "../Toaster/hooks/useToaster.js";
 import "../Toaster/Toaster.styles.js";
 import "../Toaster/components/Toast/Toast.styles.js";
+import "../Slideout/Slideout.js";
 import "../Slideout/Slideout.styles.js";
-import "../../index-CZ9ot38T.js";
-import "../Slideout/hooks/useSlideout.js";
 import "../Slideout/SlideoutProvider.js";
+import "../Slideout/hooks/useSlideout.js";
 import "react-dom";
-import { I as h } from "../../Provider-8wS70V56.js";
+import { I as j } from "../../Provider-uPW2d6U5.js";
+import "../Icon/Icon.js";
+import "../Icon/Icon.styles.js";
+import "../Icon/IconProvider.js";
 export {
-  h as IressProvider
+  j as IressProvider
 };

package/dist/components/Provider/index.js

@@ -1,4 +1,4 @@
-import { I as o } from "../../Provider-8wS70V56.js";
+import { I as o } from "../../Provider-uPW2d6U5.js";
 export {
   o as IressProvider
 };

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode, Ref, ReactElement, ChangeEvent } from 'react';
+import { FormControlValue, IressStyledProps } from '../../types';
+import { CheckboxVariants } from '../Checkbox';
+export interface IressRadioProps<T = FormControlValue, TVariant extends CheckboxVariants = undefined> extends Omit<IressStyledProps<'input'>, 'defaultValue' | 'value'> {
+    /**
+     * Sets the checked state of the radio.
+     * If it is within a radio group, it will be overridden by the radio group's value
+     * and whether it matches this radio's value.
+     */
+    checked?: boolean;
+    /**
+     * Label of the radio
+     */
+    children?: ReactNode;
+    /**
+     * Sets the heading for the radio when using the `card` variant
+     */
+    heading?: TVariant extends 'card' ? ReactNode : never;
+    /**
+     * Sets the name attribute on the radio input. If it is within a radio group,
+     * it will be overridden with the radio group's name.
+     */
+    name?: string;
+    /**
+     * Handles the onChange event of the radio input.
+     * If you pass in a non-string value, you can access it using the second parameter of the function.
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>, value?: T) => void;
+    /**
+     * If `true`, the radio is a required field and will be validated as such.
+     * If it is within a radio group, it will be overridden with the radio group's
+     * required state.
+     */
+    required?: boolean;
+    /**
+     * The value which is submitted with the form data when this radio button is checked.
+     * To set this radio as checked by default, use the `checked` property.
+     */
+    value?: T;
+    /**
+     * The visual variant of the radio.
+     * - `card`: Provides a larger, card-like style with a heading slot.
+     * - `touch`: Provides a larger, button-like style, great for mobile devices.
+     * - `undefined`: The default radio style.
+     */
+    variant?: TVariant;
+}
+export declare const IressRadio: (<T = FormControlValue, TVariant extends CheckboxVariants = undefined>(props: IressRadioProps<T, TVariant> & {
+    ref?: Ref<HTMLInputElement>;
+}) => ReactElement) & {
+    displayName: "IressRadio";
+};

package/dist/components/Radio/Radio.js

@@ -1,119 +1,116 @@
-import { jsx as e, jsxs as k } from "react/jsx-runtime";
-import { forwardRef as j, useContext as A } from "react";
-import { useControlledState as B } from "../../hooks/useControlledState.js";
-import { useIdIfNeeded as E } from "../../hooks/useIdIfNeeded.js";
-import { propagateTestid as l } from "../../helpers/utility/propagateTestid.js";
-import { IressReadonly as H } from "../Readonly/Readonly.js";
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as A, useContext as P } from "react";
+import { useControlledState as z } from "../../hooks/useControlledState.js";
+import { useIdIfNeeded as B } from "../../hooks/useIdIfNeeded.js";
+import { propagateTestid as h } from "../../helpers/utility/propagateTestid.js";
+import { IressReadonly as D } from "../Readonly/Readonly.js";
 import "../Readonly/Readonly.styles.js";
-import { getFormControlValueAsString as P } from "../../helpers/form/getFormControlValueAsString.js";
-import { c as C } from "../../css-fGu_jDvv.js";
-import { c as z } from "../../cx-DN21T1EH.js";
-import { radio as D } from "./Radio.styles.js";
-import { GlobalCSSClass as p } from "../../enums.js";
-import { IressCheckboxMark as J } from "../CheckboxMark/CheckboxMark.js";
-import "../CheckboxMark/CheckboxMark.styles.js";
-import { getRadioGroupContext as K } from "../RadioGroup/RadioGroup.js";
+import { getFormControlValueAsString as E } from "../../helpers/form/getFormControlValueAsString.js";
+import { c as H } from "../../css-DVJ-ALYD.js";
+import { c as J } from "../../cx-DN21T1EH.js";
+import { radio as y } from "./Radio.styles.js";
+import { GlobalCSSClass as k } from "../../enums.js";
+import { IressRadioMark as K } from "../RadioMark/RadioMark.js";
+import "../RadioMark/RadioMark.styles.js";
+import { getRadioGroupContext as L } from "../RadioGroup/RadioGroup.js";
 import "../RadioGroup/RadioGroup.styles.js";
-import { s as h } from "../../factory-oPXoMw9H.js";
-import { s as L } from "../../is-valid-prop-Ce0wiweq.js";
-import { IressText as Q } from "../Text/Text.js";
-const T = (a) => /* @__PURE__ */ e(
-  h.svg,
-  {
-    version: "1.1",
-    viewBox: "0 0 200 200",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...a,
-    className: p.FormElement,
-    children: /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "70" })
-  }
-), U = ({
-  checked: a,
-  children: u,
+import { s as C } from "../../factory-CcYfm2kB.js";
+import { s as Q } from "../../is-valid-prop-C5D641yn.js";
+import { IressText as g } from "../Text/Text.js";
+const T = ({
+  checked: R,
+  children: p,
   className: x,
-  "data-testid": i,
-  defaultChecked: g,
-  hiddenControl: y,
-  name: R,
-  onChange: w,
-  readOnly: v,
-  required: b,
-  value: r,
-  touch: M,
-  ...n
-}, N) => {
-  const f = E(n), o = A(K()), { value: S, setValue: G } = B({
+  "data-testid": a,
+  defaultChecked: N,
+  heading: s,
+  name: S,
+  onChange: v,
+  readOnly: I,
+  required: G,
+  value: o,
+  variant: O,
+  ...i
+}, b) => {
+  const f = B(i), e = P(L()), { value: q, setValue: w } = z({
     component: "Radio",
-    defaultValue: !!g,
-    value: a,
+    defaultValue: !!N,
+    value: R,
     propName: "checked"
-  }), d = !!o?.onChange, s = d ? o.value === r : S;
-  if (d ? o.readOnly : v)
-    return s ? /* @__PURE__ */ e(
-      H,
+  }), n = !!e?.onChange, t = n ? e.value === o : q;
+  if (n ? e.readOnly : I)
+    return t ? /* @__PURE__ */ r(
+      D,
       {
-        ...n,
+        ...i,
         width: void 0,
-        value: P(r),
-        children: u
+        value: E(o),
+        children: p
       }
     ) : null;
-  const I = o?.name ?? R, c = o?.hiddenRadio ?? y, O = o?.required ?? b, q = o?.touch ?? M, t = D.raw({
-    hiddenControl: c,
-    touch: q,
-    checked: s
-  }), [F, V] = L(n);
-  return /* @__PURE__ */ k(
+  const V = e?.name ?? S, u = O ?? e?.variant, j = e?.required ?? G, d = y({
+    checked: t,
+    variant: u
+  }), m = y.raw({
+    checked: t,
+    variant: u
+  }), [F, M] = Q(i);
+  return /* @__PURE__ */ l(
     "div",
     {
-      "data-testid": i,
-      className: z(
+      "data-testid": a,
+      className: J(
         x,
-        C(t.root, F),
-        p.Group,
-        p.Radio
+        H(m.root, F),
+        k.Group,
+        k.Radio
       ),
       children: [
-        /* @__PURE__ */ e(
-          h.input,
+        /* @__PURE__ */ r(
+          C.input,
           {
-            ...V,
-            ...t.input,
+            ...M,
+            ...m.input,
             type: "radio",
             id: f,
-            name: I,
-            ref: N,
-            "data-testid": l(i, "input"),
-            onChange: (m) => {
-              d || G(m.target.checked), w?.(m, r), o?.onChange?.(m, r);
+            name: V,
+            ref: b,
+            "data-testid": h(a, "input"),
+            onChange: (c) => {
+              n || w(c.target.checked), v?.(c, o), e?.onChange?.(c, o);
             },
-            value: String(r),
-            checked: s,
-            required: O
+            value: String(o),
+            checked: t,
+            required: j
           }
         ),
-        /* @__PURE__ */ k(h.label, { htmlFor: f, ...t.label, children: [
-          !c && /* @__PURE__ */ e(
-            T,
+        /* @__PURE__ */ l(C.label, { htmlFor: f, ...m.label, children: [
+          /* @__PURE__ */ r(
+            K,
             {
-              ...t.radioMark,
-              "data-testid": l(i, "radioMark")
+              checked: t,
+              "data-testid": h(a, "radioMark"),
+              className: d.mark
             }
           ),
-          c && /* @__PURE__ */ e(
-            J,
-            {
-              className: C(t.checkboxMark),
-              checked: s,
-              "data-testid": l(i, "checkboxMark")
-            }
-          ),
-          /* @__PURE__ */ e(Q, { element: "span", children: u })
+          /* @__PURE__ */ l(g, { element: "span", className: d.content, children: [
+            typeof s == "string" ? /* @__PURE__ */ r(
+              g,
+              {
+                element: "strong",
+                textStyle: "typography.heading.4",
+                className: d.heading,
+                children: s
+              }
+            ) : s,
+            p
+          ] })
         ] })
       ]
     }
   );
-}, fo = j(U);
+}, U = A(T);
+U.displayName = "IressRadio";
 export {
-  fo as IressRadio
+  U as IressRadio
 };

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

@@ -0,0 +1,56 @@
+export declare const radio: import('../../styled-system/types').SlotRecipeRuntimeFn<"label" | "input" | "mark" | "content" | "heading" | "root", {
+    checked: {
+        true: {
+            label: {
+                borderColor: "[currentColor]";
+            };
+        };
+    };
+    variant: {
+        card: {
+            root: {
+                textStyle: "typography.body.md";
+            };
+            label: {
+                p: "spacing.4";
+                width: "12/12";
+                cursor: "pointer";
+                borderRadius: "radius.system.layout";
+                border: "table";
+                display: "flex";
+                flexDirection: "row-reverse";
+                alignItems: "start";
+                _hover: {
+                    backgroundColor: "colour.neutral.20";
+                };
+            };
+            content: {
+                flex: "1";
+            };
+            mark: {
+                flex: "[0]";
+                mr: "none";
+                focusable: "true";
+            };
+            input: {
+                focusable: "label-after";
+            };
+        };
+        touch: {
+            label: {
+                border: "table";
+                borderRadius: "radius.system.form";
+                p: "spacing.3";
+                _hover: {
+                    bg: "colour.neutral.20";
+                };
+            };
+            mark: {
+                focusable: "true";
+            };
+            input: {
+                focusable: "label-after";
+            };
+        };
+    };
+}>;